@ant-design/pro-flow/es/FlowEditor/container/StoreUpdater/index.js

A React based Flow components

import isEqual from 'fast-deep-equal';
import { useReactFlow } from 'reactflow';
import { createStoreUpdater } from 'zustand-utils';
import { useStoreApi } from "../../store";
import CommonStoreUpdater from "./Common";
import { jsx as _jsx } from "react/jsx-runtime";
var StoreUpdater = function StoreUpdater(_ref) {
  var flattenNodes = _ref.flattenNodes,
    onFlattenNodesChange = _ref.onFlattenNodesChange,
    onNodesChange = _ref.onNodesChange,
    beforeNodesChange = _ref.beforeNodesChange,
    afterNodesChange = _ref.afterNodesChange,
    flattenEdges = _ref.flattenEdges,
    onEdgesChange = _ref.onEdgesChange,
    beforeEdgesChange = _ref.beforeEdgesChange,
    afterEdgesChange = _ref.afterEdgesChange,
    onFlattenEdgesChange = _ref.onFlattenEdgesChange,
    onNodesTreeChange = _ref.onNodesTreeChange,
    onViewPortChange = _ref.onViewPortChange,
    editorRef = _ref.editorRef;
  var useStoreUpdater = createStoreUpdater(useStoreApi());

  // 由于这是一个受控的组件，因此需要将外部的状态同步到内部来，由于 yjs 的状态是要独立维护的，因此抽取了一个复用函数
  var storeApi = useStoreApi();

  // 结合 yjs 进行变更
  var useUpdateWithYjs = function useUpdateWithYjs(key, value) {
    useStoreUpdater(key, value, [value], function (partialNewState) {
      // 如果相等，不需要更新
      if (isEqual(value, storeApi.getState()[key])) return;
      storeApi.setState(partialNewState);
      var _storeApi$getState = storeApi.getState(),
        yjsDoc = _storeApi$getState.yjsDoc;
      yjsDoc.updateHistoryData(partialNewState);
    });
  };

  // 需要使用 Flow 部分的变更
  var reactFlow = useReactFlow();
  useStoreUpdater('reactflow', reactFlow);
  useStoreUpdater('onViewPortChange', onViewPortChange);
  return /*#__PURE__*/_jsx(CommonStoreUpdater, {
    flattenNodes: flattenNodes,
    flattenEdges: flattenEdges,
    editorRef: editorRef,
    onEdgesChange: onEdgesChange,
    onNodesChange: onNodesChange,
    beforeNodesChange: beforeNodesChange,
    beforeEdgesChange: beforeEdgesChange,
    afterEdgesChange: afterEdgesChange,
    afterNodesChange: afterNodesChange,
    onNodesTreeChange: onNodesTreeChange,
    onFlattenEdgesChange: onFlattenEdgesChange,
    onFlattenNodesChange: onFlattenNodesChange,
    useStateUpdater: useUpdateWithYjs
  });
};
export default StoreUpdater;