From 43fffc8b0d2ea88f379e8c72385bdfb42bb88108 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 16 三月 2024 16:03:54 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphComponent.jsx | 1484 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 1,450 insertions(+), 34 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphComponent.jsx b/zy-asrs-flow/src/components/Flow/GraphComponent.jsx
index c673a67..995e51b 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,31 +24,11 @@
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;
@@ -61,6 +41,7 @@
label: '璁㈠崟绠＄悊',
ports: commonGraphPorts,
attrs: commonGraphAttrs,
+ data: initNodeData,
});
const rect2 = graph.addNode({
@@ -71,6 +52,7 @@
label: '搴撳瓨绠＄悊',
ports: commonGraphPorts,
attrs: commonGraphAttrs,
+ data: initNodeData,
});
graph.use(
@@ -95,6 +77,1350 @@
}),
)
+ graph.use(
+ new Transform({
+ resizing: {
+ enabled: true
+ },
+ }),
+ )
+
+
+ graph.fromJSON({
+ "cells": [
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "2475ea4f-f0e3-4b44-add4-7d4950ddea45",
+ "zIndex": 0,
+ "source": {
+ "cell": "71d8bc90-558f-489f-b432-a03d7af27cdc",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": ""
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "2c3744b4-45ce-44a6-b169-402eaec24174",
+ "zIndex": 0,
+ "source": {
+ "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": ""
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "56181ccf-a41c-4cd8-82d6-e2a4bde31ba9",
+ "zIndex": 0,
+ "source": {
+ "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": true,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": "true"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "73ca24ef-e9d4-4f18-9f06-ca49ac65962a",
+ "zIndex": 0,
+ "source": {
+ "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
+ "port": "port4"
+ },
+ "target": {
+ "cell": "06d450fc-474e-4b23-b40d-c89fde446b28",
+ "port": "port3"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": "false"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "84a3a77c-79e8-4cf8-9bab-a72bbfc77f1d",
+ "zIndex": 0,
+ "source": {
+ "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": true,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": "true"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "93d65ae7-f170-466a-92ea-f69614002800",
+ "zIndex": 0,
+ "source": {
+ "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": ""
+ }
+ }
+ }
+ ]
+ },
+ {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#A2B1C3",
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "de85103e-80ac-4c88-92de-5bb1a131788c",
+ "zIndex": 0,
+ "source": {
+ "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
+ "port": "port2"
+ },
+ "target": {
+ "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
+ "port": "port1"
+ },
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "labels": [
+ {
+ "attrs": {
+ "label": {
+ "text": ""
+ }
+ }
+ }
+ ]
+ },
+ {
+ "position": {
+ "x": 60,
+ "y": 60
+ },
+ "size": {
+ "width": 120,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "璁㈠崟绠＄悊"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "a4962b5d-6ef0-4217-bbf8-742652ffc0ee",
+ "data": {
+ "codeContent": null,
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 1,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 260,
+ "y": 390
+ },
+ "size": {
+ "width": 120,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "搴撳瓨绠＄悊"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
+ "data": {
+ "codeContent": "2222",
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 2,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 270,
+ "y": 265
+ },
+ "size": {
+ "width": 100,
+ "height": 60
+ },
+ "attrs": {
+ "text": {
+ "text": "閫昏緫鍒ゆ柇1"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "path",
+ "id": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
+ "data": {
+ "codeContent": "閫昏緫鍒ゆ柇1",
+ "root": false,
+ "isLogic": true,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 3,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 300,
+ "y": 30
+ },
+ "size": {
+ "width": 80,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "绋嬪簭鍏ュ彛"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "71d8bc90-558f-489f-b432-a03d7af27cdc",
+ "data": {
+ "codeContent": null,
+ "root": true,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 4,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 300,
+ "y": 110
+ },
+ "size": {
+ "width": 80,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "甯哥敤缁勪欢"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "c5798537-a8a0-4d79-bd76-a4f663492126",
+ "data": {
+ "codeContent": "1111",
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 5,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 280,
+ "y": 511
+ },
+ "size": {
+ "width": 80,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "甯哥敤缁勪欢2"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
+ "data": {
+ "codeContent": "甯哥敤缁勪欢2",
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 6,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 270,
+ "y": 620
+ },
+ "size": {
+ "width": 100,
+ "height": 60
+ },
+ "attrs": {
+ "text": {
+ "text": "閫昏緫鍒ゆ柇2"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "path",
+ "id": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
+ "data": {
+ "codeContent": "閫昏緫鍒ゆ柇2",
+ "root": false,
+ "isLogic": true,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 7,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 280,
+ "y": 781
+ },
+ "size": {
+ "width": 80,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "甯哥敤缁勪欢3"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
+ "data": {
+ "codeContent": "甯哥敤缁勪欢3",
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 8,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ },
+ {
+ "position": {
+ "x": 472,
+ "y": 640
+ },
+ "size": {
+ "width": 80,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "text": "甯哥敤缁勪欢4"
+ },
+ "body": {
+ "fill": "#efefef",
+ "stroke": "#4d4d4d",
+ "strokeWidth": 2,
+ "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
+ }
+ },
+ "visible": true,
+ "shape": "rect",
+ "id": "06d450fc-474e-4b23-b40d-c89fde446b28",
+ "data": {
+ "codeContent": "甯哥敤缁勪欢4",
+ "root": false,
+ "isLogic": false,
+ "logicBool": false,
+ "searchLogicId": 1,
+ "searchLogicBool": true,
+ "searchIndex": 0
+ },
+ "zIndex": 9,
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 5,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "port1",
+ "group": "top"
+ },
+ {
+ "id": "port2",
+ "group": "bottom"
+ },
+ {
+ "id": "port3",
+ "group": "left"
+ },
+ {
+ "id": "port4",
+ "group": "right"
+ }
+ ]
+ }
+ }
+ ]
+ })
+
+
props.initHandle();//閫氱煡鐖剁粍浠跺垵濮嬪寲瀹屾垚
return graph;
}
@@ -114,31 +1440,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 +1570,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 +1590,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