antv-x6 vue流程图编辑器demo

效果如下：

<template>

    <div class="content">
        <div class="app-stencil" ref="stencilContainer">
        </div>
        <div class="app-content" id="flowContainer" ref="container">
        </div>
    </div>

</template>

<script>
    import {
   Graph, Shape, Addon, FunctionExt} from '@antv/x6';

    const {
   Stencil} = Addon
    const {
   Rect, Polygon} = Shape

    export default {
   
        name: "index",
        mounted() {
   
            this.init();
        },
        methods: {
   
            init() {
   
                const graph = new Graph({
   
                    container: this.$refs.container,
                    width: '100%',
                    height: '100%',
                    grid: {
   
                        size: 10,
                        visible: true,
                        type: 'doubleMesh',
                        args: [
                            {
   
                                color: '#f5f5f5',
                                thickness: 1
                            },
                            {
   
                                color: '#f8f8f8',
                                thickness: 1,
                                factor: 4
                            }
                        ]
                    },
                    snapline: {
   
                        enabled: true,
                        sharp: true,
                    },
                    mousewheel: {
   
                        enabled: true,
                        modifiers: ['ctrl', 'meta'],
                        minScale: 0.5,
                        maxScale: 2
                    },
                    // 画布调整
                    selecting: {
   
                        enabled: true,
                        multiple: true,
                        rubberband: true,
                        movable: true,
                        showNodeSelectionBox: true
                    },
                    connecting: {
   
                        anchor: 'center',
                        connectionPoint: 'anchor',
                        allowBlank: false,
                        highlight: true,
                        snap: true,
                        createEdge() {
   
                            return new Shape.Edge({
   
                                attrs: {
   
                                    line: {
   
                                        stroke: '#5F95FF',
                                        strokeWidth: 2,
                                        targetMarker: {
   
                                            name: 'classic',
                                            size: 8
                                        }
                                    }
                                },
                                router: {
   
                                    name: 'manhattan'
                                },
                                zIndex: 0
                            })
                        },
                        validateConnection({
   
                                               sourceView,
                                               targetView,
                                               sourceMagnet,
                                               targetMagnet
                                           }) {
   
                            if (sourceView === targetView) {
   
                                return false
                            }
                            if (!sourceMagnet) {
   
                                return false
                            }
                            if (!targetMagnet) {
   
                                return false
                            }
                            return true
                        }
                    },
                    highlighting: {
   
                        magnetAvailable: {
   
                            name: 'stroke',
                            args: {
   
                                padding: 4,
                                attrs: {
   
                                    strokeWidth: 4,
                                    stroke: 'rgba(223,234,255)'
                                }
                            }
                        }
                    },
                    snapline: true,
                    history: true,
                    clipboard: {
   
                        enabled: true
                    },
                    keyboard: {
   
                        enabled: true
                    },
                    embedding: {
   
                        enabled: true,
                        findParent({
   node}) {
   
                            const bbox = node.