@ant-design/pro-flow/es/FlowEditor/features/ControlAction/index.js

A React based Flow components

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2;
import { ExpandOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Space, Tooltip, theme as antdTheme } from 'antd';
import { createStyles } from 'antd-style';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { MiniMap, useReactFlow, useViewport } from 'reactflow';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var useStyles = createStyles(function (_ref) {
  var css = _ref.css,
    token = _ref.token;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    right: 10px;\n    bottom: 10px;\n\n    .ant-btn-default:not(:disabled):not(.ant-btn-dangerous) {\n      border-color: ", ";\n    }\n  "])), token.colorBorder),
    minimap: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative !important;\n    right: 0;\n    bottom: 0;\n\n    overflow: hidden;\n\n    height: 150px;\n    margin: 0;\n\n    background: ", ";\n    border-radius: 4px;\n  "])), token.colorBgContainer)
  };
});
var ControlAction = /*#__PURE__*/memo(function (_ref2) {
  var zoom = _ref2.zoom;
  var _useStyles = useStyles(),
    styles = _useStyles.styles,
    theme = _useStyles.theme;
  var reactFlow = useReactFlow();
  var handleZoomIn = function handleZoomIn() {
    reactFlow.zoomIn();
  };
  var handleZoomOut = function handleZoomOut() {
    reactFlow.zoomOut();
  };
  var handleZoomFit = function handleZoomFit() {
    reactFlow.fitView();
  };
  var handleZoomTo = function handleZoomTo() {
    if (zoom === 1) {
      reactFlow.zoomTo(0.5);
    } else {
      reactFlow.zoomTo(1);
    }
  };
  var actions = [{
    icon: /*#__PURE__*/_jsx(MinusOutlined, {}),
    title: '缩小',
    onClick: handleZoomOut
  }, {
    title: zoom === 1 ? '缩放为 2:1' : '缩放为 1:1',
    onClick: handleZoomTo,
    children: Math.round(zoom * 100) + '%',
    style: {
      width: 56
    }
  }, {
    icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
    title: '放大',
    onClick: handleZoomIn
  }, {
    icon: /*#__PURE__*/_jsx(ExpandOutlined, {}),
    title: '自适应画布',
    onClick: handleZoomFit
  }];
  return /*#__PURE__*/_jsxs(Flexbox, {
    gap: 12,
    align: 'center',
    className: styles.container,
    children: [/*#__PURE__*/_jsx(ConfigProvider, {
      theme: {
        algorithm: [theme.isDarkMode ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm, antdTheme.compactAlgorithm]
      },
      children: /*#__PURE__*/_jsx(Flexbox, {
        horizontal: true,
        align: 'center',
        children: /*#__PURE__*/_jsx(Space, {
          children: actions.map(function (action, index) {
            return /*#__PURE__*/_jsx(Tooltip, {
              arrow: false,
              title: action.title,
              children: /*#__PURE__*/_jsx(Button, {
                onClick: action.onClick,
                icon: action.icon,
                style: action.style,
                children: action.children
              })
            }, index);
          })
        })
      })
    }), /*#__PURE__*/_jsx(MiniMap, {
      className: styles.minimap,
      maskColor: theme.colorBgMask,
      nodeColor: function nodeColor(n) {
        if (n.data.color) return n.data.color;
        return theme.colorFill;
      }
    })]
  });
});
export default /*#__PURE__*/memo(function () {
  var _useViewport = useViewport(),
    zoom = _useViewport.zoom;
  return /*#__PURE__*/_jsx(ControlAction, {
    zoom: zoom
  });
});