@likec4/diagram 1.44.0 → 1.46.0

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

@@ -1,19 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { useState, useEffect, memo, useRef } from 'react';
-import { isNullish } from 'remeda';
+import { useRef, useState, useEffect, memo } from 'react';
+import { omitBy, isNullish } from 'remeda';
 import { ErrorBoundary } from '../../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
 import { CurrentViewModelContext } from '../../context/LikeC4ModelContext.js';
-import { DiagramActorContextProvider, useDiagram } from '../../hooks/safeContext.js';
-import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useEditorActorLogic } from '../../editor/useEditorActorLogic.js';
+import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from '../../hooks/safeContext.js';
+import { useOnDiagramEvent, useDiagramContext } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
-import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { makeDiagramApi } from './diagram-api.js';
 import { diagramMachine } from './machine.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
@@ -30,8 +30,13 @@ function DiagramActorProvider({
   dynamicViewVariant: _defaultVariant
 }) {
   const xystore = useStoreApi();
-  const actorRef = useActorRef(
-    diagramMachine,
+  const editorActor = useEditorActorLogic(view.id);
+  const actor = useActorRef(
+    diagramMachine.provide({
+      actors: {
+        editorActor
+      }
+    }),
     {
       id: `diagram`,
       systemId: "diagram",
@@ -44,55 +49,61 @@ function DiagramActorProvider({
         fitViewPadding,
         nodesDraggable,
         nodesSelectable,
+        where,
         dynamicViewVariant: _defaultVariant
       }
     }
   );
+  const actorRef = useRef(actor);
+  if (actorRef.current !== actor) {
+    console.warn("DiagramMachine actor instance changed", {
+      context: {
+        previous: actorRef.current.getSnapshot().context,
+        current: actor.getSnapshot().context
+      }
+    });
+    actorRef.current = actor;
+  }
   const [api, setApi] = useState(() => makeDiagramApi(actorRef));
   useEffect(() => {
     setApi((api2) => {
-      if (api2.actor === actorRef) return api2;
+      if (api2.ref === actorRef) {
+        return api2;
+      }
+      console.warn(
+        "DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor"
+      );
       return makeDiagramApi(actorRef);
     });
   }, [actorRef]);
-  if (api.actor !== actorRef) {
-    console.warn("DiagramApi instance changed, this should not happen during the lifetime of the actor");
-  }
   const features = useEnabledFeatures();
   useEffect(
-    () => actorRef.send({ type: "update.features", features }),
-    [features, actorRef]
+    () => actor.send({ type: "update.features", features }),
+    [features, actor]
   );
   useEffect(
-    () => actorRef.send({
+    () => actor.send({
       type: "update.inputs",
-      inputs: { zoomable, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
+      inputs: { zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
     }),
-    [zoomable, pannable, fitViewPadding, actorRef, nodesDraggable, nodesSelectable]
+    [zoomable, where, pannable, fitViewPadding, actor, nodesDraggable, nodesSelectable]
   );
   useUpdateEffect(() => {
     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(
-        DiagramXYFlowSyncProvider,
-        {
-          view,
-          where,
-          actorRef
-        }
-      ),
-      /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children })
-    ] }),
+    actor.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
+  }, [_defaultVariant, actor]);
+  useRafEffect(
+    () => actor.send({ type: "update.view", view, source: "external" }),
+    [actor, view]
+  );
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actor, children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef: actor, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, {})
-  ] });
+  ] }) });
 }
 const selectFromActor = ({ context }) => {
   let toggledFeatures = context.toggledFeatures;
-  const hasDrifts = context.view.drifts != null;
+  const hasDrifts = context.view.drifts != null && context.view.drifts.length > 0;
   const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough) && hasDrifts;
   const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || context.dynamicViewVariant === "sequence" && context.view._type === "dynamic" || enableCompareWithLatest && context.view._layout === "auto";
   if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) {
@@ -116,62 +127,42 @@ function CurrentViewModelProvider({ children, actorRef }) {
     selectFromActor,
     compareSelected
   );
-  useUpdateEffect(() => {
-    DiagramToggledFeaturesPersistence.write(toggledFeatures);
-  }, [toggledFeatures]);
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
-const selectFromActor2 = (state) => {
-  return state.context.dynamicViewVariant;
-};
-function DiagramXYFlowSyncProvider({ view, where, actorRef }) {
-  const dynamicViewVariant = useSelector(actorRef, selectFromActor2);
-  useRafEffect(() => {
-    actorRef.send({
-      type: "update.view",
-      ...convertToXYFlow({ view, where, dynamicViewVariant })
-    });
-  }, [view, where, dynamicViewVariant, actorRef]);
-  return null;
-}
 const DiagramActorEventListener = memo(() => {
   const diagram = useDiagram();
   const {
     onNavigateTo,
     onOpenSource,
-    onChange,
+    // onChange,
     onLayoutTypeChange,
     handlersRef
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
   useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
-  useOnDiagramEvent("onChange", ({ change }) => onChange?.({ change }));
   useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
     onLayoutTypeChange?.(layoutType);
   });
-  const wasEmitted = useRef(false);
-  useEffect(() => {
-    if (wasEmitted.current) return;
-    let subscription = diagram.actor.on(
-      "initialized",
-      ({ instance: xyflow }) => {
-        try {
-          handlersRef.current.onInitialized?.({ diagram, xyflow });
-        } catch (error) {
-          console.error(error);
-        } finally {
-          wasEmitted.current = true;
-          subscription?.unsubscribe();
-          subscription = null;
-        }
+  useOnDiagramEvent(
+    "initialized",
+    ({ instance: xyflow }) => {
+      try {
+        handlersRef.current.onInitialized?.({ diagram, xyflow });
+      } catch (error) {
+        console.error(error);
       }
-    );
-    return () => {
-      subscription?.unsubscribe();
-    };
-  }, [diagram]);
+    },
+    { once: true }
+  );
+  const toggledFeatures = useDiagramContext(
+    (ctx) => ctx.toggledFeatures,
+    shallowEqual
+  );
+  useUpdateEffect(() => {
+    DiagramToggledFeaturesPersistence.write(omitBy(toggledFeatures, isNullish));
+  }, [toggledFeatures]);
   return null;
 });
 

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,19 @@ export declare function lastClickedNode(params: {
         node: Types.Node;
     };
 }): DiagramContext['lastClickedNode'];
-export declare function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext>;
-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 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(context: DiagramContext): {
+    xynodes: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel">[];
+    xyedges: Types.Edge<"relationship" | "seq-step">[];
+} | null;
 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,72 +1,38 @@
-import { nonNullable, invariant } from '@likec4/core';
+import { nonNullable } from '@likec4/core';
+import { vector } from '@likec4/core/geometry';
 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,
     view: nextView
   };
 }
-function focusNodesEdges(params) {
-  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = params.context;
+function focusNodesEdges(context) {
+  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = context;
   if (!focusedNode) {
-    return {};
+    return null;
   }
   const focused = /* @__PURE__ */ new Set([focusedNode]);
   const xyedges = _xyedges.map((edge) => {
@@ -88,126 +54,7 @@ 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");
   const xynodes = context.xynodes.map((node) => {
     if (node.id !== event.nodeId) {
@@ -257,37 +104,18 @@ function resetEdgeControlPoints(nodeLookup, edge) {
     const loopSize = 80;
     const centerOfTopBoundary = vector(0, source.height || 0).multiply(-0.5).add(sourceCenter);
     return [
-      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)),
-      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize))
+      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)).round().toObject(),
+      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).round().toObject()
     ];
   }
   const sourceToTargetVector = targetCenter.subtract(sourceCenter);
   const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
   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);
-    })
-  };
+  const sourceToTarget = targetBorderPoint.subtract(sourceBorderPoint);
+  return [
+    sourceBorderPoint.add(sourceToTarget.multiply(0.4)).round().toObject(),
+    sourceBorderPoint.add(sourceToTarget.multiply(0.6)).round().toObject()
+  ];
 }
 
-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';
 
@@ -13,42 +13,40 @@ function createViewChange(parentContext) {
       ...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 xynodedata = xynodes.find((n) => n.id === node.id)?.data ?? internal.data;
+    const position = internal.internals.positionAbsolute;
+    const { width, height } = getNodeDimensions(internal);
+    const isChanged = !isSamePoint(position, node) || node.width !== width || node.height !== height;
+    if (isChanged) {
+      movedNodes.add(node.id);
     }
-    movedNodes.add(xynode.id);
     return {
       ...node,
-      shape: xynode.data.shape,
-      color: xynode.data.color,
+      shape: xynodedata.shape,
+      color: xynodedata.color,
       style: {
-        ...node.style,
-        ...xynode.data.style
+        ...xynodedata.style
       },
-      x: Math.floor(internal.internals.positionAbsolute.x),
-      y: Math.floor(internal.internals.positionAbsolute.y),
-      width: Math.ceil(dimensions.width),
-      height: Math.ceil(dimensions.height)
+      x: Math.floor(position.x),
+      y: Math.floor(position.y),
+      width: Math.ceil(width),
+      height: Math.ceil(height)
     };
   });
   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 +56,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;
@@ -77,6 +69,7 @@ function createViewChange(parentContext) {
   });
   const snapshot = {
     ...view,
+    _layout: "manual",
     bounds: calcViewBounds({ nodes, edges }),
     nodes,
     edges