@likec4/diagram 1.48.0 → 1.50.0

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -1,6 +1,7 @@
-import { nonNullable, BBox, invariant } from '@likec4/core';
-import { getViewportForBounds } from '@xyflow/react';
+import { nonNullable, isNonEmptyArray, BBox, invariant } from '@likec4/core';
+import { getViewportForBounds, getNodesBounds } from '@xyflow/react';
 import { assertEvent } from 'xstate';
+import { calcEdgeBounds } from '../../utils/view-bounds.js';
 import { machine } from './machine.setup.js';
 import { viewBounds, activeSequenceBounds, focusedBounds } from './utils.js';
 import { MinZoom } from '../../base/const.js';
@@ -45,6 +46,40 @@ const setViewportCenter = (params) => machine.createAction(({ context, event })
     console.error("Error during setViewportCenter", { err });
   });
 });
+const centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
+  assertEvent(event, "xyflow.centerViewport");
+  const xystate = context.xystore.getState();
+  if ("edgeId" in event) {
+    const edge = xystate.edgeLookup.get(event.edgeId);
+    if (!edge) {
+      return { type: "noop" };
+    }
+    const sourceNode = xystate.nodeLookup.get(edge.source);
+    const targetNode = xystate.nodeLookup.get(edge.target);
+    if (!sourceNode || !targetNode) {
+      return { type: "noop" };
+    }
+    const bounds2 = getNodesBounds([sourceNode, targetNode], xystate);
+    const edgeBounds = calcEdgeBounds({
+      points: edge.data.points,
+      controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
+      labelBBox: edge.data.labelBBox ?? null
+    });
+    return {
+      type: "xyflow.fitDiagram",
+      bounds: BBox.merge(bounds2, edgeBounds)
+    };
+  }
+  const node = xystate.nodeLookup.get(event.nodeId);
+  if (!node) {
+    return { type: "noop" };
+  }
+  const bounds = getNodesBounds([node], xystate);
+  return {
+    type: "xyflow.fitDiagram",
+    bounds
+  };
+});
 const fitDiagram = (params) => machine.createAction(({ context, event }) => {
   let bounds, duration;
   if (params) {
@@ -156,4 +191,4 @@ const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, cont
   }
 });
 
-export { assignViewportBefore, cancelFitDiagram, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };
+export { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };

package/dist/likec4diagram/state/machine.js

@@ -16,7 +16,10 @@ const _diagramMachine = machine.createMachine({
     ...input,
     xyedges: [],
     xynodes: [],
-    features: { ...DefaultFeatures },
+    features: {
+      ...DefaultFeatures,
+      ...input.features
+    },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
       enableCompareWithLatest: false

package/dist/likec4diagram/state/machine.setup.d.ts

@@ -1,4 +1,4 @@
-import { BBox } from '@likec4/core';
+import { BBox } from '@likec4/core/geometry';
 import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, WhereOperator } from '@likec4/core/types';
 import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
 import { MouseEvent } from 'react';
@@ -44,6 +44,7 @@ export interface Input {
     fitViewPadding: ViewPaddings;
     where: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+    features?: EnabledFeatures;
 }
 export type ToggledFeatures = {
     [P in `enable${TogglableFeature}`]?: boolean;
@@ -143,6 +144,14 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.setViewport';
     duration?: number;
     viewport: Viewport;
+} | {
+    type: 'xyflow.centerViewport';
+    nodeId: NodeId;
+    duration?: number;
+} | {
+    type: 'xyflow.centerViewport';
+    edgeId: EdgeId;
+    duration?: number;
 } | {
     type: 'update.nodeData';
     nodeId: NodeId;
@@ -166,7 +175,7 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     bounds: BBox;
 } | {
     type: 'update.inputs';
-    inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant'>>;
+    inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant' | 'features'>>;
 } | {
     type: 'update.features';
     features: EnabledFeatures;
@@ -223,6 +232,14 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     direction: 'next' | 'previous';
 } | {
     type: 'walkthrough.end';
+} | {
+    type: 'highlight.node';
+    nodeId: NodeId;
+} | {
+    type: 'highlight.edge';
+    edgeId: EdgeId;
+} | {
+    type: 'unhighlight.all';
 } | {
     type: 'notations.highlight';
     notation: ElementNotation;

package/dist/likec4diagram/state/machine.state.navigating.js

@@ -1,4 +1,4 @@
-import { BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
 import { invariant } from '@likec4/core/utils';
 import { isTruthy } from 'remeda';
 import { enqueueActions, assertEvent } from 'xstate';

package/dist/likec4diagram/state/machine.state.ready.d.ts

@@ -2257,7 +2257,6 @@ export declare const ready: {
             }>, never, never, never, never>[];
         };
         'layout.resetManualLayout': {
-            guard: "not readonly";
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
@@ -2562,6 +2561,64 @@ export declare const ready: {
                 };
             }>, never, never, never, never>;
         };
+        'highlight.*': {
+            actions: ActionFunction<Context, Events, Events, undefined, Values<{
+                hotkeyActorLogic: {
+                    src: "hotkeyActorLogic";
+                    logic: HotkeyActorLogic;
+                    id: "hotkey";
+                };
+                overlaysActorLogic: {
+                    src: "overlaysActorLogic";
+                    logic: OverlaysActorLogic;
+                    id: "overlays";
+                };
+                searchActorLogic: {
+                    src: "searchActorLogic";
+                    logic: SearchActorLogic;
+                    id: "search";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+                editorActor: {
+                    src: "editorActor";
+                    logic: EditorActorLogic;
+                    id: "editor";
+                };
+            }>, never, never, never, never>;
+        };
+        'unhighlight.all': {
+            actions: ActionFunction<Context, Events, Events, undefined, Values<{
+                hotkeyActorLogic: {
+                    src: "hotkeyActorLogic";
+                    logic: HotkeyActorLogic;
+                    id: "hotkey";
+                };
+                overlaysActorLogic: {
+                    src: "overlaysActorLogic";
+                    logic: OverlaysActorLogic;
+                    id: "overlays";
+                };
+                searchActorLogic: {
+                    src: "searchActorLogic";
+                    logic: SearchActorLogic;
+                    id: "search";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+                editorActor: {
+                    src: "editorActor";
+                    logic: EditorActorLogic;
+                    id: "editor";
+                };
+            }>, never, never, never, never>;
+        };
         'open.elementDetails': {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -3587,6 +3644,9 @@ export declare const ready: {
                 };
             }>, never, EmittedEvents>;
         };
+        'xyflow.centerViewport': {
+            actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+        };
         'xyflow.fitDiagram': {
             guard: "enabled: FitView";
             actions: ( ActionFunction<Context, Events, Events, unknown, Values<{

package/dist/likec4diagram/state/machine.state.ready.js

@@ -1,4 +1,4 @@
-import { resetLastClickedNode, emitOpenSourceOfView, emitPaneClick, onNodeMouseLeave, onNodeMouseEnter, assignLastClickedNode, emitNodeClick, onEdgeMouseLeave, onEdgeMouseEnter, startEditing, onEdgeDoubleClick, stopEditing, emitEdgeClick, updateView, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, undimEverything, tagHighlight, emitOpenSource, openOverlay, notationsHighlight, handleNavigate, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
+import { resetLastClickedNode, emitOpenSourceOfView, emitPaneClick, onNodeMouseLeave, onNodeMouseEnter, assignLastClickedNode, emitNodeClick, onEdgeMouseLeave, onEdgeMouseEnter, startEditing, onEdgeDoubleClick, stopEditing, emitEdgeClick, updateView, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, undimEverything, tagHighlight, emitOpenSource, openOverlay, highlightNodeOrEdge, notationsHighlight, handleNavigate, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
 import { machine, to } from './machine.setup.js';
 import { focused } from './machine.state.ready.focused.js';
 import { idle } from './machine.state.ready.idle.js';
@@ -6,7 +6,7 @@ import { printing } from './machine.state.ready.printing.js';
 import { walkthrough } from './machine.state.ready.walkthrough.js';
 import { typedSystem } from './utils.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
-import { setViewport, cancelFitDiagram, raiseFitDiagram, fitDiagram } from './machine.actions.layout.js';
+import { setViewport, cancelFitDiagram, raiseFitDiagram, fitDiagram, centerOnNodeOrEdge } from './machine.actions.layout.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
 
 const ready = machine.createStateConfig({
@@ -48,7 +48,6 @@ const ready = machine.createStateConfig({
       ]
     },
     "layout.resetManualLayout": {
-      guard: "not readonly",
       actions: [
         cancelEditing(),
         disableCompareWithLatest(),
@@ -69,6 +68,12 @@ const ready = machine.createStateConfig({
     "notations.unhighlight": {
       actions: undimEverything()
     },
+    "highlight.*": {
+      actions: highlightNodeOrEdge()
+    },
+    "unhighlight.all": {
+      actions: undimEverything()
+    },
     "open.elementDetails": {
       actions: openOverlay()
     },
@@ -144,6 +149,9 @@ const ready = machine.createStateConfig({
     "xyflow.edgeMouseLeave": {
       actions: onEdgeMouseLeave()
     },
+    "xyflow.centerViewport": {
+      actions: centerOnNodeOrEdge()
+    },
     "xyflow.fitDiagram": {
       guard: "enabled: FitView",
       actions: [

package/dist/likec4diagram/state/utils.d.ts

@@ -1,4 +1,5 @@
-import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn, BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
+import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types';
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
 import { EditorActorRef } from '../../editor/editorActor.states';

package/dist/likec4diagram/state/utils.js

@@ -1,4 +1,4 @@
-import { BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
 import { nonNullable, nonexhaustive } from '@likec4/core/utils';
 import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
 import { MinZoom } from '../../base/const.js';

package/dist/likec4diagram/types.d.ts

@@ -4,7 +4,7 @@ import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
 export declare namespace Types {
-    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'notes' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View layout direction, used by DefaultHandles to position node handles
          */
@@ -53,7 +53,7 @@ export declare namespace Types {
     type SequenceParallelAreaData = Simplify<LeafNodeData & {
         parallelPrefix: string;
     }>;
-    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
+    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'notes' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View layout direction, used by DefaultHandles to position node handles
          */

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -23,7 +23,7 @@ const card = css({
   userSelect: "none",
   minWidth: 200,
   maxWidth: "calc(100vw - 20px)",
-  backgroundColor: `mantine.colors.body/80`,
+  backgroundColor: `body/80`,
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   sm: {

package/dist/likec4diagram/ui/notation/NotationPanel.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const NotationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const NotationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
+import { Tooltip, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { memo, useState } from 'react';
@@ -9,9 +9,8 @@ import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 
@@ -127,31 +126,9 @@ const NotationPanel = memo(() => {
   });
   const hasNotations = notations.length > 0;
   const portalProps = useMantinePortalProps();
+  if (!hasNotations) return null;
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: container,
-        children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
-          ThemeIcon,
-          {
-            size: "lg",
-            variant: "light",
-            color: "orange",
-            radius: "md",
-            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-          }
-        ) })
-      },
-      "empty"
-    ),
-    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
+    isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -175,7 +152,7 @@ const NotationPanel = memo(() => {
       },
       "collapsed"
     ),
-    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
+    !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -1,5 +1,6 @@
 import { NonEmptyArray } from '@likec4/core';
-import { InternalNode as RFInternalNode, OnNodeDrag, XYPosition } from '@xyflow/react';
+import { Dimensions, XYPoint, BBox } from '@likec4/core/geometry';
+import { InternalNode as RFInternalNode, OnNodeDrag } from '@xyflow/react';
 import { XYStoreApi } from '../hooks';
 import { Types } from './types';
 type InternalNode = RFInternalNode<Types.AnyNode>;
@@ -13,18 +14,14 @@ declare abstract class Rect {
     minY: number;
     maxX: number;
     maxY: number;
-    readonly initialX: number;
-    readonly initialY: number;
-    get positionAbsolute(): XYPosition;
-    get initialPositionAbsolute(): XYPosition;
-    set positionAbsolute(pos: XYPosition);
-    get dimensions(): {
-        width: number;
-        height: number;
-    };
-    get diff(): XYPosition;
+    readonly initial: BBox;
+    get positionAbsolute(): XYPoint;
+    set positionAbsolute(pos: XYPoint);
+    get dimensions(): Dimensions;
+    get diff(): XYPoint;
     get isMoved(): boolean;
-    get position(): XYPosition;
+    get isResized(): boolean;
+    get position(): XYPoint;
     protected abstract parent: CompoundRect | null;
     constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
@@ -41,6 +38,9 @@ export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNo
     rects: ReadonlyMap<string, Leaf | CompoundRect>;
     onMove: () => void;
     updateXYFlow: () => void;
+    hasChanges: () => boolean;
+    cancelPending: () => void;
+    flushPending: () => void;
 };
 type LayoutConstraints = {
     onNodeDragStart: OnNodeDrag<Types.Node>;