admin/ddei-editor
1
0
Fork 0
mirror of https://gitee.com/hoslay/ddei-editor.git synced 2025-12-06 17:18:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

开发保存1

Browse Source
This commit is contained in:
猴赛雷 2024-08-16 16:07:00 +08:00
parent 902934a5ea
commit 79459ecb37
10 changed files with 302 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

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

@ -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);

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

@ -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();
}
}
}

125
plugins/core/lifecycle/render-lifecycle.ts
View File

@ -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

8
plugins/htmlviewer/htmlviewer-lifecycle.ts
View File

@ -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"
}
}
}

3
src/HtmlViewerDemo.vue
View File

@ -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();
}

3
src/ReplaceDivDemo.vue
View File

@ -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: {

1
src/editor/index.ts
View File

@ -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;

2
vite.config.ts
View File

@ -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)),
}
},