@flowuent-org/diagramming-core 1.0.8 → 1.1.0

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

@@ -1,297 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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],
-  );
-};