@graph-render/core 1.0.1

package/src/edges/geometry.ts

@@ -0,0 +1,85 @@
+import { PositionedNode, Point, Size, NodeSide } from '@graph-render/types';
+
+/**
+ * Calculate the center point of a node
+ */
+export const getNodeCenter = (node: PositionedNode, size: Size): Point => {
+  return {
+    x: node.position.x + size.width / 2,
+    y: node.position.y + size.height / 2,
+  };
+};
+
+/**
+ * Get the point at the center of a node's side
+ */
+export const getSideCenter = (node: PositionedNode, size: Size, side: NodeSide): Point => {
+  const cx = node.position.x + size.width / 2;
+  const cy = node.position.y + size.height / 2;
+  switch (side) {
+    case NodeSide.Left:
+      return { x: node.position.x, y: cy };
+    case NodeSide.Right:
+      return { x: node.position.x + size.width, y: cy };
+    case NodeSide.Top:
+      return { x: cx, y: node.position.y };
+    case NodeSide.Bottom:
+      return { x: cx, y: node.position.y + size.height };
+  }
+};
+
+/**
+ * Get anchor point on a node's side with offset and inset
+ */
+export const getAnchorPoint = (
+  node: PositionedNode,
+  size: Size,
+  side: NodeSide,
+  offset: number,
+  inset: number
+): Point => {
+  const cx = node.position.x + size.width / 2;
+  const cy = node.position.y + size.height / 2;
+  switch (side) {
+    case NodeSide.Left:
+      return { x: node.position.x - inset, y: cy + offset };
+    case NodeSide.Right:
+      return { x: node.position.x + size.width + inset, y: cy + offset };
+    case NodeSide.Top:
+      return { x: cx + offset, y: node.position.y - inset };
+    case NodeSide.Bottom:
+      return { x: cx + offset, y: node.position.y + size.height + inset };
+  }
+};
+
+/**
+ * Get the normal vector for a given side
+ */
+export const getSideNormal = (side: NodeSide): Point => {
+  switch (side) {
+    case NodeSide.Left:
+      return { x: -1, y: 0 };
+    case NodeSide.Right:
+      return { x: 1, y: 0 };
+    case NodeSide.Top:
+      return { x: 0, y: -1 };
+    case NodeSide.Bottom:
+      return { x: 0, y: 1 };
+  }
+};
+
+/**
+ * Get the inward normal vector for a given side
+ */
+export const getSideInwardNormal = (side: NodeSide): Point => {
+  switch (side) {
+    case NodeSide.Left:
+      return { x: 1, y: 0 };
+    case NodeSide.Right:
+      return { x: -1, y: 0 };
+    case NodeSide.Top:
+      return { x: 0, y: 1 };
+    case NodeSide.Bottom:
+      return { x: 0, y: -1 };
+  }
+};

package/src/edges/index.ts

@@ -0,0 +1,3 @@
+export { routeEdges } from './routing';
+export { buildEdgePath } from './pathBuilder';
+export { segmentIntersectsRect } from './collision';

package/src/edges/pathBuilder.ts

@@ -0,0 +1,136 @@
+import { PositionedEdge, Point } from '@graph-render/types';
+
+/**
+ * Build a straight line path from edge points
+ */
+const buildStraightPath = (points: Point[]): string => {
+  const [start, ...rest] = points;
+  return [`M ${start.x} ${start.y}`, ...rest.map((pt) => `L ${pt.x} ${pt.y}`)].join(' ');
+};
+
+/**
+ * Build a curved path for two-point edges
+ */
+const buildTwoPointCurvedPath = (start: Point, end: Point, curveStrength: number): string => {
+  if (start.y === end.y) {
+    return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+  }
+
+  const midX = start.x + (end.x - start.x) * 0.55;
+  const dirY = Math.sign(end.y - start.y) || 1;
+  const dirX = Math.sign(end.x - start.x) || 1;
+  const radiusBase = Math.min(Math.abs(end.x - start.x), Math.abs(end.y - start.y));
+  const r = Math.max(4, radiusBase * Math.min(Math.max(curveStrength, 0), 0.45));
+
+  const p1x = midX - r * dirX;
+  const p1y = start.y;
+  const p2x = midX;
+  const p2y = start.y + r * dirY;
+  const p3x = midX;
+  const p3y = end.y - r * dirY;
+  const p4x = midX + r * dirX;
+  const p4y = end.y;
+
+  return [
+    `M ${start.x} ${start.y}`,
+    `L ${p1x} ${p1y}`,
+    `Q ${midX} ${p1y} ${p2x} ${p2y}`,
+    `L ${p3x} ${p3y}`,
+    `Q ${midX} ${end.y} ${p4x} ${p4y}`,
+    `L ${end.x} ${end.y}`,
+  ].join(' ');
+};
+
+/**
+ * Build a quadratic bezier path for three-point edges
+ */
+const buildThreePointPath = (start: Point, control: Point, end: Point): string => {
+  return `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`;
+};
+
+/**
+ * Build a cubic bezier path for six-point edges (standard curved edge)
+ */
+const buildSixPointPath = (points: Point[]): string => {
+  const [start, out, c1, c2, straightIn, end] = points;
+  return [
+    `M ${start.x} ${start.y}`,
+    `L ${out.x} ${out.y}`,
+    `C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${straightIn.x} ${straightIn.y}`,
+    `L ${end.x} ${end.y}`,
+  ].join(' ');
+};
+
+/**
+ * Build a path with multiple quadratic curves for variable-length edges
+ */
+const buildMultiPointPath = (points: Point[]): string => {
+  const [start, ...rest] = points;
+  const commands = [`M ${start.x} ${start.y}`];
+
+  if (rest.length) {
+    commands.push(`L ${rest[0].x} ${rest[0].y}`);
+  }
+
+  for (let i = 1; i < rest.length - 1; i += 1) {
+    const ctrl = rest[i];
+    const next = rest[i + 1];
+    const isLastCurve = i === rest.length - 2;
+    if (isLastCurve) {
+      // FIX: removed the trailing `L rest[last]` that duplicated the Q endpoint.
+      // When isLastCurve is true, `next === rest[rest.length - 1]`, so the Q
+      // command already terminates at the final point.  The extra L produced a
+      // zero-length segment that misplaced SVG `marker-end` arrowheads.
+      commands.push(`Q ${ctrl.x} ${ctrl.y} ${next.x} ${next.y}`);
+      break;
+    }
+    commands.push(`Q ${ctrl.x} ${ctrl.y} ${next.x} ${next.y}`);
+  }
+
+  if (rest.length === 2) {
+    const [ctrl, end] = rest;
+    commands.push(`Q ${ctrl.x} ${ctrl.y} ${end.x} ${end.y}`);
+  }
+
+  return commands.join(' ');
+};
+
+/**
+ * Build an SVG path string from edge points.
+ *
+ * Returns null (instead of throwing) when the edge has fewer than two points so
+ * that a malformed edge from a user-supplied routeEdgesOverride does not crash
+ * the React render tree.  Both callers (EdgePath and svg.ts) already guard
+ * against a falsy return value.
+ */
+export const buildEdgePath = (
+  edge: PositionedEdge,
+  curveEdges: boolean,
+  curveStrength: number
+): string | null => {
+  // FIX: was `throw new Error(...)` — returning null lets callers handle
+  // the bad edge gracefully without an unhandled exception in render.
+  if (edge.points.length < 2) {
+    return null;
+  }
+
+  if (!curveEdges) {
+    return buildStraightPath(edge.points);
+  }
+
+  if (edge.points.length === 2) {
+    const [start, end] = edge.points;
+    return buildTwoPointCurvedPath(start, end, curveStrength);
+  }
+
+  if (edge.points.length === 3) {
+    const [start, control, end] = edge.points;
+    return buildThreePointPath(start, control, end);
+  }
+
+  if (edge.points.length >= 6) {
+    return buildSixPointPath(edge.points);
+  }
+
+  return buildMultiPointPath(edge.points);
+};

package/src/edges/pathCalculation.ts

@@ -0,0 +1,69 @@
+import { Point } from '@graph-render/types';
+
+/**
+ * Calculate the lead-out distance based on edge configuration
+ */
+export const getLeadOutDistance = (straight: boolean, isUndirected: boolean): number => {
+  if (straight && !isUndirected) return 28;
+  return isUndirected ? 8 : 10;
+};
+
+/**
+ * Calculate control points for curved edge path
+ */
+export const calculateControlPoints = (
+  startPoint: Point,
+  endPoint: Point,
+  sourceNormal: Point,
+  targetNormal: Point,
+  leadOut: number,
+  isUndirected: boolean
+): Point[] => {
+  const outPoint = {
+    x: startPoint.x + sourceNormal.x * leadOut,
+    y: startPoint.y + sourceNormal.y * leadOut,
+  };
+
+  const endStraight = isUndirected ? 10 : 20;
+  const endStraightStart = {
+    x: endPoint.x - targetNormal.x * endStraight,
+    y: endPoint.y - targetNormal.y * endStraight,
+  };
+
+  const control1 = {
+    x: outPoint.x + sourceNormal.x * (leadOut * 3),
+    y: outPoint.y + sourceNormal.y * (leadOut * 3),
+  };
+
+  const control2 = {
+    x: endStraightStart.x - targetNormal.x * (endStraight * 3),
+    y: endStraightStart.y - targetNormal.y * (endStraight * 3),
+  };
+
+  return [startPoint, outPoint, control1, control2, endStraightStart, endPoint];
+};
+
+/**
+ * Calculate straight path points
+ */
+export const calculateStraightPoints = (
+  startPoint: Point,
+  endPoint: Point,
+  sourceNormal: Point,
+  targetNormal: Point,
+  leadOut: number,
+  isUndirected: boolean
+): Point[] => {
+  const outPoint = {
+    x: startPoint.x + sourceNormal.x * leadOut,
+    y: startPoint.y + sourceNormal.y * leadOut,
+  };
+
+  const endStraight = isUndirected ? 10 : 20;
+  const endStraightStart = {
+    x: endPoint.x - targetNormal.x * endStraight,
+    y: endPoint.y - targetNormal.y * endStraight,
+  };
+
+  return [startPoint, outPoint, endStraightStart, endPoint];
+};