#

Junjie

2024-06-16 83c548d3dba59aaed9b52b5d413c6912a87d2efc

 zy-asrs-flow/src/pages/home/index.jsx

@@ -1,91 +1,32 @@
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 { RightMenu } from "../../components/Flow/RightMenu";
import { GraphDrawer } from "../../components/Flow/GraphDrawer";
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} />
            <RightMenu isReady={ready} graphRef={graphRef} />
            <GraphDrawer isReady={ready} graphRef={graphRef} />
        </div>
    );
}