@likec4/diagram 1.43.0 → 1.45.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,86 @@
-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;
+    /**
+     * Rounds the components of the vector to the nearest integers.
+     * @returns A new vector with rounded components.
+     */
+    round(): 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,127 @@
-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);
+  }
+  /**
+   * 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);
   }
-  abs() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
+  /**
+   * 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);
   }
-  setLength(length) {
-    return this.mul(length / this.abs());
+  /**
+   * Rounds the components of the vector to the nearest integers.
+   * @returns A new vector with rounded components.
+   */
+  round() {
+    return new Vector(Math.round(this.x), Math.round(this.y));
   }
 }
-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,58 @@
+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;
+  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);
+    }
+  } else {
+    for (const [x, y] of points) {
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, 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,56 @@
-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 { MouseEvent as ReactMouseEvent } from 'react';
+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 function isEqualRects(a: Rect, b: Rect): 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: BBox, 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 +59,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 stopPropagation(e: ReactMouseEvent): void;
 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

@@ -1,12 +1,39 @@
-import '@likec4/core';
+import { BBox } from '@likec4/core';
 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 { vector } from './vector.js';
 
-function bezierControlPoints(diagramEdge) {
-  let [start, ...bezierPoints] = diagramEdge.points;
+function isEqualRects(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+const nodeToRect = (nd) => ({
+  x: Math.round(nd.internals.positionAbsolute.x),
+  y: Math.round(nd.internals.positionAbsolute.y),
+  width: nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0,
+  height: nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0
+});
+function getNodeCenter(node) {
+  const { width, height } = getNodeDimensions(node);
+  const { x, y } = node.internals.positionAbsolute;
+  return {
+    x: Math.round(x + width / 2),
+    y: Math.round(y + height / 2)
+  };
+}
+function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
+  const { width, height } = intersectionNode;
+  const nodeCenter = BBox.center(intersectionNode);
+  const v = vector(target.x, target.y).subtract(nodeCenter);
+  const xScale = (nodeMargin + width / 2) / v.x;
+  const yScale = (nodeMargin + height / 2) / v.y;
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+  return vector(v).multiply(scale).add(nodeCenter).round();
+}
+function bezierControlPoints(points) {
+  let [start, ...bezierPoints] = points;
   invariant(start, "start should be defined");
   const handles = [
     // start
@@ -42,13 +69,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 +82,4 @@ function bezierPath(bezierSpline) {
   return path;
 }
 
-export { bezierControlPoints, bezierPath, centerXYInternalNode, isSamePoint, stopPropagation };
+export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -65,29 +65,31 @@
     "@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.9",
+    "@mantine/hooks": "8.3.9",
     "@nanostores/react": "1.0.0",
-    "@react-hookz/web": "^25.1.1",
-    "@xstate/react": "^6.0.0",
-    "@xyflow/react": "12.9.0",
-    "@xyflow/system": "0.0.71",
+    "@nanostores/media-query": "0.1.2",
+    "@react-hookz/web": "^25.2.0",
+    "@xstate/react": "6.0.0",
+    "@xyflow/react": "12.9.3",
+    "@xyflow/system": "0.0.73",
+    "immer": "^10.2.0",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
-    "fast-equals": "^5.3.2",
+    "fast-equals": "^5.3.3",
     "khroma": "2.1.0",
     "motion": "^12.23.24",
-    "nanostores": "1.0.1",
+    "nanostores": "1.1.0",
     "react-error-boundary": "^6.0.0",
     "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.45.0",
+    "@likec4/styles": "1.45.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.4.3",
+    "@pandacss/dev": "^1.5.1",
     "@types/react": "^18.x || ^19.x",
     "@types/react-dom": "^18.x || ^19.x",
     "react": "^18.x || ^19.x",
@@ -105,27 +107,27 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.4.3",
+    "@pandacss/dev": "^1.5.1",
     "@statelyai/inspect": "^0.4.0",
     "@tabler/icons-react": "3.35.0",
     "@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.6",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "oxlint": "1.29.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.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "3.2.4",
+    "vitest": "4.0.13",
     "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.45.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",