diff --git a/package-lock.json b/package-lock.json index 0babf54..36c1f23 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/ddei-framework/-/ddei-framework-1.2.40.tgz", - "integrity": "sha512-wZ4i1jkoTNBsJ0IdhT4EFiOlgV/PfeGqkLWYy8yCi69s6/x6osKqThR7D92TtNsRgZ+asC/EXPsYXq0I016h5w==", + "version": "1.2.41-22", + "resolved": "file:../ddei-framework/ddei-framework-1.2.41-22.tgz", + "integrity": "sha512-9MiMZcTwN/rpaqj+wBETFEYB6awbKdSvDtXznVRlwMVzucRL/mLc47TV3IpWDhTBTaxGd3LvO8b+e0D6HiOBlQ==", + "license": "Apache License 2.0", "dependencies": { "ddei-autolink": "^1.1.1", "lodash": "^4.17.21", diff --git a/package.json b/package.json index 5a5e131..d51de6f 100644 --- a/package.json +++ b/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", diff --git a/plugins/core/hotkeys/actions/key-action-cancel-quick-edit.ts b/plugins/core/hotkeys/actions/key-action-cancel-quick-edit.ts index cec3622..1d26e96 100644 --- a/plugins/core/hotkeys/actions/key-action-cancel-quick-edit.ts +++ b/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); diff --git a/plugins/core/hotkeys/actions/key-action-start-quick-edit.ts b/plugins/core/hotkeys/actions/key-action-start-quick-edit.ts index 3039bef..c723bec 100644 --- a/plugins/core/hotkeys/actions/key-action-start-quick-edit.ts +++ b/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) - if (editState == 0 || editState== 1){ - let stage = ddInstance.stage; - let stageRatio = stage.getStageRatio() - if (model?.render) { - let ex = -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; - //鼠标事件 + let editState = DDeiUtil.invokeCallbackFunc("EVENT_CONTROL_EDIT_BEFORE", DDeiEnumOperateType.EDIT, { models: [model] }, ddInstance, null) + if (editState == 0 || editState== 1){ + let stage = ddInstance.stage; + let stageRatio = stage.getStageRatio() + if (model?.render) { + let ex = -1; + let ey = -1; 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; - } + 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 (type == 1) { - linePoint = model.startPoint; - } - else if (type == 2) { - linePoint = model.endPoint; - } - else if (type == 3) { - //奇数，取正中间 - let pi = Math.floor(model.pvs.length / 2) - if (model.pvs.length % 3 == 0) { - linePoint = model.pvs[pi]; + if (model.baseModelType == 'DDeiTable') { + let selectCells = model.getSelectedCells(); + if (selectCells?.length == 1) { + model = selectCells[0]; + editor.quickEditorModel = model; + } else { + editor.quickEditorModel = null; + return; } - //偶数，取两边的中间点 - else { - linePoint = { - x: (model.pvs[pi - 1].x + model.pvs[pi].x) / 2, - y: (model.pvs[pi - 1].y + model.pvs[pi].y) / 2 + } 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); + 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; } } - } - let realModel = null; - - model.linkModels.forEach(lm => { - if (lm.type == type) { - realModel = lm.dm; + if (type == 1) { + linePoint = model.startPoint; } - }); - - //如果控件不存在，则创建控件并创建链接 - if (!realModel) { - - //根据control的定义，初始化临时控件，并推送至上层Editor - let dataJson = { - - modelCode: "100200", - - }; - let controlDefine = DDeiUtil.getControlDefine(dataJson) - for (let i in controlDefine?.define) { - dataJson[i] = controlDefine.define[i]; + else if (type == 2) { + linePoint = model.endPoint; } - dataJson["id"] = "lsm_" + (stage.idIdx++) - dataJson["width"] = 80 - dataJson["height"] = 25 - dataJson["font"] = { size: 12 } - realModel = ddInstance.controlModelClasses["DDeiPolygon"].initByJSON( - dataJson, - { currentStage: stage, currentDdInstance: ddInstance, currentContainer: model.pModel } - ); - let move1Matrix = new Matrix3( - 1, 0, linePoint.x, - 0, 1, linePoint.y, - 0, 0, 1); - realModel.transVectors(move1Matrix) - model.layer.addModel(realModel); + else if (type == 3) { + //奇数，取正中间 + let pi = Math.floor(model.pvs.length / 2) + if (model.pvs.length % 3 == 0) { + linePoint = model.pvs[pi]; + } + //偶数，取两边的中间点 + else { + linePoint = { + x: (model.pvs[pi - 1].x + model.pvs[pi].x) / 2, + y: (model.pvs[pi - 1].y + model.pvs[pi].y) / 2 + } + } + } + let realModel = null; - realModel.initRender() - let lineLink = new DDeiLineLink({ - line: model, - type: type, - dm: realModel, - dx: 0, - dy: 0 - }) - model.linkModels.set(realModel.id, lineLink); - } - model = realModel; - editor.quickEditorModel = model; - } + model.linkModels.forEach(lm => { + if (lm.type == type) { + realModel = lm.dm; + } + }); - //获取控件所占区域 - //判断控件是否有composes，如果被composes拦截了，则启用componses的编辑 - model = DDeiAbstractShape.findBottomComponseByArea(model, ex, ey); + //如果控件不存在，则创建控件并创建链接 + if (!realModel) { - let fillArea = model.textArea + //根据control的定义，初始化临时控件，并推送至上层Editor + let dataJson = { - 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) + modelCode: "100200", + + }; + let controlDefine = DDeiUtil.getControlDefine(dataJson) + for (let i in controlDefine?.define) { + dataJson[i] = controlDefine.define[i]; + } + dataJson["id"] = "lsm_" + (stage.idIdx++) + dataJson["width"] = 80 + dataJson["height"] = 25 + dataJson["font"] = { size: 12 } + realModel = ddInstance.controlModelClasses["DDeiPolygon"].initByJSON( + dataJson, + { currentStage: stage, currentDdInstance: ddInstance, currentContainer: model.pModel } + ); + let move1Matrix = new Matrix3( + 1, 0, linePoint.x, + 0, 1, linePoint.y, + 0, 0, 1); + realModel.transVectors(move1Matrix) + model.layer.addModel(realModel); + + realModel.initRender() + let lineLink = new DDeiLineLink({ + line: model, + 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" - inputEle.style.color = DDeiUtil.getColor(model.render.getCachedValue("font.color")) - inputEle.style.width = (fillArea.width) * stageRatio + "px"; - inputEle.style.height = (fillArea.height) * stageRatio + "px"; + //获取控件所占区域 + //判断控件是否有composes，如果被composes拦截了，则启用componses的编辑 + model = DDeiAbstractShape.findBottomComponseByArea(model, ex, ey); + + 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.top = canvasPos.top + pos.y + ddInstance.stage.wpv.y + 10 + "px"; - // inputEle.style.transform = "rotate(" + rotate + "deg)"; - // inputEle.style.backgroundColor = "grey" - inputEle.style.display = "block"; + 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.transform = "rotate(" + rotate + "deg)"; + // inputEle.style.backgroundColor = "grey" + inputEle.style.display = "block"; - let textAreaRect = DDeiAbstractShape.pvsToOutRect(model.textArea); - inputEle.style.width = textAreaRect.width + "px" - inputEle.style.height = textAreaRect.height + "px" - //创建编辑影子元素 - ddInstance.stage.render.editorShadowControl = DDeiUtil.getShadowControl(model); - //清空当前opPoints - model.layer.opPoints = []; - if (model.layer.opLine?.render) { - model.layer.opLine.render.enableRefreshShape() + let textAreaRect = DDeiAbstractShape.pvsToOutRect(model.textArea); + inputEle.style.width = textAreaRect.width + "px" + inputEle.style.height = textAreaRect.height + "px" + //创建编辑影子元素 + ddInstance.stage.render.editorShadowControl = DDeiUtil.getShadowControl(model); + //清空当前opPoints + model.layer.opPoints = []; + if (model.layer.opLine?.render) { + 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(); } } } diff --git a/plugins/core/lifecycle/render-lifecycle.ts b/plugins/core/lifecycle/render-lifecycle.ts index 503b543..e1f35d7 100644 --- a/plugins/core/lifecycle/render-lifecycle.ts +++ b/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){ - if (editor.renderViewerIns[i]){ - editor.renderViewerIns[i].style.display = "none" + for (let i in editor.renderViewerElements){ + if (editor.renderViewerElements[i]){ + 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 - - 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" + this.refreshView(models[i], displayDiv,data.tempShape, data.composeRender) 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 \ No newline at end of file diff --git a/plugins/htmlviewer/htmlviewer-lifecycle.ts b/plugins/htmlviewer/htmlviewer-lifecycle.ts index 44b5345..6c7511a 100644 --- a/plugins/htmlviewer/htmlviewer-lifecycle.ts +++ b/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){ - if (editor.renderViewerIns[i]){ - editor.renderViewerIns[i].style.display = "none" + for (let i in editor.renderViewerElements){ + if (editor.renderViewerElements[i]){ + editor.renderViewerElements[i].style.display = "none" } } } diff --git a/src/HtmlViewerDemo.vue b/src/HtmlViewerDemo.vue index 54780c4..72de3cf 100644 --- a/src/HtmlViewerDemo.vue +++ b/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(); } diff --git a/src/ReplaceDivDemo.vue b/src/ReplaceDivDemo.vue index ea97a65..6f409b6 100644 --- a/src/ReplaceDivDemo.vue +++ b/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: { diff --git a/src/editor/index.ts b/src/editor/index.ts index 698a34a..af3a103 100644 --- a/src/editor/index.ts +++ b/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; diff --git a/vite.config.ts b/vite.config.ts index 2e5fa43..2cf521e 100644 --- a/vite.config.ts +++ b/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)), } },