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

新增了简版的工具栏和顶部菜单，修复了撤销后没有清理canvas的bug

Browse Source
This commit is contained in:
猴赛雷 2024-10-08 15:13:18 +08:00
parent 8887db5093
commit 43c4d18459
18 changed files with 810 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -1,15 +1,15 @@
{
"name": "ddei-editor",
"version": "1.2.41-114",
"version": "1.2.41-121",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ddei-editor",
"version": "1.2.41-114",
"version": "1.2.41-121",
"license": "Apache License 2.0",
"dependencies": {
"ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-114.tgz"
"ddei-framework": "file:///Users/hoslay/work/ddei/ddei-framework/ddei-framework-1.2.41-121.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-114",
"resolved": "file:../ddei-framework/ddei-framework-1.2.41-114.tgz",
"integrity": "sha512-NkwtXb+lwp3SbV3f4l9SeDAWelXEw4IKxpYnuZTeCrnxI2zqp9Ug5ApD3yYgJOf/NA0jw482buJ04CInQYWikw==",
"version": "1.2.41-121",
"resolved": "file:../ddei-framework/ddei-framework-1.2.41-121.tgz",
"integrity": "sha512-M7/2QFzEjt1m4HUusaagSL17/G4UUT9ks75Cs4UXB5/SPls9xMqZCRu29Wb1kTQ4M9Z7xlO0ArcOju6dsvY/+w==",
"license": "Apache License 2.0",
"dependencies": {
"ddei-autolink": "^1.1.1",

4
package.json
View File

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

35
plugins/core/dialogs/ChooseControlDialog.vue
View File

@ -2,8 +2,11 @@
<div :id="editor?.id + '_' + dialogId" class="ddei-core-dialog-choosecontrol" v-if="forceRefresh">
<div class="ddei-core-dialog-choosecontrol-content">
<div class="ddei-core-dialog-choosecontrol-content-itempanel" v-if="group">
<div @click="ok(control)" :class="{ 'ddei-core-dialog-choosecontrol-content-itempanel-item': true}"
:title="control.desc" v-for="control in group.controls">
<div @click="ok(control,$event)"
@mousedown="prepareDrag(control, $event)"
@mousemove="dragMove($event)"
:class="{ 'ddei-core-dialog-choosecontrol-content-itempanel-item': true}" :title="control.desc"
v-for="control in group.controls">
<img class="icon" v-if="!control.icon" :src="editor?.icons[control.id]" />
<div class="icon-html" v-if="control.icon" v-html="control.icon"></div>
<div class="text">{{ control.name }}</div>
@ -52,11 +55,33 @@ export default {
}
},
ok(control){
ok(control, evt) {
delete this.isDrag
delete this.dragControl
if (this.editor?.tempPopData[this.dialogId]?.callback?.ok) {
this.editor?.tempPopData[this.dialogId]?.callback?.ok(this.group,control);
this.editor?.tempPopData[this.dialogId]?.callback?.ok(this.group, control, evt);
}
}
},
prepareDrag(control, evt) {
if (this.editor?.tempPopData[this.dialogId]?.callback?.drag) {
this.isDrag = true
this.dragControl = control
}
},
dragMove(evt) {
if (this.isDrag){
if (this.editor?.tempPopData[this.dialogId]?.callback?.drag) {
this.editor?.tempPopData[this.dialogId]?.callback?.drag(this.group, this.dragControl, evt);
delete this.isDrag
delete this.dragControl
}
}
},
}
};

2
plugins/core/hotkeys/actions/key-action-rerevoke.ts
View File

@ -74,6 +74,7 @@ class DDeiKeyActionReRevoke extends DDeiKeyAction {
let jsonData = JSON.parse(hisData?.data)
if (jsonData) {
let ddInstance = editor?.ddInstance;
ddInstance.stage.destroyRender()
let hisFile = DDeiFile.loadFromJSON(jsonData, {
currentDdInstance: ddInstance,
});
@ -109,6 +110,7 @@ class DDeiKeyActionReRevoke extends DDeiKeyAction {
if (hisData?.data) {
let jsonData = JSON.parse(hisData?.data)
if (jsonData) {
ddInstance.stage.destroyRender()
let tempData = { "currentDdInstance": ddInstance, "currentStage": ddInstance.stage }
tempData[ddInstance.stage.id] = ddInstance.stage
let layers = [];

3
plugins/core/hotkeys/actions/key-action-revoke.ts
View File

@ -75,6 +75,7 @@ class DDeiKeyActionRevoke extends DDeiKeyAction {
let jsonData = JSON.parse(hisData?.data)
if (jsonData) {
let ddInstance = editor?.ddInstance;
ddInstance.stage.destroyRender()
let hisFile = DDeiFile.loadFromJSON(jsonData, {
currentDdInstance: ddInstance,
});
@ -108,10 +109,12 @@ class DDeiKeyActionRevoke extends DDeiKeyAction {
} else if (histype == 'stage') {
//修改当前操作控件坐标
if (ddInstance && ddInstance.stage) {
let hisData = ddInstance.stage.revokeHistroyData();
if (hisData?.data) {
let jsonData = JSON.parse(hisData?.data)
if (jsonData) {
ddInstance.stage.destroyRender()
let tempData = { "currentDdInstance": ddInstance, "currentStage": ddInstance.stage }
tempData[ddInstance.stage.id] = ddInstance.stage
let layers = [];

2
plugins/core/layouts/simple-layout.ts
View File

@ -12,7 +12,7 @@ class DDeiCoreSimpleLayout extends DDeiPluginBase{
static defaultIns: DDeiCoreSimpleLayout = new DDeiCoreSimpleLayout();
defaultOptions: object = {
other: ['ddei-core-panel-toolbox-simple'],
other: ['ddei-core-panel-toolbox-simple', 'ddei-core-panel-topmenu-simple'],
middle: ['ddei-core-panel-canvasview'],
right: [],
bottom: ['ddei-core-panel-bottommenu']

3
plugins/core/panels/common/FileInfo.vue
View File

@ -302,7 +302,7 @@ export default {
new DDeiSheet({
name: "页面-1",
desc: "页面-1",
stage: DDeiStage.initByJSON({ id: "stage_1" }),
stage: DDeiStage.initByJSON({ id: "stage_1" }, { currentDdInstance: ddInstance }),
active: DDeiActiveType.ACTIVE,
}),
],
@ -321,6 +321,7 @@ export default {
this.editor.currentFileIndex = this.editor.files.length - 1;
let sheets = file?.sheets;
if (file && sheets && ddInstance) {
ddInstance.stage.destroyRender()
let stage = sheets[0].stage;
stage.ddInstance = ddInstance;
//刷新页面

6
plugins/core/panels/index.ts
View File

@ -8,6 +8,7 @@ import DDeiCoreCanvasViewPanel from './canvasview';
import DDeiCoreBottomMenuPanel from './bottommenu';
import DDeiCoreCommonPanels from './common';
import DDeiCoreBottomPanels from './bottom';
import DDeiCoreSimplePanels from './simple';
class DDeiCorePanels extends DDeiPluginBase{
@ -18,7 +19,7 @@ class DDeiCorePanels extends DDeiPluginBase{
static defaultIns:DDeiCorePanels = new DDeiCorePanels(null);
plugins: object[] = [DDeiCoreTopMenuPanel, DDeiCoreToolboxPanel, DDeiCoreQuickColorViewPanel, DDeiCorePropertyViewPanel,
DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels]
DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels, DDeiCoreSimplePanels]
getPanels(editor){
let panels = []
@ -61,8 +62,9 @@ export * from './canvasview'
export * from './bottommenu'
export * from './common'
export * from './bottom'
export * from './simple'
export {
DDeiCorePanels, DDeiCoreTopMenuPanel, DDeiCoreToolboxPanel, DDeiCoreQuickColorViewPanel, DDeiCorePropertyViewPanel,
DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels
DDeiCoreOpenFilesViewPanel, DDeiCoreCanvasViewPanel, DDeiCoreBottomMenuPanel, DDeiCoreCommonPanels, DDeiCoreBottomPanels, DDeiCoreSimplePanels
}
export default DDeiCorePanels

22
plugins/core/panels/toolbox/ToolboxSimple.vue → plugins/core/panels/simple/ToolboxSimple.vue
View File

@ -251,7 +251,8 @@ export default {
if ((layer.display == 0 && !layer.tempDisplay) || layer.lock) {
return;
}
DDeiEditorUtil.hiddenDialog(this.editor, "ddei-core-dialog-choosecontrol")
//创建控件
if(control){
if (editMode != 4){
@ -307,6 +308,7 @@ export default {
this.editor.changeState(DDeiEditorState.DESIGNING);
}
}
DDeiEditorUtil.hiddenDialog(this.editor, "ddei-core-dialog-choosecontrol")
},
@ -340,7 +342,8 @@ export default {
DDeiEditorUtil.showDialog(this.editor, "ddei-core-dialog-choosecontrol", {
controlGroup: group,
callback: {
ok: this.changeGroupControl
ok: this.changeGroupControl,
drag: this.options?.dragCreate == 1 ? this.dragCreateControlPrepare : null
}
}, { type: type,hiddenMask: true }, el, true, true)
}
@ -349,7 +352,7 @@ export default {
},
changeGroupControl(group,control){
changeGroupControl(group,control,evt){
this.changeEditMode(group?.editMode)
if(group?.editMode == 4){
DDeiEditorUtil.lineInitJSON = {
@ -367,6 +370,19 @@ export default {
});
},
dragCreateControlPrepare(group, control,evt){
this.changeEditMode(group?.editMode)
group.currentControl = control
if (this.options?.dragCreate){
this.createControlPrepare(group,evt)
}
this.forceRefreshGroup = false
this.$nextTick(() => {
this.forceRefreshGroup = true;
});
},
/**
* 准备拖拽
*/

553
plugins/core/panels/simple/TopMenuSimple.vue Normal file
View File

@ -0,0 +1,553 @@
<template>
<div @mousedown="changeEditorFocus" v-if="forceRefresh" ref="topmenu" class="ddei-core-panel-topmenu-simple">
<div
:class="{ 'item-drag': options?.drag == 1 && options?.direct != 2, 'item-drag-2': options?.drag == 1 && options?.direct == 2, 'item-block': options?.drag != 1 }"
@mousedown="options?.drag == 1 && prepareDragBox()">
</div>
<div class="item" @click="newFile">
新建
</div>
<div class="item" @click="openFile">
打开
</div>
<div class="item" @click="save">
保存
</div>
<div class="item" @click="download">
下载
</div>
<div class="item-block"></div>
</div>
</template>
<script lang="ts">
import {DDeiEditor} from "ddei-framework";
import {DDeiEditorState} from "ddei-framework";
import {DDeiEditorUtil} from "ddei-framework";
import {DDeiEditorEnumBusCommandType} from "ddei-framework";
import {DDeiUtil} from "ddei-framework";
import {DDeiEnumBusCommandType} from "ddei-framework";
import { DDeiActiveType } from "ddei-framework";
import { DDeiFileState } from "ddei-framework";
import { DDeiFile } from "ddei-framework";
import { DDeiStage } from "ddei-framework";
import { DDeiSheet } from "ddei-framework";
export default {
name: "ddei-core-panel-topmenu-simple",
extends: null,
mixins: [],
props: {
//外部传入的插件扩展参数
options: {
type: Object,
default: null
},
editor: {
type: DDeiEditor,
default: null,
},
},
data() {
return {
forceRefresh: true
};
},
computed: {},
watch: {},
created() {
},
mounted() {
let middleCanvas = document.getElementById(this.editor.id + "_canvas");
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
// entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息
for (const entry of entries) {
// 获取宽度和高度
const { width, height } = entry.contentRect;
if (width != 0 && height != 0) {
this.resetPosition(width,height)
}
}
});
//开始监听目标元素的大小变化
resizeObserver.observe(middleCanvas);
this.refreshData();
},
methods: {
/**
* 保存
* @param evt
*/
save(evt) {
this.editor.changeState(DDeiEditorState.DESIGNING);
this.editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
this.editor.bus.push(DDeiEditorEnumBusCommandType.SaveFile, {}, evt);
this.editor.bus.executeAll();
},
/**
* 下载文件
*/
download(evt) {
if (this.editor?.ddInstance?.stage) {
//获取json信息
let file = this.editor?.files[this.editor?.currentFileIndex];
if (file) {
let json = file.toJSON();
if (json) {
// 创建隐藏的可下载链接
let eleLink = document.createElement("a");
eleLink.download = file.name + ".dei";
eleLink.style.display = "none";
// 字符内容转变成blob地址
let blob = new Blob([JSON.stringify(json)]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
this.editor.changeState(DDeiEditorState.DESIGNING);
}
}
}
},
/**
* 打开文件
* @param evt
*/
async openFile(evt) {
let rsState = DDeiEditorUtil.invokeCallbackFunc("EVENT_ADD_FILE_BEFORE", "LOAD_FILE", null, this.editor.ddInstance, evt)
if (rsState != -1) {
let openFileHandle = await showOpenFilePicker({
description: "DDei Design File",
types: [{
accept: {
'text/plain': ['.dei']
}
}]
})
//获取图片数据 这个file其实就是和input元素<input type="file" id="file">，document.querySelector("#file").files[0]一样
let openFile = await openFileHandle[0].getFile();
//转成base64
let read = new FileReader();
read.readAsText(openFile);
read.onload = async () => {
//创建img，插入页面中
let result = read.result;
let resultJSON = JSON.parse(result);
let ddInstance = this.editor?.ddInstance;
let file = DDeiFile.loadFromJSON(resultJSON, {
currentDdInstance: ddInstance,
});
let openedFiles = this.editor.files;
let openedFileIndex = -1
if (!file.id) {
file.id = DDeiUtil.getUniqueCode()
}
for (let fi = 0; fi < openedFiles.length; fi++) {
if ((openedFiles[fi].id && openedFiles[fi].id == file.id)) {
openedFileIndex = fi
break;
}
}
ddInstance.stage.destroyRender()
if (openedFileIndex == -1) {
file.localFileHandler = openFileHandle[0]
file.local = 1
this.editor.addFile(file);
for (let x = 0; x < this.editor.files.length; x++) {
this.editor.files[x].active = DDeiActiveType.NONE;
}
this.editor.currentFileIndex = this.editor.files.length - 1;
file.state = DDeiFileState.NONE;
file.active = DDeiActiveType.ACTIVE;
let sheets = file?.sheets;
if (file && sheets && ddInstance) {
file.changeSheet(file.currentSheetIndex);
let stage = sheets[file.currentSheetIndex].stage;
stage.ddInstance = ddInstance;
ddInstance.disabled = false
//记录文件初始日志
file.initHistroy();
file.histroy[0].isNew = true;
//刷新页面
ddInstance.stage = stage;
//加载场景渲染器
stage.initRender();
//设置视窗位置到中央
if (!stage.wpv) {
//缺省定位在画布中心点位置
stage.wpv = {
x:
-(
stage.width -
ddInstance.render.container.clientWidth
) / 2,
y:
-(
stage.height -
ddInstance.render.container.clientHeight
) / 2,
z: 0,
};
}
this.editor.changeState(DDeiEditorState.DESIGNING);
ddInstance.bus.push(
DDeiEditorEnumBusCommandType.ClearTemplateUI
);
ddInstance.bus.push(
DDeiEditorEnumBusCommandType.RefreshEditorParts,
{ parts: ["bottommenu", "topmenu"] }
);
ddInstance?.bus?.push(DDeiEnumBusCommandType.RefreshShape);
ddInstance?.bus?.executeAll();
}
} else {
file = this.editor.files[openedFileIndex]
if (file && ddInstance) {
for (let x = 0; x < this.editor.files.length; x++) {
this.editor.files[x].active = DDeiActiveType.NONE;
}
file.active = DDeiActiveType.ACTIVE
this.editor.currentFileIndex = openedFileIndex;
let stage = file.sheets[file.currentSheetIndex].stage;
stage.ddInstance = ddInstance;
//刷新页面
ddInstance.stage = stage;
ddInstance.disabled = false
//加载场景渲染器
stage.initRender();
this.editor.changeState(DDeiEditorState.DESIGNING);
ddInstance.bus.push(
DDeiEditorEnumBusCommandType.ClearTemplateUI
);
ddInstance.bus.push(
DDeiEditorEnumBusCommandType.RefreshEditorParts,
{ parts: ["bottommenu", "topmenu"] }
);
ddInstance?.bus?.push(DDeiEnumBusCommandType.RefreshShape);
ddInstance?.bus?.executeAll();
}
}
DDeiEditorUtil.invokeCallbackFunc("EVENT_ADD_FILE_AFTER", "LOAD_FILE", { file: file }, this.editor.ddInstance, evt)
}
}
},
/**
* 新建文件
* @param evt
*/
newFile(evt) {
if (this.editor?.ddInstance) {
let ddInstance = this.editor.ddInstance;
let file = DDeiFile.loadFromJSON(
{
name: "新建文件_NEW",
path: "/新建文件_NEW",
sheets: [
new DDeiSheet({
name: "页面-1",
desc: "页面-1",
stage: DDeiStage.initByJSON({ id: "stage_1" },{ currentDdInstance: ddInstance }),
active: DDeiActiveType.ACTIVE,
}),
],
currentSheetIndex: 0,
state: DDeiFileState.NEW,
active: DDeiActiveType.ACTIVE,
},
{ currentDdInstance: ddInstance }
);
//添加文件
if (this.editor.currentFileIndex != -1) {
this.editor.files[this.editor.currentFileIndex].active =
DDeiActiveType.NONE;
}
this.editor.addFile(file);
this.editor.currentFileIndex = this.editor.files.length - 1;
let sheets = file?.sheets;
if (file && sheets && ddInstance) {
ddInstance.stage.destroyRender()
let stage = sheets[0].stage;
stage.ddInstance = ddInstance;
//刷新页面
ddInstance.stage = stage;
//记录文件初始日志
file.initHistroy();
//设置视窗位置到中央
if (!stage.wpv) {
//缺省定位在画布中心点位置
stage.wpv = {
x: -(stage.width - ddInstance.render.container.clientWidth) / 2,
y: -(stage.height - ddInstance.render.container.clientHeight) / 2,
z: 0,
};
}
//加载场景渲染器
stage.initRender();
ddInstance.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
ddInstance.bus.push(DDeiEnumBusCommandType.RefreshShape);
ddInstance.bus.push(DDeiEditorEnumBusCommandType.RefreshEditorParts, {
parts: ["bottommenu", "topmenu"],
});
this.editor.changeState(DDeiEditorState.DESIGNING);
ddInstance?.bus?.executeAll();
}
}
},
resetPosition(width,height){
//横向
if (this.options?.direct == 2) {
this.$refs['topmenu'].style.maxWidth = (width - 80) + "px"
this.$refs['topmenu'].style.flexDirection = ""
if (this.options?.width) {
this.$refs['topmenu'].style.width = this.options.width
} else {
this.$refs['topmenu'].style.width = ""
}
if (this.options?.height) {
this.$refs['topmenu'].style.height = this.options.height
} else {
this.$refs['topmenu'].style.height = "32px"
}
}
//纵向
else {
this.$refs['topmenu'].style.flexDirection = "column";
this.$refs['topmenu'].style.maxHeight = (height - 80) + "px"
if (this.options?.width) {
this.$refs['topmenu'].style.width = this.options.width
} else {
this.$refs['topmenu'].style.width = "32px"
}
if (this.options?.height) {
this.$refs['topmenu'].style.height = this.options.height
} else {
this.$refs['topmenu'].style.height = ""
}
}
//读取缓存位置
let cachePos = null;
if (this.options?.drag == 1) {
cachePos = localStorage.getItem("pos-" + this.editor.id + "-ddei-core-panel-topmenu-simple")
}
if (!cachePos) {
//位置
switch (this.options?.position) {
case 2:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
this.$refs['topmenu'].style.top = "30px";
break;
case 3:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
this.$refs['topmenu'].style.top = "30px";
break;
case 4:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
break;
case 5:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth - 30) + "px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
break;
case 6:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
break;
case 7:
this.$refs['topmenu'].style.left = "30px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight - 30) + "px";
break;
case 8:
this.$refs['topmenu'].style.left = "30px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
break;
case 9:
this.$refs['topmenu'].style.left = (width - this.$refs['topmenu'].clientWidth) / 2 + "px";
this.$refs['topmenu'].style.top = (height - this.$refs['topmenu'].clientHeight) / 2 + "px";
break;
default:
this.$refs['topmenu'].style.left = "30px";
this.$refs['topmenu'].style.top = "30px";
break;
}
} else {
let posJson = JSON.parse(cachePos)
this.$refs['topmenu'].style.left = posJson.left + "px";
this.$refs['topmenu'].style.top = posJson.top + "px";
}
this.$refs['topmenu'].style.display="flex"
},
refreshData() {
},
//强制刷新当前以及下层组件
forceRefreshParts(parts) {
if (!parts || parts == 'topmenu' || parts.indexOf('topmenu') != -1){
this.forceRefresh = false
this.$nextTick(() => {
this.forceRefresh = true;
if (this.refreshData) {
this.refreshData();
}
});
}
},
/**
* 准备拖拽
*/
prepareDragBox(e) {
this.editor.dragPart = this;
this.$refs['topmenu'].style.userSelect = "none";
this.$refs['topmenu'].children[0].style.backgroundColor = "var(--dot)";
this.$refs['topmenu'].style.pointerEvents = "none";
},
/**
* 拖拽中
*/
boxDraging(e) {
if (this.editor.dragPart) {
let middleCanvas = document.getElementById(this.editor.id + "_canvas");
let posLeft = e.offsetX - 15
let posTop = e.offsetY - 5
if(this.options?.direct == 2){
posLeft = e.offsetX-5
posTop = e.offsetY-15
}
if (posLeft < 0) {
posLeft = 0
}
if (posLeft < 0) {
posTop = 0
}
if (posLeft + this.$refs['topmenu'].offsetWidth > middleCanvas.offsetWidth) {
posLeft = middleCanvas.offsetWidth - this.$refs['topmenu'].offsetWidth
}
if (posTop + this.$refs['topmenu'].offsetHeight > middleCanvas.offsetHeight) {
posTop = middleCanvas.offsetHeight - this.$refs['topmenu'].offsetHeight
}
this.$refs['topmenu'].style.left = posLeft +"px";
this.$refs['topmenu'].style.top = posTop +"px";
}
},
/**
* 拖拽完毕
*/
boxDragEnd(e) {
if (this.editor.dragPart) {
let posJson = { left: this.$refs['topmenu'].offsetLeft, top: this.$refs['topmenu'].offsetTop}
localStorage.setItem("pos-" + this.editor.id + "-ddei-core-panel-topmenu-simple", JSON.stringify(posJson))
this.$refs['topmenu'].style.userSelect = "";
this.$refs['topmenu'].style.pointerEvents = "";
this.$refs['topmenu'].children[0].style.backgroundColor = "";
delete this.editor.dragPart;
}
},
/**
* 焦点进入当前区域
*/
changeEditorFocus() {
this.editor.changeState(DDeiEditorState.TOP_MENU_OPERATING);
this.editor.bus.push(DDeiEditorEnumBusCommandType.ClearTemplateUI);
this.editor.bus.executeAll();
}
},
};
</script>
<style lang="less" scoped>
.ddei-core-panel-topmenu-simple {
text-align: center;
position: absolute;
z-index: 99999;
border: 1px solid var(--panel-border);
box-shadow: 0px 2px 24px 0px hsl(0deg 0% 0% /0.25);
border-radius: 5px;
overflow: hidden;
background-color: var(--panel-background);
display: flex;
font-size: 14px;
justify-content: start;
align-items: center;
.item {
width: 60px;
height: 24px;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid #e2dede;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
&:hover {
background-color: #e2dede;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
.item-selected {
background-color: #e2dede;
}
.item-block {
width: 10px;
height: 10px;
}
.item-drag {
width: 100%;
height: 10px;
background-color: #efefef;
&:hover {
background-color: var(--dot);
cursor: grab;
}
}
.item-drag-2 {
height: 100%;
width: 10px;
background-color: #efefef;
&:hover {
background-color: var(--dot);
cursor: grab;
}
}
}
</style>

51
plugins/core/panels/simple/index.ts Normal file
View File

@ -0,0 +1,51 @@
import { DDeiPluginBase } from "ddei-framework";
import DDeiCoreToolboxSimplePanel from './toolbox-simple';
import DDeiCoreTopMenuSimplePanel from './topmenu-simple';
class DDeiCoreSimplePanels extends DDeiPluginBase {
type: string = "package"
/**
* 缺省实例
*/
static defaultIns: DDeiCoreSimplePanels = new DDeiCoreSimplePanels(null);
plugins: object[] = [DDeiCoreToolboxSimplePanel, DDeiCoreTopMenuSimplePanel]
getPanels(editor) {
let panels = []
this.plugins?.forEach(plugin => {
let ls
if (DDeiPluginBase.isSubclass(plugin, DDeiPluginBase)) {
ls = plugin.defaultIns.getPanels(editor);
} else if (plugin instanceof DDeiPluginBase) {
ls = plugin.getPanels(editor);
}
if (ls?.length > 0) {
panels = panels.concat(ls);
}
})
return panels
}
static configuration(options) {
if (options) {
//解析options，只使用自己相关的
let panels = new DDeiCoreSimplePanels(options);
for (let i = 0; i < panels.plugins?.length; i++) {
panels.plugins[i] = panels.plugins[i].configuration(options, true)
}
return panels;
}
return DDeiCoreSimplePanels;
}
}
export {
DDeiCoreSimplePanels, DDeiCoreToolboxSimplePanel, DDeiCoreTopMenuSimplePanel
}
export default DDeiCoreSimplePanels

5
plugins/core/panels/toolbox/toolbox-simple.ts → plugins/core/panels/simple/toolbox-simple.ts
View File

@ -7,10 +7,11 @@ class DDeiCoreToolboxSimplePanel extends DDeiPluginBase{
* 缺省实例
*/
static defaultIns: DDeiCoreToolboxSimplePanel = new DDeiCoreToolboxSimplePanel({
direct:2,//方向，1纵向，2横向
position:1,//位置1-9顺时针，1为左上角，9为中心
direct:1,//方向，1纵向，2横向
position:8,//位置1-9顺时针，1为左上角，9为中心
drag:1,//是否允许拖拽位置
chooseCreate:0,//是否在选择控件时创建一个控件
dragCreate:0,//是否在拖拽时创建控件
groups:[
{
editMode: 1,

47
plugins/core/panels/simple/topmenu-simple.ts Normal file
View File

@ -0,0 +1,47 @@
import {DDeiPluginBase} from "ddei-framework";
import TopMenuSimple from './TopMenuSimple.vue';
class DDeiCoreTopMenuSimplePanel extends DDeiPluginBase{
name: string = TopMenuSimple.name
/**
* 缺省实例
*/
static defaultIns: DDeiCoreTopMenuSimplePanel = new DDeiCoreTopMenuSimplePanel({
direct:2,//方向，1纵向，2横向
position:2,//位置1-9顺时针，1为左上角，9为中心
drag:1//是否允许拖拽位置
});
plugins: object[] = [TopMenuSimple]
getPanels(editor){
return this.plugins;
}
static configuration(options, fullConfig: boolean = false) {
//解析options，只使用自己相关的
if (options) {
let newOptions = {}
if (fullConfig) {
if (fullConfig) {
if (options[TopMenuSimple.name]) {
for (let i in options[TopMenuSimple.name]) {
newOptions[i] = options[TopMenuSimple.name][i]
}
}
}
} else {
newOptions = options
}
if (newOptions && Object.keys(newOptions).length !== 0) {
let panels = new DDeiCoreTopMenuSimplePanel(newOptions);
return panels;
}
}
return DDeiCoreTopMenuSimplePanel;
}
}
export default DDeiCoreTopMenuSimplePanel

5
plugins/core/panels/toolbox/index.ts
View File

@ -1,6 +1,5 @@
import { DDeiPluginBase } from "ddei-framework";
import DDeiCoreToolboxPanel from './toolbox';
import DDeiCoreToolboxSimplePanel from './toolbox-simple';
class DDeiCoreToolboxPanels extends DDeiPluginBase {
@ -11,7 +10,7 @@ class DDeiCoreToolboxPanels extends DDeiPluginBase {
*/
static defaultIns: DDeiCoreToolboxPanels = new DDeiCoreToolboxPanels(null);
plugins: object[] = [DDeiCoreToolboxPanel, DDeiCoreToolboxSimplePanel]
plugins: object[] = [DDeiCoreToolboxPanel]
getPanels(editor) {
let panels = []
@ -46,6 +45,6 @@ class DDeiCoreToolboxPanels extends DDeiPluginBase {
export {
DDeiCoreToolboxPanels, DDeiCoreToolboxPanel, DDeiCoreToolboxSimplePanel
DDeiCoreToolboxPanels, DDeiCoreToolboxPanel
}
export default DDeiCoreToolboxPanels

61
plugins/quickcontrol/QuickChooseControlDialog.vue
View File

@ -2,7 +2,7 @@
<div :id="editor?.id + '_' + dialogId" class="ddei-ext-dialog-quickchoosecontrol" v-if="forceRefresh">
<div v-for="group in groups" v-show="group.display == true" class="ddei-ext-dialog-quickchoosecontrol-group">
<div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel"
v-if="customControls || customGroups || group.expand == true">
v-if="customControls || customGroups || group.expand == true || model">
<div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel-item" :title="control.desc"
v-for="control in group.controls" @click="quickCreateControl(control.id)">
<img class="icon" v-if="!control.icon" :src="editor?.icons[control.id]" />
@ -44,7 +44,8 @@ export default {
return {
dialogId: 'ddei-ext-dialog-quickchoosecontrol',
//分组数据
groups: []
groups: [],
model:null
};
},
computed: {},
@ -86,28 +87,54 @@ export default {
});
this.groups = newGroups
}else{
DDeiEditorUtil.readRecentlyToolGroups()
let hisGroups = DDeiEditorUtil.recentlyToolGroups;
let gps = []
if (hisGroups?.length > 0) {
let model = this.editor.tempPopData ? this.editor.tempPopData['ddei-ext-dialog-quickchoosecontrol']?.model : null
if (!model){
DDeiEditorUtil.readRecentlyToolGroups()
let hisGroups = DDeiEditorUtil.recentlyToolGroups;
let gps = []
if (hisGroups?.length > 0) {
hisGroups.forEach(hg => {
let group = null;
for (let i = 0; i < groups.length; i++) {
if (groups[i].id == hg.id) {
group = groups[i]
hisGroups.forEach(hg => {
let group = null;
for (let i = 0; i < groups.length; i++) {
if (groups[i].id == hg.id) {
group = groups[i]
break;
}
}
if (group) {
group.expand = hg.expand
gps.push(group)
}
})
this.groups = gps;
}
}else{
let newGroups = []
for (let i = 0; i < groups.length; i++) {
let finded = false
for(let c = 0;c < groups[i].controls.length;c++){
if (groups[i].controls[c].id == model.modelCode) {
finded = true
break;
}
}
if (group) {
group.expand = hg.expand
gps.push(group)
if (finded){
newGroups.push(groups[i])
break;
}
})
this.groups = gps;
}
this.model = model
this.groups = newGroups
}
}
this.forceRefresh = false
this.$nextTick(() => {
this.forceRefresh = true;
});
},
quickCreateControl(controlId){

30
plugins/quickcontrol/QuickControlPanel.vue
View File

@ -121,9 +121,6 @@ export default {
mouseEnter(type,el,evt) {
if(this.editor.state == 'designing'){
if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
//显示弹出框
let elPos = evt.currentTarget.getBoundingClientRect()
// let elPos = DDeiUtil.getDomAbsPosition(evt.currentTarget)
//向上区间寻找，是否有控件
let existsControl = null;
let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
@ -131,22 +128,26 @@ export default {
let outRect = DDeiAbstractShape.getOutRectByPV([model])
if (type == 1) {
let controls = layer.getSubModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
if (this.validControls(controls)){
controls = this.filtControls(model,controls)
if (controls.length > 0){
existsControl = controls[0];
}
} else if (type == 2) {
let controls = layer.getSubModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
if (this.validControls(controls)) {
controls = this.filtControls(model,controls)
if (controls.length > 0) {
existsControl = controls[0];
}
} else if (type == 3) {
let controls = layer.getSubModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
if (this.validControls(controls)) {
controls = this.filtControls(model,controls)
if (controls.length > 0) {
existsControl = controls[0];
}
} else if (type == 4) {
let controls = layer.getSubModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
if (this.validControls(controls)) {
controls = this.filtControls(model,controls)
if (controls.length > 0) {
existsControl = controls[0];
}
}
@ -279,15 +280,24 @@ export default {
}
},
validControls(controls){
filtControls(model,controls){
let returnControls = []
if(controls?.length > 0){
for(let i = 0;i < controls.length;i++){
if (controls[i].baseModelType != 'DDeiLine'){
return true;
let define = DDeiUtil.getControlDefine(controls[i])
let filterMethod = null
if (define && define.filters && define.filters["LINE_OBI_FILTER"]) {
filterMethod = define.filters["LINE_OBI_FILTER"];
}
if (!filterMethod || filterMethod(model,{model:controls[i]})) {
returnControls.push(controls[i]);
}
}
}
}
return false
return returnControls
}
}
};

40
src/App.vue
View File

@ -74,7 +74,7 @@ export default defineComponent({
]
})
const options = markRaw({
// currentLayout: "ddei-core-layout-simple",
currentLayout: "ddei-core-layout-simple",
config: {
// "readonly":true,
"mark": "水印文本",
@ -85,25 +85,25 @@ export default defineComponent({
"background": {color:"#123456",opacity:0.1},
// "theme": "ddei-core-theme-black",
initData: {
controls:[
{
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,
}
]
// controls:[
// {
// 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,
// }
// ]
}
},
//配置扩展插件

2
src/editor/Editor.vue
View File

@ -203,7 +203,7 @@ export default {
if (options?.config?.access){
this.editor.setAccessInfo(options.config.access)
} else if (options.config.readonly == true || options.config.readonly == false) {
} else if (options?.config?.readonly == true || options?.config?.readonly == false) {
this.editor.setEditable(!options.config.readonly)
}