diff --git a/package.json b/package.json new file mode 100644 index 0000000..b1cae00 --- /dev/null +++ b/package.json @@ -0,0 +1,40 @@ +{ + "name": "scrin-visual-editor", + "version": "1.0.0", + "type": "module", + "license": "MIT", + "main": "dist/scrin-visual-editor.umd.js", + "module": "dist/scrin-visual-editor.es.js", + "style": "dist/style.css", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "exports": { + ".": { + "import": "./dist/scrin-visual-editor.es.js", + "require": "./dist/scrin-visual-editor.umd.js" + } + }, + "scripts": { + "build": "vite build", + "dev": "vite build --watch" + }, + "dependencies": { + "@vue-flow/background": "^1.3.2", + "@vue-flow/core": "^1.48.2", + "@vue-flow/node-resizer": "^1.5.1", + "uuid": "^11.0.5" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^6.0.4", + "element-plus": "^2.13.3", + "less": "^4.5.1", + "vite": "^7.3.1", + "vue": "^3.5.29" + }, + "peerDependencies": { + "element-plus": "^2.13.3", + "vue": "^3.3.0" + } +} diff --git a/src/assets/images/boardNodes/annularImg.png b/src/assets/images/boardNodes/annularImg.png new file mode 100644 index 0000000..5c6c1e8 Binary files /dev/null and b/src/assets/images/boardNodes/annularImg.png differ diff --git a/src/assets/images/boardNodes/backgroundBarImg.png b/src/assets/images/boardNodes/backgroundBarImg.png new file mode 100644 index 0000000..8e647e8 Binary files /dev/null and b/src/assets/images/boardNodes/backgroundBarImg.png differ diff --git a/src/assets/images/boardNodes/barImg.png b/src/assets/images/boardNodes/barImg.png new file mode 100644 index 0000000..144c399 Binary files /dev/null and b/src/assets/images/boardNodes/barImg.png differ diff --git a/src/assets/images/boardNodes/carouselImg.png b/src/assets/images/boardNodes/carouselImg.png new file mode 100644 index 0000000..48b8ab8 Binary files /dev/null and b/src/assets/images/boardNodes/carouselImg.png differ diff --git a/src/assets/images/boardNodes/curveImg.png b/src/assets/images/boardNodes/curveImg.png new file mode 100644 index 0000000..624d85e Binary files /dev/null and b/src/assets/images/boardNodes/curveImg.png differ diff --git a/src/assets/images/boardNodes/dashboardImg.png b/src/assets/images/boardNodes/dashboardImg.png new file mode 100644 index 0000000..75f1c2a Binary files /dev/null and b/src/assets/images/boardNodes/dashboardImg.png differ diff --git a/src/assets/images/boardNodes/lineBarImg.png b/src/assets/images/boardNodes/lineBarImg.png new file mode 100644 index 0000000..e498a3b Binary files /dev/null and b/src/assets/images/boardNodes/lineBarImg.png differ diff --git a/src/assets/images/boardNodes/lineImg.png b/src/assets/images/boardNodes/lineImg.png new file mode 100644 index 0000000..eca781a Binary files /dev/null and b/src/assets/images/boardNodes/lineImg.png differ diff --git a/src/assets/images/boardNodes/multiBarsImg.png b/src/assets/images/boardNodes/multiBarsImg.png new file mode 100644 index 0000000..9153c68 Binary files /dev/null and b/src/assets/images/boardNodes/multiBarsImg.png differ diff --git a/src/assets/images/boardNodes/multiCurvesImg.png b/src/assets/images/boardNodes/multiCurvesImg.png new file mode 100644 index 0000000..1298f0d Binary files /dev/null and b/src/assets/images/boardNodes/multiCurvesImg.png differ diff --git a/src/assets/images/boardNodes/multiLinesImg.png b/src/assets/images/boardNodes/multiLinesImg.png new file mode 100644 index 0000000..2136026 Binary files /dev/null and b/src/assets/images/boardNodes/multiLinesImg.png differ diff --git a/src/assets/images/boardNodes/nightingaleRoseDiagramImg.png b/src/assets/images/boardNodes/nightingaleRoseDiagramImg.png new file mode 100644 index 0000000..02f25f9 Binary files /dev/null and b/src/assets/images/boardNodes/nightingaleRoseDiagramImg.png differ diff --git a/src/assets/images/boardNodes/pieImg.png b/src/assets/images/boardNodes/pieImg.png new file mode 100644 index 0000000..6262054 Binary files /dev/null and b/src/assets/images/boardNodes/pieImg.png differ diff --git a/src/assets/images/boardNodes/radarImg.png b/src/assets/images/boardNodes/radarImg.png new file mode 100644 index 0000000..60586a6 Binary files /dev/null and b/src/assets/images/boardNodes/radarImg.png differ diff --git a/src/assets/images/customData/customizationRequestImg.png b/src/assets/images/customData/customizationRequestImg.png new file mode 100644 index 0000000..98ec781 Binary files /dev/null and b/src/assets/images/customData/customizationRequestImg.png differ diff --git a/src/assets/images/customData/mapImg.png b/src/assets/images/customData/mapImg.png new file mode 100644 index 0000000..41458e8 Binary files /dev/null and b/src/assets/images/customData/mapImg.png differ diff --git a/src/assets/images/customData/network.png b/src/assets/images/customData/network.png new file mode 100644 index 0000000..3db008d Binary files /dev/null and b/src/assets/images/customData/network.png differ diff --git a/src/assets/images/formNodes/backgroundImg.png b/src/assets/images/formNodes/backgroundImg.png new file mode 100644 index 0000000..b55a2bd Binary files /dev/null and b/src/assets/images/formNodes/backgroundImg.png differ diff --git a/src/assets/images/formNodes/digitalFlopImg.png b/src/assets/images/formNodes/digitalFlopImg.png new file mode 100644 index 0000000..d9e9568 Binary files /dev/null and b/src/assets/images/formNodes/digitalFlopImg.png differ diff --git a/src/assets/images/formNodes/iconImg.png b/src/assets/images/formNodes/iconImg.png new file mode 100644 index 0000000..9f265b0 Binary files /dev/null and b/src/assets/images/formNodes/iconImg.png differ diff --git a/src/assets/images/formNodes/imgImg.png b/src/assets/images/formNodes/imgImg.png new file mode 100644 index 0000000..9bac73b Binary files /dev/null and b/src/assets/images/formNodes/imgImg.png differ diff --git a/src/assets/images/formNodes/inputNodeImg.png b/src/assets/images/formNodes/inputNodeImg.png new file mode 100644 index 0000000..e3f94e4 Binary files /dev/null and b/src/assets/images/formNodes/inputNodeImg.png differ diff --git a/src/assets/images/formNodes/inputNodeImg2.png b/src/assets/images/formNodes/inputNodeImg2.png new file mode 100644 index 0000000..e3f94e4 Binary files /dev/null and b/src/assets/images/formNodes/inputNodeImg2.png differ diff --git a/src/assets/images/formNodes/inputNodeImg3.png b/src/assets/images/formNodes/inputNodeImg3.png new file mode 100644 index 0000000..e3f94e4 Binary files /dev/null and b/src/assets/images/formNodes/inputNodeImg3.png differ diff --git a/src/assets/images/formNodes/scrollTableImg.png b/src/assets/images/formNodes/scrollTableImg.png new file mode 100644 index 0000000..932b0d6 Binary files /dev/null and b/src/assets/images/formNodes/scrollTableImg.png differ diff --git a/src/assets/images/formNodes/scrollTableImg2.png b/src/assets/images/formNodes/scrollTableImg2.png new file mode 100644 index 0000000..932b0d6 Binary files /dev/null and b/src/assets/images/formNodes/scrollTableImg2.png differ diff --git a/src/assets/images/formNodes/textImg.png b/src/assets/images/formNodes/textImg.png new file mode 100644 index 0000000..7b88028 Binary files /dev/null and b/src/assets/images/formNodes/textImg.png differ diff --git a/src/assets/images/formNodes/timeImg.png b/src/assets/images/formNodes/timeImg.png new file mode 100644 index 0000000..8bb0868 Binary files /dev/null and b/src/assets/images/formNodes/timeImg.png differ diff --git a/src/assets/images/formNodes/timelineImg.png b/src/assets/images/formNodes/timelineImg.png new file mode 100644 index 0000000..ed7433f Binary files /dev/null and b/src/assets/images/formNodes/timelineImg.png differ diff --git a/src/assets/images/formNodes/videoImg.png b/src/assets/images/formNodes/videoImg.png new file mode 100644 index 0000000..5525d3a Binary files /dev/null and b/src/assets/images/formNodes/videoImg.png differ diff --git a/src/components/external/VisualEditor.vue b/src/components/external/VisualEditor.vue new file mode 100644 index 0000000..a2c8ad8 --- /dev/null +++ b/src/components/external/VisualEditor.vue @@ -0,0 +1,470 @@ + + + \ No newline at end of file diff --git a/src/components/inside/FlowRuler.vue b/src/components/inside/FlowRuler.vue new file mode 100644 index 0000000..1c8614c --- /dev/null +++ b/src/components/inside/FlowRuler.vue @@ -0,0 +1,158 @@ + + + + + diff --git a/src/components/inside/boardNodes/index.vue b/src/components/inside/boardNodes/index.vue new file mode 100644 index 0000000..263edf4 --- /dev/null +++ b/src/components/inside/boardNodes/index.vue @@ -0,0 +1,177 @@ + + + \ No newline at end of file diff --git a/src/components/inside/customData/index.vue b/src/components/inside/customData/index.vue new file mode 100644 index 0000000..97d2842 --- /dev/null +++ b/src/components/inside/customData/index.vue @@ -0,0 +1,73 @@ + + + \ No newline at end of file diff --git a/src/components/inside/formNodes/index.vue b/src/components/inside/formNodes/index.vue new file mode 100644 index 0000000..1c474b5 --- /dev/null +++ b/src/components/inside/formNodes/index.vue @@ -0,0 +1,213 @@ + + + \ No newline at end of file diff --git a/src/components/inside/otherNodes/index.vue b/src/components/inside/otherNodes/index.vue new file mode 100644 index 0000000..c05f54d --- /dev/null +++ b/src/components/inside/otherNodes/index.vue @@ -0,0 +1,68 @@ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..4e05bce --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import VisualEditor from './components/external/VisualEditor.vue' + +export { VisualEditor } + +export default { + install(app) { + app.component('VisualEditor', VisualEditor) + } +} \ No newline at end of file diff --git a/src/util/tool.js b/src/util/tool.js new file mode 100644 index 0000000..d4da7ea --- /dev/null +++ b/src/util/tool.js @@ -0,0 +1,515 @@ +import {useVueFlow} from '@vue-flow/core'; +import {ref,} from 'vue'; +import {v4 as uuidv4} from 'uuid'; + + +const getId = (type) => { + return `${type}_${uuidv4().replaceAll('-', '_')}`; +}; + +const optionList = (e) => { + const normalOption = { + title: '', boundaryGap: true, + } + const chartOption = { + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: true, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', + yName: '', + yNames: [], + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: true, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', + seriesColor: '#9E87FF', + tooltip: true, + legend: true, + } + const options = { + ...normalOption, ...chartOption, + } + return e.map(v => { + return {[v]: options[v]}; + }) +} + +const getOption = (e) => { + let res = {} + if (e === 'line' || e === 'multiLines') { + return optionList(['title', 'boundaryGap', 'gridTop', 'gridLeft', 'gridBottom', 'gridRight', 'xName', 'xNameLocation', 'xAxisLineShow', 'xAxisLineColor', 'xAxisTickShow', 'xAxisTickInside', 'xAxisTickColor', 'xAxisLabelShow', 'xAxisLabelInterval', 'xAxisLabelInside', 'xAxisLabelRotate', 'xAxisLabelFormatter', 'xAxisLabelColor', 'xAxisLabelFontSize', 'xAxisLabelMargin', 'xAxisSplitLineShow', 'xAxisSplitLineColor', 'xAxisSplitLineType', 'yName', 'yNames', 'yNameLocation', 'yAxisLineShow', 'yAxisLineColor', 'yAxisTickShow', 'yAxisTickInside', 'yAxisTickColor', 'yAxisLabelShow', 'yAxisLabelInterval', 'yAxisLabelInside', 'yAxisLabelRotate', 'yAxisLabelFormatter', 'yAxisLabelColor', 'yAxisLabelFontSize', 'yAxisLabelMargin', 'yAxisSplitLineShow', 'yAxisSplitLineColor', 'yAxisSplitLineType', 'lineSymbolShow', 'lineSymbolSize', 'lineSymbolType', 'seriesColor', 'tooltip', 'legend']) + } else if (e === 'bar' || e === 'multiBars') { + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: true, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', + yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: true, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + seriesColor: '#9E87FF', + tooltip: true, + legend: true, + isHorizontal: false, + }; + } else if (e === 'backgroundBar') { + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: true, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', + yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: true, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + tooltip: true, + legend: true, + seriesColor: '#9E87FF', + backgroundColor: 'rgba(180, 180, 180, 0.2)', + isHorizontal: false, + }; + } else if (e === 'curve' || e === 'multiCurves') { + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + boundaryGap: true, + xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: true, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', + yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: true, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', + seriesColor: '#9E87FF', + tooltip: true, + legend: true + }; + } else if (e === 'lineBar') { + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: true, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', + yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: true, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', + tooltip: true, + legend: true, + seriesColor: '#9E87FF' + }; + } else if (e === 'radar') { + return { + title: '', + seriesColor: '#9E87FF', + yNames: [], + tooltip: true, + legend: true, + radarCenter: [30, 50], + radarRadius: 40, + radarShape: 'polygon', + radarSplitNumber: 5, + splitLineColor: '#9E87FF' + }; + } else if (e === 'pie' || e === 'nightingaleRoseDiagram') { + return { + title: '', + yNames: [], + tooltip: true, + legend: true, + label: true, + pieCenter: 50, + pieLabelFormatter: '', + legendColor: '#fff' + }; + } else if (e === 'annular') { + return { + title: '', + yNames: [], + tooltip: true, + legend: true, + label: true, + pieCenter: 50, + pieRadius: [30, 70], + colorList: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'], + }; + } else if (e === 'dashboard') { + return {title: '', yNames: [], tooltip: true, legend: true, label: true}; + } else if (e === 'customBoard') { + return {title: '', yNames: []}; + } else if (e === 'data') { + return {timeout: 5}; + } else if (e === 'staticData') { + return {defaultInputArea: '', field: 'input', defaultDataType: ''}; + } else if (e === 'customData') { + return {timeout: 5}; + } else if (e === 'map') { + return {dataMap: []}; + } else if (e === 'inputNode') { + return {field: 'input', defaultInput: ''}; + } else if (e === 'buttonNode') { + return {backgroundColor: '#409EFF', color: '#fff', text: '按钮', sendType: ['ok']}; + } else if (e === 'selectNode') { + return {field: 'select', defaultInput: '', labelField: 'label', valueField: 'value'}; + } else if (e === 'time') { + return {startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: ''}; + } else if (e === 'text') { + return {text: '文字', align: '', color: '#fff', whiteSpace: 'nowrap'}; + } else if (e === 'img') { + return {imgSrc: ''}; + } else if (e === 'icon') { + return {icon: 'Tools', iconSrc: ''}; + } else if (e === 'video') { + return {videoSrc: ''}; + } else if (e === 'timeline') { + return { + color: '#fff', timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true + }; + } else if (e === 'scrollTable' || e === 'table') { + return { + tableOptions: [], + tableCellOptions: [], + tableClassOption: {}, + isThShow: true, + thHeight: '32px', + tdHeight: '28px', + thColor: '#D6F4FF', + tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'], + thBgColor: '#1E90FF', + tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99'] + }; + } else if (e === 'customTable') { + return { + tableOptions: [], + tableCellOptions: [], + cellNum: 2, + dataNum: 2, + tdHeight: '28px', + tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'], + tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99'] + }; + } else if (e === 'carousel') { + return {swiperOptions: {}, imageFit: 'contain', carouselImages: []}; + } else if (e === 'background') { + return {backgroundColor: '#fff', isBorder: true, borderColor: '#fff', backgroundImage: ''}; + } else if (e === 'pagination') { + return {pageSizeField: 'pageSize', currentPageField: 'pageNum'}; + } else if (e === 'digitalFlop') { + return { + field: '', + color: '#fff', + fontSize: 22, + number: 123, + numQuantity: 3, + backgroundColor: 'rgba(180, 180, 180, 0.2)', + isBorder: true, + borderColor: '#fff' + }; + } else if (e === 'menu') { + return {menuField: '', activeField: '', field: '', color: '#fff', activeColor: '#ffd04b'}; + } else if (e === 'tree') { + return {level: 2, treeOptions: []}; + } else { + return {}; + } +}; +const getNodeSize = (e) => { + if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie' || e === 'annular' || e === 'dashboard' || e === 'radar') { + return {width: 300, height: 150}; + } else if (e === 'data' || e === 'customData') { + return {width: 150, height: 50}; + } else if (e === 'inputNode') { + return {width: 100, height: 30}; + } else if (e === 'buttonNode') { + return {width: 100, height: 30}; + } else if (e === 'staticData') { + return {width: 100, height: 60}; + } else if (e === 'text') { + return {width: 100, height: 30}; + } else if (e === 'time') { + return {width: 200, height: 30}; + } else if (e === 'img') { + return {width: 300, height: 300}; + } else if (e === 'map') { + return {width: 100, height: 30}; + } else if (e === 'menu') { + return {width: 200, height: 800}; + } else if (e === 'scrollTable' || e === 'table') { + return {width: 500, height: 300}; + } else if (e === 'tree') { + return {width: 800, height: 800}; + } else { + return {width: 100, height: 100}; + } +}; +const nameEnum = { + line: '折线', + multiLines: '多折线', + curve: '曲线', + multiCurves: '多曲线', + lineBar: '双轴图', + bar: '柱状图', + backgroundBar: '背景柱状图', + multiBars: '多柱状图', + pie: '饼图', + annular: '中空饼图', + dashboard: '仪表盘', + radar: '雷达图', + nightingaleRoseDiagram: '南丁格尔玫瑰图', + carousel: '轮播图', + map: '映射', + staticData: '静态数据', + customData: '自定义数据', + text: '文字', + inputNode: '输入框', + time: '时间', + img: '图片', + icon: '图标', + video: '视频', + timeline: '时间线', + digitalFlop: '数字翻牌器', + scrollTable: '滚动表格', + background: '背景', + tree: '树状图' +}; +const tool = () => { + const nodeType = ref(''); + const customData = ref({script: ''}); + const {addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode} = useVueFlow({id: 'flowA'}); + const onDragStart = (event, type, data) => { + if (event.dataTransfer) { + event.dataTransfer.setData('application/vueflow', type); + event.dataTransfer.effectAllowed = 'move'; + } + + nodeType.value = type; + customData.value = {...customData.value, ...(data || {})}; + document.addEventListener('drop', onDragEnd); + }; + const onDragEnd = () => { + nodeType.value = null; + document.removeEventListener('drop', onDragEnd); + }; + const onDrop = (event) => { + const dimensions = getNodeSize(nodeType.value); + + const position = screenToFlowCoordinate({ + x: event.clientX, y: event.clientY + }); + + const nodeId = getId(nodeType.value); + const newNode = { + id: nodeId, + name: nameEnum[nodeType.value], + draggable: true, + type: nodeType.value, + dimensions, + position, + data: {options: getOption(nodeType.value), outputData: {}, customData: customData.value} + }; + + + const {off} = onNodesInitialized(() => { + updateNode(nodeId, (node) => ({ + position: { + x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 + } + })); + + off(); + }); + + addNodes(newNode); + + }; + const onDragOver = (event) => { + event.preventDefault(); + + if (nodeType.value) { + + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + } + }; + return { + onDragStart, onDragEnd, onDrop, onDragOver + }; +}; +export default tool; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..93b9590 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,38 @@ +import {defineConfig} from 'vite' +import vue from '@vitejs/plugin-vue' +import path from 'path' + +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + // @ 指向 src 目录 + '@': path.resolve(__dirname, 'src') + } + }, + build: { + lib: { + entry: path.resolve(__dirname, 'src/index.js'), + name: 'ScrinVisualEditor', + fileName: (format) => { + if (format === 'es') return 'scrin-visual-editor.es.js' + if (format === 'umd') return 'scrin-visual-editor.umd.js' + return `scrin-visual-editor.${format}.js` + }, + cssFileName: 'style' + }, + preserveModules: false, + assetsInlineLimit: 0, + output: { + preserveModulesRoot: 'src', + }, + rollupOptions: { + external: ['vue'], + output: { + globals: { + vue: 'Vue' + } + } + } + } +}) \ No newline at end of file