feature/COMPASS-9655 add getCoordinatesForNewNode

Author: paula-stacho

src/components/diagram.stories.tsx

@@ -1,19 +1,66 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { useMemo, useCallback, useState } from 'react';
+import { Decorator, Meta, StoryObj } from '@storybook/react';
 
 import { Diagram } from '@/components/diagram';
 import { EMPLOYEE_TERRITORIES_NODE, EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/datasets/nodes';
 import { EMPLOYEES_TO_EMPLOYEES_EDGE, ORDERS_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
 import { DiagramStressTestDecorator } from '@/mocks/decorators/diagram-stress-test.decorator';
 import { DiagramConnectableDecorator } from '@/mocks/decorators/diagram-connectable.decorator';
+import { DiagramProps } from '@/types';
+
+const randomId = () => Math.floor(Math.random() * 100);
+
+const RefreshingDecorator: Decorator<DiagramProps> = (Story, context) => {
+  const [nodes, setNodes] = useState(context.args.nodes || []);
+
+  const onNodeDragStop = useCallback((evt, node) => {
+    setNodes(prevNodes =>
+      prevNodes.map(n => {
+        if (n.id === node.id) {
+          return {
+            ...n,
+            title: `${n.title.split('-')[0]}-${randomId()}`,
+            position: { x: node.position.x, y: node.position.y },
+          };
+        }
+        return {
+          ...n,
+          title: `${n.title.split('-')[0]}-${randomId()}`,
+        };
+      }),
+    );
+  }, []);
+
+  return Story({
+    ...context,
+    args: {
+      ...context.args,
+      nodes,
+      onNodeDragStop: onNodeDragStop,
+    },
+  });
+};
 
 const diagram: Meta<typeof Diagram> = {
   title: 'Diagram',
   component: Diagram,
+  decorators: [RefreshingDecorator],
   args: {
     title: 'MongoDB Diagram',
     isDarkMode: true,
+    nodes: [
+      ORDERS_NODE,
+      EMPLOYEES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+      EMPLOYEE_TERRITORIES_NODE,
+    ],
     edges: [ORDERS_TO_EMPLOYEES_EDGE, EMPLOYEES_TO_EMPLOYEES_EDGE],
-    nodes: [ORDERS_NODE, EMPLOYEES_NODE, EMPLOYEE_TERRITORIES_NODE],
   },
 };
 

src/components/edge/floating-edge.tsx

@@ -1,9 +1,16 @@
-import { EdgeProps, getSmoothStepPath, useNodes } from '@xyflow/react';
+import { EdgeProps, getBezierPath, getSmoothStepPath, getStraightPath, useNodes, XYPosition } from '@xyflow/react';
 import { useMemo } from 'react';
 
 import { getEdgeParams } from '@/utilities/get-edge-params';
 import { InternalNode } from '@/types/internal';
 import { Edge } from '@/components/edge/edge';
+import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
+
+const getDistance = (pointA: XYPosition, pointB: XYPosition) => {
+  const dx = pointB.x - pointA.x;
+  const dy = pointB.y - pointA.y;
+  return Math.sqrt(dx * dx + dy * dy);
+};
 
 export const FloatingEdge = ({ id, source, target, markerEnd, markerStart, selected }: EdgeProps) => {
   const nodes = useNodes<InternalNode>();
@@ -18,7 +25,10 @@ export const FloatingEdge = ({ id, source, target, markerEnd, markerStart, selec
 
   const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
-  const [path] = getSmoothStepPath({
+  const isShortDistance = getDistance({ x: sx, y: sy }, { x: tx, y: ty }) < DEFAULT_MARKER_SIZE * 2 + 20;
+  const getPath = !isShortDistance ? getSmoothStepPath : getSmoothStepPath;
+
+  const [path] = getPath({
     sourceX: sx,
     sourceY: sy,
     sourcePosition: sourcePos,
@@ -30,6 +40,8 @@ export const FloatingEdge = ({ id, source, target, markerEnd, markerStart, selec
   return (
     <Edge
       data-testid={`floating-edge-${id}`}
+      // markerEnd={!isShortDistance ? markerEnd : undefined}
+      // markerStart={!isShortDistance ? markerStart : undefined}
       markerEnd={markerEnd}
       markerStart={markerStart}
       path={path}

src/index.ts

@@ -1,6 +1,7 @@
 export * from '@/components/diagram';
 export * from '@/utilities/apply-layout';
 export * from '@/utilities/add-nodes-within-bounds';
+export { getCoordinatesForNewNode } from '@/utilities/get-coordinates-for-new-node';
 export * from '@/utilities/get-nodes-bounds';
 export * from '@/types';
 export { useDiagram, type DiagramInstance } from '@/hooks/use-diagram';

src/utilities/add-nodes-within-bounds.ts

@@ -1,5 +1,7 @@
-import { DEFAULT_NODE_HEIGHT, DEFAULT_NODE_SPACING, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
-import { BaseNode } from '@/types/layout';
+import type { BaseNode } from '@/types/layout';
+
+import { getNodeWidth, getNodeHeight } from './node-dimensions';
+import { getCoordinatesForNewNodeFromMaxDimensions } from './get-coordinates-for-new-node';
 
 /**
  * Adds new nodes to an existing array of nodes, positioning them in a grid pattern.
@@ -14,28 +16,14 @@ import { BaseNode } from '@/types/layout';
  * @param newNodes A list of new nodes to add within the bounds of the diagram.
  */
 export const addNodesWithinBounds = <N extends BaseNode>(nodes: N[], newNodes: N[]) => {
-  const maxWidth = Math.max(0, ...nodes.map(n => n.position.x + (n.measured?.width || DEFAULT_NODE_WIDTH)));
-  const maxHeight = Math.max(0, ...nodes.map(n => n.position.y + (n.measured?.height || DEFAULT_NODE_HEIGHT)));
-
-  let x = 0;
-  let y = maxHeight + DEFAULT_NODE_SPACING;
-  let rowHeight = 0;
+  const maxWidth = Math.max(0, ...nodes.map(n => n.position.x + getNodeWidth(n)));
+  const maxHeight = Math.max(0, ...nodes.map(n => n.position.y + getNodeHeight(n)));
 
   return [
     ...nodes,
-    ...newNodes.map(n => {
-      if (!n.measured || !n.measured.height || !n.measured.width) return n;
-
-      if (x + n.measured.width + DEFAULT_NODE_SPACING > maxWidth) {
-        x = 0;
-        y += rowHeight + DEFAULT_NODE_SPACING;
-        rowHeight = 0;
-      }
-
-      x += n.measured.width + DEFAULT_NODE_SPACING;
-      rowHeight = Math.max(rowHeight, n.measured.height);
-
-      return { ...n, position: { x, y } };
-    }),
+    ...newNodes.map(n => ({
+      ...n,
+      position: getCoordinatesForNewNodeFromMaxDimensions({ maxWidth, maxHeight, newNode: n }),
+    })),
   ];
 };

src/utilities/convert-nodes.ts

@@ -1,5 +1,6 @@
 import { InternalNode } from '@/types/internal';
 import { NodeProps, NodeType } from '@/types';
+import { getNodeHeight, getNodeWidth } from './node-dimensions';
 
 export const convertToExternalNode = (node: InternalNode): NodeProps => {
   const { data, ...rest } = node;
@@ -25,6 +26,10 @@ export const convertToInternalNode = (node: NodeProps): InternalNode => {
       fields,
       borderVariant,
     },
+    minimapNodeProps: {
+      height: getNodeHeight(node),
+      width: getNodeWidth(node),
+    },
   };
 };
 

src/utilities/node-dimensions.ts

@@ -24,7 +24,7 @@ export const getNodeHeight = <N extends BaseNode | NodeProps | InternalNode>(nod
   }
   const calculatedHeight =
     DEFAULT_NODE_HEADER_HEIGHT + DEFAULT_FIELD_PADDING * 2 + fieldCount * DEFAULT_FIELD_HEIGHT + 2;
-  return calculatedHeight;
+  return 10;
 };
 
 export const getNodeWidth = <N extends BaseNode>(node: N) => {