Refactor: Group with shortcut and click should call The same function, it shouldnt use it directly

This commit is contained in:
igorrCarvalho 2024-03-21 13:58:13 -03:00
commit 2c6d9ee520

View file

@ -94,16 +94,7 @@ export default function Page({
const [lastSelection, setLastSelection] = const [lastSelection, setLastSelection] =
useState<OnSelectionChangeParams | null>(null); useState<OnSelectionChangeParams | null>(null);
const setNode = useFlowStore((state) => state.setNode); function handleGroupNode() {
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if (
selectionMenuVisible &&
(event.ctrlKey || event.metaKey) &&
event.key === "g"
) {
event.preventDefault();
takeSnapshot(); takeSnapshot();
if (validateSelection(lastSelection!, edges).length === 0) { if (validateSelection(lastSelection!, edges).length === 0) {
const clonedNodes = cloneDeep(nodes); const clonedNodes = cloneDeep(nodes);
@ -148,6 +139,19 @@ export default function Page({
}); });
} }
} }
const setNode = useFlowStore((state) => state.setNode);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if (
selectionMenuVisible &&
(event.ctrlKey || event.metaKey) &&
event.key === "g"
) {
event.preventDefault();
handleGroupNode();
}
if ( if (
(event.ctrlKey || event.metaKey) && (event.ctrlKey || event.metaKey) &&
event.key === "p" && event.key === "p" &&
@ -484,58 +488,7 @@ export default function Page({
isVisible={selectionMenuVisible} isVisible={selectionMenuVisible}
nodes={lastSelection?.nodes} nodes={lastSelection?.nodes}
onClick={() => { onClick={() => {
takeSnapshot(); handleGroupNode()
if (
validateSelection(lastSelection!, edges).length === 0
) {
const clonedNodes = cloneDeep(nodes);
const clonedEdges = cloneDeep(edges);
const clonedSelection = cloneDeep(lastSelection);
updateIds(
{ nodes: clonedNodes, edges: clonedEdges },
clonedSelection!
);
const { newFlow, removedEdges } = generateFlow(
clonedSelection!,
clonedNodes,
clonedEdges,
getRandomName()
);
const newGroupNode = generateNodeFromFlow(
newFlow,
getNodeId
);
const newEdges = reconnectEdges(
newGroupNode,
removedEdges
);
setNodes([
...clonedNodes.filter(
(oldNodes) =>
!clonedSelection?.nodes.some(
(selectionNode) =>
selectionNode.id === oldNodes.id
)
),
newGroupNode,
]);
setEdges([
...clonedEdges.filter(
(oldEdge) =>
!clonedSelection!.nodes.some(
(selectionNode) =>
selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source
)
),
...newEdges,
]);
} else {
setErrorData({
title: INVALID_SELECTION_ERROR_ALERT,
list: validateSelection(lastSelection!, edges),
});
}
}} }}
/> />
</ReactFlow> </ReactFlow>