@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,242 +1,242 @@
-import { Node, Position } from '@xyflow/react';
-import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
-
-// Helper function to validate a node
-const isValidNode = (node: NodeWithMeasured): boolean => {
-  return (
-    typeof node?.position?.x === 'number' &&
-    typeof node?.position?.y === 'number' &&
-    typeof node?.measured?.width === 'number' &&
-    typeof node?.measured?.height === 'number'
-  );
-};
-
-interface EdgeParams {
-  sourceX?: number;
-  sourceY?: number;
-  targetX?: number;
-  targetY?: number;
-  sourcePosition?: Position;
-  targetPosition?: Position;
-}
-
-// Helper function to sanitize parameters
-const sanitizeEdgeParams = (params: EdgeParams) => {
-  return {
-    sourceX: params.sourceX || 0,
-    sourceY: params.sourceY || 0,
-    targetX: params.targetX || 0,
-    targetY: params.targetY || 0,
-    sourcePosition: params.sourcePosition || Position.Bottom,
-    targetPosition: params.targetPosition || Position.Bottom,
-  };
-};
-
-interface NodeWithMeasured extends Node {
-  measured?: {
-    width?: number;
-    height?: number;
-  };
-  width?: number;
-  height?: number;
-}
-
-// This helper function returns the intersection point
-// of the line between the center of the intersectionNode and the target node
-const getNodeIntersection = (
-  intersectionNode: NodeWithMeasured,
-  targetNode: NodeWithMeasured,
-) => {
-  const intersectionNodePosition = intersectionNode.position;
-  const intersectionNodeWidth =
-    intersectionNode.width ?? intersectionNode.measured?.width ?? 0;
-  const intersectionNodeHeight =
-    intersectionNode.height ?? intersectionNode.measured?.height ?? 0;
-  const targetPosition = targetNode.position;
-
-  const w = intersectionNodeWidth ? intersectionNodeWidth / 2 : 0;
-  const h = intersectionNodeHeight ? intersectionNodeHeight / 2 : 0;
-
-  const x2 = intersectionNodePosition.x + w;
-  const y2 = intersectionNodePosition.y + h;
-  const x1 = targetPosition.x + (targetNode.measured?.width || 0) / 2;
-  const y1 = targetPosition.y + (targetNode.measured?.height || 0) / 2;
-
-  const xx1 = (x1 - x2) / (2 * w || 1) - (y1 - y2) / (2 * h || 1);
-  const yy1 = (x1 - x2) / (2 * w || 1) + (y1 - y2) / (2 * h || 1);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
-  const xx3 = a * xx1;
-  const yy3 = a * yy1;
-  const x = w * (xx3 + yy3) + x2;
-  const y = h * (-xx3 + yy3) + y2;
-
-  return { x, y };
-};
-
-// Helper function to recursively get absolute position for a node
-const getAbsolutePosition = (
-  node: Node,
-  nodes: Node[],
-): { x: number; y: number } => {
-  let x = node.position.x;
-  let y = node.position.y;
-  let current = node;
-  while (current.parentId) {
-    const parent = nodes.find((n) => n.id === current.parentId);
-    if (!parent) break;
-    x += parent.position.x;
-    y += parent.position.y;
-    current = parent;
-  }
-  return { x, y };
-};
-
-// Returns the position (top, right, bottom, or left) of the node relative to another node
-const getEdgePosition = (node: Node, otherNode: Node) => {
-  if (!isValidNode(node)) {
-    console.error('Invalid node detected in getEdgePosition', { node });
-    return Position.Bottom;
-  }
-
-  const nodeCenter = {
-    x: node.position.x + (node.measured?.width || 0) / 2,
-    y: node.position.y + (node.measured?.height || 0) / 2,
-  };
-
-  const otherCenter = {
-    x: otherNode.position.x + (otherNode.measured?.width || 0) / 2,
-    y: otherNode.position.y + (otherNode.measured?.height || 0) / 2,
-  };
-
-  // Calculate angle between nodes
-  const dx = otherCenter.x - nodeCenter.x;
-  const dy = otherCenter.y - nodeCenter.y;
-  const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-
-  // Determine the most appropriate side based on angle
-  if (angle >= -45 && angle < 45) {
-    return Position.Right;
-  } else if (angle >= 45 && angle < 135) {
-    return Position.Bottom;
-  } else if (angle >= 135 || angle < -135) {
-    return Position.Left;
-  } else {
-    return Position.Top;
-  }
-};
-
-// Returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) needed to create an edge
-export const getEdgeParams = (
-  source: Node,
-  target: Node,
-  edgeType: EdgeTypes = EdgeTypes.Default,
-  strokeWidth: number,
-  diagramType: string,
-  nodes: Node[],
-) => {
-  const isErDiagram = diagramType === 'erd';
-  const GAP_SIZE = isErDiagram ? strokeWidth * 10 : 0; // Adjust this value as needed
-
-  // Debug logging for edge calculations
-  // console.log('getEdgeParams Debug:', {
-  //   sourceId: source.id,
-  //   targetId: target.id,
-  //   diagramType,
-  //   isErDiagram,
-  //   GAP_SIZE,
-  //   strokeWidth,
-  //   sourceDimensions: {
-  //     width: source.width || source.measured?.width,
-  //     height: source.height || source.measured?.height,
-  //     position: source.position,
-  //   },
-  //   targetDimensions: {
-  //     width: target.width || target.measured?.width,
-  //     height: target.height || target.measured?.height,
-  //     position: target.position,
-  //   },
-  // });
-
-  // Use recursively calculated absolute positions
-  const adjustedSourcePosition = getAbsolutePosition(source, nodes);
-  const adjustedTargetPosition = getAbsolutePosition(target, nodes);
-
-  // Determine edge positions based on relative node positions
-  const sourcePosition = getEdgePosition(
-    { ...source, position: adjustedSourcePosition },
-    { ...target, position: adjustedTargetPosition },
-  );
-  const targetPosition = getEdgePosition(
-    { ...target, position: adjustedTargetPosition },
-    { ...source, position: adjustedSourcePosition },
-  );
-
-  // Calculate intersection points using absolute positions and determined positions
-  const sourceIntersectionPoint = getNodeIntersection(
-    { ...source, position: adjustedSourcePosition },
-    { ...target, position: adjustedTargetPosition },
-  );
-  const targetIntersectionPoint = getNodeIntersection(
-    { ...target, position: adjustedTargetPosition },
-    { ...source, position: adjustedSourcePosition },
-  );
-
-  // Adjust the intersection points based on the position
-  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Source2Bend) {
-    switch (sourcePosition) {
-      case Position.Top:
-        sourceIntersectionPoint.y -= GAP_SIZE;
-        break;
-      case Position.Right:
-        sourceIntersectionPoint.x += GAP_SIZE;
-        break;
-      case Position.Bottom:
-        sourceIntersectionPoint.y += GAP_SIZE;
-        break;
-      case Position.Left:
-        sourceIntersectionPoint.x -= GAP_SIZE;
-        break;
-    }
-  }
-
-  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Bend2Target) {
-    switch (targetPosition) {
-      case Position.Top:
-        targetIntersectionPoint.y -= GAP_SIZE;
-        break;
-      case Position.Right:
-        targetIntersectionPoint.x += GAP_SIZE;
-        break;
-      case Position.Bottom:
-        targetIntersectionPoint.y += GAP_SIZE;
-        break;
-      case Position.Left:
-        targetIntersectionPoint.x -= GAP_SIZE;
-        break;
-    }
-  }
-
-  const rawParams = {
-    sourceX: sourceIntersectionPoint.x,
-    sourceY: sourceIntersectionPoint.y,
-    targetX: targetIntersectionPoint.x,
-    targetY: targetIntersectionPoint.y,
-    sourcePosition,
-    targetPosition,
-  };
-
-  const finalParams = sanitizeEdgeParams(rawParams);
-
-  // Debug logging for final edge parameters
-  // console.log('getEdgeParams Final:', {
-  //   sourceId: source.id,
-  //   targetId: target.id,
-  //   sourceIntersectionPoint,
-  //   targetIntersectionPoint,
-  //   sourcePosition,
-  //   targetPosition,
-  //   finalParams,
-  // });
-
-  return finalParams;
-};
+import { Node, Position } from '@xyflow/react';
+import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
+
+// Helper function to validate a node
+const isValidNode = (node: NodeWithMeasured): boolean => {
+  return (
+    typeof node?.position?.x === 'number' &&
+    typeof node?.position?.y === 'number' &&
+    typeof node?.measured?.width === 'number' &&
+    typeof node?.measured?.height === 'number'
+  );
+};
+
+interface EdgeParams {
+  sourceX?: number;
+  sourceY?: number;
+  targetX?: number;
+  targetY?: number;
+  sourcePosition?: Position;
+  targetPosition?: Position;
+}
+
+// Helper function to sanitize parameters
+const sanitizeEdgeParams = (params: EdgeParams) => {
+  return {
+    sourceX: params.sourceX || 0,
+    sourceY: params.sourceY || 0,
+    targetX: params.targetX || 0,
+    targetY: params.targetY || 0,
+    sourcePosition: params.sourcePosition || Position.Bottom,
+    targetPosition: params.targetPosition || Position.Bottom,
+  };
+};
+
+interface NodeWithMeasured extends Node {
+  measured?: {
+    width?: number;
+    height?: number;
+  };
+  width?: number;
+  height?: number;
+}
+
+// This helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+const getNodeIntersection = (
+  intersectionNode: NodeWithMeasured,
+  targetNode: NodeWithMeasured,
+) => {
+  const intersectionNodePosition = intersectionNode.position;
+  const intersectionNodeWidth =
+    intersectionNode.width ?? intersectionNode.measured?.width ?? 0;
+  const intersectionNodeHeight =
+    intersectionNode.height ?? intersectionNode.measured?.height ?? 0;
+  const targetPosition = targetNode.position;
+
+  const w = intersectionNodeWidth ? intersectionNodeWidth / 2 : 0;
+  const h = intersectionNodeHeight ? intersectionNodeHeight / 2 : 0;
+
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + (targetNode.measured?.width || 0) / 2;
+  const y1 = targetPosition.y + (targetNode.measured?.height || 0) / 2;
+
+  const xx1 = (x1 - x2) / (2 * w || 1) - (y1 - y2) / (2 * h || 1);
+  const yy1 = (x1 - x2) / (2 * w || 1) + (y1 - y2) / (2 * h || 1);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+};
+
+// Helper function to recursively get absolute position for a node
+const getAbsolutePosition = (
+  node: Node,
+  nodes: Node[],
+): { x: number; y: number } => {
+  let x = node.position.x;
+  let y = node.position.y;
+  let current = node;
+  while (current.parentId) {
+    const parent = nodes.find((n) => n.id === current.parentId);
+    if (!parent) break;
+    x += parent.position.x;
+    y += parent.position.y;
+    current = parent;
+  }
+  return { x, y };
+};
+
+// Returns the position (top, right, bottom, or left) of the node relative to another node
+const getEdgePosition = (node: Node, otherNode: Node) => {
+  if (!isValidNode(node)) {
+    console.error('Invalid node detected in getEdgePosition', { node });
+    return Position.Bottom;
+  }
+
+  const nodeCenter = {
+    x: node.position.x + (node.measured?.width || 0) / 2,
+    y: node.position.y + (node.measured?.height || 0) / 2,
+  };
+
+  const otherCenter = {
+    x: otherNode.position.x + (otherNode.measured?.width || 0) / 2,
+    y: otherNode.position.y + (otherNode.measured?.height || 0) / 2,
+  };
+
+  // Calculate angle between nodes
+  const dx = otherCenter.x - nodeCenter.x;
+  const dy = otherCenter.y - nodeCenter.y;
+  const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+
+  // Determine the most appropriate side based on angle
+  if (angle >= -45 && angle < 45) {
+    return Position.Right;
+  } else if (angle >= 45 && angle < 135) {
+    return Position.Bottom;
+  } else if (angle >= 135 || angle < -135) {
+    return Position.Left;
+  } else {
+    return Position.Top;
+  }
+};
+
+// Returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) needed to create an edge
+export const getEdgeParams = (
+  source: Node,
+  target: Node,
+  edgeType: EdgeTypes = EdgeTypes.Default,
+  strokeWidth: number,
+  diagramType: string,
+  nodes: Node[],
+) => {
+  const isErDiagram = diagramType === 'erd';
+  const GAP_SIZE = isErDiagram ? strokeWidth * 10 : 0; // Adjust this value as needed
+
+  // Debug logging for edge calculations
+  // console.log('getEdgeParams Debug:', {
+  //   sourceId: source.id,
+  //   targetId: target.id,
+  //   diagramType,
+  //   isErDiagram,
+  //   GAP_SIZE,
+  //   strokeWidth,
+  //   sourceDimensions: {
+  //     width: source.width || source.measured?.width,
+  //     height: source.height || source.measured?.height,
+  //     position: source.position,
+  //   },
+  //   targetDimensions: {
+  //     width: target.width || target.measured?.width,
+  //     height: target.height || target.measured?.height,
+  //     position: target.position,
+  //   },
+  // });
+
+  // Use recursively calculated absolute positions
+  const adjustedSourcePosition = getAbsolutePosition(source, nodes);
+  const adjustedTargetPosition = getAbsolutePosition(target, nodes);
+
+  // Determine edge positions based on relative node positions
+  const sourcePosition = getEdgePosition(
+    { ...source, position: adjustedSourcePosition },
+    { ...target, position: adjustedTargetPosition },
+  );
+  const targetPosition = getEdgePosition(
+    { ...target, position: adjustedTargetPosition },
+    { ...source, position: adjustedSourcePosition },
+  );
+
+  // Calculate intersection points using absolute positions and determined positions
+  const sourceIntersectionPoint = getNodeIntersection(
+    { ...source, position: adjustedSourcePosition },
+    { ...target, position: adjustedTargetPosition },
+  );
+  const targetIntersectionPoint = getNodeIntersection(
+    { ...target, position: adjustedTargetPosition },
+    { ...source, position: adjustedSourcePosition },
+  );
+
+  // Adjust the intersection points based on the position
+  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Source2Bend) {
+    switch (sourcePosition) {
+      case Position.Top:
+        sourceIntersectionPoint.y -= GAP_SIZE;
+        break;
+      case Position.Right:
+        sourceIntersectionPoint.x += GAP_SIZE;
+        break;
+      case Position.Bottom:
+        sourceIntersectionPoint.y += GAP_SIZE;
+        break;
+      case Position.Left:
+        sourceIntersectionPoint.x -= GAP_SIZE;
+        break;
+    }
+  }
+
+  if (edgeType === EdgeTypes.Default || edgeType === EdgeTypes.Bend2Target) {
+    switch (targetPosition) {
+      case Position.Top:
+        targetIntersectionPoint.y -= GAP_SIZE;
+        break;
+      case Position.Right:
+        targetIntersectionPoint.x += GAP_SIZE;
+        break;
+      case Position.Bottom:
+        targetIntersectionPoint.y += GAP_SIZE;
+        break;
+      case Position.Left:
+        targetIntersectionPoint.x -= GAP_SIZE;
+        break;
+    }
+  }
+
+  const rawParams = {
+    sourceX: sourceIntersectionPoint.x,
+    sourceY: sourceIntersectionPoint.y,
+    targetX: targetIntersectionPoint.x,
+    targetY: targetIntersectionPoint.y,
+    sourcePosition,
+    targetPosition,
+  };
+
+  const finalParams = sanitizeEdgeParams(rawParams);
+
+  // Debug logging for final edge parameters
+  // console.log('getEdgeParams Final:', {
+  //   sourceId: source.id,
+  //   targetId: target.id,
+  //   sourceIntersectionPoint,
+  //   targetIntersectionPoint,
+  //   sourcePosition,
+  //   targetPosition,
+  //   finalParams,
+  // });
+
+  return finalParams;
+};

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

@@ -1,13 +1,13 @@
-/**
- * Change key -> value to value -> key pair
- */
-export function reverseObj(
-  originalMap: Record<string, string>
-): Record<string, string> {
-  const reversedMap: Record<string, string> = {};
-  for (const key in originalMap) {
-    const value = originalMap[key];
-    reversedMap[value] = key;
-  }
-  return reversedMap;
-}
+/**
+ * Change key -> value to value -> key pair
+ */
+export function reverseObj(
+  originalMap: Record<string, string>
+): Record<string, string> {
+  const reversedMap: Record<string, string> = {};
+  for (const key in originalMap) {
+    const value = originalMap[key];
+    reversedMap[value] = key;
+  }
+  return reversedMap;
+}

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

@@ -1,19 +1,19 @@
-import { useEffect, useState } from 'react';
-
-function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
-export default useDebounce;
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;