@formicoidea/labre-core 0.30.1 → 0.32.0

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/effects.js

@@ -1,6 +1,6 @@
-import { EDGELESS_DND_PREVIEW_ELEMENT, EdgelessDndPreviewElement, } from './components/edgeless-preview/preview';
-import { AFFINE_DRAG_HANDLE_WIDGET } from './consts';
-import { AffineDragHandleWidget } from './drag-handle';
+import { EDGELESS_DND_PREVIEW_ELEMENT, EdgelessDndPreviewElement, } from './components/edgeless-preview/preview.js';
+import { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js';
+import { AffineDragHandleWidget } from './drag-handle.js';
 export function effects() {
     customElements.define(AFFINE_DRAG_HANDLE_WIDGET, AffineDragHandleWidget);
     customElements.define(EDGELESS_DND_PREVIEW_ELEMENT, EdgelessDndPreviewElement);

package/dist/_pkgs/affine-widget-drag-handle/index.d.ts

@@ -1,5 +1,5 @@
-export * from './consts';
-export * from './drag-handle';
-export * from './utils';
-export type { DragBlockPayload } from './watchers/drag-event-watcher';
+export * from './consts.js';
+export * from './drag-handle.js';
+export * from './utils.js';
+export type { DragBlockPayload } from './watchers/drag-event-watcher.js';
 export declare const dragHandleWidget: import("../store/index.js").ExtensionType;

package/dist/_pkgs/affine-widget-drag-handle/index.js

@@ -1,7 +1,7 @@
 import { WidgetViewExtension } from '../std/index.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
-import { AFFINE_DRAG_HANDLE_WIDGET } from './consts';
-export * from './consts';
-export * from './drag-handle';
-export * from './utils';
+import { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js';
+export * from './consts.js';
+export * from './drag-handle.js';
+export * from './utils.js';
 export const dragHandleWidget = WidgetViewExtension('affine:page', AFFINE_DRAG_HANDLE_WIDGET, literal `${unsafeStatic(AFFINE_DRAG_HANDLE_WIDGET)}`);

package/dist/_pkgs/affine-widget-drag-handle/view.js

@@ -1,6 +1,6 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { dragHandleWidget } from '.';
-import { effects } from './effects';
+import { dragHandleWidget } from './index.js';
+import { effects } from './effects.js';
 export class DragHandleViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);

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

@@ -11,13 +11,13 @@ import { assertType } from '../../global/utils/index.js';
 import { BlockComponent, } from '../../std/index.js';
 import { GfxBlockElementModel, GfxControllerIdentifier, GfxGroupLikeElementModel, GfxPrimitiveElementModel, isGfxGroupCompatibleModel, isPrimitiveModel, SURFACE_YMAP_UNIQ_IDENTIFIER, SurfaceBlockModel, } from '../../std/gfx/index.js';
 import { internalPrimitives, Slice, toDraftModel, } from '../../store/index.js';
-import groupBy from 'lodash-es/groupBy';
-import last from 'lodash-es/last';
+import groupBy from 'lodash-es/groupBy.js';
+import last from 'lodash-es/last.js';
 import { PreviewHelper } from '../helpers/preview-helper.js';
 import { gfxBlocksFilter } from '../middleware/blocks-filter.js';
 import { cardStyleUpdater } from '../middleware/card-style-updater.js';
 import { newIdCrossDoc } from '../middleware/new-id-cross-doc.js';
-import { reorderList } from '../middleware/reorder-list';
+import { reorderList } from '../middleware/reorder-list.js';
 import { containBlock, extractIdsFromSnapshot, getParentNoteBlock, getSnapshotRect, includeTextSelection, isOutOfNoteBlock, } from '../utils.js';
 export class DragEventWatcher {
     get host() {

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

@@ -3,7 +3,7 @@ import { Point } from '../../global/gfx/index.js';
 import { BLOCK_ID_ATTR, } from '../../std/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { computed } from '@preact/signals-core';
-import throttle from 'lodash-es/throttle';
+import throttle from 'lodash-es/throttle.js';
 import { DRAG_HANDLE_CONTAINER_WIDTH, DRAG_HANDLE_GRABBER_BORDER_RADIUS, DRAG_HANDLE_GRABBER_HEIGHT, DRAG_HANDLE_GRABBER_WIDTH, } from '../config.js';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '../consts.js';
 import { getClosestBlockByPoint, getClosestNoteBlock, getDragHandleContainerHeight, includeTextSelection, insideDatabaseTable, isBlockIdEqual, isOutOfNoteBlock, updateDragHandleClassName, } from '../utils.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-auto-connect/effects.js

@@ -1,4 +1,4 @@
-import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET, EdgelessAutoConnectWidget, } from '.';
+import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET, EdgelessAutoConnectWidget, } from './index.js';
 export function effects() {
     customElements.define(AFFINE_EDGELESS_AUTO_CONNECT_WIDGET, EdgelessAutoConnectWidget);
 }

package/dist/_pkgs/affine-widget-edgeless-auto-connect/view.js

@@ -1,6 +1,6 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { autoConnectWidget } from '.';
-import { effects } from './effects';
+import { autoConnectWidget } from './index.js';
+import { effects } from './effects.js';
 export class EdgelessAutoConnectViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);

package/dist/_pkgs/affine-widget-edgeless-dragging-area/effects.js

@@ -1,4 +1,4 @@
-import { EDGELESS_DRAGGING_AREA_WIDGET, EdgelessDraggingAreaRectWidget, } from './edgeless-dragging-area-rect';
+import { EDGELESS_DRAGGING_AREA_WIDGET, EdgelessDraggingAreaRectWidget, } from './edgeless-dragging-area-rect.js';
 export function effects() {
     customElements.define(EDGELESS_DRAGGING_AREA_WIDGET, EdgelessDraggingAreaRectWidget);
 }

package/dist/_pkgs/affine-widget-edgeless-dragging-area/index.d.ts

@@ -1 +1 @@
-export * from './edgeless-dragging-area-rect';
+export * from './edgeless-dragging-area-rect.js';

package/dist/_pkgs/affine-widget-edgeless-dragging-area/index.js

@@ -1 +1 @@
-export * from './edgeless-dragging-area-rect';
+export * from './edgeless-dragging-area-rect.js';

package/dist/_pkgs/affine-widget-edgeless-dragging-area/view.js

@@ -1,6 +1,6 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { edgelessDraggingAreaWidget } from './edgeless-dragging-area-rect';
-import { effects } from './effects';
+import { edgelessDraggingAreaWidget } from './edgeless-dragging-area-rect.js';
+import { effects } from './effects.js';
 export class EdgelessDraggingAreaViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);

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;

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-auto-complete.d.ts

@@ -12,6 +12,12 @@ export declare class EdgelessAutoComplete extends EdgelessAutoComplete_base {
     private readonly _onPointerDown;
     private _pathGenerator;
     private _timer;
+    /**
+     * Whether `this.current` is a thing the auto-complete knows how to clone: a
+     * shape (subclasses included) or a note block. Deliberately says nothing
+     * about the selection — the drag-out path consults it *after* clearing the
+     * selection to open the shape picker.
+     */
     get canShowAutoComplete(): boolean;
     get connectionOverlay(): ConnectionOverlay;
     get crud(): import("../affine-block-surface/index.js").EdgelessCRUDExtension;
@@ -30,10 +36,18 @@ export declare class EdgelessAutoComplete extends EdgelessAutoComplete_base {
     private _showNextShape;
     connectedCallback(): void;
     firstUpdated(): void;
+    /**
+     * The single predicate the arrows are rendered on. It must stay stricter
+     * than, or equal to, what the click handlers can actually do: an arrow the
+     * click cannot honour is a crash waiting to happen (see
+     * `createEdgelessElement`). Hence the identity check — `current` is a
+     * property set by the selected-rect on the previous render, so it can lag
+     * behind the selection by a frame, and it is `current`, not the selection,
+     * that the click acts on.
+     */
     private _canAutoComplete;
     removeOverlay(): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
-    private accessor _isHover;
     private accessor _isMoving;
     accessor current: ShapeElementModel | NoteBlockModel;
     accessor edgeless: BlockComponent;