@xrenders/xflow/es/hooks/useFlow.js

一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品

import "antd/es/message/style";
import _message from "antd/es/message";
import { __rest } from "tslib";
import { useMemo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { useReactFlow } from '@xyflow/react';
import { useStoreApi } from './useStore';
import { useTemporalStore } from './useTemporalStore';
import autoLayoutNodes from '../utils/autoLayoutNodes';
import { generateCopyNodes, uuid } from '../utils';
// useFlow 维护原则
// 1. 尽量复用 reactflow 已有的方法，不要重复造轮子
// 2. 非必要不暴露新的方法和状态
export var useFlow = function useFlow() {
  var storeApi = useStoreApi();
  var instance = storeApi.getState();
  var _useReactFlow = useReactFlow(),
    zoomIn = _useReactFlow.zoomIn,
    zoomOut = _useReactFlow.zoomOut,
    zoomTo = _useReactFlow.zoomTo,
    getZoom = _useReactFlow.getZoom,
    setViewport = _useReactFlow.setViewport,
    getViewport = _useReactFlow.getViewport,
    fitView = _useReactFlow.fitView,
    setCenter = _useReactFlow.setCenter,
    fitBounds = _useReactFlow.fitBounds,
    _toObject = _useReactFlow.toObject,
    _getNodes = _useReactFlow.getNodes,
    getEdges = _useReactFlow.getEdges,
    screenToFlowPosition = _useReactFlow.screenToFlowPosition,
    flowToScreenPosition = _useReactFlow.flowToScreenPosition;
  var _useTemporalStore = useTemporalStore(),
    record = _useTemporalStore.record;
  var toObject = useMemoizedFn(function () {
    var _a = _toObject(),
      nodes = _a.nodes,
      rest = __rest(_a, ["nodes"]);
    return Object.assign(Object.assign({}, rest), {
      nodes: getNodes(nodes)
    });
  });
  var getFlowData = function getFlowData() {
    var _toObject2 = _toObject(),
      nodes = _toObject2.nodes,
      edges = _toObject2.edges;
    return {
      edges: edges,
      nodes: getNodes(nodes)
    };
  };
  var setFlowData = function setFlowData(_ref) {
    var nodes = _ref.nodes,
      edges = _ref.edges;
    if (!!nodes) {
      setNodes(nodes);
    }
    if (!!edges) {
      setEdges(edges);
    }
  };
  var getNodes = useMemoizedFn(function (_nodes) {
    var nodes = _nodes || _getNodes();
    var result = nodes.map(function (item) {
      var data = item.data,
        rest = __rest(item, ["data"]);
      var _nodeType = data._nodeType,
        restData = __rest(data, ["_nodeType"]);
      return Object.assign(Object.assign({}, rest), {
        data: restData,
        type: _nodeType
      });
    });
    return result;
  });
  var setNodes = useMemoizedFn(function (nodes) {
    storeApi.getState().setNodes(nodes);
  });
  var addNodes = useMemoizedFn(function (nodes) {
    record(function () {
      storeApi.getState().addNodes(nodes);
    });
  });
  var setEdges = useMemoizedFn(function (edges) {
    storeApi.getState().setEdges(edges);
  });
  var addEdges = useMemoizedFn(function (edges) {
    storeApi.getState().addEdges(edges);
  });
  var copyNode = useMemoizedFn(function (nodeId) {
    var copyNodes = generateCopyNodes(storeApi.getState().nodes.find(function (node) {
      return node.id === nodeId;
    }));
    storeApi.setState({
      copyNodes: copyNodes
    });
  });
  var pasteNode = useMemoizedFn(function (nodeId, data) {
    if (storeApi.getState().copyNodes.length > 0) {
      var newEdges = Object.assign({
        id: uuid(),
        source: nodeId,
        target: storeApi.getState().copyNodes[0].id
      }, data);
      record(function () {
        storeApi.getState().addNodes(storeApi.getState().copyNodes, false);
      });
      storeApi.getState().addEdges(newEdges);
      storeApi.setState({
        copyNodes: []
      });
    } else {
      _message.warning('请先复制节点！');
    }
  });
  var deleteNode = useMemoizedFn(function (nodeId) {
    record(function () {
      storeApi.setState({
        edges: storeApi.getState().edges.filter(function (edge) {
          return edge.source !== nodeId && edge.target !== nodeId;
        })
      });
    });
    record(function () {
      storeApi.setState({
        nodes: storeApi.getState().nodes.filter(function (node) {
          return node.id !== nodeId;
        })
      });
    });
  });
  var runAutoLayout = useMemoizedFn(function () {
    var newNodes = autoLayoutNodes(storeApi.getState().nodes, storeApi.getState().edges, storeApi.getState().layout);
    setNodes(newNodes);
  });
  return useMemo(function () {
    return {
      setNodes: setNodes,
      addNodes: addNodes,
      setEdges: setEdges,
      addEdges: addEdges,
      getFlowData: getFlowData,
      setFlowData: setFlowData,
      getNodes: getNodes,
      getEdges: getEdges,
      toObject: toObject,
      zoomIn: zoomIn,
      zoomOut: zoomOut,
      zoomTo: zoomTo,
      getZoom: getZoom,
      setViewport: setViewport,
      getViewport: getViewport,
      fitView: fitView,
      setCenter: setCenter,
      fitBounds: fitBounds,
      screenToFlowPosition: screenToFlowPosition,
      flowToScreenPosition: flowToScreenPosition,
      runAutoLayout: runAutoLayout,
      copyNode: copyNode,
      pasteNode: pasteNode,
      deleteNode: deleteNode
    };
  }, [instance]);
};