From 61a6bda36494ebd99740b3a086a1255d8ca21fd8 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 29 二月 2024 08:13:13 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/home/react-edge/edge2.css | 12 ++
zy-asrs-flow/src/pages/home/react-node/node1.jsx | 15 +++
zy-asrs-flow/src/pages/home/react-node/node2.jsx | 14 ++
zy-asrs-flow/src/pages/home/index.jsx | 110 ++++++++++++++++++++--
zy-asrs-flow/src/pages/home/react-edge/edge1.css | 13 ++
zy-asrs-flow/src/pages/home/index.css | 34 ++++++
zy-asrs-flow/src/pages/home/react-edge/edge1.jsx | 21 ++++
zy-asrs-flow/src/pages/home1/index.jsx | 11 ++
zy-asrs-flow/src/pages/home/react-node/node1.css | 11 ++
zy-asrs-flow/src/pages/home/config-graph.js | 32 ++++++
zy-asrs-flow/src/pages/home/react-edge/edge2.jsx | 8 +
zy-asrs-flow/src/pages/home/react-node/node2.css | 11 ++
12 files changed, 282 insertions(+), 10 deletions(-)
diff --git a/zy-asrs-flow/src/pages/home/config-graph.js b/zy-asrs-flow/src/pages/home/config-graph.js
new file mode 100644
index 0000000..4e9f827
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/config-graph.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { createGraphConfig } from '@antv/xflow'
+/** 鑷畾涔塕eact鑺傜偣/杈� */
+import Node1 from './react-node/node1'
+import Node2 from './react-node/node2'
+import Edge1 from './react-edge/edge1'
+import Edge2 from './react-edge/edge2'
+
+export const useGraphConfig = createGraphConfig(config => {
+ /** 璁剧疆XFlow鐢诲竷閰嶇疆椤� */
+ config.setX6Config({
+ /** 鐢诲竷缃戞牸 */
+ grid: true,
+ /** 鐢诲竷缂╂斁绛夌骇 */
+ scaling: {
+ min: 0.2,
+ max: 3,
+ },
+ /** 鐢诲竷婊氳疆缂╂斁 */
+ // mousewheel: {
+ // enabled: true,
+ // /** 灏嗛紶鏍囦綅缃綔涓轰腑蹇冪缉鏀� */
+ // zoomAtMousePosition: true,
+ // },
+ })
+
+ /** 璁剧疆XFlow鐢诲竷闇�瑕佹覆鏌撶殑React鑺傜偣/杈� */
+ config.setNodeRender('NODE1', props => <Node1 {...props} />)
+ config.setNodeRender('NODE2', Node2)
+ config.setEdgeRender('EDGE1', props => <Edge1 {...props} />)
+ config.setEdgeRender('EDGE2', props => <Edge2 {...props} />)
+})
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.css b/zy-asrs-flow/src/pages/home/index.css
new file mode 100644
index 0000000..03943eb
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/index.css
@@ -0,0 +1,34 @@
+.quick-start .__dumi-default-previewer-demo {
+ padding: 0 0;
+}
+
+.quick-start .xflow-user-container {
+ position: relative;
+ width: 100%;
+ height: 320px;
+ overflow: scroll;
+ /** 瑕嗙洊鑺傜偣榛樿閫変腑鑹� */
+ /** 瑕嗙洊杩炵嚎榛樿閫変腑鑹� */
+}
+
+.quick-start .xflow-user-container .x6-node-selected rect {
+ stroke: #dd4a68;
+ stroke-width: 3px;
+}
+
+.quick-start .xflow-user-container .x6-edge-selected path {
+ stroke: #873bf4;
+ stroke-width: 2px;
+}
+
+.quick-start .xflow-user-container .xflow-workspace-toolbar-top {
+ border-bottom: 1px solid #d9d9d9;
+}
+
+.quick-start .xflow-user-container .xflow-custom-minimap {
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.quick-start .xflow-user-container .xflow-custom-minimap .x6-widget-minimap-viewport {
+ border: 1px solid rgba(0, 0, 0, 0.3);
+}
\ 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 cbfa9c0..6372cd8 100644
--- a/zy-asrs-flow/src/pages/home/index.jsx
+++ b/zy-asrs-flow/src/pages/home/index.jsx
@@ -1,11 +1,101 @@
-import ProSkeleton from '@ant-design/pro-skeleton';
+import React, { useState } from 'react'
+import { XFlow, XFlowCanvas } from '@antv/xflow'
+/** 鍥剧殑鍚勭鎵╁睍浜や簰缁勪欢 */
+import { CanvasMiniMap, CanvasScaleToolbar, CanvasSnapline } from '@antv/xflow'
+/** 鍥剧殑閰嶇疆椤� */
+import { useGraphConfig } from './config-graph'
+import { message } from 'antd'
-export default () => (
- <div
- style={{
- padding: 24,
- }}
- >
- <ProSkeleton type="list" />
- </div>
-);
\ No newline at end of file
+import './index.css'
+
+const Demo = () => {
+ /** 鐢诲竷閰嶇疆 */
+ const graphConfig = useGraphConfig()
+
+ /** 鐢诲竷娓叉煋鏁版嵁 */
+ const [graphData, setGraphData] = useState()
+
+ /** XFlow鍒濆鍖栧畬鎴愮殑鍥炶皟 */
+ const onLoad = async app => {
+ const node = [
+ { id: 'root1', width: 150, height: 40, renderKey: 'NODE1', info: { text: 'root1' } },
+ { id: 'down1', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down1' } },
+ { id: 'down2', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down2' } },
+ { id: 'down3', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down3' } },
+ ]
+ const edges = [
+ {
+ id: 'root1-down1',
+ source: 'root1',
+ target: 'down1',
+ renderKey: 'EDGE1',
+ edgeContentWidth: 60,
+ edgeContentHeight: 30,
+ info: { line: 'root1-down1' },
+ },
+ {
+ id: 'root1-down2',
+ source: 'root1',
+ target: 'down2',
+ renderKey: 'EDGE2',
+ edgeContentWidth: 60,
+ edgeContentHeight: 30,
+ info: { line: 'root1-down2' },
+ },
+ {
+ id: 'root1-down3',
+ source: 'root1',
+ target: 'down3',
+ label: '1:N(绾枃鏈�)',
+ info: { line: 'root1-down3' },
+ },
+ ]
+ const newGraphData = { nodes, edges }
+ setGraphData(newGraphData)
+
+ const graph = await app.getGraphInstance()
+ graph.on('node:click', ({ node }) => {
+ const nodeData = node.getData()
+ message.success(`${nodeData.id}鑺傜偣琚偣鍑讳簡`)
+ })
+ graph.on('edge:click', ({ edge }) => {
+ edge.toFront()
+ const edgeData = edge.getData()
+ message.success(`${edgeData.id}杩炵嚎琚偣鍑讳簡`)
+ })
+ }
+
+ return (
+ <XFlow
+ className="xflow-user-container"
+ graphData={graphData}
+ graphLayout={{
+ layoutType: 'dagre',
+ layoutOptions: {
+ type: 'dagre',
+ rankdir: 'TB',
+ nodesep: 60,
+ ranksep: 40,
+ },
+ }}
+ onLoad={onLoad}
+ isAutoCenter={true}
+ >
+ <XFlowCanvas config={graphConfig}>
+ <CanvasScaleToolbar position={{ top: 12, left: 12 }} />
+ <CanvasMiniMap
+ miniMapClz="xflow-custom-minimap"
+ nodeFillColor="#ccc"
+ minimapOptions={{
+ width: 200,
+ height: 120,
+ }}
+ position={{ top: 12, right: 12 }}
+ />
+ <CanvasSnapline color="#1890ff" />
+ </XFlowCanvas>
+ </XFlow>
+ )
+}
+
+export default Demo
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/react-edge/edge1.css b/zy-asrs-flow/src/pages/home/react-edge/edge1.css
new file mode 100644
index 0000000..61481f3
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-edge/edge1.css
@@ -0,0 +1,13 @@
+.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/edge1.jsx b/zy-asrs-flow/src/pages/home/react-edge/edge1.jsx
new file mode 100644
index 0000000..efb7397
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-edge/edge1.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { useAppContext } from '@antv/xflow'
+import { Tooltip } from 'antd'
+import './edge1.css'
+
+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/edge2.css b/zy-asrs-flow/src/pages/home/react-edge/edge2.css
new file mode 100644
index 0000000..eca5997
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-edge/edge2.css
@@ -0,0 +1,12 @@
+.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-edge/edge2.jsx b/zy-asrs-flow/src/pages/home/react-edge/edge2.jsx
new file mode 100644
index 0000000..b9361ac
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-edge/edge2.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { useAppContext } from '@antv/xflow'
+import './edge2.css'
+
+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-node/node1.css b/zy-asrs-flow/src/pages/home/react-node/node1.css
new file mode 100644
index 0000000..086f1ea
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-node/node1.css
@@ -0,0 +1,11 @@
+.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/node1.jsx b/zy-asrs-flow/src/pages/home/react-node/node1.jsx
new file mode 100644
index 0000000..924b1b9
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-node/node1.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import './node1.css'
+
+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/node2.css b/zy-asrs-flow/src/pages/home/react-node/node2.css
new file mode 100644
index 0000000..527f251
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-node/node2.css
@@ -0,0 +1,11 @@
+.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
diff --git a/zy-asrs-flow/src/pages/home/react-node/node2.jsx b/zy-asrs-flow/src/pages/home/react-node/node2.jsx
new file mode 100644
index 0000000..fe64bb0
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/react-node/node2.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { useAppContext } from '@antv/xflow'
+import './node2.css'
+
+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/home1/index.jsx b/zy-asrs-flow/src/pages/home1/index.jsx
new file mode 100644
index 0000000..cbfa9c0
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home1/index.jsx
@@ -0,0 +1,11 @@
+import ProSkeleton from '@ant-design/pro-skeleton';
+
+export default () => (
+ <div
+ style={{
+ padding: 24,
+ }}
+ >
+ <ProSkeleton type="list" />
+ </div>
+);
\ No newline at end of file
--
Gitblit v1.9.1