完成了快速控件插件

plugins/quickcontrol/QuickChooseControlDialog.vue

@@ -1,7 +1,8 @@
 <template>
   <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="group.expand == true">
+      <div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel"
+        v-if="customControls || customGroups || group.expand == true">
         <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" :src="editor?.icons[control.id]" />
@@ -31,6 +32,11 @@ export default {
       type: Array,
       default: null
     },
+    //定义控件
+    customControls: {
+      type: Array,
+      default: null
+    },
   },
   data() {
     return {
@@ -50,40 +56,54 @@ export default {
     refreshData(){
       
       //加载工具栏
-      DDeiEditorUtil.readRecentlyToolGroups()
+      let groups = this.editor.groups
-      let hisGroups = DDeiEditorUtil.recentlyToolGroups;
+      if (this.customControls) {
-      if (hisGroups?.length > 0) {
+        let controls = []
-        let groups = []
+        let gps = [{display:true,controls:controls}]
-        hisGroups.forEach(hg => {
+        let hasControlids = {}
-          let group = null;
+        groups.forEach(group => {
-          for (let i = 0; i < this.editor.groups.length; i++) {
+          group?.controls?.forEach(control => {
-            if (this.editor.groups[i].id == hg.id) {
+            if (!hasControlids[control.id] && this.customControls.indexOf(control.id) != -1){
-              group = this.editor.groups[i]
+              hasControlids[control.id] = true
-              break;
+              controls.push(control)
             }
-          }
+          });
-          if (group) {
-            group.expand = hg.expand
-            groups.push(group)
-          }
         })
-        this.groups = groups;
+        this.groups = gps
-      } else {
+      }else if (this.customGroups) {
-        this.groups = clone(this.editor.groups)
-        DDeiEditorUtil.whiteRecentlyToolGroups(this.groups)
-      }
-      if (this.customGroups) {
         let newGroups = []
         this.customGroups?.forEach(cg => {
-          for (let i = 0; i < this.groups.length; i++) {
+          for (let i = 0; i < groups.length; i++) {
-            if (this.groups[i].id == cg) {
+            if (groups[i].id == cg) {
-              newGroups.push(this.groups[i])
+              newGroups.push(groups[i])
               break;
             }
           }
 
         });
         this.groups = newGroups
+      }else{
+        DDeiEditorUtil.readRecentlyToolGroups()
+        let hisGroups = DDeiEditorUtil.recentlyToolGroups;
+        let gps = []
+        if (hisGroups?.length > 0) {
+
+          hisGroups.forEach(hg => {
+            let group = null;
+            for (let i = 0; i < groups.length; i++) {
+              if (groups[i].id == hg.id) {
+                group = groups[i]
+                break;
+              }
+            }
+            if (group) {
+              group.expand = hg.expand
+              gps.push(group)
+            }
+          })
+          
+          this.groups = gps;
+        }
       }
     },
 

plugins/quickcontrol/QuickControlDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div :id="editor?.id + '_' + dialogId" class="ddei-ext-dialog-quickcontrol" v-if="forceRefresh">
-    <QuickControlPanel :editor="editor" :options="options"></QuickControlPanel>
+    <QuickControlPanel :editor="editor" v-bind="options" :options="options"></QuickControlPanel>
   </div>
 </template>
 

plugins/quickcontrol/QuickControlPanel.vue

@@ -50,7 +50,7 @@ export default {
     editor: {
       type: DDeiEditor,
       default: null,
-    }
+    },
   },
   data() {
     return {
@@ -106,126 +106,129 @@ export default {
     },
 
     mouseEnter(type,el,evt) {
-      if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
+      if(this.editor.state == 'designing'){
-        //显示弹出框
+        if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
-        let editorEle = document.getElementById(this.editor.id);
+          //显示弹出框
-        let editorDomPos = DDeiUtil.getDomAbsPosition(editorEle);
+          let editorEle = document.getElementById(this.editor.id);
-        let elPos = evt.currentTarget.getBoundingClientRect()
+          let editorDomPos = DDeiUtil.getDomAbsPosition(editorEle);
-        //向上区间寻找，是否有控件
+          let elPos = evt.currentTarget.getBoundingClientRect()
-        let existsControl = null;
+          //向上区间寻找，是否有控件
-        let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
+          let existsControl = null;
-        let outRect = DDeiAbstractShape.getOutRectByPV([model])
+          let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
-        if (type == 1) {
+          let outRect = DDeiAbstractShape.getOutRectByPV([model])
-          let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
-          if (controls?.length > 0){
-            existsControl = controls[0];
-          }
-        } else if (type == 2) {
-          let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
-          if (controls?.length > 0) {
-            existsControl = controls[0];
-          }
-        } else if (type == 3) {
-          let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
-          if (controls?.length > 0) {
-            existsControl = controls[0];
-          }
-        } else if (type == 4) {
-          let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
-          if (controls?.length > 0) {
-            existsControl = controls[0];
-          }
-        }
-        //如果没有控件，弹出创建控件框
-        if (!existsControl){
-          if (this.editor.tempLineModel){
-            this.editor.ddInstance.stage.removeModel(this.editor.tempLineModel,true)
-            delete this.editor.tempLineModel
-          }
-          let left = elPos.left - editorDomPos.left;
-          let top = elPos.top - editorDomPos.top
-          if(type == 1){
-            left -= 120 - elPos.width / 2
-            top -= 240 + elPos.height / 2
-          } else if (type == 2) {
-            left += evt.currentTarget.parentElement.clientWidth
-            top -= 120 - elPos.height / 2
-          } else if (type == 3) {
-            left -= 120 - elPos.width / 2
-            top  += elPos.height * 1.5
-          } else if (type == 4) {
-            left -= 240 + evt.currentTarget.parentElement.clientWidth/2
-            top -= 120 - elPos.height/2
-          }
-          
-          DDeiEditorUtil.showDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', {
-            group: "canvas-pop-quickcreatecontrol",
-            type:type,
-            model: this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
-          }, { type: 99, left: left, top: top, hiddenMask: true }, null, true, true)
-          this.editor.changeState("ext-quickchoosecontrol");
-        }
-        //如果有控件，创建连线(影子控件)
-        else if (!this.editor.tempLineModel){
-          //添加后的控件坐标，将其移动到特定位置
-          let outRect1 = DDeiAbstractShape.getOutRectByPV([existsControl])
-          let sx, sy, ex, ey
-          let startSita, endSita
-          //创建控件
           if (type == 1) {
-            sx = (outRect.x + outRect.x1) / 2
+            let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
-            sy = outRect.y
+            if (controls?.length > 0){
-            ex = (outRect1.x + outRect1.x1) / 2
+              existsControl = controls[0];
-            ey = outRect1.y1
+            }
-            startSita = -90
-            endSita = 90
           } else if (type == 2) {
-            sx = outRect.x1
+            let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
-            sy = (outRect.y+outRect.y1)/2
+            if (controls?.length > 0) {
-            ex = outRect1.x
+              existsControl = controls[0];
-            ey = (outRect1.y + outRect1.y1) / 2
+            }
-            startSita = 0
-            endSita = 180
           } else if (type == 3) {
-            sx = (outRect.x + outRect.x1) / 2
+            let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
-            sy = outRect.y1
+            if (controls?.length > 0) {
-            ex = (outRect1.x + outRect1.x1) / 2
+              existsControl = controls[0];
-            ey = outRect1.y
+            }
-            startSita = 90
-            endSita = -90
           } else if (type == 4) {
-            sx = outRect.x
+            let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
-            sy = (outRect.y + outRect.y1) / 2
+            if (controls?.length > 0) {
-            ex = outRect1.x1
+              existsControl = controls[0];
-            ey = (outRect1.y + outRect1.y1) / 2
+            }
-            startSita = 180
+          }
-            endSita = 0
+          //如果没有控件，弹出创建控件框
+          if (!existsControl){
+            if (this.editor.tempLineModel){
+              this.editor.ddInstance.stage.removeModel(this.editor.tempLineModel,true)
+              delete this.editor.tempLineModel
+            }
+            let left = elPos.left
+            let top = elPos.top 
+            if(type == 1){
+              left -= 120 - elPos.width / 2
+              top -= 240 + elPos.height / 2
+            } else if (type == 2) {
+              left += evt.currentTarget.parentElement.clientWidth
+              top -= 120 - elPos.height / 2
+            } else if (type == 3) {
+              left -= 120 - elPos.width / 2
+              top  += elPos.height * 1.5
+            } else if (type == 4) {
+              left -= 240 + evt.currentTarget.parentElement.clientWidth/2
+              top -= 120 - elPos.height/2
+            }
+            
+            DDeiEditorUtil.showDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', {
+              group: "canvas-pop-quickcreatecontrol",
+              type:type,
+              model: this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
+            }, { type: 99, left: left, top: top, hiddenMask: true }, null, true, true)
+          }
+          //如果有控件，创建连线(影子控件)
+          else if (!this.editor.tempLineModel){
+            //添加后的控件坐标，将其移动到特定位置
+            let outRect1 = DDeiAbstractShape.getOutRectByPV([existsControl])
+            let sx, sy, ex, ey
+            let startSita, endSita
+            //创建控件
+            if (type == 1) {
+              sx = (outRect.x + outRect.x1) / 2
+              sy = outRect.y
+              ex = (outRect1.x + outRect1.x1) / 2
+              ey = outRect1.y1
+              startSita = -90
+              endSita = 90
+            } else if (type == 2) {
+              sx = outRect.x1
+              sy = (outRect.y+outRect.y1)/2
+              ex = outRect1.x
+              ey = (outRect1.y + outRect1.y1) / 2
+              startSita = 0
+              endSita = 180
+            } else if (type == 3) {
+              sx = (outRect.x + outRect.x1) / 2
+              sy = outRect.y1
+              ex = (outRect1.x + outRect1.x1) / 2
+              ey = outRect1.y
+              startSita = 90
+              endSita = -90
+            } else if (type == 4) {
+              sx = outRect.x
+              sy = (outRect.y + outRect.y1) / 2
+              ex = outRect1.x1
+              ey = (outRect1.y + outRect1.y1) / 2
+              startSita = 180
+              endSita = 0
+            }
+            //创建连线
+            let lines = this.editor.addLines([
+              {
+                model: '100401',
+                type: 2,
+                dash:[10,5],
+                startPoint: { x: sx, y: sy },
+                endPoint: { x: ex, y: ey },
+                smodel: { id: model.id, x: sx, y: sy, rate: 0.5, sita: startSita },
+                emodel: { id: existsControl.id, x: ex, y: ey, rate: 0.5, sita: endSita }
+              },
+            ],false)
+            this.editor.tempLineModel = lines[0];
+            DDeiEditorUtil.closeDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', true)
+            this.editor.bus.push(DDeiEnumBusCommandType.RefreshShape);
+            this.editor.bus.executeAll();
           }
-          //创建连线
-          let lines = this.editor.addLines([
-            {
-              model: '100401',
-              type: 2,
-              dash:[10,5],
-              startPoint: { x: sx, y: sy },
-              endPoint: { x: ex, y: ey },
-              smodel: { id: model.id, x: sx, y: sy, rate: 0.5, sita: startSita },
-              emodel: { id: existsControl.id, x: ex, y: ey, rate: 0.5, sita: endSita }
-            },
-          ],false)
-          this.editor.tempLineModel = lines[0];
-          DDeiEditorUtil.closeDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', true)
-          this.editor.bus.push(DDeiEnumBusCommandType.RefreshShape);
-          this.editor.bus.executeAll();
         }
       }
     },
 
     createLineOk(){
-      delete this.editor.tempLineModel.dash
+      if (this.editor.tempLineModel){
-      this.editor.tempLineModel.render?.clearCachedValue()
+        delete this.editor.tempLineModel.dash
-      delete this.editor.tempLineModel
+        this.editor.tempLineModel.render?.clearCachedValue()
-      this.refreshData();
+        delete this.editor.tempLineModel
+        this.refreshData();
+      }
     },
 
     mouseleave(){

plugins/quickcontrol/index.ts

@@ -66,4 +66,9 @@ class DDeiExtQuickControl extends DDeiPluginBase {
 }
 
 export {DDeiExtQuickControl}
+export * from "./dialogs"
+export * from "./quickcontrolpanel"
+export * from "./hotkeys";
+export * from "./dialogs";
+export * from "./quickcontrol-lifecycle";
 export default DDeiExtQuickControl;

plugins/quickcontrol/quickcontrol-lifecycle.ts

@@ -22,7 +22,10 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
   moveInControl(operateType, data, ddInstance, evt){
     if (ddInstance && ddInstance["AC_DESIGN_EDIT"] && data?.models?.length > 0) {
       data.model = data.models[0]
-      DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
+      let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
+      if (editor.state == 'designing'){
+        DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
+      }
     }
   }
 
@@ -32,10 +35,12 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
   mouseOperating(operateType, data, ddInstance, evt): DDeiFuncCallResult {
     if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
       let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
-      let oldState = editor.state;
+      if (editor.state == 'designing') {
-      DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
+        let oldState = editor.state;
-      DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
+        DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
-      editor.changeState(oldState);
+        DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
+        editor.changeState(oldState);
+      }
     }
   }
 
@@ -47,12 +52,13 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
   closeAndShowQuickControlDialog(operateType, data, ddInstance, evt): DDeiFuncCallResult {
     if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
       let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
-      DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
+      if (editor.state == 'designing') {
-      DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
+        DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
-      if(data.models?.length > 0){
+        DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
-        data.model = data.models[0]
+        if(data.models?.length > 0){
-
+          data.model = data.models[0]
-        DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
+          DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
+        }
       }
     }
   }

src/App.vue

@@ -5,7 +5,7 @@ import { DDeiExtUML } from "@ddei/uml"
 import { DDeiExtSearch } from "@ddei/search"
 import { DDeiFuncCallResult } from "ddei-framework";
 import DDeiExtQuickStyle from "@ddei/quickstyle"
-import DDeiExtQuickControl from "@ddei/quickcontrol"
+import { DDeiExtQuickControl, QuickChooseControlDialog } from "@ddei/quickcontrol"
 import { defineComponent, markRaw } from "vue";
 export default defineComponent({
   name: "APP",
@@ -31,7 +31,9 @@ export default defineComponent({
         DDeiExtUML,
         DDeiExtSearch,
         DDeiExtQuickStyle,
-        DDeiExtQuickControl
+        DDeiExtQuickControl,
+        QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] })
+        // QuickChooseControlDialog.configuration({ customControls: ['100001', '100002','100003']})
         // DDeiCoreThemeBlack.configuration({
         //   default: true
         // }),
@@ -84,6 +86,7 @@ export default defineComponent({
         }),
         DDeiExtSearch,
         DDeiExtQuickStyle,
+        DDeiExtQuickControl,
         
       ],
     })
@@ -221,9 +224,9 @@ export default defineComponent({
 
 <template>
   <DDeiEditorView ref="editorViewer1" :options="options" id="ddei_editor_1"></DDeiEditorView>
-  <!--
-  <DDeiEditorView ref="editorViewer2" :options="options1" id="ddei_editor_2"></DDeiEditorView>
 
+  <DDeiEditorView ref="editorViewer2" :options="options1" id="ddei_editor_2"></DDeiEditorView>
+  <!--
   <div style="width:400px;height:400px;float:left">
     <DDeiEditorView ref="editorViewer3" :options="options2" id="ddei_editor_3"></DDeiEditorView>
   </div>