mirror of
https://gitee.com/hoslay/ddei-editor.git
synced 2025-12-07 01:28:28 +08:00
380 lines
16 KiB
Vue
380 lines
16 KiB
Vue
<script lang="ts">
|
||
import DDeiEditorView from "./editor/Editor.vue";
|
||
import { DDeiCoreToolboxSimplePanel, DDeiCoreTopMenuSimplePanel, DDeiCoreThemeBlack, DDeiCoreControls, DDeiCoreHotkeys, DDeiKeyActionAllSelect, DDeiCorePropertyViewPanel, DDeiCoreToolboxPanel, DDeiCoreSheetsPanel, DDeiCoreChangeRatioPanel, DDeiCoreChangeRatioDialog, DDeiCoreShapeCountPanel, DDeiCoreBottomMenuPanel, DDeiCoreStandLayout, DDeiCoreSimpleLayout,DDeiCoreOpenFilesViewPanel, DDeiCoreThemeDefault } from "@ddei/core";
|
||
import { DDeiExtUML } from "@ddei/uml"
|
||
import { DDeiExtSearch } from "@ddei/search"
|
||
import { DDeiFuncCallResult, DDeiUtil, DDeiEditorUtil } from "ddei-framework";
|
||
import DDeiExtQuickStyle from "@ddei/quickstyle"
|
||
import DDeiExtTooltip from "@ddei/tooltip"
|
||
import { DDeiExtQuickControl, QuickChooseControlDialog } from "@ddei/quickcontrol"
|
||
import { defineComponent, markRaw } from "vue";
|
||
import DDeiExtHtmlViewer from "@ddei/htmlviewer"
|
||
import ReplaceDivDemo from "./ReplaceDivDemo.vue";
|
||
import HtmlTooltipDemo from "./HtmlTooltipDemo.vue";
|
||
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "./controldefinesdemo"
|
||
import TopMenuViewerDemo from "./TopMenuViewerDemo.vue"
|
||
|
||
export default defineComponent({
|
||
name: "APP",
|
||
components: { DDeiEditorView },
|
||
data() {
|
||
|
||
const options = markRaw({
|
||
currentLayout: "ddei-core-layout-simple",
|
||
config: {
|
||
ratio: 1, //默认缩放比例为150%
|
||
paper:"A6",
|
||
"mark": "水印文本",
|
||
// EXT_STAGE_WIDTH: false,
|
||
// EXT_STAGE_HEIGHT: false,
|
||
// 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
|
||
controlDefines: ControlDefinesDemo,
|
||
// 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
|
||
groupDefines: GroupDefinesDemo,
|
||
initData: {
|
||
controls: [
|
||
// {
|
||
// model: "9999002"
|
||
// },
|
||
// {
|
||
// id: "act_1",
|
||
// model: "102010",
|
||
// type: "emp_1",
|
||
// text: "第一步",
|
||
// border: { color: "yellow", dash: [10, 10, 5, 5], width: 5 },
|
||
// fill: { color: "grey" },
|
||
// }
|
||
{
|
||
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,
|
||
}
|
||
|
||
]
|
||
}
|
||
},
|
||
extensions: [
|
||
// //布局的配置
|
||
// DDeiCoreStandLayout.configuration({
|
||
// //配置插件
|
||
// // 'top': [],
|
||
// 'middle': ['ddei-core-panel-openfilesview', 'ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],// [!code ++]
|
||
// // 'bottom': [],
|
||
// // 'left': [],
|
||
// // 'right': []
|
||
// }),
|
||
DDeiCoreSimpleLayout.configuration({
|
||
other: ['ddei-core-panel-toolbox-simple', 'ddei-core-panel-topmenu-simple'],
|
||
middle: ['ddei-core-panel-canvasview'],
|
||
right: [],
|
||
bottom: []
|
||
}),
|
||
DDeiExtUML,
|
||
DDeiExtSearch,
|
||
DDeiExtTooltip,
|
||
DDeiExtQuickStyle,
|
||
DDeiExtQuickControl,
|
||
//配置htmlviewer插件，matchField用于声明图形控件中的属性与config中的key对应字段
|
||
DDeiExtHtmlViewer.configuration({
|
||
matchField: "type", //匹配字段
|
||
"emp_1": { //key-value
|
||
type: "emp_1",
|
||
name: "张三",
|
||
viewer: ReplaceDivDemo //HTML模板控件
|
||
},
|
||
"emp_2": {
|
||
type: "emp_2",
|
||
name: "李四",
|
||
viewer: ReplaceDivDemo
|
||
},
|
||
"emp_3": {
|
||
type: "emp_3",
|
||
name: "王五",
|
||
viewer: ReplaceDivDemo
|
||
}
|
||
})
|
||
// QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] }),
|
||
// DDeiExtTooltip.configuration({
|
||
// 'ddei-ext-dialog-tooltip':{
|
||
// viewer: HtmlTooltipDemo
|
||
// }
|
||
// })
|
||
// QuickChooseControlDialog.configuration({ customControls: ['100001', '100002','100003']})
|
||
// DDeiCoreThemeBlack.configuration({
|
||
// default: true
|
||
// }),
|
||
// DDeiCoreOpenFilesViewPanel.configuration({ max: 3 })
|
||
]
|
||
})
|
||
const options1 = markRaw({
|
||
// currentLayout: "ddei-core-layout-simple",
|
||
config: {
|
||
// "readonly":true,
|
||
"mark": "水印文本",
|
||
"grid": 2,
|
||
"paper": {type:"A6",direct:1},
|
||
// "paper":"A5",
|
||
"ruler": true,
|
||
"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,
|
||
// }
|
||
// ]
|
||
}
|
||
},
|
||
//配置扩展插件
|
||
extensions: [
|
||
DDeiExtUML,
|
||
DDeiExtQuickStyle,
|
||
DDeiExtSearch,
|
||
DDeiExtQuickControl,
|
||
// DDeiCoreTopMenuSimplePanel.configuration({
|
||
// direct: 2,//方向，1纵向，2横向
|
||
// position: 3,//位置1-9顺时针，1为左上角，9为中心
|
||
// drag: 1,//是否允许拖拽位置
|
||
// items:[//自定义菜单
|
||
// {
|
||
// id:"ddei-core-save",
|
||
// name:"Save"
|
||
// },
|
||
// {
|
||
// id: "ddei-core-open",
|
||
// name: "打开"
|
||
// },
|
||
// {
|
||
// viewer: TopMenuViewerDemo
|
||
// },
|
||
// {
|
||
// id: "ddei-core-new",
|
||
// name: "新建"
|
||
// },
|
||
// {
|
||
// name: "测试",
|
||
// action: function (editor) {
|
||
// console.log("测试:" + editor.id)
|
||
// }
|
||
// }
|
||
// ]
|
||
// }),
|
||
|
||
|
||
|
||
// DDeiCoreStandLayout.configuration({
|
||
//配置插件
|
||
// 'top': [],
|
||
// 'middle': ['ddei-core-panel-openfilesview', 'ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
|
||
// 'bottom': [],
|
||
// 'left': [],
|
||
// 'right': []
|
||
// }),
|
||
|
||
],
|
||
})
|
||
|
||
const options2 = markRaw({
|
||
|
||
config: {
|
||
EXT_STAGE_WIDTH:false,
|
||
GLOBAL_ALLOW_BACK_ACTIVE:true,
|
||
// "readonly": true,
|
||
access: { "DEL": false, "SCALE": false, "ROTATE": false },
|
||
"paper":"无",
|
||
"ruler": true,
|
||
initData: {
|
||
controls: [
|
||
{
|
||
id: "act_1",
|
||
model: "102010",
|
||
code: "active_01",
|
||
text: "第一步",
|
||
y: 70,
|
||
},
|
||
{
|
||
id: "act_2",
|
||
model: "102010",
|
||
code: "active_02",
|
||
width: 200,
|
||
height: 100,
|
||
text: "第二步",
|
||
y: -70,
|
||
}
|
||
]
|
||
}
|
||
},
|
||
//配置扩展插件
|
||
extensions: [
|
||
//布局的配置
|
||
DDeiCoreStandLayout.configuration({
|
||
//配置插件
|
||
'top': [],
|
||
'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
|
||
'bottom': [],
|
||
'left': [],
|
||
'right': []
|
||
}),
|
||
],
|
||
})
|
||
|
||
const options3 = markRaw({
|
||
config: {
|
||
EXT_STAGE_WIDTH:false,
|
||
EXT_STAGE_HEIGHT:false,
|
||
ruler:false,
|
||
grid: 0,
|
||
// readonly:true,
|
||
initData: {
|
||
controls: [
|
||
{
|
||
id: "rect_1",
|
||
model: "102010",
|
||
code: "active_01",
|
||
width: 200,
|
||
height: 100,
|
||
text: "第一步"
|
||
},
|
||
{
|
||
id: "rect_2",
|
||
model: "102010",
|
||
code: "active_02",
|
||
width: 200,
|
||
height: 100,
|
||
text: "第二步"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
//配置扩展插件
|
||
extensions: [
|
||
//布局的配置
|
||
DDeiCoreStandLayout.configuration({
|
||
//配置插件
|
||
'top': [],
|
||
'middle': ['ddei-core-panel-canvasview'],
|
||
'bottom': [],
|
||
'left': [],
|
||
'right': []
|
||
}),
|
||
DDeiCoreThemeBlack.configuration({
|
||
default: true
|
||
}),
|
||
DDeiExtQuickStyle
|
||
],
|
||
})
|
||
const options4 = markRaw({
|
||
config: {
|
||
|
||
},
|
||
//配置扩展插件
|
||
extensions: [
|
||
//布局的配置
|
||
DDeiCoreStandLayout.configuration({
|
||
//配置插件
|
||
'top': [],
|
||
'middle': ['ddei-core-panel-canvasview'],
|
||
'bottom': [],
|
||
'left': [],
|
||
'right': []
|
||
}),
|
||
],
|
||
})
|
||
|
||
const jsontext2 = `
|
||
{"name":"新建文件_NEW","desc":"","extData":{},"state":1,"publish":"0","lastUpdateTime":1721721532072,"path":"/新建文件_NEW","sheets":[{"name":"页面-1","desc":"页面-1","stage":{"id":"stage_1","layers":[{"id":"layer_default","name":"图层","models":{"task_1":{"id":"task_1","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":148.5,"y":105,"z":1},"hpv":[{"x":148.5,"y":105,"z":1},{"x":174.95833333333334,"y":105,"z":1}],"exPvs":{"_37ac7604d8c4643f80da10b3ac3cac6e":{"x":163.05208333333331,"y":107.72499999999997,"z":1,"rate":0.6471316085489304,"sita":10.60628276121123,"index":3,"id":"_37ac7604d8c4643f80da10b3ac3cac6e"}},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":177.60416666666669,"y":123.52083333333333,"z":1},"model":"102010"},"task_7":{"id":"task_7","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":166.35416666666663,"y":105.60833333333332,"z":1},"hpv":[{"x":166.35416666666663,"y":105.60833333333332,"z":1},{"x":192.81250000000003,"y":105.60833333333332,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":195.45833333333334,"y":124.12916666666663,"z":1},"model":"102010"},"line_8":{"id":"line_8","modelCode":"100401","modelType":"DDeiLine","hpv":[{"x":163.05208333333331,"y":107.72499999999997,"z":1},{"x":189.51041666666666,"y":107.72499999999997,"z":1}],"pvs":[{"x":163.05208333333331,"y":107.72499999999997,"z":1,"isVector3":true},{"x":182.75833333333333,"y":107.72499999999997,"z":1,"isVector3":true}],"exPvs":{},"mirrorX":false,"mirrorY":false,"sptStyle":{},"type":2,"freeze":0},"task_9":{"id":"task_9","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":183.55208333333331,"y":110.10624999999997,"z":1},"hpv":[{"x":183.55208333333331,"y":110.10624999999997,"z":1},{"x":210.01041666666663,"y":110.10624999999997,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":212.65624999999997,"y":128.62708333333327,"z":1},"model":"102010"},"task_10":{"id":"task_10","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":184.3458333333333,"y":112.22291666666665,"z":1},"hpv":[{"x":184.3458333333333,"y":112.22291666666665,"z":1},{"x":210.80416666666665,"y":112.22291666666665,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":213.44999999999996,"y":130.74374999999995,"z":1},"model":"102010"},"task_11":{"id":"task_11","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":184.3458333333333,"y":112.22291666666665,"z":1},"hpv":[{"x":184.3458333333333,"y":112.22291666666665,"z":1},{"x":210.80416666666665,"y":112.22291666666665,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":213.44999999999996,"y":130.74374999999995,"z":1},"model":"102010"},"task_12":{"id":"task_12","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":156.03541666666663,"y":104.8145833333333,"z":1},"hpv":[{"x":156.03541666666663,"y":104.8145833333333,"z":1},{"x":182.49374999999998,"y":104.8145833333333,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":185.13958333333332,"y":123.33541666666662,"z":1},"model":"102010"}},"midList":["task_1","task_7","line_8","task_9","task_10","task_11","task_12"],"modelType":"DDeiLayer","baseModelType":"DDeiLayer","index":-1,"background":null,"display":1,"lock":false,"print":true,"centerOpPoints":[],"modelCode":"DDeiLayer","modelChanged":true,"modelNumber":0}],"layerIndex":0,"idIdx":12,"modelType":"DDeiStage","ratio":1,"width":2245.0393700787404,"height":1587.4015748031497,"wpv":{"x":-615,"y":-375,"z":0},"links":[{"smid":"task_1","dmid":"line_8","smpath":"exPvs._37ac7604d8c4643f80da10b3ac3cac6e","dmpath":"startPoint"}],"spv":{"x":561.2598425196851,"y":396.85039370078744,"z":1},"modelCode":"DDeiStage","drawing":true,"copyMode":"copy","tempCursorOPpoint":{"x":1200,"y":813,"z":1,"isMiddle":true,"sita":180,"rate":0.5,"index":1,"plLength":0,"model":{"id":"task_9","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":183.55208333333331,"y":110.10624999999997,"z":1},"hpv":[{"x":183.55208333333331,"y":110.10624999999997,"z":1},{"x":210.01041666666663,"y":110.10624999999997,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"初始化图形","bpv":{"x":212.65624999999997,"y":128.62708333333327,"z":1},"model":"102010"},"mode":null},"unit":"mm"},"active":1,"modelType":"DDeiSheet","unicode":"0551c7341e1166a9b9000932cd46a41e"}],"currentSheetIndex":0,"modelType":"DDeiFile","modelNumber":0,"unicode":"22641afa27d069c986e615cae9600d0d","ddeiVersion":1237}
|
||
`
|
||
|
||
return {
|
||
options:options,
|
||
options1:options1,
|
||
options2:options2,
|
||
options3:options3,
|
||
options4:options4,
|
||
jsontext2: jsontext2,
|
||
jsontext:"无JSON"
|
||
};
|
||
},
|
||
|
||
methods:{
|
||
getData(){
|
||
//获取编辑器实例
|
||
let editor = this.$refs["editorViewer3"].editor;
|
||
//获取整个editor的JSON
|
||
let editorJSON = editor.toJSON();
|
||
this.jsontext = JSON.stringify(editorJSON);
|
||
},
|
||
|
||
loadDataToEditor(){
|
||
|
||
//获取编辑器实例
|
||
let editor = this.$refs["editorViewer1"].editor;
|
||
//获取整个editor的JSON
|
||
let fileJSON = JSON.parse(this.jsontext2)
|
||
editor.loadData(fileJSON)
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
|
||
<template>
|
||
|
||
<DDeiEditorView ref="editorViewer1" :options="options" id="ddei_editor_1"></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>
|
||
|
||
<button @click="getData" style="border:1px solid grey;margin-left:5px;padding:5px">获取JSON</button>
|
||
<div style="width:400px;height:400px;margin:100px auto;">
|
||
<textarea :value="jsontext"
|
||
style="border:1px solid grey;margin-left:5px;padding:5px;width:100%;height:100%"></textarea>
|
||
</div>
|
||
|
||
<div style="width:500px;height:500px;float:left">
|
||
<DDeiEditorView ref="editorViewer4" :options="options3" id="ddei_editor_4"></DDeiEditorView>
|
||
</div>
|
||
<div style="width:400px;height:400px;float:left">
|
||
<DDeiEditorView ref="editorViewer5" :options="options4" id="ddei_editor_5"></DDeiEditorView>
|
||
</div>
|
||
-->
|
||
</template>
|
||
|
||
<style>
|
||
|
||
|
||
</style> |