@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,136 +1,136 @@
-import { useCallback } from 'react';
-import {
-  FunctionFormData,
-  FunctionParameter,
-  SaveFunctionParams,
-} from '../templates/node-forms/FunctionForm';
-import { useAddFunction } from '../contexts/DiagramProvider';
-
-type FunctionFormChanges = {
-  [K in keyof FunctionFormData]?: FunctionFormData[K];
-};
-
-interface UseFunctionFormCallbacksProps {
-  handleInputChange: (
-    field: keyof FunctionFormData,
-    value: string | FunctionParameter[],
-  ) => void;
-  handleMultipleInputChanges: (changes: FunctionFormChanges) => void;
-  setModalOpen: (open: boolean) => void;
-  setCreateModalOpen: (open: boolean) => void;
-}
-
-export const useFunctionFormCallbacks = ({
-  handleInputChange,
-  handleMultipleInputChanges,
-  setModalOpen,
-  setCreateModalOpen,
-}: UseFunctionFormCallbacksProps) => {
-  const addFunction = useAddFunction();
-
-  const handleModalClose = useCallback(() => {
-    setModalOpen(false);
-  }, [setModalOpen]);
-
-  const handleModalOpen = useCallback(() => {
-    setModalOpen(true);
-  }, [setModalOpen]);
-
-  const handleCreateModalClose = useCallback(() => {
-    setCreateModalOpen(false);
-  }, [setCreateModalOpen]);
-
-  const handleModeChange = useCallback(
-    (_: React.SyntheticEvent, newValue: string) => {
-      handleInputChange('mode', newValue);
-    },
-    [handleInputChange],
-  );
-
-  const handleNameChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      handleInputChange('name', e.target.value);
-    },
-    [handleInputChange],
-  );
-
-  const handleParametersChange = useCallback(
-    (parameters: FunctionParameter[]) => {
-      handleInputChange('parameters', parameters);
-    },
-    [handleInputChange],
-  );
-
-  const handleCustomCodeChange = useCallback(
-    (code: string) => {
-      handleInputChange('customCode', code);
-    },
-    [handleInputChange],
-  );
-
-  const handleCreate = useCallback(
-    (func: SaveFunctionParams) => {
-      const newId = Date.now().toString();
-      // Ensure args is an array of { name, type } objects
-      const parameters: FunctionParameter[] = func.args.map((arg) => ({
-        name: arg.name,
-        type: arg.type || 'number',
-      }));
-
-      addFunction({
-        id: newId,
-        name: func.name,
-        args: parameters,
-        code: func.code,
-      });
-
-      handleMultipleInputChanges({
-        name: func.name,
-        parameters,
-        customCode: func.code,
-      });
-
-      setCreateModalOpen(false);
-    },
-    [addFunction, handleMultipleInputChanges, setCreateModalOpen],
-  );
-
-  const handleSaveAsFunction = useCallback(
-    ({ name, args, code }: SaveFunctionParams) => {
-      const newId = Date.now().toString();
-      // Ensure args is an array of { name, type }
-      const parameters: FunctionParameter[] = args.map((arg) => ({
-        name: arg.name,
-        type: arg.type || 'number',
-      }));
-
-      addFunction({
-        id: newId,
-        name,
-        args: parameters,
-        code,
-      });
-
-      handleMultipleInputChanges({
-        name,
-        parameters,
-        customCode: code,
-      });
-
-      setModalOpen(false);
-    },
-    [addFunction, handleMultipleInputChanges, setModalOpen],
-  );
-
-  return {
-    handleModalClose,
-    handleModalOpen,
-    handleCreateModalClose,
-    handleModeChange,
-    handleNameChange,
-    handleParametersChange,
-    handleCustomCodeChange,
-    handleCreate,
-    handleSaveAsFunction,
-  };
-};
+import { useCallback } from 'react';
+import {
+  FunctionFormData,
+  FunctionParameter,
+  SaveFunctionParams,
+} from '../templates/node-forms/FunctionForm';
+import { useAddFunction } from '../contexts/DiagramProvider';
+
+type FunctionFormChanges = {
+  [K in keyof FunctionFormData]?: FunctionFormData[K];
+};
+
+interface UseFunctionFormCallbacksProps {
+  handleInputChange: (
+    field: keyof FunctionFormData,
+    value: string | FunctionParameter[],
+  ) => void;
+  handleMultipleInputChanges: (changes: FunctionFormChanges) => void;
+  setModalOpen: (open: boolean) => void;
+  setCreateModalOpen: (open: boolean) => void;
+}
+
+export const useFunctionFormCallbacks = ({
+  handleInputChange,
+  handleMultipleInputChanges,
+  setModalOpen,
+  setCreateModalOpen,
+}: UseFunctionFormCallbacksProps) => {
+  const addFunction = useAddFunction();
+
+  const handleModalClose = useCallback(() => {
+    setModalOpen(false);
+  }, [setModalOpen]);
+
+  const handleModalOpen = useCallback(() => {
+    setModalOpen(true);
+  }, [setModalOpen]);
+
+  const handleCreateModalClose = useCallback(() => {
+    setCreateModalOpen(false);
+  }, [setCreateModalOpen]);
+
+  const handleModeChange = useCallback(
+    (_: React.SyntheticEvent, newValue: string) => {
+      handleInputChange('mode', newValue);
+    },
+    [handleInputChange],
+  );
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      handleInputChange('name', e.target.value);
+    },
+    [handleInputChange],
+  );
+
+  const handleParametersChange = useCallback(
+    (parameters: FunctionParameter[]) => {
+      handleInputChange('parameters', parameters);
+    },
+    [handleInputChange],
+  );
+
+  const handleCustomCodeChange = useCallback(
+    (code: string) => {
+      handleInputChange('customCode', code);
+    },
+    [handleInputChange],
+  );
+
+  const handleCreate = useCallback(
+    (func: SaveFunctionParams) => {
+      const newId = Date.now().toString();
+      // Ensure args is an array of { name, type } objects
+      const parameters: FunctionParameter[] = func.args.map((arg) => ({
+        name: arg.name,
+        type: arg.type || 'number',
+      }));
+
+      addFunction({
+        id: newId,
+        name: func.name,
+        args: parameters,
+        code: func.code,
+      });
+
+      handleMultipleInputChanges({
+        name: func.name,
+        parameters,
+        customCode: func.code,
+      });
+
+      setCreateModalOpen(false);
+    },
+    [addFunction, handleMultipleInputChanges, setCreateModalOpen],
+  );
+
+  const handleSaveAsFunction = useCallback(
+    ({ name, args, code }: SaveFunctionParams) => {
+      const newId = Date.now().toString();
+      // Ensure args is an array of { name, type }
+      const parameters: FunctionParameter[] = args.map((arg) => ({
+        name: arg.name,
+        type: arg.type || 'number',
+      }));
+
+      addFunction({
+        id: newId,
+        name,
+        args: parameters,
+        code,
+      });
+
+      handleMultipleInputChanges({
+        name,
+        parameters,
+        customCode: code,
+      });
+
+      setModalOpen(false);
+    },
+    [addFunction, handleMultipleInputChanges, setModalOpen],
+  );
+
+  return {
+    handleModalClose,
+    handleModalOpen,
+    handleCreateModalClose,
+    handleModeChange,
+    handleNameChange,
+    handleParametersChange,
+    handleCustomCodeChange,
+    handleCreate,
+    handleSaveAsFunction,
+  };
+};

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

@@ -1,11 +1,11 @@
-import { useSelectedNode } from '../contexts/DiagramProvider';
-import { useNodeId } from '../contexts/CardDataProvider';
-
-const useIsSelectedNode = () => {
-  const id = useNodeId();
-  const selectedNode = useSelectedNode();
-
-  return id === selectedNode;
-};
-
-export default useIsSelectedNode;
+import { useSelectedNode } from '../contexts/DiagramProvider';
+import { useNodeId } from '../contexts/CardDataProvider';
+
+const useIsSelectedNode = () => {
+  const id = useNodeId();
+  const selectedNode = useSelectedNode();
+
+  return id === selectedNode;
+};
+
+export default useIsSelectedNode;

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

@@ -1,13 +1,13 @@
-// File: src/components/AddNodeAnchor/useAddNodeAnchor.ts
-import { useState } from 'react';
-
-export const useModalControls = () => {
-  const [open, setOpen] = useState(false);
-
-  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.persist();
-    setOpen(true);
-  };
-
-  return { open, onClick, setOpen };
-};
+// File: src/components/AddNodeAnchor/useAddNodeAnchor.ts
+import { useState } from 'react';
+
+export const useModalControls = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.persist();
+    setOpen(true);
+  };
+
+  return { open, onClick, setOpen };
+};

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

@@ -1,43 +1,43 @@
-import { useCallback, useRef } from 'react';
-import { Edge, useNodeId, Node } from '@xyflow/react';
-import { ICardNode } from '../types/card-node';
-import { useDiagramEdges, useDiagramNodes } from '../contexts/DiagramProvider';
-import { useSetDraggedCard } from '../contexts/CardDataProvider';
-import React from 'react';
-
-const useNodeDragHandlers = () => {
-  const nodeId = useNodeId();
-  const nodes = useDiagramNodes();
-  const edges = useDiagramEdges();
-  const setDraggedCard = useSetDraggedCard();
-  const dragData = useRef<{ nodes: ICardNode[]; edges: Edge[] } | null>(null);
-
-  const handleOnNodeDragStart = useCallback(
-    (_event: React.MouseEvent, node: Node) => {
-      const cardNode = node as ICardNode;
-      if (cardNode.id === nodeId) {
-        setDraggedCard(nodeId);
-        dragData.current = {
-          nodes: JSON.parse(JSON.stringify(nodes)),
-          edges: JSON.parse(JSON.stringify(edges)),
-        };
-      }
-    },
-    [nodeId, nodes, edges, setDraggedCard],
-  );
-
-  const handleOnNodeDragEnd = useCallback(
-    (_event: React.MouseEvent, node: Node) => {
-      const cardNode = node as ICardNode;
-      if (cardNode.id === nodeId) {
-        setDraggedCard(null);
-        dragData.current = null;
-      }
-    },
-    [nodeId, setDraggedCard],
-  );
-
-  return { handleOnNodeDragStart, handleOnNodeDragEnd };
-};
-
-export default useNodeDragHandlers;
+import { useCallback, useRef } from 'react';
+import { Edge, useNodeId, Node } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import { useDiagramEdges, useDiagramNodes } from '../contexts/DiagramProvider';
+import { useSetDraggedCard } from '../contexts/CardDataProvider';
+import React from 'react';
+
+const useNodeDragHandlers = () => {
+  const nodeId = useNodeId();
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const setDraggedCard = useSetDraggedCard();
+  const dragData = useRef<{ nodes: ICardNode[]; edges: Edge[] } | null>(null);
+
+  const handleOnNodeDragStart = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const cardNode = node as ICardNode;
+      if (cardNode.id === nodeId) {
+        setDraggedCard(nodeId);
+        dragData.current = {
+          nodes: JSON.parse(JSON.stringify(nodes)),
+          edges: JSON.parse(JSON.stringify(edges)),
+        };
+      }
+    },
+    [nodeId, nodes, edges, setDraggedCard],
+  );
+
+  const handleOnNodeDragEnd = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const cardNode = node as ICardNode;
+      if (cardNode.id === nodeId) {
+        setDraggedCard(null);
+        dragData.current = null;
+      }
+    },
+    [nodeId, setDraggedCard],
+  );
+
+  return { handleOnNodeDragStart, handleOnNodeDragEnd };
+};
+
+export default useNodeDragHandlers;

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

@@ -1,55 +1,55 @@
-import { useCallback } from 'react';
-import { useRegisterEvent, useTriggerEvent } from '../utils/event-hooks';
-import { useDiagram } from '../contexts/DiagramProvider';
-import { useCustomReactFlow } from './customUseReactFlow';
-import { useNodeId, useSetAddingBlock } from '../contexts/CardDataProvider';
-import { PaneMouseHandler } from '../utils/event-store';
-
-const useNodeSelection = () => {
-  const { register: registerPaneClick, unregister: unregisterPaneClick } =
-    useRegisterEvent('onPaneClick');
-  const setIsPannable = useDiagram((state) => state.setPannable);
-  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-  const onNodeSelectCallback = useDiagram((state) => state.onNodeSelect);
-  const setAddingBlock = useSetAddingBlock();
-  const currentNodeId = useNodeId();
-  const handleOpenToolbar = useTriggerEvent('onOpenToolbar');
-  const { getNodes } = useCustomReactFlow();
-
-  const onUnselect: PaneMouseHandler = useCallback(() => {
-    setSelectedNode(null);
-    setIsPannable(true);
-    setAddingBlock(false);
-    unregisterPaneClick();
-  }, [unregisterPaneClick, setAddingBlock, setSelectedNode, setIsPannable]);
-
-  const onSelect = useCallback(() => {
-    handleOpenToolbar();
-    setSelectedNode(currentNodeId);
-    registerPaneClick(onUnselect);
-    // Proactively emit selection (store also emits, but this helps when consumers use state directly)
-    try {
-      if (onNodeSelectCallback && currentNodeId) {
-        const node = getNodes().find((n) => n.id === currentNodeId);
-        onNodeSelectCallback({
-          nodeId: currentNodeId,
-          type: node?.type as any,
-          data: node?.data,
-        });
-      }
-    } catch {}
-  }, [
-    registerPaneClick,
-    handleOpenToolbar,
-    setSelectedNode,
-    setIsPannable,
-    onUnselect,
-    currentNodeId,
-    onNodeSelectCallback,
-    getNodes,
-  ]);
-
-  return { onSelect, onUnselect };
-};
-
-export default useNodeSelection;
+import { useCallback } from 'react';
+import { useRegisterEvent, useTriggerEvent } from '../utils/event-hooks';
+import { useDiagram } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from './customUseReactFlow';
+import { useNodeId, useSetAddingBlock } from '../contexts/CardDataProvider';
+import { PaneMouseHandler } from '../utils/event-store';
+
+const useNodeSelection = () => {
+  const { register: registerPaneClick, unregister: unregisterPaneClick } =
+    useRegisterEvent('onPaneClick');
+  const setIsPannable = useDiagram((state) => state.setPannable);
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const onNodeSelectCallback = useDiagram((state) => state.onNodeSelect);
+  const setAddingBlock = useSetAddingBlock();
+  const currentNodeId = useNodeId();
+  const handleOpenToolbar = useTriggerEvent('onOpenToolbar');
+  const { getNodes } = useCustomReactFlow();
+
+  const onUnselect: PaneMouseHandler = useCallback(() => {
+    setSelectedNode(null);
+    setIsPannable(true);
+    setAddingBlock(false);
+    unregisterPaneClick();
+  }, [unregisterPaneClick, setAddingBlock, setSelectedNode, setIsPannable]);
+
+  const onSelect = useCallback(() => {
+    handleOpenToolbar();
+    setSelectedNode(currentNodeId);
+    registerPaneClick(onUnselect);
+    // Proactively emit selection (store also emits, but this helps when consumers use state directly)
+    try {
+      if (onNodeSelectCallback && currentNodeId) {
+        const node = getNodes().find((n) => n.id === currentNodeId);
+        onNodeSelectCallback({
+          nodeId: currentNodeId,
+          type: node?.type as any,
+          data: node?.data,
+        });
+      }
+    } catch {}
+  }, [
+    registerPaneClick,
+    handleOpenToolbar,
+    setSelectedNode,
+    setIsPannable,
+    onUnselect,
+    currentNodeId,
+    onNodeSelectCallback,
+    getNodes,
+  ]);
+
+  return { onSelect, onUnselect };
+};
+
+export default useNodeSelection;

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

@@ -1,20 +1,20 @@
-import { useMemo } from 'react';
-import { getDividerLines } from '../utils/dividerUtils';
-
-export function useRenderDividers(params: {
-    verticalDividers?: number;
-    horizontalDividers?: number;
-    dividerThickness?: number;
-    dividerColor?: string;
-    width?: number;
-    height?: number;
-}) {
-    return useMemo(() => getDividerLines(params), [
-        params.verticalDividers,
-        params.horizontalDividers,
-        params.dividerThickness,
-        params.dividerColor,
-        params.width,
-        params.height,
-    ]);
+import { useMemo } from 'react';
+import { getDividerLines } from '../utils/dividerUtils';
+
+export function useRenderDividers(params: {
+    verticalDividers?: number;
+    horizontalDividers?: number;
+    dividerThickness?: number;
+    dividerColor?: string;
+    width?: number;
+    height?: number;
+}) {
+    return useMemo(() => getDividerLines(params), [
+        params.verticalDividers,
+        params.horizontalDividers,
+        params.dividerThickness,
+        params.dividerColor,
+        params.width,
+        params.height,
+    ]);
 }