@likec4/diagram 1.47.0 → 1.48.0

package/dist/utils/view-bounds.js

@@ -1,13 +1,17 @@
+import { invariant } from '@likec4/core';
 import { BBox } from '@likec4/core/types';
 
 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,6 @@
-import { NonEmptyArray, Point, BBox, Vector } from '@likec4/core';
+import { NonEmptyArray, Point, BBox, VectorValue } from '@likec4/core';
 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;
 /**
@@ -40,7 +40,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): VectorValue;
 /**
  * Helper function returns the intersection point
  * of the line between the center of the intersectionNode and the target
@@ -65,3 +65,19 @@ 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

@@ -6,14 +6,11 @@ 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;
-}
 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
+  width: Math.round(nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0),
+  height: Math.round(nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0)
 });
 function getNodeCenter(node) {
   const { width, height } = getNodeDimensions(node);
@@ -30,7 +27,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).round().toObject();
 }
 function bezierControlPoints(points) {
   let [start, ...bezierPoints] = points;
@@ -70,17 +67,63 @@ function distanceBetweenPoints(a, b) {
 function stopPropagation(e) {
   return e.stopPropagation();
 }
+function printPoint(point) {
+  return `${Math.round(point[0])},${Math.round(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, distanceBetweenPoints, getNodeCenter, getNodeIntersectionFromCenterToPoint, isSamePoint, nodeToRect, parsePaddings, stopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -21,6 +21,7 @@
     "*.css",
     "panda.buildinfo.json",
     "!**/*.spec.*",
+    "!**/__*/**",
     "!**/*.d.ts.map"
   ],
   "sideEffects": false,
@@ -65,31 +66,31 @@
     "@dagrejs/dagre": "1.1.8",
     "@floating-ui/dom": "^1.7.4",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "8.3.10",
-    "@mantine/hooks": "8.3.10",
-    "@nanostores/react": "1.0.0",
+    "@mantine/core": "8.3.13",
+    "@mantine/hooks": "8.3.13",
     "@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",
     "bezier-js": "^6.1.4",
     "d3-shape": "^3.2.0",
     "fast-equals": "^6.0.0",
-    "khroma": "2.1.0",
-    "motion": "^12.23.26",
+    "immer": "^11.1.3",
+    "motion": "^12.29.2",
     "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",
     "type-fest": "^4.41.0",
     "xstate": "5.24.0",
-    "@likec4/core": "1.47.0",
-    "@likec4/styles": "1.47.0"
+    "@likec4/styles": "1.48.0",
+    "@likec4/core": "1.48.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,27 +108,27 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.7.2",
+    "@pandacss/dev": "^1.8.1",
     "@statelyai/inspect": "^0.4.0",
     "@tabler/icons-react": "3.36.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/node": "~22.19.3",
-    "@types/react": "19.2.7",
+    "@types/node": "~22.19.7",
+    "@types/react": "19.2.9",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "oxlint": "1.35.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/devops": "1.42.0"
+    "@likec4/devops": "1.42.0",
+    "@likec4/tsconfig": "1.48.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",