@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
145 lines (144 loc) • 6.26 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/es/popover/style");
var _popover = _interopRequireDefault(require("antd/es/popover"));
require("antd/es/button/style");
var _button = _interopRequireDefault(require("antd/es/button"));
require("antd/es/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
var _react = require("@xyflow/react");
var _react2 = _interopRequireWildcard(require("react"));
var _IconView = _interopRequireDefault(require("../../components/IconView"));
var _utils = require("../../utils");
require("./index.css");
var _shortcutsName = _interopRequireDefault(require("./shortcuts-name"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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__*/_react2.default.createElement("div", {
className: 'fai-reactflow-zoom-select'
}, ZOOM_IN_OUT_OPTIONS.map(function (options, i) {
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, {
key: i
}, i !== 0 && /*#__PURE__*/_react2.default.createElement("div", {
className: 'parting-line'
}), /*#__PURE__*/_react2.default.createElement("div", {
className: 'p-1'
}, options.map(function (option) {
return /*#__PURE__*/_react2.default.createElement("div", {
className: 'zoom-item',
key: option.key,
onClick: function onClick() {
return handleZoom(option.key);
}
}, option.text, option.key === ZoomType.zoomToFit && (/*#__PURE__*/_react2.default.createElement(_shortcutsName.default, {
keys: ["".concat((0, _utils.getKeyboardKeyNameBySystem)('ctrl')), '1']
})), option.key === ZoomType.zoomTo50 && (/*#__PURE__*/_react2.default.createElement(_shortcutsName.default, {
keys: ['shift', '5']
})), option.key === ZoomType.zoomTo100 && (/*#__PURE__*/_react2.default.createElement(_shortcutsName.default, {
keys: ['shift', '1']
})));
})));
}));
};
var ZoomInOut = function ZoomInOut() {
var _useReactFlow = (0, _react.useReactFlow)(),
zoomIn = _useReactFlow.zoomIn,
zoomOut = _useReactFlow.zoomOut,
zoomTo = _useReactFlow.zoomTo,
fitView = _useReactFlow.fitView;
var _useViewport = (0, _react.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__*/_react2.default.createElement("div", {
className: 'fai-reactflow-zoominout'
}, /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
title: "\u653E\u5927",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react2.default.createElement(_button.default, {
type: 'text',
icon: /*#__PURE__*/_react2.default.createElement(_IconView.default, {
type: 'icon-zoom-out-line',
className: 'icon'
}),
onClick: function onClick(e) {
e.stopPropagation();
zoomOut();
}
})), /*#__PURE__*/_react2.default.createElement("div", {
style: {
fontSize: '13px',
fontWeight: 500,
padding: '0 2px',
textAlign: 'center',
width: '32px'
}
}, /*#__PURE__*/_react2.default.createElement(_popover.default, {
content: /*#__PURE__*/_react2.default.createElement(ZoomSelect, {
handleZoom: handleZoom
}),
zIndex: 1000,
trigger: 'click'
}, parseFloat("".concat(zoom * 100)).toFixed(0), "%")), /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
title: "\u7F29\u5C0F",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react2.default.createElement(_button.default, {
type: 'text',
icon: /*#__PURE__*/_react2.default.createElement(_IconView.default, {
type: 'icon-zoom-in-line',
className: 'icon'
}),
onClick: function onClick(e) {
e.stopPropagation();
zoomIn();
}
})));
};
var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(ZoomInOut);