@ant-design/pro-flow/es/FlowView/provider/FlowViewProvider.js

A React based Flow components

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { useCallback, useEffect, useRef, useState } from 'react';
import { ReactFlowProvider, useReactFlow } from 'reactflow';
import { convertMappingFrom, getRenderData } from "../helper";
import { FlowViewContext } from "./provider";

// 数据处理层
import { jsx as _jsx } from "react/jsx-runtime";
var ProviderInner = function ProviderInner(_ref) {
  var children = _ref.children;
  var _useState = useState({
      x: 10,
      y: 10
    }),
    _useState2 = _slicedToArray(_useState, 2),
    miniMapPosition = _useState2[0],
    setMiniMapPosition = _useState2[1];
  var reactFlowInstance = useReactFlow();
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    nodes = _useState4[0],
    setNodes = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    edges = _useState6[0],
    setEdges = _useState6[1];
  var _useState7 = useState(undefined),
    _useState8 = _slicedToArray(_useState7, 2),
    initEdges = _useState8[0],
    setInitEdges = _useState8[1];
  var _useState9 = useState({}),
    _useState10 = _slicedToArray(_useState9, 2),
    mapping = _useState10[0],
    setMapping = _useState10[1];
  var _useState11 = useState(true),
    _useState12 = _slicedToArray(_useState11, 2),
    autoLayout = _useState12[0],
    setAutoLayout = _useState12[1];
  var _useState13 = useState({
      rankdir: 'LR',
      align: 'UL',
      nodesep: 100,
      ranksep: 200
    }),
    _useState14 = _slicedToArray(_useState13, 2),
    layoutOptions = _useState14[0],
    setLayoutOptions = _useState14[1];
  var flowViewRef = useRef();
  var convertRenderData = useCallback(function () {
    var _getRenderData = getRenderData(mapping, initEdges, autoLayout, layoutOptions),
      _nodes = _getRenderData.nodes,
      _edges = _getRenderData.edges;
    setNodes(_nodes);
    setEdges(_edges);
  }, [mapping, initEdges, autoLayout, layoutOptions]);
  var flowDataAdapter = useCallback(function (initNodes, initEdges, zoom, autoLayout, layoutOptions) {
    if (initNodes.length === 0) return;
    setMapping(convertMappingFrom(initNodes, initEdges, zoom));
    setInitEdges(initEdges);
    setAutoLayout(autoLayout);
    setLayoutOptions(layoutOptions);
  }, []);
  useEffect(function () {
    if (Object.keys(mapping).length && initEdges) {
      convertRenderData();
    }
  }, [mapping, initEdges]);

  // 选中单个节点
  var updateSelectNode = useCallback(function (nodeId, selectType) {
    var node = mapping[nodeId];
    if (node) {
      node.select = selectType;
      setMapping(_objectSpread({}, mapping));
    }
  }, [mapping]);

  // 选中多个节点
  var updateSelectNodes = useCallback(function (nodeIds, selectType) {
    nodeIds.forEach(function (id) {
      updateSelectNode(id, selectType);
    });
  }, [mapping]);

  // 选中单条线
  var updateSelectEdge = useCallback(function (edgeId, selectType) {
    var edge = initEdges === null || initEdges === void 0 ? void 0 : initEdges.find(function (edge) {
      return edge.id === edgeId;
    });
    if (edge) {
      edge.select = selectType;
      setInitEdges(_toConsumableArray(initEdges));
    }
  }, [initEdges]);

  // 选中多条线
  var updateSelectEdges = useCallback(function (edgeIds, selectType) {
    edgeIds.forEach(function (id) {
      updateSelectEdge(id, selectType);
    });
  }, [mapping]);
  return /*#__PURE__*/_jsx(FlowViewContext.Provider, {
    value: {
      nodes: nodes,
      edges: edges,
      isUseProvider: true,
      reactFlowInstance: reactFlowInstance,
      miniMapPosition: miniMapPosition,
      flowViewRef: flowViewRef,
      setMiniMapPosition: setMiniMapPosition,
      flowDataAdapter: flowDataAdapter,
      // 变更方法
      updateSelectNode: updateSelectNode,
      updateSelectNodes: updateSelectNodes,
      updateSelectEdge: updateSelectEdge,
      updateSelectEdges: updateSelectEdges
    },
    children: children
  });
};
export var FlowViewProvider = function FlowViewProvider(_ref2) {
  var children = _ref2.children;
  return /*#__PURE__*/_jsx(ReactFlowProvider, {
    children: /*#__PURE__*/_jsx(ProviderInner, {
      children: children
    })
  });
};