@likec4/diagram 1.43.0 → 1.44.0

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
-export { vector, VectorImpl } from './vector';
-export type { Vector } from './vector';
-export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, } from './xyflow';
-export { getViewBounds } from './get-view-bounds';
+export { Vector, vector } from './vector';
+export type { VectorValue } from './vector';
+export { bezierControlPoints, bezierPath, distance, distanceBetweenPoints, extractMinimalInternalNode, getNodeCenter, getNodeIntersection, getNodeIntersectionFromCenterToPoint, isEqualMinimalInternalNodes, isInside, isSamePoint, type MinimalInternalNode, nodeToRect, stopPropagation, } from './xyflow';
 export { roundDpr } from './roundDpr';
+export { pickViewBounds } from './view-bounds';

package/dist/utils/vector.d.ts

@@ -1,24 +1,81 @@
-export interface Vector {
-    x: number;
-    y: number;
+export interface VectorValue {
+    readonly x: number;
+    readonly y: number;
 }
-export declare class VectorImpl implements Vector {
-    x: number;
-    y: number;
+export declare class Vector implements VectorValue {
+    readonly x: number;
+    readonly y: number;
     constructor(x: number, y: number);
-    static create(position: Vector): VectorImpl;
-    static add(a: Vector, b: Vector): Vector;
-    static sub(a: Vector, b: Vector): Vector;
-    static mul(a: Vector, b: number): Vector;
-    static dot(a: Vector, b: Vector): number;
-    static cross(a: Vector, b: Vector): VectorImpl;
-    static setLength(a: Vector, length: number): Vector;
-    add(b: Vector): VectorImpl;
-    sub(b: Vector): VectorImpl;
-    mul(b: number): VectorImpl;
-    dot(b: Vector): number;
-    cross(b: Vector): VectorImpl;
-    abs(): number;
-    setLength(length: number): VectorImpl;
+    static create(position: VectorValue): Vector;
+    static create(x: number, y: number): Vector;
+    /**
+     * Adds two vectors.
+     * @param a The first vector.
+     * @param b The second vector.
+     * @returns The sum of the two vectors.
+     */
+    static add(a: VectorValue, b: VectorValue): VectorValue;
+    /**
+     * Subtracts two vectors.
+     * @param a The first vector.
+     * @param b The second vector.
+     * @returns The difference of the two vectors.
+     */
+    static subtract(a: VectorValue, b: VectorValue): VectorValue;
+    /**
+     * Multiplies a vector by a scalar.
+     * @param a The vector.
+     * @param b The scalar.
+     * @returns The scaled vector.
+     */
+    static multiply(a: VectorValue, b: number): VectorValue;
+    /**
+     * Calculates the dot product of the vectors.
+     * @param a The first vector.
+     * @param b The second vector.
+     * @returns The dot product.
+     */
+    static dot(a: VectorValue, b: VectorValue): number;
+    /**
+     * Adds the given vector to this vector.
+     * @param b The vector to add.
+     * @returns A new vector that is the sum of this vector and the given vector.
+     */
+    add(b: VectorValue): Vector;
+    /**
+     * Subtracts the given vector from this vector.
+     * @param b The vector to subtract.
+     * @returns A new vector that is the difference of this vector and the given vector.
+     */
+    subtract(b: VectorValue): Vector;
+    /**
+     * Multiplies this vector by a scalar.
+     * @param b The scalar to multiply by.
+     * @returns A new vector that is the product of this vector and the given scalar.
+     */
+    multiply(b: number): Vector;
+    /**
+     * Calculates the dot product of this vector and another vector.
+     * @param b The other vector.
+     * @returns The dot product.
+     */
+    dot(b: VectorValue): number;
+    /**
+     * Calculates the cross product of this vector and another vector.
+     * @param b The other vector.
+     * @returns The cross product as a new vector.
+     */
+    cross(b: VectorValue): Vector;
+    /**
+     * Calculates the length (magnitude) of this vector.
+     * @returns The length of the vector.
+     */
+    length(): number;
+    /**
+     * Normalizes the vector (makes it unit length, i.e., has a length of 1).
+     * @returns A new vector that is the normalized version of this vector.
+     */
+    normalize(): Vector;
 }
-export declare function vector(source: Vector): VectorImpl;
+export declare function vector(source: VectorValue | Vector): Vector;
+export declare function vector(x: number, y: number): Vector;

package/dist/utils/vector.js

@@ -1,53 +1,120 @@
-class VectorImpl {
+class Vector {
   constructor(x, y) {
     this.x = x;
     this.y = y;
   }
-  static create(position) {
-    return new VectorImpl(position.x, position.y);
+  static create(...args) {
+    if (args.length === 2) {
+      return new Vector(args[0], args[1]);
+    }
+    return new Vector(args[0].x, args[0].y);
   }
+  /**
+   * Adds two vectors.
+   * @param a The first vector.
+   * @param b The second vector.
+   * @returns The sum of the two vectors.
+   */
   static add(a, b) {
     return { x: a.x + b.x, y: a.y + b.y };
   }
-  static sub(a, b) {
+  /**
+   * Subtracts two vectors.
+   * @param a The first vector.
+   * @param b The second vector.
+   * @returns The difference of the two vectors.
+   */
+  static subtract(a, b) {
     return { x: a.x - b.x, y: a.y - b.y };
   }
-  static mul(a, b) {
+  /**
+   * Multiplies a vector by a scalar.
+   * @param a The vector.
+   * @param b The scalar.
+   * @returns The scaled vector.
+   */
+  static multiply(a, b) {
     return { x: a.x * b, y: a.y * b };
   }
+  /**
+   * Calculates the dot product of the vectors.
+   * @param a The first vector.
+   * @param b The second vector.
+   * @returns The dot product.
+   */
   static dot(a, b) {
     return a.x * b.x + a.y * b.y;
   }
-  static cross(a, b) {
-    return new VectorImpl(a.y * b.x - a.x * b.y, a.x * b.y - a.y * b.x);
-  }
-  static setLength(a, length) {
-    return vector(a).setLength(length);
-  }
+  /**
+   * Adds the given vector to this vector.
+   * @param b The vector to add.
+   * @returns A new vector that is the sum of this vector and the given vector.
+   */
   add(b) {
-    return new VectorImpl(this.x + b.x, this.y + b.y);
+    return new Vector(this.x + b.x, this.y + b.y);
   }
-  sub(b) {
-    return new VectorImpl(this.x - b.x, this.y - b.y);
+  /**
+   * Subtracts the given vector from this vector.
+   * @param b The vector to subtract.
+   * @returns A new vector that is the difference of this vector and the given vector.
+   */
+  subtract(b) {
+    return new Vector(this.x - b.x, this.y - b.y);
   }
-  mul(b) {
-    return new VectorImpl(this.x * b, this.y * b);
+  /**
+   * Multiplies this vector by a scalar.
+   * @param b The scalar to multiply by.
+   * @returns A new vector that is the product of this vector and the given scalar.
+   */
+  multiply(b) {
+    return new Vector(this.x * b, this.y * b);
   }
+  /**
+   * Calculates the dot product of this vector and another vector.
+   * @param b The other vector.
+   * @returns The dot product.
+   */
   dot(b) {
     return this.x * b.x + this.y * b.y;
   }
+  /**
+   * Calculates the cross product of this vector and another vector.
+   * @param b The other vector.
+   * @returns The cross product as a new vector.
+   */
   cross(b) {
-    return new VectorImpl(this.y * b.x - this.x * b.y, this.x * b.y - this.y * b.x);
+    return new Vector(this.y * b.x - this.x * b.y, this.x * b.y - this.y * b.x);
   }
-  abs() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
+  /**
+   * Calculates the length (magnitude) of this vector.
+   * @returns The length of the vector.
+   */
+  length() {
+    if (this.x === 0 && this.y === 0) {
+      return 0;
+    }
+    return Math.sqrt(this.x ** 2 + this.y ** 2);
   }
-  setLength(length) {
-    return this.mul(length / this.abs());
+  /**
+   * Normalizes the vector (makes it unit length, i.e., has a length of 1).
+   * @returns A new vector that is the normalized version of this vector.
+   */
+  normalize() {
+    const len = this.length();
+    if (len === 0) {
+      return new Vector(0, 0);
+    }
+    return new Vector(this.x / len, this.y / len);
   }
 }
-function vector(source) {
-  return VectorImpl.create(source);
+function vector(...args) {
+  if (args.length === 1 && args[0] instanceof Vector) {
+    return args[0];
+  }
+  if (args.length === 2) {
+    return new Vector(args[0], args[1]);
+  }
+  return new Vector(args[0].x, args[0].y);
 }
 
-export { VectorImpl, vector };
+export { Vector, vector };

package/dist/utils/view-bounds.d.ts

@@ -0,0 +1,8 @@
+import { DiagramEdge, DynamicViewDisplayVariant, LayoutedView, BBox } from '@likec4/core/types';
+/**
+ * Picks appropriate bounds from the view,
+ * depending on its type and dynamic variant
+ */
+export declare function pickViewBounds(view: LayoutedView, dynamicVariant?: DynamicViewDisplayVariant): BBox;
+export declare function calcEdgeBounds({ points, controlPoints, labelBBox }: DiagramEdge): BBox;
+export declare function calcViewBounds({ nodes, edges }: Pick<LayoutedView, 'nodes' | 'edges'>): BBox;

package/dist/utils/view-bounds.js

@@ -0,0 +1,57 @@
+import { BBox } from '@likec4/core/types';
+
+function pickViewBounds(view, dynamicVariant) {
+  if (view._type === "dynamic") {
+    try {
+      dynamicVariant ??= view.variant;
+      if (dynamicVariant === "sequence") {
+        return view.sequenceLayout.bounds;
+      }
+    } catch {
+    }
+  }
+  return view.bounds;
+}
+function calcEdgeBounds({ points, controlPoints, labelBBox }) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const p of points) {
+    minX = Math.min(minX, p[0]);
+    minY = Math.min(minY, p[1]);
+    maxX = Math.max(maxX, p[0]);
+    maxY = Math.max(maxY, p[1]);
+  }
+  if (controlPoints) {
+    for (const p of controlPoints) {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x);
+      maxY = Math.max(maxY, p.y);
+    }
+  }
+  if (labelBBox) {
+    minX = Math.min(minX, labelBBox.x);
+    minY = Math.min(minY, labelBBox.y);
+    maxX = Math.max(maxX, labelBBox.x + labelBBox.width);
+    maxY = Math.max(maxY, labelBBox.y + labelBBox.height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function calcViewBounds({ nodes, edges }) {
+  return BBox.expand(
+    BBox.merge(
+      ...nodes,
+      ...edges.map(calcEdgeBounds)
+    ),
+    10
+  );
+}
+
+export { calcEdgeBounds, calcViewBounds, pickViewBounds };

package/dist/utils/xyflow.d.ts

@@ -1,8 +1,54 @@
-import { DiagramEdge, NonEmptyArray, Point, BBox } from '@likec4/core';
+import { NonEmptyArray, Point, BBox } from '@likec4/core';
 import { InternalNode, Rect, XYPosition, Position } from '@xyflow/react';
 import { NodeHandle } from '@xyflow/system';
+import { Vector } from './vector';
 export declare function distance(a: XYPosition, b: XYPosition): number;
-export declare const nodeToRect: (nd: InternalNode) => Rect;
+/**
+ * Minimal type to access only needed properties of InternalNode
+ */
+export type MinimalInternalNode = {
+    internals: {
+        positionAbsolute: XYPosition;
+    };
+    measured?: {
+        width?: number;
+        height?: number;
+    };
+    width?: number;
+    height?: number;
+    initialWidth?: number;
+    initialHeight?: number;
+};
+/**
+ * Extracts only the minimal properties from an InternalNode
+ * needed for geometric calculations.
+ *
+ * @param nd - The InternalNode to extract from.
+ * @returns An object containing only the necessary properties.
+ */
+export declare function extractMinimalInternalNode<N extends InternalNode>(nd: N): MinimalInternalNode;
+export declare function isEqualMinimalInternalNodes(a: MinimalInternalNode, b: MinimalInternalNode): boolean;
+export declare const nodeToRect: (nd: MinimalInternalNode) => Rect;
+export declare function getNodeCenter(node: MinimalInternalNode): XYPosition;
+/**
+ * Helper function returns the intersection point
+ * of the line between the center of the intersectionNode and the target
+ *
+ * @param intersectionNode the node that is the center of the line
+ * @param target position of the target
+ * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
+ * @returns coordinates of the intersection point
+ */
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: MinimalInternalNode, target: XYPosition, nodeMargin?: number): Vector;
+/**
+ * Helper function returns the intersection point
+ * of the line between the center of the intersectionNode and the target
+ *
+ * @param intersectionNode the node that is the center of the line
+ * @param targetNode the target node
+ * @returns coordinates of the intersection point
+ */
+export declare function getNodeIntersection(intersectionNode: MinimalInternalNode, targetNode: MinimalInternalNode): XYPosition;
 /**
  * Checks if a rectangle is completely inside another rectangle.
  *
@@ -11,14 +57,10 @@ export declare const nodeToRect: (nd: InternalNode) => Rect;
  * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
  */
 export declare const isInside: (test: Rect, target: Rect) => boolean;
-export declare function bezierControlPoints(diagramEdge: Pick<DiagramEdge, 'points'>): XYPosition[];
+export declare function bezierControlPoints(points: NonEmptyArray<Point>): XYPosition[];
 export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
 export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;
 export declare function stopPropagation(e: React.MouseEvent): void;
-export declare function centerXYInternalNode<N extends InternalNode>(nd: N): {
-    x: number;
-    y: number;
-};
 export declare function bezierPath(bezierSpline: NonEmptyArray<Point>): string;
 export declare function toXYFlowPosition(position: 'left' | 'right' | 'top' | 'bottom'): Position;
 export declare function createXYFlowNodeNandles(bbox: BBox): NodeHandle[];

package/dist/utils/xyflow.js

@@ -3,10 +3,69 @@ import { invariant } from '@likec4/core/utils';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
 import { Bezier } from 'bezier-js';
-import { isArray, hasAtLeast } from 'remeda';
+import { hasAtLeast, isNumber, isArray } from 'remeda';
+import { vector } from './vector.js';
 
-function bezierControlPoints(diagramEdge) {
-  let [start, ...bezierPoints] = diagramEdge.points;
+function extractMinimalInternalNode(nd) {
+  const minimal = {
+    internals: {
+      positionAbsolute: nd.internals.positionAbsolute
+    }
+  };
+  if (nd.measured) {
+    minimal.measured = nd.measured;
+  }
+  if (isNumber(nd.width)) {
+    minimal.width = nd.width;
+  }
+  if (isNumber(nd.height)) {
+    minimal.height = nd.height;
+  }
+  if (isNumber(nd.initialWidth)) {
+    minimal.initialWidth = nd.initialWidth;
+  }
+  if (isNumber(nd.initialHeight)) {
+    minimal.initialHeight = nd.initialHeight;
+  }
+  return minimal;
+}
+function isEqualMinimalInternalNodes(a, b) {
+  const posA = a.internals.positionAbsolute;
+  const posB = b.internals.positionAbsolute;
+  if (posA.x !== posB.x || posA.y !== posB.y) {
+    return false;
+  }
+  const widthA = a.measured?.width ?? a.width ?? a.initialWidth ?? 0;
+  const widthB = b.measured?.width ?? b.width ?? b.initialWidth ?? 0;
+  if (widthA !== widthB) {
+    return false;
+  }
+  const heightA = a.measured?.height ?? a.height ?? a.initialHeight ?? 0;
+  const heightB = b.measured?.height ?? b.height ?? b.initialHeight ?? 0;
+  return heightA === heightB;
+}
+function getNodeCenter(node) {
+  const { width, height } = getNodeDimensions(node);
+  const { x, y } = node.internals.positionAbsolute;
+  return {
+    x: x + width / 2,
+    y: y + height / 2
+  };
+}
+function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
+  const nodeCenter = getNodeCenter(intersectionNode);
+  const { width, height } = getNodeDimensions(intersectionNode);
+  const v = vector(target.x, target.y).subtract(nodeCenter);
+  const xScale = (nodeMargin + (width || 0) / 2) / v.x;
+  const yScale = (nodeMargin + (height || 0) / 2) / v.y;
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+  return vector(v).multiply(scale).add(nodeCenter);
+}
+function getNodeIntersection(intersectionNode, targetNode) {
+  return getNodeIntersectionFromCenterToPoint(intersectionNode, getNodeCenter(targetNode));
+}
+function bezierControlPoints(points) {
+  let [start, ...bezierPoints] = points;
   invariant(start, "start should be defined");
   const handles = [
     // start
@@ -42,13 +101,6 @@ function isSamePoint(a, b) {
 function stopPropagation(e) {
   return e.stopPropagation();
 }
-function centerXYInternalNode(nd) {
-  const { width, height } = getNodeDimensions(nd);
-  return {
-    x: nd.internals.positionAbsolute.x + width / 2,
-    y: nd.internals.positionAbsolute.y + height / 2
-  };
-}
 function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
   invariant(start, "start should be defined");
@@ -62,4 +114,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, centerXYInternalNode, isSamePoint, stopPropagation };
+export { bezierControlPoints, bezierPath, extractMinimalInternalNode, getNodeCenter, getNodeIntersection, getNodeIntersectionFromCenterToPoint, isEqualMinimalInternalNodes, isSamePoint, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -65,13 +65,14 @@
     "@dagrejs/dagre": "1.1.5",
     "@floating-ui/dom": "^1.7.4",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "8.3.5",
-    "@mantine/hooks": "8.3.5",
+    "@mantine/core": "8.3.7",
+    "@mantine/hooks": "8.3.7",
     "@nanostores/react": "1.0.0",
-    "@react-hookz/web": "^25.1.1",
-    "@xstate/react": "^6.0.0",
+    "@react-hookz/web": "^25.2.0",
+    "@xstate/react": "6.0.0",
     "@xyflow/react": "12.9.0",
     "@xyflow/system": "0.0.71",
+    "immer": "^10.2.0",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.3.2",
@@ -82,9 +83,9 @@
     "react-shadow": "^20.6.0",
     "remeda": "^2.32.0",
     "type-fest": "^4.41.0",
-    "xstate": "^5.23.0",
-    "@likec4/core": "1.43.0",
-    "@likec4/styles": "1.43.0"
+    "xstate": "5.24.0",
+    "@likec4/core": "1.44.0",
+    "@likec4/styles": "1.44.0"
   },
   "peerDependencies": {
     "@pandacss/dev": "^1.4.3",
@@ -111,21 +112,21 @@
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
     "@types/node": "~20.19.22",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "oxlint": "1.24.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "oxlint": "1.28.0",
     "postcss": "8.5.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "typescript": "5.9.3",
-    "vite": "^7.1.11",
+    "vite": "^7.2.2",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "3.2.4",
+    "vitest": "4.0.8",
     "wireit": "0.14.12",
     "zx": "8.8.5",
-    "@likec4/tsconfig": "1.43.0",
-    "@likec4/devops": "1.42.0"
+    "@likec4/devops": "1.42.0",
+    "@likec4/tsconfig": "1.44.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",