@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/hooks/useDeleteNodeByEvent.ts

@@ -1,64 +1,64 @@
-import { useCallback } from 'react';
-import { useDiagram } from '../contexts/DiagramProvider';
-import { useCustomReactFlow } from './customUseReactFlow';
-
-/**
- * A hook to handle node deletion when the Delete key is pressed.
- * @param nodeId - The ID of the node to delete.
- * @returns A callback function to handle keydown events.
- */
-const useDeleteNodeByEvent = (nodeId: string) => {
-  const { getNodes, setNodes, setEdges } = useCustomReactFlow();
-  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-
-  const handleKeyEvents = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Delete' && nodeId) {
-        // Get all nodes to find parent-child relationships
-        const allNodes = getNodes();
-        const nodesToDelete = new Set<string>();
-
-        // Recursively find all child nodes that should be deleted along with their parents
-        const findChildNodes = (parentId: string) => {
-          const children = allNodes.filter(
-            (node) => node.parentId === parentId,
-          );
-          children.forEach((child) => {
-            if (!nodesToDelete.has(child.id)) {
-              nodesToDelete.add(child.id);
-              findChildNodes(child.id); // Recursively find grandchildren
-            }
-          });
-        };
-
-        // Add the main node to delete
-        nodesToDelete.add(nodeId);
-
-        // Find children for the node to delete
-        findChildNodes(nodeId);
-
-        // Delete all nodes at once - this will trigger onNodesChange properly
-        setNodes((currentNodes) =>
-          currentNodes.filter((node) => !nodesToDelete.has(node.id)),
-        );
-
-        // Delete associated edges
-        setEdges((prevEdges) =>
-          prevEdges.filter(
-            (edge) =>
-              !nodesToDelete.has(edge.source) &&
-              !nodesToDelete.has(edge.target),
-          ),
-        );
-
-        // Clear the selected node
-        setSelectedNode(null);
-      }
-    },
-    [nodeId, getNodes, setNodes, setEdges, setSelectedNode],
-  );
-
-  return handleKeyEvents;
-};
-
-export default useDeleteNodeByEvent;
+import { useCallback } from 'react';
+import { useDiagram } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from './customUseReactFlow';
+
+/**
+ * A hook to handle node deletion when the Delete key is pressed.
+ * @param nodeId - The ID of the node to delete.
+ * @returns A callback function to handle keydown events.
+ */
+const useDeleteNodeByEvent = (nodeId: string) => {
+  const { getNodes, setNodes, setEdges } = useCustomReactFlow();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+
+  const handleKeyEvents = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Delete' && nodeId) {
+        // Get all nodes to find parent-child relationships
+        const allNodes = getNodes();
+        const nodesToDelete = new Set<string>();
+
+        // Recursively find all child nodes that should be deleted along with their parents
+        const findChildNodes = (parentId: string) => {
+          const children = allNodes.filter(
+            (node) => node.parentId === parentId,
+          );
+          children.forEach((child) => {
+            if (!nodesToDelete.has(child.id)) {
+              nodesToDelete.add(child.id);
+              findChildNodes(child.id); // Recursively find grandchildren
+            }
+          });
+        };
+
+        // Add the main node to delete
+        nodesToDelete.add(nodeId);
+
+        // Find children for the node to delete
+        findChildNodes(nodeId);
+
+        // Delete all nodes at once - this will trigger onNodesChange properly
+        setNodes((currentNodes) =>
+          currentNodes.filter((node) => !nodesToDelete.has(node.id)),
+        );
+
+        // Delete associated edges
+        setEdges((prevEdges) =>
+          prevEdges.filter(
+            (edge) =>
+              !nodesToDelete.has(edge.source) &&
+              !nodesToDelete.has(edge.target),
+          ),
+        );
+
+        // Clear the selected node
+        setSelectedNode(null);
+      }
+    },
+    [nodeId, getNodes, setNodes, setEdges, setSelectedNode],
+  );
+
+  return handleKeyEvents;
+};
+
+export default useDeleteNodeByEvent;

package/packages/diagrams/src/lib/hooks/useDragCallbacks.tsx

@@ -1,122 +1,122 @@
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import { useReactFlow } from '@xyflow/react';
-import { IBlock, ICardNode, ICardNodeData } from '../types/card-node';
-
-interface UseDragCallbacksProps {
-  setActiveItem: Dispatch<SetStateAction<IBlock | null>>;
-  setActiveCard: (card: ICardNodeData | null) => void;
-}
-
-export default function useDragCallbacks({
-  setActiveItem,
-  setActiveCard,
-}: UseDragCallbacksProps) {
-  const rf = useReactFlow<ICardNode>();
-
-  const onDragStart = useCallback(
-    (e: DragStartEvent) => {
-      setActiveItem(e.active.data.current?.blockData ?? null);
-      setActiveCard(e.active.data.current?.cardData ?? null);
-    },
-    [setActiveItem, setActiveCard],
-  );
-
-  const onDragCancel = useCallback(() => {
-    setActiveItem(null);
-    setActiveCard(null);
-  }, [setActiveItem, setActiveCard]);
-
-  const onDragEnd = useCallback(
-    (e: DragEndEvent) => {
-      if (!e.active.data.current) {
-        return;
-      }
-
-      if (e.over?.data.current?.sortable) {
-        // It is a sort
-        const node = rf.getNode(e.over.data.current.nodeId)!;
-        const items = node.data.blocks ?? [];
-        const oldIndex = items.findIndex((blk) => blk.id === e.active.id);
-        const newIndex = items.findIndex((blk) => blk.id === e.over?.id);
-        const newItems = arrayMove(items, oldIndex, newIndex);
-
-        rf.setNodes(
-          rf.getNodes().map((n) => {
-            if (n.id === node.id) {
-              n.data = {
-                ...n.data,
-                blocks: newItems,
-              };
-              return n;
-            }
-            return n;
-          }),
-        );
-      } else if (e?.over?.id.toString().includes('node-')) {
-        // Dropped on node
-        const id = e.over.id.toString().split('-')[1];
-        const blockId: string = e.active.id.toString();
-        const currentBlockNodeId = e.active.data.current.nodeId;
-        rf.setNodes(
-          rf.getNodes().map((node) => {
-            if (node.id === id && currentBlockNodeId !== id) {
-              const newid = new Date().getMilliseconds().toString();
-              const blockToAdd = e.active.data.current?.blockData ?? [
-                {
-                  id: newid,
-                  color: 'red',
-                  title: 'Dropped',
-                },
-              ];
-
-              node.data = {
-                ...node.data,
-                blocks: node.data.blocks?.concat(blockToAdd),
-              };
-              return node;
-            }
-            if (node.id === currentBlockNodeId && currentBlockNodeId !== id) {
-              node.data = {
-                ...node.data,
-                blocks: node.data.blocks?.filter((el) => el.id !== blockId),
-              };
-              return node;
-            }
-            return node;
-          }),
-        );
-      } else if (!e.active.data.current.blockData) {
-        // Dropped on Canvas
-        const ev = e.activatorEvent as PointerEvent;
-        const id = new Date().getMilliseconds().toString();
-        const newNode: ICardNode = {
-          data: {
-            blocks: [],
-            color: 'green',
-            isPinned: false,
-            isBlock: false,
-            nodeId: id,
-            parentId: 'parentId',
-            title: 'Text',
-            ...e.active.data.current?.data,
-          },
-          id,
-          type: e.active.data.current?.type ?? 'card',
-          position: rf.screenToFlowPosition({
-            x: ev.clientX + e.delta.x,
-            y: ev.clientY + e.delta.y,
-          }),
-        };
-        rf.addNodes(newNode);
-      }
-
-      setActiveItem(null);
-      setActiveCard(null);
-    },
-    [rf, setActiveCard, setActiveItem],
-  );
-
-  return { onDragEnd, onDragStart, onDragCancel };
-}
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useReactFlow } from '@xyflow/react';
+import { IBlock, ICardNode, ICardNodeData } from '../types/card-node';
+
+interface UseDragCallbacksProps {
+  setActiveItem: Dispatch<SetStateAction<IBlock | null>>;
+  setActiveCard: (card: ICardNodeData | null) => void;
+}
+
+export default function useDragCallbacks({
+  setActiveItem,
+  setActiveCard,
+}: UseDragCallbacksProps) {
+  const rf = useReactFlow<ICardNode>();
+
+  const onDragStart = useCallback(
+    (e: DragStartEvent) => {
+      setActiveItem(e.active.data.current?.blockData ?? null);
+      setActiveCard(e.active.data.current?.cardData ?? null);
+    },
+    [setActiveItem, setActiveCard],
+  );
+
+  const onDragCancel = useCallback(() => {
+    setActiveItem(null);
+    setActiveCard(null);
+  }, [setActiveItem, setActiveCard]);
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      if (!e.active.data.current) {
+        return;
+      }
+
+      if (e.over?.data.current?.sortable) {
+        // It is a sort
+        const node = rf.getNode(e.over.data.current.nodeId)!;
+        const items = node.data.blocks ?? [];
+        const oldIndex = items.findIndex((blk) => blk.id === e.active.id);
+        const newIndex = items.findIndex((blk) => blk.id === e.over?.id);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+
+        rf.setNodes(
+          rf.getNodes().map((n) => {
+            if (n.id === node.id) {
+              n.data = {
+                ...n.data,
+                blocks: newItems,
+              };
+              return n;
+            }
+            return n;
+          }),
+        );
+      } else if (e?.over?.id.toString().includes('node-')) {
+        // Dropped on node
+        const id = e.over.id.toString().split('-')[1];
+        const blockId: string = e.active.id.toString();
+        const currentBlockNodeId = e.active.data.current.nodeId;
+        rf.setNodes(
+          rf.getNodes().map((node) => {
+            if (node.id === id && currentBlockNodeId !== id) {
+              const newid = new Date().getMilliseconds().toString();
+              const blockToAdd = e.active.data.current?.blockData ?? [
+                {
+                  id: newid,
+                  color: 'red',
+                  title: 'Dropped',
+                },
+              ];
+
+              node.data = {
+                ...node.data,
+                blocks: node.data.blocks?.concat(blockToAdd),
+              };
+              return node;
+            }
+            if (node.id === currentBlockNodeId && currentBlockNodeId !== id) {
+              node.data = {
+                ...node.data,
+                blocks: node.data.blocks?.filter((el) => el.id !== blockId),
+              };
+              return node;
+            }
+            return node;
+          }),
+        );
+      } else if (!e.active.data.current.blockData) {
+        // Dropped on Canvas
+        const ev = e.activatorEvent as PointerEvent;
+        const id = new Date().getMilliseconds().toString();
+        const newNode: ICardNode = {
+          data: {
+            blocks: [],
+            color: 'green',
+            isPinned: false,
+            isBlock: false,
+            nodeId: id,
+            parentId: 'parentId',
+            title: 'Text',
+            ...e.active.data.current?.data,
+          },
+          id,
+          type: e.active.data.current?.type ?? 'card',
+          position: rf.screenToFlowPosition({
+            x: ev.clientX + e.delta.x,
+            y: ev.clientY + e.delta.y,
+          }),
+        };
+        rf.addNodes(newNode);
+      }
+
+      setActiveItem(null);
+      setActiveCard(null);
+    },
+    [rf, setActiveCard, setActiveItem],
+  );
+
+  return { onDragEnd, onDragStart, onDragCancel };
+}