mirror of
https://gitee.com/hoslay/ddei-editor.git
synced 2025-12-07 01:28:28 +08:00
完成了快速控件插件
This commit is contained in:
猴赛雷
parent
f08cf28702
commit
fb0c0ade46
@ -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;
|
||||
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)
|
||||
}
|
||||
}
|
||||
if (group) {
|
||||
group.expand = hg.expand
|
||||
groups.push(group)
|
||||
}
|
||||
});
|
||||
})
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
editor: {
|
||||
type: DDeiEditor,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -106,126 +106,129 @@ export default {
|
||||
},
|
||||
|
||||
mouseEnter(type,el,evt) {
|
||||
if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
|
||||
//显示弹出框
|
||||
let editorEle = document.getElementById(this.editor.id);
|
||||
let editorDomPos = DDeiUtil.getDomAbsPosition(editorEle);
|
||||
let elPos = evt.currentTarget.getBoundingClientRect()
|
||||
//向上区间寻找，是否有控件
|
||||
let existsControl = null;
|
||||
let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
|
||||
let outRect = DDeiAbstractShape.getOutRectByPV([model])
|
||||
if (type == 1) {
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
|
||||
if (controls?.length > 0){
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 2) {
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 3) {
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 4) {
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
}
|
||||
//如果没有控件，弹出创建控件框
|
||||
if (!existsControl){
|
||||
if (this.editor.tempLineModel){
|
||||
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
|
||||
if(type == 1){
|
||||
left -= 120 - elPos.width / 2
|
||||
top -= 240 + elPos.height / 2
|
||||
} else if (type == 2) {
|
||||
left += evt.currentTarget.parentElement.clientWidth
|
||||
top -= 120 - elPos.height / 2
|
||||
} else if (type == 3) {
|
||||
left -= 120 - elPos.width / 2
|
||||
top += elPos.height * 1.5
|
||||
} else if (type == 4) {
|
||||
left -= 240 + evt.currentTarget.parentElement.clientWidth/2
|
||||
top -= 120 - elPos.height/2
|
||||
}
|
||||
|
||||
DDeiEditorUtil.showDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', {
|
||||
group: "canvas-pop-quickcreatecontrol",
|
||||
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){
|
||||
//添加后的控件坐标，将其移动到特定位置
|
||||
let outRect1 = DDeiAbstractShape.getOutRectByPV([existsControl])
|
||||
let sx, sy, ex, ey
|
||||
let startSita, endSita
|
||||
//创建控件
|
||||
if(this.editor.state == 'designing'){
|
||||
if (this.editor.tempPopData['ddei-ext-dialog-quickcontrol']){
|
||||
//显示弹出框
|
||||
let editorEle = document.getElementById(this.editor.id);
|
||||
let editorDomPos = DDeiUtil.getDomAbsPosition(editorEle);
|
||||
let elPos = evt.currentTarget.getBoundingClientRect()
|
||||
//向上区间寻找，是否有控件
|
||||
let existsControl = null;
|
||||
let model = this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
|
||||
let outRect = DDeiAbstractShape.getOutRectByPV([model])
|
||||
if (type == 1) {
|
||||
sx = (outRect.x + outRect.x1) / 2
|
||||
sy = outRect.y
|
||||
ex = (outRect1.x + outRect1.x1) / 2
|
||||
ey = outRect1.y1
|
||||
startSita = -90
|
||||
endSita = 90
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y-150, x1: outRect.x1, y1: outRect.y})
|
||||
if (controls?.length > 0){
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 2) {
|
||||
sx = outRect.x1
|
||||
sy = (outRect.y+outRect.y1)/2
|
||||
ex = outRect1.x
|
||||
ey = (outRect1.y + outRect1.y1) / 2
|
||||
startSita = 0
|
||||
endSita = 180
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x1, y: outRect.y, x1: outRect.x1+150, y1: outRect.y1 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 3) {
|
||||
sx = (outRect.x + outRect.x1) / 2
|
||||
sy = outRect.y1
|
||||
ex = (outRect1.x + outRect1.x1) / 2
|
||||
ey = outRect1.y
|
||||
startSita = 90
|
||||
endSita = -90
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x, y: outRect.y1, x1: outRect.x1, y1: outRect.y1+150 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
} else if (type == 4) {
|
||||
sx = outRect.x
|
||||
sy = (outRect.y + outRect.y1) / 2
|
||||
ex = outRect1.x1
|
||||
ey = (outRect1.y + outRect1.y1) / 2
|
||||
startSita = 180
|
||||
endSita = 0
|
||||
let controls = this.editor.ddInstance.stage.getLayerModels([model.id], 100, { x: outRect.x-150, y: outRect.y, x1: outRect.x, y1: outRect.y1 })
|
||||
if (controls?.length > 0) {
|
||||
existsControl = controls[0];
|
||||
}
|
||||
}
|
||||
//如果没有控件，弹出创建控件框
|
||||
if (!existsControl){
|
||||
if (this.editor.tempLineModel){
|
||||
this.editor.ddInstance.stage.removeModel(this.editor.tempLineModel,true)
|
||||
delete this.editor.tempLineModel
|
||||
}
|
||||
let left = elPos.left
|
||||
let top = elPos.top
|
||||
if(type == 1){
|
||||
left -= 120 - elPos.width / 2
|
||||
top -= 240 + elPos.height / 2
|
||||
} else if (type == 2) {
|
||||
left += evt.currentTarget.parentElement.clientWidth
|
||||
top -= 120 - elPos.height / 2
|
||||
} else if (type == 3) {
|
||||
left -= 120 - elPos.width / 2
|
||||
top += elPos.height * 1.5
|
||||
} else if (type == 4) {
|
||||
left -= 240 + evt.currentTarget.parentElement.clientWidth/2
|
||||
top -= 120 - elPos.height/2
|
||||
}
|
||||
|
||||
DDeiEditorUtil.showDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', {
|
||||
group: "canvas-pop-quickcreatecontrol",
|
||||
type:type,
|
||||
model: this.editor.tempPopData['ddei-ext-dialog-quickcontrol'].model
|
||||
}, { type: 99, left: left, top: top, hiddenMask: true }, null, true, true)
|
||||
}
|
||||
//如果有控件，创建连线(影子控件)
|
||||
else if (!this.editor.tempLineModel){
|
||||
//添加后的控件坐标，将其移动到特定位置
|
||||
let outRect1 = DDeiAbstractShape.getOutRectByPV([existsControl])
|
||||
let sx, sy, ex, ey
|
||||
let startSita, endSita
|
||||
//创建控件
|
||||
if (type == 1) {
|
||||
sx = (outRect.x + outRect.x1) / 2
|
||||
sy = outRect.y
|
||||
ex = (outRect1.x + outRect1.x1) / 2
|
||||
ey = outRect1.y1
|
||||
startSita = -90
|
||||
endSita = 90
|
||||
} else if (type == 2) {
|
||||
sx = outRect.x1
|
||||
sy = (outRect.y+outRect.y1)/2
|
||||
ex = outRect1.x
|
||||
ey = (outRect1.y + outRect1.y1) / 2
|
||||
startSita = 0
|
||||
endSita = 180
|
||||
} else if (type == 3) {
|
||||
sx = (outRect.x + outRect.x1) / 2
|
||||
sy = outRect.y1
|
||||
ex = (outRect1.x + outRect1.x1) / 2
|
||||
ey = outRect1.y
|
||||
startSita = 90
|
||||
endSita = -90
|
||||
} else if (type == 4) {
|
||||
sx = outRect.x
|
||||
sy = (outRect.y + outRect.y1) / 2
|
||||
ex = outRect1.x1
|
||||
ey = (outRect1.y + outRect1.y1) / 2
|
||||
startSita = 180
|
||||
endSita = 0
|
||||
}
|
||||
//创建连线
|
||||
let lines = this.editor.addLines([
|
||||
{
|
||||
model: '100401',
|
||||
type: 2,
|
||||
dash:[10,5],
|
||||
startPoint: { x: sx, y: sy },
|
||||
endPoint: { x: ex, y: ey },
|
||||
smodel: { id: model.id, x: sx, y: sy, rate: 0.5, sita: startSita },
|
||||
emodel: { id: existsControl.id, x: ex, y: ey, rate: 0.5, sita: endSita }
|
||||
},
|
||||
],false)
|
||||
this.editor.tempLineModel = lines[0];
|
||||
DDeiEditorUtil.closeDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', true)
|
||||
this.editor.bus.push(DDeiEnumBusCommandType.RefreshShape);
|
||||
this.editor.bus.executeAll();
|
||||
}
|
||||
//创建连线
|
||||
let lines = this.editor.addLines([
|
||||
{
|
||||
model: '100401',
|
||||
type: 2,
|
||||
dash:[10,5],
|
||||
startPoint: { x: sx, y: sy },
|
||||
endPoint: { x: ex, y: ey },
|
||||
smodel: { id: model.id, x: sx, y: sy, rate: 0.5, sita: startSita },
|
||||
emodel: { id: existsControl.id, x: ex, y: ey, rate: 0.5, sita: endSita }
|
||||
},
|
||||
],false)
|
||||
this.editor.tempLineModel = lines[0];
|
||||
DDeiEditorUtil.closeDialog(this.editor, 'ddei-ext-dialog-quickchoosecontrol', true)
|
||||
this.editor.bus.push(DDeiEnumBusCommandType.RefreshShape);
|
||||
this.editor.bus.executeAll();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createLineOk(){
|
||||
delete this.editor.tempLineModel.dash
|
||||
this.editor.tempLineModel.render?.clearCachedValue()
|
||||
delete this.editor.tempLineModel
|
||||
this.refreshData();
|
||||
if (this.editor.tempLineModel){
|
||||
delete this.editor.tempLineModel.dash
|
||||
this.editor.tempLineModel.render?.clearCachedValue()
|
||||
delete this.editor.tempLineModel
|
||||
this.refreshData();
|
||||
}
|
||||
},
|
||||
|
||||
mouseleave(){
|
||||
|
||||
@ -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;
|
||||
@ -22,7 +22,10 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
|
||||
moveInControl(operateType, data, ddInstance, evt){
|
||||
if (ddInstance && ddInstance["AC_DESIGN_EDIT"] && data?.models?.length > 0) {
|
||||
data.model = data.models[0]
|
||||
DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
|
||||
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
|
||||
if (editor.state == 'designing'){
|
||||
DDeiExtSearchLifeCycle.showQuickControlDialog(operateType, data, ddInstance, evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,10 +35,12 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
|
||||
mouseOperating(operateType, data, ddInstance, evt): DDeiFuncCallResult {
|
||||
if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
|
||||
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
|
||||
let oldState = editor.state;
|
||||
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickcontrol', true)
|
||||
DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-quickchoosecontrol', true)
|
||||
editor.changeState(oldState);
|
||||
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,12 +52,13 @@ class DDeiExtSearchLifeCycle extends DDeiLifeCycle {
|
||||
closeAndShowQuickControlDialog(operateType, data, ddInstance, evt): DDeiFuncCallResult {
|
||||
if (ddInstance && ddInstance["AC_DESIGN_EDIT"]) {
|
||||
let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
|
||||
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)
|
||||
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
11
src/App.vue
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user