@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/brush.js

@@ -1,10 +1,11 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { packColor, } from '../../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../../affine-components/color-picker/index.js';
 import { BrushElementModel, DefaultTheme, LineWidth, resolveColor, } from '../../../affine-model/index.js';
-import { ToolbarModuleExtension, } from '../../../affine-shared/services/index.js';
+import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
 import { BlockFlavourIdentifier } from '../../../std/index.js';
 import { html } from 'lit';
+import { BRUSH_LABEL_COLOR } from '../../translations.js';
 export const brushToolbarConfig = {
     actions: [
         {
@@ -71,15 +72,21 @@ export const brushToolbarConfig = {
                             break;
                     }
                 };
+                // A stroke drawn on a framework board opens on that framework's hues
+                // (`docs/adr/0027`); the editor palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-color-picker-button
             class="color"
-            .label="${'Color'}"
+            .label="${translateKey(ctx.std, ...BRUSH_LABEL_COLOR)}"
             .pick=${onPick}
             .color=${color}
             .theme=${theme}
             .originalColor=${originalColor}
             .enableCustomColor=${enableCustomColor}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
+            .std=${ctx.std}
           >
           </edgeless-color-picker-button>
         `;

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/highlighter.js

@@ -1,10 +1,11 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { adjustColorAlpha, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
+import { adjustColorAlpha, frameworkPaletteGroups, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
 import { DEFAULT_HIGHLIGHTER_LINE_WIDTH, DefaultTheme, HIGHLIGHTER_LINE_WIDTHS, HighlighterElementModel, resolveColor, } from '../../../affine-model/index.js';
-import { ToolbarModuleExtension, } from '../../../affine-shared/services/index.js';
+import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
 import { BlockFlavourIdentifier } from '../../../std/index.js';
 import { html } from 'lit';
+import { BRUSH_LABEL_COLOR } from '../../translations.js';
 const trackBaseProps = {
     category: 'highlighter',
 };
@@ -81,17 +82,23 @@ export const highlighterToolbarConfig = {
                         control: 'color picker',
                     });
                 };
+                // A highlight drawn over a framework board opens on that framework's
+                // hues (`docs/adr/0027`); the short stroke palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.StrokeColorShortPalettes);
                 return html `
           <edgeless-color-picker-button
             .colorPanelClass="${'one-way small'}"
-            .label="${'Color'}"
+            .label="${translateKey(ctx.std, ...BRUSH_LABEL_COLOR)}"
             .pick=${onPick}
             .color=${color}
             .theme=${theme}
             .originalColor=${originalColor}
             .palettes=${DefaultTheme.StrokeColorShortPalettes}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .shouldKeepColor=${true}
             .enableCustomColor=${false}
+            .std=${ctx.std}
           >
           </edgeless-color-picker-button>
         `;

package/dist/_pkgs/affine-gfx-brush/translations.d.ts

@@ -0,0 +1,17 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, joined into `PACKAGE_WORDINGS` in
+ * `@labre/affine/translations` — see that file and
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ *
+ * `senior-tool.ts`'s own `name: 'Pen'` is NOT here: `SeniorTool.labelKey`
+ * exists only for a framework's own button — the core tools (note, shape,
+ * template, pen…) declare no framework descriptor and therefore no key, by
+ * design (`packages/affine/widgets/edgeless-toolbar/src/extension/index.ts`).
+ */
+export declare const BRUSH_TOOLTIP_ERASER: ChromeWording;
+export declare const BRUSH_TOOLTIP_PEN: ChromeWording;
+export declare const BRUSH_TOOLTIP_HIGHLIGHTER: ChromeWording;
+/** An alias (L7 dedupe): the same word as {@link COLOR_LABEL}, one key. */
+export declare const BRUSH_LABEL_COLOR: ChromeWording;
+export declare const BRUSH_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-gfx-brush/translations.js

@@ -0,0 +1,30 @@
+import { COLOR_LABEL } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, joined into `PACKAGE_WORDINGS` in
+ * `@labre/affine/translations` — see that file and
+ * `packages/affine/shared/src/services/translation-service/README.md`.
+ *
+ * `senior-tool.ts`'s own `name: 'Pen'` is NOT here: `SeniorTool.labelKey`
+ * exists only for a framework's own button — the core tools (note, shape,
+ * template, pen…) declare no framework descriptor and therefore no key, by
+ * design (`packages/affine/widgets/edgeless-toolbar/src/extension/index.ts`).
+ */
+export const BRUSH_TOOLTIP_ERASER = [
+    'com.labre.brush.tooltip.eraser',
+    'Eraser',
+];
+export const BRUSH_TOOLTIP_PEN = [
+    'com.labre.brush.tooltip.pen',
+    'Pen',
+];
+export const BRUSH_TOOLTIP_HIGHLIGHTER = [
+    'com.labre.brush.tooltip.highlighter',
+    'Highlighter',
+];
+/** An alias (L7 dedupe): the same word as {@link COLOR_LABEL}, one key. */
+export const BRUSH_LABEL_COLOR = COLOR_LABEL;
+export const BRUSH_WORDINGS = [
+    BRUSH_TOOLTIP_ERASER,
+    BRUSH_TOOLTIP_PEN,
+    BRUSH_TOOLTIP_HIGHLIGHTER,
+];

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

@@ -1,5 +1,5 @@
 import { AStarRunner, Overlay } from '../affine-block-surface/index.js';
-import { type BrushElementModel, type Connection, ConnectorElementModel, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
+import { type BrushElementModel, type Connection, ConnectorElementModel, type ConnectorLabelEnd, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
 import type { IBound, IVec } from '../global/gfx/index.js';
 import { Bound, PointLocation } from '../global/gfx/index.js';
 import type { BlockStdScope } from '../std/index.js';
@@ -26,6 +26,14 @@ export declare function isCenterAnchorEligible(ele: GfxModel): boolean;
  */
 export declare function isCenterAnchorEnabled(std: BlockStdScope): boolean;
 export declare function isConnectorWithLabel(model: GfxModel | GfxLocalElementModel): boolean;
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export declare function isConnectorWithEndLabel(model: GfxModel | GfxLocalElementModel, end: ConnectorLabelEnd): boolean;
 export declare function calculateNearestLocation(point: IVec, bounds: IBound, locations?: IVec[], shortestDistance?: number): IVec;
 export declare function isConnectorAndBindingsAllSelected(connector: ConnectorElementModel | LocalConnectorElementModel, selected: GfxModel[]): boolean;
 export declare function getAnchors(ele: GfxModel, includeCenterAnchor?: boolean): {

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

@@ -160,6 +160,46 @@ function computePerimeterPointForCenterAnchor(connectable, centerPoint, otherPoi
 export function isConnectorWithLabel(model) {
     return model instanceof ConnectorElementModel && model.hasLabel();
 }
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export function isConnectorWithEndLabel(model, end) {
+    return model instanceof ConnectorElementModel && model.hasEndLabel(end);
+}
+/**
+ * Translates one end label's box by how far its endpoint moved, so the label
+ * keeps the position the author gave it RELATIVE to that end.
+ *
+ * `ConnectorPathGenerator.updatePath` is the only caller: the label follows the
+ * end on every re-route, and on nothing else.
+ */
+function followEndpoint(model, end, previousPath) {
+    const box = model.endLabelXYWH(end);
+    if (!box || !model.hasEndLabel(end))
+        return;
+    const nextPath = model.absolutePath;
+    if (nextPath.length === 0 || previousPath.length === 0)
+        return;
+    const endpointOf = (path) => end === 'source' ? path[0] : path[path.length - 1];
+    const from = endpointOf(previousPath);
+    const to = endpointOf(nextPath);
+    const dx = to[0] - from[0];
+    const dy = to[1] - from[1];
+    if (dx === 0 && dy === 0)
+        return;
+    const [x, y, w, h] = box;
+    const moved = [x + dx, y + dy, w, h];
+    if (end === 'source') {
+        model.sourceLabelXYWH = moved;
+    }
+    else {
+        model.targetLabelXYWH = moved;
+    }
+}
 export function calculateNearestLocation(point, bounds, locations = ConnectorEndpointLocations, shortestDistance = Number.POSITIVE_INFINITY) {
     const { x, y, w, h } = bounds;
     return locations
@@ -1000,6 +1040,10 @@ export class ConnectorPathGenerator extends PathGenerator {
         const relativePoints = points.map((p) => {
             return p.setVec(Vec.sub(p, [bound.x, bound.y]));
         });
+        // Captured before the assignment below rebuilds it: the end labels are
+        // re-anchored by how far THEIR endpoint travelled, which is only knowable
+        // against the path this call replaces.
+        const previousPath = connector.absolutePath;
         connector.updatingPath = true;
         // the property assignment order matters
         connector.xywh = bound.serialize();
@@ -1015,6 +1059,23 @@ export class ConnectorPathGenerator extends PathGenerator {
                 model.labelXYWH = [cx - w / 2, cy - h / 2, w, h];
             }
         }
+        // The end labels follow THEIR OWN endpoint, not the connector's centre.
+        // Dragging one of the two nodes moves one end and leaves the other where
+        // it was: re-deriving both boxes from the offset distance (what the centre
+        // label does) would recentre them, and translating both by the element's
+        // delta would slide the far one off its line. Translating each by its
+        // endpoint's delta is the only rule under which a `0..*` typed beside an
+        // end stays beside that end — and the only one that preserves a box the
+        // author dragged somewhere else. Same persistence gate as above: these are
+        // `@field()`s too, so a watching peer must not write them.
+        if (connector instanceof ConnectorElementModel) {
+            const mayPersist = (options?.persistLabelXYWH ?? true) &&
+                !connector.surface?.store?.readonly;
+            if (mayPersist) {
+                followEndpoint(connector, 'source', previousPath);
+                followEndpoint(connector, 'target', previousPath);
+            }
+        }
         connector.updatingPath = false;
     }
     _computeStartEndPoint(connector) {

package/dist/_pkgs/affine-gfx-connector/direction/invert-direction.d.ts

@@ -1,5 +1,5 @@
 import type { ConnectorElementModel } from '../../affine-model/index.js';
-import type { AnyCommandDescriptor, BlockStdScope } from '../../std/index.js';
+import type { AnyCommandDescriptor, BlockStdScope, CommandDescriptor } from '../../std/index.js';
 import { z } from 'zod';
 import { type TypedEdge } from './typed-edge.js';
 /**
@@ -64,6 +64,13 @@ export declare function invertibleEdges(std: BlockStdScope, elementIds?: string[
 export declare function invertEdge(model: ConnectorElementModel): void;
 /** The registered id, so a toolbar entry can invoke it rather than copy it. */
 export declare const INVERT_EDGE_DIRECTION = "edge.invert-direction";
+/**
+ * Exported (not just registered through {@link edgeDirectionCommands}) so the
+ * contextual-toolbar entry can read its `labelKey` / `labelFallback` straight
+ * off the descriptor — see `toolbar/config.ts`'s `b.invert-direction` — rather
+ * than restating the wording as a second literal.
+ */
+export declare const invertEdgeDirection: CommandDescriptor<InvertEdgeDirectionParams>;
 /**
  * The registry's element type erases the parameter contract, and `run`
  * re-validates with the zod schema rather than trusting the static type — what

package/dist/_pkgs/affine-gfx-connector/direction/invert-direction.js

@@ -105,7 +105,13 @@ export function invertEdge(model) {
 }
 /** The registered id, so a toolbar entry can invoke it rather than copy it. */
 export const INVERT_EDGE_DIRECTION = 'edge.invert-direction';
-const invertEdgeDirection = {
+/**
+ * Exported (not just registered through {@link edgeDirectionCommands}) so the
+ * contextual-toolbar entry can read its `labelKey` / `labelFallback` straight
+ * off the descriptor — see `toolbar/config.ts`'s `b.invert-direction` — rather
+ * than restating the wording as a second literal.
+ */
+export const invertEdgeDirection = {
     id: INVERT_EDGE_DIRECTION,
     owner: 'core',
     kind: 'action',

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

@@ -1,5 +1,11 @@
 import type { DomRenderer } from '../../../affine-block-surface/index.js';
-import { type ConnectorElementModel } from '../../../affine-model/index.js';
+import { type ConnectorElementModel, type PointStyle } from '../../../affine-model/index.js';
+/**
+ * Exported for `src/__tests__/endpoint-style.unit.spec.ts`: the hollow heads are
+ * defined by the fact that `fill` and `stroke` differ, which is only observable
+ * on the marker node this builds.
+ */
+export declare function createArrowMarker(id: string, style: PointStyle, color: string, strokeWidth: number, isStart?: boolean): SVGMarkerElement;
 /**
  * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
  * This function is intended to be registered via the DomElementRendererExtension.

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

@@ -1,8 +1,26 @@
 import { ConnectorMode, DefaultTheme, } from '../../../affine-model/index.js';
 import { PointLocation, SVGPathBuilder } from '../../../global/gfx/index.js';
 import { isConnectorWithLabel } from '../../connector-manager.js';
-import { DEFAULT_ARROW_SIZE } from '../utils.js';
+import { DEFAULT_ARROW_SIZE, HOLLOW_HEAD_FILL } from '../utils.js';
 const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * The outline width of a hollow head, in the marker's own `viewBox` units.
+ *
+ * Pinned rather than inherited. A marker declares `markerUnits="strokeWidth"`
+ * and a `0 0 20 20` viewBox mapped onto `markerWidth`, so one viewBox unit is
+ * already a fixed fraction of the connector's `strokeWidth` — the outline
+ * scales with the line without this attribute existing, and `1` is exactly the
+ * SVG default the solid heads get implicitly today. Nothing changes visually.
+ *
+ * It is set only on the hollow heads because they are the only ones where the
+ * value is observable: a solid head paints `fill` and `stroke` in the same
+ * colour, so its outline is invisible either way. On a hollow head the outline
+ * IS the head. Leaving it to a default that a future `stroke-width` on the
+ * `<svg>`, the `<defs>`, or the marker itself would override means the UML
+ * heads could silently thicken or vanish; the solid twins would not notice.
+ */
+const HOLLOW_HEAD_STROKE_WIDTH = 1;
+const LABEL_SLOTS = ['center', 'source', 'target'];
 /**
  * The nodes a connector host already owns, kept across renders. Rebuilding the
  * whole `<svg>` subtree on every frame allocated one element per connector per
@@ -46,7 +64,12 @@ function createConnectorPath(points, mode) {
     }
     return pathBuilder.build();
 }
-function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
+/**
+ * Exported for `src/__tests__/endpoint-style.unit.spec.ts`: the hollow heads are
+ * defined by the fact that `fill` and `stroke` differ, which is only observable
+ * on the marker node this builds.
+ */
+export function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     const marker = document.createElementNS(SVG_NS, 'marker');
     const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
     marker.id = id;
@@ -57,6 +80,8 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     marker.setAttribute('markerHeight', String(size));
     marker.setAttribute('orient', 'auto');
     marker.setAttribute('markerUnits', 'strokeWidth');
+    // No `default`, as on the canvas side: an unknown persisted `PointStyle`
+    // yields an empty marker rather than a wrong head.
     switch (style) {
         case 'Arrow': {
             const path = document.createElementNS(SVG_NS, 'path');
@@ -74,6 +99,15 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             marker.append(path);
             break;
         }
+        case 'TriangleHollow': {
+            const path = document.createElementNS(SVG_NS, 'path');
+            path.setAttribute('d', isStart ? 'M 20 7 L 12 10 L 20 13 Z' : 'M 0 7 L 8 10 L 0 13 Z');
+            path.setAttribute('fill', HOLLOW_HEAD_FILL);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(HOLLOW_HEAD_STROKE_WIDTH));
+            marker.append(path);
+            break;
+        }
         case 'Circle': {
             const circle = document.createElementNS(SVG_NS, 'circle');
             circle.setAttribute('cx', '10');
@@ -92,6 +126,15 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             marker.append(path);
             break;
         }
+        case 'DiamondHollow': {
+            const path = document.createElementNS(SVG_NS, 'path');
+            path.setAttribute('d', 'M 10 6 L 14 10 L 10 14 L 6 10 Z');
+            path.setAttribute('fill', HOLLOW_HEAD_FILL);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(HOLLOW_HEAD_STROKE_WIDTH));
+            marker.append(path);
+            break;
+        }
     }
     return marker;
 }
@@ -119,29 +162,53 @@ function getRetainedConnectorDom(element) {
         svg,
         defs,
         path,
-        label: null,
+        labels: {},
     };
     retainedConnectorDom.set(element, retained);
     return retained;
 }
-function getOrCreateLabelElement(retained) {
-    if (retained.label) {
-        return retained.label;
+function getOrCreateLabelElement(retained, slot) {
+    const existing = retained.labels[slot];
+    if (existing) {
+        return existing;
     }
     const label = document.createElement('div');
-    retained.svg.insertAdjacentElement('afterend', label);
-    retained.label = label;
+    // Appended after the `<svg>` rather than inserted directly behind it, so the
+    // three captions land in slot order instead of in reverse creation order.
+    // Every one of them is absolutely positioned, so document order is a
+    // debugging convenience, not a layout decision.
+    (retained.svg.parentElement ?? retained.svg).append(label);
+    retained.labels[slot] = label;
     return label;
 }
-function renderConnectorLabel(model, retained, renderer, zoom) {
-    if (!isConnectorWithLabel(model) || !model.labelXYWH) {
-        retained.label?.remove();
-        retained.label = null;
+/**
+ * The text and box one slot paints, or `null` when that caption is absent.
+ *
+ * The DOM twin of `paintedLabels` on the canvas side: same three slots, same
+ * `labelStyle` shared by all three, so the two renderers cannot disagree about
+ * what a connector is showing.
+ */
+function labelContent(model, slot) {
+    if (slot === 'center') {
+        return isConnectorWithLabel(model) && model.labelXYWH
+            ? { text: model.text?.toString() ?? '', xywh: model.labelXYWH }
+            : null;
+    }
+    const xywh = model.endLabelXYWH(slot);
+    return model.hasEndLabel(slot) && xywh
+        ? { text: model.endLabelText(slot)?.toString() ?? '', xywh }
+        : null;
+}
+function renderConnectorLabel(model, retained, renderer, zoom, slot) {
+    const content = labelContent(model, slot);
+    if (!content) {
+        retained.labels[slot]?.remove();
+        delete retained.labels[slot];
         return;
     }
-    const [lx, ly, lw, lh] = model.labelXYWH;
+    const [lx, ly, lw, lh] = content.xywh;
     const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, } = model;
-    const labelElement = getOrCreateLabelElement(retained);
+    const labelElement = getOrCreateLabelElement(retained, slot);
     labelElement.style.position = 'absolute';
     labelElement.style.left = `${lx * zoom}px`;
     labelElement.style.top = `${ly * zoom}px`;
@@ -168,7 +235,7 @@ function renderConnectorLabel(model, retained, renderer, zoom) {
     labelElement.style.whiteSpace = 'pre-wrap';
     labelElement.style.wordWrap = 'break-word';
     // Add text content
-    labelElement.textContent = model.text ? model.text.toString() : '';
+    labelElement.textContent = content.text;
 }
 /**
  * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
@@ -264,6 +331,9 @@ export const connectorDomRenderer = (model, element, renderer) => {
     element.style.height = `${model.h * zoom}px`;
     element.style.overflow = 'visible';
     element.style.pointerEvents = 'none';
-    // Render label if present
-    renderConnectorLabel(model, retained, renderer, zoom);
+    // Render each caption that is present — the centre name and the two end
+    // labels — and drop the node of any that is not.
+    for (const slot of LABEL_SLOTS) {
+        renderConnectorLabel(model, retained, renderer, zoom, slot);
+    }
 };

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;