@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
82 lines (81 loc) • 4.01 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;
var _react = require("@xyflow/react");
var _ahooks = require("ahooks");
var _react2 = _interopRequireWildcard(require("react"));
var _shallow = require("zustand/shallow");
var _useStore2 = require("../../hooks/useStore");
var _CustomNode = _interopRequireDefault(require("../CustomNode"));
var _useFlow2 = require("../../hooks/useFlow");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
var CandidateNode = function CandidateNode() {
var _a;
var _useViewport = (0, _react.useViewport)(),
zoom = _useViewport.zoom;
var reactflow = (0, _react.useReactFlow)();
var _useStore = (0, _useStore2.useStore)(function (s) {
return {
nodes: s.nodes,
edges: s.edges,
candidateNode: s.candidateNode,
setIsAddingNode: s.setIsAddingNode,
mousePosition: s.mousePosition,
setCandidateNode: s.setCandidateNode,
onNodesChange: s.onNodesChange,
onEdgesChange: s.onEdgesChange
};
}, _shallow.shallow),
candidateNode = _useStore.candidateNode,
mousePosition = _useStore.mousePosition,
setIsAddingNode = _useStore.setIsAddingNode,
setCandidateNode = _useStore.setCandidateNode;
var _useFlow = (0, _useFlow2.useFlow)(),
addNodes = _useFlow.addNodes;
(0, _ahooks.useEventListener)('click', function (ev) {
if (!candidateNode) {
return;
}
ev.preventDefault();
var screenToFlowPosition = reactflow.screenToFlowPosition;
var _screenToFlowPosition = screenToFlowPosition({
x: mousePosition.pageX,
y: mousePosition.pageY
}),
x = _screenToFlowPosition.x,
y = _screenToFlowPosition.y;
var newNodes = Object.assign(Object.assign({}, candidateNode), {
data: Object.assign(Object.assign({}, candidateNode.data), {
_isCandidate: false
}),
position: {
x: x,
y: y
}
});
addNodes(newNodes);
setIsAddingNode(false);
setCandidateNode(null);
});
if (!candidateNode) {
return null;
}
return /*#__PURE__*/_react2.default.createElement("div", {
style: {
left: mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.elementX,
top: mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.elementY,
transform: "scale(".concat(zoom, ")"),
transformOrigin: '0 0',
position: 'absolute',
zIndex: 10000
}
}, /*#__PURE__*/_react2.default.createElement(_CustomNode.default, Object.assign({}, candidateNode, {
type: (_a = candidateNode === null || candidateNode === void 0 ? void 0 : candidateNode.data) === null || _a === void 0 ? void 0 : _a._nodeType
})));
};
var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(CandidateNode);