@likec4/diagram 1.44.0 → 1.45.0

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -143,7 +143,7 @@ const RelationshipPopover = memo(() => {
   ) });
 });
 const getEdgeLabelElement = (edgeId, container) => {
-  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null;
+  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.react-flow__edge[data-id="${edgeId}"] .edge-center-point`) ?? null;
 };
 const POPOVER_PADDING = 8;
 const RelationshipPopoverInternal = ({
@@ -397,7 +397,7 @@ const Relationship = forwardRef(({
           /* @__PURE__ */ jsx(Label, { children: "technology" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
         ] }),
-        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "description" }),
           /* @__PURE__ */ jsx(
             Box,
@@ -411,7 +411,7 @@ const Relationship = forwardRef(({
                   _dark: "mantine.colors.dark[4]"
                 }
               },
-              children: /* @__PURE__ */ jsx(Markdown, { value: r.description, fontSize: "sm" })
+              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm" })
             }
           )
         ] }),

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -57,7 +57,7 @@ declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, Relatio
         params: unknown;
     };
 }>, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
-    active: "opened" | "hovered" | "closing";
+    active: "hovered" | "opened" | "closing";
 }, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "breadcrumbs";
     readonly context: () => {

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

@@ -1,13 +1,13 @@
 import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { ViewPadding } from '../../LikeC4Diagram.props';
+import { ViewPaddings } from '../../LikeC4Diagram.props';
 export declare function DiagramActorProvider({ view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
     nodesDraggable: boolean;
     nodesSelectable: boolean;
-    fitViewPadding: ViewPadding;
+    fitViewPadding: ViewPaddings;
     where: WhereOperator | null;
     dynamicViewVariant: DynamicViewDisplayVariant | undefined;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -74,7 +74,6 @@ function DiagramActorProvider({
     if (!_defaultVariant) return;
     actorRef.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
   }, [_defaultVariant, actorRef]);
-  console.debug("Render DiagramActorProvider for view", view.id);
   return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: api, children: [
     /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
       /* @__PURE__ */ jsx(

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

@@ -1,4 +1,4 @@
-import { XYPoint } from '@likec4/core';
+import { LayoutedView, XYPoint } from '@likec4/core';
 import { NodeLookup } from '@xyflow/system';
 import { Types } from '../types';
 import { ActionArg, Context as DiagramContext } from './machine.setup';
@@ -8,12 +8,16 @@ export declare function lastClickedNode(params: {
         node: Types.Node;
     };
 }): DiagramContext['lastClickedNode'];
-export declare function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function mergeXYNodesEdges(context: Pick<DiagramContext, 'xynodes' | 'xyedges' | 'view'>, event: {
+    view: LayoutedView;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+}): {
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+    view: LayoutedView;
+};
 export declare function focusNodesEdges(params: ActionArg): Partial<DiagramContext>;
-export declare function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext>;
-export declare function navigateBack({ context }: ActionArg): Partial<DiagramContext>;
-export declare function navigateForward({ context }: ActionArg): Partial<DiagramContext>;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function resetEdgeControlPoints(nodeLookup: NodeLookup, edge: Types.Edge): [XYPoint] | [XYPoint, XYPoint];
-export declare function updateActiveWalkthrough({ context }: ActionArg): Partial<DiagramContext>;

package/dist/likec4diagram/state/assign.js

@@ -1,62 +1,28 @@
-import { nonNullable, invariant } from '@likec4/core';
+import { nonNullable } from '@likec4/core';
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { mergeDeep, omit } from 'remeda';
+import { mergeDeep } from 'remeda';
 import { assertEvent } from 'xstate';
 import { vector } from '../../utils/vector.js';
 import { getNodeCenter } from '../../utils/xyflow.js';
-import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { updateNodes } from '../../base/updateNodes.js';
+import { updateEdges } from '../../base/updateEdges.js';
 import { Base } from '../../base/Base.js';
 
-function mergeXYNodesEdges({ context, event }) {
-  assertEvent(event, "update.view");
+function mergeXYNodesEdges(context, event) {
   const nextView = event.view;
-  const isSameView = context.view.id === nextView.id;
-  const currentNodes = context.xynodes;
-  const xynodes = event.xynodes.map((update) => {
-    const existing = currentNodes.find((n) => n.id === update.id);
-    if (existing) {
-      if (existing === update) {
-        return existing;
-      }
-      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
-        return existing;
-      }
-      return {
-        ...omit(existing, ["measured", "parentId", "hidden"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight
-      };
-    }
-    return update;
-  });
-  let xyedges = event.xyedges;
-  if (isSameView && (!nextView.drifts || nextView.drifts.length === 0)) {
-    const currentEdges = context.xyedges;
-    xyedges = event.xyedges.map((update) => {
-      const existing = currentEdges.find((n) => n.id === update.id);
-      if (existing === update) {
-        return existing;
-      }
-      if (existing && existing.type === update.type) {
-        if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data) && deepEqual(existing.source, update.source) && deepEqual(existing.target, update.target) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle)) {
-          return existing;
-        }
-        return {
-          ...omit(existing, ["hidden", "sourceHandle", "targetHandle"]),
-          ...update,
-          data: {
-            ...existing.data,
-            ...update.data
-          }
-        };
-      }
-      return update;
-    });
+  const currentView = context.view;
+  const isSameView = currentView.id === nextView.id;
+  const isDynamicViewUpdate = nextView._type === "dynamic" && nextView.variant === "sequence";
+  if (isDynamicViewUpdate) {
+    return {
+      xynodes: event.xynodes,
+      xyedges: event.xyedges,
+      view: nextView
+    };
   }
+  const xynodes = updateNodes(context.xynodes, event.xynodes);
+  const xyedges = isSameView ? updateEdges(context.xyedges, event.xyedges) : event.xyedges;
   return {
     xynodes,
     xyedges,
@@ -88,124 +54,6 @@ function focusNodesEdges(params) {
     xyedges
   };
 }
-function updateNavigationHistory({ context, event }) {
-  assertEvent(event, "update.view");
-  let {
-    navigationHistory: {
-      currentIndex,
-      history
-    },
-    lastOnNavigate,
-    viewport
-  } = context;
-  const stepCurrent = history[currentIndex];
-  if (!stepCurrent) {
-    return {
-      navigationHistory: {
-        currentIndex: 0,
-        history: [
-          {
-            viewId: event.view.id,
-            fromNode: null,
-            viewport: { ...viewport }
-          }
-        ]
-      }
-    };
-  }
-  if (stepCurrent.viewId !== event.view.id) {
-    if (!lastOnNavigate) {
-      const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
-      if (stepBack && stepBack.viewId === event.view.id) {
-        return {
-          navigationHistory: {
-            currentIndex: currentIndex - 1,
-            history
-          },
-          lastOnNavigate: {
-            fromView: stepCurrent.viewId,
-            toView: stepBack.viewId,
-            fromNode: stepCurrent.fromNode
-          }
-        };
-      }
-      const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
-      if (stepForward && stepForward.viewId === event.view.id) {
-        return {
-          navigationHistory: {
-            currentIndex: currentIndex + 1,
-            history
-          },
-          lastOnNavigate: {
-            fromView: stepCurrent.viewId,
-            toView: stepForward.viewId,
-            fromNode: stepForward.fromNode
-          }
-        };
-      }
-    }
-    history = [
-      ...history.slice(0, currentIndex + 1),
-      {
-        viewId: event.view.id,
-        fromNode: lastOnNavigate?.fromNode ?? null,
-        viewport: { ...viewport }
-      }
-    ];
-    currentIndex = history.length - 1;
-    return {
-      navigationHistory: {
-        currentIndex,
-        history
-      }
-    };
-  }
-  return {};
-}
-function navigateBack({ context }) {
-  const {
-    navigationHistory: {
-      currentIndex,
-      history
-    }
-  } = context;
-  invariant(currentIndex > 0, "Cannot navigate back");
-  const stepCurrent = history[currentIndex];
-  const stepBack = history[currentIndex - 1];
-  return {
-    navigationHistory: {
-      currentIndex: currentIndex - 1,
-      history
-    },
-    lastOnNavigate: {
-      fromView: stepCurrent.viewId,
-      toView: stepBack.viewId,
-      fromNode: stepCurrent.fromNode
-    }
-  };
-}
-function navigateForward({ context }) {
-  const {
-    navigationHistory: {
-      currentIndex,
-      history
-    }
-  } = context;
-  invariant(currentIndex < history.length - 1, "Cannot navigate forward");
-  const stepCurrent = history[currentIndex];
-  const stepForward = history[currentIndex + 1];
-  return {
-    navigationHistory: {
-      currentIndex: currentIndex + 1,
-      history
-    },
-    lastOnNavigate: {
-      fromView: stepCurrent.viewId,
-      toView: stepForward.viewId,
-      fromNode: stepForward.fromNode
-    }
-  };
-}
 function updateNodeData({ context, event }) {
   console.log("updateNodeData called", event);
   assertEvent(event, "update.nodeData");
@@ -266,28 +114,5 @@ function resetEdgeControlPoints(nodeLookup, edge) {
   const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1));
   return [sourceBorderPoint.add(targetBorderPoint.subtract(sourceBorderPoint).multiply(0.4))];
 }
-function updateActiveWalkthrough({ context }) {
-  const { stepId, parallelPrefix } = nonNullable(context.activeWalkthrough, "activeWalkthrough is null");
-  const step = nonNullable(context.xyedges.find((x) => x.id === stepId));
-  return {
-    xyedges: context.xyedges.map((edge) => {
-      const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
-      return Base.setData(edge, {
-        active,
-        dimmed: stepId !== edge.id
-      });
-    }),
-    xynodes: context.xynodes.map((node) => {
-      const dimmed = step.source !== node.id && step.target !== node.id;
-      if (node.type === "seq-parallel") {
-        return Base.setData(node, {
-          color: parallelPrefix === node.data.parallelPrefix ? SeqParallelAreaColor.active : SeqParallelAreaColor.default,
-          dimmed
-        });
-      }
-      return Base.setDimmed(node, dimmed);
-    })
-  };
-}
 
-export { focusNodesEdges, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };
+export { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints, updateEdgeData, updateNodeData };

package/dist/likec4diagram/state/createViewChange.js

@@ -1,5 +1,5 @@
 import { getNodeDimensions } from '@xyflow/system';
-import { indexBy, map, omit, hasAtLeast } from 'remeda';
+import { map, omit, hasAtLeast } from 'remeda';
 import { calcViewBounds } from '../../utils/view-bounds.js';
 import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
 
@@ -12,33 +12,27 @@ function createViewChange(parentContext) {
       // Ignore layout type from view
       ...view
     },
-    xynodes,
-    xyedges,
     xystore
   } = parentContext;
-  const { nodeLookup } = xystore.getState();
+  const { nodeLookup, edgeLookup } = xystore.getState();
   const movedNodes = /* @__PURE__ */ new Set();
-  const xynodesLookup = indexBy(xynodes, (n) => n.data.id);
-  const xyedgesLookup = indexBy(xyedges, (e) => e.data.id);
   const nodes = map(view.nodes, (node) => {
-    const xynode = xynodesLookup[node.id];
-    if (!xynode) {
+    const internal = nodeLookup.get(node.id);
+    if (!internal) {
+      console.error(`Internal node not found for ${node.id}`);
       return node;
     }
-    const internal = nodeLookup.get(xynode.id);
     const dimensions = getNodeDimensions(internal);
-    const isChanged = !isSamePoint(internal.internals.positionAbsolute, node) || node.width !== dimensions.width || node.height !== dimensions.height || node.shape !== xynode.data.shape || node.color !== xynode.data.color || node.style.border !== xynode.data.style.border || node.style.opacity !== xynode.data.style.opacity;
-    if (!isChanged) {
-      return node;
+    const isChanged = !isSamePoint(internal.internals.positionAbsolute, node) || node.width !== dimensions.width || node.height !== dimensions.height;
+    if (isChanged) {
+      movedNodes.add(node.id);
     }
-    movedNodes.add(xynode.id);
     return {
       ...node,
-      shape: xynode.data.shape,
-      color: xynode.data.color,
+      shape: internal.data.shape,
+      color: internal.data.color,
       style: {
-        ...node.style,
-        ...xynode.data.style
+        ...internal.data.style
       },
       x: Math.floor(internal.internals.positionAbsolute.x),
       y: Math.floor(internal.internals.positionAbsolute.y),
@@ -47,8 +41,9 @@ function createViewChange(parentContext) {
     };
   });
   const edges = map(view.edges, (edge) => {
-    const xyedge = xyedgesLookup[edge.id];
+    const xyedge = edgeLookup.get(edge.id);
     if (!xyedge) {
+      console.error(`Internal edge not found for ${edge.id}`);
       return edge;
     }
     const data = xyedge.data;
@@ -58,17 +53,11 @@ function createViewChange(parentContext) {
       controlPoints = bezierControlPoints(data.points);
     }
     const _updated = {
-      ...omit(edge, ["controlPoints"]),
+      ...omit(edge, ["controlPoints", "labelBBox"]),
       points: data.points
     };
-    if (data.labelXY && data.labelBBox) {
-      _updated.labelBBox = {
-        ...data.labelBBox,
-        ...data.labelXY
-      };
-    }
     if (data.labelBBox) {
-      _updated.labelBBox ??= data.labelBBox;
+      _updated.labelBBox = data.labelBBox;
     }
     if (hasAtLeast(controlPoints, 1)) {
       _updated.controlPoints = controlPoints;

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -4,7 +4,7 @@ import { FeatureName } from '../../context/DiagramFeatures';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from './types';
+import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
 import type * as t from '@likec4/core/types';
 type Any = t.aux.Any;
 type Unknown = t.aux.UnknownLayouted;
@@ -21,7 +21,7 @@ export interface DiagramApi<A extends Any = Unknown> {
     /**
      * Send event to diagram actor
      */
-    send(event: DiagramActorEvent): void;
+    send(event: DiagramEvents): void;
     /**
      * Navigate to view
      */
@@ -76,10 +76,6 @@ export interface DiagramApi<A extends Any = Unknown> {
      * Focus node
      */
     focusNode(nodeId: NodeId): void;
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot(): DiagramActorSnapshot;
     /**
      * @warning Do not use in render phase
      */

package/dist/likec4diagram/state/diagram-api.js

@@ -16,7 +16,7 @@ function makeDiagramApi(actor) {
       actor.send({ type: `navigate.${direction}` });
     },
     fitDiagram: (duration = 350) => {
-      actor.send({ type: "fitDiagram", duration });
+      actor.send({ type: "xyflow.fitDiagram", duration });
     },
     openRelationshipsBrowser: (fqn) => {
       actor.send({ type: "open.relationshipsBrowser", fqn });
@@ -38,11 +38,7 @@ function makeDiagramApi(actor) {
       actor.send({ type: "update.nodeData", nodeId, data });
     },
     updateEdgeData: (edgeId, data) => {
-      actor.send({
-        type: "update.edgeData",
-        edgeId,
-        data
-      });
+      actor.send({ type: "update.edgeData", edgeId, data });
     },
     startEditing: (subject) => {
       const syncActor = typedSystem(actor.system).syncLayoutActorRef;
@@ -78,10 +74,6 @@ function makeDiagramApi(actor) {
     get currentView() {
       return actor.getSnapshot().context.view;
     },
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot: () => actor.getSnapshot(),
     /**
      * @warning Do not use in render phase
      */

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

@@ -5,10 +5,3 @@ export type HotKeyEvent = {
 export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
 }
 export declare const hotkeyActorLogic: HotkeyActorLogic;
-type UndoEvent = {
-    type: 'undo';
-};
-export interface UndoHotKeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, UndoEvent> {
-}
-export declare const undoHotKeyActorLogic: UndoHotKeyActorLogic;
-export {};

package/dist/likec4diagram/state/hotkeyActor.js

@@ -5,7 +5,6 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
     ["Escape", (event) => {
       event.stopPropagation();
-      console.log("Escape karsarsey pressed");
       sendBack({ type: "key.esc" });
     }, {
       preventDefault: true
@@ -32,20 +31,5 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", arrowshandler, { capture: true });
   };
 });
-const undoHotKeyActorLogic = fromCallback(({ sendBack }) => {
-  const ctrlZHandler = getHotkeyHandler([
-    ["mod + z", (event) => {
-      console.log("Undo hotkey pressed");
-      event.stopPropagation();
-      sendBack({ type: "undo" });
-    }, {
-      preventDefault: true
-    }]
-  ]);
-  document.body.addEventListener("keydown", ctrlZHandler, { capture: true });
-  return () => {
-    document.body.removeEventListener("keydown", ctrlZHandler, { capture: true });
-  };
-});
 
-export { hotkeyActorLogic, undoHotKeyActorLogic };
+export { hotkeyActorLogic };