升级版本，修复htmlviewer位置不正确问题

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "ddei-editor",
-  "version": "1.2.41-201",
+  "version": "1.2.41-206",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ddei-editor",
-      "version": "1.2.41-201",
+      "version": "1.2.41-206",
       "license": "Apache License 2.0",
       "dependencies": {
-        "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-201.tgz"
+        "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-206.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-201",
+      "version": "1.2.41-206",
-      "resolved": "file:../ddei-framework/ddei-framework-1.2.41-201.tgz",
+      "resolved": "file:../ddei-framework/ddei-framework-1.2.41-206.tgz",
-      "integrity": "sha512-WKsM8XduU5MruGAgIlH2qIbUCxa+1rQ9yhhBdntcHVhy6U4Q2U0cL+gPbncwjJhooXPCi3vxD8f9zBKRKKzOaA==",
+      "integrity": "sha512-T6L5G7OyuYF1b9WoAAonwSD4NCmBE4I2OQ92mCd1Zp3AckeHYEIYVCFy/f7kEy2YQmmpx4egqkPQtVTMstApdQ==",
       "license": "Apache License 2.0",
       "dependencies": {
         "ddei-autolink": "^1.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddei-editor",
-  "version": "1.2.41-202",
+  "version": "1.2.41-206",
   "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-201.tgz"
+     "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-206.tgz"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.0",

plugins/htmlviewer/htmlviewer-lifecycle.ts

@@ -1,5 +1,5 @@
 import { DDeiLifeCycle, DDeiFuncData, DDeiEditorUtil, DDeiUtil, DDeiFuncCallResult, DDeiEditorState, DDeiEditorEnumBusCommandType } from "ddei-framework";
-import { createVNode,render ,markRaw } from "vue";
+import { createVNode,toRaw ,markRaw } from "vue";
 
 class DDeiExtHtmlViewerLifeCycle extends DDeiLifeCycle {
   
@@ -49,7 +49,7 @@ class DDeiExtHtmlViewerLifeCycle extends DDeiLifeCycle {
             if (model.render.tempCanvas){
               model.render.tempCanvas.remove()
             }
-            if (model.render.viewerOption != option){
+            if (model.render.viewerOption != option && toRaw(model.render.viewerOption) != option){
               //如果已存在则销毁
               DDeiUtil.removeRenderViewer(model)
               model.render.viewerOption = option

src/App.vue

@@ -20,49 +20,91 @@ export default defineComponent({
   data() {
     
     const options = markRaw({
-      
+      currentLayout: "ddei-core-layout-simple",
       config: {
-        ratio: 1.3, //默认缩放比例为150%
+        ratio: 1, //默认缩放比例为150%
         paper:"A6",
         "mark": "水印文本",
         // EXT_STAGE_WIDTH: false,
         // EXT_STAGE_HEIGHT: false,
         // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
-        // controlDefines: ControlDefinesDemo,
+        controlDefines: ControlDefinesDemo,
         // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
-        // groupDefines: GroupDefinesDemo,
+        groupDefines: GroupDefinesDemo,
         initData: {
           controls: [
             // {
             //   model: "9999002"
             // },
-            {
+            // {
-              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_1",
+                model: "102010",
+                type: "emp_1",
+                text: "第一步",
+                border: { color: "yellow", dash: [10, 10, 5, 5], width: 5 },
+                fill: { color: "grey" },
+              },
+              {
+                id: "act_2",
+                model: "102010",
+                type: "emp_2",
+                width: 200,
+                height: 100,
+                text: "第二步",
+                offsetY: -70,
+              }
+            
           ]
         }
       },
       extensions: [
-        //布局的配置
+        // //布局的配置
-        DDeiCoreStandLayout.configuration({
+        // DDeiCoreStandLayout.configuration({
-          //配置插件
+        //   //配置插件
-          // 'top': [],
+        //   // 'top': [],
-          'middle': ['ddei-core-panel-openfilesview', 'ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],// [!code ++]
+        //   'middle': ['ddei-core-panel-openfilesview', 'ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],// [!code ++]
-          // 'bottom': [],
+        //   // 'bottom': [],
-          // 'left': [],
+        //   // 'left': [],
-          // 'right': []
+        //   // 'right': []
+        // }),
+        DDeiCoreSimpleLayout.configuration({
+          other: ['ddei-core-panel-toolbox-simple', 'ddei-core-panel-topmenu-simple'],
+          middle: ['ddei-core-panel-canvasview'],
+          right: [],
+          bottom: []
         }),
-        DDeiCoreSimpleLayout,
         DDeiExtUML,
         DDeiExtSearch,
         DDeiExtTooltip,
         DDeiExtQuickStyle,
         DDeiExtQuickControl,
+        //配置htmlviewer插件，matchField用于声明图形控件中的属性与config中的key对应字段
+        DDeiExtHtmlViewer.configuration({
+          matchField: "type", //匹配字段
+          "emp_1": {          //key-value
+            type: "emp_1",
+            name: "张三",
+            viewer: ReplaceDivDemo  //HTML模板控件
+          },
+          "emp_2": {
+            type: "emp_2",
+            name: "李四",
+            viewer: ReplaceDivDemo
+          },
+          "emp_3": {
+            type: "emp_3",
+            name: "王五",
+            viewer: ReplaceDivDemo
+          }
+        })
         // QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] }),
         // DDeiExtTooltip.configuration({
         //   'ddei-ext-dialog-tooltip':{

src/HtmlViewerDemo.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { DDeiEnumBusCommandType } from 'ddei-framework'
 export default {
   name: "html-viewer-div-demo",
   props: {
@@ -7,16 +6,15 @@ export default {
       type: Object,
       default: null
     },
-    editor:{
+    editor: {
-      type:Object,
+      type: Object,
-      default:null
+      default: null
     }
   }
 };
 </script>
 <template>
-  <div
+  <div ref="divElement" class="html-demo">
-    style="display: flex;position:absolute;flex-direction:column;text-align:center;align-items: center;border:1px solid grey;background: white;color:black;display: none;">
     <div style="width:100%;display: flex;text-align:center;align-items: center;">
       <div style="flex:1">ID</div>
       <div style="flex:1">{{ model.id }}</div>
@@ -26,4 +24,13 @@ export default {
       <div style="flex:1">{{ model.name }}</div>
     </div>
   </div>
-</template>
+</template>
+<style scoped>
+.html-demo {
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+  display: none;
+  border:1px solid grey;
+}
+</style>

src/ReplaceDivDemo.vue

@@ -29,8 +29,7 @@ export default {
 };
 </script>
 <template>
-  <div
+  <div ref="divElement" class="html-demo">
-    style="display: flex;position:absolute;flex-direction:column;text-align:center;align-items: center;border:1px solid grey;background: white;color:black;display: none;">
     <div style="width:100%;display: flex;text-align:center;align-items: center;">
       <div style="flex:1">ID</div>
       <div style="flex:1">{{ model.id }}</div>
@@ -40,4 +39,13 @@ export default {
       <div style="flex:1">{{ name }}</div>
     </div>
   </div>
-</template>
+</template>
+<style scoped>
+.html-demo {
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+  display: none;
+  border: 1px solid grey;
+}
+</style>