@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-shared/utils/print-to-pdf.js

@@ -1,8 +1,102 @@
+/**
+ * Styles injected into the print iframe.
+ *
+ * The printed document is always rendered on white paper, so the whole
+ * palette is pinned to a light one: a document read in the dark theme would
+ * otherwise print light text on a background the printer leaves white, and
+ * every one of those elements would come out invisible.
+ *
+ * Exported so the print-fidelity rules can be asserted in unit tests.
+ */
+export const printToPdfStyles = `@media print {
+              html, body {
+                height: initial !important;
+                overflow: initial !important;
+                print-color-adjust: exact;
+                -webkit-print-color-adjust: exact;
+                color: #000 !important;
+                background: #fff !important;
+                color-scheme: light !important;
+              }
+              ::-webkit-scrollbar {
+                display: none;
+              }
+              :root, body {
+                --affine-text-primary: #000 !important;
+                --affine-text-secondary: #111 !important;
+                --affine-text-tertiary: #333 !important;
+                --affine-background-primary: #fff !important;
+                --affine-background-secondary: #fff !important;
+                --affine-background-tertiary: #fff !important;
+                --affine-background-code-block: #f5f5f5 !important;
+                --affine-quote-color: #e3e3e3 !important;
+                --affine-border-color: #e3e3e3 !important;
+              }
+              body, [data-theme='dark'] {
+                color: #000 !important;
+                background: #fff !important;
+              }
+              body * {
+                color: #000 !important;
+                -webkit-text-fill-color: #000 !important;
+              }
+              :root {
+                --affine-note-shadow-box: none !important;
+                --affine-note-shadow-sticker: none !important;
+              }
+            }`;
+/**
+ * Waits until every image inside `container` — shadow roots included — has
+ * either decoded or given up.
+ *
+ * A print dialog opened while images are still in flight prints their empty
+ * frames, so this is awaited before handing the document to the printer. An
+ * image that fails to load resolves too: a broken picture must not hang the
+ * print for ever.
+ */
+export async function waitForImages(container) {
+    const images = [];
+    const view = container.ownerDocument.defaultView;
+    if (!view)
+        return;
+    const findImages = (root) => {
+        if (root instanceof view.HTMLImageElement) {
+            images.push(root);
+        }
+        if (root instanceof view.HTMLElement || root instanceof view.ShadowRoot) {
+            root.childNodes.forEach(findImages);
+        }
+        if (root instanceof view.HTMLElement && root.shadowRoot) {
+            findImages(root.shadowRoot);
+        }
+    };
+    findImages(container);
+    await Promise.all(images.map(img => {
+        if (img.complete) {
+            if (img.naturalWidth === 0) {
+                console.warn('Image failed to load:', img.src);
+            }
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            img.onload = resolve;
+            img.onerror = resolve;
+        });
+    }));
+}
 export async function printToPdf(rootElement = document.querySelector('.affine-page-viewport'), options = {}) {
     return new Promise((resolve, reject) => {
         const iframe = document.createElement('iframe');
         document.body.append(iframe);
-        iframe.style.display = 'none';
+        // hidden, but still laid out and painted: a `display: none` iframe never
+        // loads the images it contains, so they would be missing from the print
+        Object.assign(iframe.style, {
+            visibility: 'hidden',
+            position: 'absolute',
+            width: '0',
+            height: '0',
+            border: 'none',
+        });
         iframe.srcdoc = '<!DOCTYPE html>';
         iframe.onload = async () => {
             if (!iframe.contentWindow) {
@@ -13,27 +107,14 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                 reject(new Error('Root element not defined, unable to print pdf'));
                 return;
             }
-            iframe.contentWindow.document
-                .write(`<!DOCTYPE html><html><head><style>@media print {
-              html, body {
-                height: initial !important;
-                overflow: initial !important;
-                print-color-adjust: exact;
-                -webkit-print-color-adjust: exact;
-              }
-              ::-webkit-scrollbar {
-                display: none;
-              }
-              :root {
-                --affine-note-shadow-box: none !important;
-                --affine-note-shadow-sticker: none !important;
-              }
-            }</style></head><body></body></html>`);
+            const doc = iframe.contentWindow.document;
+            doc.write(`<!DOCTYPE html><html><head><style>${printToPdfStyles}</style></head><body></body></html>`);
+            doc.close();
             // copy all styles to iframe
             for (const element of document.styleSheets) {
                 try {
                     for (const cssRule of element.cssRules) {
-                        const target = iframe.contentWindow.document.styleSheets[0];
+                        const target = doc.styleSheets[0];
                         target.insertRule(cssRule.cssText, target.cssRules.length);
                     }
                 }
@@ -46,12 +127,31 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     }
                 }
             }
+            // find every canvas, including the ones sitting inside a shadow root
+            const findAllCanvases = (root) => {
+                const canvases = [];
+                const traverse = (node) => {
+                    if (node instanceof HTMLCanvasElement) {
+                        canvases.push(node);
+                    }
+                    if (node instanceof HTMLElement || node instanceof ShadowRoot) {
+                        node.childNodes.forEach(traverse);
+                    }
+                    if (node instanceof HTMLElement && node.shadowRoot) {
+                        traverse(node.shadowRoot);
+                    }
+                };
+                traverse(root);
+                return canvases;
+            };
             // convert all canvas to image
             const canvasImgObjectUrlMap = new Map();
-            const allCanvas = rootElement.getElementsByTagName('canvas');
+            const allCanvas = findAllCanvases(rootElement);
+            const canvasToKeyMap = new Map();
             let canvasKey = 1;
             for (const canvas of allCanvas) {
-                canvas.dataset['printToPdfCanvasKey'] = canvasKey.toString();
+                const key = canvasKey.toString();
+                canvasToKeyMap.set(canvas, key);
                 canvasKey++;
                 const canvasImgObjectUrl = await new Promise(resolve => {
                     try {
@@ -65,9 +165,35 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     console.warn('canvas cannot be converted to image when printing pdf, this may be because of CORS policy');
                     continue;
                 }
-                canvasImgObjectUrlMap.set(canvas.dataset['printToPdfCanvasKey'], URL.createObjectURL(canvasImgObjectUrl));
+                canvasImgObjectUrlMap.set(key, URL.createObjectURL(canvasImgObjectUrl));
             }
-            const importedRoot = iframe.contentWindow.document.importNode(rootElement, true);
+            // deep clone that flattens shadow DOM into light DOM, so what the
+            // printer sees is what the reader sees
+            const deepCloneWithShadows = (node) => {
+                const clone = doc.importNode(node, false);
+                if (clone instanceof HTMLCanvasElement &&
+                    node instanceof HTMLCanvasElement) {
+                    const key = canvasToKeyMap.get(node);
+                    if (key) {
+                        clone.dataset['printToPdfCanvasKey'] = key;
+                    }
+                }
+                const appendChildren = (source) => {
+                    source.childNodes.forEach(child => {
+                        clone.append(deepCloneWithShadows(child));
+                    });
+                };
+                if (node instanceof HTMLElement && node.shadowRoot) {
+                    appendChildren(node.shadowRoot);
+                }
+                appendChildren(node);
+                return clone;
+            };
+            const importedRoot = deepCloneWithShadows(rootElement);
+            // force light theme in print iframe
+            doc.documentElement.dataset.theme = 'light';
+            doc.body.dataset.theme = 'light';
+            importedRoot.dataset.theme = 'light';
             // draw saved canvas image to canvas
             const allImportedCanvas = importedRoot.getElementsByTagName('canvas');
             for (const importedCanvas of allImportedCanvas) {
@@ -83,21 +209,29 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     }
                 }
             }
+            // a lazily loaded image would still be waiting for a scroll that never
+            // happens in the print iframe: ask for it now
+            const allImages = importedRoot.querySelectorAll('img');
+            allImages.forEach(img => {
+                img.removeAttribute('loading');
+                const src = img.getAttribute('src');
+                if (src)
+                    img.setAttribute('src', src);
+            });
             // append to iframe and print
-            iframe.contentWindow.document.body.append(importedRoot);
+            doc.body.append(importedRoot);
             await options.beforeprint?.(iframe);
-            // browser may take some time to load font
-            await new Promise(resolve => {
-                setTimeout(() => {
-                    resolve();
-                }, 1000);
-            });
+            await waitForImages(importedRoot);
+            // browser may take some time to load font or other resources
+            await (doc.fonts?.ready ??
+                new Promise(resolve => {
+                    setTimeout(() => {
+                        resolve();
+                    }, 1000);
+                }));
             iframe.contentWindow.onafterprint = async () => {
                 iframe.remove();
                 // clean up
-                for (const canvas of allCanvas) {
-                    delete canvas.dataset['printToPdfCanvasKey'];
-                }
                 for (const [_, url] of canvasImgObjectUrlMap) {
                     URL.revokeObjectURL(url);
                 }

package/dist/_pkgs/affine-shared/utils/zod-schema.d.ts

@@ -2275,3 +2275,10 @@ export declare const NodePropsSchema: z.ZodObject<{
 }>;
 export type NodeProps = z.infer<typeof NodePropsSchema>;
 export declare function makeDeepOptional(schema: ZodTypeAny): ZodTypeAny;
+/**
+ * Pick, from an arbitrary bag of style props, the subset that is valid for
+ * the given node-props key. Filtering is per prop, so a prop foreign to the
+ * target type (e.g. a connector `mode` offered to a shape) never discards
+ * the rest of the bag. Returns null when nothing applies.
+ */
+export declare function pickStylePropsForKey<K extends keyof NodeProps>(key: K, props: Record<string, unknown>): Partial<NodeProps[K]> | null;

package/dist/_pkgs/affine-shared/utils/zod-schema.js

@@ -1,5 +1,5 @@
 import { ColorSchema, ConnectorMode, DEFAULT_CONNECTOR_MODE, DEFAULT_FRONT_ENDPOINT_STYLE, DEFAULT_HIGHLIGHTER_LINE_WIDTH, DEFAULT_REAR_ENDPOINT_STYLE, DEFAULT_ROUGHNESS, DefaultTheme, EdgelessTextZodSchema, FontFamily, FontFamilySchema, FontStyle, FontStyleSchema, FontWeight, FontWeightSchema, FrameZodSchema, HIGHLIGHTER_LINE_WIDTHS, LayoutType, LineWidth, MindmapStyle, NoteZodSchema, PointStyle, ShapeStyle, StrokeStyle, StrokeStyleSchema, TextAlign, TextAlignSchema, TextVerticalAlign, } from '../../affine-model/index.js';
-import { z, ZodDefault, ZodIntersection, ZodObject, ZodUnion, } from 'zod';
+import { z, ZodDefault, ZodIntersection, ZodObject, ZodOptional, ZodUnion, } from 'zod';
 const ConnectorEndpointSchema = z.nativeEnum(PointStyle);
 const LineWidthSchema = z.nativeEnum(LineWidth);
 const ShapeStyleSchema = z.nativeEnum(ShapeStyle);
@@ -165,3 +165,29 @@ export function makeDeepOptional(schema) {
         return schema.optional();
     }
 }
+const OptionalNodePropsSchema = makeDeepOptional(NodePropsSchema);
+/**
+ * Pick, from an arbitrary bag of style props, the subset that is valid for
+ * the given node-props key. Filtering is per prop, so a prop foreign to the
+ * target type (e.g. a connector `mode` offered to a shape) never discards
+ * the rest of the bag. Returns null when nothing applies.
+ */
+export function pickStylePropsForKey(key, props) {
+    const keySchema = OptionalNodePropsSchema._def.innerType.shape[key];
+    const inner = keySchema instanceof ZodOptional ? keySchema.unwrap() : keySchema;
+    if (!(inner instanceof ZodObject))
+        return null;
+    const picked = {};
+    for (const [prop, value] of Object.entries(props)) {
+        const propSchema = inner.shape[prop];
+        if (!propSchema || value === undefined)
+            continue;
+        const parsed = propSchema.safeParse(value);
+        if (parsed.success && parsed.data !== undefined) {
+            picked[prop] = parsed.data;
+        }
+    }
+    return Object.keys(picked).length
+        ? picked
+        : null;
+}

package/dist/_pkgs/affine-widget-drag-handle/watchers/edgeless-watcher.d.ts

@@ -1,5 +1,15 @@
 import { Rect } from '../../global/gfx/index.js';
 import type { AffineDragHandleWidget } from '../drag-handle.js';
+type HoveredElemArea = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+    padding: number;
+    containerWidth: number;
+};
 /**
  * Used to control the drag handle visibility in edgeless mode
  *
@@ -8,23 +18,22 @@ import type { AffineDragHandleWidget } from '../drag-handle.js';
  */
 export declare class EdgelessWatcher {
     readonly widget: AffineDragHandleWidget;
+    private _pendingHoveredElemArea;
+    private _lastAppliedHoveredElemArea;
+    private _showDragHandleRafId;
+    private _surfaceElementUpdatedRafId;
+    private readonly _isAreaEqual;
+    private readonly _scheduleShowDragHandleFromSurfaceUpdate;
     private readonly _handleEdgelessToolUpdated;
     private readonly _handleEdgelessViewPortUpdated;
+    private readonly _flushShowDragHandle;
     private readonly _showDragHandle;
     private readonly _updateDragHoverRectTopLevelBlock;
     get gfx(): import("../../std/gfx/controller.js").GfxController;
     updateAnchorElement: () => void;
     get hoveredElemAreaRect(): Rect | null;
-    get hoveredElemArea(): {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-        width: number;
-        height: number;
-        padding: number;
-        containerWidth: number;
-    } | null;
+    get hoveredElemArea(): HoveredElemArea | null;
     constructor(widget: AffineDragHandleWidget);
     watch(): void;
 }
+export {};

package/dist/_pkgs/affine-widget-drag-handle/watchers/edgeless-watcher.js

@@ -1,5 +1,5 @@
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { getSelectedRect } from '../../affine-shared/utils/index.js';
+import { getSelectedRect, toOverlayCoord } from '../../affine-shared/utils/index.js';
 import { Rect } from '../../global/gfx/index.js';
 import { GfxControllerIdentifier, } from '../../std/gfx/index.js';
 import { effect } from '@preact/signals-core';
@@ -26,14 +26,21 @@ export class EdgelessWatcher {
             return null;
         const { viewport } = this.gfx;
         const rect = getSelectedRect([edgelessElement]);
-        let [left, top] = viewport.toViewCoord(rect.left, rect.top);
-        const scale = this.widget.scale.peek();
+        // The handle is drawn inside the container the host may have scaled, so
+        // the area it hugs is stated in that container's space, the way a gfx
+        // block states its own placement.
+        const { viewScale } = viewport;
+        let [left, top] = toOverlayCoord(viewport, rect.left, rect.top);
+        // The widget's scale tracks the viewport zoom
+        // (see `_handleEdgelessViewPortUpdated`); dividing it by `viewScale` is
+        // what `overlayScale` does for every other overlay.
+        const scale = this.widget.scale.peek() / viewScale;
         const width = rect.width * scale;
         const height = rect.height * scale;
         let [right, bottom] = [left + width, top + height];
         const padding = HOVER_AREA_RECT_PADDING_TOP_LEVEL * scale;
         const containerWidth = DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL * scale;
-        const offsetLeft = DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL;
+        const offsetLeft = DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL / viewScale;
         left -= containerWidth + offsetLeft;
         right += padding;
         bottom += padding;
@@ -50,6 +57,32 @@ export class EdgelessWatcher {
     }
     constructor(widget) {
         this.widget = widget;
+        this._pendingHoveredElemArea = null;
+        this._lastAppliedHoveredElemArea = null;
+        this._showDragHandleRafId = null;
+        this._surfaceElementUpdatedRafId = null;
+        this._isAreaEqual = (left, right) => {
+            if (!left || !right)
+                return false;
+            return (left.left === right.left &&
+                left.top === right.top &&
+                left.right === right.right &&
+                left.bottom === right.bottom &&
+                left.width === right.width &&
+                left.height === right.height &&
+                left.padding === right.padding &&
+                left.containerWidth === right.containerWidth);
+        };
+        this._scheduleShowDragHandleFromSurfaceUpdate = () => {
+            if (this._surfaceElementUpdatedRafId !== null)
+                return;
+            this._surfaceElementUpdatedRafId = requestAnimationFrame(() => {
+                this._surfaceElementUpdatedRafId = null;
+                if (!this.widget.isGfxDragHandleVisible)
+                    return;
+                this._showDragHandle();
+            });
+        };
         this._handleEdgelessToolUpdated = (newTool) => {
             if (newTool.toolType?.toolName === 'default') {
                 this.updateAnchorElement();
@@ -62,41 +95,99 @@ export class EdgelessWatcher {
             if (this.widget.scale.peek() !== zoom) {
                 this.widget.scale.value = zoom;
             }
-            if (this.widget.center[0] !== center[0] &&
+            // `||`, not `&&`: a pan along a single axis moves the centre just as much
+            // as a diagonal one does.
+            if (this.widget.center[0] !== center[0] ||
                 this.widget.center[1] !== center[1]) {
                 this.widget.center = [...center];
             }
             if (this.widget.isGfxDragHandleVisible) {
-                this._showDragHandle();
-                this._updateDragHoverRectTopLevelBlock();
+                // Measured once and read twice: this runs on every frame of a pan or a
+                // zoom, and measuring means a layout read per selected element.
+                const area = this.hoveredElemArea;
+                this._showDragHandle(area);
+                this._updateDragHoverRectTopLevelBlock(area);
             }
             else if (this.widget.activeDragHandle) {
                 this.widget.hide();
             }
         };
-        this._showDragHandle = () => {
-            if (!this.widget.anchorBlockId)
+        this._flushShowDragHandle = () => {
+            this._showDragHandleRafId = null;
+            // `anchorBlockId` is a signal, so the object itself is always truthy: its
+            // value is what says whether anything is anchored.
+            if (!this.widget.anchorBlockId.peek())
                 return;
             const container = this.widget.dragHandleContainer;
             const grabber = this.widget.dragHandleGrabber;
             if (!container || !grabber)
                 return;
-            const area = this.hoveredElemArea;
+            const area = this._pendingHoveredElemArea ?? this.hoveredElemArea;
+            this._pendingHoveredElemArea = null;
             if (!area)
                 return;
-            container.style.transition = 'none';
-            container.style.paddingTop = `0px`;
-            container.style.paddingBottom = `0px`;
-            container.style.left = `${area.left}px`;
-            container.style.top = `${area.top}px`;
-            container.style.display = 'flex';
+            if (this.widget.isGfxDragHandleVisible &&
+                this._isAreaEqual(this._lastAppliedHoveredElemArea, area)) {
+                return;
+            }
+            // Every write below invalidates style, so each one happens only when it
+            // actually changes something.
+            if (container.style.transition !== 'none') {
+                container.style.transition = 'none';
+            }
+            if (container.style.paddingTop !== '0px') {
+                container.style.paddingTop = '0px';
+            }
+            if (container.style.paddingBottom !== '0px') {
+                container.style.paddingBottom = '0px';
+            }
+            const nextLeft = `${area.left}px`;
+            if (container.style.left !== nextLeft) {
+                container.style.left = nextLeft;
+            }
+            const nextTop = `${area.top}px`;
+            if (container.style.top !== nextTop) {
+                container.style.top = nextTop;
+            }
+            if (container.style.display !== 'flex') {
+                container.style.display = 'flex';
+            }
             this.widget.handleAnchorModelDisposables();
             this.widget.activeDragHandle = 'gfx';
+            this._lastAppliedHoveredElemArea = { ...area };
+        };
+        this._showDragHandle = (area) => {
+            this._pendingHoveredElemArea = area ?? this.hoveredElemArea;
+            if (!this._pendingHoveredElemArea) {
+                return;
+            }
+            if (this.widget.isGfxDragHandleVisible &&
+                this._showDragHandleRafId === null &&
+                this._isAreaEqual(this._lastAppliedHoveredElemArea, this._pendingHoveredElemArea)) {
+                return;
+            }
+            if (this._showDragHandleRafId !== null) {
+                return;
+            }
+            this._showDragHandleRafId = requestAnimationFrame(this._flushShowDragHandle);
         };
-        this._updateDragHoverRectTopLevelBlock = () => {
+        this._updateDragHoverRectTopLevelBlock = (area) => {
             if (!this.widget.dragHoverRect)
                 return;
-            this.widget.dragHoverRect = this.hoveredElemAreaRect;
+            const nextArea = area ?? this.hoveredElemArea;
+            if (!nextArea) {
+                this.widget.dragHoverRect = null;
+                return;
+            }
+            const nextRect = new Rect(nextArea.left, nextArea.top, nextArea.right, nextArea.bottom);
+            const prevRect = this.widget.dragHoverRect;
+            if (prevRect.left === nextRect.left &&
+                prevRect.top === nextRect.top &&
+                prevRect.width === nextRect.width &&
+                prevRect.height === nextRect.height) {
+                return;
+            }
+            this.widget.dragHoverRect = nextRect;
         };
         this.updateAnchorElement = () => {
             if (!this.widget.isConnected)
@@ -128,6 +219,18 @@ export class EdgelessWatcher {
         const { viewport, selection, tool, surface } = gfx;
         const edgelessSlots = std.get(EdgelessLegacySlotIdentifier);
         disposables.add(viewport.viewportUpdated.subscribe(this._handleEdgelessViewPortUpdated));
+        disposables.add(() => {
+            if (this._showDragHandleRafId !== null) {
+                cancelAnimationFrame(this._showDragHandleRafId);
+                this._showDragHandleRafId = null;
+            }
+            if (this._surfaceElementUpdatedRafId !== null) {
+                cancelAnimationFrame(this._surfaceElementUpdatedRafId);
+                this._surfaceElementUpdatedRafId = null;
+            }
+            this._pendingHoveredElemArea = null;
+            this._lastAppliedHoveredElemArea = null;
+        });
         disposables.add(selection.slots.updated.subscribe(() => {
             this.updateAnchorElement();
         }));
@@ -156,11 +259,7 @@ export class EdgelessWatcher {
             }
         }));
         if (surface) {
-            disposables.add(surface.elementUpdated.subscribe(() => {
-                if (this.widget.isGfxDragHandleVisible) {
-                    this._showDragHandle();
-                }
-            }));
+            disposables.add(surface.elementUpdated.subscribe(this._scheduleShowDragHandleFromSurfaceUpdate));
         }
     }
 }

package/dist/_pkgs/affine-widget-drag-handle/watchers/pointer-event-watcher.d.ts

@@ -18,6 +18,8 @@ export declare class PointerEventWatcher {
     private readonly _grabberStyle;
     private _lastHoveredBlockId;
     private _lastShowedBlock;
+    private _lastPointerHitBlockId;
+    private _lastPointerHitBlockElement;
     /**
      * When pointer move on block, should show drag handle
      * And update hover block id and path

package/dist/_pkgs/affine-widget-drag-handle/watchers/pointer-event-watcher.js

@@ -106,6 +106,8 @@ export class PointerEventWatcher {
         });
         this._lastHoveredBlockId = null;
         this._lastShowedBlock = null;
+        this._lastPointerHitBlockId = null;
+        this._lastPointerHitBlockElement = null;
         /**
          * When pointer move on block, should show drag handle
          * And update hover block id and path
@@ -118,6 +120,7 @@ export class PointerEventWatcher {
                 return;
             const closestBlock = getClosestBlockByPoint(this.widget.host, this.widget.rootComponent, point);
             if (!closestBlock) {
+                this._lastPointerHitBlockId = null;
                 this.widget.anchorBlockId.value = null;
                 return;
             }
@@ -169,19 +172,35 @@ export class PointerEventWatcher {
             if (this.widget.isGfxDragHandleVisible)
                 return;
             const state = ctx.get('pointerState');
-            // When pointer is moving, should do nothing
-            if (state.delta.x !== 0 && state.delta.y !== 0)
-                return;
             const { target } = state.raw;
             const element = captureEventTarget(target);
             // When pointer not on block or on dragging, should do nothing
-            if (!element)
+            if (!element) {
+                this._lastPointerHitBlockId = null;
+                this._lastPointerHitBlockElement = null;
                 return;
+            }
             // When pointer on drag handle, should do nothing
             if (element.closest('.affine-drag-handle-container'))
                 return;
             if (!this.widget.rootComponent)
                 return;
+            const hitBlock = element.closest(`[${BLOCK_ID_ATTR}]`);
+            const hitBlockId = hitBlock?.getAttribute(BLOCK_ID_ATTR) ?? null;
+            // Pointer moves arrive by the hundred. The note lookup below walks the
+            // tree and measures, so it is worth doing only when the pointer has
+            // actually left the block it was already on. This replaces a guard that
+            // skipped diagonal moves only, which cost the same work on every
+            // straight move and skipped the update on every diagonal one.
+            if (hitBlockId &&
+                this.widget.isBlockDragHandleVisible &&
+                hitBlockId === this._lastPointerHitBlockId &&
+                hitBlock === this._lastPointerHitBlockElement &&
+                isBlockIdEqual(this.widget.anchorBlockId.peek(), hitBlockId)) {
+                return;
+            }
+            this._lastPointerHitBlockId = hitBlockId;
+            this._lastPointerHitBlockElement = hitBlock;
             // When pointer out of note block hover area or inside database, should hide drag handle
             const point = new Point(state.raw.x, state.raw.y);
             const closestNoteBlock = getClosestNoteBlock(this.widget.host, this.widget.rootComponent, point);
@@ -257,6 +276,8 @@ export class PointerEventWatcher {
     reset() {
         this._lastHoveredBlockId = null;
         this._lastShowedBlock = null;
+        this._lastPointerHitBlockId = null;
+        this._lastPointerHitBlockElement = null;
     }
     watch() {
         this.widget.handleEvent('click', this._clickHandler);

package/dist/_pkgs/affine-widget-edgeless-selected-rect/auto-complete-panel.js

@@ -39,7 +39,7 @@ import { mountShapeTextEditor, SHAPE_OVERLAY_HEIGHT, SHAPE_OVERLAY_WIDTH, ShapeC
 import { insertEdgelessTextCommand, mountTextElementEditor, } from '../affine-gfx-text/index.js';
 import { DEFAULT_NOTE_WIDTH, DefaultTheme, FontFamily, FontStyle, FontWeight, getShapeName, GroupElementModel, NoteBlockModel, ShapeStyle, TextElementModel, } from '../affine-model/index.js';
 import { EditPropsStore, FeatureFlagService, ThemeProvider, } from '../affine-shared/services/index.js';
-import { captureEventTarget, matchModels, } from '../affine-shared/utils/index.js';
+import { captureEventTarget, matchModels, overlayScale, overlayViewportSize, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { Bound, clamp, normalizeDegAngle, serializeXYWH, toDegree, Vec, } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { FrameIcon, PageIcon } from '@blocksuite/icons/lit';
@@ -369,11 +369,16 @@ let EdgelessAutoCompletePanel = (() => {
         }
         _getPanelPosition() {
             const { viewport } = this.gfx;
-            const { boundingClientRect: viewportRect, zoom } = viewport;
-            const result = this._getTargetXYWH(PANEL_WIDTH / zoom, PANEL_HEIGHT / zoom);
+            // The panel is appended to the edgeless container, so its `left`/`top`
+            // live in that container's space — already scaled by the host, the way a
+            // gfx block's placement is. Both the panel's own size and the edges it is
+            // kept away from have to be stated there too, or the clamp fires against
+            // screen pixels the panel is not measured in.
+            const scale = overlayScale(viewport);
+            const result = this._getTargetXYWH(PANEL_WIDTH / scale, PANEL_HEIGHT / scale);
             const pos = result ? result.xywh.slice(0, 2) : this.position;
-            const coord = viewport.toViewCoord(pos[0], pos[1]);
-            const { width, height } = viewportRect;
+            const coord = toOverlayCoord(viewport, pos[0], pos[1]);
+            const [width, height] = overlayViewportSize(viewport);
             coord[0] = clamp(coord[0], 20, width - 20 - PANEL_WIDTH);
             coord[1] = clamp(coord[1], 20, height - 20 - PANEL_HEIGHT);
             return coord;