@formicoidea/labre-core 0.30.1 → 0.32.0

package/dist/_pkgs/affine-block-surface/renderer/canvas-renderer.js

@@ -2,11 +2,14 @@ import { ColorScheme } from '../../affine-model/index.js';
 import { FeatureFlagService } from '../../affine-shared/services/index.js';
 import { requestConnectedFrame } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
-import { getBoundWithRotation, intersects } from '../../global/gfx/index.js';
-import last from 'lodash-es/last';
+import { Bound, getBoundWithRotation, intersects, } from '../../global/gfx/index.js';
+import { GfxControllerIdentifier } from '../../std/gfx/index.js';
+import { effect } from '@preact/signals-core';
+import last from 'lodash-es/last.js';
 import { Subject } from 'rxjs';
 import { ElementRendererIdentifier } from '../extensions/element-renderer.js';
 import { RoughCanvas } from '../utils/rough/canvas.js';
+const STACKING_CANVAS_PADDING = 32;
 export class CanvasRenderer {
     get stackingCanvas() {
         return this._stackingCanvas;
@@ -16,8 +19,40 @@ export class CanvasRenderer {
         this._overlays = new Set();
         this._refreshRafId = null;
         this._stackingCanvas = [];
+        this._stackingCanvasPool = [];
+        this._stackingCanvasState = new WeakMap();
+        this._dirtyStackingCanvasIndexes = new Set();
+        this._mainCanvasDirty = true;
+        this._needsFullRender = true;
+        this._debugMetrics = {
+            refreshCount: 0,
+            coalescedRefreshCount: 0,
+            renderCount: 0,
+            totalRenderDurationMs: 0,
+            lastRenderDurationMs: 0,
+            maxRenderDurationMs: 0,
+            lastRenderMetrics: {
+                renderByBoundCallCount: 0,
+                visibleElementCount: 0,
+                renderedElementCount: 0,
+                placeholderElementCount: 0,
+                overlayCount: 0,
+            },
+            dirtyLayerRenderCount: 0,
+            fallbackElementCount: 0,
+        };
         this.stackingCanvasUpdated = new Subject();
         this.usePlaceholder = false;
+        this._lastDebugSnapshot = {
+            canvasMemoryBytes: 0,
+            canvasMemorySnapshots: [],
+            canvasPixelCount: 0,
+            canvasLayerCount: 0,
+            pooledStackingCanvasCount: 0,
+            stackingCanvasCount: 0,
+            totalLayerCount: 0,
+            visibleStackingCanvasCount: 0,
+        };
         const canvas = document.createElement('canvas');
         this.canvas = canvas;
         this.ctx = this.canvas.getContext('2d');
@@ -26,6 +61,7 @@ export class CanvasRenderer {
         this.layerManager = options.layerManager;
         this.grid = options.gridManager;
         this.provider = options.provider ?? {};
+        this._gfx = this.std.get(GfxControllerIdentifier);
         this._turboEnabled = () => {
             const featureFlagService = options.std.get(FeatureFlagService);
             return featureFlagService.getFlag('enable_turbo_renderer');
@@ -45,7 +81,7 @@ export class CanvasRenderer {
      * It is not recommended to set width and height to 100%.
      */
     _canvasSizeUpdater(dpr = window.devicePixelRatio) {
-        const { width, height } = this.viewport;
+        const { width, height, viewScale } = this.viewport;
         const actualWidth = Math.ceil(width * dpr);
         const actualHeight = Math.ceil(height * dpr);
         return {
@@ -55,18 +91,155 @@ export class CanvasRenderer {
             update(canvas) {
                 canvas.style.width = `${width}px`;
                 canvas.style.height = `${height}px`;
+                // The viewport size is read from `getBoundingClientRect()`, so it
+                // already carries the scale an outer container applies to the whole
+                // editor. Undo that scale here, otherwise the container would scale
+                // the canvas a second time and it would no longer fit its block.
+                canvas.style.transform = `scale(${1 / viewScale})`;
+                canvas.style.transformOrigin = `top left`;
                 canvas.width = actualWidth;
                 canvas.height = actualHeight;
             },
         };
     }
+    _applyStackingCanvasLayout(canvas, bound, dpr = window.devicePixelRatio) {
+        const state = this._stackingCanvasState.get(canvas) ??
+            {
+                bound: null,
+                layerId: canvas.dataset.layerId ?? null,
+            };
+        if (!bound || bound.w <= 0 || bound.h <= 0) {
+            canvas.style.display = 'none';
+            canvas.style.left = '0px';
+            canvas.style.top = '0px';
+            canvas.style.width = '0px';
+            canvas.style.height = '0px';
+            canvas.style.transform = '';
+            canvas.width = 0;
+            canvas.height = 0;
+            state.bound = null;
+            state.layerId = canvas.dataset.layerId ?? null;
+            this._stackingCanvasState.set(canvas, state);
+            return;
+        }
+        const { viewportBounds, zoom, viewScale } = this.viewport;
+        const width = bound.w * zoom;
+        const height = bound.h * zoom;
+        const left = (bound.x - viewportBounds.x) * zoom;
+        const top = (bound.y - viewportBounds.y) * zoom;
+        const actualWidth = Math.max(1, Math.ceil(width * dpr));
+        const actualHeight = Math.max(1, Math.ceil(height * dpr));
+        const transform = `translate(${left}px, ${top}px) scale(${1 / viewScale})`;
+        if (canvas.style.display !== 'block') {
+            canvas.style.display = 'block';
+        }
+        if (canvas.style.left !== '0px') {
+            canvas.style.left = '0px';
+        }
+        if (canvas.style.top !== '0px') {
+            canvas.style.top = '0px';
+        }
+        if (canvas.style.width !== `${width}px`) {
+            canvas.style.width = `${width}px`;
+        }
+        if (canvas.style.height !== `${height}px`) {
+            canvas.style.height = `${height}px`;
+        }
+        if (canvas.style.transform !== transform) {
+            canvas.style.transform = transform;
+        }
+        if (canvas.style.transformOrigin !== 'top left') {
+            canvas.style.transformOrigin = 'top left';
+        }
+        if (canvas.width !== actualWidth) {
+            canvas.width = actualWidth;
+        }
+        if (canvas.height !== actualHeight) {
+            canvas.height = actualHeight;
+        }
+        state.bound = bound;
+        state.layerId = canvas.dataset.layerId ?? null;
+        this._stackingCanvasState.set(canvas, state);
+    }
+    _clampBoundToViewport(bound, viewportBounds) {
+        const minX = Math.max(bound.x, viewportBounds.x);
+        const minY = Math.max(bound.y, viewportBounds.y);
+        const maxX = Math.min(bound.maxX, viewportBounds.maxX);
+        const maxY = Math.min(bound.maxY, viewportBounds.maxY);
+        if (maxX <= minX || maxY <= minY) {
+            return null;
+        }
+        return new Bound(minX, minY, maxX - minX, maxY - minY);
+    }
+    _createCanvasForLayer(onCreated) {
+        const reused = this._stackingCanvasPool.pop();
+        if (reused) {
+            return reused;
+        }
+        const created = document.createElement('canvas');
+        onCreated?.(created);
+        return created;
+    }
+    _findLayerIndexByElement(element) {
+        const canvasLayers = this.layerManager.getCanvasLayers();
+        const index = canvasLayers.findIndex(layer => layer.elements.some(layerElement => layerElement.id === element.id));
+        return index === -1 ? null : index;
+    }
+    _getLayerRenderBound(elements, viewportBounds) {
+        let layerBound = null;
+        for (const element of elements) {
+            const display = (element.display ?? true) && !element.hidden;
+            if (!display) {
+                continue;
+            }
+            const elementBound = Bound.from(getBoundWithRotation(element));
+            if (!intersects(elementBound, viewportBounds)) {
+                continue;
+            }
+            layerBound = layerBound ? layerBound.unite(elementBound) : elementBound;
+        }
+        if (!layerBound) {
+            return null;
+        }
+        return this._clampBoundToViewport(layerBound.expand(STACKING_CANVAS_PADDING), viewportBounds);
+    }
+    _getResolvedStackingCanvasBound(canvas, bound) {
+        if (!bound || !this._gfx.tool.dragging$.peek()) {
+            return bound;
+        }
+        const previousBound = this._stackingCanvasState.get(canvas)?.bound;
+        return previousBound ? previousBound.unite(bound) : bound;
+    }
+    _invalidate(target = { type: 'all' }) {
+        if (target.type === 'all') {
+            this._needsFullRender = true;
+            this._mainCanvasDirty = true;
+            this._dirtyStackingCanvasIndexes.clear();
+            return;
+        }
+        if (this._needsFullRender) {
+            return;
+        }
+        if (target.type === 'main') {
+            this._mainCanvasDirty = true;
+            return;
+        }
+        const elements = target.type === 'element' ? [target.element] : target.elements;
+        for (const element of elements) {
+            const layerIndex = this._findLayerIndexByElement(element);
+            if (layerIndex === null || layerIndex >= this._stackingCanvas.length) {
+                this._mainCanvasDirty = true;
+                continue;
+            }
+            this._dirtyStackingCanvasIndexes.add(layerIndex);
+        }
+    }
+    _resetPooledCanvas(canvas) {
+        canvas.dataset.layerId = '';
+        this._applyStackingCanvasLayout(canvas, null);
+    }
     _initStackingCanvas(onCreated) {
         const layer = this.layerManager;
-        const updateStackingCanvasSize = (canvases) => {
-            this._stackingCanvas = canvases;
-            const sizeUpdater = this._canvasSizeUpdater();
-            canvases.filter(sizeUpdater.filter).forEach(sizeUpdater.update);
-        };
         const updateStackingCanvas = () => {
             /**
              * we already have a main canvas, so the last layer should be skipped
@@ -84,16 +257,12 @@ export class CanvasRenderer {
                 const created = i < currentCanvases.length;
                 const canvas = created
                     ? currentCanvases[i]
-                    : document.createElement('canvas');
-                if (!created) {
-                    onCreated?.(canvas);
-                }
+                    : this._createCanvasForLayer(onCreated);
                 canvas.dataset.layerId = `[${layer.indexes[0]}--${layer.indexes[1]}]`;
                 canvas.style.zIndex = layer.zIndex.toString();
                 canvases.push(canvas);
             }
             this._stackingCanvas = canvases;
-            updateStackingCanvasSize(canvases);
             if (currentCanvases.length !== canvases.length) {
                 const diff = canvases.length - currentCanvases.length;
                 const payload = {
@@ -106,10 +275,14 @@ export class CanvasRenderer {
                 }
                 else {
                     payload.removed = currentCanvases.slice(diff);
+                    payload.removed.forEach(canvas => {
+                        this._resetPooledCanvas(canvas);
+                        this._stackingCanvasPool.push(canvas);
+                    });
                 }
                 this.stackingCanvasUpdated.next(payload);
             }
-            this.refresh();
+            this.refresh({ type: 'all' });
         };
         this._disposables.add(this.layerManager.slots.layerUpdated.subscribe(() => {
             updateStackingCanvas();
@@ -119,7 +292,7 @@ export class CanvasRenderer {
     _initViewport() {
         let sizeUpdatedRafId = null;
         this._disposables.add(this.viewport.viewportUpdated.subscribe(() => {
-            this.refresh();
+            this.refresh({ type: 'all' });
         }));
         this._disposables.add(this.viewport.sizeUpdated.subscribe(() => {
             if (sizeUpdatedRafId)
@@ -128,51 +301,127 @@ export class CanvasRenderer {
                 sizeUpdatedRafId = null;
                 this._resetSize();
                 this._render();
-                this.refresh();
             }, this._container);
         }));
         this._disposables.add(this.viewport.zooming$.subscribe(isZooming => {
             const shouldRenderPlaceholders = this._turboEnabled() && isZooming;
             if (this.usePlaceholder !== shouldRenderPlaceholders) {
                 this.usePlaceholder = shouldRenderPlaceholders;
-                this.refresh();
+                this.refresh({ type: 'all' });
+            }
+        }));
+        let wasDragging = false;
+        this._disposables.add(effect(() => {
+            const isDragging = this._gfx.tool.dragging$.value;
+            if (wasDragging && !isDragging) {
+                this.refresh({ type: 'all' });
             }
+            wasDragging = isDragging;
         }));
         this.usePlaceholder = false;
     }
+    _createRenderPassStats() {
+        return {
+            renderByBoundCallCount: 0,
+            visibleElementCount: 0,
+            renderedElementCount: 0,
+            placeholderElementCount: 0,
+            overlayCount: 0,
+        };
+    }
+    _getCanvasMemorySnapshots() {
+        return [this.canvas, ...this._stackingCanvas].map((canvas, index) => {
+            return {
+                kind: index === 0 ? 'main' : 'stacking',
+                width: canvas.width,
+                height: canvas.height,
+                bytes: canvas.width * canvas.height * 4,
+                zIndex: canvas.style.zIndex,
+                datasetLayerId: canvas.dataset.layerId ?? null,
+            };
+        });
+    }
     _render() {
+        const renderStart = performance.now();
         const { viewportBounds, zoom } = this.viewport;
         const { ctx } = this;
         const dpr = window.devicePixelRatio;
         const scale = zoom * dpr;
         const matrix = new DOMMatrix().scaleSelf(scale);
+        const renderStats = this._createRenderPassStats();
+        const fullRender = this._needsFullRender;
+        const stackingIndexesToRender = fullRender
+            ? this._stackingCanvas.map((_, idx) => idx)
+            : [...this._dirtyStackingCanvasIndexes];
         /**
          * if a layer does not have a corresponding canvas
          * its element will be add to this array and drawing on the
          * main canvas
          */
         let fallbackElement = [];
-        this.layerManager.getCanvasLayers().forEach((layer, idx) => {
-            if (!this._stackingCanvas[idx]) {
-                fallbackElement = fallbackElement.concat(layer.elements);
-                return;
-            }
+        const allCanvasLayers = this.layerManager.getCanvasLayers();
+        const viewportBound = Bound.from(viewportBounds);
+        for (const idx of stackingIndexesToRender) {
+            const layer = allCanvasLayers[idx];
             const canvas = this._stackingCanvas[idx];
-            const ctx = canvas.getContext('2d');
-            const rc = new RoughCanvas(ctx.canvas);
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (!layer || !canvas) {
+                continue;
+            }
+            const layerRenderBound = this._getLayerRenderBound(layer.elements, viewportBound);
+            const resolvedLayerRenderBound = this._getResolvedStackingCanvasBound(canvas, layerRenderBound);
+            this._applyStackingCanvasLayout(canvas, resolvedLayerRenderBound);
+            if (!resolvedLayerRenderBound ||
+                canvas.width === 0 ||
+                canvas.height === 0) {
+                continue;
+            }
+            const layerCtx = canvas.getContext('2d');
+            const layerRc = new RoughCanvas(layerCtx.canvas);
+            layerCtx.clearRect(0, 0, canvas.width, canvas.height);
+            layerCtx.save();
+            layerCtx.setTransform(matrix);
+            this._renderByBound(layerCtx, matrix, layerRc, resolvedLayerRenderBound, layer.elements, false, renderStats);
+        }
+        if (fullRender || this._mainCanvasDirty) {
+            allCanvasLayers.forEach((layer, idx) => {
+                if (!this._stackingCanvas[idx]) {
+                    fallbackElement = fallbackElement.concat(layer.elements);
+                }
+            });
+            ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
             ctx.save();
             ctx.setTransform(matrix);
-            this._renderByBound(ctx, matrix, rc, viewportBounds, layer.elements);
-        });
-        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        ctx.save();
-        ctx.setTransform(matrix);
-        this._renderByBound(ctx, matrix, new RoughCanvas(ctx.canvas), viewportBounds, fallbackElement, true);
+            this._renderByBound(ctx, matrix, new RoughCanvas(ctx.canvas), viewportBounds, fallbackElement, true, renderStats);
+        }
+        const canvasMemorySnapshots = this._getCanvasMemorySnapshots();
+        const canvasMemoryBytes = canvasMemorySnapshots.reduce((sum, snapshot) => sum + snapshot.bytes, 0);
+        const layerTypes = this.layerManager.layers.map(layer => layer.type);
+        const renderDurationMs = performance.now() - renderStart;
+        this._debugMetrics.renderCount += 1;
+        this._debugMetrics.totalRenderDurationMs += renderDurationMs;
+        this._debugMetrics.lastRenderDurationMs = renderDurationMs;
+        this._debugMetrics.maxRenderDurationMs = Math.max(this._debugMetrics.maxRenderDurationMs, renderDurationMs);
+        this._debugMetrics.lastRenderMetrics = renderStats;
+        this._debugMetrics.fallbackElementCount = fallbackElement.length;
+        this._debugMetrics.dirtyLayerRenderCount = stackingIndexesToRender.length;
+        this._lastDebugSnapshot = {
+            canvasMemorySnapshots,
+            canvasMemoryBytes,
+            canvasPixelCount: canvasMemorySnapshots.reduce((sum, snapshot) => sum + snapshot.width * snapshot.height, 0),
+            stackingCanvasCount: this._stackingCanvas.length,
+            canvasLayerCount: layerTypes.filter(type => type === 'canvas').length,
+            totalLayerCount: layerTypes.length,
+            pooledStackingCanvasCount: this._stackingCanvasPool.length,
+            visibleStackingCanvasCount: this._stackingCanvas.filter(canvas => canvas.width > 0 && canvas.height > 0).length,
+        };
+        this._needsFullRender = false;
+        this._mainCanvasDirty = false;
+        this._dirtyStackingCanvasIndexes.clear();
     }
-    _renderByBound(ctx, matrix, rc, bound, surfaceElements, overLay = false) {
+    _renderByBound(ctx, matrix, rc, bound, surfaceElements, overLay = false, renderStats) {
         if (!ctx)
             return;
+        renderStats && (renderStats.renderByBoundCallCount += 1);
         const elements = surfaceElements ??
             this.grid.search(bound, {
                 filter: ['canvas', 'local'],
@@ -180,8 +429,10 @@ export class CanvasRenderer {
         for (const element of elements) {
             const display = (element.display ?? true) && !element.hidden;
             if (display && intersects(getBoundWithRotation(element), bound)) {
+                renderStats && (renderStats.visibleElementCount += 1);
                 if (this.usePlaceholder &&
                     !element.forceFullRender) {
+                    renderStats && (renderStats.placeholderElementCount += 1);
                     ctx.save();
                     ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
                     const drawX = element.x - bound.x;
@@ -190,6 +441,7 @@ export class CanvasRenderer {
                     ctx.restore();
                 }
                 else {
+                    renderStats && (renderStats.renderedElementCount += 1);
                     ctx.save();
                     const renderFn = this.std.getOptional(ElementRendererIdentifier(element.type));
                     if (!renderFn)
@@ -203,6 +455,7 @@ export class CanvasRenderer {
             }
         }
         if (overLay) {
+            renderStats && (renderStats.overlayCount += this._overlays.size);
             for (const overlay of this._overlays) {
                 ctx.save();
                 ctx.translate(-bound.x, -bound.y);
@@ -215,26 +468,28 @@ export class CanvasRenderer {
     _resetSize() {
         const sizeUpdater = this._canvasSizeUpdater();
         sizeUpdater.update(this.canvas);
-        this._stackingCanvas.forEach(sizeUpdater.update);
-        this.refresh();
+        this._invalidate({ type: 'all' });
     }
     _watchSurface(surfaceModel) {
-        this._disposables.add(surfaceModel.elementAdded.subscribe(() => this.refresh()));
-        this._disposables.add(surfaceModel.elementRemoved.subscribe(() => this.refresh()));
-        this._disposables.add(surfaceModel.localElementAdded.subscribe(() => this.refresh()));
-        this._disposables.add(surfaceModel.localElementDeleted.subscribe(() => this.refresh()));
-        this._disposables.add(surfaceModel.localElementUpdated.subscribe(() => this.refresh()));
+        this._disposables.add(surfaceModel.elementAdded.subscribe(() => this.refresh({ type: 'all' })));
+        this._disposables.add(surfaceModel.elementRemoved.subscribe(() => this.refresh({ type: 'all' })));
+        this._disposables.add(surfaceModel.localElementAdded.subscribe(() => this.refresh({ type: 'all' })));
+        this._disposables.add(surfaceModel.localElementDeleted.subscribe(() => this.refresh({ type: 'all' })));
+        this._disposables.add(surfaceModel.localElementUpdated.subscribe(({ model }) => {
+            this.refresh({ type: 'element', element: model });
+        }));
         this._disposables.add(surfaceModel.elementUpdated.subscribe(payload => {
             // ignore externalXYWH update cause it's updated by the renderer
             if (payload.props['externalXYWH'])
                 return;
-            this.refresh();
+            const element = surfaceModel.getElementById(payload.id);
+            this.refresh(element ? { type: 'element', element } : { type: 'all' });
         }));
     }
     addOverlay(overlay) {
         overlay.setRenderer(this);
         this._overlays.add(overlay);
-        this.refresh();
+        this.refresh({ type: 'main' });
     }
     /**
      * Used to attach main canvas, main canvas will always exist
@@ -244,7 +499,7 @@ export class CanvasRenderer {
         this._container = container;
         container.append(this.canvas);
         this._resetSize();
-        this.refresh();
+        this.refresh({ type: 'all' });
     }
     dispose() {
         this._overlays.forEach(overlay => overlay.dispose());
@@ -281,9 +536,43 @@ export class CanvasRenderer {
     getPropertyValue(property) {
         return this.provider.getPropertyValue?.(property) ?? '';
     }
-    refresh() {
-        if (this._refreshRafId !== null)
+    getDebugMetrics() {
+        return {
+            ...this._debugMetrics,
+            ...this._lastDebugSnapshot,
+            canvasMemoryMegabytes: this._lastDebugSnapshot.canvasMemoryBytes / 1024 / 1024,
+        };
+    }
+    resetDebugMetrics() {
+        this._debugMetrics = {
+            refreshCount: 0,
+            coalescedRefreshCount: 0,
+            renderCount: 0,
+            totalRenderDurationMs: 0,
+            lastRenderDurationMs: 0,
+            maxRenderDurationMs: 0,
+            lastRenderMetrics: this._createRenderPassStats(),
+            dirtyLayerRenderCount: 0,
+            fallbackElementCount: 0,
+        };
+        this._lastDebugSnapshot = {
+            canvasMemoryBytes: 0,
+            canvasMemorySnapshots: [],
+            canvasPixelCount: 0,
+            canvasLayerCount: 0,
+            pooledStackingCanvasCount: 0,
+            stackingCanvasCount: 0,
+            totalLayerCount: 0,
+            visibleStackingCanvasCount: 0,
+        };
+    }
+    refresh(target = { type: 'all' }) {
+        this._debugMetrics.refreshCount += 1;
+        this._invalidate(target);
+        if (this._refreshRafId !== null) {
+            this._debugMetrics.coalescedRefreshCount += 1;
             return;
+        }
         this._refreshRafId = requestConnectedFrame(() => {
             this._refreshRafId = null;
             this._render();
@@ -295,6 +584,6 @@ export class CanvasRenderer {
         }
         overlay.setRenderer(null);
         this._overlays.delete(overlay);
-        this.refresh();
+        this.refresh({ type: 'main' });
     }
 }

package/dist/_pkgs/affine-block-surface/renderer/dom-renderer.js

@@ -242,7 +242,10 @@ export class DomRenderer {
             addedElements.push(domElement);
         }
         const geometricStyles = calculatePlaceholderRect(elementModel, viewportBounds, zoom);
-        Object.assign(domElement.style, geometricStyles);
+        const zIndexStyle = {
+            'z-index': this.layerManager.getZIndex(elementModel),
+        };
+        Object.assign(domElement.style, geometricStyles, zIndexStyle);
         Object.assign(domElement.style, PLACEHOLDER_RESET_STYLES);
         // Clear classes specific to shapes, if applicable
         if (elementModel.type === 'shape') {
@@ -264,7 +267,10 @@ export class DomRenderer {
         }
         const geometricStyles = calculateFullElementRect(elementModel, viewportBounds, zoom);
         const opacityStyle = getOpacity(elementModel);
-        Object.assign(domElement.style, geometricStyles, opacityStyle);
+        const zIndexStyle = {
+            'z-index': this.layerManager.getZIndex(elementModel),
+        };
+        Object.assign(domElement.style, geometricStyles, opacityStyle, zIndexStyle);
         this._renderElement(elementModel, domElement);
     }
     _render() {
@@ -273,22 +279,29 @@ export class DomRenderer {
     _watchSurface(surfaceModel) {
         this._disposables.add(surfaceModel.elementAdded.subscribe(payload => {
             this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
+            this._markViewportDirty();
             this.refresh();
         }));
         this._disposables.add(surfaceModel.elementRemoved.subscribe(payload => {
             this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+            this._markViewportDirty();
             this.refresh();
         }));
         this._disposables.add(surfaceModel.localElementAdded.subscribe(payload => {
             this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
+            this._markViewportDirty();
             this.refresh();
         }));
         this._disposables.add(surfaceModel.localElementDeleted.subscribe(payload => {
             this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+            this._markViewportDirty();
             this.refresh();
         }));
         this._disposables.add(surfaceModel.localElementUpdated.subscribe(payload => {
             this._markElementDirty(payload.model.id, UpdateType.ELEMENT_UPDATED);
+            if (payload.props['index'] || payload.props['groupId']) {
+                this._markViewportDirty();
+            }
             this.refresh();
         }));
         this._disposables.add(surfaceModel.elementUpdated.subscribe(payload => {
@@ -296,6 +309,9 @@ export class DomRenderer {
             if (payload.props['externalXYWH'])
                 return;
             this._markElementDirty(payload.id, UpdateType.ELEMENT_UPDATED);
+            if (payload.props['index'] || payload.props['childIds']) {
+                this._markViewportDirty();
+            }
             this.refresh();
         }));
     }

package/dist/_pkgs/affine-block-surface/renderer/tool-overlay.d.ts

@@ -1,7 +1,7 @@
 import { DisposableGroup } from '../../global/disposable/index.js';
 import type { GfxController } from '../../std/gfx/index.js';
-import type { RoughCanvas } from '../utils/rough/canvas';
-import { Overlay } from './overlay';
+import type { RoughCanvas } from '../utils/rough/canvas.js';
+import { Overlay } from './overlay.js';
 export declare class ToolOverlay extends Overlay {
     protected disposables: DisposableGroup;
     globalAlpha: number;

package/dist/_pkgs/affine-block-surface/renderer/tool-overlay.js

@@ -1,7 +1,7 @@
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { noop } from '../../global/utils/index.js';
 import { startWith } from 'rxjs';
-import { Overlay } from './overlay';
+import { Overlay } from './overlay.js';
 export class ToolOverlay extends Overlay {
     constructor(gfx) {
         super(gfx);

package/dist/_pkgs/affine-block-surface/store.js

@@ -1,6 +1,6 @@
 import { StoreExtensionProvider, } from '../affine-ext-loader/index.js';
-import { EdgelessSurfaceBlockAdapterExtensions } from './adapters';
-import { SurfaceBlockSchemaExtension } from './surface-model';
+import { EdgelessSurfaceBlockAdapterExtensions } from './adapters/index.js';
+import { SurfaceBlockSchemaExtension } from './surface-model.js';
 export class SurfaceStoreExtension extends StoreExtensionProvider {
     constructor() {
         super(...arguments);

package/dist/_pkgs/affine-block-surface/tool/default-tool.js

@@ -244,6 +244,14 @@ export class DefaultTool extends BaseTool {
         if (this.selection.editing || preventDefaultState || handledByView)
             return;
         this.movementDragging = true;
+        // NOTE: no readonly branch here on purpose. The refusal lives one level
+        // down, in `InteractivityManager.handleElementMove` / `handleElementResize`
+        // / `handleElementRotate` / `requestElementClone` — the layer that actually
+        // writes `xywh` through `@field()` accessors, i.e. raw `store.transact`
+        // outside `EdgelessCRUDExtension`. Short-circuiting the drag HERE was both
+        // redundant (the net alone stops the write) and harmful: it left the tool
+        // holding a half-initialized selecting state, so once readonly was lifted
+        // the board no longer selected or moved anything.
         // Determine the drag type based on the current state and event
         let dragType = this._determineDragType(e);
         const elements = this.selection.selectedElements;