From 95d473bc8c09ef41e1455f93dec49c5ee6ac548f Mon Sep 17 00:00:00 2001
From: Junjie <540245094@qq.com>
Date: 星期二, 18 六月 2024 08:23:38 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphComponent.jsx | 184 +++++++++++++++++++++++++++++++++-------------
1 files changed, 132 insertions(+), 52 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphComponent.jsx b/zy-asrs-flow/src/components/Flow/GraphComponent.jsx
index c673a67..55d909d 100644
--- a/zy-asrs-flow/src/components/Flow/GraphComponent.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphComponent.jsx
@@ -6,8 +6,8 @@
import { Clipboard } from '@antv/x6-plugin-clipboard';
import { Stencil } from '@antv/x6-plugin-stencil';
import { History } from '@antv/x6-plugin-history'
-import { commonGraphPorts, commonGraphAttrs } from "./GraphConfig";
-
+import { Transform } from '@antv/x6-plugin-transform'
+import { commonGraphPorts, commonGraphAttrs, initGraphConnecting, initNodeData } from "./GraphConfig";
export const GraphComponent = React.forwardRef((props, ref) => {
const container = useRef(null);
@@ -24,54 +24,36 @@
function initGrap() {
ref.current = new Graph({
container: container.current,
- // width: document.documentElement.clientWidth,
- // height: document.documentElement.clientHeight,
- width: 200,
- height: 500,
- // grid: 1,
- connecting: {
- snap: true,
- createEdge() {
- return new Shape.Edge({
- attrs: {
- line: {
- stroke: '#a0a0a0',
- strokeWidth: 1,
- targetMarker: {
- name: 'classic',
- size: 8,
- },
- },
- },
- })
- },
- connector: 'smooth',
- allowMulti: true,
- allowPort: true,
- }
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight - 100,
+ // width: 200,
+ // height: 500,
+ connecting: initGraphConnecting,
});
const graph = ref.current;
- const rect = graph.addNode({
- x: 60,
- y: 60,
- width: 120,
- height: 40,
- label: '璁㈠崟绠＄悊',
- ports: commonGraphPorts,
- attrs: commonGraphAttrs,
- });
+ // const rect = graph.addNode({
+ // x: 60,
+ // y: 60,
+ // width: 120,
+ // height: 40,
+ // label: '璁㈠崟绠＄悊',
+ // ports: commonGraphPorts,
+ // attrs: commonGraphAttrs,
+ // data: initNodeData,
+ // });
- const rect2 = graph.addNode({
- x: 240,
- y: 240,
- width: 120,
- height: 40,
- label: '搴撳瓨绠＄悊',
- ports: commonGraphPorts,
- attrs: commonGraphAttrs,
- });
+ // const rect2 = graph.addNode({
+ // x: 240,
+ // y: 240,
+ // width: 120,
+ // height: 40,
+ // label: '搴撳瓨绠＄悊',
+ // ports: commonGraphPorts,
+ // attrs: commonGraphAttrs,
+ // data: initNodeData,
+ // });
graph.use(
new Snapline({
@@ -95,6 +77,14 @@
}),
)
+ graph.use(
+ new Transform({
+ resizing: {
+ enabled: true
+ },
+ }),
+ )
+
props.initHandle();//閫氱煡鐖剁粍浠跺垵濮嬪寲瀹屾垚
return graph;
}
@@ -114,31 +104,102 @@
{
name: 'group1',
title: '甯哥敤缁勪欢',
+ },
+ {
+ name: 'group2',
+ title: '閫昏緫缁勪欢'
}
],
})
stencilContainer.current.appendChild(stencil.container)
-
-
+ const n1Data = JSON.parse(JSON.stringify(initNodeData))
+ n1Data.root = true;//璁剧疆涓烘牴鑺傜偣
const n1 = graph.createNode({
shape: "rect",
width: 80,
height: 40,
- label: "榛樿缁勪欢",
+ label: "绋嬪簭鍏ュ彛",
attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: n1Data,
})
const n2 = graph.createNode({
shape: "rect",
width: 80,
height: 40,
- label: "娴嬭瘯缁勪欢",
+ label: "甯哥敤缁勪欢",
attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: initNodeData,
})
- stencil.load([n1, n2], 'group1')
+ const crnData = JSON.parse(JSON.stringify(initNodeData))
+ crnData.type = "crn";
+ const crnStencil = graph.createNode({
+ shape: "rect",
+ width: 80,
+ height: 40,
+ label: "鍫嗗灈鏈虹粍浠�",
+ attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: crnData,
+ })
+
+ const shuttleData = JSON.parse(JSON.stringify(initNodeData))
+ shuttleData.type = "shuttle";
+ const shuttleStencil = graph.createNode({
+ shape: "rect",
+ width: 80,
+ height: 40,
+ label: "鍥涘悜杞︾粍浠�",
+ attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: shuttleData,
+ })
+
+ const liftData = JSON.parse(JSON.stringify(initNodeData))
+ liftData.type = "lift";
+ const liftStencil = graph.createNode({
+ shape: "rect",
+ width: 80,
+ height: 40,
+ label: "鎻愬崌鏈虹粍浠�",
+ attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: liftData,
+ })
+
+ const devpData = JSON.parse(JSON.stringify(initNodeData))
+ devpData.type = "devp";
+ const devpStencil = graph.createNode({
+ shape: "rect",
+ width: 80,
+ height: 40,
+ label: "杈撻�佺嚎缁勪欢",
+ attrs: commonGraphAttrs,
+ ports: commonGraphPorts,
+ data: devpData,
+ })
+
+ const logicStencilData = JSON.parse(JSON.stringify(initNodeData))
+ logicStencilData.isLogic = true;//閫昏緫鍒ゆ柇
+ const logicStencil = graph.createNode({
+ shape: 'path',
+ width: 100,
+ height: 60,
+ // https://www.svgrepo.com/svg/13653/like
+ path: 'M 50 0 L 100 50 L 50 100 L 0 50 Z',
+ attrs: commonGraphAttrs,
+ label: '閫昏緫鍒ゆ柇',
+ ports: commonGraphPorts,
+ data: logicStencilData,
+ })
+
+ stencil.load([n1, n2, crnStencil, shuttleStencil, liftStencil, devpStencil], 'group1')
+ stencil.load([logicStencil], 'group2')
}
function initBind(graph) {
@@ -173,12 +234,16 @@
})
graph.bindKey('ctrl+z', () => {
- graph.undo()
+ if (graph.canUndo()) {
+ graph.undo()
+ }
return false
})
graph.bindKey('ctrl+y', () => {
- graph.redo()
+ if (graph.canRedo()) {
+ graph.redo()
+ }
return false
})
@@ -189,6 +254,21 @@
})
return false
})
+
+ graph.on('node:mouseenter', ({ node }) => {
+ const ports = document.querySelectorAll(".x6-port-body")
+ for (let i = 0, len = ports.length; i < len; i += 1) {
+ ports[i].style.visibility = 'visible'
+ }
+ })
+
+ graph.on('node:mouseleave', ({ node }) => {
+ const ports = document.querySelectorAll(".x6-port-body")
+ for (let i = 0, len = ports.length; i < len; i += 1) {
+ ports[i].style.visibility = 'hidden'
+ }
+ })
+
}
return (
--
Gitblit v1.9.1