Patch fixed-layout scene projections from coalesced element changes

src/components/canvas/headless-graph-canvas.tsx

@@ -41,7 +41,11 @@ import styles from "./canvas.module.css";
 
 const json = (value: unknown): Data => JSON.parse(JSON.stringify(value));
 function CanvasView({ engine, board, viewId, renderers,fitLoading=true }: { engine: ProjectEngine; board: Board; viewId: Id; renderers:ReactRenderers;fitLoading?:boolean }) {
-  const subscribe = useCallback((notify: () => void) => engine.editor.subscribe(notify), [engine]);
+  const sceneCache=useMemo(()=>createSceneProjection(),[engine,viewId]);
+  const subscribe = useCallback((notify: () => void) => {
+    let before=engine.getSnapshot().document;
+    return engine.editor.subscribe((commit,next)=>{sceneCache.advance(before,next.document,commit.changes);before=next.document;notify();});
+  }, [engine,sceneCache]);
   const root = useSyncExternalStore(subscribe, engine.getSnapshot, engine.getSnapshot);
   const sessionFrames=useMemo(()=>createSessionFrameSource(engine.sessions,{request:callback=>requestAnimationFrame(callback),cancel:handle=>cancelAnimationFrame(handle as number)}),[engine]);
   const sessions = useSyncExternalStore(sessionFrames.subscribe, sessionFrames.getSnapshot, sessionFrames.getSnapshot);
@@ -65,7 +69,6 @@ function CanvasView({ engine, board, viewId, renderers,fitLoading=true }: { engi
   const pointerStart = useRef<{ x: number; y: number;pointerId?:number } | null>(null), drag = useRef<{ token: number;pointerId?:number; start: { x: number; y: number }; positions: Map<Id, { x: number; y: number }> } | null>(null);
   const projectionCache = useRef<ReturnType<typeof createProjectionCache> | null>(null);
   projectionCache.current ??= createProjectionCache();
-  const sceneCache=useMemo(()=>createSceneProjection(),[engine,viewId]);
   const measurements = useRef(new Map<Id, { width: number; height: number; measured: { width: number; height: number } }>());
   const imageInput = useRef<HTMLInputElement>(null), groups = useRef(new Map<Id,{incarnation:number;groupId:Id}>());
   useEffect(()=>{for(const [id,group]of groups.current)if(root.document.elements.get(id)?.incarnation!==group.incarnation)groups.current.delete(id);},[root.document]);