修改标准布局的实现

plugins/core/layouts/StandardLayout.vue

@@ -1,29 +1,26 @@
 <template>
   <div class="ddei-editor-layout-standrad">
-    <div class="top" ref="top">
+    <div class="top" ref="top" v-show="topComponents?.length > 0">
-      <component ref="topComponents" :editor="editor" v-for="(item,index) in editor?.getPartPanels(options,'top')"
+      <component ref="topComponents" :editor="editor" v-for="(item,index) in topComponents" :is="item.comp"
-        :is="item.comp" v-bind="item.options" :options="item.options"></component>
+        v-bind="item.options" :options="item.options"></component>
     </div>
     <div class="body">
-      <div class="left" ref="left" v-show="toolboxShow">
+      <div class="left" ref="left" v-show="toolboxShow && leftComponents?.length > 0">
-        <component ref="leftComponents" :editor="editor" v-for="(item, index) in editor?.getPartPanels(options, 'left')"
+        <component ref="leftComponents" :editor="editor" v-for="(item, index) in leftComponents" :is="item.comp"
-          :is="item.comp" :options="item.options" v-bind="item.options"></component>
+          :options="item.options" v-bind="item.options"></component>
       </div>
-      <div class="middle" ref="middle">
+      <div class="middle" ref="middle" v-show="middleComponents?.length > 0">
-        <component ref="middleComponents" :editor="editor"
+        <component ref="middleComponents" :editor="editor" v-for="(item, index) in middleComponents" :is="item.comp"
-          v-for="(item, index) in editor?.getPartPanels(options, 'middle')" :is="item.comp" :options="item.options"
+          :options="item.options" v-bind="item.options"></component>
-          v-bind="item.options"></component>
       </div>
-      <div class="right" ref="right" v-show="propertyViewShow">
+      <div class="right" ref="right" v-show="propertyViewShow && rightComponents?.length > 0">
-        <component ref="rightComponents" :editor="editor"
+        <component ref="rightComponents" :editor="editor" v-for="(item, index) in rightComponents" :is="item.comp"
-          v-for="(item, index) in editor?.getPartPanels(options, 'right')" :is="item.comp" :options="item.options"
+          :options="item.options" v-bind="item.options"></component>
-          v-bind="item.options"></component>
       </div>
     </div>
-    <div class="bottom" ref="bottom">
+    <div class="bottom" ref="bottom" v-show="bottomComponents?.length > 0">
-      <component ref="bottomComponents" :editor="editor"
+      <component ref="bottomComponents" :editor="editor" v-for="(item, index) in bottomComponents" :is="item.comp"
-        v-for="(item, index) in editor?.getPartPanels(options, 'bottom')" :is="item.comp" :options="item.options"
+        :options="item.options" v-bind="item.options"></component>
-        v-bind="item.options"></component>
     </div>
   </div>
 </template>
@@ -59,6 +56,11 @@ export default {
       initRightWidth: 0,
       toolboxShow: true,
       propertyViewShow: true,
+      leftComponents: [],
+      rightComponents: [],
+      topComponents: [],
+      bottomComponents: [],
+      middleComponents: [],
     };
   },
   //注册组件
@@ -94,10 +96,17 @@ export default {
     this.$watch("editor.bottomHeight", function (newVal, oldVal) {
       this.$refs.bottom.style.flexBasis = newVal + "px";
     });
+    this.leftComponents = this.editor.getPartPanels(this.options, 'left');
+    this.rightComponents = this.editor.getPartPanels(this.options, 'right');
+    this.topComponents = this.editor.getPartPanels(this.options, 'top');
+    this.bottomComponents = this.editor.getPartPanels(this.options, 'bottom');
+    this.middleComponents = this.editor.getPartPanels(this.options, 'middle');
   },
   mounted() {
     this.editor.layoutViewer = this;
     
+    
+
     // 获取要监听的 div 元素
     let middleCanvas = document.getElementById(this.editor.id+"_canvas");
     // 创建 ResizeObserver 实例

src/App.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import DDeiEditorView from "./editor/Editor.vue";
-import { DDeiCoreTopMenuPanel, DDeiCoreThemeBlack, DDeiCoreControls, DDeiCoreHotkeys, DDeiKeyActionAllSelect, DDeiCorePropertyViewPanel, DDeiCoreToolboxPanel, DDeiCoreSheetsPanel, DDeiCoreChangeRatioPanel, DDeiCoreChangeRatioDialog, DDeiCoreShapeCountPanel, DDeiCoreBottomMenuPanel, DDeiCoreStandLayout, DDeiCoreOpenFilesViewPanel } from "@ddei/core";
+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";
 export default defineComponent({
@@ -100,9 +100,66 @@ export default defineComponent({
 
       ],
     })
+    const options2 = markRaw({
+      config: {
+
+      },
+      //配置扩展插件
+      extensions: [
+        //布局的配置
+        DDeiCoreStandLayout.configuraton({
+          //配置插件
+          'top': [],
+          'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
+          'bottom': [],
+          'left': [],
+          'right': []
+        }),
+      ],
+    })
+    const options3 = markRaw({
+      config: {
+
+      },
+      //配置扩展插件
+      extensions: [
+        //布局的配置
+        DDeiCoreStandLayout.configuraton({
+          //配置插件
+          'top': [],
+          'middle': ['ddei-core-panel-canvasview'],
+          'bottom': [],
+          'left': [],
+          'right': []
+        }),
+        DDeiCoreThemeBlack.configuraton({
+          default: true
+        }),
+      ],
+    })
+    const options4 = markRaw({
+      config: {
+
+      },
+      //配置扩展插件
+      extensions: [
+        //布局的配置
+        DDeiCoreStandLayout.configuraton({
+          //配置插件
+          'top': [],
+          'middle': ['ddei-core-panel-canvasview'],
+          'bottom': [],
+          'left': [],
+          'right': []
+        }),
+      ],
+    })
     return {
       options,
       options1,
+      options2,
+      options3,
+      options4,
     };
   },
 });
@@ -112,6 +169,15 @@ export default defineComponent({
 <template>
   <DDeiEditorView ref="editorViewer1" :options="options" id="ddei_editor_1"></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>
+  <div style="width:400px;height:400px;float:left">
+    <DDeiEditorView ref="editorViewer4" :options="options3" id="ddei_editor_4"></DDeiEditorView>
+  </div>
+  <div style="width:400px;height:400px;float:left">
+    <DDeiEditorView ref="editorViewer5" :options="options4" id="ddei_editor_5"></DDeiEditorView>
+  </div>
 </template>
 
 <style>