antV/X6学习---官网实例vue实现

引入依赖

npm install @antv/x6
npm install @antv/x6-vue-shape

出现dependency conflict依赖冲突，可以使用
--force 无视冲突
--legacy-peer-deps 忽视依赖冲突我用的这种，无视时产生许多环境问题（比如py、vscode等）

vue实现官网实例

因为官网是react+ts所以在代码适配上需要去除ts部分的类型

实现ER图

• template部分

<div class="content">
    <div class="app-stencil" ref="stencilContainer">
    </div>
    <div class="app-content" ref="containerRef">
    </div>
  </div>

• js部分，去除ts和json数据引用

import { Graph, Shape } from '@antv/x6'
import ErJson from '../data/er.json'

const LINE_HEIGHT = 24
const NODE_WIDTH = 150

export default {
  name: "er",
  mounted () {
    this.init();
  },
  methods: {
    init() {
        Graph.registerPortLayout(
            'erPortPosition',
            (portsPositionArgs) => {
                return portsPositionArgs.map((_, index) => {
                return {
                    position: {
                    x: 0,
                    y: (index + 1) * LINE_HEIGHT,
                    },
                    angle: 0,
                }
                })
            },
            true,
            )

            Graph.registerNode(
            'er-rect',
            {
                inherit: 'rect',
                markup: [
                {
                    tagName: 'rect',
                    selector: 'body',
                },
                {
                    tagName: 'text',
                    selector: 'label',
                },
                ],
                attrs: {
                rect: {
                    strokeWidth: 1,
                    stroke: '#5F95FF',
                    fill: '#5F95FF',
                },
                label: {
                    fontWeight: 'bold',
                    fill: '#ffffff',
                    fontSize: 12,
                },
                },
                ports: {
                groups: {
                    list: {
                    markup: [
                        {
                        tagName: 'rect',
                        selector: 'portBody',
                        },
                        {
                        tagName: 'text',
                        selector: 'portNameLabel',
                        },
                        {
                        tagName: 'text',
                        selector: 'portTypeLabel',
                        },
                    ],
                    attrs: {
                        portBody: {
                        width: NODE_WIDTH,
                        height: LINE_HEIGHT,
                        strokeWidth: 1,
                        stroke: '#5F95FF',
                        fill: '#EFF4FF',
                        magnet: true,
                        },
                        portNameLabel: {
                        ref: 'portBody',
                        refX: 6,
                        refY: 6,
                        fontSize: 10,
                        },
                        portTypeLabel: {
                        ref: 'portBody',
                        refX: 95,
                        refY: 6,
                        fontSize: 10,
                        },
                    },
                    position: 'erPortPosition',
                    },
                },
                },
            },
            true,
            )
            const containerRef = this.$refs.containerRef
            const graph = new Graph({
            container: containerRef,
            connecting: {
                router: {
                name: 'er',
                args: {
                    offset: 25,
                    direction: 'H',
                },
                },
                createEdge() {
                return new Shape.Edge({
                    attrs: {
                    line: {
                        stroke: '#A2B1C3',
                        strokeWidth: 2,
                    },
                    },
                })
                },
            },
            })
            console.log('ErJson', ErJson);
            const cells = []
                ErJson.forEach((item) => {
                if (item.shape === 'edge') {
                    cells.push(graph.createEdge(item))
                } else {
                    cells.push(graph.createNode(item))
                }
                })
                graph.resetCells(cells)
                graph.zoomToFit({ padding: 10, maxScale: 1 })
    }
    
  }
}

• 容器样式

<style scoped>
 
.content {
  font-family: sans-serif;
  display: flex;
}
 
.app-stencil {
  width: 250px;
  border: 1px solid #f0f0f0;
  position: relative;
}
 
.app-content {
  flex: 1;
  height: 520px;
  margin-left: 8px;
  margin-right: 8px;
  box-shadow: 0 0 10px 1px #e9e9e9;
}
 
.x6-graph-scroller {
  border: 1px solid #f0f0f0;
  margin-left: -1px;
}
</style>

其他实例参照Gitee

• 基于开源项目补充实例
• 通过脚手架my_cli实现—处理依赖冲突