@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/affine-gfx-mindmap/toolbar/mindmap-menu.js

@@ -355,43 +355,43 @@ let EdgelessMindmapMenu = (() => {
                     const showNext = dragOut && !cancelled;
                     const isActive = this._style$.value === mindMap.style;
                     return html `
-            <div class="mindmap-item" data-is-active=${isActive}>
-              ${isBeingDragged
+                <div class="mindmap-item" data-is-active=${isActive}>
+                  ${isBeingDragged
                         ? html `<button
-                    style="transform: translateY(${showNext ? 0 : 64}px)"
-                    class="next"
-                  >
-                    ${mindMap.icon}
-                  </button>`
+                        style="transform: translateY(${showNext ? 0 : 64}px)"
+                        class="next"
+                      >
+                        ${mindMap.icon}
+                      </button>`
                         : nothing}
-              <button
-                style="opacity: ${isBeingDragged ? 0 : 1}"
-                @mousedown=${(e) => {
+                  <button
+                    style="opacity: ${isBeingDragged ? 0 : 1}"
+                    @mousedown=${(e) => {
                         this.draggableController.onMouseDown(e, {
                             preview: mindMap.icon,
                             data: mindMap,
                             standardWidth: 350,
                         });
                     }}
-                @touchstart=${(e) => {
+                    @touchstart=${(e) => {
                         this.draggableController.onTouchStart(e, {
                             preview: mindMap.icon,
                             data: mindMap,
                             standardWidth: 350,
                         });
                     }}
-                @click=${() => this.onActiveStyleChange?.(mindMap.style)}
-              >
-                ${mindMap.icon}
-              </button>
-              <affine-tooltip tip-position="top" .offset=${12}>
-                <affine-tooltip-content-with-shortcut
-                  data-tip="${'Mind Map'}"
-                  data-shortcup="${'M'}"
-                ></affine-tooltip-content-with-shortcut>
-              </affine-tooltip>
-            </div>
-          `;
+                    @click=${() => this.onActiveStyleChange?.(mindMap.style)}
+                  >
+                    ${mindMap.icon}
+                  </button>
+                  <affine-tooltip tip-position="top" .offset=${12}>
+                    <affine-tooltip-content-with-shortcut
+                      data-tip="${'Mind Map'}"
+                      data-shortcup="${'M'}"
+                    ></affine-tooltip-content-with-shortcut>
+                  </affine-tooltip>
+                </div>
+              `;
                 })}
             ${this.std.store
                     .get(FeatureFlagService)

package/dist/_pkgs/affine-gfx-mindmap/toolbar/mindmap-tool-button.js

@@ -314,7 +314,11 @@ let EdgelessMindmapToolButton = (() => {
             return html `<edgeless-toolbar-button
       class="edgeless-mindmap-button"
       ?withHover=${true}
-      .tooltip=${popper ? '' : this.variant === 'mindmap' ? 'Mind Map' : 'Others'}
+      .tooltip=${popper
+                ? ''
+                : this.variant === 'mindmap'
+                    ? 'Mind Map'
+                    : 'Others'}
       .tooltipOffset=${4}
       @click=${this._toggleMenu}
       style="width: 100%; height: 100%; display: inline-block"

package/dist/_pkgs/affine-gfx-mindmap/view/utils.js

@@ -1,7 +1,7 @@
 import { fitContent } from '../../affine-gfx-shape/index.js';
 import { applyNodeStyle, LayoutType, } from '../../affine-model/index.js';
 import { assertType } from '../../global/utils/index.js';
-import { generateKeyBetween, } from '../../std/gfx/index.js';
+import { generateKeyBetween } from '../../std/gfx/index.js';
 import isEqual from 'lodash-es/isEqual.js';
 import last from 'lodash-es/last.js';
 import * as Y from 'yjs';

package/dist/_pkgs/affine-gfx-note/overlay/overlay.js

@@ -1,4 +1,4 @@
-import { getSurfaceComponent, ToolOverlay, } from '../../affine-block-surface/index.js';
+import { getSurfaceComponent, ToolOverlay } from '../../affine-block-surface/index.js';
 import { DefaultTheme } from '../../affine-model/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
 import { effect } from '@preact/signals-core';

package/dist/_pkgs/affine-gfx-note/toolbar/note-senior-button.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { Heading1Icon, LinkIcon, TextIcon, } from '../../affine-components/icons/index.js';
-import { EditPropsStore, ThemeProvider, } from '../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';
 import { computed } from '@preact/signals-core';

package/dist/_pkgs/affine-gfx-pointer/tools/pan-tool.d.ts

@@ -7,10 +7,26 @@ export type PanToolOption = {
 export declare class PanTool extends BaseTool<PanToolOption> {
     static toolName: string;
     private _lastPoint;
+    /**
+     * Set while a finger drag has borrowed the pan tool; calling it gives the
+     * previous tool — and the selection it was holding — back.
+     */
+    private _fingerPanRestore;
     readonly panning$: Signal<boolean>;
     get allowDragWithRightButton(): boolean;
     dragEnd(_: PointerEventState): void;
     dragMove(e: PointerEventState): void;
     dragStart(e: PointerEventState): void;
     mounted(): void;
+    /**
+     * Activate the pan tool for the duration of a gesture.
+     *
+     * @returns a function restoring the previous tool and the selection it was
+     * holding, or `null` when the pan tool is already the user's own choice —
+     * there is then nothing to restore.
+     */
+    private _borrowPanTool;
+    private _releaseFingerPan;
+    /** Whether this drag is a bare finger sliding over empty canvas. */
+    private _shouldPanWithFinger;
 }

package/dist/_pkgs/affine-gfx-pointer/tools/pan-tool.js

@@ -2,10 +2,19 @@ import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.j
 import { on } from '../../affine-shared/utils/index.js';
 import { BaseTool, MouseButton } from '../../std/gfx/index.js';
 import { Signal } from '@preact/signals-core';
+/** The presentation tool, named here because it is not importable from gfx. */
+const PRESENT_TOOL_NAME = 'frameNavigator';
+/** The selection tool, named here because it is not importable from gfx. */
+const DEFAULT_TOOL_NAME = 'default';
 export class PanTool extends BaseTool {
     constructor() {
         super(...arguments);
         this._lastPoint = null;
+        /**
+         * Set while a finger drag has borrowed the pan tool; calling it gives the
+         * previous tool — and the selection it was holding — back.
+         */
+        this._fingerPanRestore = null;
         this.panning$ = new Signal(false);
     }
     static { this.toolName = 'pan'; }
@@ -15,6 +24,7 @@ export class PanTool extends BaseTool {
     dragEnd(_) {
         this._lastPoint = null;
         this.panning$.value = false;
+        this._releaseFingerPan();
     }
     dragMove(e) {
         if (!this._lastPoint)
@@ -37,45 +47,105 @@ export class PanTool extends BaseTool {
             if (!shouldPanWithMiddle) {
                 return;
             }
-            evt.raw.preventDefault();
-            const currentTool = this.controller.currentToolOption$.peek();
-            const restoreToPrevious = () => {
-                const { toolType, options: originalToolOptions } = currentTool;
-                const selectionToRestore = this.gfx.selection.surfaceSelections;
-                if (!toolType)
-                    return;
-                let finalOptions = originalToolOptions;
-                const PRESENT_TOOL_NAME = 'frameNavigator';
-                if (toolType.toolName === PRESENT_TOOL_NAME) {
-                    // When restoring PresentTool (frameNavigator) after a temporary pan (e.g., via middle mouse button),
-                    // set 'restoredAfterPan' to true. This allows PresentTool to avoid an unwanted viewport reset
-                    // and maintain the panned position.
-                    const currentPresentOptions = originalToolOptions;
-                    finalOptions = {
-                        ...currentPresentOptions,
-                        restoredAfterPan: true,
-                    };
-                }
-                this.controller.setTool(toolType, finalOptions);
-                this.gfx.selection.set(selectionToRestore);
-            };
-            // If in presentation mode, disable black background after middle mouse drag
-            if (currentTool.toolType?.toolName === 'frameNavigator') {
-                const slots = this.std.get(EdgelessLegacySlotIdentifier);
-                slots.navigatorSettingUpdated.next({
-                    blackBackground: false,
-                });
+            const restoreToPrevious = this._borrowPanTool();
+            // Already panning — the pan tool is the user's own choice, not a
+            // temporary borrow. There is nothing to switch to and nothing to
+            // restore, so stay out of the way and let the gesture through.
+            if (!restoreToPrevious) {
+                return;
             }
-            this.controller.setTool(PanTool, {
-                panning: true,
-            });
+            evt.raw.preventDefault();
             const dispose = on(document, 'pointerup', evt => {
                 if (evt.button === MouseButton.MIDDLE) {
                     restoreToPrevious();
-                    dispose();
                 }
+                // Whatever button ended the gesture, this listener has done its job:
+                // release it, or a right-click after a middle-click would leave it
+                // hanging on `document` and restore a stale tool later on.
+                dispose();
             });
             return false;
         });
+        // A finger dragging bare canvas slides the canvas, the way every touch
+        // surface behaves. Borrowing happens on `dragStart`, not on `pointerDown`:
+        // a tap must stay a tap, and the selection tool is still the one that has
+        // to answer it. The `dragStart` hook runs BEFORE the controller resolves
+        // which tool receives the event, so the pan tool below gets the whole
+        // gesture — moves and end alike.
+        this.addHook('dragStart', evt => {
+            if (!this._shouldPanWithFinger(evt))
+                return;
+            this._fingerPanRestore = this._borrowPanTool();
+        });
+    }
+    /**
+     * Activate the pan tool for the duration of a gesture.
+     *
+     * @returns a function restoring the previous tool and the selection it was
+     * holding, or `null` when the pan tool is already the user's own choice —
+     * there is then nothing to restore.
+     */
+    _borrowPanTool() {
+        const { toolType, options: originalToolOptions } = this.controller.currentToolOption$.peek();
+        if (toolType?.toolName === PanTool.toolName) {
+            return null;
+        }
+        // Snapshot the selection NOW. Activating the pan tool below goes through
+        // `ToolController.setTool`, which clears the selection, so reading it
+        // back at the end of the gesture would only ever restore an empty one.
+        const selectionToRestore = this.gfx.selection.surfaceSelections.slice();
+        const restoreToPrevious = () => {
+            if (!toolType)
+                return;
+            let finalOptions = originalToolOptions;
+            if (toolType.toolName === PRESENT_TOOL_NAME) {
+                // When restoring PresentTool (frameNavigator) after a temporary pan (e.g., via middle mouse button),
+                // set 'restoredAfterPan' to true. This allows PresentTool to avoid an unwanted viewport reset
+                // and maintain the panned position.
+                const currentPresentOptions = originalToolOptions;
+                finalOptions = {
+                    ...currentPresentOptions,
+                    restoredAfterPan: true,
+                };
+            }
+            this.controller.setTool(toolType, finalOptions);
+            // AFTER the switch, never before: `setTool` clears the selection.
+            this.gfx.selection.set(selectionToRestore);
+        };
+        // If in presentation mode, disable black background after middle mouse drag
+        if (toolType?.toolName === PRESENT_TOOL_NAME) {
+            const slots = this.std.get(EdgelessLegacySlotIdentifier);
+            slots.navigatorSettingUpdated.next({
+                blackBackground: false,
+            });
+        }
+        this.controller.setTool(PanTool, {
+            panning: true,
+        });
+        return restoreToPrevious;
+    }
+    _releaseFingerPan() {
+        const restore = this._fingerPanRestore;
+        this._fingerPanRestore = null;
+        restore?.();
+    }
+    /** Whether this drag is a bare finger sliding over empty canvas. */
+    _shouldPanWithFinger(e) {
+        // A second finger is a two-finger gesture — pan or pinch — and the
+        // edgeless root answers those itself. It never reaches here anyway: the
+        // drag controller ends the drag as soon as a non-primary pointer lands.
+        if (e.raw.pointerType !== 'touch' || !e.raw.isPrimary)
+            return false;
+        // Only the selection tool lends its gesture away. Every other tool —
+        // brush, shape, connector, the framework tools — draws on empty canvas,
+        // and a finger is precisely how it is meant to draw.
+        const { toolType } = this.controller.currentToolOption$.peek();
+        if (toolType?.toolName !== DEFAULT_TOOL_NAME)
+            return false;
+        // A finger landing on something moves that something; only bare canvas
+        // slides. This is what keeps dragging a Wardley or EDGY element by hand
+        // working.
+        const [modelX, modelY] = this.gfx.viewport.toModelCoord(e.x, e.y);
+        return !this.gfx.getElementByPoint(modelX, modelY);
     }
 }

package/dist/_pkgs/affine-gfx-shape/commands.d.ts

@@ -0,0 +1,2 @@
+import type { CommandDescriptor } from '../std/index.js';
+export declare const shapeCommands: CommandDescriptor[];

package/dist/_pkgs/affine-gfx-shape/commands.js

@@ -0,0 +1,33 @@
+import { ShapeElementModel, TextFitMode } from '../affine-model/index.js';
+import { GfxControllerIdentifier } from '../std/gfx/index.js';
+import { applyTextFitMode, nextTextFitMode } from './text-fit.js';
+/**
+ * Shape commands (edgeless scope, always-on — shapes are core canvas), so
+ * `owner: 'core'` rather than a framework. Host-rebindable through
+ * `ShortcutOverrides` exactly as before (`docs/adr/0008`).
+ */
+/** The selected shapes that carry text — the ones the gesture would cycle. */
+const textShapes = (std) => std
+    .get(GfxControllerIdentifier)
+    .selection.selectedElements.filter((el) => el instanceof ShapeElementModel && !!el.text);
+export const shapeCommands = [
+    {
+        id: 'shape.cycleTextFit',
+        owner: 'core',
+        kind: 'action',
+        labelKey: 'com.labre.keyboardShortcuts.shape.cycleTextFit',
+        labelFallback: 'Cycle text fit',
+        surfaces: ['palette', 'agent'],
+        scope: 'edgeless',
+        defaultKeys: { mac: ['Mod-Shift-f'], other: ['Mod-Shift-f'] },
+        availability: 'selection',
+        when: std => textShapes(std).length > 0,
+        run: std => {
+            const models = textShapes(std);
+            if (!models.length)
+                return;
+            const mode = models[0].textFitMode ?? TextFitMode.Grow;
+            applyTextFitMode(std, models, nextTextFitMode(mode));
+        },
+    },
+];

package/dist/_pkgs/affine-gfx-shape/consts.js

@@ -1,4 +1,4 @@
-import { DEFAULT_ROUGHNESS, LineWidth, StrokeStyle, } from '../affine-model/index.js';
+import { DEFAULT_ROUGHNESS, LineWidth, StrokeStyle } from '../affine-model/index.js';
 export const SHAPE_OVERLAY_WIDTH = 100;
 export const SHAPE_OVERLAY_HEIGHT = 100;
 export const SHAPE_OVERLAY_OFFSET_X = 6;

package/dist/_pkgs/affine-gfx-shape/draggable/shape-draggable.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { CanvasElementType, DefaultTool, EdgelessCRUDIdentifier, } from '../../affine-block-surface/index.js';
-import { getShapeRadius, getShapeType, ShapeType, } from '../../affine-model/index.js';
+import { getShapeRadius, getShapeType, ShapeType } from '../../affine-model/index.js';
 import { EditPropsStore, TelemetryProvider, ThemeProvider, ViewportElementProvider, } from '../../affine-shared/services/index.js';
 import { EdgelessDraggableElementController, EdgelessToolbarToolMixin, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';

package/dist/_pkgs/affine-gfx-shape/element-renderer/shape/polygon.js

@@ -29,11 +29,11 @@ export function polygon(model, ctx, matrix, renderer, rc, colors) {
     else {
         // Convert normalized vertices to absolute coordinates for rough.js
         const absPoints = vertices.map(v => [v[0] * renderWidth, v[1] * renderHeight]);
-        const smoothFlags = 'smoothFlags' in model && model.smoothFlags
-            ? model.smoothFlags
-            : null;
-        const controlPoints = 'controlPoints' in model && model.controlPoints
-            ? model.controlPoints
+        const smoothFlags = 'smoothFlags' in model && model.smoothFlags ? model.smoothFlags : null;
+        const controlPoints = 'controlPoints' in model &&
+            model.controlPoints
+            ? model
+                .controlPoints
             : null;
         const hasBezier = smoothFlags && smoothFlags.some(f => f);
         if (hasBezier) {
@@ -52,8 +52,12 @@ export function polygon(model, ctx, matrix, renderer, rc, colors) {
                     let cp1x, cp1y;
                     const customCurr = controlPoints?.[i];
                     if (currSmooth) {
-                        cp1x = customCurr ? customCurr[2] * renderWidth : cx + (nx - cx) / 3;
-                        cp1y = customCurr ? customCurr[3] * renderHeight : cy + (ny - cy) / 3;
+                        cp1x = customCurr
+                            ? customCurr[2] * renderWidth
+                            : cx + (nx - cx) / 3;
+                        cp1y = customCurr
+                            ? customCurr[3] * renderHeight
+                            : cy + (ny - cy) / 3;
                     }
                     else {
                         cp1x = cx;
@@ -62,8 +66,12 @@ export function polygon(model, ctx, matrix, renderer, rc, colors) {
                     let cp2x, cp2y;
                     const customNext = controlPoints?.[next];
                     if (nextSmooth) {
-                        cp2x = customNext ? customNext[0] * renderWidth : nx + (cx - nx) / 3;
-                        cp2y = customNext ? customNext[1] * renderHeight : ny + (cy - ny) / 3;
+                        cp2x = customNext
+                            ? customNext[0] * renderWidth
+                            : nx + (cx - nx) / 3;
+                        cp2y = customNext
+                            ? customNext[1] * renderHeight
+                            : ny + (cy - ny) / 3;
                     }
                     else {
                         cp2x = nx;

package/dist/_pkgs/affine-gfx-shape/element-renderer/shape/utils.js

@@ -116,8 +116,10 @@ function drawPolygon(ctx, width, height, shapeModel) {
     const smoothFlags = 'smoothFlags' in shapeModel && shapeModel.smoothFlags
         ? shapeModel.smoothFlags
         : null;
-    const controlPoints = 'controlPoints' in shapeModel && shapeModel.controlPoints
-        ? shapeModel.controlPoints
+    const controlPoints = 'controlPoints' in shapeModel &&
+        shapeModel.controlPoints
+        ? shapeModel
+            .controlPoints
         : null;
     const count = vertices.length;
     if (count === 0)
@@ -131,7 +133,10 @@ function drawPolygon(ctx, width, height, shapeModel) {
         }
     }
     else {
-        const abs = (v) => [v[0] * width, v[1] * height];
+        const abs = (v) => [
+            v[0] * width,
+            v[1] * height,
+        ];
         ctx.moveTo(vertices[0][0] * width, vertices[0][1] * height);
         for (let i = 0; i < count; i++) {
             const next = (i + 1) % count;

package/dist/_pkgs/affine-gfx-shape/element-renderer/shape-dom/index.js

@@ -1,17 +1,52 @@
 import { DefaultTheme } from '../../../affine-model/index.js';
 import { SVGShapeBuilder } from '../../../global/gfx/index.js';
 import { manageClassNames, setStyles } from './utils.js';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * The nodes a shape host already owns, kept across renders. Rebuilding the
+ * `<svg>` on every frame made each pan or zoom allocate a fresh element per
+ * shape on the board; the attributes are cheap to overwrite in place.
+ */
+const retainedShapeDom = new WeakMap();
+function getRetainedShapeDom(element) {
+    const existing = retainedShapeDom.get(element);
+    if (existing) {
+        return existing;
+    }
+    const retained = {
+        svg: null,
+        polygon: null,
+    };
+    retainedShapeDom.set(element, retained);
+    return retained;
+}
+function getOrCreateSvg(retained, element) {
+    if (retained.svg && retained.polygon) {
+        return {
+            svg: retained.svg,
+            polygon: retained.polygon,
+        };
+    }
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('preserveAspectRatio', 'none');
+    const polygon = document.createElementNS(SVG_NS, 'polygon');
+    svg.append(polygon);
+    retained.svg = svg;
+    retained.polygon = polygon;
+    element.prepend(svg);
+    return { svg, polygon };
+}
+function removeSvg(retained) {
+    retained.svg?.remove();
+    retained.svg = null;
+    retained.polygon = null;
+}
 function applyShapeSpecificStyles(model, element, zoom) {
     // Reset properties that might be set by different shape types
     element.style.removeProperty('clip-path');
     element.style.removeProperty('border-radius');
-    // Clear DOM for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
-    if (model.shapeType !== 'diamond' &&
-        model.shapeType !== 'triangle' &&
-        model.shapeType !== 'polygon') {
-        while (element.firstChild)
-            element.firstChild.remove();
-    }
     switch (model.shapeType) {
         case 'rect': {
             const w = model.w * zoom;
@@ -91,6 +126,7 @@ export const shapeDomRenderer = (model, element, renderer) => {
     const { zoom } = renderer.viewport;
     const unscaledWidth = model.w;
     const unscaledHeight = model.h;
+    const retained = getRetainedShapeDom(element);
     const fillColor = renderer.getColorValue(model.fillColor, DefaultTheme.shapeFillColor, true);
     const strokeColor = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
     element.style.width = `${unscaledWidth * zoom}px`;
@@ -104,6 +140,7 @@ export const shapeDomRenderer = (model, element, renderer) => {
         // For diamond and triangle, fill and border are handled by inline SVG
         element.style.border = 'none'; // Ensure no standard CSS border interferes
         element.style.backgroundColor = 'transparent'; // Host element is transparent
+        const { polygon, svg } = getOrCreateSvg(retained, element);
         const strokeW = model.strokeWidth;
         let svgPoints = '';
         if (model.shapeType === 'diamond') {
@@ -140,14 +177,7 @@ export const shapeDomRenderer = (model, element, renderer) => {
             : 'none';
         // Determine fill color
         const finalFillColor = model.filled ? fillColor : 'transparent';
-        // Build SVG safely with DOM-API
-        const SVG_NS = 'http://www.w3.org/2000/svg';
-        const svg = document.createElementNS(SVG_NS, 'svg');
-        svg.setAttribute('width', '100%');
-        svg.setAttribute('height', '100%');
         svg.setAttribute('viewBox', `0 0 ${unscaledWidth} ${unscaledHeight}`);
-        svg.setAttribute('preserveAspectRatio', 'none');
-        const polygon = document.createElementNS(SVG_NS, 'polygon');
         polygon.setAttribute('points', svgPoints);
         polygon.setAttribute('fill', finalFillColor);
         polygon.setAttribute('stroke', finalStrokeColor);
@@ -155,18 +185,17 @@ export const shapeDomRenderer = (model, element, renderer) => {
         if (finalStrokeDasharray !== 'none') {
             polygon.setAttribute('stroke-dasharray', finalStrokeDasharray);
         }
-        svg.append(polygon);
-        // Replace existing children to avoid memory leaks
-        element.replaceChildren(svg);
+        else {
+            polygon.removeAttribute('stroke-dasharray');
+        }
     }
     else {
         // Standard rendering for other shapes (e.g., rect, ellipse)
-        // innerHTML was already cleared by applyShapeSpecificStyles if necessary
+        removeSvg(retained);
         element.style.backgroundColor = model.filled ? fillColor : 'transparent';
         applyBorderStyles(model, element, strokeColor, zoom); // Uses standard CSS border
     }
     applyTransformStyles(model, element);
-    element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
     manageClassNames(model, element);
     applyShadowStyles(model, element, renderer);
 };

package/dist/_pkgs/affine-gfx-shape/element-view.js

@@ -146,8 +146,7 @@ export class ShapeElementView extends GfxElementModelView {
                 return;
             }
             // 'B' key toggles Bezier smoothing on the hovered vertex
-            if ((evt.key === 'b' || evt.key === 'B') &&
-                this._vertexEditingOverlay) {
+            if ((evt.key === 'b' || evt.key === 'B') && this._vertexEditingOverlay) {
                 const idx = this._vertexEditingOverlay.hoveredVertexIndex;
                 if (idx >= 0) {
                     evt.preventDefault();
@@ -192,7 +191,8 @@ export class ShapeElementView extends GfxElementModelView {
                 const verts = this.model.vertices;
                 if (verts && this._pendingVertexIndex < verts.length) {
                     this._isDraggingVertex = true;
-                    this._vertexEditingOverlay.activeVertexIndex = this._pendingVertexIndex;
+                    this._vertexEditingOverlay.activeVertexIndex =
+                        this._pendingVertexIndex;
                     this.model.stash('xywh');
                     this.model.stash('vertices');
                     this.model.stash('controlPoints');
@@ -214,8 +214,10 @@ export class ShapeElementView extends GfxElementModelView {
             // Bezier handle drag
             if (this._pendingBezierHandle) {
                 this._isDraggingBezierHandle = true;
-                this._vertexEditingOverlay.activeBezierHandleIndex = this._pendingBezierHandle.vertexIndex;
-                this._vertexEditingOverlay.activeBezierHandleType = this._pendingBezierHandle.handleIndex;
+                this._vertexEditingOverlay.activeBezierHandleIndex =
+                    this._pendingBezierHandle.vertexIndex;
+                this._vertexEditingOverlay.activeBezierHandleType =
+                    this._pendingBezierHandle.handleIndex;
                 this.model.stash('xywh');
                 this.model.stash('vertices');
                 this.model.stash('controlPoints');
@@ -237,7 +239,9 @@ export class ShapeElementView extends GfxElementModelView {
             const dx = curMX - this._pointerStartModelCoord[0];
             const dy = curMY - this._pointerStartModelCoord[1];
             // Bezier handle drag
-            if (this._isDraggingBezierHandle && this._pendingBezierHandle && this._bezierDragStartModelCoord) {
+            if (this._isDraggingBezierHandle &&
+                this._pendingBezierHandle &&
+                this._bezierDragStartModelCoord) {
                 this._vertexEditingOverlay.moveBezierHandle(this._pendingBezierHandle.vertexIndex, this._pendingBezierHandle.handleIndex, this._bezierDragStartModelCoord[0] + dx, this._bezierDragStartModelCoord[1] + dy);
                 this._syncConnectorPaths();
                 this._surfaceComponent?.refresh();
@@ -283,7 +287,11 @@ export class ShapeElementView extends GfxElementModelView {
                 this._surfaceComponent?.refresh();
             }
         });
-        this._dragHandlerDisposers = [dragstartDisposer, dragmoveDisposer, dragendDisposer];
+        this._dragHandlerDisposers = [
+            dragstartDisposer,
+            dragmoveDisposer,
+            dragendDisposer,
+        ];
     }
     /**
      * Exit polygon vertex editing mode: clear overlay editing state,
@@ -346,15 +354,14 @@ export class ShapeElementView extends GfxElementModelView {
         // Record which vertex (if any) the pointer pressed on.  The registered
         // dragstart handler (added in _enterVertexEditingMode) reads
         // _pendingVertexIndex to decide whether to enter vertex-drag mode.
-        this.on('pointerdown', (e) => {
+        this.on('pointerdown', e => {
             if (!this._vertexEditingOverlay?.isEditing) {
                 // Outside editing mode no vertex drag is possible.
                 this._pendingVertexIndex = -1;
                 return;
             }
             const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
-            this._pendingVertexIndex =
-                this._vertexEditingOverlay.hitTestVertex(mx, my);
+            this._pendingVertexIndex = this._vertexEditingOverlay.hitTestVertex(mx, my);
             // If no vertex hit, check bezier handle hit
             if (this._pendingVertexIndex < 0) {
                 this._pendingBezierHandle =
@@ -365,7 +372,7 @@ export class ShapeElementView extends GfxElementModelView {
             }
         });
         // Listen for pointer move to update hover state on the overlay
-        this.on('pointermove', (e) => {
+        this.on('pointermove', e => {
             if (!this._vertexEditingOverlay)
                 return;
             const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
@@ -393,7 +400,7 @@ export class ShapeElementView extends GfxElementModelView {
             }
         });
         // Click on edge midpoint to insert a new vertex (in editing mode)
-        this.on('click', (e) => {
+        this.on('click', e => {
             if (!this._vertexEditingOverlay)
                 return;
             if (!this._vertexEditingOverlay.isEditing)

package/dist/_pkgs/affine-gfx-shape/index.d.ts

@@ -6,7 +6,7 @@ export * from './element-view.js';
 export * from './overlay/index.js';
 export * from './polygon-tool.js';
 export * from './shape-tool.js';
-export * from './shortcuts.js';
+export * from './commands.js';
 export * from './text/index.js';
 export * from './text-fit.js';
 export * from './toolbar/index.js';