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

完成了快速控件插件

Browse Source
This commit is contained in:
猴赛雷 2024-06-19 14:35:03 +08:00
parent f08cf28702
commit fb0c0ade46
6 changed files with 189 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
plugins/quickcontrol/QuickChooseControlDialog.vue
View File

@ -1,7 +1,8 @@
<template>
<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="group.expand == true">
<div class="ddei-ext-dialog-quickchoosecontrol-group-itempanel"
v-if="customControls || customGroups || group.expand == true">
<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" :src="editor?.icons[control.id]" />
@ -31,6 +32,11 @@ export default {
type: Array,
default: null
},
//定义控件
customControls: {
type: Array,
default: null
},
},
data() {
return {
@ -50,40 +56,54 @@ export default {
refreshData(){
//加载工具栏
DDeiEditorUtil.readRecentlyToolGroups()
let hisGroups = DDeiEditorUtil.recentlyToolGroups;
if (hisGroups?.length > 0) {
let groups = []
hisGroups.forEach(hg => {
let group = null;
for (let i = 0; i < this.editor.groups.length; i++) {
if (this.editor.groups[i].id == hg.id) {
group = this.editor.groups[i]
break;
}
}
if (group) {
group.expand = hg.expand
groups.push(group)
let groups = this.editor.groups
if (this.customControls) {
let controls = []
let gps = [{display:true,controls:controls}]
let hasControlids = {}
groups.forEach(group => {
group?.controls?.forEach(control => {
if (!hasControlids[control.id] && this.customControls.indexOf(control.id) != -1){
hasControlids[control.id] = true
controls.push(control)
}
});
})
this.groups = groups;
} else {
this.groups = clone(this.editor.groups)
DDeiEditorUtil.whiteRecentlyToolGroups(this.groups)
}
if (this.customGroups) {
this.groups = gps
}else if (this.customGroups) {
let newGroups = []
this.customGroups?.forEach(cg => {
for (let i = 0; i < this.groups.length; i++) {
if (this.groups[i].id == cg) {
newGroups.push(this.groups[i])
for (let i = 0; i < groups.length; i++) {
if (groups[i].id == cg) {
newGroups.push(groups[i])
break;
}
}
});
this.groups = newGroups
}else{
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]
break;
}
}
if (group) {
group.expand = hg.expand
gps.push(group)
}
})
this.groups = gps;
}
}
},

2
plugins/quickcontrol/QuickControlDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<div :id="editor?.id + '_' + dialogId" class="ddei-ext-dialog-quickcontrol" v-if="forceRefresh">
<QuickControlPanel :editor="editor" :options="options"></QuickControlPanel>
<QuickControlPanel :editor="editor" v-bind="options" :options="options"></QuickControlPanel>
</div>
</template>

11
plugins/quickcontrol/QuickControlPanel.vue
View File

@ -50,7 +50,7 @@ export default {
editor: {
type: DDeiEditor,
default: null,
}
},
},
data() {
return {
@ -106,6 +106,7 @@ export default {
},
mouseEnter(type,el,evt) {
if(this.editor.state == 'designing'){
if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
//显示弹出框
let editorEle = document.getElementById(this.editor.id);
@ -142,8 +143,8 @@ export default {
this.editor.ddInstance.stage.removeModel(this.editor.tempLineModel,true)
delete this.editor.tempLineModel
}
let left = elPos.left - editorDomPos.left;
let top = elPos.top - editorDomPos.top
let left = elPos.left
let top = elPos.top
if(type == 1){
left -= 120 - elPos.width / 2
top -= 240 + elPos.height / 2
@ -163,7 +164,6 @@ export default {
type:type,
model: this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
}, { type: 99, left: left, top: top, hiddenMask: true }, null, true, true)
this.editor.changeState("ext-quickchoosecontrol");
}
//如果有控件，创建连线(影子控件)
else if (!this.editor.tempLineModel){
@ -219,13 +219,16 @@ export default {
this.editor.bus.executeAll();
}
}
}
},
createLineOk(){
if (this.editor.tempLineModel){
delete this.editor.tempLineModel.dash
this.editor.tempLineModel.render?.clearCachedValue()
delete this.editor.tempLineModel
this.refreshData();
}
},
mouseleave(){

5
plugins/quickcontrol/index.ts
View File

@ -66,4 +66,9 @@ class DDeiExtQuickControl extends DDeiPluginBase {
}
export {DDeiExtQuickControl}
export * from "./dialogs"
export * from "./quickcontrolpanel"
export * from "./hotkeys";
export * from "./dialogs";
export * from "./quickcontrol-lifecycle";
export default DDeiExtQuickControl;

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

@ -22,9 +22,12 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
moveInControl(operateType, data, ddInstance, evt){
if (ddInstance && ddInstance["AC_DESIGN_EDIT"] && data?.models?.length > 0) {
data.model = data.models[0]
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
if (editor.state == 'designing'){
DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
}
}
}
/**
* 正在进行鼠标操作
@ -32,12 +35,14 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
mouseOperating(operateType, data, ddInstance, evt): DDeiFuncCallResult {
if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
if (editor.state == 'designing') {
let oldState = editor.state;
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
editor.changeState(oldState);
}
}
}
@ -47,15 +52,16 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
closeAndShowQuickControlDialog(operateType, data, ddInstance, evt): DDeiFuncCallResult {
if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
if (editor.state == 'designing') {
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
if(data.models?.length > 0){
data.model = data.models[0]
DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
}
}
}
}
/**
* 鼠标进入控件

11
src/App.vue
View File

@ -5,7 +5,7 @@ import { DDeiExtUML } from "@ddei/uml"
import { DDeiExtSearch } from "@ddei/search"
import { DDeiFuncCallResult } from "ddei-framework";
import DDeiExtQuickStyle from "@ddei/quickstyle"
import DDeiExtQuickControl from "@ddei/quickcontrol"
import { DDeiExtQuickControl, QuickChooseControlDialog } from "@ddei/quickcontrol"
import { defineComponent, markRaw } from "vue";
export default defineComponent({
name: "APP",
@ -31,7 +31,9 @@ export default defineComponent({
DDeiExtUML,
DDeiExtSearch,
DDeiExtQuickStyle,
DDeiExtQuickControl
DDeiExtQuickControl,
QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] })
// QuickChooseControlDialog.configuration({ customControls: ['100001', '100002','100003']})
// DDeiCoreThemeBlack.configuration({
// default: true
// }),
@ -84,6 +86,7 @@ export default defineComponent({
}),
DDeiExtSearch,
DDeiExtQuickStyle,
DDeiExtQuickControl,
],
})
@ -221,9 +224,9 @@ export default defineComponent({
<template>
<DDeiEditorView ref="editorViewer1" :options="options" id="ddei_editor_1"></DDeiEditorView>
<!--
<DDeiEditorView ref="editorViewer2" :options="options1" id="ddei_editor_2"></DDeiEditorView>
<DDeiEditorView ref="editorViewer2" :options="options1" id="ddei_editor_2"></DDeiEditorView>
<!--
<div style="width:400px;height:400px;float:left">
<DDeiEditorView ref="editorViewer3" :options="options2" id="ddei_editor_3"></DDeiEditorView>
</div>