From babcf4f0462ed0945fcefe59b1666d709910872c Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 三月 2024 16:00:55 +0800
Subject: [PATCH] Merge branch 'master' of http://47.97.1.152:5880/r/zy-asrs-master
---
zy-asrs-flow/src/components/Flow/GraphConfig.jsx | 74 ++++++++++-
/dev/null | 11 -
zy-asrs-flow/src/pages/home/index.jsx | 5
zy-asrs-flow/src/pages/home/index.less | 62 +++++++---
zy-asrs-flow/src/components/Flow/GraphDrawer.jsx | 56 +++++++++
zy-asrs-flow/src/components/Flow/RightMenu.jsx | 61 ++++++++++
zy-asrs-flow/src/components/Flow/GraphComponent.jsx | 69 ++++++-----
zy-asrs-flow/src/components/Flow/GraphTools.jsx | 15 +
8 files changed, 279 insertions(+), 74 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphComponent.jsx b/zy-asrs-flow/src/components/Flow/GraphComponent.jsx
index c673a67..50c20e6 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 } 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;
@@ -95,6 +75,14 @@
}),
)
+ graph.use(
+ new Transform({
+ resizing: {
+ enabled: true
+ },
+ }),
+ )
+
props.initHandle();//閫氱煡鐖剁粍浠跺垵濮嬪寲瀹屾垚
return graph;
}
@@ -120,14 +108,13 @@
stencilContainer.current.appendChild(stencil.container)
-
-
const n1 = graph.createNode({
shape: "rect",
width: 80,
height: 40,
label: "榛樿缁勪欢",
attrs: commonGraphAttrs,
+ ports: commonGraphPorts
})
const n2 = graph.createNode({
@@ -136,6 +123,7 @@
height: 40,
label: "娴嬭瘯缁勪欢",
attrs: commonGraphAttrs,
+ ports: commonGraphPorts
})
stencil.load([n1, n2], 'group1')
@@ -173,12 +161,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 +181,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 (
diff --git a/zy-asrs-flow/src/components/Flow/GraphConfig.jsx b/zy-asrs-flow/src/components/Flow/GraphConfig.jsx
index b2c9136..4f8bf75 100644
--- a/zy-asrs-flow/src/components/Flow/GraphConfig.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphConfig.jsx
@@ -1,4 +1,5 @@
import React, { useRef, useEffect } from "react";
+import { Graph, Shape } from "@antv/x6";
const commonGraphPorts = {
groups: {
@@ -6,9 +7,14 @@
position: 'top',
attrs: {
circle: {
- magnet: true,
- stroke: '#8f8f8f',
r: 5,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
},
},
},
@@ -16,9 +22,14 @@
position: 'bottom',
attrs: {
circle: {
- magnet: true,
- stroke: '#8f8f8f',
r: 5,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
},
},
},
@@ -26,9 +37,14 @@
position: 'left',
attrs: {
circle: {
- magnet: true,
- stroke: '#8f8f8f',
r: 5,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
},
},
},
@@ -36,9 +52,14 @@
position: 'right',
attrs: {
circle: {
- magnet: true,
- stroke: '#8f8f8f',
r: 5,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
},
},
},
@@ -71,4 +92,39 @@
},
}
-export { commonGraphPorts, commonGraphAttrs }
\ No newline at end of file
+const initGraphConnecting = {
+ router: 'manhattan',
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8,
+ },
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ allowBlank: false,
+ snap: {
+ radius: 20,
+ },
+ createEdge() {
+ return new Shape.Edge({
+ attrs: {
+ line: {
+ stroke: '#A2B1C3',
+ strokeWidth: 2,
+ targetMarker: {
+ name: 'block',
+ width: 12,
+ height: 8,
+ },
+ },
+ },
+ zIndex: 0,
+ })
+ },
+ validateConnection({ targetMagnet }) {
+ return !!targetMagnet
+ },
+}
+
+export { commonGraphPorts, commonGraphAttrs, initGraphConnecting }
\ No newline at end of file
diff --git a/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
new file mode 100644
index 0000000..00cd43f
--- /dev/null
+++ b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
@@ -0,0 +1,56 @@
+import React, { useRef, useEffect, useState } from "react";
+import { Button, Drawer, Input } from 'antd';
+
+const { TextArea } = Input;
+
+export const GraphDrawer = ({ graphRef, isReady }) => {
+
+ const [open, setOpen] = useState(false);
+
+ const [init, setInit] = useState(false);
+
+ const [nodeData, setNodeData] = useState(null);
+
+ const [codeContent,setCodeContent] = useState(null);
+
+ const showDrawer = (graph, node) => {
+ setOpen(true);
+ setNodeData(node);
+ };
+
+ const onClose = (e) => {
+ setOpen(false);
+ setNodeData(null);
+ console.log(codeContent);
+ };
+
+ const textAreaChange = (e) => {
+ setCodeContent(e.target.value);
+ }
+
+ useEffect(() => {
+ if (isReady) {
+ const graph = graphRef.current;
+
+ if (!init) {
+ graph.on("node:dblclick", ({ node }) => {
+ console.log(node);
+ showDrawer(graph, node);
+ })
+ setInit(true);
+ }
+ }
+ })
+
+ if(nodeData){
+ return (
+ <>
+ <Drawer title={nodeData.label} onClose={onClose} open={open} size="large">
+ <p>ID锛歿nodeData.id}</p>
+ <p>鍙墽琛屼唬鐮侊細</p>
+ <TextArea onChange={textAreaChange} rows={10} />
+ </Drawer>
+ </>
+ );
+ }
+}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/components/Flow/GraphTools.jsx b/zy-asrs-flow/src/components/Flow/GraphTools.jsx
index 11f4f30..60d5d83 100644
--- a/zy-asrs-flow/src/components/Flow/GraphTools.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphTools.jsx
@@ -1,15 +1,22 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { Button } from 'antd';
-export const GraphTools = ({ graphRef,isReady }) => {
+export const GraphTools = ({ graphRef, isReady }) => {
const exportData = () => {
const graph = graphRef.current;
- if (graph) {
+ if (isReady) {
const data = graph.toJSON();
console.log(data);
// 杩欓噷浣犲彲浠ュ皢鏁版嵁鍙戦�佸埌鏈嶅姟鍣ㄦ垨淇濆瓨鍒版湰鍦�
}
}
- return <button onClick={exportData}>瀵煎嚭鏁版嵁</button>;
+ return (
+ <>
+ <Button type="primary" onClick={exportData}>
+ 瀵煎嚭鏁版嵁
+ </Button>
+ </>
+ );
}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/components/Flow/RightMenu.jsx b/zy-asrs-flow/src/components/Flow/RightMenu.jsx
new file mode 100644
index 0000000..145eb29
--- /dev/null
+++ b/zy-asrs-flow/src/components/Flow/RightMenu.jsx
@@ -0,0 +1,61 @@
+import React, { useRef, useEffect } from "react";
+import { Button } from 'antd';
+
+//鍙抽敭鑿滃崟缁勪欢
+export const RightMenu = ((props) => {
+
+ useEffect(() => {
+ if (props.isReady) {
+ const graph = props.graphRef.current;
+
+ graph.on('blank:contextmenu', ({ e, x, y }) => {
+ // 闃绘娴忚鍣ㄧ殑榛樿琛屼负
+ e.preventDefault();
+ closeContextMenu()
+ openContextMenu(e.clientX, e.clientY, graph);
+ });
+
+ graph.on('cell:mouseup blank:mouseup', closeContextMenu);
+ document.body.addEventListener('click', closeContextMenu);
+ }
+ })
+
+})
+
+function openContextMenu(x, y, graph) {
+ // 鍒涘缓浣犵殑鑷畾涔夎彍鍗曞厓绱�
+ let menuElement = document.createElement('div');
+ menuElement.classList.add('my-context-menu');
+ menuElement.style.left = `${x}px`;
+ menuElement.style.top = `${y}px`;
+
+ let dataList = ['閫夋嫨', '绉诲姩']
+ dataList.forEach((val) => {
+ // 鍦ㄨ繖閲屽～鍏呬綘鐨勮彍鍗曞唴瀹癸紝渚嬪
+ let menuItem = document.createElement('div');
+ menuItem.classList.add("right-menu-button")
+ menuItem.textContent = val;
+ menuItem.onclick = (e) => {
+ // 鍦ㄨ繖閲屽鐞嗚彍鍗曢」鐐瑰嚮浜嬩欢锛屼緥濡備綘鍙互鏍规嵁鐐瑰嚮鐨勮彍鍗曢」杩涜涓嶅悓鐨勬搷浣�
+ if (e.target.textContent == "閫夋嫨") {
+ graph.disablePanning();//绂佺敤绉诲姩
+ graph.enableRubberband();//寮�鍚閫�
+ } else if (e.target.textContent == "绉诲姩") {
+ graph.enablePanning();//寮�鍚Щ鍔�
+ graph.disableRubberband();//绂佺敤妗嗛��
+ }
+ };
+ menuElement.append(menuItem);
+ })
+
+
+ // 鏈�鍚庯紝灏嗚彍鍗曟坊鍔犲埌鏂囨。涓�
+ document.body.append(menuElement);
+}
+
+function closeContextMenu() {
+ let menuElement = document.querySelector('.my-context-menu');
+ if (menuElement) {
+ document.body.removeChild(menuElement);
+ }
+}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/data.js b/zy-asrs-flow/src/pages/home/data.js
deleted file mode 100644
index 5e062c3..0000000
--- a/zy-asrs-flow/src/pages/home/data.js
+++ /dev/null
@@ -1,101 +0,0 @@
-export const data = {
- nodes: [
- {
- id: '1',
- label: '鍏徃1',
- },
- {
- id: '2',
- label: '鍏徃2',
- },
- {
- id: '3',
- label: '鍏徃3'
- },
- {
- id: '4',
- label: '鍏徃4'
- },
- {
- id: '5',
- label: '鍏徃5'
- },
- {
- id: '6',
- label: '鍏徃6'
- },
- {
- id: '7',
- label: '鍏徃7'
- },
- {
- id: '8',
- label: '鍏徃8'
- }
- ],
- edges: [
- {
- source: '1',
- target: '2',
- data: {
- type: 'name1',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '1',
- target: '3',
- data: {
- type: 'name2',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '2',
- target: '5',
- data: {
- type: 'name1',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '5',
- target: '6',
- data: {
- type: 'name2',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '3',
- target: '4',
- data: {
- type: 'name3',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '4',
- target: '7',
- data: {
- type: 'name2',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- },
- {
- source: '1',
- target: '8',
- data: {
- type: 'name2',
- amount: '100,000,000,00 鍏�',
- date: '2019-08-03'
- }
- }
- ]
- };
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.jsx b/zy-asrs-flow/src/pages/home/index.jsx
index 7ca20ba..780dccf 100644
--- a/zy-asrs-flow/src/pages/home/index.jsx
+++ b/zy-asrs-flow/src/pages/home/index.jsx
@@ -2,6 +2,8 @@
import { Graph, Shape } from "@antv/x6";
import { GraphComponent } from "../../components/Flow/GraphComponent";
import { GraphTools } from "../../components/Flow/GraphTools";
+import { RightMenu } from "../../components/Flow/RightMenu";
+import { GraphDrawer } from "../../components/Flow/GraphDrawer";
import './index.less';
export default function () {
@@ -20,10 +22,11 @@
}, [ready]);
return (
-
<div className="stencil-app">
<GraphTools isReady={ready} graphRef={graphRef} />
<GraphComponent ref={graphRef} initHandle={initHandle} />
+ <RightMenu isReady={ready} graphRef={graphRef} />
+ <GraphDrawer isReady={ready} graphRef={graphRef} />
</div>
);
}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.jsx2 b/zy-asrs-flow/src/pages/home/index.jsx2
deleted file mode 100644
index f1596f5..0000000
--- a/zy-asrs-flow/src/pages/home/index.jsx2
+++ /dev/null
@@ -1,363 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { Graph, Shape } from "@antv/x6";
-import { Snapline } from '@antv/x6-plugin-snapline';
-import { Selection } from '@antv/x6-plugin-selection';
-import { Keyboard } from '@antv/x6-plugin-keyboard';
-import { Clipboard } from '@antv/x6-plugin-clipboard';
-import { Stencil } from '@antv/x6-plugin-stencil';
-import './index.less';
-
-
-export default function () {
- const container = useRef(null);
- const stencilContainer = useRef(null);
- const graphRef = useRef(null);
-
- useEffect(() => {
- graphRef.current = new Graph({
- container: container.current,
- // width: document.documentElement.clientWidth,
- // height: document.documentElement.clientHeight,
- // width: 200,
- // height: 300,
- // 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,
- },
- });
-
- const graph = graphRef.current;
-
- // // 寮�鍚妭鐐瑰彲浠ヨ鎷栧姩浜や簰
- // graph.on('cell:mouseenter', ({ cell }) => {
- // if (cell.isNode()) {
- // cell.addTools([
- // {
- // name: 'boundary',
- // },
- // ])
- // }
- // })
-
- // graph.on('node:mouseleave', ({ cell }) => {
- // cell.removeTools()
- // })
-
- const rect = graph.addNode({
- x: 60,
- y: 60,
- width: 120,
- height: 40,
- label: '璁㈠崟绠＄悊',
- ports: {
- groups: {
- top: {
- position: 'top',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- bottom: {
- position: 'bottom',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- left: {
- position: 'left',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- right: {
- position: 'right',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- },
- items: [
- {
- id: 'port1',
- group: 'top',
- },
- {
- id: 'port2',
- group: 'bottom',
- },
- {
- id: 'port3',
- group: 'left',
- },
- {
- id: 'port4',
- group: 'right',
- },
- ],
- },
- attrs: {
- body: {
- fill: '#efefef',
- stroke: '#4d4d4d',
- strokeWidth: 2,
- },
- },
- });
-
- const rect2 = graph.addNode({
- x: 240,
- y: 240,
- width: 120,
- height: 40,
- label: '搴撳瓨绠＄悊',
- ports: {
- groups: {
- top: {
- position: 'top',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- bottom: {
- position: 'bottom',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- left: {
- position: 'left',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- right: {
- position: 'right',
- attrs: {
- circle: {
- magnet: true,
- stroke: '#8f8f8f',
- r: 5,
- },
- },
- },
- },
- items: [
- {
- id: 'port1',
- group: 'top',
- },
- {
- id: 'port2',
- group: 'bottom',
- },
- {
- id: 'port3',
- group: 'left',
- },
- {
- id: 'port4',
- group: 'right',
- },
- ],
- },
- attrs: {
- body: {
- fill: '#efefef',
- stroke: '#4d4d4d',
- strokeWidth: 2,
- },
- },
- });
-
- // graph.addEdge({
- // source: { cell: rect.id },
- // target: { cell: rect2.id },
- // });
-
- graph.use(
- new Snapline({
- enabled: true,
- }),
- )
-
- graph.use(
- new Selection({
- enabled: true,
- multiple: true,
- rubberband: true,
- movable: true,
- showNodeSelectionBox: true,
- }),
- )
-
- graph.use(
- new Clipboard({
- enabled: true,
- }),
- )
-
- graph.use(
- new Keyboard({
- enabled: true,
- global: true,
- })
- )
-
- graph.bindKey('ctrl+c', () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.copy(cells)
- }
- return false
- })
-
- graph.bindKey('ctrl+v', () => {
- if (!graph.isClipboardEmpty()) {
- const cells = graph.paste({ offset: 32 })
- graph.cleanSelection()
- graph.select(cells)
- }
- return false
- })
-
- const stencil = new Stencil({
- title: 'Stencil',
- target: graph,
- search(cell, keyword) {
- return cell.shape.indexOf(keyword) !== -1
- },
- placeholder: 'Search by shape name',
- notFoundText: 'Not Found',
- collapsable: true,
- stencilGraphHeight: 0,
- groups: [
- {
- name: 'group1',
- title: 'Group(Collapsable)',
- },
- {
- name: 'group2',
- title: 'Group',
- collapsable: false,
- },
- ],
- })
-
- stencilContainer.current.appendChild(stencil.container)
-
- const commonAttrs = {
- body: {
- fill: '#fff',
- stroke: '#8f8f8f',
- strokeWidth: 1,
- },
- }
-
- const n1 = graph.createNode({
- shape: 'rect',
- x: 40,
- y: 40,
- width: 80,
- height: 40,
- label: 'rect',
- attrs: commonAttrs,
- })
-
- const n2 = graph.createNode({
- shape: 'circle',
- x: 180,
- y: 40,
- width: 40,
- height: 40,
- label: 'circle',
- attrs: commonAttrs,
- })
-
- const n3 = graph.createNode({
- shape: 'ellipse',
- x: 280,
- y: 40,
- width: 80,
- height: 40,
- label: 'ellipse',
- attrs: commonAttrs,
- })
-
- const n4 = graph.createNode({
- shape: 'path',
- x: 420,
- y: 40,
- width: 40,
- height: 40,
- // https://www.svgrepo.com/svg/13653/like
- path: 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
- attrs: commonAttrs,
- label: 'path',
- })
-
- stencil.load([n1, n2], 'group1')
- stencil.load([n3, n4], 'group2')
-
- return () => graph.dispose();
- }, []);
-
- const exportData = () => {
- if (graphRef.current) {
- const data = graphRef.current.toJSON();
- console.log(data);
- }
- }
-
- return (
- <div className="stencil-app">
- <button onClick={exportData}>瀵煎嚭鏁版嵁</button>
- <div className="app-stencil" ref={stencilContainer} />
- <div className="app-content" ref={container} />
- </div>
- );
-}
diff --git a/zy-asrs-flow/src/pages/home/index.jsx_old b/zy-asrs-flow/src/pages/home/index.jsx_old
deleted file mode 100644
index 5ba00fe..0000000
--- a/zy-asrs-flow/src/pages/home/index.jsx_old
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useEffect, useState,useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { data } from './data';
-import G6 from '@antv/g6';
-import "./index.css"
-import { Modal, Input } from 'antd';
-
-export default function() {
- const ref = useRef(null);
- const graphRef = useRef(null);
-
- useEffect(() => {
- if (!graphRef.current) {
- // // 娉ㄥ唽鑷畾涔夎涓�
- // G6.registerBehavior('drag-line', {
- // getEvents() {
- // return {
- // 'edge:mousedown': 'onDragStart',
- // 'canvas:mousemove': 'onDrag',
- // 'canvas:mouseup': 'onDragEnd',
- // }
- // },
- // onDragStart(ev) {
- // const edge = ev.item;
- // this.edge = edge;
- // this.dragging = true;
- // console.log(ev)
- // },
- // onDrag(ev) {
- // if (!this.dragging) {
- // return;
- // }
- // const { x, y } = ev;
-
- // // 鏇存柊杈圭殑 target锛堢粓鐐癸級
- // this.edge.update({
- // target: { x, y },
- // });
- // },
- // onDragEnd() {
- // this.edge = null;
- // this.dragging = false;
- // }
- // });
-
- G6.registerBehavior('click-add-edge', {
- getEvents() {
- return {
- 'node:click': 'onClick',
- mousemove: 'onMousemove',
- 'edge:click': 'onEdgeClick' // 鐐瑰嚮绌虹櫧澶勶紝鍙栨秷杈�
- };
- },
- onClick(ev) {
- const node = ev.item;
- const graph = this.graph;
- const point = {
- x: ev.x,
- y: ev.y
- };
- const model = node.getModel();
- if (this.addingEdge && this.edge) {
- graph.updateItem(this.edge, {
- target: model.id
- });
- // graph.setItemState(this.edge, 'selected', true);
- this.edge = null;
- this.addingEdge = false;
- } else {
- this.edge = graph.addItem('edge', {
- source: model.id,
- target: point
- });
- this.addingEdge = true;
- }
- },
- onMousemove(ev) {
- const point = {
- x: ev.x,
- y: ev.y
- };
- if (this.addingEdge && this.edge) {
- this.graph.updateItem(this.edge, {
- target: point
- });
- }
- },
- onEdgeClick(ev) {
- const currentEdge = ev.item;
- // 鎷栨嫿杩囩▼涓紝鐐瑰嚮浼氱偣鍑诲埌鏂板鐨勮竟涓�
- if (this.addingEdge && this.edge == currentEdge) {
- graph.removeItem(this.edge);
- this.edge = null;
- this.addingEdge = false;
- }
- }
- });
-
-
- graphRef.current = new G6.Graph({
- container: ReactDOM.findDOMNode(ref.current),
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight,
- modes: {
- default: [
- 'drag-canvas',
- 'zoom-canvas',
- 'drag-node',
- 'drag-line',
- 'click-add-edge'
- ],
- addEdge: ['click-add-edge', 'click-select']
- },
- layout: {
- type: 'dagre',
- direction: 'LR',
- },
- defaultNode: {
- shape: 'node',
- type: 'rect',
- labelCfg: {
- style: {
- fill: '#000000A6',
- fontSize: 14,
- },
- },
- style: {
- // 浠呭湪 keyShape 涓婄敓鏁�
- fill: 'lightblue',
- stroke: '#888',
- lineWidth: 1,
- radius: 7,
- },
- // linkPoints: {
- // top: true,
- // bottom: true,
- // left: true,
- // right: true,
- // // ... 鍥涗釜鍦嗙殑鏍峰紡鍙互鍦ㄨ繖閲屾寚瀹�
- // },
- },
- defaultEdge: {
- shape: 'polyline',
- },
- nodeStateStyles: {
- // 鍚勭姸鎬佷笅鐨勬牱寮忥紝骞抽摵鐨勯厤缃」浠呭湪 keyShape 涓婄敓鏁堛�傞渶瑕佸湪鍏朵粬 shape 鏍峰紡涓婂搷搴旂姸鎬佸彉鍖栧垯鍐欐硶涓嶅悓锛屽弬瑙佷笂鏂囨彁鍒扮殑 閰嶇疆鐘舵�佹牱寮� 閾炬帴
- hover: {
- fillOpacity: 0.1,
- lineWidth: 1,
- },
- },
- });
- }
-
- const graph = graphRef.current;
-
- graph.data(data);
- graph.render();
-
- graph.setMode("edit")
-
- // 鐩戝惉榧犳爣杩涘叆鑺傜偣浜嬩欢
- graph.on('node:mouseenter', (evt) => {
- const node = evt.item;
- // 婵�娲昏鑺傜偣鐨� hover 鐘舵��
- graph.setItemState(node, 'hover', true);
- });
-
- // 鐩戝惉榧犳爣绂诲紑鑺傜偣浜嬩欢
- graph.on('node:mouseleave', (evt) => {
- const node = evt.item;
- // 鍏抽棴璇ヨ妭鐐圭殑 hover 鐘舵��
- graph.setItemState(node, 'hover', false);
- });
-
- graph.on('node:dblclick', (evt) => {
- const node = evt.item;
- const model = node.getModel();
- // 鍦ㄦ澶勬墽琛屾樉绀轰竴涓ā鎬佹鎴栬緭鍏ユ鐨勬搷浣滐紝灏唌odel.id浼犲叆鐢ㄦ潵纭畾鍝釜鑺傜偣锛宮odel.label浼犲叆鐢ㄦ潵鏄剧ず褰撳墠鑺傜偣鏂囧瓧
- showModal(model.id, model.label);
- });
-
- // 娣诲姞琛屼负
- graph.on('edge:click', (evt) => {
- const { item } = evt;
-
- // 鑾峰彇杈圭殑妯″瀷鏁版嵁
- const model = item.getModel();
-
- // 鍒囨崲閫変腑鐘舵��
- if (model.style?.stroke === '#f00') {
- // 濡傛灉杈瑰浜庨�変腑鐘舵�侊紝鍒欏彇娑堥�変腑
- graph.updateItem(item, {
- style: {
- ...model.style,
- stroke: '#000',
- },
- });
- } else {
- // 濡傛灉杈规湭琚�変腑锛屽垯閫変腑褰撳墠杈�
- graph.updateItem(item, {
- style: {
- ...model.style,
- stroke: '#f00',
- },
- });
- }
- });
- }, []);
-
- const [modalVisible, setModalVisible] = useState(false);
- const [currentNode, setCurrentNode] = useState(null);
- const [currentLabel, setCurrentLabel] = useState('');
-
- const showModal = (id, label) => {
- setCurrentNode(id); // 璁剧疆褰撳墠鑺傜偣
- setCurrentLabel(label); // 璁剧疆褰撳墠鑺傜偣鏂囧瓧
- setModalVisible(true); // 鎵撳紑妯℃�佹
- };
-
- const updateLabel = (nodeId, newLabel) => {
- if(graphRef.current){
- const node = graphRef.current.findById(nodeId);
- graphRef.current.update(node, {
- label: newLabel,
- });
- graphRef.current.refresh();
- }
- };
-
- const handleOk = () => {
- // 鐐瑰嚮纭畾鍚庢洿鏂拌妭鐐�
- updateLabel(currentNode, currentLabel);
- setModalVisible(false);
- };
-
- const handleCancel = () => {
- // 鍏抽棴妯℃�佹
- setModalVisible(false);
- };
-
- return (
- <>
- <div ref={ref} /> {/* g6鍥捐〃鐨勫鍣� */}
- <Modal
- open={modalVisible}
- onOk={handleOk}
- onCancel={handleCancel}
- >
- <div className='modalInput'>
- <Input value={currentLabel} onChange={e => setCurrentLabel(e.target.value)} />
- </div>
- </Modal>
- </>
- );
-}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.less b/zy-asrs-flow/src/pages/home/index.less
index b6596ec..6dacf4e 100644
--- a/zy-asrs-flow/src/pages/home/index.less
+++ b/zy-asrs-flow/src/pages/home/index.less
@@ -1,20 +1,46 @@
.stencil-app {
- display: flex;
- padding: 0;
- font-family: sans-serif;
-
- .app-stencil {
- position: relative;
- width: 300px;
- border: 1px solid #f0f0f0;
- }
-
- .app-content {
- flex: 1;
- height: 380px;
- margin-right: 8px;
- margin-left: 8px;
- box-shadow: 0 0 10px 1px #e9e9e9;
- }
+ display: flex;
+ padding: 0;
+ font-family: sans-serif;
+
+ .app-stencil {
+ position: relative;
+ width: 300px;
+ border: 1px solid #f0f0f0;
}
-
\ No newline at end of file
+
+ .app-content {
+ flex: 1;
+ height: 380px;
+ margin-right: 8px;
+ margin-left: 8px;
+ box-shadow: 0 0 10px 1px #e9e9e9;
+ }
+}
+
+.x6-node.node-active .x6-port .x6-port-body {
+ visibility: visible;
+}
+
+.my-context-menu {
+ width: 150px;
+ // height: 100px;
+ background: #fff;
+ position: absolute;
+ border-radius: 10px;
+ overflow: hidden;
+ border: 1px #000 solid;
+}
+
+.right-menu-button {
+ background: #fff;
+ padding: 5px 10px;
+ color: #000;
+ text-align: center;
+ cursor: pointer;
+}
+
+.right-menu-button:hover {
+ background: rgb(22,119,255);
+ color: #fff;
+}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-edge/dege2.jsx b/zy-asrs-flow/src/pages/home/react-edge/dege2.jsx
deleted file mode 100644
index 67d4e17..0000000
--- a/zy-asrs-flow/src/pages/home/react-edge/dege2.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-import { NsGraph } from '@antv/xflow'
-import { useAppContext } from '@antv/xflow'
-import './edge2.less'
-
-const Edge2 = props => {
- return <div className="edge2-container">React2</div>
-}
-export default Edge2
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-edge/edge1.jsx b/zy-asrs-flow/src/pages/home/react-edge/edge1.jsx
deleted file mode 100644
index e934e66..0000000
--- a/zy-asrs-flow/src/pages/home/react-edge/edge1.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { NsGraph } from '@antv/xflow'
-import { useAppContext } from '@antv/xflow'
-import { Tooltip } from 'antd'
-import './edge1.less'
-
-const Edge1 = props => {
- const ctx = useAppContext()
- // console.log('edge useAppContext', ctx);
- // console.log('edge props:', props);
- return (
- <div className="edge1-container">
- <Tooltip
- title="杩欐槸杩炵嚎涓婃覆鏌撶殑React鍐呭"
- // defaultVisible={true}
- >
- <div>hover鎴�</div>
- </Tooltip>
- </div>
- )
-}
-export default Edge1
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-edge/edge1.less b/zy-asrs-flow/src/pages/home/react-edge/edge1.less
deleted file mode 100644
index 0893e2b..0000000
--- a/zy-asrs-flow/src/pages/home/react-edge/edge1.less
+++ /dev/null
@@ -1,12 +0,0 @@
-.edge1-container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- font-size: 14px;
- background-color: #fff;
- border: 1px solid #690;
- border-radius: 4px;
- cursor: pointer;
- }
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-edge/edge2.less b/zy-asrs-flow/src/pages/home/react-edge/edge2.less
deleted file mode 100644
index 041d057..0000000
--- a/zy-asrs-flow/src/pages/home/react-edge/edge2.less
+++ /dev/null
@@ -1,12 +0,0 @@
-.edge2-container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- font-size: 14px;
- background-color: #fff;
- border: 1px solid #690;
- border-radius: 4px;
- cursor: pointer;
- }
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-node/node1.jsx b/zy-asrs-flow/src/pages/home/react-node/node1.jsx
deleted file mode 100644
index 06965f9..0000000
--- a/zy-asrs-flow/src/pages/home/react-node/node1.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NsGraph } from '@antv/xflow'
-import React from 'react'
-import './node1.less'
-
-const Node1 = props => {
- /**
- * 1. 鑺傜偣鐨勬暟鎹�佷綅缃俊鎭�氳繃props鍙�
- * 2. 褰撹妭鐐硅瑙﹀彂鏇存柊鏃�, props杩斿洖鐨勬暟鎹篃浼氬姩鎬佹洿鏂�, 瑙﹀彂鑺傜偣閲嶆柊娓叉煋
- */
- return (
- <div className="node1-container">
- <div>{'React鑺傜偣1'}</div>
- </div>
- )
-}
-export default Node1
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-node/node1.less b/zy-asrs-flow/src/pages/home/react-node/node1.less
deleted file mode 100644
index 609ef41..0000000
--- a/zy-asrs-flow/src/pages/home/react-node/node1.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.node1-container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- font-weight: 600;
- background-color: #fff;
- border: 1px solid #873bf4;
- border-radius: 4px;
- }
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-node/node2.jsx b/zy-asrs-flow/src/pages/home/react-node/node2.jsx
deleted file mode 100644
index 77aa261..0000000
--- a/zy-asrs-flow/src/pages/home/react-node/node2.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NsGraph } from '@antv/xflow'
-import React from 'react'
-import { useAppContext } from '@antv/xflow'
-import './node2.less'
-
-const Node2 = props => {
- const ctx = useAppContext()
-
- return (
- <div className="node2-container">
- <div>{'React鑺傜偣2'}</div>
- </div>
- )
-}
-export default Node2
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-node/node2.less b/zy-asrs-flow/src/pages/home/react-node/node2.less
deleted file mode 100644
index 6e85bb8..0000000
--- a/zy-asrs-flow/src/pages/home/react-node/node2.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.node2-container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- font-weight: 600;
- background-color: #fff;
- border: 1px solid #dd4a68;
- border-radius: 4px;
- }
\ No newline at end of file
--
Gitblit v1.9.1