@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/utils/elkLayout.ts

@@ -0,0 +1,297 @@
+import ELK, { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
+import { useCallback, useMemo, useRef } from 'react';
+import { Node } from '@xyflow/react';
+import constantLengths from './constant-lengths';
+import {
+  useContentHeights,
+  useDiagram,
+  useDiagramEdges,
+  useDiagramNodes,
+  useLayoutDirection,
+} from '../contexts/DiagramProvider';
+import { ICardNode, ICardNodeData } from '../types/card-node';
+
+// Create ELK instance once outside components
+const elk = new ELK();
+
+// Extended ElkNode type with parentId for hierarchical layouts
+type ElkNodeWithParent = ElkNode & {
+  parentId?: string;
+};
+
+const getLayoutConfig = (direction: 'DOWN' | 'RIGHT') => ({
+  'elk.algorithm': 'layered',
+  'elk.direction': direction,
+  'elk.padding': '[top=200,left=25,bottom=25,right=25]',
+  'elk.alignment': 'CENTER',
+
+  // Keep your spacing settings
+  'elk.spacing.nodeNode': (constantLengths.SUB_NODE_MARGIN * 3).toString(),
+
+  'elk.layered.spacing.nodeNodeBetweenLayers':
+    constantLengths.CONNECTION_LENGTH.toString(),
+
+  // Modified placement strategy
+  'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+});
+
+// Pre-calculate static values
+const SUB_NODE_WIDTH = constantLengths.SUB_NODE_WIDTH;
+const MIN_NODE_HEIGHT = constantLengths.SUB_NODE_HEIGHT;
+
+export const useElk = () => {
+  // Use specific hooks where available
+  const nodes = useDiagramNodes(); // Specific hook for nodes
+  const edges = useDiagramEdges(); // Specific hook for edges
+  const setNodes = useDiagram((state) => state.setNodes); // Generic hook for setNodes
+  const contentHeights = useContentHeights(); // Specific hook for contentHeights
+  const layoutDirection = useLayoutDirection(); // Get layout direction from context
+
+  const frameIdRef = useRef<number | null>(null);
+
+  // Memoize content heights map for O(1) lookup
+  const heightsMap = useMemo(() => {
+    return new Map(contentHeights.map((ch) => [ch.id, ch.height + 18]));
+  }, [contentHeights]);
+
+  // Memoize node map for O(1) parent lookups
+  const nodeMap = useMemo(() => {
+    return new Map(nodes.map((node) => [node.id, node]));
+  }, [nodes]);
+
+  const getLayoutedElements = useCallback(() => {
+    // Cancel pending layout animation frame
+    if (frameIdRef.current) {
+      cancelAnimationFrame(frameIdRef.current);
+      frameIdRef.current = null;
+    }
+
+    const validNodeIds = new Set(nodes.map((node) => node.id));
+
+    // Filter edges to remove those not connected to valid node
+    const filteredEdges = edges.filter(
+      (edge) => validNodeIds.has(edge.source) && validNodeIds.has(edge.target),
+    );
+
+    // Instead of filtering out hidden child nodes, we'll include them all but handle visibility differently
+    const allNodes = nodes;
+
+    // Filter nodes for ELK layout - exclude hidden child nodes so parent can shrink
+    const layoutNodes = allNodes.filter((node) => {
+      if (node.parentId) {
+        // Check if parent node has childNodesExpanded set to false
+        const parentNode = allNodes.find((n) => n.id === node.parentId);
+        if (
+          parentNode &&
+          parentNode.data?.formData?.childNodesExpanded === false
+        ) {
+          return false; // Exclude hidden child nodes from layout calculation
+        }
+      }
+      return true;
+    });
+
+    // Map layout nodes to elkNodes
+    const currentConfig = getLayoutConfig(layoutDirection);
+    const elkNodes: ElkNodeWithParent[] = layoutNodes.map((node) => {
+      if (node.type === 'bendPoint') {
+        // Special case for bend point: small size and minimal padding
+        return {
+          id: node.id,
+          position: {},
+          children: [],
+          width: 7.5,
+          height: 7.5,
+          layoutOptions: {
+            ...currentConfig,
+            'elk.padding': '[top=0,left=0,bottom=0,right=0]',
+          },
+          parentId: node.parentId,
+        };
+      }
+
+      // Check if this node has visible children
+      const hasVisibleChildren = layoutNodes.some(
+        (n) => n.parentId === node.id,
+      );
+
+      const topPadding = Math.max(
+        heightsMap.get(node.id) || 0,
+        MIN_NODE_HEIGHT,
+      );
+
+      return {
+        id: node.id,
+        position: {},
+        children: [],
+        width: SUB_NODE_WIDTH,
+        height: topPadding,
+        layoutOptions: {
+          ...currentConfig,
+          // Significantly reduce top padding when no visible children
+          'elk.padding': hasVisibleChildren
+            ? `[top=${topPadding},left=25,bottom=25,right=25]`
+            : `[top=50,left=25,bottom=25,right=25]`,
+        },
+        parentId: node.parentId,
+      };
+    });
+
+    // Map edges to elkEdges, but only include edges between layout nodes
+    const layoutNodeIds = new Set(layoutNodes.map((node) => node.id));
+    const elkEdges: ElkExtendedEdge[] = filteredEdges
+      .filter(
+        (edge) =>
+          layoutNodeIds.has(edge.source) && layoutNodeIds.has(edge.target),
+      )
+      .map((edge) => ({
+        id: edge.id,
+        sources: [edge.source],
+        targets: [edge.target],
+      }));
+
+    // Build parent-child relationships using pre-built maps
+    const elkNodesMap = new Map(elkNodes.map((node) => [node.id, node]));
+    elkNodes.forEach((node) => {
+      if (node.parentId) {
+        const parent = elkNodesMap.get(node.parentId);
+        if (parent) {
+          if (!parent.children) {
+            parent.children = [];
+          }
+          parent.children.push(node);
+        }
+      }
+    });
+
+    // Create the graph structure
+    const graph = {
+      id: 'root',
+      layoutOptions: currentConfig,
+      children: elkNodes.filter((n) => !n.parentId),
+      edges: elkEdges,
+    };
+
+    // Run the layout
+    elk.layout(graph).then((layoutedGraph) => {
+      // Process nodes with minimal object creation
+      const updatedNodes: ICardNode[] = [];
+
+      const processNode = (node: ElkNode) => {
+        if (node.x !== undefined && node.y !== undefined) {
+          const originalNode = nodeMap.get(node.id);
+          const isPinned = originalNode?.data?.isPinned;
+
+          if (originalNode) {
+            // Check if this node should be hidden (collapsed child node)
+            const shouldHide =
+              originalNode.parentId &&
+              (() => {
+                const parentNode = nodes.find(
+                  (n) => n.id === originalNode.parentId,
+                );
+                return (
+                  parentNode &&
+                  parentNode.data?.formData?.childNodesExpanded === false
+                );
+              })();
+
+            if (shouldHide) {
+              // Add a visibility flag to hidden child nodes
+              updatedNodes.push({
+                ...originalNode,
+                position: { x: node.x, y: node.y }, // Keep calculated position
+                measured: {
+                  width: node.width,
+                  height: node.height,
+                },
+                style: {
+                  ...originalNode.style,
+                  width: node.width,
+                  height: node.height,
+                },
+                width: node.width,
+                height: node.height,
+                data: {
+                  ...originalNode.data,
+                  isHidden: true, // Add visibility flag
+                },
+              });
+            } else {
+              // Normal node positioning
+              updatedNodes.push({
+                ...originalNode,
+                position: isPinned
+                  ? originalNode.position
+                  : { x: node.x, y: node.y },
+                measured: {
+                  width: node.width,
+                  height: node.height,
+                },
+                style: {
+                  ...originalNode.style,
+                  width: node.width,
+                  height: node.height,
+                },
+                width: node.width,
+                height: node.height,
+                data: {
+                  ...originalNode.data,
+                  isHidden: false, // Add visibility flag
+                },
+              });
+            }
+          }
+        }
+        node.children?.forEach(processNode);
+      };
+
+      layoutedGraph.children?.forEach(processNode);
+
+      // Add back any nodes that weren't processed by ELK
+      nodes.forEach((node) => {
+        if (!updatedNodes.some((updatedNode) => updatedNode.id === node.id)) {
+          // Check if this unprocessed node should be hidden
+          const shouldHide =
+            node.parentId &&
+            (() => {
+              const parentNode = nodes.find((n) => n.id === node.parentId);
+              return (
+                parentNode &&
+                parentNode.data?.formData?.childNodesExpanded === false
+              );
+            })();
+
+          if (shouldHide) {
+            // For hidden child nodes, preserve their original position and data
+            // but mark them as hidden so they can be restored later
+            updatedNodes.push({
+              ...node,
+              data: {
+                ...node.data,
+                isHidden: true,
+              },
+            });
+          } else {
+            // Preserve other unprocessed nodes as is
+            updatedNodes.push({
+              ...node,
+              data: {
+                ...node.data,
+                isHidden: false,
+              },
+            });
+          }
+        }
+      });
+
+      // Batch update nodes
+      frameIdRef.current = requestAnimationFrame(() => {
+        setNodes(updatedNodes);
+        frameIdRef.current = null;
+      });
+    });
+  }, [nodes, edges, setNodes, heightsMap, nodeMap, layoutDirection]);
+
+  return { getLayoutedElements };
+};

package/packages/diagrams/src/lib/utils/event-hooks.ts

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  useEventStore,
+  EventHandler,
+  NodeMouseHandler,
+  EdgeMouseHandler,
+  PaneMouseHandler,
+} from './event-store';
+
+export const useRegisterEvent = (eventName: string) => {
+  const { register: storeRegister, unregister: storeUnregister } =
+    useEventStore();
+  const callbackRef = useRef<EventHandler | null>(null);
+
+  // Register function with cleanup of previous registration
+  const register = useCallback(
+    (callback: EventHandler) => {
+      // Unregister existing callback to prevent duplicates
+      if (callbackRef.current) {
+        storeUnregister(eventName, callbackRef.current);
+      }
+      callbackRef.current = callback;
+      storeRegister(eventName, callback);
+    },
+    [storeRegister, storeUnregister, eventName],
+  );
+
+  // Unregister function
+  const unregister = useCallback(() => {
+    if (callbackRef.current) {
+      storeUnregister(eventName, callbackRef.current);
+      callbackRef.current = null;
+    }
+  }, [storeUnregister, eventName]);
+
+  // Automatic cleanup on component unmount
+  useEffect(() => {
+    return () => {
+      if (callbackRef.current) {
+        storeUnregister(eventName, callbackRef.current);
+      }
+    };
+  }, [eventName, storeUnregister]);
+
+  return { register, unregister };
+};
+
+export const useRegisterEventCallback = (
+  eventName: string,
+  callback: EventHandler,
+): void => {
+  const { register, unregister } = useEventStore();
+
+  useEffect(() => {
+    register(eventName, callback);
+    return () => unregister(eventName, callback);
+  }, [eventName, callback, register, unregister]);
+};
+
+export const useTriggerEvent = (
+  eventName: string,
+): ((...args: unknown[]) => void) => {
+  return useCallback(
+    (...args: unknown[]) => {
+      useEventStore.getState().trigger(eventName, ...args);
+    },
+    [eventName],
+  );
+};

package/packages/diagrams/src/lib/utils/event-store.ts

@@ -0,0 +1,58 @@
+import { create } from 'zustand';
+import { Node, Edge } from '@xyflow/react';
+
+// Define specific event handler types
+export type NodeMouseHandler = (event: React.MouseEvent, node: Node) => void;
+export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
+export type PaneMouseHandler = (event: React.MouseEvent) => void;
+export type GenericEventHandler = (...args: unknown[]) => void;
+
+// Union type for all possible event handlers
+export type EventHandler =
+  | NodeMouseHandler
+  | EdgeMouseHandler
+  | PaneMouseHandler
+  | GenericEventHandler;
+
+interface EventCallbacks {
+  [eventName: string]: EventHandler[];
+}
+
+interface EventStoreState {
+  events: EventCallbacks;
+}
+
+interface EventStoreActions {
+  register: (eventName: string, callback: EventHandler) => void;
+  unregister: (eventName: string, callback: EventHandler) => void;
+  trigger: (eventName: string, ...args: unknown[]) => void;
+}
+
+export const useEventStore = create<EventStoreState & EventStoreActions>(
+  (set, get) => ({
+    events: {},
+    register: (eventName, callback) => {
+      const events = get().events;
+      const callbacks = events[eventName] || [];
+      set({ events: { ...events, [eventName]: [...callbacks, callback] } });
+    },
+    unregister: (eventName, callback) => {
+      const events = get().events;
+      const callbacks = events[eventName] || [];
+      set({
+        events: {
+          ...events,
+          [eventName]: callbacks.filter((cb) => cb !== callback),
+        },
+      });
+    },
+    trigger: (eventName, ...args) => {
+      const events = get().events;
+      const callbacks = events[eventName] || [];
+      callbacks.forEach((callback) => {
+        // Type assertion to handle the union type
+        (callback as GenericEventHandler)(...args);
+      });
+    },
+  }),
+);

package/packages/diagrams/src/lib/utils/flow-node-hooks.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { ICardNode } from '../types/card-node';
+import { generateNewNodes } from './add-new-block';
+import { UseAddBlockReturnProps } from '../types/hooks.types';
+import { useNodeData } from '../contexts/CardDataProvider';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+
+export const useAddBlock = () => {
+  const data = useNodeData();
+  const { setNodes, getNodes, getEdges } = useCustomReactFlow();
+
+  return useCallback(
+    ({ title, type }: UseAddBlockReturnProps) => {
+      if (title && type) {
+        const prevNodes = [...getNodes()] as ICardNode[];
+        const { newNodes } = generateNewNodes({
+          title,
+          color: 'green',
+          data,
+          nodes: prevNodes,
+          type,
+        });
+        setNodes(newNodes);
+      }
+    },
+    [getNodes, setNodes, getEdges],
+  );
+};