前篇：vue3+ts使用antv/x6 + 自定義節點
前篇：vue3+antv x6自定義節點樣式
1、創建側邊欄
- 用antd的menu來做側邊欄
npm i --save ant-design-vue@4.x
//入口文件main.js內
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';const app = createApp(App);
app.use(Antd).mount('#app');
- 側邊欄結構
// index.js內，拖拽節點側邊欄
export const MENU_TREE = [{key: '1',label: 'type1',title: 'drag node 1',},
]
- 畫布展示
//index.vue內
<template><div class="box"><a-menuclass="menutree":items="menutree"/><div id="container"></div></div><TeleportContainer/>
</template>
<script setup lang='ts'>
import {MENU_TREE} from "./index";
let menutree = MENU_TREE
</script>
<style scoped>
.menutree{display: flex;position: relative;
}
#container{height: 100vh;
}
.menutree{width: 200px;height: 100vh;position: absolute;left: 0;top: 0;flex-direction: column;z-index: 2;user-select: none;/* 鼠標按下時沒有復制等操作 */
}
</style>
2、拖拽交互
- 安裝
npm install @antv/x6-plugin-dnd --save
- 引入并使用（index.vue）
import { Dnd } from '@antv/x6-plugin-dnd'
//...
let dnd:Dnd
//開始拖拽
const startDrag = (e,nodevo)=>{const node = graph.createNode(formatData(nodevo))dnd.start(node, e)
}
//初始化畫布
const graphInit = ()=>{//...dnd = new Dnd({target: graph,getDragNode: (node) => node.clone({ keepId: true }),//拖拽開始時，獲取被拖拽的節點，默認克隆 dnd.start 傳入的節點。getDropNode: (node) => {//拖拽結束時，獲取放置到目標畫布的節點，默認克隆被拖拽的節點。return graph.createNode(formatData(node.getData()))}})
}
3、側邊欄和拖拽建立聯系
- 在側邊欄menu中添加拖拽節點信息（index.js）
MENU_TREE = [{key: '1',label: 'type1',title: 'drag node 1',ports:[{id: 'port-1',name: 'drag1-port1',}]
}]
- fomatMenu處理menu內需要拖拽到節點信息（index.js）
export function fomatMenu (menu: any, dragStart) {let tempmenu = menu.map(ele => {const nodeVO = {id: `node-${Math.random()}`,nodeName: ele.title,x: 0,y: 0,ports: ele.ports}return {key: ele.key,label: ele.label,onMousedown: (e: Event) => {dragStart(e, nodeVO)},}});return tempmenu
}
- 主畫布渲染menu時先處理menu信息
import {MENU_TREE,fomatMenu} from "./index";
let menutree = fomatMenu(MENU_TREE,startDrag) //放在startDrag之后
- 效果
