@formicoidea/labre-core 0.41.0 → 0.43.1

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

@@ -34,6 +34,7 @@ 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 { 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';
@@ -51,37 +52,155 @@ 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(() => {
@@ -94,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 = [];
@@ -104,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 });
@@ -121,10 +245,11 @@ let EdgelessConnectorLabelEditor = (() => {
       transform-origin: center;
       z-index: 10;
       padding: ${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px;
-      border: ${BORDER_WIDTH}px solid var(--affine-primary-color, #1e96eb);
+      border: ${BORDER_WIDTH}px solid var(--affine-primary-color);
       background: var(--affine-background-primary-color, #fff);
       border-radius: 2px;
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
       box-sizing: border-box;
       overflow: visible;
 
@@ -154,6 +279,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;
         }
@@ -170,14 +319,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)
@@ -215,27 +365,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,
@@ -244,8 +386,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', () => {
@@ -256,7 +403,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);
         }
@@ -267,17 +423,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');
@@ -299,7 +456,7 @@ let EdgelessConnectorLabelEditor = (() => {
             })}
       >
         <rich-text
-          .yText=${connector.text}
+          .yText=${yText}
           .enableFormat=${false}
           style=${isEmpty
                 ? styleMap({
@@ -326,6 +483,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; }
@@ -336,27 +497,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);
         }

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

@@ -1,4 +1,13 @@
-import type { ConnectorElementModel } from '../../affine-model/index.js';
-import type { IVec } from '../../global/gfx/index.js';
-import type { BlockComponent } from '../../std/index.js';
-export declare function mountConnectorLabelEditor(connector: ConnectorElementModel, edgeless: BlockComponent, point?: IVec): void;
+/**
+ * The barrel's door onto the label editor.
+ *
+ * It used to carry a SECOND copy of `mountConnectorLabelEditor`, byte-alike
+ * with the one in `edgeless-connector-label-editor.ts` — and since this file is
+ * what `text/index.ts` re-exports, the toolbar and the keyboard reached this
+ * copy while the connector view's double-click imported the other one directly.
+ * Two bodies, one behaviour, and no way to add the per-end selector
+ * (`docs/adr/0018` phase 2) to both at once without adding it twice.
+ *
+ * One body now lives next door; this file only forwards it.
+ */
+export * from './edgeless-connector-label-editor.js';

package/dist/_pkgs/affine-gfx-connector/text/text.js

@@ -1,44 +1,13 @@
-import { DefaultTool, EdgelessCRUDIdentifier, } from '../../affine-block-surface/index.js';
-import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
-import { Bound } from '../../global/gfx/index.js';
-import { GfxControllerIdentifier } from '../../std/gfx/index.js';
-import * as Y from 'yjs';
-import { EdgelessConnectorLabelEditor } from './edgeless-connector-label-editor.js';
-export function mountConnectorLabelEditor(connector, edgeless, point) {
-    const mountElm = edgeless.querySelector('.edgeless-mount-point');
-    if (!mountElm) {
-        throw new BlockSuiteError(ErrorCode.ValueNotExists, "edgeless block's mount point does not exist");
-    }
-    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 editor = new EdgelessConnectorLabelEditor();
-    editor.connector = connector;
-    mountElm.append(editor);
-    editor.updateComplete
-        .then(() => {
-        editor.inlineEditor?.focusEnd();
-    })
-        .catch(console.error);
-}
+/**
+ * The barrel's door onto the label editor.
+ *
+ * It used to carry a SECOND copy of `mountConnectorLabelEditor`, byte-alike
+ * with the one in `edgeless-connector-label-editor.ts` — and since this file is
+ * what `text/index.ts` re-exports, the toolbar and the keyboard reached this
+ * copy while the connector view's double-click imported the other one directly.
+ * Two bodies, one behaviour, and no way to add the per-end selector
+ * (`docs/adr/0018` phase 2) to both at once without adding it twice.
+ *
+ * One body now lives next door; this file only forwards it.
+ */
+export * from './edgeless-connector-label-editor.js';

package/dist/_pkgs/affine-gfx-connector/toolbar/config.d.ts

@@ -1,4 +1,60 @@
+import { PointStyle } from '../../affine-model/index.js';
 import { type ToolbarContext, type ToolbarGenericAction } from '../../affine-shared/services/index.js';
+/**
+ * Every `PointStyle` must appear in BOTH lists.
+ *
+ * `renderMenu` paints the menu's trigger with
+ * `renderCurrentMenuItemWith(items, currentValue, 'icon')`, which returns
+ * `undefined` for a value the list does not carry — an unlisted style gives a
+ * blank button, so a connector created by a framework (or imported) with that
+ * head shows an empty endpoint control. There is no test that can catch a
+ * forgotten entry at the type level; `endpoint-style.unit.spec.ts` asserts the
+ * coverage instead.
+ */
+export declare const FRONT_ENDPOINT_STYLE_LIST: [{
+    readonly value: PointStyle.None;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Arrow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Triangle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.TriangleHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Circle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Diamond;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.DiamondHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}];
+export declare const REAR_ENDPOINT_STYLE_LIST: [{
+    readonly value: PointStyle.Diamond;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.DiamondHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Circle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Triangle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.TriangleHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Arrow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.None;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}];
 export declare const connectorToolbarConfig: {
     readonly actions: [{
         readonly id: "a.stroke-color";