vue-wiring-diagram 1.1.22 → 1.1.24

package/packages/components/editor/index.vue

@@ -1,590 +1,590 @@
-<template>
-    <div class="page-container">
-        <!--操作烂-->
-        <div class="tool-bar">
-            <div class="action">
-                <el-dropdown @command="handleCommandSetting">
-          <span class="el-dropdown-link">
-            <el-button size="small" text>工具
-              <el-icon><ArrowDown/></el-icon>
-            </el-button>
-          </span>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item command="snapLine">对齐线</el-dropdown-item>
-                            <el-dropdown-item command="select">框选</el-dropdown-item>
-                            <el-dropdown-item command="drawLine">绘制直线</el-dropdown-item>
-                            <el-dropdown-item command="adaptive">视图自适应</el-dropdown-item>
-                            <el-dropdown-item command="shortcuts">查看快捷键</el-dropdown-item>
-                            <el-dropdown-item command="image">图片管理</el-dropdown-item>
-                            <el-dropdown-item command="clear">清空画布</el-dropdown-item>
-                            <el-dropdown-item command="export">导出成图片</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-            </div>
-            <div class="action" style="margin-right: 50px">
-                <el-tooltip content="预览" placement="bottom">
-                    <el-button size="small" :icon="View" @click="viewJson">
-                    </el-button>
-                </el-tooltip>
-                <el-tooltip content="保存" placement="bottom">
-                    <el-button size="small" :icon="Document" @click="getJson">
-                    </el-button>
-                </el-tooltip>
-            </div>
-        </div>
-        <div class="board">
-            <!--模型列表-->
-            <div id="stencil"></div>
-            <!--画板-->
-            <div class="drawing-board-box">
-                <div id="drawing-board" ref="drawBoard"></div>
-            </div>
-            <!--控制器-->
-            <div id="controls">
-                <div class="controls-label" v-if="controls.label">{{ controls.label }}</div>
-                <el-scrollbar>
-                    <component :is="controls.component" :graph="graph" :payload="payload"
-                               :key="controlsKey" :itemId="props.itemId"></component>
-                </el-scrollbar>
-            </div>
-        </div>
-        <el-dialog v-model="dialog.show" width="400px" title="快捷键" :close-on-click-modal="false"
-                   :close-on-press-escape="false">
-            <shortcuts/>
-        </el-dialog>
-        <el-dialog v-model="imageManagement.show" width="800px" title="图片管理" :close-on-click-modal="false"
-                   :close-on-press-escape="false">
-            <image-management v-if="imageManagement.show"/>
-        </el-dialog>
-        <el-drawer class="no-border-drawer" v-model="view.show" @close="closeViewBtnClick" title="预览"
-                   :direction="'ttb'" size="100%">
-            <div style="width: 100%;height: 100%;background: black">
-                <wiring-diagram-preview v-if="view.show" :background="view.background" :grid="view.grid"
-                                        :data="view.data"></wiring-diagram-preview>
-            </div>
-        </el-drawer>
-    </div>
-</template>
-
-<script setup>
-import {onMounted, reactive, ref, shallowRef} from "vue";
-import moment from 'moment'
-import {ElMessage, ElTooltip} from "element-plus";
-import {getData, showPorts} from "../common.js";
-import {backgroundOptions, gridOptions, lineOptions, stencilOptions, textOptions} from "../settings.js";
-import GraphControl from '../graph-control/index.vue'
-import textControl from '../text-control/index.vue'
-import edgeControl from "../edge-control/index.vue";
-import Shortcuts from "../Shortcuts.vue";
-import {Graph} from "@antv/x6";
-import {Stencil} from '@antv/x6-plugin-stencil'
-import {Export} from "@antv/x6-plugin-export";
-import imageControl from "../image-control/index.vue";
-import {baseShape} from "../baseShape.js";
-import {portsOptions} from "../portsOptions.js";
-import {Document, View, ArrowDown} from "@element-plus/icons-vue";
-import WiringDiagramPreview from "../preview/index.vue";
-import ImageManagement from "../image-control/image-management.vue";
-import {get} from "packages/http.js";
-import {
-    clipboard,
-    keyboard,
-    snapLine,
-    transform,
-    history,
-    selection,
-    setMathRandom,
-    deleteCell,
-    copyCell,
-    pasteCell, undoCell, redoCell, addLineTools, isLineOrPipe, setSunCloudImageUrl
-} from "packages/components/tools.js";
-import {isSunOs} from "packages";
-
-defineOptions({
-    name: 'editor'
-})
-
-const props = defineProps({
-    id: {
-        type: String,
-        default: ''
-    },
-    itemId: {
-        type: String,
-        default: ''
-    }
-})
-
-const graph = ref() // 画布实例
-// 控制器
-const controls = reactive({
-    label: '', // 控制器
-    component: shallowRef(null), // 控制器组件
-})
-const controlsKey = ref(null) // 控制器key
-const payload = ref(null)
-
-/**
- * 初始化画布
- */
-const initGraph = () => {
-    window.__x6_instances__ = []
-    const container = document.getElementById('drawing-board')
-    graph.value = new Graph({
-        container: container,
-        autoResize: true,
-        panning: true,
-        mousewheel: true,
-        connecting: {
-            snap: true,
-            allowEdge: true,
-            highlight: true,
-            router: 'orth',
-            connectionPoint: {
-                name: 'anchor',
-            },
-            anchor: 'center',
-            createEdge() {
-                return graph.value.createEdge({
-                    inherit: 'edge',
-                    ...lineOptions,
-                    data: {
-                        type: isLineOrPipe(),
-                    },
-                    zIndex: 0,
-                })
-            }
-        },
-    })
-    window.__x6_instances__.push(graph.value)
-    graph.value.use(transform())
-    graph.value.use(keyboard())
-    graph.value.use(snapLine())
-    graph.value.use(clipboard())
-    graph.value.use(history())
-    graph.value.use(selection())
-    graph.value.bindKey(['delete', 'backspace'], () => {
-        deleteCell(graph.value)
-    })
-    graph.value.bindKey(['ctrl+c', 'cmd + c'], () => {
-        copyCell(graph.value)
-    })
-    graph.value.bindKey(['ctrl+v', 'cmd + v'], () => {
-        pasteCell(graph.value)
-    })
-    graph.value.bindKey(['ctrl+z', 'cmd + z'], () => {
-        undoCell(graph.value)
-    })
-    graph.value.bindKey(['ctrl+y', 'cmd + y'], () => {
-        redoCell(graph.value)
-    })
-
-    let setZIndexTimer = null
-
-    graph.value.on('edge:click', ({cell}) => {
-        payload.value = cell
-        controls.component = edgeControl
-        controls.label = '线段属性'
-        controlsKey.value = setMathRandom()
-    })
-
-    //给线添加拐点
-    graph.value.on('edge:mouseenter', ({cell}) => {
-        clearTimeout(setZIndexTimer)
-        cell.toFront()
-        addLineTools(cell)
-    })
-
-    // 隐藏线段的拐点
-    graph.value.on('edge:mouseleave', ({cell}) => {
-        setZIndexTimer = setTimeout(() => {
-            cell.toBack()
-            cell.removeTools()
-        }, 300)
-
-    })
-
-    //连接桩显示
-    graph.value.on('node:mouseenter', () => {
-        showPorts('#drawing-board', true)
-    })
-
-    //连接桩隐藏
-    graph.value.on('node:mouseleave', () => {
-        showPorts("#drawing-board", false)
-    })
-
-    // 导出插件
-    graph.value.use(new Export())
-
-    //选中画布
-    graph.value.on('blank:click', ({e, x, y}) => {
-        payload.value = graph
-        controls.component = GraphControl
-        controls.label = '画布属性'
-        controlsKey.value = setMathRandom()
-    })
-
-
-    //选中节点
-    graph.value.on('cell:click', ({cell}) => {
-        payload.value = cell
-        controlsKey.value = setMathRandom()
-        if (cell.data?.type === 'text') {
-            controls.component = textControl
-            controls.label = '文本属性'
-            return
-        }
-        if (cell.data?.type === 'base-shape') {
-            controls.component = textControl
-            controls.label = '基础图形属性'
-            return
-        }
-        if (cell?.shape === 'edge') {
-            controls.component = edgeControl
-            controls.label = '连线属性'
-            return
-        }
-        if (cell?.shape === 'image') {
-            controls.component = imageControl
-            controls.label = '图片属性'
-            return
-        }
-        controls.component = null
-        controls.label = null
-    })
-
-    graph.value.on('render:done', () => {
-        showPorts("#drawing-board", false)
-        adaptive()
-    })
-}
-
-const stencil = ref()
-
-/**
- * 初始化模型列表
- */
-const initStencil = () => {
-    stencil.value = new Stencil({
-        target: graph.value,
-        ...stencilOptions,
-        groups: [
-            {
-                name: '基础组件',
-                graphPadding: 30
-            },
-        ],
-        search(cell, keyword) {
-            return cell.label?.indexOf(keyword) !== -1
-        },
-        placeholder: '搜索',
-        notFoundText: '未找到匹配项',
-        getDragNode: (node) => {
-            const copyNode = node.clone({keepId: true})
-            if (copyNode.label !== '文本') {
-                copyNode.label = ''
-            }
-            return copyNode
-        },
-    })
-    const text = graph.value.createNode({
-        ...textOptions
-    })
-    const baseShapes = baseShape.map(item => {
-        item.ports = portsOptions
-        return graph.value.createNode(item)
-    })
-    stencil.value.load([text, ...baseShapes], '基础组件')
-    get('/custom/groupList').then(res => {
-        const data = res?.data || []
-        data?.forEach(group => {
-            stencil.value.addGroup({
-                name: group?.groupName,
-                graphPadding: 30
-            })
-            const image = group?.pictureList.map(item => {
-                const nodeOption = {
-                    shape: 'image',
-                    imageUrl: isSunOs ? item?.imageUrl : setSunCloudImageUrl(item?.imageUrl),
-                    ports: portsOptions,
-                    width: 64,
-                    height: 64,
-                    label: item.imageName
-                }
-                return graph.value.createNode(nodeOption)
-            })
-            stencil.value.load(image, group?.groupName)
-            document.getElementById('stencil').appendChild(stencil.value.container)
-        })
-    }).finally(() => {
-        setTimeout(() => {
-            const container = stencil.value.container;
-            const nodes = container.querySelectorAll('.x6-node');
-            const baseLength = baseShape.length;
-
-            // 使用事件委托优化事件监听
-            container.addEventListener('mouseenter', handleMouseEnter, true);
-            container.addEventListener('mouseleave', handleMouseLeave, true);
-
-            nodes.forEach((node, index) => {
-                const isCustomNode = index > baseLength;
-                const text = node.querySelector('text');
-
-                if (isCustomNode && text) {
-                    Object.assign(text.style, {
-                        display: 'none',
-                        fontSize: '12px',
-                        fill: '#ffffff'
-                    });
-                    text.setAttribute('x', '0%');
-                    text.setAttribute('y', '40');
-                    node.style.position = 'relative';
-                    node.style.cursor = 'pointer';
-                }
-            });
-
-            function handleMouseEnter(e) {
-                const node = e.target.closest('.x6-node');
-                if (node) {
-                    const index = Array.from(nodes).indexOf(node);
-                    const text = node.querySelector('text');
-                    if (index > baseLength && text) {
-                        text.style.display = 'block';
-                    }
-                }
-            }
-
-            function handleMouseLeave(e) {
-                const node = e.target.closest('.x6-node');
-                if (node) {
-                    const index = Array.from(nodes).indexOf(node);
-                    const text = node.querySelector('text');
-                    if (index > baseLength && text) {
-                        text.style.display = 'none';
-                    }
-                }
-            }
-
-            // 添加清理事件监听的方法
-            return () => {
-                container.removeEventListener('mouseenter', handleMouseEnter, true);
-                container.removeEventListener('mouseleave', handleMouseLeave, true);
-            };
-        }, 200);
-    })
-}
-
-/**
- * 命令
- * @param command
- */
-const handleCommandSetting = (command) => {
-    switch (command) {
-        case 'snapLine':
-            if (graph.value.isSnaplineEnabled()) {
-                graph.value.disableSnapline()
-                ElMessage.warning('关闭对齐线')
-            } else {
-                graph.value.enableSnapline()
-                ElMessage.success('开启对齐线')
-            }
-            break
-        case 'select':
-            if (graph.value.isSelectionEnabled()) {
-                graph.value.disableSelection()
-                ElMessage.warning('关闭框选')
-            } else {
-                graph.value.enableSelection()
-                ElMessage.success('开启框选')
-            }
-            break
-        case 'drawLine':
-            drawLine()
-            break
-        case 'adaptive':
-            adaptive()
-            break
-        case 'shortcuts':
-            showShortcuts()
-            break
-        case 'image':
-            showImageManagement()
-            break
-        case 'clear':
-            clear()
-            break
-        case 'export':
-            exportGraph()
-            break
-    }
-}
-
-const drawLineSwitch = ref(false) // 绘制直线开关
-const edge = ref(null) // 边
-
-/**
- * 绘制直线
- */
-const drawLine = () => {
-    drawLineSwitch.value = true
-    const time = new Date()
-    graph.value.startBatch(time)
-    graph.value.disablePanning()
-    graph.value.once('blank:mousedown', ({e, x, y}) => {
-        if (drawLineSwitch.value) {
-            edge.value = graph.value.addEdge({
-                source: {x: x, y: y},
-                target: {x: x, y: y},
-                ...lineOptions,
-                data: {
-                    type: isLineOrPipe(),
-                    isConnector: false,
-                },
-                zIndex: 0,
-            })
-        }
-    })
-
-    graph.value.on('blank:mousemove', ({e, x, y}) => {
-        if (drawLineSwitch.value) {
-            edge.value.setTarget({x: x, y: y})
-        }
-    })
-
-    graph.value.on('blank:mouseup', ({e, x, y}) => {
-        drawLineSwitch.value = false
-        graph.value.enablePanning()
-        graph.value.stopBatch(time)
-    })
-}
-
-/**
- * 适配画布
- */
-const adaptive = () => {
-    graph.value.zoomToFit({maxScale: 1, padding: 20})
-}
-
-const dialog = reactive({show: false}) // 弹窗
-
-/**
- * 显示快捷键
- */
-const showShortcuts = () => {
-    dialog.show = true
-}
-
-// 图片管理
-const imageManagement = reactive({
-    show: false,
-})
-
-/**
- * 显示图片管理
- */
-const showImageManagement = () => {
-    imageManagement.show = true
-}
-
-/**
- * 清空画布
- */
-const clear = () => {
-    graph.value.clearCells()
-    graph.value.drawBackground(backgroundOptions)
-    graph.value.drawGrid(gridOptions)
-    ElMessage.success('清空成功')
-}
-
-/**
- * 导出画布
- */
-const exportGraph = () => {
-    const fileName = moment().format('YYYYMMDDHHmmss')
-    graph.value.exportPNG(fileName, {
-        padding: 10,
-        quality: 1,
-        backgroundColor: graph.value.options.background.color,
-    })
-}
-
-// 暴露给父组件
-const emits = defineEmits(['getJson'])
-
-const view = reactive({
-    show: false,
-    background: null,
-    grid: null,
-    data: null
-})
-
-/**
- * 查看画布数据
- */
-const viewJson = () => {
-    view.background = graph.value.options.background
-    view.grid = graph.value.options.grid
-    view.data = graph.value.toJSON()
-    view.show = true
-}
-
-const closeViewBtnClick = () => {
-    view.show = false
-}
-
-/**
- * 获取画布数据
- */
-const getJson = () => {
-    emits('getJson', {
-        background: graph.value.options.background,
-        grid: graph.value.options.grid,
-        data: graph.value.toJSON()
-    })
-}
-
-/**
- * 渲染数据
- */
-const renderData = async () => {
-    if (!props.id) {
-        graph.value.drawBackground(backgroundOptions)
-        graph.value.drawGrid(gridOptions)
-        graph.value.fromJSON({cells: []})
-        return
-    }
-    const data = await getData(props.id)
-    graph.value.drawBackground(data?.background || backgroundOptions)
-    graph.value.drawGrid(data?.grid || gridOptions )
-    graph.value.fromJSON(data?.data || {cells: []} )
-}
-
-const drawBoard = shallowRef(null)
-
-const watchBrowser = () => {
-    const observer = new ResizeObserver(() => {
-        adaptive()
-    })
-    observer.observe(drawBoard.value)
-}
-
-onMounted(() => {
-    initGraph()
-    initStencil()
-    renderData()
-    watchBrowser()
-
-})
-
-</script>
-
-<style lang="scss" scoped>
-@use "../../styles/editor";
-</style>
-
-<style lang="scss">
-@use "../../styles/animation.scss";
-</style>
+<template>
+    <div class="page-container">
+        <!--操作烂-->
+        <div class="tool-bar">
+            <div class="action">
+                <el-dropdown @command="handleCommandSetting">
+          <span class="el-dropdown-link">
+            <el-button size="small" text>工具
+              <el-icon><ArrowDown/></el-icon>
+            </el-button>
+          </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item command="snapLine">对齐线</el-dropdown-item>
+                            <el-dropdown-item command="select">框选</el-dropdown-item>
+                            <el-dropdown-item command="drawLine">绘制直线</el-dropdown-item>
+                            <el-dropdown-item command="adaptive">视图自适应</el-dropdown-item>
+                            <el-dropdown-item command="shortcuts">查看快捷键</el-dropdown-item>
+                            <el-dropdown-item command="image">图片管理</el-dropdown-item>
+                            <el-dropdown-item command="clear">清空画布</el-dropdown-item>
+                            <el-dropdown-item command="export">导出成图片</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+            <div class="action" style="margin-right: 50px">
+                <el-tooltip content="预览" placement="bottom">
+                    <el-button size="small" :icon="View" @click="viewJson">
+                    </el-button>
+                </el-tooltip>
+                <el-tooltip content="保存" placement="bottom">
+                    <el-button size="small" :icon="Document" @click="getJson">
+                    </el-button>
+                </el-tooltip>
+            </div>
+        </div>
+        <div class="board">
+            <!--模型列表-->
+            <div id="stencil"></div>
+            <!--画板-->
+            <div class="drawing-board-box">
+                <div id="drawing-board" ref="drawBoard"></div>
+            </div>
+            <!--控制器-->
+            <div id="controls">
+                <div class="controls-label" v-if="controls.label">{{ controls.label }}</div>
+                <el-scrollbar>
+                    <component :is="controls.component" :graph="graph" :payload="payload"
+                               :key="controlsKey" :itemId="props.itemId"></component>
+                </el-scrollbar>
+            </div>
+        </div>
+        <el-dialog v-model="dialog.show" width="400px" title="快捷键" :close-on-click-modal="false"
+                   :close-on-press-escape="false">
+            <shortcuts/>
+        </el-dialog>
+        <el-dialog v-model="imageManagement.show" width="800px" title="图片管理" :close-on-click-modal="false"
+                   :close-on-press-escape="false">
+            <image-management v-if="imageManagement.show"/>
+        </el-dialog>
+        <el-drawer class="no-border-drawer" v-model="view.show" @close="closeViewBtnClick" title="预览"
+                   :direction="'ttb'" size="100%">
+            <div style="width: 100%;height: 100%;background: black">
+                <wiring-diagram-preview v-if="view.show" :background="view.background" :grid="view.grid"
+                                        :data="view.data"></wiring-diagram-preview>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref, shallowRef} from "vue";
+import moment from 'moment'
+import {ElMessage, ElTooltip} from "element-plus";
+import {getData, showPorts} from "../common.js";
+import {backgroundOptions, gridOptions, lineOptions, stencilOptions, textOptions} from "../settings.js";
+import GraphControl from '../graph-control/index.vue'
+import textControl from '../text-control/index.vue'
+import edgeControl from "../edge-control/index.vue";
+import Shortcuts from "../Shortcuts.vue";
+import {Graph} from "@antv/x6";
+import {Stencil} from '@antv/x6-plugin-stencil'
+import {Export} from "@antv/x6-plugin-export";
+import imageControl from "../image-control/index.vue";
+import {baseShape} from "../baseShape.js";
+import {portsOptions} from "../portsOptions.js";
+import {Document, View, ArrowDown} from "@element-plus/icons-vue";
+import WiringDiagramPreview from "../preview/index.vue";
+import ImageManagement from "../image-control/image-management.vue";
+import {get} from "packages/http.js";
+import {
+    clipboard,
+    keyboard,
+    snapLine,
+    transform,
+    history,
+    selection,
+    setMathRandom,
+    deleteCell,
+    copyCell,
+    pasteCell, undoCell, redoCell, addLineTools, isLineOrPipe, setSunCloudImageUrl
+} from "packages/components/tools.js";
+import {isSunOs} from "packages";
+
+defineOptions({
+    name: 'editor'
+})
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    },
+    itemId: {
+        type: String,
+        default: ''
+    }
+})
+
+const graph = ref() // 画布实例
+// 控制器
+const controls = reactive({
+    label: '', // 控制器
+    component: shallowRef(null), // 控制器组件
+})
+const controlsKey = ref(null) // 控制器key
+const payload = ref(null)
+
+/**
+ * 初始化画布
+ */
+const initGraph = () => {
+    window.__x6_instances__ = []
+    const container = document.getElementById('drawing-board')
+    graph.value = new Graph({
+        container: container,
+        autoResize: true,
+        panning: true,
+        mousewheel: true,
+        connecting: {
+            snap: true,
+            allowEdge: true,
+            highlight: true,
+            router: 'orth',
+            connectionPoint: {
+                name: 'anchor',
+            },
+            anchor: 'center',
+            createEdge() {
+                return graph.value.createEdge({
+                    inherit: 'edge',
+                    ...lineOptions,
+                    data: {
+                        type: isLineOrPipe(),
+                    },
+                    zIndex: 0,
+                })
+            }
+        },
+    })
+    window.__x6_instances__.push(graph.value)
+    graph.value.use(transform())
+    graph.value.use(keyboard())
+    graph.value.use(snapLine())
+    graph.value.use(clipboard())
+    graph.value.use(history())
+    graph.value.use(selection())
+    graph.value.bindKey(['delete', 'backspace'], () => {
+        deleteCell(graph.value)
+    })
+    graph.value.bindKey(['ctrl+c', 'cmd + c'], () => {
+        copyCell(graph.value)
+    })
+    graph.value.bindKey(['ctrl+v', 'cmd + v'], () => {
+        pasteCell(graph.value)
+    })
+    graph.value.bindKey(['ctrl+z', 'cmd + z'], () => {
+        undoCell(graph.value)
+    })
+    graph.value.bindKey(['ctrl+y', 'cmd + y'], () => {
+        redoCell(graph.value)
+    })
+
+    let setZIndexTimer = null
+
+    graph.value.on('edge:click', ({cell}) => {
+        payload.value = cell
+        controls.component = edgeControl
+        controls.label = '线段属性'
+        controlsKey.value = setMathRandom()
+    })
+
+    //给线添加拐点
+    graph.value.on('edge:mouseenter', ({cell}) => {
+        clearTimeout(setZIndexTimer)
+        cell.toFront()
+        addLineTools(cell)
+    })
+
+    // 隐藏线段的拐点
+    graph.value.on('edge:mouseleave', ({cell}) => {
+        setZIndexTimer = setTimeout(() => {
+            cell.toBack()
+            cell.removeTools()
+        }, 300)
+
+    })
+
+    //连接桩显示
+    graph.value.on('node:mouseenter', () => {
+        showPorts('#drawing-board', true)
+    })
+
+    //连接桩隐藏
+    graph.value.on('node:mouseleave', () => {
+        showPorts("#drawing-board", false)
+    })
+
+    // 导出插件
+    graph.value.use(new Export())
+
+    //选中画布
+    graph.value.on('blank:click', ({e, x, y}) => {
+        payload.value = graph
+        controls.component = GraphControl
+        controls.label = '画布属性'
+        controlsKey.value = setMathRandom()
+    })
+
+
+    //选中节点
+    graph.value.on('cell:click', ({cell}) => {
+        payload.value = cell
+        controlsKey.value = setMathRandom()
+        if (cell.data?.type === 'text') {
+            controls.component = textControl
+            controls.label = '文本属性'
+            return
+        }
+        if (cell.data?.type === 'base-shape') {
+            controls.component = textControl
+            controls.label = '基础图形属性'
+            return
+        }
+        if (cell?.shape === 'edge') {
+            controls.component = edgeControl
+            controls.label = '连线属性'
+            return
+        }
+        if (cell?.shape === 'image') {
+            controls.component = imageControl
+            controls.label = '图片属性'
+            return
+        }
+        controls.component = null
+        controls.label = null
+    })
+
+    graph.value.on('render:done', () => {
+        showPorts("#drawing-board", false)
+        adaptive()
+    })
+}
+
+const stencil = ref()
+
+/**
+ * 初始化模型列表
+ */
+const initStencil = () => {
+    stencil.value = new Stencil({
+        target: graph.value,
+        ...stencilOptions,
+        groups: [
+            {
+                name: '基础组件',
+                graphPadding: 30
+            },
+        ],
+        search(cell, keyword) {
+            return cell.label?.indexOf(keyword) !== -1
+        },
+        placeholder: '搜索',
+        notFoundText: '未找到匹配项',
+        getDragNode: (node) => {
+            const copyNode = node.clone({keepId: true})
+            if (copyNode.label !== '文本') {
+                copyNode.label = ''
+            }
+            return copyNode
+        },
+    })
+    const text = graph.value.createNode({
+        ...textOptions
+    })
+    const baseShapes = baseShape.map(item => {
+        item.ports = portsOptions
+        return graph.value.createNode(item)
+    })
+    stencil.value.load([text, ...baseShapes], '基础组件')
+    get('/custom/groupList').then(res => {
+        const data = res?.data || []
+        data?.forEach(group => {
+            stencil.value.addGroup({
+                name: group?.groupName,
+                graphPadding: 30
+            })
+            const image = group?.pictureList.map(item => {
+                const nodeOption = {
+                    shape: 'image',
+                    imageUrl: isSunOs ? item?.imageUrl : setSunCloudImageUrl(item?.imageUrl),
+                    ports: portsOptions,
+                    width: 64,
+                    height: 64,
+                    label: item.imageName
+                }
+                return graph.value.createNode(nodeOption)
+            })
+            stencil.value.load(image, group?.groupName)
+            document.getElementById('stencil').appendChild(stencil.value.container)
+        })
+    }).finally(() => {
+        setTimeout(() => {
+            const container = stencil.value.container;
+            const nodes = container.querySelectorAll('.x6-node');
+            const baseLength = baseShape.length;
+
+            // 使用事件委托优化事件监听
+            container.addEventListener('mouseenter', handleMouseEnter, true);
+            container.addEventListener('mouseleave', handleMouseLeave, true);
+
+            nodes.forEach((node, index) => {
+                const isCustomNode = index > baseLength;
+                const text = node.querySelector('text');
+
+                if (isCustomNode && text) {
+                    Object.assign(text.style, {
+                        display: 'none',
+                        fontSize: '12px',
+                        fill: '#ffffff'
+                    });
+                    text.setAttribute('x', '0%');
+                    text.setAttribute('y', '40');
+                    node.style.position = 'relative';
+                    node.style.cursor = 'pointer';
+                }
+            });
+
+            function handleMouseEnter(e) {
+                const node = e.target.closest('.x6-node');
+                if (node) {
+                    const index = Array.from(nodes).indexOf(node);
+                    const text = node.querySelector('text');
+                    if (index > baseLength && text) {
+                        text.style.display = 'block';
+                    }
+                }
+            }
+
+            function handleMouseLeave(e) {
+                const node = e.target.closest('.x6-node');
+                if (node) {
+                    const index = Array.from(nodes).indexOf(node);
+                    const text = node.querySelector('text');
+                    if (index > baseLength && text) {
+                        text.style.display = 'none';
+                    }
+                }
+            }
+
+            // 添加清理事件监听的方法
+            return () => {
+                container.removeEventListener('mouseenter', handleMouseEnter, true);
+                container.removeEventListener('mouseleave', handleMouseLeave, true);
+            };
+        }, 200);
+    })
+}
+
+/**
+ * 命令
+ * @param command
+ */
+const handleCommandSetting = (command) => {
+    switch (command) {
+        case 'snapLine':
+            if (graph.value.isSnaplineEnabled()) {
+                graph.value.disableSnapline()
+                ElMessage.warning('关闭对齐线')
+            } else {
+                graph.value.enableSnapline()
+                ElMessage.success('开启对齐线')
+            }
+            break
+        case 'select':
+            if (graph.value.isSelectionEnabled()) {
+                graph.value.disableSelection()
+                ElMessage.warning('关闭框选')
+            } else {
+                graph.value.enableSelection()
+                ElMessage.success('开启框选')
+            }
+            break
+        case 'drawLine':
+            drawLine()
+            break
+        case 'adaptive':
+            adaptive()
+            break
+        case 'shortcuts':
+            showShortcuts()
+            break
+        case 'image':
+            showImageManagement()
+            break
+        case 'clear':
+            clear()
+            break
+        case 'export':
+            exportGraph()
+            break
+    }
+}
+
+const drawLineSwitch = ref(false) // 绘制直线开关
+const edge = ref(null) // 边
+
+/**
+ * 绘制直线
+ */
+const drawLine = () => {
+    drawLineSwitch.value = true
+    const time = new Date()
+    graph.value.startBatch(time)
+    graph.value.disablePanning()
+    graph.value.once('blank:mousedown', ({e, x, y}) => {
+        if (drawLineSwitch.value) {
+            edge.value = graph.value.addEdge({
+                source: {x: x, y: y},
+                target: {x: x, y: y},
+                ...lineOptions,
+                data: {
+                    type: isLineOrPipe(),
+                    isConnector: false,
+                },
+                zIndex: 0,
+            })
+        }
+    })
+
+    graph.value.on('blank:mousemove', ({e, x, y}) => {
+        if (drawLineSwitch.value) {
+            edge.value.setTarget({x: x, y: y})
+        }
+    })
+
+    graph.value.on('blank:mouseup', ({e, x, y}) => {
+        drawLineSwitch.value = false
+        graph.value.enablePanning()
+        graph.value.stopBatch(time)
+    })
+}
+
+/**
+ * 适配画布
+ */
+const adaptive = () => {
+    graph.value.zoomToFit({maxScale: 1, padding: 20})
+}
+
+const dialog = reactive({show: false}) // 弹窗
+
+/**
+ * 显示快捷键
+ */
+const showShortcuts = () => {
+    dialog.show = true
+}
+
+// 图片管理
+const imageManagement = reactive({
+    show: false,
+})
+
+/**
+ * 显示图片管理
+ */
+const showImageManagement = () => {
+    imageManagement.show = true
+}
+
+/**
+ * 清空画布
+ */
+const clear = () => {
+    graph.value.clearCells()
+    graph.value.drawBackground(backgroundOptions)
+    graph.value.drawGrid(gridOptions)
+    ElMessage.success('清空成功')
+}
+
+/**
+ * 导出画布
+ */
+const exportGraph = () => {
+    const fileName = moment().format('YYYYMMDDHHmmss')
+    graph.value.exportPNG(fileName, {
+        padding: 10,
+        quality: 1,
+        backgroundColor: graph.value.options.background.color,
+    })
+}
+
+// 暴露给父组件
+const emits = defineEmits(['getJson'])
+
+const view = reactive({
+    show: false,
+    background: null,
+    grid: null,
+    data: null
+})
+
+/**
+ * 查看画布数据
+ */
+const viewJson = () => {
+    view.background = graph.value.options.background
+    view.grid = graph.value.options.grid
+    view.data = graph.value.toJSON()
+    view.show = true
+}
+
+const closeViewBtnClick = () => {
+    view.show = false
+}
+
+/**
+ * 获取画布数据
+ */
+const getJson = () => {
+    emits('getJson', {
+        background: graph.value.options.background,
+        grid: graph.value.options.grid,
+        data: graph.value.toJSON()
+    })
+}
+
+/**
+ * 渲染数据
+ */
+const renderData = async () => {
+    if (!props.id) {
+        graph.value.drawBackground(backgroundOptions)
+        graph.value.drawGrid(gridOptions)
+        graph.value.fromJSON({cells: []})
+        return
+    }
+    const data = await getData(props.id)
+    graph.value.drawBackground(data?.background || backgroundOptions)
+    graph.value.drawGrid(data?.grid || gridOptions )
+    graph.value.fromJSON(data?.data || {cells: []} )
+}
+
+const drawBoard = shallowRef(null)
+
+const watchBrowser = () => {
+    const observer = new ResizeObserver(() => {
+        adaptive()
+    })
+    observer.observe(drawBoard.value)
+}
+
+onMounted(() => {
+    initGraph()
+    initStencil()
+    renderData()
+    watchBrowser()
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+@use "../../styles/editor";
+</style>
+
+<style lang="scss">
+@use "../../styles/animation.scss";
+</style>