@ant-design/pro-flow/es/MiniMap/index.js

A React based Flow components

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3;
import { ExpandOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Space, Tooltip, theme as antdTheme } from 'antd';
import { createStyles } from 'antd-style';
import React from 'react';
import { Flexbox } from 'react-layout-kit';
import { MiniMap as FlowMiniMap, useReactFlow, useViewport } from 'reactflow';
import { Language } from "../constants";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref, props) {
  var css = _ref.css,
    token = _ref.token;
  var x = props.x,
    y = props.y;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      bottom: ", "px;\n      right: ", "px;\n      z-index: 100;\n      transition: right 0.2s ease;\n\n      .actionBox {\n        width: 192px;\n        height: 38px;\n        display: flex;\n        justify-content: space-evenly;\n      }\n\n      .ant-btn-default:not(:disabled):not(.ant-btn-dangerous) {\n        border-color: ", ";\n      }\n    "])), y, x, token.colorBorder),
    visible: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: none;\n    "]))),
    minimap: css(_templateObject3 || (_templateObject3 = _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 actionTitle = _defineProperty(_defineProperty({}, Language.zh_CN, {
  zoomIn: '放大',
  zoomOut: '缩小',
  zoomFit: '自适应画布',
  zoomTo1: '缩放为 1:1',
  zoomTo2: '缩放为 2:1'
}), Language.en_US, {
  zoomIn: 'Zoom In',
  zoomOut: 'Zoom Out',
  zoomFit: 'Zoom Fit',
  zoomTo1: 'Zoom To 1:1',
  zoomTo2: 'Zoom To 2:1'
});
var MiniMap = function MiniMap(props) {
  var _props$visible = props.visible,
    visible = _props$visible === void 0 ? true : _props$visible,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    _props$position = props.position,
    position = _props$position === void 0 ? {
      x: 10,
      y: 10
    } : _props$position,
    _props$language = props.language,
    language = _props$language === void 0 ? Language.zh_CN : _props$language;
  var reactFlow = useReactFlow();
  var _useViewport = useViewport(),
    zoom = _useViewport.zoom;
  var _useStyles = useStyles(position),
    styles = _useStyles.styles,
    cx = _useStyles.cx,
    theme = _useStyles.theme;
  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: actionTitle[language].zoomOut,
    onClick: handleZoomOut
  }, {
    title: zoom === 1 ? actionTitle[language].zoomTo2 : actionTitle[language].zoomTo1,
    onClick: handleZoomTo,
    children: Math.round(zoom * 100) + '%',
    style: {
      width: 56
    }
  }, {
    icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
    title: actionTitle[language].zoomIn,
    onClick: handleZoomIn
  }, {
    icon: /*#__PURE__*/_jsx(ExpandOutlined, {}),
    title: actionTitle[language].zoomFit,
    onClick: handleZoomFit
  }];
  return /*#__PURE__*/_jsxs(Flexbox, {
    gap: 12,
    align: 'center',
    className: cx(styles.container, className, !visible && styles.visible),
    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, {
          className: "actionBox",
          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(FlowMiniMap, {
      className: styles.minimap,
      maskColor: theme.colorBgMask,
      nodeColor: function nodeColor(n) {
        if (n.data.color) return n.data.color;
        return theme.colorFill;
      }
    })]
  });
};
export default MiniMap;