新增了简版的工具栏和顶部菜单，修复了撤销后没有清理canvas的bug

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "ddei-editor",
-  "version": "1.2.41-114",
+  "version": "1.2.41-121",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ddei-editor",
-      "version": "1.2.41-114",
+      "version": "1.2.41-121",
       "license": "Apache License 2.0",
       "dependencies": {
-        "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-114.tgz"
+        "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-121.tgz"
       },
       "devDependencies": {
         "@tsconfig/node18": "^18.2.0",
@@ -518,9 +518,9 @@
       "integrity": "sha512-tdMuLdcJyreope1BWfnYqTQaIkSIrU/KtY9yX5mNGd+tYeJ0Y99ARHDuYnEABPX/8yh/r0Kl169v5ODg2vr98g=="
     },
     "node_modules/ddei-framework": {
-      "version": "1.2.41-114",
+      "version": "1.2.41-121",
-      "resolved": "file:../ddei-framework/ddei-framework-1.2.41-114.tgz",
+      "resolved": "file:../ddei-framework/ddei-framework-1.2.41-121.tgz",
-      "integrity": "sha512-NkwtXb+lwp3SbV3f4l9SeDAWelXEw4IKxpYnuZTeCrnxI2zqp9Ug5ApD3yYgJOf/NA0jw482buJ04CInQYWikw==",
+      "integrity": "sha512-M7/2QFzEjt1m4HUusaagSL17/G4UUT9ks75Cs4UXB5/SPls9xMqZCRu29Wb1kTQ4M9Z7xlO0ArcOju6dsvY/+w==",
       "license": "Apache License 2.0",
       "dependencies": {
         "ddei-autolink": "^1.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddei-editor",
-  "version": "1.2.41-114",
+  "version": "1.2.41-121",
   "private": false,
   "type": "module",
   "author": "hoslay <3697355039@qq.com>",
@@ -49,7 +49,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-     "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-114.tgz"
+     "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-121.tgz"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.0",

plugins/core/dialogs/ChooseControlDialog.vue

@@ -2,8 +2,11 @@
   <div :id="editor?.id + '_' + dialogId" class="ddei-core-dialog-choosecontrol" v-if="forceRefresh">
     <div class="ddei-core-dialog-choosecontrol-content">
       <div class="ddei-core-dialog-choosecontrol-content-itempanel" v-if="group">
-        <div @click="ok(control)" :class="{ 'ddei-core-dialog-choosecontrol-content-itempanel-item': true}"
+        <div @click="ok(control,$event)"
-          :title="control.desc" v-for="control in group.controls">
+          @mousedown="prepareDrag(control, $event)"
+          @mousemove="dragMove($event)"
+          :class="{ 'ddei-core-dialog-choosecontrol-content-itempanel-item': true}" :title="control.desc"
+          v-for="control in group.controls">
           <img class="icon" v-if="!control.icon" :src="editor?.icons[control.id]" />
           <div class="icon-html" v-if="control.icon" v-html="control.icon"></div>
           <div class="text">{{ control.name }}</div>
@@ -52,11 +55,33 @@ export default {
       }
     },
 
-    ok(control){
+    ok(control, evt) {
+      delete this.isDrag
+      delete this.dragControl
       if (this.editor?.tempPopData[this.dialogId]?.callback?.ok) {
-        this.editor?.tempPopData[this.dialogId]?.callback?.ok(this.group,control);
+        this.editor?.tempPopData[this.dialogId]?.callback?.ok(this.group, control, evt);
+      }
+    },
+
+    prepareDrag(control, evt) {
+      if (this.editor?.tempPopData[this.dialogId]?.callback?.drag) {
+        this.isDrag = true
+        this.dragControl = control
+      }
+      
+    },
+
+    dragMove(evt) {
+      if (this.isDrag){
+        if (this.editor?.tempPopData[this.dialogId]?.callback?.drag) {
+
+          this.editor?.tempPopData[this.dialogId]?.callback?.drag(this.group, this.dragControl, evt);
+          delete this.isDrag
+          delete this.dragControl
         }
       }
+    },
+
 
   }
 };

plugins/core/hotkeys/actions/key-action-rerevoke.ts

@@ -74,6 +74,7 @@ class DDeiKeyActionReRevoke extends DDeiKeyAction {
             let jsonData = JSON.parse(hisData?.data)
             if (jsonData) {
               let ddInstance = editor?.ddInstance;
+              ddInstance.stage.destroyRender()
               let hisFile = DDeiFile.loadFromJSON(jsonData, {
                 currentDdInstance: ddInstance,
               });
@@ -109,6 +110,7 @@ class DDeiKeyActionReRevoke extends DDeiKeyAction {
         if (hisData?.data) {
           let jsonData = JSON.parse(hisData?.data)
           if (jsonData) {
+            ddInstance.stage.destroyRender()
             let tempData = { "currentDdInstance": ddInstance, "currentStage": ddInstance.stage }
             tempData[ddInstance.stage.id] = ddInstance.stage
             let layers = [];

plugins/core/hotkeys/actions/key-action-revoke.ts

@@ -75,6 +75,7 @@ class DDeiKeyActionRevoke extends DDeiKeyAction {
             let jsonData = JSON.parse(hisData?.data)
             if (jsonData) {
               let ddInstance = editor?.ddInstance;
+              ddInstance.stage.destroyRender()
               let hisFile = DDeiFile.loadFromJSON(jsonData, {
                 currentDdInstance: ddInstance,
               });
@@ -108,10 +109,12 @@ class DDeiKeyActionRevoke extends DDeiKeyAction {
     } else if (histype == 'stage') {
       //修改当前操作控件坐标
       if (ddInstance && ddInstance.stage) {
+        
         let hisData = ddInstance.stage.revokeHistroyData();
         if (hisData?.data) {
           let jsonData = JSON.parse(hisData?.data)
           if (jsonData) {
+            ddInstance.stage.destroyRender()
             let tempData = { "currentDdInstance": ddInstance, "currentStage": ddInstance.stage }
             tempData[ddInstance.stage.id] = ddInstance.stage
             let layers = [];

plugins/core/layouts/simple-layout.ts

@@ -12,7 +12,7 @@ class DDeiCoreSimpleLayout extends DDeiPluginBase{
   static defaultIns: DDeiCoreSimpleLayout = new DDeiCoreSimpleLayout();
 
   defaultOptions: object = {
-    other: ['ddei-core-panel-toolbox-simple'],
+    other: ['ddei-core-panel-toolbox-simple', 'ddei-core-panel-topmenu-simple'],
     middle: ['ddei-core-panel-canvasview'],
     right: [],
     bottom: ['ddei-core-panel-bottommenu']

plugins/core/panels/common/FileInfo.vue

@@ -302,7 +302,7 @@ export default {
               new DDeiSheet({
                 name: "页面-1",
                 desc: "页面-1",
-                stage: DDeiStage.initByJSON({ id: "stage_1" }),
+                stage: DDeiStage.initByJSON({ id: "stage_1" }, { currentDdInstance: ddInstance }),
                 active: DDeiActiveType.ACTIVE,
               }),
             ],
@@ -321,6 +321,7 @@ export default {
         this.editor.currentFileIndex = this.editor.files.length - 1;
         let sheets = file?.sheets;
         if (file && sheets && ddInstance) {
+          ddInstance.stage.destroyRender()
           let stage = sheets[0].stage;
           stage.ddInstance = ddInstance;
           //刷新页面

plugins/core/panels/index.ts

@@ -8,6 +8,7 @@ import DDeiCoreCanvasViewPanel from './canvasview';
 import DDeiCoreBottomMenuPanel from './bottommenu';
 import DDeiCoreCommonPanels from './common';
 import DDeiCoreBottomPanels from './bottom';
+import DDeiCoreSimplePanels from './simple';
 
 class DDeiCorePanels extends DDeiPluginBase{
   
@@ -18,7 +19,7 @@ class DDeiCorePanels extends DDeiPluginBase{
   static defaultIns:DDeiCorePanels = new DDeiCorePanels(null);
 
   plugins: object[] = [DDeiCoreTopMenuPanel, DDeiCoreToolboxPanel, DDeiCoreQuickColorViewPanel, DDeiCorePropertyViewPanel, 
-    DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels]
+    DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels, DDeiCoreSimplePanels]
 
   getPanels(editor){
     let panels = []
@@ -61,8 +62,9 @@ export * from './canvasview'
 export * from './bottommenu'
 export * from './common'
 export * from './bottom'
+export * from './simple'
 export {
   DDeiCorePanels, DDeiCoreTopMenuPanel, DDeiCoreToolboxPanel, DDeiCoreQuickColorViewPanel, DDeiCorePropertyViewPanel,
-  DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels
+  DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels, DDeiCoreSimplePanels
 }
 export default DDeiCorePanels

plugins/core/panels/simple/ToolboxSimple.vue

@@ -251,7 +251,8 @@ export default {
       if ((layer.display == 0 && !layer.tempDisplay) || layer.lock) {
         return;
       }
-      DDeiEditorUtil.hiddenDialog(this.editor, "ddei-core-dialog-choosecontrol")
+      
+      
       //创建控件
       if(control){
         if (editMode != 4){
@@ -307,6 +308,7 @@ export default {
           this.editor.changeState(DDeiEditorState.DESIGNING);
         }
       }
+      DDeiEditorUtil.hiddenDialog(this.editor, "ddei-core-dialog-choosecontrol")
     },
 
     
@@ -340,7 +342,8 @@ export default {
           DDeiEditorUtil.showDialog(this.editor, "ddei-core-dialog-choosecontrol", {
             controlGroup: group,
             callback: {
-              ok: this.changeGroupControl
+              ok: this.changeGroupControl,
+              drag: this.options?.dragCreate == 1 ? this.dragCreateControlPrepare : null
             }
           }, { type: type,hiddenMask: true }, el, true, true)
         }
@@ -349,7 +352,7 @@ export default {
     
     },
 
-    changeGroupControl(group,control){
+    changeGroupControl(group,control,evt){
       this.changeEditMode(group?.editMode)
       if(group?.editMode == 4){
         DDeiEditorUtil.lineInitJSON = {
@@ -367,6 +370,19 @@ export default {
       });
     },
 
+    dragCreateControlPrepare(group, control,evt){
+      
+      this.changeEditMode(group?.editMode)
+      group.currentControl = control
+      if (this.options?.dragCreate){
+        this.createControlPrepare(group,evt)
+      }
+      this.forceRefreshGroup = false
+      this.$nextTick(() => {
+        this.forceRefreshGroup = true;
+      });
+    },
+
     /**
      * 准备拖拽
      */

plugins/core/panels/simple/TopMenuSimple.vue

@@ -0,0 +1,553 @@
+<template>
+  <div @mousedown="changeEditorFocus" v-if="forceRefresh" ref="topmenu" class="ddei-core-panel-topmenu-simple">
+    <div
+      :class="{ 'item-drag': options?.drag == 1 && options?.direct != 2, 'item-drag-2': options?.drag == 1 && options?.direct == 2, 'item-block': options?.drag != 1 }"
+      @mousedown="options?.drag == 1 && prepareDragBox()">
+    </div>
+    <div class="item" @click="newFile">
+      新建
+    </div>
+    <div class="item" @click="openFile">
+      打开
+    </div>
+    <div class="item" @click="save">
+      保存
+    </div>
+    <div class="item" @click="download">
+      下载
+    </div>
+    <div class="item-block"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import {DDeiEditor} from "ddei-framework";
+import {DDeiEditorState} from "ddei-framework";
+import {DDeiEditorUtil} from "ddei-framework";
+import {DDeiEditorEnumBusCommandType} from "ddei-framework";
+import {DDeiUtil} from "ddei-framework";
+import {DDeiEnumBusCommandType} from "ddei-framework";
+import { DDeiActiveType } from "ddei-framework";
+import { DDeiFileState } from "ddei-framework";
+import { DDeiFile } from "ddei-framework";
+import { DDeiStage } from "ddei-framework";
+import { DDeiSheet } from "ddei-framework";
+
+export default {
+  name: "ddei-core-panel-topmenu-simple",
+  extends: null,
+  mixins: [],
+  props: {
+    //外部传入的插件扩展参数
+    options: {
+      type: Object,
+      default: null
+    },
+    editor: {
+      type: DDeiEditor,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      forceRefresh: true
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    
+  },
+  mounted() {
+    let middleCanvas = document.getElementById(this.editor.id + "_canvas");
+    // 创建 ResizeObserver 实例
+    const resizeObserver = new ResizeObserver(entries => {
+      // entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息
+      for (const entry of entries) {
+        // 获取宽度和高度
+        const { width, height } = entry.contentRect;
+        if (width != 0 && height != 0) {
+          
+          this.resetPosition(width,height)
+          
+        }
+      }
+    });
+
+    //开始监听目标元素的大小变化
+    resizeObserver.observe(middleCanvas);
+    this.refreshData();
+  },
+  methods: {
+    /**
+     * 保存
+     * @param evt
+     */
+    save(evt) {
+      this.editor.changeState(DDeiEditorState.DESIGNING);
+      this.editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
+      this.editor.bus.push(DDeiEditorEnumBusCommandType.SaveFile, {}, evt);
+      this.editor.bus.executeAll();
+    },
+
+    /**
+     * 下载文件
+     */
+    download(evt) {
+      if (this.editor?.ddInstance?.stage) {
+        //获取json信息
+        let file = this.editor?.files[this.editor?.currentFileIndex];
+        if (file) {
+          let json = file.toJSON();
+          if (json) {
+            // 创建隐藏的可下载链接
+            let eleLink = document.createElement("a");
+            eleLink.download = file.name + ".dei";
+            eleLink.style.display = "none";
+            // 字符内容转变成blob地址
+            let blob = new Blob([JSON.stringify(json)]);
+            eleLink.href = URL.createObjectURL(blob);
+            // 触发点击
+            document.body.appendChild(eleLink);
+            eleLink.click();
+            // 然后移除
+            document.body.removeChild(eleLink);
+            this.editor.changeState(DDeiEditorState.DESIGNING);
+          }
+        }
+
+      }
+    },
+
+    /**
+     * 打开文件
+     * @param evt
+     */
+    async openFile(evt) {
+      let rsState = DDeiEditorUtil.invokeCallbackFunc("EVENT_ADD_FILE_BEFORE", "LOAD_FILE", null, this.editor.ddInstance, evt)
+      if (rsState != -1) {
+        let openFileHandle = await showOpenFilePicker({
+          description: "DDei Design File",
+          types: [{
+            accept: {
+
+              'text/plain': ['.dei']
+            }
+          }]
+        })
+        //获取图片数据  这个file其实就是和input元素<input type="file" id="file">，document.querySelector("#file").files[0]一样
+        let openFile = await openFileHandle[0].getFile();
+        //转成base64
+        let read = new FileReader();
+        read.readAsText(openFile);
+        read.onload = async () => {
+          //创建img，插入页面中
+          let result = read.result;
+          let resultJSON = JSON.parse(result);
+          let ddInstance = this.editor?.ddInstance;
+          let file = DDeiFile.loadFromJSON(resultJSON, {
+            currentDdInstance: ddInstance,
+          });
+          let openedFiles = this.editor.files;
+          let openedFileIndex = -1
+          if (!file.id) {
+            file.id = DDeiUtil.getUniqueCode()
+          }
+          for (let fi = 0; fi < openedFiles.length; fi++) {
+            if ((openedFiles[fi].id && openedFiles[fi].id == file.id)) {
+              openedFileIndex = fi
+              break;
+            }
+          }
+          ddInstance.stage.destroyRender()
+          if (openedFileIndex == -1) {
+            file.localFileHandler = openFileHandle[0]
+            file.local = 1
+            this.editor.addFile(file);
+            for (let x = 0; x < this.editor.files.length; x++) {
+              this.editor.files[x].active = DDeiActiveType.NONE;
+            }
+            this.editor.currentFileIndex = this.editor.files.length - 1;
+            file.state = DDeiFileState.NONE;
+            file.active = DDeiActiveType.ACTIVE;
+            let sheets = file?.sheets;
+
+            if (file && sheets && ddInstance) {
+              file.changeSheet(file.currentSheetIndex);
+
+              let stage = sheets[file.currentSheetIndex].stage;
+
+              stage.ddInstance = ddInstance;
+              ddInstance.disabled = false
+              //记录文件初始日志
+              file.initHistroy();
+              file.histroy[0].isNew = true;
+              //刷新页面
+              ddInstance.stage = stage;
+              //加载场景渲染器
+              stage.initRender();
+              //设置视窗位置到中央
+              if (!stage.wpv) {
+                //缺省定位在画布中心点位置
+                stage.wpv = {
+                  x:
+                    -(
+                      stage.width -
+                      ddInstance.render.container.clientWidth
+                    ) / 2,
+                  y:
+                    -(
+                      stage.height -
+                      ddInstance.render.container.clientHeight
+                    ) / 2,
+                  z: 0,
+                };
+              }
+              this.editor.changeState(DDeiEditorState.DESIGNING);
+              ddInstance.bus.push(
+                DDeiEditorEnumBusCommandType.ClearTemplateUI
+              );
+              ddInstance.bus.push(
+                DDeiEditorEnumBusCommandType.RefreshEditorParts,
+                { parts: ["bottommenu", "topmenu"] }
+              );
+              ddInstance?.bus?.push(DDeiEnumBusCommandType.RefreshShape);
+              ddInstance?.bus?.executeAll();
+            }
+          } else {
+
+            file = this.editor.files[openedFileIndex]
+            if (file && ddInstance) {
+              for (let x = 0; x < this.editor.files.length; x++) {
+                this.editor.files[x].active = DDeiActiveType.NONE;
+              }
+              file.active = DDeiActiveType.ACTIVE
+              this.editor.currentFileIndex = openedFileIndex;
+              let stage = file.sheets[file.currentSheetIndex].stage;
+              stage.ddInstance = ddInstance;
+
+              //刷新页面
+              ddInstance.stage = stage;
+              ddInstance.disabled = false
+              //加载场景渲染器
+              stage.initRender();
+              this.editor.changeState(DDeiEditorState.DESIGNING);
+              ddInstance.bus.push(
+                DDeiEditorEnumBusCommandType.ClearTemplateUI
+              );
+              ddInstance.bus.push(
+                DDeiEditorEnumBusCommandType.RefreshEditorParts,
+                { parts: ["bottommenu", "topmenu"] }
+              );
+              ddInstance?.bus?.push(DDeiEnumBusCommandType.RefreshShape);
+              ddInstance?.bus?.executeAll();
+            }
+          }
+          DDeiEditorUtil.invokeCallbackFunc("EVENT_ADD_FILE_AFTER", "LOAD_FILE", { file: file }, this.editor.ddInstance, evt)
+        }
+      }
+    },
+    /**
+     * 新建文件
+     * @param evt
+     */
+    newFile(evt) {
+      if (this.editor?.ddInstance) {
+        let ddInstance = this.editor.ddInstance;
+        let file = DDeiFile.loadFromJSON(
+          {
+            name: "新建文件_NEW",
+            path: "/新建文件_NEW",
+            sheets: [
+              new DDeiSheet({
+                name: "页面-1",
+                desc: "页面-1",
+                stage: DDeiStage.initByJSON({ id: "stage_1" },{ currentDdInstance: ddInstance }),
+                active: DDeiActiveType.ACTIVE,
+              }),
+            ],
+            currentSheetIndex: 0,
+            state: DDeiFileState.NEW,
+            active: DDeiActiveType.ACTIVE,
+          },
+          { currentDdInstance: ddInstance }
+        );
+        //添加文件
+        if (this.editor.currentFileIndex != -1) {
+          this.editor.files[this.editor.currentFileIndex].active =
+            DDeiActiveType.NONE;
+        }
+        this.editor.addFile(file);
+        this.editor.currentFileIndex = this.editor.files.length - 1;
+        let sheets = file?.sheets;
+        if (file && sheets && ddInstance) {
+          ddInstance.stage.destroyRender()
+          let stage = sheets[0].stage;
+          stage.ddInstance = ddInstance;
+          //刷新页面
+          ddInstance.stage = stage;
+          //记录文件初始日志
+          file.initHistroy();
+          //设置视窗位置到中央
+          if (!stage.wpv) {
+            //缺省定位在画布中心点位置
+            stage.wpv = {
+              x: -(stage.width - ddInstance.render.container.clientWidth) / 2,
+              y: -(stage.height - ddInstance.render.container.clientHeight) / 2,
+              z: 0,
+            };
+          }
+          //加载场景渲染器
+          stage.initRender();
+          ddInstance.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
+          ddInstance.bus.push(DDeiEnumBusCommandType.RefreshShape);
+          ddInstance.bus.push(DDeiEditorEnumBusCommandType.RefreshEditorParts, {
+            parts: ["bottommenu", "topmenu"],
+          });
+
+          this.editor.changeState(DDeiEditorState.DESIGNING);
+          ddInstance?.bus?.executeAll();
+        }
+      }
+    },
+
+    resetPosition(width,height){
+      
+      //横向
+      if (this.options?.direct == 2) {
+        this.$refs['topmenu'].style.maxWidth = (width - 80) + "px"
+        this.$refs['topmenu'].style.flexDirection = ""
+        if (this.options?.width) {
+          this.$refs['topmenu'].style.width = this.options.width
+        } else {
+          this.$refs['topmenu'].style.width = ""
+        }
+        if (this.options?.height) {
+          this.$refs['topmenu'].style.height = this.options.height
+        } else {
+          this.$refs['topmenu'].style.height = "32px"
+        }
+
+      }
+      //纵向
+      else {
+        this.$refs['topmenu'].style.flexDirection = "column";
+        this.$refs['topmenu'].style.maxHeight = (height - 80) + "px"
+        if (this.options?.width) {
+          this.$refs['topmenu'].style.width = this.options.width
+        } else {
+          this.$refs['topmenu'].style.width = "32px"
+        }
+        if (this.options?.height) {
+          this.$refs['topmenu'].style.height = this.options.height
+        } else {
+          this.$refs['topmenu'].style.height = ""
+        }
+      }
+      //读取缓存位置
+      let cachePos = null;
+      if (this.options?.drag == 1) {
+        cachePos = localStorage.getItem("pos-" + this.editor.id + "-ddei-core-panel-topmenu-simple")
+      }
+      if (!cachePos) {
+        //位置
+        switch (this.options?.position) {
+          case 2:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
+            this.$refs['topmenu'].style.top = "30px";
+            break;
+          case 3:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
+            this.$refs['topmenu'].style.top = "30px";
+            break;
+          case 4:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
+            break;
+          case 5:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
+            break;
+          case 6:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
+            break;
+          case 7:
+            this.$refs['topmenu'].style.left = "30px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
+            break;
+          case 8:
+            this.$refs['topmenu'].style.left = "30px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
+            break;
+          case 9:
+            this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
+            this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
+            break;
+          default:
+            this.$refs['topmenu'].style.left = "30px";
+            this.$refs['topmenu'].style.top = "30px";
+            break;
+        }
+
+      } else {
+        let posJson = JSON.parse(cachePos)
+        this.$refs['topmenu'].style.left = posJson.left + "px";
+        this.$refs['topmenu'].style.top = posJson.top + "px";
+      }
+      this.$refs['topmenu'].style.display="flex"
+    },
+
+    refreshData() {
+      
+    },
+
+    //强制刷新当前以及下层组件
+    forceRefreshParts(parts) {
+      if (!parts || parts == 'topmenu' || parts.indexOf('topmenu') != -1){
+        this.forceRefresh = false
+        this.$nextTick(() => {
+          this.forceRefresh = true;
+          if (this.refreshData) {
+            this.refreshData();
+          }
+        });
+      }
+    },
+
+  
+
+    /**
+     * 准备拖拽
+     */
+    prepareDragBox(e) {
+      this.editor.dragPart = this;
+      this.$refs['topmenu'].style.userSelect = "none";
+      this.$refs['topmenu'].children[0].style.backgroundColor = "var(--dot)";
+      this.$refs['topmenu'].style.pointerEvents = "none";
+      
+    },
+
+    /**
+     * 拖拽中
+     */
+    boxDraging(e) {
+      if (this.editor.dragPart) {
+        let middleCanvas = document.getElementById(this.editor.id + "_canvas");
+        let posLeft = e.offsetX - 15
+        let posTop = e.offsetY - 5
+        if(this.options?.direct == 2){
+          posLeft = e.offsetX-5
+          posTop = e.offsetY-15
+        }
+        if (posLeft < 0) {
+          posLeft = 0
+        }
+        if (posLeft < 0) {
+          posTop = 0
+        }
+        if (posLeft + this.$refs['topmenu'].offsetWidth > middleCanvas.offsetWidth) {
+          posLeft = middleCanvas.offsetWidth - this.$refs['topmenu'].offsetWidth
+        }
+        if (posTop + this.$refs['topmenu'].offsetHeight > middleCanvas.offsetHeight) {
+          posTop = middleCanvas.offsetHeight - this.$refs['topmenu'].offsetHeight
+        }
+        this.$refs['topmenu'].style.left = posLeft +"px";
+        this.$refs['topmenu'].style.top = posTop +"px";
+      }
+    },
+
+    /**
+     * 拖拽完毕
+     */
+    boxDragEnd(e) {
+      if (this.editor.dragPart) {
+        let posJson = { left: this.$refs['topmenu'].offsetLeft, top: this.$refs['topmenu'].offsetTop}
+        localStorage.setItem("pos-" + this.editor.id + "-ddei-core-panel-topmenu-simple", JSON.stringify(posJson))
+        this.$refs['topmenu'].style.userSelect = "";
+        this.$refs['topmenu'].style.pointerEvents = "";
+        this.$refs['topmenu'].children[0].style.backgroundColor = "";
+        delete this.editor.dragPart;
+      }
+    },
+
+    
+    /**
+     * 焦点进入当前区域
+     */
+    changeEditorFocus() {
+      this.editor.changeState(DDeiEditorState.TOP_MENU_OPERATING);
+      this.editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
+      this.editor.bus.executeAll();
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ddei-core-panel-topmenu-simple {
+  text-align: center;
+  position: absolute;
+  
+  z-index: 99999;
+  border: 1px solid var(--panel-border);
+  box-shadow: 0px 2px 24px 0px hsl(0deg 0% 0% /0.25);
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: var(--panel-background);
+  display: flex;
+  font-size: 14px;
+  justify-content: start;
+  align-items: center;
+
+  .item {
+    width: 60px;
+
+    height: 24px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-right: 0.5px solid #e2dede;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+
+    &:hover {
+      background-color: #e2dede;
+      cursor: pointer;
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+  .item-selected {
+    background-color: #e2dede;
+  }
+
+  .item-block {
+    width: 10px;
+
+    height: 10px;
+  }
+
+    .item-drag {
+      width: 100%;
+      height: 10px;
+      background-color: #efefef;
+  
+      &:hover {
+        background-color: var(--dot);
+        cursor: grab;
+      }
+    }
+    .item-drag-2 {
+      height: 100%;
+      width: 10px;
+      background-color: #efefef;
+
+      &:hover {
+        background-color: var(--dot);
+        cursor: grab;
+      }
+    }
+}
+</style>

plugins/core/panels/simple/index.ts

@@ -0,0 +1,51 @@
+import { DDeiPluginBase } from "ddei-framework";
+import DDeiCoreToolboxSimplePanel from './toolbox-simple';
+import DDeiCoreTopMenuSimplePanel from './topmenu-simple';
+
+class DDeiCoreSimplePanels extends DDeiPluginBase {
+
+
+  type: string = "package"
+  /**
+   * 缺省实例
+   */
+  static defaultIns: DDeiCoreSimplePanels = new DDeiCoreSimplePanels(null);
+
+  plugins: object[] = [DDeiCoreToolboxSimplePanel, DDeiCoreTopMenuSimplePanel]
+
+  getPanels(editor) {
+    let panels = []
+    this.plugins?.forEach(plugin => {
+      let ls
+      if (DDeiPluginBase.isSubclass(plugin, DDeiPluginBase)) {
+        ls = plugin.defaultIns.getPanels(editor);
+      } else if (plugin instanceof DDeiPluginBase) {
+        ls = plugin.getPanels(editor);
+      }
+      if (ls?.length > 0) {
+        panels = panels.concat(ls);
+      }
+    })
+    return panels
+  }
+
+
+
+  static configuration(options) {
+    if (options) {
+      //解析options，只使用自己相关的
+      let panels = new DDeiCoreSimplePanels(options);
+      for (let i = 0; i < panels.plugins?.length; i++) {
+        panels.plugins[i] = panels.plugins[i].configuration(options, true)
+      }
+      return panels;
+    }
+    return DDeiCoreSimplePanels;
+  }
+}
+
+
+export {
+  DDeiCoreSimplePanels, DDeiCoreToolboxSimplePanel, DDeiCoreTopMenuSimplePanel
+}
+export default DDeiCoreSimplePanels

plugins/core/panels/simple/toolbox-simple.ts

@@ -7,10 +7,11 @@ class DDeiCoreToolboxSimplePanel extends DDeiPluginBase{
    * 缺省实例
    */
   static defaultIns: DDeiCoreToolboxSimplePanel = new DDeiCoreToolboxSimplePanel({
-    direct:2,//方向，1纵向，2横向
+    direct:1,//方向，1纵向，2横向
-    position:1,//位置1-9顺时针，1为左上角，9为中心
+    position:8,//位置1-9顺时针，1为左上角，9为中心
     drag:1,//是否允许拖拽位置
     chooseCreate:0,//是否在选择控件时创建一个控件
+    dragCreate:0,//是否在拖拽时创建控件
     groups:[
       {
         editMode: 1,

plugins/core/panels/simple/topmenu-simple.ts

@@ -0,0 +1,47 @@
+import {DDeiPluginBase} from "ddei-framework";
+import TopMenuSimple from './TopMenuSimple.vue';
+
+class DDeiCoreTopMenuSimplePanel extends DDeiPluginBase{
+  name: string = TopMenuSimple.name
+  /**
+   * 缺省实例
+   */
+  static defaultIns: DDeiCoreTopMenuSimplePanel = new DDeiCoreTopMenuSimplePanel({
+    direct:2,//方向，1纵向，2横向
+    position:2,//位置1-9顺时针，1为左上角，9为中心
+    drag:1//是否允许拖拽位置
+  });
+
+  plugins: object[] = [TopMenuSimple]
+
+  getPanels(editor){
+    return this.plugins;
+  }
+
+
+  
+  static configuration(options, fullConfig: boolean = false) {
+    //解析options，只使用自己相关的
+    if (options) {
+      let newOptions = {}
+      if (fullConfig) {
+        if (fullConfig) {
+          if (options[TopMenuSimple.name]) {
+            for (let i in options[TopMenuSimple.name]) {
+              newOptions[i] = options[TopMenuSimple.name][i]
+            }
+          }
+        }
+      } else {
+        newOptions = options
+      }
+      if (newOptions && Object.keys(newOptions).length !== 0) {
+        let panels = new DDeiCoreTopMenuSimplePanel(newOptions);
+        return panels;
+      }
+    }
+    return DDeiCoreTopMenuSimplePanel;
+  }
+}
+
+export default DDeiCoreTopMenuSimplePanel

plugins/core/panels/toolbox/index.ts

@@ -1,6 +1,5 @@
 import { DDeiPluginBase } from "ddei-framework";
 import DDeiCoreToolboxPanel from './toolbox';
-import DDeiCoreToolboxSimplePanel from './toolbox-simple';
 
 class DDeiCoreToolboxPanels extends DDeiPluginBase {
 
@@ -11,7 +10,7 @@ class DDeiCoreToolboxPanels extends DDeiPluginBase {
    */
   static defaultIns: DDeiCoreToolboxPanels = new DDeiCoreToolboxPanels(null);
 
-  plugins: object[] = [DDeiCoreToolboxPanel, DDeiCoreToolboxSimplePanel]
+  plugins: object[] = [DDeiCoreToolboxPanel]
 
   getPanels(editor) {
     let panels = []
@@ -46,6 +45,6 @@ class DDeiCoreToolboxPanels extends DDeiPluginBase {
 
 
 export {
-  DDeiCoreToolboxPanels, DDeiCoreToolboxPanel, DDeiCoreToolboxSimplePanel
+  DDeiCoreToolboxPanels, DDeiCoreToolboxPanel
 }
 export default DDeiCoreToolboxPanels

plugins/quickcontrol/QuickChooseControlDialog.vue

@@ -2,7 +2,7 @@
   <div :id="editor?.id + '_' + dialogId" class="ddei-ext-dialog-quickchoosecontrol" v-if="forceRefresh">
     <div v-for="group in groups" v-show="group.display == true" class="ddei-ext-dialog-quickchoosecontrol-group">
       <div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel"
-        v-if="customControls || customGroups || group.expand == true">
+        v-if="customControls || customGroups || group.expand == true || model">
         <div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel-item" :title="control.desc"
           v-for="control in group.controls" @click="quickCreateControl(control.id)">
           <img class="icon" v-if="!control.icon" :src="editor?.icons[control.id]" />
@@ -44,7 +44,8 @@ export default {
     return {
       dialogId: 'ddei-ext-dialog-quickchoosecontrol',
       //分组数据
-      groups: []
+      groups: [],
+      model:null
     };
   },
   computed: {},
@@ -86,6 +87,8 @@ export default {
         });
         this.groups = newGroups
       }else{
+        let model = this.editor.tempPopData ? this.editor.tempPopData['ddei-ext-dialog-quickchoosecontrol']?.model : null
+        if (!model){
           DDeiEditorUtil.readRecentlyToolGroups()
           let hisGroups = DDeiEditorUtil.recentlyToolGroups;
           let gps = []
@@ -107,7 +110,31 @@ export default {
             
             this.groups = gps;
           }
+        }else{
+          let newGroups = []
+          
+          for (let i = 0; i < groups.length; i++) {
+            let finded = false
+            for(let c = 0;c < groups[i].controls.length;c++){
+              if (groups[i].controls[c].id == model.modelCode) {
+                finded = true
+                break;
               }
+            }
+            if (finded){
+              newGroups.push(groups[i])
+              break;
+            }
+          }
+          this.model = model
+          this.groups = newGroups
+        }
+      }
+      this.forceRefresh = false
+      this.$nextTick(() => {
+        this.forceRefresh = true;
+
+      });
     },
 
     quickCreateControl(controlId){

plugins/quickcontrol/QuickControlPanel.vue

@@ -121,9 +121,6 @@ export default {
     mouseEnter(type,el,evt) {
       if(this.editor.state == 'designing'){
         if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
-          //显示弹出框
-          let elPos = evt.currentTarget.getBoundingClientRect()
-          // let elPos = DDeiUtil.getDomAbsPosition(evt.currentTarget)
           //向上区间寻找，是否有控件
           let existsControl = null;
           let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
@@ -131,22 +128,26 @@ export default {
           let outRect = DDeiAbstractShape.getOutRectByPV([model])
           if (type == 1) {
             let controls = layer.getSubModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
-            if (this.validControls(controls)){
+            controls = this.filtControls(model,controls)
+            if (controls.length > 0){
               existsControl = controls[0];
             }
           } else if (type == 2) {
             let controls = layer.getSubModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
-            if (this.validControls(controls)) {
+            controls = this.filtControls(model,controls)
+            if (controls.length > 0) {
               existsControl = controls[0];
             }
           } else if (type == 3) {
             let controls = layer.getSubModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
-            if (this.validControls(controls)) {
+            controls = this.filtControls(model,controls)
+            if (controls.length > 0) {
               existsControl = controls[0];
             }
           } else if (type == 4) {
             let controls = layer.getSubModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
-            if (this.validControls(controls)) {
+            controls = this.filtControls(model,controls)
+            if (controls.length > 0) {
               existsControl = controls[0];
             }
           }
@@ -279,15 +280,24 @@ export default {
       }
     },
 
-    validControls(controls){
+    filtControls(model,controls){
+      let returnControls = []
       if(controls?.length > 0){
         for(let i = 0;i < controls.length;i++){
           if (controls[i].baseModelType != 'DDeiLine'){
-            return true;
+            let define = DDeiUtil.getControlDefine(controls[i])
+            let filterMethod = null
+            if (define && define.filters && define.filters["LINE_OBI_FILTER"]) {
+              filterMethod = define.filters["LINE_OBI_FILTER"];
+            }
+            if (!filterMethod || filterMethod(model,{model:controls[i]})) {
+              returnControls.push(controls[i]);
             }
           }
+          
         }
-      return false
+      }
+      return returnControls
     }
   }
 };

src/App.vue

@@ -74,7 +74,7 @@ export default defineComponent({
       ]
     })
     const options = markRaw({
-      // currentLayout: "ddei-core-layout-simple",
+      currentLayout: "ddei-core-layout-simple",
       config: {
         // "readonly":true,
         "mark": "水印文本",
@@ -85,25 +85,25 @@ export default defineComponent({
         "background": {color:"#123456",opacity:0.1},
         // "theme": "ddei-core-theme-black",
         initData: {
-          controls:[
+          // controls:[
-            {
+          //   {
-              id: "act_1",
+          //     id: "act_1",
-              model: "102010",
+          //     model: "102010",
-              type: "emp_1",
+          //     type: "emp_1",
-              text: "第一步",
+          //     text: "第一步",
-              border:{color:"yellow",dash:[10,10,5,5],width:5},
+          //     border:{color:"yellow",dash:[10,10,5,5],width:5},
-              fill:{color:"grey"},
+          //     fill:{color:"grey"},
-            },
+          //   },
-            {
+          //   {
-              id: "act_2",
+          //     id: "act_2",
-              model: "102010",
+          //     model: "102010",
-              type: "emp_2",
+          //     type: "emp_2",
-              width: 200,
+          //     width: 200,
-              height: 100,
+          //     height: 100,
-              text: "第二步",
+          //     text: "第二步",
-              offsetY: -70,
+          //     offsetY: -70,
-            }
+          //   }
-          ]
+          // ]
         }
       },
       //配置扩展插件

src/editor/Editor.vue

@@ -203,7 +203,7 @@ export default {
     
     if (options?.config?.access){
       this.editor.setAccessInfo(options.config.access)
-    } else if (options.config.readonly == true || options.config.readonly == false) {
+    } else if (options?.config?.readonly == true || options?.config?.readonly == false) {
       this.editor.setEditable(!options.config.readonly)
     }