@ant-design/pro-flow/es/FlowView/hooks/useFlowView.js

A React based Flow components

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useCallback, useContext, useEffect } from 'react';
import { FlowViewContext } from "../provider/provider";
export var useFlowView = function useFlowView() {
  var _useContext = useContext(FlowViewContext),
    reactFlowInstance = _useContext.reactFlowInstance;
  return {
    reactFlowInstance: reactFlowInstance
  };
};
export var useMiniMap = function useMiniMap() {
  var _useContext2 = useContext(FlowViewContext),
    setPosition = _useContext2.setMiniMapPosition;
  var setMiniMapPosition = function setMiniMapPosition(x, y) {
    setPosition({
      x: x,
      y: y
    });
  };
  return {
    setMiniMapPosition: setMiniMapPosition
  };
};
export var useFlowViewer = function useFlowViewer() {
  var _useContext3 = useContext(FlowViewContext),
    updateSelectNode = _useContext3.updateSelectNode,
    updateSelectEdge = _useContext3.updateSelectEdge,
    updateSelectEdges = _useContext3.updateSelectEdges,
    updateSelectNodes = _useContext3.updateSelectNodes,
    setPosition = _useContext3.setMiniMapPosition,
    reactFlowInstance = _useContext3.reactFlowInstance,
    flowViewRef = _useContext3.flowViewRef;
  var getNode = useCallback(function (nodeId) {
    if (reactFlowInstance) {
      return reactFlowInstance.getNode(nodeId);
    }
  }, [reactFlowInstance]);
  var getNodes = useCallback(function () {
    if (reactFlowInstance) {
      return reactFlowInstance.getNodes();
    }
  }, [reactFlowInstance]);
  var zoomTo = useCallback(function (zoomNumber, duration) {
    if (reactFlowInstance) {
      reactFlowInstance.zoomTo(zoomNumber, {
        duration: duration
      });
    }
  }, [reactFlowInstance]);
  var zoomToNode = useCallback(function (nodeId, duration) {
    var node = getNode(nodeId);
    if (node && reactFlowInstance) {
      reactFlowInstance.fitView({
        nodes: [{
          id: nodeId
        }],
        duration: duration
      });
    }
  }, [getNode, reactFlowInstance]);
  var setMiniMapPosition = useCallback(function (x, y) {
    if (setPosition) {
      setPosition({
        x: x,
        y: y
      });
    }
  }, [setPosition]);
  var getViewport = useCallback(function () {
    if (reactFlowInstance) {
      return reactFlowInstance.getViewport();
    }
  }, [reactFlowInstance]);
  var setViewport = useCallback(function (viewport, duration) {
    if (reactFlowInstance) {
      return reactFlowInstance.setViewport(viewport, {
        duration: duration
      });
    }
  }, [reactFlowInstance]);
  var fitView = useCallback(function (duration) {
    if (reactFlowInstance) {
      return reactFlowInstance.fitView({
        duration: duration
      });
    }
  }, [reactFlowInstance]);
  var exitFullScreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          document.exitFullScreen();
        case 1:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })), []);
  var handleFullScreenChange = useCallback(function () {
    setTimeout(function () {
      fitView();
    }, 500);
  }, [fitView]);
  var fullScreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          (flowViewRef === null || flowViewRef === void 0 ? void 0 : flowViewRef.current).requestFullscreen().then(function () {
            handleFullScreenChange();
          }).catch(function (err) {
            console.error(err);
          });
        case 1:
        case "end":
          return _context2.stop();
      }
    }, _callee2);
  })), [handleFullScreenChange]);
  useEffect(function () {
    if (handleFullScreenChange) {
      document.addEventListener('fullscreenchange', handleFullScreenChange);
    }
  }, [handleFullScreenChange]);
  return {
    selectNode: updateSelectNode,
    selectEdge: updateSelectEdge,
    selectEdges: updateSelectEdges,
    selectNodes: updateSelectNodes,
    getNode: getNode,
    getNodes: getNodes,
    zoomTo: zoomTo,
    getViewport: getViewport,
    setViewport: setViewport,
    zoomToNode: zoomToNode,
    fitView: fitView,
    setMiniMapPosition: setMiniMapPosition,
    instance: reactFlowInstance,
    fullScreen: fullScreen,
    exitFullScreen: exitFullScreen
  };
};