优化插件封装1

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.2.7",
       "license": "Apache License 2.0",
       "dependencies": {
-        "ddei-framework": "^1.2.25"
+        "ddei-framework": "^1.2.32"
       },
       "devDependencies": {
         "@tsconfig/node18": "^18.2.0",
@@ -518,9 +518,9 @@
       "integrity": "sha512-tdMuLdcJyreope1BWfnYqTQaIkSIrU/KtY9yX5mNGd+tYeJ0Y99ARHDuYnEABPX/8yh/r0Kl169v5ODg2vr98g=="
     },
     "node_modules/ddei-framework": {
-      "version": "1.2.25",
+      "version": "1.2.32",
-      "resolved": "https://registry.npmjs.org/ddei-framework/-/ddei-framework-1.2.25.tgz",
+      "resolved": "https://registry.npmjs.org/ddei-framework/-/ddei-framework-1.2.32.tgz",
-      "integrity": "sha512-mUD4sEH+HPcTcfxZ+zZpvGRKe25b2WXXE/RMP/7e22BIT6/H3EQ6ES7YzC+YZpV7U4lduxDl7pZNOiyXGVO07g==",
+      "integrity": "sha512-RS+wfr+gjUWqiZarPWUg1xi0yFKvfQKyrZ4otnwivm77ZMF5HOtSPEGIz38pWacava/FWppbYG8u/AMZfhW5TA==",
       "dependencies": {
         "ddei-autolink": "^1.1.1",
         "lodash": "^4.17.21",

package.json

@@ -49,7 +49,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-    "ddei-framework": "^1.2.25"
+    "ddei-framework": "^1.2.32"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.0",

plugins/core/dialogs/ChooseControlGroupDialog.vue

@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="subcontent" id="ddei-core-dialog-choosecontrolgroup_subcontent">
+    <div class="subcontent" v-show="subGroups?.length > 0" :id="editor?.id + '_ddei-core-dialog-choosecontrolgroup_subcontent'">
       <div class="group">
         <div class="item" v-for="group in subGroups" @click="chooseGroup(group.id)">
           <input type="checkbox" v-model="group.selected" style="pointer-events: none;" :name="group.id"
@@ -92,8 +92,8 @@ export default {
         })
         this.subGroups = groups
         this.menuId = menuid
-        let dialogEle = document.getElementById("ddei-core-dialog-choosecontrolgroup");
+        let dialogEle = document.getElementById(this.editor.id+"_ddei-core-dialog-choosecontrolgroup");
-        let subContentEle = document.getElementById("ddei-core-dialog-choosecontrolgroup_subcontent");
+        let subContentEle = document.getElementById(this.editor.id + "_ddei-core-dialog-choosecontrolgroup_subcontent");
         subContentEle.style.display = "block";
         let srcElement = evt.currentTarget;
         let dialogDomPos = DDeiUtil.getDomAbsPosition(dialogEle)

plugins/core/hotkeys/actions/key-action-cancel-select.ts

@@ -2,7 +2,7 @@ import {DDei} from "ddei-framework";
 import {DDeiKeyAction} from "ddei-framework";
 import {DDeiEnumBusCommandType} from "ddei-framework";
 import {DDeiEnumControlState} from "ddei-framework";
-import {DDeiEditorState} from "ddei-framework";
+import { DDeiEditorState, DDeiEnumOperateState } from "ddei-framework";
 
 /**
  * 键行为:取消全选
@@ -20,7 +20,7 @@ class DDeiKeyActionCancelSelect extends DDeiKeyAction {
   defaultOptions: object = {
     'keys': [
       //取消全选,500毫秒内，连续按两下esc键
-      { keys: "27", times: 2, interval: 500, editorState: DDeiEditorState.DESIGNING },
+      { keys: "27", times: 2, interval: 500, editorState: DDeiEditorState.DESIGNING,operateState:DDeiEnumOperateState.NONE },
     ]
   }
 

plugins/core/layouts/StandardLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ddei-editor-layout-standrad">
+  <div class="ddei-editor-layout-standrad" ref="layoutRoot">
     <div class="top" ref="top" v-show="topComponents?.length > 0">
       <component ref="topComponents" :editor="editor" v-for="(item,index) in topComponents" :is="item.comp"
         v-bind="item.options" :options="item.options"></component>
@@ -116,6 +116,7 @@ export default {
         // 获取宽度和高度
         const { width, height } = entry.contentRect;
         if (width != 0 && height != 0) {
+          
           this.editor.ddInstance.render.setSize(
             width,
             height,
@@ -124,6 +125,12 @@ export default {
           );
           this.editor.ddInstance.bus.push(DDeiEnumBusCommandType.RefreshShape);
           this.editor.ddInstance.bus.executeAll();
+          this.editor.leftWidth = this.$refs.left.offsetWidth;
+          this.editor.rightWidth = this.$refs.right.offsetWidth;
+          this.editor.topHeight = this.$refs.top.offsetHeight;
+          this.editor.bottomHeight = this.$refs.bottom.offsetHeight;
+          this.editor.middleWidth = this.$refs.middle.offsetWidth;
+          this.editor.middleHeight = this.$refs.middle.offsetHeight;
         }
 
       }
@@ -178,6 +185,43 @@ export default {
         }
       })
     },
+
+    // resetSize() {
+    //   let layoutRoot = this.$refs.layoutRoot;
+    //   let width = layoutRoot.scrollWidth
+    //   let height = layoutRoot.scrollHeight
+    //   if (!window.upSizeWidth || !window.upSizeHeight) {
+    //     window.upSizeWidth = width;
+    //     window.upSizeHeight = height;
+    //   } else {
+    //     let deltaWidth = width - window.upSizeWidth;
+    //     let deltaHeight = height - window.upSizeHeight;
+    //     if (this.editor.middleWidth + deltaWidth >= 305) {
+    //       window.upSizeWidth = width;
+    //       this.editor.middleWidth += deltaWidth;
+    //       this.editor.maxWidth =
+    //         this.editor.leftWidth +
+    //         this.editor.rightWidth +
+    //         this.editor.middleWidth;
+    //     }
+    //     if (this.editor.middleHeight + deltaHeight >= 305) {
+    //       window.upSizeHeight = height;
+    //       this.editor.middleHeight += deltaHeight;
+    //       this.editor.maxHeight =
+    //         this.editor.leftHeight +
+    //         this.editor.rightHeight +
+    //         this.editor.middleHeight;
+    //     }
+    //     this.editor.ddInstance.render.setSize(
+    //       this.editor.middleWidth,
+    //       this.editor.middleHeight,
+    //       0,
+    //       0
+    //     );
+    //     this.editor.ddInstance.bus.push(DDeiEnumBusCommandType.RefreshShape);
+    //     this.editor.ddInstance.bus.executeAll();
+    //   }
+    // },
   }
 };
 </script>
@@ -185,7 +229,7 @@ export default {
 <style lang="less" scoped>
 .ddei-editor-layout-standrad {
   width: 100%;
-  height: calc(100vh);
+  height: 100%;
   display: flex;
   flex-direction: column;
 

src/App.vue

@@ -2,13 +2,20 @@
 import DDeiEditorView from "./editor/Editor.vue";
 import { DDeiCoreTopMenuPanel, DDeiCoreThemeBlack, DDeiCoreControls, DDeiCoreHotkeys, DDeiKeyActionAllSelect, DDeiCorePropertyViewPanel, DDeiCoreToolboxPanel, DDeiCoreSheetsPanel, DDeiCoreChangeRatioPanel, DDeiCoreChangeRatioDialog, DDeiCoreShapeCountPanel, DDeiCoreBottomMenuPanel, DDeiCoreStandLayout, DDeiCoreOpenFilesViewPanel, DDeiCoreThemeDefault } from "@ddei/core";
 import { DDeiExtUML } from "@ddei/uml"
-import { defineComponent, markRaw } from "vue";
+import { defineComponent, markRaw, getCurrentInstance } from "vue";
 export default defineComponent({
   name: "APP",
   components: { DDeiEditorView },
-  setup() {
+  data() {
+    
     const options = markRaw({
       config: {
+        STAGE_WIDTH: 2000,
+        STAGE_HEIGHT:2000,
+        EXT_STAGE_WIDTH:false,
+        GLOBAL_HELP_LINE_ENABLE:false,
+        GLOBAL_ALLOW_STAGE_RATIO:false,
+        STAGE_RATIO:1.5,
         
       },
       //配置扩展插件
@@ -93,16 +100,40 @@ export default defineComponent({
     })
     const options1 = markRaw({
       config: {
-
+        // "readonly":true,
+        // "mask": "水印文本",
+        // "rule": "显示",
+        // "grid": "点阵",
+        // "paper": "A4",
+        // "background": "#123456",
+        // "theme": "black",
+        controls: [
+          {
+            id: "rect_1",
+            model: "102010",
+            code: "active_01",
+            width: 200,
+            height: 100,
+            text: "第一步"
+          },
+          {
+            id: "rect_2",
+            model: "102010",
+            code: "active_02",
+            width: 200,
+            height: 100,
+            text: "第二步"
+          }
+        ]
       },
       //配置扩展插件
       extensions: [
 
       ],
     })
+
     const options2 = markRaw({
       config: {
-
       },
       //配置扩展插件
       extensions: [
@@ -117,9 +148,29 @@ export default defineComponent({
         }),
       ],
     })
+    
     const options3 = markRaw({
       config: {
-
+        EXT_STAGE_WIDTH:false,
+        EXT_STAGE_HEIGHT:false,
+        controls: [
+          {
+            id: "rect_1",
+            model: "102010",
+            code: "active_01",
+            width: 200,
+            height: 100,
+            text: "第一步"
+          },
+          {
+            id: "rect_2",
+            model: "102010",
+            code: "active_02",
+            width: 200,
+            height: 100,
+            text: "第二步"
+          }
+        ]
       },
       //配置扩展插件
       extensions: [
@@ -154,14 +205,20 @@ export default defineComponent({
         }),
       ],
     })
+    
     return {
-      options,
+      options:options,
-      options1,
+      options1:options1,
-      options2,
+      options2:options2,
-      options3,
+      options3:options3,
-      options4,
+      options4:options4
     };
   },
+
+  methods:{
+  }
+
+  
 });
 </script>
 
@@ -172,7 +229,7 @@ export default defineComponent({
   <div style="width:400px;height:400px;float:left">
     <DDeiEditorView ref="editorViewer3" :options="options2" id="ddei_editor_3"></DDeiEditorView>
   </div>
-  <div style="width:400px;height:400px;float:left">
+  <div style="width:500px;height:500px;float:left">
     <DDeiEditorView ref="editorViewer4" :options="options3" id="ddei_editor_4"></DDeiEditorView>
   </div>
   <div style="width:400px;height:400px;float:left">

src/editor/Editor.vue

@@ -61,7 +61,6 @@ export default {
   watch: {},
   created() {
     autoLoadCommand();
-    window.onresize = this.resetSize;
     
     // if (DDeiEditor.ACTIVE_INSTANCE) {
     //   this.editor = DDeiEditor.ACTIVE_INSTANCE;
@@ -185,41 +184,7 @@ export default {
       this.editor.bus.executeAll();
     },
 
-    resetSize() {
+    
-      let width = document.body.scrollWidth
-      let height = document.body.scrollHeight
-      if (!window.upSizeWidth || !window.upSizeHeight) {
-        window.upSizeWidth = width;
-        window.upSizeHeight = height;
-      } else {
-        let deltaWidth = width - window.upSizeWidth;
-        let deltaHeight = height - window.upSizeHeight;
-        if (this.editor.middleWidth + deltaWidth >= 305) {
-          window.upSizeWidth = width;
-          this.editor.middleWidth += deltaWidth;
-          this.editor.maxWidth =
-            this.editor.leftWidth +
-            this.editor.rightWidth +
-            this.editor.middleWidth;
-        }
-        if (this.editor.middleHeight + deltaHeight >= 305) {
-          window.upSizeHeight = height;
-          this.editor.middleHeight += deltaHeight;
-          this.editor.maxHeight =
-            this.editor.leftHeight +
-            this.editor.rightHeight +
-            this.editor.middleHeight;
-        }
-        this.editor.ddInstance.render.setSize(
-          this.editor.middleWidth,
-          this.editor.middleHeight,
-          0,
-          0
-        );
-        this.editor.ddInstance.bus.push(DDeiEnumBusCommandType.RefreshShape);
-        this.editor.ddInstance.bus.executeAll();
-      }
-    },
   },
 };
 </script>
@@ -228,7 +193,7 @@ export default {
 .ddei-editor {
 
   width: 100%;
-  height: calc(100vh);
+  height:100%;
   overflow: auto;
   display: flex;
   flex-direction: column;