@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
72 lines • 2.53 kB
JavaScript
import { useReactFlow, useViewport } from '@xyflow/react';
import { useEventListener } from 'ahooks';
import React, { memo } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import CustomNode from '../CustomNode';
import { useFlow } from '../../hooks/useFlow';
var CandidateNode = function CandidateNode() {
var _a;
var _useViewport = useViewport(),
zoom = _useViewport.zoom;
var reactflow = useReactFlow();
var _useStore = 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),
candidateNode = _useStore.candidateNode,
mousePosition = _useStore.mousePosition,
setIsAddingNode = _useStore.setIsAddingNode,
setCandidateNode = _useStore.setCandidateNode;
var _useFlow = useFlow(),
addNodes = _useFlow.addNodes;
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__*/React.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__*/React.createElement(CustomNode, Object.assign({}, candidateNode, {
type: (_a = candidateNode === null || candidateNode === void 0 ? void 0 : candidateNode.data) === null || _a === void 0 ? void 0 : _a._nodeType
})));
};
export default /*#__PURE__*/memo(CandidateNode);