@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
174 lines (173 loc) • 10.1 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/button/style");
var _button = _interopRequireDefault(require("antd/es/button"));
require("antd/es/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
var _react = _interopRequireWildcard(require("react"));
var _IconView = _interopRequireDefault(require("../../components/IconView"));
var _NodesPopover = _interopRequireDefault(require("../../components/NodesPopover"));
var _useStore2 = require("../../hooks/useStore");
var _context = require("../../models/context");
var _eventEmitter = require("../../models/event-emitter");
var _ahooks = require("ahooks");
require("./index.css");
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 }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var Control = function Control(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
var addNode = props.addNode,
xflowRef = props.xflowRef;
var _useFullscreen = (0, _ahooks.useFullscreen)(xflowRef),
_useFullscreen2 = _slicedToArray(_useFullscreen, 2),
isFullscreen = _useFullscreen2[0],
toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
var _useContext = (0, _react.useContext)(_context.ConfigContext),
globalConfig = _useContext.globalConfig,
readOnly = _useContext.readOnly;
var hideAddNode = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.controls) === null || _a === void 0 ? void 0 : _a.hideAddNode) !== null && _b !== void 0 ? _b : false;
var hideAnnotate = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.controls) === null || _c === void 0 ? void 0 : _c.hideAnnotate) !== null && _d !== void 0 ? _d : false;
var hideAutoLayout = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.controls) === null || _e === void 0 ? void 0 : _e.hideAutoLayout) !== null && _f !== void 0 ? _f : false;
var hideFullscreen = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.controls) === null || _g === void 0 ? void 0 : _g.hideFullscreen) !== null && _h !== void 0 ? _h : false;
var hideInteractionMode = (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.controls) === null || _j === void 0 ? void 0 : _j.hideInteractionMode) !== null && _k !== void 0 ? _k : false;
var _useStore = (0, _useStore2.useStore)(function (s) {
return {
setIsAddingNode: s.setIsAddingNode,
panOnDrag: s.panOnDrag
};
}),
setIsAddingNode = _useStore.setIsAddingNode,
panOnDrag = _useStore.panOnDrag;
var addNote = function addNote(e) {
e.stopPropagation();
setIsAddingNode(true);
addNode({
_nodeType: 'Note'
});
};
var storeApi = (0, _useStore2.useStoreApi)();
var _useEventEmitterConte = (0, _eventEmitter.useEventEmitterContextContext)(),
eventEmitter = _useEventEmitterConte.eventEmitter;
var handleInteractionModeChange = function handleInteractionModeChange(panOnDrag) {
storeApi.setState({
panOnDrag: panOnDrag
});
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "fai-reactflow-control"
}, !hideAddNode && !readOnly && (/*#__PURE__*/_react.default.createElement(_NodesPopover.default, {
addNode: addNode
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u6DFB\u52A0\u8282\u70B9",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: "icon-add-circle",
className: "icon"
})
})))), !hideAnnotate && !readOnly && (/*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u6DFB\u52A0\u6CE8\u91CA",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: "icon-sticky-note-add-line",
className: "icon"
}),
onClick: addNote
}))), !(hideAddNode && hideAnnotate) && !hideInteractionMode && !readOnly && (/*#__PURE__*/_react.default.createElement("div", {
className: "separator"
})), !hideInteractionMode && (/*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u6307\u9488\u6A21\u5F0F",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: "icon-zhizhen",
className: "icon",
style: {
color: !panOnDrag ? 'rgb(21,94,239)' : '#666F83',
fontSize: '14px'
}
}),
onClick: function onClick() {
return panOnDrag && handleInteractionModeChange(false);
},
style: {
backgroundColor: !panOnDrag ? 'rgb(239,244,255)' : ''
}
}))), !hideInteractionMode && (/*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u624B\u6A21\u5F0F",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: "icon-xianxingshouzhangtubiao",
className: "icon",
style: {
color: panOnDrag ? 'rgb(21,94,239)' : '#666F83'
}
}),
onClick: function onClick() {
return !panOnDrag && handleInteractionModeChange(true);
},
style: {
backgroundColor: panOnDrag ? 'rgb(239,244,255)' : '',
marginLeft: '1px'
}
}))), (!hideAutoLayout || !hideFullscreen) && (!hideInteractionMode || !hideAddNode || !hideAnnotate) && !readOnly && (/*#__PURE__*/_react.default.createElement("div", {
className: "separator"
})), !hideAutoLayout && (/*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u6574\u7406\u753B\u5E03",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: "icon-function-add-line1",
className: "icon"
}),
onClick: function onClick() {
eventEmitter === null || eventEmitter === void 0 ? void 0 : eventEmitter.emit({
type: 'auto-layout-nodes'
});
}
}))), !hideFullscreen && (/*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u753B\u5E03\u5168\u5C4F",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: "text",
icon: /*#__PURE__*/_react.default.createElement(_IconView.default, {
type: isFullscreen ? 'icon-fullscreen-exit' : 'icon-fullscreen',
className: "icon",
style: {
fontSize: '14px'
}
}),
onClick: toggleFullscreen
}))));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Control);