@formicoidea/labre-core 0.41.0 → 0.43.1

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

@@ -1,10 +1,35 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
 import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../affine-model/index.js';
-import { getBezierParameters } from '../../global/gfx/index.js';
+import { getBezierParameters, } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
-import { isConnectorWithLabel } from '../connector-manager.js';
-import { DEFAULT_ARROW_SIZE, getArrowOptions, renderArrow, renderCircle, renderDiamond, renderTriangle, } from './utils.js';
+import { isConnectorWithEndLabel, isConnectorWithLabel, } from '../connector-manager.js';
+import { DEFAULT_ARROW_SIZE, getArrowOptions, HOLLOW_HEAD_FILL, renderArrow, renderCircle, renderDiamond, renderTriangle, } from './utils.js';
+/** The captions this connector paints, in the order they are drawn. */
+function paintedLabels(model) {
+    const labels = [];
+    if (isConnectorWithLabel(model)) {
+        const { text, labelXYWH, labelStyle, labelConstraints } = model;
+        labels.push({
+            text: text,
+            xywh: labelXYWH,
+            style: labelStyle,
+            constraints: labelConstraints,
+        });
+    }
+    for (const end of ['source', 'target']) {
+        if (!isConnectorWithEndLabel(model, end))
+            continue;
+        const connectorModel = model;
+        labels.push({
+            text: connectorModel.endLabelText(end),
+            xywh: connectorModel.endLabelXYWH(end),
+            style: connectorModel.labelStyle,
+            constraints: connectorModel.labelConstraints,
+        });
+    }
+    return labels;
+}
 export const connector = (model, ctx, matrix, renderer, rc) => {
     const { mode, path: points, strokeStyle, frontEndpointStyle, rearEndpointStyle, strokeWidth, } = model;
     // points might not be build yet in some senarios
@@ -13,29 +38,39 @@ export const connector = (model, ctx, matrix, renderer, rc) => {
         return;
     }
     ctx.setTransform(matrix);
-    const hasLabel = isConnectorWithLabel(model);
-    let dx = 0;
-    let dy = 0;
-    if (hasLabel) {
+    const labels = paintedLabels(model);
+    // Each label's box, expressed relative to the element's own origin — the
+    // frame both the clip rects and the per-label transforms are written in.
+    let offsets = [];
+    if (labels.length) {
         ctx.save();
-        const { deserializedXYWH, labelXYWH } = model;
+        const { deserializedXYWH } = model;
         const [x, y, w, h] = deserializedXYWH;
-        const [lx, ly, lw, lh] = labelXYWH;
         const offset = DEFAULT_ARROW_SIZE * strokeWidth;
-        dx = lx - x;
-        dy = ly - y;
+        offsets = labels.map(label => [label.xywh[0] - x, label.xywh[1] - y]);
+        // One subtracted rect PER label: `evenodd` over the element rect and the
+        // caption rects leaves the stroke everywhere except under a caption, so a
+        // multiplicity beside an end punches the line exactly as the centre name
+        // always has.
         const path = new Path2D();
         path.rect(-offset / 2, -offset / 2, w + offset, h + offset);
-        path.rect(dx - 3 - 0.5, dy - 3 - 0.5, lw + 6 + 1, lh + 6 + 1);
+        labels.forEach((label, index) => {
+            const [dx, dy] = offsets[index];
+            const [, , lw, lh] = label.xywh;
+            path.rect(dx - 3 - 0.5, dy - 3 - 0.5, lw + 6 + 1, lh + 6 + 1);
+        });
         ctx.clip(path, 'evenodd');
     }
     const strokeColor = renderer.getColorValue(model.stroke, DefaultTheme.connectorColor, true);
     renderPoints(model, ctx, rc, points, strokeStyle === 'dash', mode === ConnectorMode.Curve, strokeColor);
     renderEndpoint(model, points, ctx, rc, 'Front', frontEndpointStyle, strokeColor);
     renderEndpoint(model, points, ctx, rc, 'Rear', rearEndpointStyle, strokeColor);
-    if (hasLabel) {
+    if (labels.length) {
         ctx.restore();
-        renderLabel(model, ctx, matrix.translate(dx, dy), renderer);
+        labels.forEach((label, index) => {
+            const [dx, dy] = offsets[index];
+            renderLabel(label, ctx, matrix.translate(dx, dy), renderer);
+        });
     }
 };
 export const ConnectorElementRendererExtension = ElementRendererExtension('connector', connector);
@@ -93,6 +128,13 @@ function renderPoints(model, ctx, rc, points, dash, curve, stroke) {
 }
 function renderEndpoint(model, location, ctx, rc, end, style, stroke) {
     const arrowOptions = getArrowOptions(end, model, stroke);
+    // No `default` on purpose: `PointStyle` is a persisted, append-only enum, so
+    // a build older than a member paints no head rather than throwing or drawing
+    // a wrong one. See the enum's docblock in `@labre/affine-model`.
+    //
+    // The hollow spread lives inside its own case: this runs once per endpoint
+    // per frame, and a solid head — or `None`, the default on the front of every
+    // connector — should not allocate an options object it never reads.
     switch (style) {
         case 'Arrow':
             renderArrow(location, ctx, rc, arrowOptions);
@@ -100,23 +142,42 @@ function renderEndpoint(model, location, ctx, rc, end, style, stroke) {
         case 'Triangle':
             renderTriangle(location, ctx, rc, arrowOptions);
             break;
+        case 'TriangleHollow':
+            renderTriangle(location, ctx, rc, {
+                ...arrowOptions,
+                fillColor: HOLLOW_HEAD_FILL,
+            });
+            break;
         case 'Circle':
             renderCircle(location, ctx, rc, arrowOptions);
             break;
         case 'Diamond':
             renderDiamond(location, ctx, rc, arrowOptions);
             break;
+        case 'DiamondHollow':
+            renderDiamond(location, ctx, rc, {
+                ...arrowOptions,
+                fillColor: HOLLOW_HEAD_FILL,
+            });
+            break;
     }
 }
-function renderLabel(model, ctx, matrix, renderer) {
-    const { text, labelXYWH, labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, labelConstraints: { hasMaxWidth, maxWidth }, } = model;
+/**
+ * Paints ONE caption at the origin of `matrix`.
+ *
+ * Takes a label rather than the connector: the centre name and the two end
+ * labels are the same drawing, and the only thing that told them apart was
+ * which pair of fields the function reached into.
+ */
+function renderLabel(label, ctx, matrix, renderer) {
+    const { text, xywh, style: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign }, constraints: { hasMaxWidth, maxWidth }, } = label;
     const font = getFontString({
         fontStyle,
         fontWeight,
         fontSize,
         fontFamily,
     });
-    const [, , w, h] = labelXYWH;
+    const [, , w, h] = xywh;
     const cx = w / 2;
     const cy = h / 2;
     ctx.setTransform(matrix);

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

@@ -3,6 +3,17 @@ import { type ConnectorElementModel, ConnectorMode, type LocalConnectorElementMo
 import type { BezierCurveParameters, IVec, PointLocation } from '../../global/gfx/index.js';
 type ConnectorEnd = 'Front' | 'Rear';
 export declare 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 declare const HOLLOW_HEAD_FILL: string;
 export declare function getArrowPoints(points: PointLocation[], size: number | undefined, mode: ConnectorMode, bezierParameters: BezierCurveParameters, endPoint?: ConnectorEnd, radians?: number): {
     points: (IVec | PointLocation)[];
 };
@@ -12,7 +23,12 @@ export declare function getDiamondPoints(point: PointLocation, size?: number, en
     points: (IVec | PointLocation)[];
 };
 export type ArrowOptions = ReturnType<typeof getArrowOptions>;
-export declare function getArrowOptions(end: ConnectorEnd, model: ConnectorElementModel | LocalConnectorElementModel, strokeColor: string): {
+/**
+ * @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 declare function getArrowOptions(end: ConnectorEnd, model: ConnectorElementModel | LocalConnectorElementModel, strokeColor: string, fillColor?: string): {
     end: ConnectorEnd;
     seed: number;
     mode: ConnectorMode;
@@ -32,7 +48,13 @@ export declare function getRcOptions(options: ArrowOptions): {
     fill: string;
     fillStyle: string;
 };
-export declare function renderRoundedPolygon(ctx: CanvasRenderingContext2D, points: IVec[], color: string, strokeWidth: number, fill?: boolean): void;
+/**
+ * @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 declare function renderRoundedPolygon(ctx: CanvasRenderingContext2D, points: IVec[], color: string, strokeWidth: number, fill?: boolean, fillColor?: string): void;
 export declare function renderArrow(points: PointLocation[], ctx: CanvasRenderingContext2D, rc: RoughCanvas, options: ArrowOptions): void;
 export declare function renderTriangle(points: PointLocation[], ctx: CanvasRenderingContext2D, rc: RoughCanvas, options: ArrowOptions): void;
 export declare function renderDiamond(points: PointLocation[], ctx: CanvasRenderingContext2D, rc: RoughCanvas, options: ArrowOptions): void;

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;
 }