vue3+ts使用antv/x6

使用 2.x 版本 x6.antv 新官网:

安装

js 复制代码
npm install @antv/x6
//"@antv/x6": "^2.1.6",

项目结构

1、初始化画布 index.vue
js 复制代码
<template>
    <div id="container"></div>
</template>
    
<script setup lang='ts'>
import { onMounted } from "vue";
import { Graph } from '@antv/x6';
let graph:Graph
const graphInit = ()=>{
    graph = new Graph({
        container: document.getElementById('container')!,
    });
}

onMounted(()=>{
    graphInit()
})
</script>
     
<style scoped>
#container{
    width: 100vw;
    height: 100vh;
}
</style>
2、注册节点

渲染 Vue 节点,这个文档完全够用

js 复制代码
npm install @antv/x6-vue-shape
//"@antv/x6-vue-shape": "^2.0.9",

节点node.vue

js 复制代码
<template>
  <div class="nodeitem">
    {{ data?.nodeName }}
  </div>
</template>
<script setup lang='ts'>
import { inject, onMounted,ref } from "vue";
import { Node } from '@antv/x6'

interface NodeDTO {
  nodeId?: string
  nodeName: string
}

const getNode: Function | undefined = inject<Function>("getNode");
const data =  ref<NodeDTO|undefined>(undefined)
onMounted(() => {
  const node = getNode?.() as Node;
  data.value = node?.getData()
});
</script>
    
<style scoped>
.nodeitem{
  width:100px;
  border: 1px solid #ccc;
}
</style>
3、在画布引入并注册自定义节点,配置节点信息

主画布:index.vue

js 复制代码
<template>
    <div id="container"></div>
    <TeleportContainer/>
</template>
    
<script setup lang='ts'>
import { onMounted } from "vue";
import { Graph,Cell } from '@antv/x6';
import NodeItem from "./node.vue";
import {register,getTeleport} from '@antv/x6-vue-shape'
let graph:Graph
register({
    shape: "node-item",
    width: 150,
    height: 100,
    component: NodeItem,
});// 注册自定义节点
const TeleportContainer = getTeleport();// 自定义节点优化
const refreshData = (data)=>{//渲染节点数据
    const cells: Cell[] = []
    data.nodes.forEach((item: any) => {
        cells.push(graph.createNode(item))
    })
    data.edges?.forEach((item: any) => {
        cells.push(graph.createEdge(item))
    })
    graph.resetCells(cells)
    graph.centerContent()
    graph.zoomToFit({ padding: 10, maxScale: 1 })
}
const graphInit = ()=>{
    graph = new Graph({
        container: document.getElementById('container')!,
    });
    let data = {
        nodes: [
            {
                id: 'node1', // String,可选,节点的唯一标识
                shape: 'node-item',
                x: 40,       // Number,必选,节点位置的 x 值
                y: 40,       // Number,必选,节点位置的 y 值
                data: {
                    nodeId: 'node1',
                    nodeName: '节点1',
                },
            }
        ],
        edges:[]
    }
    refreshData(data)
}
onMounted(()=>{
    graphInit()
})
</script>

展示

小小预告:

下一篇 自定义节点样式

再下一篇 侧边栏

再下一篇 整理画布

相关推荐
浪裡遊35 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1012 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im2 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端2 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军2 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心2 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝2 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
卸任2 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js