开发保存1

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "ddei-editor",
-  "version": "1.2.40",
+  "version": "1.2.41-22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ddei-editor",
-      "version": "1.2.40",
+      "version": "1.2.41-22",
       "license": "Apache License 2.0",
       "dependencies": {
-        "ddei-framework": "^1.2.40"
+        "ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-22.tgz"
       },
       "devDependencies": {
         "@tsconfig/node18": "^18.2.0",
@@ -518,9 +518,10 @@
       "integrity": "sha512-tdMuLdcJyreope1BWfnYqTQaIkSIrU/KtY9yX5mNGd+tYeJ0Y99ARHDuYnEABPX/8yh/r0Kl169v5ODg2vr98g=="
     },
     "node_modules/ddei-framework": {
-      "version": "1.2.40",
+      "version": "1.2.41-22",
-      "resolved": "https://registry.npmjs.org/ddei-framework/-/ddei-framework-1.2.40.tgz",
+      "resolved": "file:../ddei-framework/ddei-framework-1.2.41-22.tgz",
-      "integrity": "sha512-wZ4i1jkoTNBsJ0IdhT4EFiOlgV/PfeGqkLWYy8yCi69s6/x6osKqThR7D92TtNsRgZ+asC/EXPsYXq0I016h5w==",
+      "integrity": "sha512-9MiMZcTwN/rpaqj+wBETFEYB6awbKdSvDtXznVRlwMVzucRL/mLc47TV3IpWDhTBTaxGd3LvO8b+e0D6HiOBlQ==",
+      "license": "Apache License 2.0",
       "dependencies": {
         "ddei-autolink": "^1.1.1",
         "lodash": "^4.17.21",

package.json

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

plugins/core/hotkeys/actions/key-action-cancel-quick-edit.ts

@@ -59,7 +59,12 @@ class DDeiKeyActionCancelQuickEdit extends DDeiKeyAction {
       let editor = DDeiEditor.ACTIVE_INSTANCE;
       let inputEle = editor.quickEditorInput;
       inputEle.value = "";
+      if (ddInstance.stage.render.editorShadowControl?.isShadowControl){
+        ddInstance.stage.render.editorShadowControl.destroyed()
+      }
       ddInstance.stage.render.editorShadowControl = null;
+      
+      ddInstance.stage.render.editorShadowControl.destr
       editor.quickEditorModel = null
       delete ddInstance.stage.brushDataText
       editor.changeState(DDeiEditorState.DESIGNING);

plugins/core/hotkeys/actions/key-action-start-quick-edit.ts

@@ -64,196 +64,199 @@ class DDeiKeyActionStartQuickEdit extends DDeiKeyAction {
     //获取当前编辑控件
     if (ddInstance.stage?.selectedModels?.size == 1) {
       let model = Array.from(ddInstance.stage?.selectedModels.values())[0]
-      let editor = DDeiEditor.ACTIVE_INSTANCE;
+      let rsState1 = DDeiUtil.invokeCallbackFunc("EVENT_CONTROL_VIEW", DDeiEnumOperateType.VIEW, { models: [model] }, ddInstance, null)
+      if (rsState1 == 0 || rsState1 == 1) {
+        let editor = DDeiEditor.ACTIVE_INSTANCE;
 
-      let editState = DDeiUtil.invokeCallbackFunc("EVENT_CONTROL_EDIT_BEFORE", DDeiEnumOperateType.EDIT, { models: [model] }, ddInstance, null)
+        let editState = DDeiUtil.invokeCallbackFunc("EVENT_CONTROL_EDIT_BEFORE", DDeiEnumOperateType.EDIT, { models: [model] }, ddInstance, null)
-      if (editState == 0 || editState== 1){
+        if (editState == 0 || editState== 1){
-        let stage = ddInstance.stage;
+          let stage = ddInstance.stage;
-        let stageRatio = stage.getStageRatio()
+          let stageRatio = stage.getStageRatio()
-        if (model?.render) {
+          if (model?.render) {
-          let ex = -1;
+            let ex = -1;
-          let ey = -1;
+            let ey = -1;
-          if (evt.offsetX || evt.offsetY) {
-            ex = evt.offsetX
-            ey = evt.offsetY
-            ex /= window.remRatio
-            ey /= window.remRatio
-            ex -= stage.wpv.x;
-            ey -= stage.wpv.y;
-            ex = ex / stageRatio
-            ey = ey / stageRatio
-
-          }
-          if (model.baseModelType == 'DDeiTable') {
-            let selectCells = model.getSelectedCells();
-            if (selectCells?.length == 1) {
-              model = selectCells[0];
-              editor.quickEditorModel = model;
-            } else {
-              editor.quickEditorModel = null;
-              return;
-            }
-          } else if (model.baseModelType == 'DDeiLine') {
-            //计算事件发生在线的哪个位置,键盘为中间，鼠标则需要判断位置
-            let type = 3;
-            let linePoint = null;
-            //鼠标事件
             if (evt.offsetX || evt.offsetY) {
-              let cdist = DDeiUtil.getPointDistance(model.pvs[0].x, model.pvs[1].y, model.pvs[model.pvs.length - 1].x, model.pvs[model.pvs.length - 1].y);
+              ex = evt.offsetX
-              let sdist = DDeiUtil.getPointDistance(ex, ey, model.pvs[0].x, model.pvs[0].y);
+              ey = evt.offsetY
-              let edist = DDeiUtil.getPointDistance(ex, ey, model.pvs[model.pvs.length - 1].x, model.pvs[model.pvs.length - 1].y);
+              ex /= window.remRatio
-              //开始
+              ey /= window.remRatio
-              if (sdist < cdist / 5) {
+              ex -= stage.wpv.x;
-                type = 1;
+              ey -= stage.wpv.y;
-              }
+              ex = ex / stageRatio
-              //结束
+              ey = ey / stageRatio
-              else if (edist < cdist / 5) {
+
-                type = 2;
-              }
             }
-            if (type == 1) {
+            if (model.baseModelType == 'DDeiTable') {
-              linePoint = model.startPoint;
+              let selectCells = model.getSelectedCells();
-            }
+              if (selectCells?.length == 1) {
-            else if (type == 2) {
+                model = selectCells[0];
-              linePoint = model.endPoint;
+                editor.quickEditorModel = model;
-            }
+              } else {
-            else if (type == 3) {
+                editor.quickEditorModel = null;
-              //奇数，取正中间
+                return;
-              let pi = Math.floor(model.pvs.length / 2)
-              if (model.pvs.length % 3 == 0) {
-                linePoint = model.pvs[pi];
               }
-              //偶数，取两边的中间点
+            } else if (model.baseModelType == 'DDeiLine') {
-              else {
+              //计算事件发生在线的哪个位置,键盘为中间，鼠标则需要判断位置
-                linePoint = {
+              let type = 3;
-                  x: (model.pvs[pi - 1].x + model.pvs[pi].x) / 2,
+              let linePoint = null;
-                  y: (model.pvs[pi - 1].y + model.pvs[pi].y) / 2
+              //鼠标事件
+              if (evt.offsetX || evt.offsetY) {
+                let cdist = DDeiUtil.getPointDistance(model.pvs[0].x, model.pvs[1].y, model.pvs[model.pvs.length - 1].x, model.pvs[model.pvs.length - 1].y);
+                let sdist = DDeiUtil.getPointDistance(ex, ey, model.pvs[0].x, model.pvs[0].y);
+                let edist = DDeiUtil.getPointDistance(ex, ey, model.pvs[model.pvs.length - 1].x, model.pvs[model.pvs.length - 1].y);
+                //开始
+                if (sdist < cdist / 5) {
+                  type = 1;
+                }
+                //结束
+                else if (edist < cdist / 5) {
+                  type = 2;
                 }
               }
-            }
+              if (type == 1) {
-            let realModel = null;
+                linePoint = model.startPoint;
-
-            model.linkModels.forEach(lm => {
-              if (lm.type == type) {
-                realModel = lm.dm;
               }
-            });
+              else if (type == 2) {
-
+                linePoint = model.endPoint;
-            //如果控件不存在，则创建控件并创建链接
-            if (!realModel) {
-
-              //根据control的定义，初始化临时控件，并推送至上层Editor
-              let dataJson = {
-
-                modelCode: "100200",
-
-              };
-              let controlDefine = DDeiUtil.getControlDefine(dataJson)
-              for (let i in controlDefine?.define) {
-                dataJson[i] = controlDefine.define[i];
               }
-              dataJson["id"] = "lsm_" + (stage.idIdx++)
+              else if (type == 3) {
-              dataJson["width"] = 80
+                //奇数，取正中间
-              dataJson["height"] = 25
+                let pi = Math.floor(model.pvs.length / 2)
-              dataJson["font"] = { size: 12 }
+                if (model.pvs.length % 3 == 0) {
-              realModel = ddInstance.controlModelClasses["DDeiPolygon"].initByJSON(
+                  linePoint = model.pvs[pi];
-                dataJson,
+                }
-                { currentStage: stage, currentDdInstance: ddInstance, currentContainer: model.pModel }
+                //偶数，取两边的中间点
-              );
+                else {
-              let move1Matrix = new Matrix3(
+                  linePoint = {
-                1, 0, linePoint.x,
+                    x: (model.pvs[pi - 1].x + model.pvs[pi].x) / 2,
-                0, 1, linePoint.y,
+                    y: (model.pvs[pi - 1].y + model.pvs[pi].y) / 2
-                0, 0, 1);
+                  }
-              realModel.transVectors(move1Matrix)
+                }
-              model.layer.addModel(realModel);
+              }
+              let realModel = null;
 
-              realModel.initRender()
+              model.linkModels.forEach(lm => {
-              let lineLink = new DDeiLineLink({
+                if (lm.type == type) {
-                line: model,
+                  realModel = lm.dm;
-                type: type,
+                }
-                dm: realModel,
+              });
-                dx: 0,
-                dy: 0
-              })
-              model.linkModels.set(realModel.id, lineLink);
-            }
-            model = realModel;
-            editor.quickEditorModel = model;
-          }
 
-          //获取控件所占区域
+              //如果控件不存在，则创建控件并创建链接
-          //判断控件是否有composes，如果被composes拦截了，则启用componses的编辑
+              if (!realModel) {
-          model = DDeiAbstractShape.findBottomComponseByArea(model, ex, ey);
 
-          let fillArea = model.textArea
+                //根据control的定义，初始化临时控件，并推送至上层Editor
+                let dataJson = {
 
-          if (fillArea?.length > 0) {
+                  modelCode: "100200",
-            editor.quickEditorModel = model;
+
-            let canvasPos = DDeiUtil.getDomAbsPosition(ddInstance.render.canvas);
+                };
-            //创建大文本框
+                let controlDefine = DDeiUtil.getControlDefine(dataJson)
-            let inputEle = DDeiUtil.getEditorText();
+                for (let i in controlDefine?.define) {
-            let rotate = model.rotate
+                  dataJson[i] = controlDefine.define[i];
-            let stageRatio = ddInstance.stage.getStageRatio();
+                }
-            let pos = new Vector3(model.pvs[0].x, model.pvs[0].y, 1)
+                dataJson["id"] = "lsm_" + (stage.idIdx++)
-            if (rotate != 0) {
+                dataJson["width"] = 80
-              let pvc = new Vector3(model.cpv.x, model.cpv.y, 1);
+                dataJson["height"] = 25
-              let angle = (rotate * DDeiConfig.ROTATE_UNIT).toFixed(4);
+                dataJson["font"] = { size: 12 }
-              //计算input的正确打开位置，由节点0
+                realModel = ddInstance.controlModelClasses["DDeiPolygon"].initByJSON(
-              let move1Matrix = new Matrix3(
+                  dataJson,
-                1, 0, -pvc.x,
+                  { currentStage: stage, currentDdInstance: ddInstance, currentContainer: model.pModel }
-                0, 1, -pvc.y,
+                );
-                0, 0, 1);
+                let move1Matrix = new Matrix3(
-              let rotateMatrix = new Matrix3(
+                  1, 0, linePoint.x,
-                Math.cos(angle), Math.sin(angle), 0,
+                  0, 1, linePoint.y,
-                -Math.sin(angle), Math.cos(angle), 0,
+                  0, 0, 1);
-                0, 0, 1);
+                realModel.transVectors(move1Matrix)
-              let move2Matrix = new Matrix3(
+                model.layer.addModel(realModel);
-                1, 0, pvc.x,
+
-                0, 1, pvc.y,
+                realModel.initRender()
-                0, 0, 1);
+                let lineLink = new DDeiLineLink({
-              let m1 = new Matrix3().premultiply(move1Matrix).premultiply(rotateMatrix).premultiply(move2Matrix);
+                  line: model,
-              pos.applyMatrix3(m1)
+                  type: type,
+                  dm: realModel,
+                  dx: 0,
+                  dy: 0
+                })
+                model.linkModels.set(realModel.id, lineLink);
+              }
+              model = realModel;
+              editor.quickEditorModel = model;
             }
 
-            inputEle.value = model.text ? model.text : ''
+            //获取控件所占区域
-            inputEle.style.fontSize = (model.render.getCachedValue("font.size") * stageRatio) + "px"
+            //判断控件是否有composes，如果被composes拦截了，则启用componses的编辑
-            inputEle.style.color = DDeiUtil.getColor(model.render.getCachedValue("font.color"))
+            model = DDeiAbstractShape.findBottomComponseByArea(model, ex, ey);
-            inputEle.style.width = (fillArea.width) * stageRatio + "px";
+
-            inputEle.style.height = (fillArea.height) * stageRatio + "px";
+            let fillArea = model.textArea
+
+            if (fillArea?.length > 0) {
+              editor.quickEditorModel = model;
+              let canvasPos = DDeiUtil.getDomAbsPosition(ddInstance.render.canvas);
+              //创建大文本框
+              let inputEle = DDeiUtil.getEditorText();
+              let rotate = model.rotate
+              let stageRatio = ddInstance.stage.getStageRatio();
+              let pos = new Vector3(model.pvs[0].x, model.pvs[0].y, 1)
+              if (rotate != 0) {
+                let pvc = new Vector3(model.cpv.x, model.cpv.y, 1);
+                let angle = (rotate * DDeiConfig.ROTATE_UNIT).toFixed(4);
+                //计算input的正确打开位置，由节点0
+                let move1Matrix = new Matrix3(
+                  1, 0, -pvc.x,
+                  0, 1, -pvc.y,
+                  0, 0, 1);
+                let rotateMatrix = new Matrix3(
+                  Math.cos(angle), Math.sin(angle), 0,
+                  -Math.sin(angle), Math.cos(angle), 0,
+                  0, 0, 1);
+                let move2Matrix = new Matrix3(
+                  1, 0, pvc.x,
+                  0, 1, pvc.y,
+                  0, 0, 1);
+                let m1 = new Matrix3().premultiply(move1Matrix).premultiply(rotateMatrix).premultiply(move2Matrix);
+                pos.applyMatrix3(m1)
+              }
+
+              inputEle.value = model.text ? model.text : ''
+              inputEle.style.fontSize = (model.render.getCachedValue("font.size") * stageRatio) + "px"
+              inputEle.style.color = DDeiUtil.getColor(model.render.getCachedValue("font.color"))
+              inputEle.style.width = (fillArea.width) * stageRatio + "px";
+              inputEle.style.height = (fillArea.height) * stageRatio + "px";
 
 
-            inputEle.style.left = canvasPos.left + pos.x + ddInstance.stage.wpv.x + 1 + "px";
+              inputEle.style.left = canvasPos.left + pos.x + ddInstance.stage.wpv.x + 1 + "px";
-            inputEle.style.top = canvasPos.top + pos.y + ddInstance.stage.wpv.y + 10 + "px";
+              inputEle.style.top = canvasPos.top + pos.y + ddInstance.stage.wpv.y + 10 + "px";
-            // inputEle.style.transform = "rotate(" + rotate + "deg)";
+              // inputEle.style.transform = "rotate(" + rotate + "deg)";
-            // inputEle.style.backgroundColor = "grey"
+              // inputEle.style.backgroundColor = "grey"
-            inputEle.style.display = "block";
+              inputEle.style.display = "block";
 
-            let textAreaRect = DDeiAbstractShape.pvsToOutRect(model.textArea);
+              let textAreaRect = DDeiAbstractShape.pvsToOutRect(model.textArea);
-            inputEle.style.width = textAreaRect.width + "px"
+              inputEle.style.width = textAreaRect.width + "px"
-            inputEle.style.height = textAreaRect.height + "px"
+              inputEle.style.height = textAreaRect.height + "px"
-            //创建编辑影子元素
+              //创建编辑影子元素
-            ddInstance.stage.render.editorShadowControl = DDeiUtil.getShadowControl(model);
+              ddInstance.stage.render.editorShadowControl = DDeiUtil.getShadowControl(model);
-            //清空当前opPoints
+              //清空当前opPoints
-            model.layer.opPoints = [];
+              model.layer.opPoints = [];
-            if (model.layer.opLine?.render) {
+              if (model.layer.opLine?.render) {
-              model.layer.opLine.render.enableRefreshShape()
+                model.layer.opLine.render.enableRefreshShape()
+              }
+              delete model.layer.opLine;
+              ddInstance.stage.render.editorShadowControl.render.isEditoring = true
+              inputEle.focus()
+
+              inputEle.selectionStart = 0 // 选中开始位置
+              inputEle.selectionEnd = inputEle.value.length // 获取输入框里的长度。
+              //修改编辑器状态为快捷编辑中
+              editor.changeState(DDeiEditorState.QUICK_EDITING);
+              delete ddInstance.stage.brushData
+              delete ddInstance.stage.brushDataText
+              ddInstance.stage.render.operateState = DDeiEnumOperateState.QUICK_EDITING
+              //发出通知，选中的焦点发生变化
+              editor.bus.push(DDeiEnumBusCommandType.StageChangeSelectModels);
+              editor.bus.push(DDeiEnumBusCommandType.TextEditorChangeSelectPos);
+              editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
+              editor.bus.executeAll();
             }
-            delete model.layer.opLine;
-            ddInstance.stage.render.editorShadowControl.render.isEditoring = true
-            inputEle.focus()
-
-            inputEle.selectionStart = 0 // 选中开始位置
-            inputEle.selectionEnd = inputEle.value.length // 获取输入框里的长度。
-            //修改编辑器状态为快捷编辑中
-            editor.changeState(DDeiEditorState.QUICK_EDITING);
-            delete ddInstance.stage.brushData
-            delete ddInstance.stage.brushDataText
-            ddInstance.stage.render.operateState = DDeiEnumOperateState.QUICK_EDITING
-            //发出通知，选中的焦点发生变化
-            editor.bus.push(DDeiEnumBusCommandType.StageChangeSelectModels);
-            editor.bus.push(DDeiEnumBusCommandType.TextEditorChangeSelectPos);
-            editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
-            editor.bus.executeAll();
           }
         }
       }

plugins/core/lifecycle/render-lifecycle.ts

@@ -9,7 +9,7 @@ class DDeiCoreRenderLifeCycle extends DDeiLifeCycle {
    */
   static defaultIns: DDeiCoreRenderLifeCycle = new DDeiCoreRenderLifeCycle();
 
-  EVENT_CONTROL_VIEW_BEFORE: DDeiFuncData | null = new DDeiFuncData("render-drawshape", 1, (operateType, data, ddInstance, evt) => {
+  EVENT_CONTROL_VIEW: DDeiFuncData | null = new DDeiFuncData("render-drawshape", 1, (operateType, data, ddInstance, evt) => {
     return this.htmlDrawShape(operateType, data, ddInstance, evt)
   });
 
@@ -60,6 +60,7 @@ class DDeiCoreRenderLifeCycle extends DDeiLifeCycle {
       for (let i = 0; i < models?.length; i++) {
         if (models[i].modelType != 'DDeiStage' && models[i].modelType != 'DDeiLayer' && models[i] && models[i].id) {
           editor.renderViewerIns[models[i].id] = null
+          editor.renderViewerElements[models[i].id] = null
           for (let n = 0; n < editor.renderViewers.length; n++) {
             if (editor.renderViewers[n]?.model?.id == models[i].id) {
               editor.renderViewers.splice(n,1)
@@ -77,9 +78,9 @@ class DDeiCoreRenderLifeCycle extends DDeiLifeCycle {
 
   hiddenAllHtmlShape(operate, data, ddInstance, evt) {
     let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
-    for (let i in editor.renderViewerIns){
+    for (let i in editor.renderViewerElements){
-      if (editor.renderViewerIns[i]){
+      if (editor.renderViewerElements[i]){
-        editor.renderViewerIns[i].style.display = "none"
+        editor.renderViewerElements[i].style.display = "none"
       }
     }
   }
@@ -94,26 +95,13 @@ class DDeiCoreRenderLifeCycle extends DDeiLifeCycle {
       let canvasDomPos = DDeiUtil.getDomAbsPosition(canvasEle);
       for (let i = 0; i < models?.length; i++) {
         if (models[i].modelType != 'DDeiStage' && models[i].modelType != 'DDeiLayer' && models[i] && models[i].id) {
-          let displayDiv = editor.renderViewerIns[models[i].id]
+          let displayViewer = editor.renderViewerIns[models[i].id]
+          
          
-          if (displayDiv) {
+          if (displayViewer) {
+            let displayDiv = editor.renderViewerElements[models[i].id]
             if(operate == 'VIEW'){
-              let ruleWeight = 0
+              this.refreshView(models[i], displayDiv,data.tempShape, data.composeRender)
-              
-              if (ddInstance.stage.render.tempRuleDisplay == 1 || ddInstance.stage.render.tempRuleDisplay == '1'){
-                ruleWeight = 15
-              }
-              
-              let modelPos = DDeiUtil.getModelsDomAbsPosition([models[i]])
-              let rat1 = window.remRatio
-              displayDiv.style.position = 'absolute'
-              displayDiv.style.left = (modelPos.left * rat1 - canvasDomPos.left - ruleWeight) + "px"
-              displayDiv.style.top = (modelPos.top * rat1 - canvasDomPos.top - ruleWeight) + "px"
-              displayDiv.style.display = "block"
-              displayDiv.style.zIndex = 300;
-              displayDiv.style.width = (modelPos.width * rat1) + "px";
-              displayDiv.style.height = (modelPos.height * rat1) + "px";
-              displayDiv.style.pointerEvents = "none"
               rs.state = -1;
               return rs
             }else if(operate == 'VIEW-HIDDEN'){
@@ -151,6 +139,99 @@ class DDeiCoreRenderLifeCycle extends DDeiLifeCycle {
 
     return rs;
   }
+
+  //刷新数据
+  refreshView(model, shapeElement ,tempShape, composeRender) {
+    let stage = model.stage
+    let ddInstance = stage.ddInstance
+    let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance)
+
+    let render = model.render
+    let ruleWeight = 0
+    if (stage.render.tempRuleDisplay == 1 || stage.render.tempRuleDisplay == '1') {
+      ruleWeight = 15
+    }
+    //位置
+    let canvasEle = document.getElementById(editor.id + "_canvas");
+    let canvasDomPos = DDeiUtil.getDomAbsPosition(canvasEle);
+
+    let stageRatio = model.getStageRatio()
+    //创建图形，修改图形大小、旋转、边框等属性，以及移动图形位置
+
+    //获取model的绝对位置
+    let modelPos = DDeiUtil.getModelsDomAbsPosition([model])
+
+    let rat1 = window.remRatio
+
+    //大小
+    shapeElement.style.width = (model.width * rat1) + "px"
+    shapeElement.style.height = (model.height * rat1) + "px"
+
+    //旋转,缩放
+    let transform = ""
+    if (stageRatio > 0 && stageRatio != 1) {
+      transform += " scale(" + stageRatio + ")"
+    }
+
+    if (model.rotate) {
+      transform += " rotate(" + model.rotate + "deg)"
+    }
+    if (transform) {
+      shapeElement.style.transform = transform
+    }
+
+    //边框
+    let type = tempShape?.border?.type || tempShape?.border?.type == 0 ? tempShape?.border?.type : render.getCachedValue("border.type")
+    let opacity = tempShape?.border?.opacity || tempShape?.border?.opacity == 0 ? tempShape?.border?.opacity : render.getCachedValue("border.opacity");
+    let width = tempShape?.border?.width || tempShape?.border?.width == 0 ? tempShape?.border?.width : render.getCachedValue("border.width");
+    let dash = tempShape?.border?.dash || tempShape?.border?.dash == 0 ? tempShape?.border?.dash : render.getCachedValue("border.dash");
+    let color = tempShape?.border?.color || tempShape?.border?.color == 0 ? tempShape?.border?.color : render.getCachedValue("border.color");
+    let drawLine = ((type == 1 || type == '1') && width > 0)
+    if (drawLine) {
+      let type = !dash || dash.length == 0 ? "solid" : "dashed"
+      if (!color) {
+        color = "var(--border)"
+      }
+      if (opacity >= 0 && opacity < 1) {
+        let value16 = parseInt(opacity * 255)
+        color += value16.toString(16);
+      }
+      shapeElement.style.setProperty("--borderColor", color)
+      shapeElement.style.setProperty("--borderType", type)
+      shapeElement.style.setProperty("--borderWidth", width + "px")
+    }
+
+    shapeElement.style.left = ((modelPos.left + (model.width * stageRatio - model.width) / 2 - 2 - width / 2) * rat1 - canvasDomPos.left - ruleWeight) + "px"
+    shapeElement.style.top = ((modelPos.top + (model.height * stageRatio - model.height) / 2 - 2 - width / 2) * rat1 - canvasDomPos.top - ruleWeight) + "px"
+
+
+    //背景
+    //如果被选中，使用选中的颜色填充,没被选中，则使用默认颜色填充
+    let fillColor = tempShape?.fill?.color ? tempShape.fill.color : render.getCachedValue("fill.color");
+    if (!fillColor) {
+      fillColor = DDeiUtil.getStyleValue("canvas-control-background", ddInstance);
+    }
+    let fillOpacity = tempShape?.fill?.opacity ? tempShape.fill.opacity : render.getCachedValue("fill.opacity");
+
+    let fillType = tempShape?.fill?.type ? tempShape.fill.type : render.getCachedValue("fill.type");
+    if (fillType == 1) {
+
+      if (fillOpacity >= 0 && fillOpacity < 1) {
+        let value16 = parseInt(fillOpacity * 255)
+        fillColor += value16.toString(16);
+      }
+      shapeElement.style.setProperty("--fillColor", fillColor)
+    }
+    //圆角
+    let round = tempShape?.border?.round ? tempShape?.border?.round : render.getCachedValue("border.round");
+    if (round){
+      shapeElement.style.setProperty("--borderRound", round+"px")
+    }
+    //zIndex
+    shapeElement.style.zIndex = model.render.tempZIndex
+
+    shapeElement.style.display = "block"
+  }
 }
 
 export default DDeiCoreRenderLifeCycle

plugins/htmlviewer/htmlviewer-lifecycle.ts

@@ -11,7 +11,7 @@ class DDeiExtHtmlViewerLifeCycle extends DDeiLifeCycle {
     matchField:"code"
   });
 
-  EVENT_CONTROL_VIEW_BEFORE: DDeiFuncData | null = new DDeiFuncData("htmlviewer-drawshape", 1, (operateType, data, ddInstance, evt) => {
+  EVENT_CONTROL_VIEW: DDeiFuncData | null = new DDeiFuncData("htmlviewer-drawshape", 1, (operateType, data, ddInstance, evt) => {
     return this.htmlDrawShape(operateType, data, ddInstance, evt)
   });
 
@@ -66,9 +66,9 @@ class DDeiExtHtmlViewerLifeCycle extends DDeiLifeCycle {
 
   hiddenAllHtmlShape(operate, data, ddInstance, evt) {
     let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
-    for (let i in editor.renderViewerIns){
+    for (let i in editor.renderViewerElements){
-      if (editor.renderViewerIns[i]){
+      if (editor.renderViewerElements[i]){
-        editor.renderViewerIns[i].style.display = "none"
+        editor.renderViewerElements[i].style.display = "none"
       }
     }
   }

src/HtmlViewerDemo.vue

@@ -13,7 +13,8 @@ export default {
     }
   },
   mounted() {
-    this.editor.renderViewerIns[this.model.id] = this.$refs['divElement']
+    this.editor.renderViewerIns[this.model.id] = this
+    this.editor.renderViewerElements[this.model.id] = this.$refs['divElement']
     this.editor.bus.push(DDeiEnumBusCommandType.RefreshShape);
     this.editor.bus.executeAll();
   }

src/ReplaceDivDemo.vue

@@ -37,7 +37,8 @@ export default {
   },
   mounted() {
     let field = this.matchField;
-    this.editor.renderViewerIns[this[field]] = this.$refs['divElement']
+    this.editor.renderViewerIns[this[field]] = this
+    this.editor.renderViewerElements[this[field]] = this.$refs['divElement']
   },
   methods: {
     

src/editor/index.ts

@@ -9,5 +9,6 @@ export * from "@ddei/search";
 export * from "@ddei/tooltip";
 export * from "@ddei/quickcontrol";
 export * from "@ddei/htmlviewer";
+export * from "./grouputil";
 export { DDeiEditorView};
 export default DDeiEditorView;

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@ddei': fileURLToPath(new URL('./plugins', import.meta.url)),
-      // 'ddei-framework': fileURLToPath(new URL('/Users/hoslay/work/ddei/ddei-framework/dist/ddei-framework.js', import.meta.url)),
+      'ddei-framework': fileURLToPath(new URL('/Users/hoslay/work/ddei/ddei-framework/dist/ddei-framework.js', import.meta.url)),
     }
   },