@likec4/diagram 1.47.0 → 1.49.0

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

@@ -1,8 +1,9 @@
-import { DiagramEdge, DynamicViewDisplayVariant, LayoutedView, BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
+import { DiagramEdge, DynamicViewDisplayVariant, LayoutedView } 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 calcEdgeBounds({ points, controlPoints, labelBBox }: Pick<DiagramEdge, 'points' | 'controlPoints' | 'labelBBox'>): BBox;
 export declare function calcViewBounds({ nodes, edges }: Pick<LayoutedView, 'nodes' | 'edges'>): BBox;

package/dist/utils/view-bounds.js

@@ -1,13 +1,17 @@
-import { BBox } from '@likec4/core/types';
+import { invariant } from '@likec4/core';
+import { BBox } from '@likec4/core/geometry';
 
 function pickViewBounds(view, dynamicVariant) {
   if (view._type === "dynamic") {
     try {
-      dynamicVariant ??= view.variant;
-      if (dynamicVariant === "sequence") {
+      const variant = dynamicVariant ?? view.variant;
+      if (variant === "sequence") {
+        invariant(view.sequenceLayout, "Sequence layout is not available");
+        invariant(view.sequenceLayout.bounds, "Sequence layout bounds are not available");
         return view.sequenceLayout.bounds;
       }
-    } catch {
+    } catch (error) {
+      console.error(error);
     }
   }
   return view.bounds;
@@ -49,9 +53,9 @@ function calcViewBounds({ nodes, edges }) {
   return BBox.expand(
     BBox.merge(
       ...nodes,
-      ...edges.map(calcEdgeBounds)
+      ...edges.map(calcEdgeBounds).filter((box) => isFinite(box.x) && isFinite(box.y))
     ),
-    10
+    20
   );
 }
 

package/dist/utils/xyflow.d.ts

@@ -1,6 +1,7 @@
-import { NonEmptyArray, Point, BBox, Vector } from '@likec4/core';
+import { NonEmptyArray, Point } from '@likec4/core';
+import { XYPoint, BBox } from '@likec4/core/geometry';
 import { InternalNode, Rect, XYPosition, Position } from '@xyflow/react';
-import { NodeHandle } from '@xyflow/system';
+import { NodeHandle, Padding as XYFlowPadding } from '@xyflow/system';
 import { MouseEvent as ReactMouseEvent } from 'react';
 export declare function distance(a: XYPosition, b: XYPosition): number;
 /**
@@ -29,7 +30,7 @@ export type MinimalInternalNode = {
 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 nodeToRect(nd: MinimalInternalNode): Rect;
 export declare function getNodeCenter(node: MinimalInternalNode): XYPosition;
 /**
  * Helper function returns the intersection point
@@ -40,7 +41,7 @@ export declare function getNodeCenter(node: MinimalInternalNode): XYPosition;
  * @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;
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: BBox, target: XYPosition, nodeMargin?: number): XYPosition;
 /**
  * Helper function returns the intersection point
  * of the line between the center of the intersectionNode and the target
@@ -57,11 +58,31 @@ export declare function getNodeIntersection(intersectionNode: MinimalInternalNod
  * @param target - The target rectangle.
  * @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(points: NonEmptyArray<Point>): NonEmptyArray<XYPosition>;
+export declare function isInside(test: Rect, target: Rect): boolean;
+export declare function bezierControlPoints(points: NonEmptyArray<Point>): NonEmptyArray<XYPoint>;
+/**
+ * Checks if two points are the same, considering both XYPoint (object ) and Point (tuple) formats.
+ * @returns `true` If points are within 2px
+ */
 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: 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[];
+/**
+ * Parses the paddings to an object with top, right, bottom, left, x and y paddings
+ * @internal
+ * @param padding - Padding to parse
+ * @param width - Width of the viewport
+ * @param height - Height of the viewport
+ * @returns An object with the paddings in pixels
+ */
+export declare function parsePaddings(padding: XYFlowPadding, width: number, height: number): {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    x: number;
+    y: number;
+};

package/dist/utils/xyflow.js

@@ -1,20 +1,18 @@
-import { BBox } from '@likec4/core';
-import { vector } from '@likec4/core/geometry';
+import { BBox, vector } from '@likec4/core/geometry';
 import { invariant } from '@likec4/core/utils';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
 import { Bezier } from 'bezier-js';
 import { isArray, hasAtLeast } from 'remeda';
 
-function isEqualRects(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+function nodeToRect(nd) {
+  return {
+    x: Math.trunc(nd.internals.positionAbsolute.x),
+    y: Math.trunc(nd.internals.positionAbsolute.y),
+    width: Math.round(nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0),
+    height: Math.round(nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0)
+  };
 }
-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;
@@ -30,7 +28,7 @@ function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMarg
   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();
+  return vector(v).multiply(scale).add(nodeCenter).trunc().toObject();
 }
 function bezierControlPoints(points) {
   let [start, ...bezierPoints] = points;
@@ -48,8 +46,8 @@ function bezierControlPoints(points) {
     inflections.forEach((t) => {
       const { x, y } = bezier.get(t);
       handles.push({
-        x: Math.round(x),
-        y: Math.round(y)
+        x: Math.trunc(x),
+        y: Math.trunc(y)
       });
     });
     bezierPoints = rest;
@@ -60,27 +58,74 @@ function bezierControlPoints(points) {
   return handles;
 }
 function isSamePoint(a, b) {
-  const pointA = isArray(a) ? { x: a[0], y: a[1] } : a;
-  const pointB = isArray(b) ? { x: b[0], y: b[1] } : b;
-  return distanceBetweenPoints(pointA, pointB) < 2.1;
-}
-function distanceBetweenPoints(a, b) {
-  return Math.hypot(b.x - a.x, b.y - a.y);
+  if (a === b) {
+    return true;
+  }
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y];
+  const [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return Math.hypot(bx - ax, by - ay) < 2.1;
 }
 function stopPropagation(e) {
-  return e.stopPropagation();
+  e.nativeEvent.stopImmediatePropagation();
+  e.stopPropagation();
 }
+const printPoint = (point) => {
+  return `${Math.trunc(point[0])},${Math.trunc(point[1])}`;
+};
 function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
   invariant(start, "start should be defined");
-  let path = `M ${start[0]},${start[1]}`;
+  let path = `M ${printPoint(start)}`;
   while (hasAtLeast(points, 3)) {
     const [cp1, cp2, end, ...rest] = points;
-    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`;
+    path = path + ` C ${printPoint(cp1)} ${printPoint(cp2)} ${printPoint(end)}`;
     points = rest;
   }
   invariant(points.length === 0, "all points should be consumed");
   return path;
 }
+function parsePadding(padding, viewport) {
+  if (typeof padding === "number") {
+    return Math.floor((viewport - viewport / (1 + padding)) * 0.5);
+  }
+  if (typeof padding === "string" && padding.endsWith("px")) {
+    const paddingValue = parseFloat(padding);
+    if (!Number.isNaN(paddingValue)) {
+      return Math.floor(paddingValue);
+    }
+  }
+  if (typeof padding === "string" && padding.endsWith("%")) {
+    const paddingValue = parseFloat(padding);
+    if (!Number.isNaN(paddingValue)) {
+      return Math.floor(viewport * paddingValue * 0.01);
+    }
+  }
+  console.error(
+    `[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`
+  );
+  return 0;
+}
+function parsePaddings(padding, width, height) {
+  if (typeof padding === "string" || typeof padding === "number") {
+    const paddingY = parsePadding(padding, height);
+    const paddingX = parsePadding(padding, width);
+    return {
+      top: paddingY,
+      right: paddingX,
+      bottom: paddingY,
+      left: paddingX,
+      x: paddingX * 2,
+      y: paddingY * 2
+    };
+  }
+  if (typeof padding === "object") {
+    const top = parsePadding(padding.top ?? padding.y ?? 0, height);
+    const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
+    const left = parsePadding(padding.left ?? padding.x ?? 0, width);
+    const right = parsePadding(padding.right ?? padding.x ?? 0, width);
+    return { top, right, bottom, left, x: left + right, y: top + bottom };
+  }
+  return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };
+}
 
-export { bezierControlPoints, bezierPath, distanceBetweenPoints, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isSamePoint, nodeToRect, stopPropagation };
+export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isSamePoint, nodeToRect, parsePaddings, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -16,11 +16,11 @@
   },
   "files": [
     "dist",
-    "bundle",
     "**/package.json",
     "*.css",
     "panda.buildinfo.json",
     "!**/*.spec.*",
+    "!**/__*/**",
     "!**/*.d.ts.map"
   ],
   "sideEffects": false,
@@ -38,6 +38,14 @@
         "default": "./dist/index.js"
       }
     },
+    "./adhoc-editor": {
+      "sources": "./src/adhoc-editor/index.ts",
+      "default": {
+        "types": "./dist/adhoc-editor/index.d.ts",
+        "import": "./dist/adhoc-editor/index.js",
+        "default": "./dist/adhoc-editor/index.js"
+      }
+    },
     "./custom": {
       "sources": "./src/custom/index.ts",
       "default": {
@@ -46,14 +54,6 @@
         "default": "./dist/custom/index.js"
       }
     },
-    "./bundle": {
-      "sources": "./src/index.ts",
-      "default": {
-        "types": "./dist/index.d.ts",
-        "import": "./bundle/index.js",
-        "default": "./bundle/index.js"
-      }
-    },
     "./panda.buildinfo.json": "./panda.buildinfo.json",
     "./styles-min.css": "./styles-min.css",
     "./styles-font.css": "./styles-font.css",
@@ -63,33 +63,37 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.8",
-    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/dom": "^1.7.5",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "8.3.10",
-    "@mantine/hooks": "8.3.10",
-    "@nanostores/react": "1.0.0",
+    "@mantine/core": "8.3.14",
+    "@mantine/hooks": "8.3.14",
     "@nanostores/media-query": "0.1.2",
+    "@nanostores/react": "1.0.0",
     "@react-hookz/web": "^25.2.0",
     "@xstate/react": "6.0.0",
+    "@xstate/store": "3.14.0",
     "@xyflow/react": "12.10.0",
     "@xyflow/system": "0.0.74",
-    "immer": "^11.1.0",
+    "@zag-js/collection": "^1.33.1",
+    "@zag-js/react": "^1.33.1",
+    "@zag-js/tree-view": "^1.33.1",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
+    "defu": "^6.1.4",
     "fast-equals": "^6.0.0",
-    "khroma": "2.1.0",
-    "motion": "^12.23.26",
+    "immer": "^11.1.3",
+    "motion": "^12.33.0",
     "nanostores": "1.1.0",
-    "react-error-boundary": "^6.0.0",
+    "react-error-boundary": "^6.1.0",
     "react-shadow": "^20.6.0",
-    "remeda": "^2.32.0",
+    "remeda": "^2.33.5",
     "type-fest": "^4.41.0",
     "xstate": "5.24.0",
-    "@likec4/core": "1.47.0",
-    "@likec4/styles": "1.47.0"
+    "@likec4/core": "1.49.0",
+    "@likec4/styles": "1.49.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.7.2",
+    "@pandacss/dev": "^1.8.1",
     "@types/react": "^18.x || ^19.x",
     "@types/react-dom": "^18.x || ^19.x",
     "react": "^18.x || ^19.x",
@@ -107,33 +111,31 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.7.2",
+    "@pandacss/dev": "^1.8.1",
     "@statelyai/inspect": "^0.4.0",
-    "@tabler/icons-react": "3.36.0",
+    "@tabler/icons-react": "3.36.1",
     "@types/bezier-js": "^4.1.3",
-    "@types/d3-shape": "^3.1.7",
-    "@types/node": "~22.19.3",
-    "@types/react": "19.2.7",
+    "@types/d3-shape": "^3.1.8",
+    "@types/node": "~22.19.10",
+    "@types/react": "19.2.13",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "oxlint": "1.35.0",
+    "@vitejs/plugin-react": "^5.1.3",
+    "oxlint": "1.43.0",
     "postcss": "8.5.6",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "typescript": "5.9.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "4.0.16",
+    "vitest": "4.0.18",
     "wireit": "0.14.12",
     "zx": "8.8.5",
-    "@likec4/tsconfig": "1.46.1",
+    "@likec4/tsconfig": "1.49.0",
     "@likec4/devops": "1.42.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",
-    "build-dist": "vite build -m production",
-    "build-bundle": "vite build -m bundle",
-    "build": "echo \"use pnpm turbo run build\" || true",
+    "build": "vite build -m production",
     "pack": "pnpm pack",
     "test": "vitest run --no-isolate",
     "clean": "likec4ops clean",