|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Graph, Shape,FunctionExt } from '@antv/x6'
|
|
|
+import { Graph, Shape, FunctionExt } from '@antv/x6'
|
|
|
import { Stencil } from '@antv/x6-plugin-stencil'
|
|
|
import { Transform } from '@antv/x6-plugin-transform'
|
|
|
import { Selection } from '@antv/x6-plugin-selection'
|
|
|
@@ -6,8 +6,9 @@ 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 { Export } from "@antv/x6-plugin-export";
|
|
|
+import { Export } from '@antv/x6-plugin-export'
|
|
|
import store from '@/store'
|
|
|
+
|
|
|
const insertCss = require('insert-css')
|
|
|
|
|
|
|
|
|
@@ -27,7 +28,7 @@ insertCss(`
|
|
|
* @date : 2023/1/3 11:46
|
|
|
*/
|
|
|
export default class Product {
|
|
|
- static graphJson =null //图形对象
|
|
|
+ static graphJson = null //图形对象
|
|
|
static deleteNodeList = null//被删除节点
|
|
|
static nodeClickValue = null//点击节点
|
|
|
static graph = null //图形对象
|
|
|
@@ -36,7 +37,7 @@ export default class Product {
|
|
|
|
|
|
|
|
|
// region 初始化图形
|
|
|
- static init(dom,graphJson,deleteNodeList,nodeClickValue){
|
|
|
+ static init(dom, graphJson, deleteNodeList, nodeClickValue) {
|
|
|
|
|
|
this.graphJson = graphJson
|
|
|
this.deleteNodeList = deleteNodeList
|
|
|
@@ -44,9 +45,16 @@ export default class Product {
|
|
|
// region 画布配置
|
|
|
this.graph = new Graph({
|
|
|
container: dom,//获取节点
|
|
|
- background: {color: '#F2F7FA',},//画布背景色
|
|
|
- autoResize:true,//自动设置宽高
|
|
|
- scroller: true,//画布滚动
|
|
|
+ background: {
|
|
|
+ color: '#F2F7FA',
|
|
|
+ },//画布背景色
|
|
|
+ autoResize: true,//自动设置宽高
|
|
|
+ scroller: {
|
|
|
+ enabled: true,
|
|
|
+ pageVisible: true,
|
|
|
+ pageBreak: true,
|
|
|
+ pannable: true,
|
|
|
+ },
|
|
|
panning: {//开启拖拽画布
|
|
|
enabled: true,
|
|
|
eventTypes: 'rightMouseDown',//触发画布平移的交互方式为“右键按下”
|
|
|
@@ -54,14 +62,14 @@ export default class Product {
|
|
|
grid: {//设置网格
|
|
|
size: 10,
|
|
|
visible: true,
|
|
|
- type: "doubleMesh",
|
|
|
+ type: 'doubleMesh',
|
|
|
args: [
|
|
|
{
|
|
|
- color: "#eee", // 主网格线颜色
|
|
|
+ color: '#eee', // 主网格线颜色
|
|
|
thickness: 1, // 主网格线宽度
|
|
|
},
|
|
|
{
|
|
|
- color: "#ddd", // 次网格线颜色
|
|
|
+ color: '#ddd', // 次网格线颜色
|
|
|
thickness: 1, // 次网格线宽度
|
|
|
factor: 4, // 主次网格线间隔
|
|
|
},
|
|
|
@@ -153,9 +161,9 @@ export default class Product {
|
|
|
enabled: true,
|
|
|
}))
|
|
|
.use(new Export({
|
|
|
- enabled:true
|
|
|
+ enabled: true
|
|
|
}
|
|
|
- ));
|
|
|
+ ))
|
|
|
// endregion
|
|
|
|
|
|
// region 左侧工具栏配置
|
|
|
@@ -247,10 +255,10 @@ export default class Product {
|
|
|
// endregion
|
|
|
|
|
|
// region 删除
|
|
|
- this.graph.bindKey(['backspace','del'], () => {
|
|
|
+ this.graph.bindKey(['backspace', 'del'], () => {
|
|
|
const cells = this.graph.getSelectedCells()
|
|
|
this.deleteNodeList(this.graph.getSelectedCells())
|
|
|
- console.log("this.graph.getSelectedCells()",this.graph.getSelectedCells())
|
|
|
+ console.log('this.graph.getSelectedCells()', this.graph.getSelectedCells())
|
|
|
if (cells.length) {
|
|
|
this.graph.removeCells(cells)
|
|
|
}
|
|
|
@@ -276,10 +284,10 @@ export default class Product {
|
|
|
this.graph.bindKey(['up'], () => {
|
|
|
const cells = this.graph.getSelectedCells()
|
|
|
if (cells.length) {
|
|
|
- cells.forEach(cell=>{
|
|
|
+ cells.forEach(cell => {
|
|
|
const y = cell.prop().position.y
|
|
|
const x = cell.prop().position.x
|
|
|
- cell.prop("position", { x: x, y: y-5 });
|
|
|
+ cell.prop('position', { x: x, y: y - 5 })
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -289,10 +297,10 @@ export default class Product {
|
|
|
this.graph.bindKey(['down'], () => {
|
|
|
const cells = this.graph.getSelectedCells()
|
|
|
if (cells.length) {
|
|
|
- cells.forEach(cell=>{
|
|
|
+ cells.forEach(cell => {
|
|
|
const y = cell.prop().position.y
|
|
|
const x = cell.prop().position.x
|
|
|
- cell.prop("position", { x: x, y: y+5 });
|
|
|
+ cell.prop('position', { x: x, y: y + 5 })
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -302,10 +310,10 @@ export default class Product {
|
|
|
this.graph.bindKey(['left'], () => {
|
|
|
const cells = this.graph.getSelectedCells()
|
|
|
if (cells.length) {
|
|
|
- cells.forEach(cell=>{
|
|
|
+ cells.forEach(cell => {
|
|
|
const y = cell.prop().position.y
|
|
|
const x = cell.prop().position.x
|
|
|
- cell.prop("position", { x: x-5, y: y });
|
|
|
+ cell.prop('position', { x: x - 5, y: y })
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -315,10 +323,10 @@ export default class Product {
|
|
|
this.graph.bindKey(['right'], () => {
|
|
|
const cells = this.graph.getSelectedCells()
|
|
|
if (cells.length) {
|
|
|
- cells.forEach(cell=>{
|
|
|
+ cells.forEach(cell => {
|
|
|
const y = cell.prop().position.y
|
|
|
const x = cell.prop().position.x
|
|
|
- cell.prop("position", { x: x+5, y: y });
|
|
|
+ cell.prop('position', { x: x + 5, y: y })
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -367,9 +375,9 @@ export default class Product {
|
|
|
// console.log("右键连线-attr",cell.attr())
|
|
|
// console.log("右键连线-data",cell.data)
|
|
|
//设置值
|
|
|
- store.commit('setCurrentEdgeId',cell.id)
|
|
|
+ store.commit('setCurrentEdgeId', cell.id)
|
|
|
//显示弹窗
|
|
|
- store.commit('setProductEdgeModalDisplay',true)
|
|
|
+ store.commit('setProductEdgeModalDisplay', true)
|
|
|
})
|
|
|
// endregion
|
|
|
|
|
|
@@ -382,12 +390,12 @@ export default class Product {
|
|
|
// console.log("右键节点-data",node.data)
|
|
|
//如果是节点组,不打开弹窗
|
|
|
if (node.data && node.data.parent) {
|
|
|
- return;
|
|
|
+ return
|
|
|
}
|
|
|
//设置值
|
|
|
- store.commit('setCurrentNodeId',node.id)
|
|
|
+ store.commit('setCurrentNodeId', node.id)
|
|
|
//显示弹窗
|
|
|
- store.commit('setProductNodeModalDisplay',true)
|
|
|
+ store.commit('setProductNodeModalDisplay', true)
|
|
|
})
|
|
|
// endregion
|
|
|
|
|
|
@@ -414,30 +422,30 @@ export default class Product {
|
|
|
|
|
|
|
|
|
// region 节点的子级发生改变
|
|
|
- this.graph.on('node:change:children',({node,previous,current})=>{
|
|
|
- if(previous&¤t&&previous.length>current.length){
|
|
|
+ this.graph.on('node:change:children', ({ node, previous, current }) => {
|
|
|
+ if (previous && current && previous.length > current.length) {
|
|
|
console.log('移出')
|
|
|
- this.getSelectedCells().forEach(it=>{
|
|
|
- node.unembed(it);
|
|
|
+ this.getSelectedCells().forEach(it => {
|
|
|
+ node.unembed(it)
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
// endregion
|
|
|
|
|
|
// region 节点的移入事件(父级、嵌套关系发生改变)
|
|
|
- this.graph.on('node:embedded',({node})=>{
|
|
|
+ this.graph.on('node:embedded', ({ node }) => {
|
|
|
// debugger
|
|
|
- console.log("embedded",node.id,node.getParent())
|
|
|
+ console.log('embedded', node.id, node.getParent())
|
|
|
//如果所选所有节点的parent都一致,直接return
|
|
|
- let cells=this.getSelectedCells()
|
|
|
- if(cells.some((e) => cells.filter((e1) => e1.getParent() !== e.getParent()).length >0 )){
|
|
|
+ let cells = this.getSelectedCells()
|
|
|
+ if (cells.some((e) => cells.filter((e1) => e1.getParent() !== e.getParent()).length > 0)) {
|
|
|
console.log('存在不相同')
|
|
|
- let parent=node.getParent()
|
|
|
- let other =cells.filter((c) => c.id!==node.id)
|
|
|
- other.forEach(it=>{
|
|
|
- parent.embed(it);
|
|
|
+ let parent = node.getParent()
|
|
|
+ let other = cells.filter((c) => c.id !== node.id)
|
|
|
+ other.forEach(it => {
|
|
|
+ parent.embed(it)
|
|
|
})
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
console.log('都相同')
|
|
|
// return
|
|
|
}
|
|
|
@@ -541,13 +549,13 @@ export default class Product {
|
|
|
//endregion
|
|
|
|
|
|
// region 监听添加节点事件
|
|
|
- this.graph.on("node:added", ({ node }) => {
|
|
|
+ this.graph.on('node:added', ({ node }) => {
|
|
|
this.graphJson(node)
|
|
|
// 将添加的节点组置为最底层
|
|
|
if (node.data && node.data.parent) {
|
|
|
node.toBack()
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
// endregion
|
|
|
|
|
|
// endregion
|
|
|
@@ -744,8 +752,8 @@ export default class Product {
|
|
|
refY: 22,
|
|
|
},
|
|
|
label: {
|
|
|
- refX:6,
|
|
|
- refY:6,
|
|
|
+ refX: 6,
|
|
|
+ refY: 6,
|
|
|
textAnchor: 'left',
|
|
|
textVerticalAnchor: 'top',
|
|
|
fontSize: 12,
|
|
|
@@ -815,6 +823,7 @@ export default class Product {
|
|
|
|
|
|
return this.graph
|
|
|
}
|
|
|
+
|
|
|
// endregion
|
|
|
|
|
|
// region 显示/隐藏连接桩事件
|
|
|
@@ -827,7 +836,8 @@ export default class Product {
|
|
|
|
|
|
// region 获取所有选中的节点
|
|
|
static getSelectedCells() {
|
|
|
- return this.graph.getSelectedCells();
|
|
|
+ return this.graph.getSelectedCells()
|
|
|
}
|
|
|
+
|
|
|
// endregion
|
|
|
}
|