@formicoidea/labre-core 0.40.0 → 0.42.0

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

@@ -1,6 +1,18 @@
 import { ConnectorMode, } from '../../affine-model/index.js';
+import { NOTATION_NEUTRALS } from '../../affine-shared/consts/index.js';
 import { getBezierParameters, getBezierTangent, Vec } from '../../global/gfx/index.js';
 export const DEFAULT_ARROW_SIZE = 15;
+/**
+ * The interior of a hollow endpoint head (`TriangleHollow`, `DiamondHollow`).
+ *
+ * The notation card fill (R33), NOT a theme-resolved token and NOT
+ * `transparent`: a UML hollow head reads as a white shape sitting on top of the
+ * line it terminates, exactly like the class box it points at — which is itself
+ * painted `NOTATION_NEUTRALS.cardFill` in every theme. `transparent` would let
+ * the connector's own line show through the head; a theme token would turn the
+ * head black-on-black next to a card-white box in a dark host.
+ */
+export const HOLLOW_HEAD_FILL = NOTATION_NEUTRALS.cardFill;
 export function getArrowPoints(points, size = 10, mode, bezierParameters, endPoint = 'Rear', radians = Math.PI / 4) {
     const anchorPoint = getPointWithTangent(points, mode, endPoint, bezierParameters);
     const unit = Vec.mul(anchorPoint.tangent, -1);
@@ -70,7 +82,12 @@ export function getDiamondPoints(point, size = 10, endPoint = 'Rear') {
         points: diamondPoints,
     };
 }
-export function getArrowOptions(end, model, strokeColor) {
+/**
+ * @param fillColor the interior of a closed head. Defaults to `strokeColor`, so
+ *   a `Triangle` or a `Diamond` stays the solid head it has always been; the
+ *   hollow UML heads pass `HOLLOW_HEAD_FILL` instead.
+ */
+export function getArrowOptions(end, model, strokeColor, fillColor = strokeColor) {
     const { seed, mode, rough, roughness, strokeWidth, path } = model;
     return {
         end,
@@ -80,7 +97,7 @@ export function getArrowOptions(end, model, strokeColor) {
         roughness,
         strokeWidth,
         strokeColor,
-        fillColor: strokeColor,
+        fillColor,
         fillStyle: 'solid',
         bezierParameters: getBezierParameters(path),
     };
@@ -96,8 +113,14 @@ export function getRcOptions(options) {
         fillStyle: 'solid',
     };
 }
-export function renderRoundedPolygon(ctx, points, color, strokeWidth, fill = true) {
-    ctx.fillStyle = color;
+/**
+ * @param color the outline colour.
+ * @param fillColor the interior colour. Defaults to `color` — the solid head.
+ *   A hollow head passes the notation card fill, so the outline stays the
+ *   connector's colour while the inside reads as empty.
+ */
+export function renderRoundedPolygon(ctx, points, color, strokeWidth, fill = true, fillColor = color) {
+    ctx.fillStyle = fillColor;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineJoin = 'round';
@@ -132,7 +155,7 @@ export function renderArrow(points, ctx, rc, options) {
     }
 }
 export function renderTriangle(points, ctx, rc, options) {
-    const { mode, end, bezierParameters, rough, strokeColor, strokeWidth } = options;
+    const { mode, end, bezierParameters, rough, fillColor, strokeColor, strokeWidth, } = options;
     const radians = Math.PI / 6;
     const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
     const { points: trianglePoints } = getArrowPoints(points, size, mode, bezierParameters, end, radians);
@@ -144,11 +167,11 @@ export function renderTriangle(points, ctx, rc, options) {
         ], getRcOptions(options));
     }
     else {
-        renderRoundedPolygon(ctx, trianglePoints, strokeColor, strokeWidth);
+        renderRoundedPolygon(ctx, trianglePoints, strokeColor, strokeWidth, true, fillColor);
     }
 }
 export function renderDiamond(points, ctx, rc, options) {
-    const { mode, end, rough, bezierParameters, strokeColor, strokeWidth } = options;
+    const { mode, end, rough, bezierParameters, fillColor, strokeColor, strokeWidth, } = options;
     const anchorPoint = getPointWithTangent(points, mode, end, bezierParameters);
     const size = 10 * (strokeWidth / 2);
     const { points: diamondPoints } = getDiamondPoints(anchorPoint, size, end);
@@ -161,7 +184,7 @@ export function renderDiamond(points, ctx, rc, options) {
         ], getRcOptions(options));
     }
     else {
-        renderRoundedPolygon(ctx, diamondPoints, strokeColor, strokeWidth);
+        renderRoundedPolygon(ctx, diamondPoints, strokeColor, strokeWidth, true, fillColor);
     }
 }
 export function renderCircle(points, ctx, rc, options) {

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

@@ -1,17 +1,136 @@
-import type { ConnectorElementModel } from '../../affine-model/index.js';
+import { type ConnectorElementModel, type ConnectorLabelEnd } from '../../affine-model/index.js';
 import type { RichText } from '../../affine-rich-text/index.js';
-import { type IVec } from '../../global/gfx/index.js';
+import { type IVec, type XYWH } from '../../global/gfx/index.js';
 import { type BlockComponent, type BlockStdScope, ShadowlessElement } from '../../std/index.js';
-export declare function mountConnectorLabelEditor(connector: ConnectorElementModel, edgeless: BlockComponent, point?: IVec): void;
+import * as Y from 'yjs';
+/**
+ * Which of a connector's three labels a gesture is about — its centre caption,
+ * or one of the two end labels UML writes multiplicities and role names in
+ * (`docs/adr/0018` phase 2).
+ *
+ * Built on the model's own `ConnectorLabelEnd` rather than restating its two
+ * members: the ends are the model's vocabulary — they are the names of its two
+ * `Connection`s — and only the EDITOR has a third case, because only the editor
+ * has to be pointed at one label out of three.
+ */
+export type ConnectorLabelWhich = 'center' | ConnectorLabelEnd;
+/**
+ * The model fields each label lives in.
+ *
+ * Declared once, as data, because THREE places need the same answer — the
+ * editor's read, its resize write and its empty-commit delete — and three
+ * `which === 'center' ? … : …` chains is how one of them ends up writing the
+ * centre label's box under an end label's text.
+ */
+export declare const CONNECTOR_LABEL_FIELDS: {
+    readonly center: {
+        readonly text: "text";
+        readonly xywh: "labelXYWH";
+    };
+    readonly source: {
+        readonly text: "sourceLabel";
+        readonly xywh: "sourceLabelXYWH";
+    };
+    readonly target: {
+        readonly text: "targetLabel";
+        readonly xywh: "targetLabelXYWH";
+    };
+};
+/** {@link CONNECTOR_LABEL_FIELDS}, defaulting to the centre label. */
+export declare function connectorLabelFields(which?: ConnectorLabelWhich): {
+    readonly text: "text";
+    readonly xywh: "labelXYWH";
+} | {
+    readonly text: "sourceLabel";
+    readonly xywh: "sourceLabelXYWH";
+} | {
+    readonly text: "targetLabel";
+    readonly xywh: "targetLabelXYWH";
+};
+/** The `Y.Text` of `which`, or `undefined` when that label does not exist. */
+export declare function connectorLabelText(connector: ConnectorElementModel, which?: ConnectorLabelWhich): Y.Text | undefined;
+/** The box of `which`, or `undefined` when that label does not exist. */
+export declare function connectorLabelXYWH(connector: ConnectorElementModel, which?: ConnectorLabelWhich): XYWH | undefined;
+/**
+ * The box an end label of `size` takes on the current path — the one geometry
+ * helper the model owns, so the renderer, the editor and the hit test all place
+ * an end label in the same spot.
+ */
+export declare function connectorEndLabelBoxFor(connector: ConnectorElementModel, which: ConnectorLabelEnd, size?: {
+    w: number;
+    h: number;
+}): XYWH;
+/**
+ * What to write so that `which` EXISTS, or `null` when it already does.
+ *
+ * The centre label is seeded where the pointer is, riding the path by an offset
+ * distance — it has always been a caption the author places. An end label is
+ * seeded at its ENDPOINT and ignores the pointer: the whole value of one is
+ * that it follows the end when the node moves (`docs/adr/0018`, "Alternatives
+ * rejected"), so where the double-click landed says nothing about where it
+ * belongs.
+ */
+export declare function connectorLabelSeedProps(connector: ConnectorElementModel, which?: ConnectorLabelWhich, point?: IVec): Record<string, unknown> | null;
+/**
+ * What to write when an editing session ENDS, or `null` when the text is
+ * already exactly what the model holds.
+ *
+ * A label committed empty clears both of its fields, so the connector reads
+ * as one that has none (`hasEndLabel` false, nothing painted, nothing
+ * exported). The KEYS stay in the Y.Map as `undefined` — the field setter
+ * writes what it is given — so only a connector that never carried an end
+ * label is byte-identical to a pre-0020 one; `docs/adr/0020`'s "no migration"
+ * promise is about that connector, not about this reset.
+ *
+ * Pure and exported: it is the one rule with three outcomes (delete, trim,
+ * nothing) times three labels, and a spec should be able to ask it directly.
+ */
+export declare function connectorLabelCommitProps(raw: string, which?: ConnectorLabelWhich): Record<string, unknown> | null;
+export type MountConnectorLabelEditorOptions = {
+    /** Which label to edit. Defaults to the centre one. */
+    which?: ConnectorLabelWhich;
+};
+/**
+ * Opens the label editor on ONE of a connector's three labels.
+ *
+ * This function used to exist twice — here and byte-alike in `text.ts`, which
+ * was the copy the package barrel re-exported — so the toolbar and the keyboard
+ * reached one body and the view's double-click the other. `docs/adr/0018`
+ * phase 2 makes the difference visible (a selector only one copy would have
+ * carried), so the duplicate is gone and `text.ts` re-exports this one.
+ */
+export declare function mountConnectorLabelEditor(connector: ConnectorElementModel, edgeless: BlockComponent, point?: IVec, options?: MountConnectorLabelEditorOptions): void;
 declare const EdgelessConnectorLabelEditor_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class EdgelessConnectorLabelEditor extends EdgelessConnectorLabelEditor_base {
     static styles: import("lit").CSSResult;
     get crud(): import("../../affine-block-surface/index.js").EdgelessCRUDExtension;
     get gfx(): import("../../std/gfx/controller.js").GfxController;
     get selection(): import("../../std/gfx/selection.js").GfxSelectionManager;
+    /** The two model fields this editor reads and writes. */
+    get fields(): {
+        readonly text: "text";
+        readonly xywh: "labelXYWH";
+    } | {
+        readonly text: "sourceLabel";
+        readonly xywh: "sourceLabelXYWH";
+    } | {
+        readonly text: "targetLabel";
+        readonly xywh: "targetLabelXYWH";
+    };
+    /** The `Y.Text` this editor is bound to. */
+    get yText(): Y.Text | undefined;
     private _isComposition;
     private _keeping;
+    private _removing;
     private _resizeObserver;
+    /**
+     * Where the editor sits, in MODEL coordinates.
+     *
+     * The centre label rides the path by its offset distance, so its anchor is
+     * recomputed from the connector; an end label's box is the anchor, and it is
+     * the box that follows the endpoint (see `connectorEndLabelBox`).
+     */
+    private get _labelCenter();
     private readonly _updateLabelRect;
     get inlineEditor(): import("../../affine-shared/types/index.js").AffineInlineEditor | null;
     get inlineEditorContainer(): import("../../std/inline/inline-editor.js").InlineRootElement<import("../../affine-shared/types/index.js").AffineTextAttributes> | null | undefined;
@@ -22,6 +141,8 @@ export declare class EdgelessConnectorLabelEditor extends EdgelessConnectorLabel
     render(): import("lit-html").TemplateResult<1>;
     setKeeping(keeping: boolean): void;
     accessor connector: ConnectorElementModel;
+    /** Which of the connector's three labels is being edited. */
+    accessor which: ConnectorLabelWhich;
     accessor std: BlockStdScope;
     accessor richText: RichText;
 }

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

@@ -34,7 +34,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { DefaultTool, EdgelessCRUDIdentifier, } from '../../affine-block-surface/index.js';
 import { getLineHeight } from '../../affine-gfx-text/index.js';
-import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { connectorEndLabelBox, } from '../../affine-model/index.js';
+import { ThemeProvider, translateKey } from '../../affine-shared/services/index.js';
 import { almostEqual } from '../../affine-shared/utils/index.js';
 import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
 import { Bound, Vec } from '../../global/gfx/index.js';
@@ -47,40 +48,159 @@ import { css, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import * as Y from 'yjs';
+import { CONNECTOR_ADD_TEXT } from '../translations.js';
 const HORIZONTAL_PADDING = 2;
 const VERTICAL_PADDING = 2;
 const BORDER_WIDTH = 1;
-export function mountConnectorLabelEditor(connector, edgeless, point) {
+/** The box a label is seeded with, before the first character is typed. */
+const DEFAULT_LABEL_SIZE = { w: 16, h: 16 };
+/**
+ * The model fields each label lives in.
+ *
+ * Declared once, as data, because THREE places need the same answer — the
+ * editor's read, its resize write and its empty-commit delete — and three
+ * `which === 'center' ? … : …` chains is how one of them ends up writing the
+ * centre label's box under an end label's text.
+ */
+export const CONNECTOR_LABEL_FIELDS = {
+    center: { text: 'text', xywh: 'labelXYWH' },
+    source: { text: 'sourceLabel', xywh: 'sourceLabelXYWH' },
+    target: { text: 'targetLabel', xywh: 'targetLabelXYWH' },
+};
+/** {@link CONNECTOR_LABEL_FIELDS}, defaulting to the centre label. */
+export function connectorLabelFields(which = 'center') {
+    return CONNECTOR_LABEL_FIELDS[which];
+}
+/** The `Y.Text` of `which`, or `undefined` when that label does not exist. */
+export function connectorLabelText(connector, which = 'center') {
+    return which === 'center' ? connector.text : connector.endLabelText(which);
+}
+/** The box of `which`, or `undefined` when that label does not exist. */
+export function connectorLabelXYWH(connector, which = 'center') {
+    return which === 'center'
+        ? connector.labelXYWH
+        : connector.endLabelXYWH(which);
+}
+/**
+ * The box an end label of `size` takes on the current path — the one geometry
+ * helper the model owns, so the renderer, the editor and the hit test all place
+ * an end label in the same spot.
+ */
+export function connectorEndLabelBoxFor(connector, which, size = DEFAULT_LABEL_SIZE) {
+    return connectorEndLabelBox(connector.absolutePath, which, size);
+}
+/**
+ * What to write so that `which` EXISTS, or `null` when it already does.
+ *
+ * The centre label is seeded where the pointer is, riding the path by an offset
+ * distance — it has always been a caption the author places. An end label is
+ * seeded at its ENDPOINT and ignores the pointer: the whole value of one is
+ * that it follows the end when the node moves (`docs/adr/0018`, "Alternatives
+ * rejected"), so where the double-click landed says nothing about where it
+ * belongs.
+ */
+export function connectorLabelSeedProps(connector, which = 'center', point) {
+    if (connectorLabelText(connector, which))
+        return null;
+    const fields = connectorLabelFields(which);
+    const text = new Y.Text();
+    if (which !== 'center') {
+        return {
+            [fields.text]: text,
+            [fields.xywh]: connectorEndLabelBoxFor(connector, which),
+        };
+    }
+    let labelXYWH = connector.labelXYWH ?? [
+        0,
+        0,
+        DEFAULT_LABEL_SIZE.w,
+        DEFAULT_LABEL_SIZE.h,
+    ];
+    const labelOffset = { ...connector.labelOffset };
+    if (point) {
+        const center = connector.getNearestPoint(point);
+        const distance = connector.getOffsetDistanceByPoint(center);
+        const bounds = Bound.fromXYWH(labelXYWH);
+        bounds.center = center;
+        labelOffset.distance = distance;
+        labelXYWH = bounds.toXYWH();
+    }
+    return { text, labelXYWH, labelOffset };
+}
+/**
+ * What to write when an editing session ENDS, or `null` when the text is
+ * already exactly what the model holds.
+ *
+ * A label committed empty clears both of its fields, so the connector reads
+ * as one that has none (`hasEndLabel` false, nothing painted, nothing
+ * exported). The KEYS stay in the Y.Map as `undefined` — the field setter
+ * writes what it is given — so only a connector that never carried an end
+ * label is byte-identical to a pre-0020 one; `docs/adr/0020`'s "no migration"
+ * promise is about that connector, not about this reset.
+ *
+ * Pure and exported: it is the one rule with three outcomes (delete, trim,
+ * nothing) times three labels, and a spec should be able to ask it directly.
+ */
+export function connectorLabelCommitProps(raw, which = 'center') {
+    const fields = connectorLabelFields(which);
+    const trimed = raw.trim();
+    if (trimed.length === 0) {
+        return {
+            [fields.text]: undefined,
+            [fields.xywh]: undefined,
+            // The centre label's placement along the path goes with it; an end label
+            // has no offset of its own — its place is its endpoint.
+            ...(which === 'center' ? { labelOffset: undefined } : null),
+        };
+    }
+    if (trimed.length < raw.length) {
+        // @TODO: trim in Y.Text?
+        return { [fields.text]: new Y.Text(trimed) };
+    }
+    return null;
+}
+/**
+ * The box an END label takes after a measurement: a label that already has a
+ * box keeps its CENTRE and takes the new size — the author's or the importer's
+ * placement survives an edit — and a label that has none yet is seeded beside
+ * its endpoint by `connectorEndLabelBox`.
+ */
+function endLabelRect(connector, which, w, h) {
+    const current = connectorLabelXYWH(connector, which);
+    if (current) {
+        const [cx, cy] = Bound.fromXYWH(current).center;
+        return [cx - w / 2, cy - h / 2, w, h];
+    }
+    return connectorEndLabelBoxFor(connector, which, { w, h });
+}
+/**
+ * Opens the label editor on ONE of a connector's three labels.
+ *
+ * This function used to exist twice — here and byte-alike in `text.ts`, which
+ * was the copy the package barrel re-exported — so the toolbar and the keyboard
+ * reached one body and the view's double-click the other. `docs/adr/0018`
+ * phase 2 makes the difference visible (a selector only one copy would have
+ * carried), so the duplicate is gone and `text.ts` re-exports this one.
+ */
+export function mountConnectorLabelEditor(connector, edgeless, point, options) {
     const mountElm = edgeless.querySelector('.edgeless-mount-point');
     if (!mountElm) {
         throw new BlockSuiteError(ErrorCode.ValueNotExists, "edgeless block's mount point does not exist");
     }
+    const which = options?.which ?? 'center';
     const gfx = edgeless.std.get(GfxControllerIdentifier);
     gfx.tool.setTool(DefaultTool);
     gfx.selection.set({
         elements: [connector.id],
         editing: true,
     });
-    if (!connector.text) {
-        const text = new Y.Text();
-        const labelOffset = connector.labelOffset;
-        let labelXYWH = connector.labelXYWH ?? [0, 0, 16, 16];
-        if (point) {
-            const center = connector.getNearestPoint(point);
-            const distance = connector.getOffsetDistanceByPoint(center);
-            const bounds = Bound.fromXYWH(labelXYWH);
-            bounds.center = center;
-            labelOffset.distance = distance;
-            labelXYWH = bounds.toXYWH();
-        }
-        edgeless.std.get(EdgelessCRUDIdentifier).updateElement(connector.id, {
-            text,
-            labelXYWH,
-            labelOffset: { ...labelOffset },
-        });
+    const seed = connectorLabelSeedProps(connector, which, point);
+    if (seed) {
+        edgeless.std.get(EdgelessCRUDIdentifier).updateElement(connector.id, seed);
     }
     const editor = new EdgelessConnectorLabelEditor();
     editor.connector = connector;
+    editor.which = which;
     mountElm.append(editor);
     editor.updateComplete
         .then(() => {
@@ -93,6 +213,9 @@ let EdgelessConnectorLabelEditor = (() => {
     let _connector_decorators;
     let _connector_initializers = [];
     let _connector_extraInitializers = [];
+    let _which_decorators;
+    let _which_initializers = [];
+    let _which_extraInitializers = [];
     let _std_decorators;
     let _std_initializers = [];
     let _std_extraInitializers = [];
@@ -103,11 +226,13 @@ let EdgelessConnectorLabelEditor = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _connector_decorators = [property({ attribute: false })];
+            _which_decorators = [property({ attribute: false })];
             _std_decorators = [consume({
                     context: stdContext,
                 })];
             _richText_decorators = [query('rich-text')];
             __esDecorate(this, null, _connector_decorators, { kind: "accessor", name: "connector", static: false, private: false, access: { has: obj => "connector" in obj, get: obj => obj.connector, set: (obj, value) => { obj.connector = value; } }, metadata: _metadata }, _connector_initializers, _connector_extraInitializers);
+            __esDecorate(this, null, _which_decorators, { kind: "accessor", name: "which", static: false, private: false, access: { has: obj => "which" in obj, get: obj => obj.which, set: (obj, value) => { obj.which = value; } }, metadata: _metadata }, _which_initializers, _which_extraInitializers);
             __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _richText_decorators, { kind: "accessor", name: "richText", static: false, private: false, access: { has: obj => "richText" in obj, get: obj => obj.richText, set: (obj, value) => { obj.richText = value; } }, metadata: _metadata }, _richText_initializers, _richText_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -153,6 +278,30 @@ let EdgelessConnectorLabelEditor = (() => {
         get selection() {
             return this.gfx.selection;
         }
+        /** The two model fields this editor reads and writes. */
+        get fields() {
+            return connectorLabelFields(this.which);
+        }
+        /** The `Y.Text` this editor is bound to. */
+        get yText() {
+            return connectorLabelText(this.connector, this.which);
+        }
+        /**
+         * Where the editor sits, in MODEL coordinates.
+         *
+         * The centre label rides the path by its offset distance, so its anchor is
+         * recomputed from the connector; an end label's box is the anchor, and it is
+         * the box that follows the endpoint (see `connectorEndLabelBox`).
+         */
+        get _labelCenter() {
+            const { connector, which } = this;
+            if (which === 'center') {
+                return connector.getPointByOffsetDistance(connector.labelOffset.distance);
+            }
+            const box = connectorLabelXYWH(connector, which) ??
+                connectorEndLabelBoxFor(connector, which);
+            return Bound.fromXYWH(box).center;
+        }
         get inlineEditor() {
             return this.richText.inlineEditor;
         }
@@ -169,14 +318,15 @@ let EdgelessConnectorLabelEditor = (() => {
             this._resizeObserver = null;
         }
         firstUpdated() {
-            const { connector, selection, std } = this;
+            const { connector, selection, std, which } = this;
+            const fields = this.fields;
             const dispatcher = std.event;
             this._resizeObserver = new ResizeObserver(() => {
                 this._updateLabelRect();
                 this.requestUpdate();
             });
             this._resizeObserver.observe(this.richText);
-            this.connector.stash('labelXYWH');
+            this.connector.stash(fields.xywh);
             this.updateComplete
                 .then(() => {
                 if (!this.inlineEditor)
@@ -214,27 +364,19 @@ let EdgelessConnectorLabelEditor = (() => {
                 this.disposables.add(dispatcher.add('click', () => true));
                 this.disposables.add(dispatcher.add('doubleClick', () => true));
                 this.disposables.add(() => {
-                    if (connector.text) {
-                        const text = connector.text.toString();
-                        const trimed = text.trim();
-                        const len = trimed.length;
-                        if (len === 0) {
-                            // reset
-                            this.crud.updateElement(connector.id, {
-                                text: undefined,
-                                labelXYWH: undefined,
-                                labelOffset: undefined,
-                            });
-                        }
-                        else if (len < text.length) {
-                            this.crud.updateElement(connector.id, {
-                                // @TODO: trim in Y.Text?
-                                text: new Y.Text(trimed),
-                            });
-                        }
+                    const yText = connectorLabelText(connector, which);
+                    if (yText) {
+                        const props = connectorLabelCommitProps(yText.toString(), which);
+                        if (props)
+                            this.crud.updateElement(connector.id, props);
+                    }
+                    if (which === 'center') {
+                        connector.labelEditing = false;
+                    }
+                    else {
+                        connector.endLabelEditing = null;
                     }
-                    connector.labelEditing = false;
-                    connector.pop('labelXYWH');
+                    connector.pop(fields.xywh);
                     selection.set({
                         elements: [],
                         editing: false,
@@ -243,8 +385,13 @@ let EdgelessConnectorLabelEditor = (() => {
                 if (!this.inlineEditorContainer)
                     return;
                 this.disposables.addFromEvent(this.inlineEditorContainer, 'blur', () => {
-                    if (this._keeping)
+                    // Re-entrant: Chrome fires the focused child's blur SYNCHRONOUSLY
+                    // inside `remove()`, before the node is detached, and the commit
+                    // in `disconnectedCallback` moves the focus again. Without the
+                    // flag the handler removes a node whose removal is in progress.
+                    if (this._keeping || this._removing)
                         return;
+                    this._removing = true;
                     this.remove();
                 });
                 this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionstart', () => {
@@ -255,7 +402,16 @@ let EdgelessConnectorLabelEditor = (() => {
                     this._isComposition = false;
                     this.requestUpdate();
                 });
-                connector.labelEditing = true;
+                // The canvas must not paint the label the overlay is showing, and only
+                // THAT one: `hasEndLabel` is gated on `endLabelEditing`, `hasLabel()`
+                // on `labelEditing`, so editing one end leaves the caption and the
+                // other end drawn (`ConnectorElementModel.hasEndLabel`).
+                if (which === 'center') {
+                    connector.labelEditing = true;
+                }
+                else {
+                    connector.endLabelEditing = which;
+                }
             })
                 .catch(console.error);
         }
@@ -266,17 +422,18 @@ let EdgelessConnectorLabelEditor = (() => {
         }
         render() {
             const { connector } = this;
-            const { labelOffset: { distance }, labelStyle: { fontFamily, fontSize, fontStyle, fontWeight, textAlign, color: labelColor, }, labelConstraints: { hasMaxWidth, maxWidth }, } = connector;
+            const { labelStyle: { fontFamily, fontSize, fontStyle, fontWeight, textAlign, color: labelColor, }, labelConstraints: { hasMaxWidth, maxWidth }, } = connector;
             const lineHeight = getLineHeight(fontFamily, fontSize, fontWeight);
             const { translateX, translateY, zoom } = this.gfx.viewport;
-            const [x, y] = Vec.mul(connector.getPointByOffsetDistance(distance), zoom);
+            const [x, y] = Vec.mul(this._labelCenter, zoom);
             const transformOperation = [
                 'translate(-50%, -50%)',
                 `translate(${translateX}px, ${translateY}px)`,
                 `translate(${x}px, ${y}px)`,
                 `scale(${zoom})`,
             ];
-            const isEmpty = !connector.text?.length && !this._isComposition;
+            const yText = this.yText;
+            const isEmpty = !yText?.length && !this._isComposition;
             const color = this.std
                 .get(ThemeProvider)
                 .generateColorProperty(labelColor, '#000000');
@@ -298,7 +455,7 @@ let EdgelessConnectorLabelEditor = (() => {
             })}
       >
         <rich-text
-          .yText=${connector.text}
+          .yText=${yText}
           .enableFormat=${false}
           style=${isEmpty
                 ? styleMap({
@@ -312,7 +469,7 @@ let EdgelessConnectorLabelEditor = (() => {
         ${isEmpty
                 ? html `
               <span class="edgeless-connector-label-editor-placeholder">
-                Add text
+                ${translateKey(this.std, ...CONNECTOR_ADD_TEXT)}
               </span>
             `
                 : nothing}
@@ -325,6 +482,10 @@ let EdgelessConnectorLabelEditor = (() => {
         #connector_accessor_storage;
         get connector() { return this.#connector_accessor_storage; }
         set connector(value) { this.#connector_accessor_storage = value; }
+        #which_accessor_storage;
+        /** Which of the connector's three labels is being edited. */
+        get which() { return this.#which_accessor_storage; }
+        set which(value) { this.#which_accessor_storage = value; }
         #std_accessor_storage;
         get std() { return this.#std_accessor_storage; }
         set std(value) { this.#std_accessor_storage = value; }
@@ -335,27 +496,29 @@ let EdgelessConnectorLabelEditor = (() => {
             super(...arguments);
             this._isComposition = false;
             this._keeping = false;
+            this._removing = false;
             this._resizeObserver = null;
             this._updateLabelRect = () => {
-                const { connector, isConnected } = this;
+                const { connector, isConnected, which } = this;
                 if (!connector || !isConnected)
                     return;
                 if (!this.inlineEditorContainer)
                     return;
                 const newWidth = this.inlineEditorContainer.scrollWidth;
                 const newHeight = this.inlineEditorContainer.scrollHeight;
-                const center = connector.getPointByOffsetDistance(connector.labelOffset.distance);
-                const bounds = Bound.fromCenter(center, newWidth, newHeight);
-                const labelXYWH = bounds.toXYWH();
-                if (!connector.labelXYWH ||
-                    labelXYWH.some((p, i) => !almostEqual(p, connector.labelXYWH[i]))) {
+                const labelXYWH = which === 'center'
+                    ? Bound.fromCenter(connector.getPointByOffsetDistance(connector.labelOffset.distance), newWidth, newHeight).toXYWH()
+                    : endLabelRect(connector, which, newWidth, newHeight);
+                const current = connectorLabelXYWH(connector, which);
+                if (!current || labelXYWH.some((p, i) => !almostEqual(p, current[i]))) {
                     this.crud.updateElement(connector.id, {
-                        labelXYWH,
+                        [this.fields.xywh]: labelXYWH,
                     });
                 }
             };
             this.#connector_accessor_storage = __runInitializers(this, _connector_initializers, void 0);
-            this.#std_accessor_storage = (__runInitializers(this, _connector_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            this.#which_accessor_storage = (__runInitializers(this, _connector_extraInitializers), __runInitializers(this, _which_initializers, 'center'));
+            this.#std_accessor_storage = (__runInitializers(this, _which_extraInitializers), __runInitializers(this, _std_initializers, void 0));
             this.#richText_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _richText_initializers, void 0));
             __runInitializers(this, _richText_extraInitializers);
         }