From 83c548d3dba59aaed9b52b5d413c6912a87d2efc Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期日, 16 六月 2024 15:50:14 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/home/index.jsx | 123 +++++++++--------------------------------
1 files changed, 27 insertions(+), 96 deletions(-)
diff --git a/zy-asrs-flow/src/pages/home/index.jsx b/zy-asrs-flow/src/pages/home/index.jsx
index 6372cd8..780dccf 100644
--- a/zy-asrs-flow/src/pages/home/index.jsx
+++ b/zy-asrs-flow/src/pages/home/index.jsx
@@ -1,101 +1,32 @@
-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'
+import React, { useEffect, useRef, useState } from "react";
+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';
-import './index.css'
+export default function () {
+ const graphRef = useRef(null);
+ const [ready, setReady] = useState(false);
-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}杩炵嚎琚偣鍑讳簡`)
- })
+ const initHandle = () => {
+ setReady(true);
}
- 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>
- )
-}
+ useEffect(() => {
+ if (ready) {
+ // 浣犻渶瑕佸湪loading鐘舵�佹敼鍙樺悗鎵ц鐨勪唬鐮�
+ console.log('graphRef is ready:', graphRef.current);
+ }
+ }, [ready]);
-export default Demo
\ No newline at end of file
+ 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
--
Gitblit v1.9.1