From 0c009a44f7cd35489a56450d0aa2715b00b23c32 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 02 三月 2024 14:21:22 +0800
Subject: [PATCH] Merge branch 'master' of http://47.97.1.152:5880/r/zy-asrs-master
---
zy-asrs-flow/src/pages/home/index.jsx | 108 +++++++++++------------------------------------------
1 files changed, 23 insertions(+), 85 deletions(-)
diff --git a/zy-asrs-flow/src/pages/home/index.jsx b/zy-asrs-flow/src/pages/home/index.jsx
index 92634cc..7ca20ba 100644
--- a/zy-asrs-flow/src/pages/home/index.jsx
+++ b/zy-asrs-flow/src/pages/home/index.jsx
@@ -1,91 +1,29 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { data } from './data';
-import G6 from '@antv/g6';
-import "./index.css"
+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 './index.less';
-export default function() {
- const ref = React.useRef(null);
- let graph = null;
+export default function () {
+ const graphRef = useRef(null);
+ const [ready, setReady] = useState(false);
- useEffect(() => {
- if (!graph) {
- graph = new G6.Graph({
- container: ReactDOM.findDOMNode(ref.current),
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight,
- modes: {
- default: [
- 'drag-canvas',
- 'zoom-canvas',
- 'drag-node',
- ],
- edit: ['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 initHandle = () => {
+ setReady(true);
}
- graph.data(data);
- graph.render();
-
- // 鐩戝惉榧犳爣杩涘叆鑺傜偣浜嬩欢
- 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);
- });
+ useEffect(() => {
+ if (ready) {
+ // 浣犻渶瑕佸湪loading鐘舵�佹敼鍙樺悗鎵ц鐨勪唬鐮�
+ console.log('graphRef is ready:', graphRef.current);
+ }
+ }, [ready]);
- graph.on('node:click', (evt) => {
- const node = evt.item;
- const model = node.getModel();
- // 鍦ㄨ繖閲屾墦寮�妯℃�佹鎴栬�呯紪杈戣〃鏍硷紝浼犲叆model浠ヤ究鐢ㄤ簬鍒濆鍖栫紪杈戝唴瀹�
- showModal(model);
- });
- }, []);
-
- return <div ref={ref}></div>;
+ return (
+
+ <div className="stencil-app">
+ <GraphTools isReady={ready} graphRef={graphRef} />
+ <GraphComponent ref={graphRef} initHandle={initHandle} />
+ </div>
+ );
}
\ No newline at end of file
--
Gitblit v1.9.1