@likec4/diagram 1.48.0 → 1.50.0

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,5 +1,6 @@
-import { DefaultMap, nonNullable, BBox } from '@likec4/core';
-import { isome, invariant } from '@likec4/core/utils';
+import { DefaultMap, nonNullable } from '@likec4/core';
+import { vector, BBox } from '@likec4/core/geometry';
+import { invariant, isome } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
 import { produce } from 'immer';
 import { useRef, useMemo } from 'react';
@@ -9,7 +10,6 @@ import 'fast-equals';
 import { useDiagram } from '../hooks/safeContext.js';
 import { nodeToRect, bezierControlPoints } from '../utils/xyflow.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
-import { vector } from '@likec4/core/geometry';
 
 class Rect {
   static LeftPadding = 42;
@@ -21,23 +21,17 @@ class Rect {
   minY = Infinity;
   maxX = -Infinity;
   maxY = -Infinity;
-  initialX;
-  initialY;
+  // Initial position absolute and dimensions
+  initial;
   get positionAbsolute() {
     return {
       x: this.minX,
       y: this.minY
     };
   }
-  get initialPositionAbsolute() {
-    return {
-      x: this.initialX,
-      y: this.initialY
-    };
-  }
   set positionAbsolute(pos) {
-    const x = Math.round(pos.x);
-    const y = Math.round(pos.y);
+    const x = Math.trunc(pos.x);
+    const y = Math.trunc(pos.y);
     this.maxX += x - this.minX;
     this.maxY += y - this.minY;
     this.minX = x;
@@ -45,18 +39,24 @@ class Rect {
   }
   get dimensions() {
     return {
-      width: Math.round(this.maxX - this.minX),
-      height: Math.round(this.maxY - this.minY)
+      width: Math.ceil(this.maxX - this.minX),
+      height: Math.ceil(this.maxY - this.minY)
     };
   }
   get diff() {
+    const { x, y } = this.positionAbsolute;
     return {
-      x: Math.round(this.positionAbsolute.x - this.initialX),
-      y: Math.round(this.positionAbsolute.y - this.initialY)
+      x: Math.trunc(x - this.initial.x),
+      y: Math.trunc(y - this.initial.y)
     };
   }
   get isMoved() {
-    return this.diff.x !== 0 || this.diff.y !== 0;
+    const diff = this.diff;
+    return diff.x !== 0 || diff.y !== 0;
+  }
+  get isResized() {
+    const dim = this.dimensions;
+    return dim.width !== this.initial.width || dim.height !== this.initial.height;
   }
   // Position relative to parent
   get position() {
@@ -79,8 +79,12 @@ class Rect {
     const { width, height } = getNodeDimensions(xynode);
     this.maxX = this.minX + Math.ceil(width);
     this.maxY = this.minY + Math.ceil(height);
-    this.initialX = this.positionAbsolute.x;
-    this.initialY = this.positionAbsolute.y;
+    this.initial = {
+      x: this.minX,
+      y: this.minY,
+      width: Math.ceil(width),
+      height: Math.ceil(height)
+    };
     if (parent) {
       parent.children.push(this);
     }
@@ -125,14 +129,13 @@ function makeEdgeModifier(edge, anchor) {
             x: pt.x + dx,
             y: pt.y + dy
           }));
+        } else {
+          draft.data.controlPoints = null;
         }
         if (edge.data.labelBBox) {
-          draft.data.labelBBox = {
-            x: edge.data.labelBBox.x + dx,
-            y: edge.data.labelBBox.y + dy,
-            width: edge.data.labelBBox.width,
-            height: edge.data.labelBBox.height
-          };
+          draft.data.labelBBox ??= edge.data.labelBBox;
+          draft.data.labelBBox.x = edge.data.labelBBox.x + dx;
+          draft.data.labelBBox.y = edge.data.labelBBox.y + dy;
         }
       })
     };
@@ -160,14 +163,18 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
     }
     const d = vector(dx, dy);
     const relativePoint = (pt) => {
-      const p = vector(pt);
-      const staticToP = p.subtract(staticV);
+      const point = vector(pt);
+      const staticToP = point.subtract(staticV);
       const projLength = staticToP.dot(staticToAnchor);
       const coeff = clamp(projLength / staticToAnchorLength ** 2, {
         min: -1,
         max: 1
       });
-      return p.add(d.multiply(coeff)).round().toObject();
+      const newPoint = point.add(d.multiply(coeff)).trunc();
+      return {
+        x: newPoint.x,
+        y: newPoint.y
+      };
     };
     return {
       id: edge.id,
@@ -245,41 +252,49 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const rectsToUpdate = [...rects.values()];
   const edgeModifiers = /* @__PURE__ */ new Map();
   const findMovingAncestor = (nodeId) => {
-    return rects.get(nodeId) ?? ancestorsOf.get(nodeId).map((id) => rects.get(id)).find((s) => !!s) ?? null;
+    const r = rects.get(nodeId);
+    if (r) {
+      return r;
+    }
+    for (const parent of ancestorsOf.get(nodeId)) {
+      const rect = rects.get(parent);
+      if (rect) {
+        return rect;
+      }
+    }
+    return null;
   };
   const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
   for (const edge of edges) {
     const isSourceMoving = movingNodes.has(edge.source);
     const isTargetMoving = movingNodes.has(edge.target);
+    if (!isSourceMoving && !isTargetMoving) {
+      continue;
+    }
     if (isSourceMoving && isTargetMoving) {
       let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
-      if (r) {
-        edgeModifiers.set(edge, makeEdgeModifier(edge, r));
-      }
+      invariant(!!r, "At least one of the edge nodes should have a moving ancestor");
+      edgeModifiers.set(edge, makeEdgeModifier(edge, r));
       continue;
     }
-    if (isSourceMoving !== isTargetMoving) {
-      const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
-      if (!movingRect) {
-        continue;
-      }
-      const [sourceNode, targetNode] = pipe(
-        [edge.source, edge.target],
-        map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)),
-        map(nodeToRect)
-      );
-      const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
-      edgeModifiers.set(
+    invariant(isSourceMoving !== isTargetMoving, "Logic error");
+    const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+    invariant(!!movingRect, "Moving endpoint should be found");
+    const [sourceNode, targetNode] = pipe(
+      [edge.source, edge.target],
+      map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)),
+      map(nodeToRect)
+    );
+    const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
+    edgeModifiers.set(
+      edge,
+      makeRelativeEdgeModifier(
         edge,
-        makeRelativeEdgeModifier(
-          edge,
-          movingRect,
-          anchorNode,
-          staticNode
-        )
-      );
-      continue;
-    }
+        movingRect,
+        anchorNode,
+        staticNode
+      )
+    );
   }
   function applyConstraints(targets) {
     for (const r of targets) {
@@ -307,9 +322,25 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   }
   const _edgeModifiers = [...edgeModifiers.values()];
   function updateXYFlow() {
+    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges, nodeLookup: nodeLookup2 } = xyflowApi.getState();
+    for (const id of editingNodeIds) {
+      const rect = rects.get(id);
+      if (!rect) {
+        console.warn(`Rect not found for id ${id}`);
+        continue;
+      }
+      const node = nodeLookup2.get(id);
+      if (!node) {
+        console.warn(`Node not found for id ${id}`);
+        continue;
+      }
+      rect.positionAbsolute = node.internals.positionAbsolute;
+    }
     applyConstraints(rectsToUpdate);
-    const nodeUpdates = rectsToUpdate.reduce((acc, r) => {
-      acc.push({
+    const nodeUpdates = [];
+    const edgeUpdates = [];
+    for (const r of rectsToUpdate) {
+      nodeUpdates.push({
         id: r.id,
         type: "position",
         dragging: false,
@@ -317,52 +348,52 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
         positionAbsolute: r.positionAbsolute
       });
       if (r instanceof CompoundRect) {
-        acc.push({
+        nodeUpdates.push({
           id: r.id,
           type: "dimensions",
           setAttributes: true,
+          resizing: false,
           dimensions: r.dimensions
         });
       }
-      return acc;
-    }, []);
-    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
-    triggerNodeChanges(nodeUpdates);
-    const changes = _edgeModifiers.map((fm) => fm(edgeLookup));
-    if (changes.length > 0) {
-      triggerEdgeChanges(changes);
+    }
+    if (nodeUpdates.length > 0) {
+      triggerNodeChanges(nodeUpdates);
+    }
+    for (const fm of _edgeModifiers) {
+      edgeUpdates.push(fm(edgeLookup));
+    }
+    if (edgeUpdates.length > 0) {
+      triggerEdgeChanges(edgeUpdates);
     }
   }
   let animationFrameId = null;
-  function onMove() {
-    if (rectsToUpdate.length === 0) {
-      return;
-    }
+  function cancelPending() {
     if (animationFrameId !== null) {
       cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
     }
-    animationFrameId = requestAnimationFrame(() => {
+  }
+  function flushPending() {
+    cancelPending();
+    updateXYFlow();
+  }
+  function onMove() {
+    animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      for (const id of editingNodeIds) {
-        const rect = rects.get(id);
-        if (!rect) {
-          console.warn(`Rect not found for id ${id}`);
-          continue;
-        }
-        const node = nodeLookup.get(id);
-        if (!node) {
-          console.warn(`Node not found for id ${id}`);
-          continue;
-        }
-        rect.positionAbsolute = node.internals.positionAbsolute;
-      }
       updateXYFlow();
     });
   }
+  function hasChanges() {
+    return isome(rectsToUpdate, (r) => r.isMoved || r.isResized);
+  }
   return {
     rects,
     onMove,
-    updateXYFlow
+    updateXYFlow,
+    hasChanges,
+    cancelPending,
+    flushPending
   };
 }
 function useLayoutConstraints() {
@@ -372,7 +403,6 @@ function useLayoutConstraints() {
   return useMemo(() => {
     return {
       onNodeDragStart: (_event, xynode) => {
-        diagram.startEditing("node");
         const { nodeLookup } = xystore.getState();
         const draggingNodes = pipe(
           Array.from(nodeLookup.values()),
@@ -380,6 +410,7 @@ function useLayoutConstraints() {
           map((n) => n.id)
         );
         if (hasAtLeast(draggingNodes, 1)) {
+          diagram.startEditing("node");
           solverRef.current = createLayoutConstraints(xystore, draggingNodes);
         }
       },
@@ -387,8 +418,16 @@ function useLayoutConstraints() {
         solverRef.current?.onMove();
       },
       onNodeDragStop: (_event) => {
-        const moved = solverRef.current ? isome(solverRef.current.rects.values(), (r) => r.isMoved) : false;
-        diagram.stopEditing(moved);
+        if (!solverRef.current) {
+          return;
+        }
+        const hasChanges = solverRef.current.hasChanges();
+        if (hasChanges) {
+          solverRef.current.flushPending();
+        } else {
+          solverRef.current.cancelPending();
+        }
+        diagram.stopEditing(hasChanges);
         solverRef.current = void 0;
       }
     };

package/dist/likec4diagram/xyflow-diagram/diagram-view.js

@@ -80,6 +80,7 @@ function diagramToXY(opts) {
       x: node.x,
       y: node.y,
       drifts: node.drifts ?? null,
+      notes: node.notes,
       viewLayoutDir
     };
     const leafNodeData = {
@@ -96,6 +97,7 @@ function diagramToXY(opts) {
       style: node.style,
       icon: node.icon ?? null,
       tags: node.tags,
+      notes: node.notes,
       x: node.x,
       y: node.y,
       isMultiple: node.style?.multiple ?? false,

package/dist/likec4diagram/xyflow-sequence/sequence-layout.js

@@ -46,7 +46,9 @@ function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
       depth,
       isViewGroup: true,
       drifts: node.drifts ?? null,
-      viewLayoutDir: "LR"
+      viewLayoutDir: "LR",
+      // Ignore notes for Compound nodes
+      notes: void 0
     },
     // zIndex: SeqZIndex.compound,
     position: {
@@ -87,7 +89,9 @@ function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
       viewId: view.id,
       parallelPrefix,
       drifts: null,
-      viewLayoutDir: "LR"
+      viewLayoutDir: "LR",
+      // Ignore notes for Parallel Area nodes
+      notes: void 0
     },
     zIndex: SeqZIndex.parallel,
     position: {
@@ -131,6 +135,7 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
       description: actor.description ?? null,
       viewHeight: bounds.height,
       viewId: view.id,
+      notes: actor.notes,
       ports,
       drifts: actor.drifts ?? null,
       viewLayoutDir: "LR"

package/dist/navigationpanel/NavigationPanel.js

@@ -8,7 +8,7 @@ import * as m from 'motion/react-m';
 import { memo, useEffect } from 'react';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useCurrentView } from '../hooks/useCurrentView.js';
-import { useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+import { useOptionalCurrentViewModel } from '../context/LikeC4ModelContext.js';
 import { useDiagramContext } from '../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 import { navigationPanelActorLogic } from './actor.js';
@@ -41,7 +41,7 @@ const NavigationPanel = memo(() => {
   }, [actorRef, diagram]);
   useEffect(() => {
     actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
-  }, [viewModel, view]);
+  }, [actorRef, viewModel, view]);
   return /* @__PURE__ */ jsx(
     VStack,
     {

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from '@likec4/core/model';
 import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
-import { cx, css } from '@likec4/styles/css';
+import { css, cx } from '@likec4/styles/css';
 import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
-import { PopoverDropdown, ScrollAreaAutosize, Input, createScopedKeydownHandler, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
+import { PopoverDropdown, ScrollAreaAutosize, Input, Button, rem, Divider, createScopedKeydownHandler, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
 import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
@@ -12,18 +12,18 @@ import { shallowEqual, deepEqual } from 'fast-equals';
 import { memo, useDeferredValue, useState, useEffect, useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
+import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
-import { useOnDiagramEvent } from '../hooks/useDiagram.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",
@@ -240,7 +240,7 @@ function FoundedView({ view, highlight, ...props }) {
       className: cx(
         css({
           _groupHover: {
-            color: "mantine.colors.dimmed"
+            color: "text.dimmed"
           }
         }),
         inheritColor,
@@ -265,7 +265,7 @@ function FoundedView({ view, highlight, ...props }) {
       className,
       children: [
         folderIcon,
-        /* @__PURE__ */ jsx(Breadcrumbs, { separator: /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke: 1.5 }), separatorMargin: 3, children: breadcrumbs })
+        /* @__PURE__ */ jsx(Breadcrumbs, { separator: btnRightSection, separatorMargin: 3, children: breadcrumbs })
       ]
     }
   );
@@ -468,7 +468,7 @@ function SearchInput(props) {
         }),
         input: css({
           _placeholder: {
-            color: "mantine.colors.dimmed"
+            color: "text.dimmed"
           },
           _focus: {
             outline: "none"

package/dist/navigationpanel/_common.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { navigationPanelActionIcon } from '@likec4/styles/recipes';
-import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
+import { Tooltip as Tooltip$1, ActionIcon, ThemeIcon, Breadcrumbs } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/navigationpanel/actor.js

@@ -1,5 +1,5 @@
 import { isEmpty } from 'remeda';
-import { setup, emit, assign, assertEvent, raise } from 'xstate';
+import { setup, emit, assertEvent, assign, raise } from 'xstate';
 
 const _actorLogic = setup({
   types: {

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -3,9 +3,9 @@ import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 function CompareActionsMenu({
   disabled = false,