@xrenders/xflow/es/operator/ZoomInOut/index.js

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

import "antd/es/popover/style";
import _Popover from "antd/es/popover";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import { useReactFlow, useViewport } from '@xyflow/react';
import React, { Fragment, memo } from 'react';
import IconView from '../../components/IconView';
import { getKeyboardKeyNameBySystem } from '../../utils';
import "./index.css";
import ShortcutsName from './shortcuts-name';
var ZoomType;
(function (ZoomType) {
  ZoomType["zoomIn"] = "zoomIn";
  ZoomType["zoomOut"] = "zoomOut";
  ZoomType["zoomToFit"] = "zoomToFit";
  ZoomType["zoomTo25"] = "zoomTo25";
  ZoomType["zoomTo50"] = "zoomTo50";
  ZoomType["zoomTo75"] = "zoomTo75";
  ZoomType["zoomTo100"] = "zoomTo100";
  ZoomType["zoomTo200"] = "zoomTo200";
})(ZoomType || (ZoomType = {}));
var ZOOM_IN_OUT_OPTIONS = [[{
  key: ZoomType.zoomTo200,
  text: '200%'
}, {
  key: ZoomType.zoomTo100,
  text: '100%'
}, {
  key: ZoomType.zoomTo75,
  text: '75%'
}, {
  key: ZoomType.zoomTo50,
  text: '50%'
}, {
  key: ZoomType.zoomTo25,
  text: '25%'
}], [{
  key: ZoomType.zoomToFit,
  text: '自适应视图'
}]];
var ZoomSelect = function ZoomSelect(_ref) {
  var handleZoom = _ref.handleZoom;
  return /*#__PURE__*/React.createElement("div", {
    className: 'fai-reactflow-zoom-select'
  }, ZOOM_IN_OUT_OPTIONS.map(function (options, i) {
    return /*#__PURE__*/React.createElement(Fragment, {
      key: i
    }, i !== 0 && /*#__PURE__*/React.createElement("div", {
      className: 'parting-line'
    }), /*#__PURE__*/React.createElement("div", {
      className: 'p-1'
    }, options.map(function (option) {
      return /*#__PURE__*/React.createElement("div", {
        className: 'zoom-item',
        key: option.key,
        onClick: function onClick() {
          return handleZoom(option.key);
        }
      }, option.text, option.key === ZoomType.zoomToFit && (/*#__PURE__*/React.createElement(ShortcutsName, {
        keys: ["".concat(getKeyboardKeyNameBySystem('ctrl')), '1']
      })), option.key === ZoomType.zoomTo50 && (/*#__PURE__*/React.createElement(ShortcutsName, {
        keys: ['shift', '5']
      })), option.key === ZoomType.zoomTo100 && (/*#__PURE__*/React.createElement(ShortcutsName, {
        keys: ['shift', '1']
      })));
    })));
  }));
};
var ZoomInOut = function ZoomInOut() {
  var _useReactFlow = useReactFlow(),
    zoomIn = _useReactFlow.zoomIn,
    zoomOut = _useReactFlow.zoomOut,
    zoomTo = _useReactFlow.zoomTo,
    fitView = _useReactFlow.fitView;
  var _useViewport = useViewport(),
    zoom = _useViewport.zoom;
  var handleZoom = function handleZoom(type) {
    if (type === ZoomType.zoomToFit) fitView();
    if (type === ZoomType.zoomTo25) zoomTo(0.25);
    if (type === ZoomType.zoomTo50) zoomTo(0.5);
    if (type === ZoomType.zoomTo75) zoomTo(0.75);
    if (type === ZoomType.zoomTo100) zoomTo(1);
    if (type === ZoomType.zoomTo200) zoomTo(2);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: 'fai-reactflow-zoominout'
  }, /*#__PURE__*/React.createElement(_Tooltip, {
    title: "\u653E\u5927",
    getPopupContainer: function getPopupContainer() {
      return document.getElementById('xflow-container');
    }
  }, /*#__PURE__*/React.createElement(_Button, {
    type: 'text',
    icon: /*#__PURE__*/React.createElement(IconView, {
      type: 'icon-zoom-out-line',
      className: 'icon'
    }),
    onClick: function onClick(e) {
      e.stopPropagation();
      zoomOut();
    }
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: '13px',
      fontWeight: 500,
      padding: '0 2px',
      textAlign: 'center',
      width: '32px'
    }
  }, /*#__PURE__*/React.createElement(_Popover, {
    content: /*#__PURE__*/React.createElement(ZoomSelect, {
      handleZoom: handleZoom
    }),
    zIndex: 1000,
    trigger: 'click'
  }, parseFloat("".concat(zoom * 100)).toFixed(0), "%")), /*#__PURE__*/React.createElement(_Tooltip, {
    title: "\u7F29\u5C0F",
    getPopupContainer: function getPopupContainer() {
      return document.getElementById('xflow-container');
    }
  }, /*#__PURE__*/React.createElement(_Button, {
    type: 'text',
    icon: /*#__PURE__*/React.createElement(IconView, {
      type: 'icon-zoom-in-line',
      className: 'icon'
    }),
    onClick: function onClick(e) {
      e.stopPropagation();
      zoomIn();
    }
  })));
};
export default /*#__PURE__*/memo(ZoomInOut);