@formicoidea/labre-core 0.31.0 → 0.33.0

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

@@ -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';

package/dist/_pkgs/affine-gfx-shape/overlay/polygon-drawing-overlay.js

@@ -1,4 +1,4 @@
-import { ToolOverlay, } from '../../affine-block-surface/index.js';
+import { ToolOverlay } from '../../affine-block-surface/index.js';
 /**
  * Radius of the vertex indicator circles drawn at each placed vertex.
  */

package/dist/_pkgs/affine-gfx-shape/overlay/polygon-vertex-editing-overlay.js

@@ -1,4 +1,4 @@
-import { ToolOverlay, } from '../../affine-block-surface/index.js';
+import { ToolOverlay } from '../../affine-block-surface/index.js';
 import { ShapeElementModel, ShapeType } from '../../affine-model/index.js';
 import { Bound, getBezierCurveBoundingBox, } from '../../global/gfx/index.js';
 // ─── Visual constants ───────────────────────────────────────────────────────
@@ -86,8 +86,7 @@ export class PolygonVertexEditingOverlay extends ToolOverlay {
         if (!this._elementId)
             return null;
         const el = this.gfx.getElementById(this._elementId);
-        if (el instanceof ShapeElementModel &&
-            el.shapeType === ShapeType.Polygon) {
+        if (el instanceof ShapeElementModel && el.shapeType === ShapeType.Polygon) {
             return el;
         }
         return null;
@@ -361,7 +360,7 @@ export class PolygonVertexEditingOverlay extends ToolOverlay {
             return null;
         const bound = Bound.deserialize(model.xywh);
         const zoom = this.gfx.viewport.zoom;
-        const hitDist = BEZIER_HANDLE_RADIUS * 2 / zoom;
+        const hitDist = (BEZIER_HANDLE_RADIUS * 2) / zoom;
         // Inverse-rotate incoming world coordinates into polygon's local space
         let localX = modelX;
         let localY = modelY;
@@ -759,7 +758,9 @@ export class PolygonVertexEditingOverlay extends ToolOverlay {
             return;
         const bound = Bound.deserialize(model.xywh);
         const count = model.vertices.length;
-        let flags = model.smoothFlags ? [...model.smoothFlags] : new Array(count).fill(false);
+        let flags = model.smoothFlags
+            ? [...model.smoothFlags]
+            : new Array(count).fill(false);
         // Ensure flags array matches vertex count
         while (flags.length < count)
             flags.push(false);
@@ -1034,8 +1035,12 @@ export class PolygonVertexEditingOverlay extends ToolOverlay {
                 const mx = (ax + bx) / 2;
                 const my = (ay + by) / 2;
                 const isHoveredMid = i === this.hoveredMidpointIndex;
-                const midR = (isHoveredMid ? MIDPOINT_HANDLE_HOVER_RADIUS : MIDPOINT_HANDLE_RADIUS) / zoom;
-                const midFill = isHoveredMid ? MIDPOINT_HOVER_FILL_COLOR : MIDPOINT_FILL_COLOR;
+                const midR = (isHoveredMid
+                    ? MIDPOINT_HANDLE_HOVER_RADIUS
+                    : MIDPOINT_HANDLE_RADIUS) / zoom;
+                const midFill = isHoveredMid
+                    ? MIDPOINT_HOVER_FILL_COLOR
+                    : MIDPOINT_FILL_COLOR;
                 ctx.beginPath();
                 ctx.arc(mx, my, midR, 0, Math.PI * 2);
                 ctx.fillStyle = midFill;

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

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

package/dist/_pkgs/affine-gfx-shape/polygon-tool.js

@@ -1,5 +1,5 @@
 import { CanvasElementType, DefaultTool, EXCLUDING_MOUSE_OUT_CLASS_LIST, } from '../affine-block-surface/index.js';
-import { DefaultTheme, ShapeType, } from '../affine-model/index.js';
+import { DefaultTheme, ShapeType } from '../affine-model/index.js';
 import { EditPropsStore, TelemetryProvider, ThemeProvider, } from '../affine-shared/services/index.js';
 import { hasClassNameInList } from '../affine-shared/utils/index.js';
 import { Bound } from '../global/gfx/index.js';
@@ -233,7 +233,9 @@ export class PolygonTool extends BaseTool {
             vertices: normalizedVertices,
             isClosed: true,
             smoothFlags: smoothFlagsForModel,
-            ...(controlPointsForModel ? { controlPoints: controlPointsForModel } : {}),
+            ...(controlPointsForModel
+                ? { controlPoints: controlPointsForModel }
+                : {}),
         });
         this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
             control: 'canvas:draw',

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

@@ -1,5 +1,5 @@
 import { CanvasElementType, DefaultTool, EXCLUDING_MOUSE_OUT_CLASS_LIST, } from '../affine-block-surface/index.js';
-import { DefaultTheme, getShapeType, ShapeType, } from '../affine-model/index.js';
+import { DefaultTheme, getShapeType, ShapeType } from '../affine-model/index.js';
 import { EditPropsStore, TelemetryProvider, ThemeProvider, } from '../affine-shared/services/index.js';
 import { hasClassNameInList } from '../affine-shared/utils/index.js';
 import { Bound } from '../global/gfx/index.js';

package/dist/_pkgs/affine-gfx-shape/text/edgeless-shape-text-editor.d.ts

@@ -5,6 +5,7 @@ import { nothing } from 'lit';
 export declare function mountShapeTextEditor(shapeElement: ShapeElementModel, edgeless: BlockComponent): void;
 declare const EdgelessShapeTextEditor_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessShapeTextEditor extends EdgelessShapeTextEditor_base {
+    private _compositionUpdateRaf;
     private _keeping;
     private _lastXYWH;
     private _resizeObserver;
@@ -17,6 +18,31 @@ export declare class EdgelessShapeTextEditor extends EdgelessShapeTextEditor_bas
     private _initMindmapKeyBindings;
     private _stashMindMapTree;
     private _unmount;
+    private _cancelScheduledElementWHUpdate;
+    /**
+     * While an IME composition is in progress the text is only in the DOM, not
+     * yet in the model, so `renderComplete` never fires and the shape keeps the
+     * size it had before the user started composing — the preedit string spills
+     * out of it. Remeasure once per frame instead, and once more when the
+     * composition ends.
+     */
+    private _scheduleElementWHUpdate;
+    private _getInlineEditorContentRect;
+    /**
+     * The size the shape should take, measured on the editor DOM.
+     *
+     * Without a numeric `maxWidth` the editor box *is* the text box, so its own
+     * offset size is the whole measure. Every framework shape (Wardley, EDGY,
+     * DDD, Cynefin) is in that case, and takes exactly the path it took before
+     * mind map nodes gained a maximum width.
+     *
+     * With a numeric `maxWidth` the box is capped by CSS and wraps, so
+     * `offsetWidth` alone no longer describes the text: a preedit string the
+     * browser has not reflowed yet extends past the box it is painted in. Take
+     * the widest measure available, then clamp it back to `maxWidth` so the
+     * shape never grows past the cap.
+     */
+    private _measureEditorSize;
     private _updateElementWH;
     connectedCallback(): void;
     firstUpdated(): void;

package/dist/_pkgs/affine-gfx-shape/text/edgeless-shape-text-editor.js

@@ -35,13 +35,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { DefaultTool, EdgelessCRUDIdentifier, TextUtils, } from '../../affine-block-surface/index.js';
 import { MindmapElementModel, ShapeElementModel, TextFitMode, TextResizing, } from '../../affine-model/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
-import { getSelectedRect } from '../../affine-shared/utils/index.js';
+import { getSelectedRect, overlayScale, toOverlayCoord, } from '../../affine-shared/utils/index.js';
 import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
 import { Bound, toRadian, Vec } from '../../global/gfx/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement, stdContext, } from '../../std/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
-import { RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
+import { InlineEditor, RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
 import { consume } from '@lit/context';
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -160,6 +160,7 @@ let EdgelessShapeTextEditor = (() => {
             });
         }
         _unmount() {
+            this._cancelScheduledElementWHUpdate();
             this._resizeObserver?.disconnect();
             this._resizeObserver = null;
             if (this.element.text) {
@@ -180,6 +181,90 @@ let EdgelessShapeTextEditor = (() => {
                 editing: false,
             });
         }
+        _cancelScheduledElementWHUpdate() {
+            if (this._compositionUpdateRaf !== null) {
+                cancelAnimationFrame(this._compositionUpdateRaf);
+                this._compositionUpdateRaf = null;
+            }
+        }
+        /**
+         * While an IME composition is in progress the text is only in the DOM, not
+         * yet in the model, so `renderComplete` never fires and the shape keeps the
+         * size it had before the user started composing — the preedit string spills
+         * out of it. Remeasure once per frame instead, and once more when the
+         * composition ends.
+         */
+        _scheduleElementWHUpdate(flush = false) {
+            if (flush) {
+                this._cancelScheduledElementWHUpdate();
+                this._updateElementWH();
+                return;
+            }
+            if (this._compositionUpdateRaf !== null) {
+                return;
+            }
+            this._compositionUpdateRaf = requestAnimationFrame(() => {
+                this._compositionUpdateRaf = null;
+                this._updateElementWH();
+            });
+        }
+        _getInlineEditorContentRect() {
+            if (!this.inlineEditorContainer) {
+                return null;
+            }
+            const textNodes = InlineEditor.getTextNodesFromElement(this.inlineEditorContainer);
+            const firstText = textNodes[0];
+            const lastText = textNodes.at(-1);
+            if (!firstText || !lastText) {
+                return null;
+            }
+            const range = this.ownerDocument.createRange();
+            range.setStart(firstText, 0);
+            range.setEnd(lastText, lastText.length);
+            const rect = range.getBoundingClientRect();
+            return rect.width > 0 || rect.height > 0 ? rect : null;
+        }
+        /**
+         * The size the shape should take, measured on the editor DOM.
+         *
+         * Without a numeric `maxWidth` the editor box *is* the text box, so its own
+         * offset size is the whole measure. Every framework shape (Wardley, EDGY,
+         * DDD, Cynefin) is in that case, and takes exactly the path it took before
+         * mind map nodes gained a maximum width.
+         *
+         * With a numeric `maxWidth` the box is capped by CSS and wraps, so
+         * `offsetWidth` alone no longer describes the text: a preedit string the
+         * browser has not reflowed yet extends past the box it is painted in. Take
+         * the widest measure available, then clamp it back to `maxWidth` so the
+         * shape never grows past the cap.
+         */
+        _measureEditorSize(textResizing) {
+            const containerWidth = this.richText.offsetWidth;
+            const containerHeight = this.richText.offsetHeight;
+            const maxWidth = this.element.maxWidth;
+            if (typeof maxWidth !== 'number' ||
+                textResizing !== TextResizing.AUTO_WIDTH_AND_HEIGHT) {
+                return { containerWidth, containerHeight };
+            }
+            const [verticalPadding, horizontalPadding] = this.element.padding;
+            const bcr = this.richText.getBoundingClientRect();
+            const contentRect = this._getInlineEditorContentRect();
+            const rangeRect = this.inlineEditor
+                ?.getNativeRange()
+                ?.getBoundingClientRect();
+            const contentRectWidth = contentRect != null ? contentRect.width + horizontalPadding * 2 : 0;
+            const contentRectHeight = contentRect != null ? contentRect.height + verticalPadding * 2 : 0;
+            const rangeWidth = rangeRect != null
+                ? Math.max(0, rangeRect.right - bcr.left + horizontalPadding)
+                : 0;
+            const rangeHeight = rangeRect != null
+                ? Math.max(0, rangeRect.bottom - bcr.top + verticalPadding)
+                : 0;
+            return {
+                containerWidth: Math.min(Math.max(containerWidth, contentRectWidth, rangeWidth), maxWidth),
+                containerHeight: Math.max(containerHeight, contentRectHeight, rangeHeight),
+            };
+        }
         _updateElementWH() {
             if (this.element.textFitMode !== TextFitMode.Grow) {
                 // Fixed shape bounds: typing never resizes the shape. Contained mode
@@ -194,9 +279,8 @@ let EdgelessShapeTextEditor = (() => {
                 return;
             }
             const bcr = this.richText.getBoundingClientRect();
-            const containerHeight = this.richText.offsetHeight;
-            const containerWidth = this.richText.offsetWidth;
             const textResizing = this.element.textResizing;
+            const { containerWidth, containerHeight } = this._measureEditorSize(textResizing);
             if ((containerHeight !== this.element.h &&
                 textResizing === TextResizing.AUTO_HEIGHT) ||
                 (textResizing === TextResizing.AUTO_WIDTH_AND_HEIGHT &&
@@ -214,7 +298,11 @@ let EdgelessShapeTextEditor = (() => {
                 }
                 if (this.isMindMapNode) {
                     const mindmap = this.element.group;
-                    mindmap.layout();
+                    // Re-place the nodes, but without re-applying the style: that would
+                    // fit the node back to the text the *model* holds and undo the size
+                    // just measured from the editor. The full layout runs again when the
+                    // editor is unmounted.
+                    mindmap.layout(mindmap.tree, { applyStyle: false });
                 }
                 this.richText.style.minHeight = `${containerHeight}px`;
             }
@@ -264,6 +352,12 @@ let EdgelessShapeTextEditor = (() => {
                         return;
                     this._unmount();
                 });
+                this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionupdate', () => {
+                    this._scheduleElementWHUpdate();
+                });
+                this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionend', () => {
+                    this._scheduleElementWHUpdate(true);
+                });
             })
                 .catch(console.error);
             this.disposables.addFromEvent(this, 'keydown', evt => {
@@ -293,13 +387,19 @@ let EdgelessShapeTextEditor = (() => {
             const [verticalPadding, horiPadding] = this.element.padding;
             const textResizing = this.element.textResizing;
             const viewport = this.gfx.viewport;
-            const zoom = viewport.zoom;
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed and scaled the way a gfx block is, not in screen pixels.
+            const scale = overlayScale(viewport);
             const rect = getSelectedRect([this.element]);
             const rotate = this.element.rotate;
             const [leftTopX, leftTopY] = Vec.rotWith([rect.left, rect.top], [rect.left + rect.width / 2, rect.top + rect.height / 2], toRadian(rotate));
-            const [x, y] = this.gfx.viewport.toViewCoord(leftTopX, leftTopY);
+            const [x, y] = toOverlayCoord(viewport, leftTopX, leftTopY);
             const fixedBounds = this.element.textFitMode !== TextFitMode.Grow;
             const autoWidth = !fixedBounds && textResizing === TextResizing.AUTO_WIDTH_AND_HEIGHT;
+            // A shape that grows up to a maximum width wraps instead of running off:
+            // `max-content` keeps the intrinsic width the box wants, `max-width` caps
+            // it, and the wrapping rules below break the overflowing line.
+            const constrainedAutoWidth = autoWidth && typeof this.element.maxWidth === 'number';
             const color = this.std
                 .get(ThemeProvider)
                 .generateColorProperty(this.element.color, '#000000');
@@ -307,20 +407,22 @@ let EdgelessShapeTextEditor = (() => {
                 position: 'absolute',
                 left: x + 'px',
                 top: y + 'px',
-                width: autoWidth ? 'fit-content' : rect.width + 'px',
+                width: constrainedAutoWidth
+                    ? 'max-content'
+                    : autoWidth
+                        ? 'fit-content'
+                        : rect.width + 'px',
                 // override rich-text style (height: 100%)
                 height: 'initial',
                 minHeight: autoWidth ? '1em' : `${rect.height}px`,
-                maxWidth: autoWidth && this.element.maxWidth
-                    ? `${this.element.maxWidth}px`
-                    : undefined,
+                maxWidth: constrainedAutoWidth ? `${this.element.maxWidth}px` : undefined,
                 boxSizing: 'border-box',
                 fontSize: effectiveShapeFontSize(this.element) + 'px',
                 fontFamily: TextUtils.wrapFontFamily(this.element.fontFamily),
                 fontWeight: this.element.fontWeight,
                 lineHeight: 'normal',
                 outline: 'none',
-                transform: `scale(${zoom}, ${zoom}) rotate(${rotate}deg)`,
+                transform: `scale(${scale}, ${scale}) rotate(${rotate}deg)`,
                 transformOrigin: 'top left',
                 color,
                 padding: `${verticalPadding}px ${horiPadding}px`,
@@ -339,9 +441,15 @@ let EdgelessShapeTextEditor = (() => {
             this._lastXYWH = this.element.xywh;
             return html ` <style>
         edgeless-shape-text-editor v-text [data-v-text] {
-          overflow-wrap: ${autoWidth ? 'normal' : 'anywhere'};
-          word-break: ${autoWidth ? 'normal' : 'break-word'} !important;
-          white-space: ${autoWidth ? 'pre' : 'pre-wrap'} !important;
+          overflow-wrap: ${autoWidth && !constrainedAutoWidth
+                ? 'normal'
+                : 'anywhere'};
+          word-break: ${autoWidth && !constrainedAutoWidth
+                ? 'normal'
+                : 'break-word'} !important;
+          white-space: ${autoWidth && !constrainedAutoWidth
+                ? 'pre'
+                : 'pre-wrap'} !important;
         }
 
         edgeless-shape-text-editor .inline-editor {
@@ -369,6 +477,7 @@ let EdgelessShapeTextEditor = (() => {
         set richText(value) { this.#richText_accessor_storage = value; }
         constructor() {
             super(...arguments);
+            this._compositionUpdateRaf = null;
             this._keeping = false;
             this._lastXYWH = '';
             this._resizeObserver = null;

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

@@ -1,7 +1,7 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { ShortcutExtension } from '../std/index.js';
+import { CommandExtension } from '../std/index.js';
+import { shapeCommands } from './commands.js';
 import { effects } from './effects.js';
-import { shapeShortcuts } from './shortcuts.js';
 import { HighlighterElementRendererExtension, ShapeElementRendererExtension, } from './element-renderer/index.js';
 import { ShapeDomRendererExtension } from './element-renderer/shape-dom.js';
 import { ShapeElementView, ShapeViewInteraction } from './element-view.js';
@@ -30,7 +30,7 @@ export class ShapeViewExtension extends ViewExtensionProvider {
             context.register(shapeToolbarExtension);
             context.register(ShapeViewInteraction);
             // Edgeless-scoped, enumerable/rebindable (installer: root view.ts).
-            context.register(ShortcutExtension(shapeShortcuts));
+            context.register(CommandExtension(shapeCommands));
         }
     }
 }

package/dist/_pkgs/affine-gfx-template/builtin/other.js

@@ -73,8 +73,19 @@ function swot() {
 // ── Kanban (To do / Doing / Done) ─────────────────────────────────────
 function kanban() {
     const colOpts = { fill: '#f4f4f5', stroke: MUTED, sw: 1.5, radius: 10 };
-    const head = { fontSize: 18, weight: FontWeight.Medium, align: TextAlign.Center };
-    const card = (x, y, fill, stroke) => rect(x, y, 188, 60, { fill, stroke, sw: 1.5, radius: 8, text: 'Card', fontSize: 14 });
+    const head = {
+        fontSize: 18,
+        weight: FontWeight.Medium,
+        align: TextAlign.Center,
+    };
+    const card = (x, y, fill, stroke) => rect(x, y, 188, 60, {
+        fill,
+        stroke,
+        sw: 1.5,
+        radius: 8,
+        text: 'Card',
+        fontSize: 14,
+    });
     return {
         c1: rect(0, 0, 220, 420, colOpts),
         c2: rect(244, 0, 220, 420, colOpts),
@@ -92,7 +103,10 @@ function kanban() {
 // ── Business Model Canvas (Strategyzer 9-block layout) ────────────────
 function bmc() {
     const blk = { stroke: DARK, sw: 1.5 };
-    const t = (x, y, s) => label(x + 12, y + 12, 180, 22, s, { fontSize: 14, weight: FontWeight.Medium });
+    const t = (x, y, s) => label(x + 12, y + 12, 180, 22, s, {
+        fontSize: 14,
+        weight: FontWeight.Medium,
+    });
     const hdr = (x, s) => ({
         box: rect(x, 8, 128, 34, { stroke: MUTED, sw: 1 }),
         txt: label(x + 8, 16, 120, 18, s, { fontSize: 11, color: '#5f6368' }),
@@ -106,24 +120,45 @@ function bmc() {
             fontSize: 24,
             weight: FontWeight.Medium,
         }),
-        h1b: h1.box, h1t: h1.txt, h2b: h2.box, h2t: h2.txt,
-        h3b: h3.box, h3t: h3.txt, h4b: h4.box, h4t: h4.txt,
-        kp: rect(0, 56, 196, 300, blk), ka: rect(200, 56, 196, 146, blk),
-        kr: rect(200, 206, 196, 150, blk), vp: rect(400, 56, 196, 300, blk),
-        cr: rect(600, 56, 196, 146, blk), ch: rect(600, 206, 196, 150, blk),
+        h1b: h1.box,
+        h1t: h1.txt,
+        h2b: h2.box,
+        h2t: h2.txt,
+        h3b: h3.box,
+        h3t: h3.txt,
+        h4b: h4.box,
+        h4t: h4.txt,
+        kp: rect(0, 56, 196, 300, blk),
+        ka: rect(200, 56, 196, 146, blk),
+        kr: rect(200, 206, 196, 150, blk),
+        vp: rect(400, 56, 196, 300, blk),
+        cr: rect(600, 56, 196, 146, blk),
+        ch: rect(600, 206, 196, 150, blk),
         cs: rect(800, 56, 196, 300, blk),
-        cost: rect(0, 360, 496, 84, blk), rev: rect(500, 360, 496, 84, blk),
-        tkp: t(0, 56, 'Key partnerships'), tka: t(200, 56, 'Key activities'),
-        tkr: t(200, 206, 'Key resources'), tvp: t(400, 56, 'Value propositions'),
-        tcr: t(600, 56, 'Customer relationships'), tch: t(600, 206, 'Channels'),
+        cost: rect(0, 360, 496, 84, blk),
+        rev: rect(500, 360, 496, 84, blk),
+        tkp: t(0, 56, 'Key partnerships'),
+        tka: t(200, 56, 'Key activities'),
+        tkr: t(200, 206, 'Key resources'),
+        tvp: t(400, 56, 'Value propositions'),
+        tcr: t(600, 56, 'Customer relationships'),
+        tch: t(600, 206, 'Channels'),
         tcs: t(800, 56, 'Customer segments'),
-        tcost: t(0, 360, 'Cost structure'), trev: t(500, 360, 'Revenue streams'),
+        tcost: t(0, 360, 'Cost structure'),
+        trev: t(500, 360, 'Revenue streams'),
     };
 }
 // ── Fishbone / Ishikawa (spine + arrowhead bones + CATEGORY/ITEM) ─────
 function fishbone() {
     const cat = (x, y) => rect(x, y, 150, 44, { text: 'CATEGORY', fontSize: 13 });
-    const item = (x, y, n) => rect(x, y, 130, 40, { stroke: MUTED, sw: 1.4, dash: true, text: n, textColor: '#5f6368', fontSize: 13 });
+    const item = (x, y, n) => rect(x, y, 130, 40, {
+        stroke: MUTED,
+        sw: 1.4,
+        dash: true,
+        text: n,
+        textColor: '#5f6368',
+        fontSize: 13,
+    });
     const out = {
         spine: line(80, 360, 1120, 360, { sw: 6 }),
         head: rect(1124, 332, 130, 56, { text: 'Effect', fontSize: 16 }),
@@ -156,13 +191,22 @@ function gantt() {
     for (let i = 0; i < 6; i++) {
         const x = 220 + i * 130;
         out[`g${i}`] = line(x, 40, x, 268, { stroke: '#e0e0e0', sw: 1 });
-        out[`w${i}`] = label(x - 16, 12, 40, 20, `W${i + 1}`, { fontSize: 12, color: '#5f6368', align: TextAlign.Center });
+        out[`w${i}`] = label(x - 16, 12, 40, 20, `W${i + 1}`, {
+            fontSize: 12,
+            color: '#5f6368',
+            align: TextAlign.Center,
+        });
     }
     rows.forEach((name, r) => {
         const y = 56 + r * 52;
         out[`t${r}`] = label(0, y + 6, 180, 24, name, { fontSize: 14 });
         const [bx, bw, fill] = bars[r];
-        out[`b${r}`] = rect(bx, y, bw, 28, { fill, stroke: fill, sw: 0, radius: 6 });
+        out[`b${r}`] = rect(bx, y, bw, 28, {
+            fill,
+            stroke: fill,
+            sw: 0,
+            radius: 6,
+        });
     });
     return out;
 }
@@ -175,7 +219,12 @@ const previews = {
     gantt: `<svg ${ATTRS} fill="none"><path d="M40 14 V70 M62 14 V70 M84 14 V70 M106 14 V70" stroke="#e0e0e0"/><rect x="40" y="22" width="34" height="8" rx="2" fill="#4574c4"/><rect x="52" y="36" width="44" height="8" rx="2" fill="#2f9e95"/><rect x="62" y="50" width="50" height="8" rx="2" fill="#d99a2b"/><rect x="84" y="64" width="28" height="8" rx="2" fill="#43a06b"/></svg>`,
 };
 function t(name, preview, elements) {
-    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+    return {
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    };
 }
 export const otherTemplateCategory = {
     name: 'Other',

package/dist/_pkgs/affine-gfx-template/toolbar/overlay-scrollbar.js

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { on, once, requestConnectedFrame, } from '../../affine-shared/utils/index.js';
+import { on, once, requestConnectedFrame } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { css, html, LitElement } from 'lit';
 import { query } from 'lit/decorators.js';

package/dist/_pkgs/affine-gfx-template/toolbar/template-panel.js

@@ -34,7 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { DefaultTool } from '../../affine-block-surface/index.js';
 import { darkToolbarStyles, lightToolbarStyles, } from '../../affine-components/toolbar/index.js';
-import { EditPropsStore, ThemeProvider, } from '../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../../affine-shared/services/index.js';
 import { requestConnectedFrame, stopPropagation, } from '../../affine-shared/utils/index.js';
 import { EdgelessDraggableElementController } from '../../affine-widget-edgeless-toolbar/index.js';
 import { WithDisposable } from '../../global/lit/index.js';

package/dist/_pkgs/affine-gfx-template/toolbar/template-tool-button.d.ts

@@ -4,10 +4,12 @@ declare const EdgelessTemplateButton_base: typeof LitElement & import("../../glo
 export declare class EdgelessTemplateButton extends EdgelessTemplateButton_base {
     static styles: import("lit").CSSResult;
     private _cleanup;
+    private _autoUpdateCleanup;
     private _prevTool;
     enableActiveBackground: boolean;
     type: typeof TemplateTool;
     get cards(): import("lit-html").TemplateResult<2>[];
+    connectedCallback(): void;
     private _closePanel;
     private _togglePanel;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -151,10 +151,21 @@ let EdgelessTemplateButton = (() => {
             const { theme } = this;
             return [TemplateCard1[theme], TemplateCard2[theme], TemplateCard3[theme]];
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // The panel can still be open when the button is removed: without this the
+            // `autoUpdate` listeners outlive the element and leak.
+            this.disposables.add(() => {
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = null;
+            });
+        }
         _closePanel() {
             if (this._openedPanel) {
                 this._openedPanel.remove();
                 this._openedPanel = null;
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = null;
                 this._cleanup?.();
                 this._cleanup = null;
                 this.requestUpdate();
@@ -188,8 +199,13 @@ let EdgelessTemplateButton = (() => {
             this._openedPanel = panel;
             this.renderRoot.append(panel);
             requestAnimationFrame(() => {
+                // The panel may already have been closed before this frame ran; starting
+                // a loop on it now would never be stopped.
+                if (this._openedPanel !== panel)
+                    return;
                 const arrowEl = panel.renderRoot.querySelector('.arrow');
-                autoUpdate(this, panel, () => {
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = autoUpdate(this, panel, () => {
                     computePosition(this, panel, {
                         placement: 'top',
                         middleware: [offset(20), arrow({ element: arrowEl }), shift()],
@@ -230,6 +246,7 @@ let EdgelessTemplateButton = (() => {
         constructor() {
             super(...arguments);
             this._cleanup = null;
+            this._autoUpdateCleanup = null;
             this._prevTool = null;
             this.enableActiveBackground = true;
             this.type = TemplateTool;

package/dist/_pkgs/affine-gfx-text/edgeless-text-editor.js

@@ -35,7 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { CanvasElementType, DefaultTool, EdgelessCRUDIdentifier, getSurfaceBlock, TextUtils, } from '../affine-block-surface/index.js';
 import { DefaultTheme, TextElementModel } from '../affine-model/index.js';
 import { ThemeProvider } from '../affine-shared/services/index.js';
-import { getSelectedRect } from '../affine-shared/utils/index.js';
+import { getSelectedRect, overlayScale, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { Bound, toRadian, Vec } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement, stdContext, } from '../std/index.js';
@@ -281,13 +281,17 @@ let EdgelessTextEditor = (() => {
             const { text, fontFamily, fontSize, fontWeight, fontStyle, textAlign, rotate, hasMaxWidth, w, } = this.element;
             const lineHeight = getLineHeight(fontFamily, fontSize, fontWeight);
             const rect = getSelectedRect([this.element]);
-            const { translateX, translateY, zoom } = this.gfx.viewport;
+            const viewport = this.gfx.viewport;
             const [visualX, visualY] = this.getVisualPosition(this.element);
             const containerOffset = this.getContainerOffset();
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed and scaled the way a gfx block is, not in screen pixels.
+            // Panning the viewport and reaching the element are one and the same
+            // translation, which is what `toOverlayCoord` answers.
+            const [x, y] = toOverlayCoord(viewport, visualX, visualY);
             const transformOperation = [
-                `translate(${translateX}px, ${translateY}px)`,
-                `translate(${visualX * zoom}px, ${visualY * zoom}px)`,
-                `scale(${zoom})`,
+                `translate(${x}px, ${y}px)`,
+                `scale(${overlayScale(viewport)})`,
                 `rotate(${rotate}deg)`,
                 `translate(${containerOffset})`,
             ];

package/dist/_pkgs/affine-gfx-text/toolbar/actions.js

@@ -1,4 +1,4 @@
-import { EdgelessCRUDIdentifier, TextUtils, } from '../../affine-block-surface/index.js';
+import { EdgelessCRUDIdentifier, TextUtils } from '../../affine-block-surface/index.js';
 import { packColor, } from '../../affine-components/color-picker/index.js';
 import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
 import { DefaultTheme, FontFamily, FontStyle, FontWeight, resolveColor, TextAlign, } from '../../affine-model/index.js';