效果图

image.png

拖拽进父节点

image.png
image.png
image.png

点击滑动自动生成父节点

image.png
image.png

组件封装 sdFlow

npm i @antv/x6 @antv/x6-plugin-stencil @antv/x6-plugin-transform @antv/x6-plugin-selection @antv/x6-plugin-snapline @antv/x6-plugin-keyboard @antv/x6-plugin-clipboard @antv/x6-plugin-history insert-css --save

  <!--
 * @Descripttion: 流程图自定义绘制
 * @version: 1.0
 * @Author: xushuaibing
 * @Date: 2023年9月14日00:00:00
-->
<template>
  <div id="container">
      <!-- <div id="graph-container" style="min-width: 400px; min-height: 600px"></div> -->
  </div>
</template>

<script>
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import insertCss from "insert-css";

export default {
    name: "SdFlow",
    props: {
        dataShow: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        // 数据回显
        dataShow: {
            immediate: true,
            deep: true,
            handler(v) {
                if(v) {
                    this.$nextTick(() => {
                        this.graph.fromJSON(v)
                    })
                }
            }
        }
    },
    data() {
        return {
            ports: { // 设置图形上的点
                groups: {
                    top: {
                        position: "top",
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: "#5F95FF",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: {
                                    visibility: "hidden",
                                },
                            },
                        },
                    },
                    right: {
                        position: "right",
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: "#5F95FF",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: {
                                    visibility: "hidden",
                                },
                            },
                        },
                    },
                    bottom: {
                        position: "bottom",
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: "#5F95FF",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: {
                                    visibility: "hidden",
                                },
                            },
                        },
                    },
                    left: {
                        position: "left",
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: "#5F95FF",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: {
                                    visibility: "hidden",
                                },
                            },
                        },
                    },
                },
                items: [
                    {
                        group: "top",
                    },
                    {
                        group: "right",
                    },
                    {
                        group: "bottom",
                    },
                    {
                        group: "left",
                    },
                ],
            },
            graph: '',
            parentX: '',
            parentY: '',
            zIndex: 0.4
        };
    },
    methods: {
        // 初始化
        initGarph() {
            const graph = new Graph({
                container: document.getElementById("graph-container"),
                grid: true,
                mousewheel: {
                    enabled: true,
                    zoomAtMousePosition: true,
                    modifiers: "ctrl",
                    minScale: 0.5,
                    maxScale: 3,
                },
                // 设置父节点 组合关系
                embedding: {
                    enabled: true,
                    findParent({ node }) {
                        const bbox = node.getBBox()
                        return this.getNodes().filter((node) => {
                            const data = node.getData()
                            if (data && data.parent) {
                            const targetBBox = node.getBBox()
                            return bbox.isIntersectWithRect(targetBBox)
                            }
                            return false
                        })
                    },
                },
                connecting: {
                    router: "manhattan",
                    connector: {
                        name: "rounded",
                        args: {
                            radius: 8,
                        },
                    },
                    anchor: "center",
                    connectionPoint: "anchor",
                    allowBlank: false,
                    snap: {
                        radius: 20,
                    },
                    createEdge() {
                        return new Shape.Edge({
                            attrs: {
                                line: {
                                    stroke: "#A2B1C3",
                                    strokeWidth: 1,
                                    targetMarker: {
                                        // name: "block",
                                        // name: "circle",
                                        width: 12,
                                        height: 8,
                                    },
                                },
                            },
                            // 双击填写关系
                            tools: [
                                {
                                name: 'edge-editor',
                                args: {
                                    attrs: {
                                    backgroundColor: '#fff',
                                    },
                                },
                                },
                            ],
                            zIndex: 10,
                        });
                    },
                    validateConnection({ targetMagnet }) {
                        return !!targetMagnet;
                    },
                },
                highlighting: {
                    embedding: {
                        name: "stroke",
                        args: {
                            padding: -2,
                            attrs: {
                                // fill: "#5F95FF",
                                stroke: "#397CD6",
                                strokeWidth: 1
                            },
                        },
                    },
                },
            });
            this.graph = graph
            // #region 使用插件
            graph
                .use(
                    new Transform({
                        resizing: true,
                        rotating: true,
                    })
                )
                .use(
                    new Selection({
                        rubberband: true,
                        showNodeSelectionBox: true,
                    })
                )
                .use(new Snapline())
                .use(new Keyboard())
                .use(new Clipboard())
                .use(new History());
            // #region 初始化 stencil
            const stencil = new Stencil({
                title: "",
                target: graph,
                stencilGraphWidth: '100%',
                stencilGraphHeight: 60,
                collapsable: false,
                groups: [
                    {
                        title: "自定义规则",
                        name: "group1",
                    }
                ],
                layoutOptions: {
                    columns: 12,
                    columnWidth: 80,
                    rowHeight: 55,
                },
            });
            document.getElementById("stencil").appendChild(stencil.container);
            // #region 快捷键与事件
            graph.on('edge:click', ({ e, x, y, node, view }) => { // 连接边
                console.log(e, x, y, node, view)
            })
            graph.on('blank:mousedown', ({ x, y}) => {
                this.parentX = x
                this.parentY = y
            })
            graph.on('blank:mouseup', ({x, y }) => {
                if(Math.abs(x - this.parentX) > 0 && Math.abs(y - this.parentY) > 0) {
                    this.createParent(this.parentX, this.parentY, Math.abs(x - this.parentX), Math.abs(y - this.parentY) )
                    // const nodes = graph.getNodes(); // 选中节点集合
                    // const nodes = graph.getContentArea(); // 绘画出得节点
                    // 获取所画区域得节点
                    const nodeArea = graph.getNodesInArea(this.parentX, this.parentY, Math.abs(x - this.parentX), Math.abs(y - this.parentY))
                    // const arr = nodeArea.filter(item => item.data.parent)
                    let childrenIds = []
                    let parentID = ''
                    console.log(nodeArea)
                    // 获取父和子的id
                    nodeArea.forEach(item => {
                        if(item.data && item.data.parent) {
                            parentID = item.id
                        }else {
                            childrenIds.push(item.id)
                        }
                    })
                    const allCellData = this.getGraphData()
                    // 给数据帮定父子
                    allCellData.cells.forEach(item => {
                        if(item.id == parentID) {
                            item.children = childrenIds
                        }else if(childrenIds.includes(item.id)){
                            item.parent = parentID
                        }
                    })
                    graph.fromJSON(allCellData) // 重新渲染
                }
            })
            // graph.on('view:mounted', ({  view }) => { // 创建节点后触发
            //  if(view.cell.data && view.cell.data.parent) { // 限制为父节点 为实现选中生成他们的父
            //      console.log(view.cell.id, view)
            //  }
            // })
            graph.bindKey(["meta+c", "ctrl+c"], () => {
                const cells = graph.getSelectedCells();
                if (cells.length) {
                    graph.copy(cells);
                }
                return false;
            });
            graph.bindKey(["meta+x", "ctrl+x"], () => {
                const cells = graph.getSelectedCells();
                if (cells.length) {
                    graph.cut(cells);
                }
                return false;
            });
            graph.bindKey(["meta+v", "ctrl+v"], () => {
                if (!graph.isClipboardEmpty()) {
                    const cells = graph.paste({ offset: 32 });
                    graph.cleanSelection();
                    graph.select(cells);
                }
                return false;
            });

            // undo redo
            graph.bindKey(["meta+z", "ctrl+z"], () => {
                if (graph.canUndo()) {
                    graph.undo();
                }
                return false;
            });
            graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
                if (graph.canRedo()) {
                    graph.redo();
                }
                return false;
            });

            // select all
            graph.bindKey(["meta+a", "ctrl+a"], () => {
                const nodes = graph.getNodes();
                if (nodes) {
                    graph.select(nodes);
                }
            });

            // delete
            graph.bindKey("backspace", () => {
                const cells = graph.getSelectedCells();
                if (cells.length) {
                    graph.removeCells(cells);
                }
            });

            // zoom
            graph.bindKey(["ctrl+1", "meta+1"], () => {
                const zoom = graph.zoom();
                if (zoom < 1.5) {
                    graph.zoom(0.1);
                }
            });
            graph.bindKey(["ctrl+2", "meta+2"], () => {
                const zoom = graph.zoom();
                if (zoom > 0.5) {
                    graph.zoom(-0.1);
                }
            });
            // 控制连接桩显示/隐藏
            const showPorts = (ports, show) => {
                for (let i = 0, len = ports.length; i < len; i += 1) {
                    ports[i].style.visibility = show ? "visible" : "hidden";
                }
            };
            graph.on("node:mouseenter", () => {
                const container = document.getElementById("graph-container");
                const ports = container.querySelectorAll(".x6-port-body");
                showPorts(ports, true);
            });
            graph.on("node:mouseleave", () => {
                const container = document.getElementById("graph-container");
                const ports = container.querySelectorAll(".x6-port-body");
                showPorts(ports, false);
            });
            Graph.registerNode(
                "custom-rect",
                {
                    inherit: "rect",
                    width: 66,
                    height: 36,
                    attrs: {
                        body: {
                            strokeWidth: 1,
                            stroke: "#5F95FF",
                            fill: "#EFF4FF",
                        },
                        text: {
                            fontSize: 12,
                            fill: "#262626",
                        },
                    },
                    ports: { ...this.ports }
                },
                true
            );
            Graph.registerNode(
                "custom-polygon",
                {
                    inherit: "polygon",
                    width: 66,
                    height: 36,
                    attrs: {
                        body: {
                            strokeWidth: 1,
                            stroke: "#5F95FF",
                            fill: "#EFF4FF",
                        },
                        text: {
                            fontSize: 12,
                            fill: "#262626",
                        },
                    },
                    ports: {
                        ...this.ports,
                        items: [
                            {
                                group: "top",
                            },
                            {
                                group: "bottom",
                            },
                        ],
                    },
                },
                true
            );
            Graph.registerNode(
                "custom-circle",
                {
                    inherit: "circle",
                    width: 45,
                    height: 45,
                    attrs: {
                        body: {
                            strokeWidth: 1,
                            stroke: "#5F95FF",
                            fill: "#EFF4FF",
                        },
                        text: {
                            fontSize: 12,
                            fill: "#262626",
                        },
                    },
                    ports: { ...this.ports },
                },
                true
            );
            Graph.registerNode(
                "custom-image",
                {
                    inherit: "rect",
                    width: 52,
                    height: 52,
                    markup: [
                        {
                            tagName: "rect",
                            selector: "body",
                        },
                        {
                            tagName: "image",
                        },
                        {
                            tagName: "text",
                            selector: "label",
                        },
                    ],
                    attrs: {
                        body: {
                            stroke: "#5F95FF",
                            fill: "#5F95FF",
                        },
                        image: {
                            width: 26,
                            height: 26,
                            refX: 13,
                            refY: 16,
                        },
                        label: {
                            refX: 3,
                            refY: 2,
                            textAnchor: "left",
                            textVerticalAnchor: "top",
                            fontSize: 12,
                            fill: "#fff",
                        },
                    },
                    ports: { ...this.ports },
                },
                true
            );
            const r1 = graph.createNode({
                shape: "custom-rect",
                label: "开始",
                attrs: {
                    body: {
                        rx: 20,
                        ry: 26,
                    },
                },
            });
            const r2 = graph.createNode({
                shape: "custom-rect",
                label: "过程"
            });
            const r3 = graph.createNode({
                shape: "custom-rect",
                attrs: {
                    body: {
                        rx: 6,
                        ry: 6,
                    },
                },
                label: "可选过程",
            });
            const r4 = graph.createNode({
                shape: "custom-polygon",
                attrs: {
                    body: {
                        refPoints: "0,10 10,0 20,10 10,20",
                    },
                },
                label: "决策",
            });
            const r5 = graph.createNode({
                shape: "custom-polygon",
                attrs: {
                    body: {
                        refPoints: "10,0 40,0 30,20 0,20",
                    },
                },
                label: "数据",
            });
            const r6 = graph.createNode({
                shape: "custom-circle",
                label: "连接",
            });
            stencil.load([r1, r2, r3, r4, r5, r6], "group1");
        },
        // 创建边
        createEdge(
            id,
            source,
            target,
            vertices
            ) {
            return this.graph.addEdge({
                id,
                source,
                target,
                vertices,
                label: id,
                attrs: {
                    label: {
                        fontSize: 12,
                    },
                },
            })
        },
        // 创建父节点
        createParent(x, y, width, height) {
            this.graph.addNode({
                x,
                y,
                width,
                height,
                zIndex: this.zIndex,
                // zIndex: 0.5,
                attrs: {
                    body: {
                    fill: '#F5F9FF',
                    stroke: '#397CD6',
                    strokeWidth: 1,
                    strokeDasharray: 5
                    },
                    label: {
                    fontSize: 12,
                    },
                },
                data: {
                    parent: true,
                },
                ports: { ...this.ports }
            })
            this.zIndex = this.zIndex - 0.01 // 防止只能父子嵌套2层,实现前者能移入后者
        },
        // 获取JSON对象
        getGraphData() {
            return this.graph.toJSON()
        },
        // css样式
        preWork() {
            // 这里协助演示的代码，在实际项目中根据实际情况进行调整
            const container = document.getElementById("container");
            const stencilContainer = document.createElement("div");
            stencilContainer.id = "stencil";
            const graphContainer = document.createElement("div");
            graphContainer.id = "graph-container";
            container.appendChild(stencilContainer);
            container.appendChild(graphContainer);
            insertCss(`
          #container {
          display: flex;
          flex-direction: column;
          border: 1px solid #dfe3e8;
          height: 100%;
          width: 100%;
          }
          #stencil {
          width: 100%;
          height: 80px;
          position: relative;
          border-right: 1px solid #dfe3e8;
          }
          #graph-container {
          width: 100%;
          height: 100%;
          }
          .x6-widget-stencil  {
          background-color: #fff;
          }
          .x6-widget-stencil-title {
            display: none;
          background-color: #fff;
          }
          .x6-widget-stencil-group-title {
            display: none;
          background-color: #fff !important;
          }
          .x6-widget-transform {
          margin: -1px 0 0 -1px;
          padding: 0px;
          border: 1px solid #239edd;
          }
          .x6-widget-transform > div {
          border: 1px solid #239edd;
          }
          .x6-widget-transform > div:hover {
          background-color: #3dafe4;
          }
          .x6-widget-transform-active-handle {
          background-color: #3dafe4;
          }
          .x6-widget-transform-resize {
          border-radius: 0;
          }
          .x6-widget-selection-inner {
          border: 1px solid #239edd;
          }
          .x6-widget-selection-box {
          opacity: 0;
          }
      `);
        },
    },
    mounted() {
        this.preWork();
        this.initGarph();
    },
};
</script>

<style></style>

组件使用

<template>
    <el-button type="primary" @click="getData">获取data</el-button>
    <sdFlow :dataShow="data" ref="sdFlow"></sdFlow>
</template>

<script>
import sdFlow from '@/components/sdFlow'
export default {
    components: {
        sdFlow
    },
    data() {
        return {
            data: {},
        }
    },  
    methods: {
        // 获取json数据
        getData() {
            console.log(JSON.stringify(this.$refs.sdFlow.getGraphData()))
            console.log(this.$refs.sdFlow.getGraphData())
        }
    }
}
</script>

<style>

</style>