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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFlow = void 0;
require("antd/es/message/style");
var _message2 = _interopRequireDefault(require("antd/es/message"));
var _tslib = require("tslib");
var _react = require("react");
var _ahooks = require("ahooks");
var _react2 = require("@xyflow/react");
var _useStore = require("./useStore");
var _useTemporalStore2 = require("./useTemporalStore");
var _autoLayoutNodes = _interopRequireDefault(require("../utils/autoLayoutNodes"));
var _utils = require("../utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// useFlow 维护原则
// 1. 尽量复用 reactflow 已有的方法，不要重复造轮子
// 2. 非必要不暴露新的方法和状态
var useFlow = exports.useFlow = function useFlow() {
  var storeApi = (0, _useStore.useStoreApi)();
  var instance = storeApi.getState();
  var _useReactFlow = (0, _react2.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 = (0, _useTemporalStore2.useTemporalStore)(),
    record = _useTemporalStore.record;
  var toObject = (0, _ahooks.useMemoizedFn)(function () {
    var _a = _toObject(),
      nodes = _a.nodes,
      rest = (0, _tslib.__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 = (0, _ahooks.useMemoizedFn)(function (_nodes) {
    var nodes = _nodes || _getNodes();
    var result = nodes.map(function (item) {
      var data = item.data,
        rest = (0, _tslib.__rest)(item, ["data"]);
      var _nodeType = data._nodeType,
        restData = (0, _tslib.__rest)(data, ["_nodeType"]);
      return Object.assign(Object.assign({}, rest), {
        data: restData,
        type: _nodeType
      });
    });
    return result;
  });
  var setNodes = (0, _ahooks.useMemoizedFn)(function (nodes) {
    storeApi.getState().setNodes(nodes);
  });
  var addNodes = (0, _ahooks.useMemoizedFn)(function (nodes) {
    record(function () {
      storeApi.getState().addNodes(nodes);
    });
  });
  var setEdges = (0, _ahooks.useMemoizedFn)(function (edges) {
    storeApi.getState().setEdges(edges);
  });
  var addEdges = (0, _ahooks.useMemoizedFn)(function (edges) {
    storeApi.getState().addEdges(edges);
  });
  var copyNode = (0, _ahooks.useMemoizedFn)(function (nodeId) {
    var copyNodes = (0, _utils.generateCopyNodes)(storeApi.getState().nodes.find(function (node) {
      return node.id === nodeId;
    }));
    storeApi.setState({
      copyNodes: copyNodes
    });
  });
  var pasteNode = (0, _ahooks.useMemoizedFn)(function (nodeId, data) {
    if (storeApi.getState().copyNodes.length > 0) {
      var newEdges = Object.assign({
        id: (0, _utils.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 {
      _message2.default.warning('请先复制节点！');
    }
  });
  var deleteNode = (0, _ahooks.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 = (0, _ahooks.useMemoizedFn)(function () {
    var newNodes = (0, _autoLayoutNodes.default)(storeApi.getState().nodes, storeApi.getState().edges, storeApi.getState().layout);
    setNodes(newNodes);
  });
  return (0, _react.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]);
};