@meltemi/diagrams-editor 1.9.0 → 1.10.0

package/dist/inspector.js

@@ -1,10 +1,10 @@
-import { ARROWHEADS, BOX_SHAPES, CORNERS, BUILT_IN_THEMES, DEFAULT_THEME, FONT_WEIGHTS, TEXT_ALIGNS, DIRECTIONS, ELEMENT_ONLY_PROPERTIES, ICON_POSITIONS, LABEL_POSITIONS, LAYOUT_MODES, LINE_STYLES, PATTERNS, PORTS, PRESETS, PROFILES, RELATION_ONLY_PROPERTIES, ROUTINGS, STYLE_PROPERTIES, THEME_COLOR_TOKENS, takesRotation, takesShape, } from "@meltemi/diagrams-model";
+import { ARROWHEADS, BOX_SHAPES, CORNERS, BUILT_IN_THEMES, DEFAULT_THEME, FONT_WEIGHTS, TEXT_ALIGNS, VERTICAL_ALIGNS, DIRECTIONS, ELEMENT_ONLY_PROPERTIES, ICON_POSITIONS, LABEL_POSITIONS, LAYOUT_MODES, LINE_STYLES, PATTERNS, PORTS, PRESETS, PROFILES, RELATION_ONLY_PROPERTIES, ROUTINGS, STYLE_PROPERTIES, THEME_COLOR_TOKENS, takesRotation, takesShape, } from "@meltemi/diagrams-model";
 import { CORNERED_SHAPES, StyleResolver } from "@meltemi/diagrams-layout";
 import { DEFAULT_DURATIONS, themeDurations } from "@meltemi/diagrams-motion";
 import { diagramView } from "./analysis.js";
 import { interiorOf, steadyGroups } from "./arrange.js";
 import { c4DiagramFields, c4ElementFields, c4FieldOperations, c4RelationFields } from "./c4.js";
-import { effectFields, effectLabel, effectOperations, effectsFor } from "./effects.js";
+import { effectFields, effectLabel, effectOperations, effectsFor, selectionAfter, } from "./effects.js";
 import { drawnIconSize, iconChoice, iconKind } from "./icons.js";
 import { messages } from "./messages/index.js";
 import { freshRelationId, namedNotice, namedRelation, styleTargets } from "./targets.js";
@@ -97,12 +97,27 @@ const STYLE_FIELDS = [
         glyphs: "shape",
         elements: (kind) => takesShape(kind),
     },
+    // Free boxes and texts: where the text sits across; boxes also where it sits down the shape.
+    // The canvas draws the two as one grid of cells.
+    {
+        name: "textAlign",
+        type: "enum",
+        options: TEXT_ALIGNS,
+        glyphs: "textAlign",
+        elements: (kind, diagram) => diagram.type === "free" && (kind === "box" || kind === "text"),
+    },
+    {
+        name: "verticalAlign",
+        type: "enum",
+        options: VERTICAL_ALIGNS,
+        glyphs: "verticalAlign",
+        elements: (kind, diagram) => diagram.type === "free" && kind === "box",
+    },
 ];
 /** Style fields of free diagrams: text. */
 const FREE_STYLE_FIELDS = [
     { name: "fontSize", type: "number" },
     { name: "fontWeight", type: "enum", options: FONT_WEIGHTS.map(String) },
-    { name: "textAlign", type: "enum", options: TEXT_ALIGNS },
 ];
 /** The word for a kind in titles: the interface's, or the kind itself for declared types. */
 function kindName(kind) {
@@ -127,7 +142,10 @@ const shown = (value) => value === undefined
         ? value.slice(1)
         : value;
 function styleFields(diagram, targets) {
-    const kinds = new Set(targets.map((t) => t.kind));
+    // Free lines take a relation's properties and none of a box's.
+    const isLine = (t) => t.kind === "element" && diagram.elementsById.get(t.id)?.kind === "line";
+    const lines = targets.length > 0 && targets.every(isLine);
+    const kinds = new Set(targets.map((t) => (isLine(t) ? "relation" : t.kind)));
     const styles = targets.map((t) => writtenStyle(diagram, t.id, t.kind));
     const fields = diagram.type === "free" ? [...STYLE_FIELDS, ...FREE_STYLE_FIELDS] : STYLE_FIELDS;
     const labels = messages().style;
@@ -137,10 +155,11 @@ function styleFields(diagram, targets) {
         !(kinds.has("relation") && ELEMENT_ONLY_PROPERTIES.includes(f.name)) &&
         !(diagram.type === "sequence" && NOT_IN_SEQUENCES.has(f.name)) &&
         (f.elements === undefined ||
-            targets.every((t) => {
-                const element = t.kind === "element" ? diagram.elementsById.get(t.id) : undefined;
-                return element !== undefined && f.elements(element.kind, diagram);
-            })))
+            (!lines &&
+                targets.every((t) => {
+                    const element = t.kind === "element" ? diagram.elementsById.get(t.id) : undefined;
+                    return element !== undefined && f.elements(element.kind, diagram);
+                }))))
         .map((f) => {
         const values = styles.map((s) => shown(s[f.name]));
         const same = values.every((v) => v === values[0]);
@@ -170,6 +189,11 @@ function withElementDefaults(fields, view, theme, ids) {
     const elements = ids.flatMap((id) => view.diagram.elementsById.get(id) ?? []);
     const shared = (values) => values.length > 0 && values.every((v) => v === values[0]) ? values[0] : undefined;
     const styles = new StyleResolver(theme, view.diagram);
+    // The styles the targets would take without their own `style` statements.
+    const inherited = new StyleResolver(theme, {
+        ...view.diagram,
+        styles: view.diagram.styles.filter((entry) => !ids.includes(entry.target)),
+    });
     const shapeOf = (e) => view.layout?.shapes?.get(e.id) ?? styles.element(e).shape ?? e.shape ?? "rounded";
     // The radius drawn without one written: the theme's on rounded boxes, notes and frames, the
     // group radius on groups, a person's or an agent's body radius, and none on the other corners.
@@ -200,8 +224,23 @@ function withElementDefaults(fields, view, theme, ids) {
     const centrePiece = (e) => iconKind(e.kind, view.diagram) && (iconShaped(e) || position(e) === "center");
     const some = elements.length > 0;
     const icon = shared(elements.map((e) => styles.element(e).icon ?? ""));
+    // Free lines: no head unless written, straight segments, the theme's corners.
+    const lines = some && elements.every((e) => e.kind === "line");
     const defaults = {
+        ...(lines
+            ? {
+                "style.arrowhead": "none",
+                "style.arrowtail": "none",
+                "style.routing": "polyline",
+                "style.corners": theme.corners,
+            }
+            : {}),
         "style.shape": shared(elements.map((e) => view.layout?.shapes?.get(e.id) ?? "rounded")),
+        // What applies without the targets' own statements (classes, rules), else a box's text
+        // centred in the middle of its shape and a free text's starting on the left: the alignment
+        // picker writes a cell's value only where it differs from this.
+        "style.textAlign": shared(elements.map((e) => inherited.element(e).textAlign ?? (e.kind === "text" ? "left" : "center"))),
+        "style.verticalAlign": shared(elements.map((e) => inherited.element(e).verticalAlign ?? "middle")),
         "style.radius": shared(elements.map((e) => String(radius(e)))),
         // A rule's or a class's angle, else upright.
         "style.rotation": shared(elements.map((e) => String(styles.element(e).rotation ?? 0))),
@@ -255,20 +294,23 @@ function withIcons(model, view, icons) {
 }
 /**
  * The relation's style fields with what applies without a written value: the theme's head at the
- * end (calls and replies in sequence diagrams), the end's head at the start of a two-way arrow,
- * the diagram's route kind and the theme's corners.
+ * end (calls and replies in sequence diagrams; none for a line), the end's head at the start of a
+ * two-way arrow, the diagram's route kind and the theme's corners.
  */
 function withRelationDefaults(fields, diagram, relation, theme) {
     const written = writtenStyle(diagram, relation.id ?? relation.key, "relation");
-    const endDefault = diagram.type === "sequence"
-        ? relation.line === "dashed" || relation.async
-            ? "open"
-            : "triangle"
-        : theme.arrowhead;
+    // A line (`--`, `---`) has no head at either end unless one is written.
+    const endDefault = relation.heads === "none"
+        ? "none"
+        : diagram.type === "sequence"
+            ? relation.line === "dashed" || relation.async
+                ? "open"
+                : "triangle"
+            : theme.arrowhead;
     const end = typeof written.arrowhead === "string" ? written.arrowhead : endDefault;
     const defaults = {
         "style.arrowhead": endDefault,
-        "style.arrowtail": relation.twoWay ? end : "none",
+        "style.arrowtail": relation.heads === "both" ? end : "none",
         "style.routing": diagram.properties.routing,
         "style.corners": theme.corners,
     };
@@ -276,11 +318,34 @@ function withRelationDefaults(fields, diagram, relation, theme) {
 }
 /** Kinds an element of a profile can become; icons, images and groups keep theirs. */
 function kindOptions(diagram, element) {
-    if (element.kind === "group" || element.kind === "icon" || element.kind === "image") {
+    if (element.kind === "group" ||
+        element.kind === "icon" ||
+        element.kind === "image" ||
+        element.kind === "line") {
         return [element.kind];
     }
+    if (element.kind === "note" && diagram.type !== "flow")
+        return [element.kind];
     return diagram.type === "free" ? ["box", "text"] : ["node", "decision", "data", "note", "tag"];
 }
+/**
+ * The element a note is attached to, as a picker of the diagram's other elements (the drawn
+ * entity paths in a C4 view), empty for none.
+ */
+function attachmentField(diagram, note) {
+    const targets = diagram.elements.filter((e) => e.id !== note.id &&
+        e.kind !== "line" &&
+        // A view attaches to the entities it draws.
+        (diagram.type !== "c4" || e.entity !== null));
+    return {
+        name: "attachedTo",
+        label: messages().fields.attachedTo,
+        type: "enum",
+        value: note.attachedTo,
+        placeholder: messages().placeholders.none,
+        options: targets.map((e) => e.id),
+    };
+}
 /**
  * The `layer` and `link` fields of free objects and of every element, and the group an element of
  * a flow or free diagram is declared in.
@@ -298,7 +363,7 @@ function identityFields(diagram, element) {
             placeholder: "main",
             options: diagram.properties.layers,
         });
-        if (element) {
+        if (element && element.kind !== "line") {
             // A group cannot go into itself or into a group it holds.
             const groups = diagram.elements.filter((e) => e.kind === "group" && e.id !== element.id && !e.groupPath.includes(element.id));
             // A flow node or a free box can become the container of what is drawn on it.
@@ -338,7 +403,8 @@ function identityFields(diagram, element) {
     }
     return fields;
 }
-function elementFields(view, element) {
+/** The place and the size of an element, written as `place` and `size` statements. */
+function geometryFields(view, element) {
     const diagram = view.diagram;
     const place = diagram.placement.find((p) => p.statement === "place" && p.target === element.id);
     const size = diagram.placement.find((p) => p.statement === "size" && p.target === element.id);
@@ -351,6 +417,71 @@ function elementFields(view, element) {
             y: round(box.y + box.height / 2 - (origin?.y ?? 0)),
         }
         : null;
+    const words = messages().fields;
+    return [
+        {
+            name: "x",
+            label: words.x,
+            type: "number",
+            value: place ? place.x : null,
+            ...(center ? { placeholder: String(center.x) } : {}),
+        },
+        {
+            name: "y",
+            label: words.y,
+            type: "number",
+            value: place ? place.y : null,
+            ...(center ? { placeholder: String(center.y) } : {}),
+        },
+        {
+            name: "w",
+            label: words.width,
+            type: "number",
+            value: size ? size.width : null,
+            ...(box ? { placeholder: String(round(box.width)) } : {}),
+        },
+        {
+            name: "h",
+            label: words.height,
+            type: "number",
+            value: size ? size.height : null,
+            ...(box ? { placeholder: String(round(box.height)) } : {}),
+        },
+    ];
+}
+/** The fields of a note of a C4 view: its own, and none of an entity's. */
+function viewNoteFields(view, element) {
+    const words = messages().fields;
+    return [
+        { name: "id", label: words.id, type: "id", value: element.id },
+        {
+            name: "kind",
+            label: words.kind,
+            type: "enum",
+            value: element.kind,
+            options: [element.kind],
+            readonly: true,
+        },
+        { name: "label", label: words.label, type: "text", value: element.label },
+        attachmentField(view.diagram, element),
+        {
+            name: "classes",
+            label: words.classes,
+            type: "classes",
+            value: element.classes.map((c) => c.name).join(", ") || null,
+        },
+        {
+            name: "url",
+            label: words.url,
+            type: "text",
+            value: element.url,
+            placeholder: "https://…",
+        },
+        ...geometryFields(view, element),
+    ];
+}
+function elementFields(view, element) {
+    const diagram = view.diagram;
     const ports = element.ports
         .map((p) => `${p.name} ${p.side}${Math.round(p.position * 100) === 50 ? "" : ` ${Math.round(p.position * 100)}%`}`)
         .join(", ");
@@ -370,6 +501,7 @@ function elementFields(view, element) {
             : element.kind === "image"
                 ? { name: "source", label: words.imageFile, type: "text", value: element.source }
                 : { name: "label", label: words.label, type: "text", value: element.label },
+        ...(element.kind === "note" ? [attachmentField(diagram, element)] : []),
         {
             name: "description",
             label: words.description,
@@ -384,6 +516,10 @@ function elementFields(view, element) {
         },
     ];
     fields.push(...identityFields(diagram, element));
+    // A free line is its points: no ports, no place, no size.
+    if (element.kind === "line") {
+        return [...fields, ...styleFields(diagram, [{ id: element.id, kind: "element" }])];
+    }
     if (element.kind !== "group")
         fields.push({
             name: "ports",
@@ -392,31 +528,7 @@ function elementFields(view, element) {
             value: ports || null,
             placeholder: "in west 30%, out east",
         });
-    fields.push({
-        name: "x",
-        label: words.x,
-        type: "number",
-        value: place ? place.x : null,
-        ...(center ? { placeholder: String(center.x) } : {}),
-    }, {
-        name: "y",
-        label: words.y,
-        type: "number",
-        value: place ? place.y : null,
-        ...(center ? { placeholder: String(center.y) } : {}),
-    }, {
-        name: "w",
-        label: words.width,
-        type: "number",
-        value: size ? size.width : null,
-        ...(box ? { placeholder: String(round(box.width)) } : {}),
-    }, {
-        name: "h",
-        label: words.height,
-        type: "number",
-        value: size ? size.height : null,
-        ...(box ? { placeholder: String(round(box.height)) } : {}),
-    });
+    fields.push(...geometryFields(view, element));
     return [...fields, ...styleFields(diagram, [{ id: element.id, kind: "element" }])];
 }
 function relationFields(view, relation) {
@@ -683,12 +795,26 @@ export function themeSwatches(theme) {
 }
 /** The built-in theme of the same family in the other scheme: `technical.dark` for `technical.light`. */
 export function counterpartTheme(name) {
-    const match = /^(technical|editorial|stage)\.(light|dark)$/.exec(name);
+    const match = /^(technical|editorial|stage|sketch)\.(light|dark)$/.exec(name);
     if (!match)
         return undefined;
     return `${match[1]}.${match[2] === "light" ? "dark" : "light"}`;
 }
-/** The strip's fields, in the order it shows them; the first `line` is the relation's arrow. */
+/** The effects in the order of the strip's toggles. */
+const EFFECT_ORDER = ["flow", "dash", "pulse", "trace"];
+/** The fields of an effect that is on, in the order of its card. */
+const EFFECT_PROPERTIES = [
+    "duration",
+    "repeat",
+    "delay",
+    "direction",
+    "particles",
+    "color",
+];
+/**
+ * The strip's fields, in the order it shows them; the first `line` is the relation's arrow. The
+ * style fields come first, then each effect's toggle with the fields of its card.
+ */
 const STRIP = [
     "theme",
     "style.fill",
@@ -704,22 +830,22 @@ const STRIP = [
     "style.radius",
     "style.rotation",
     "style.shape",
+    // Free boxes and texts: one grid of cells for the two.
+    "style.textAlign",
+    "style.verticalAlign",
     // For elements with an icon only.
     "style.iconPosition",
-    "effect.flow",
-    "effect.flow.duration",
-    "effect.dash",
-    "effect.dash.duration",
-    "effect.pulse",
-    "effect.pulse.duration",
-    "effect.trace",
-    "effect.trace.duration",
+    ...EFFECT_ORDER.flatMap((effect) => [
+        `effect.${effect}`,
+        ...EFFECT_PROPERTIES.map((property) => `effect.${effect}.${property}`),
+    ]),
 ];
 /**
  * Marks the fields of the style strip and puts them first: colours with the theme's swatches, the
  * line, width and arrowhead, the shape and, for elements with an icon (`iconed`), the icon's
- * position, the effects with their speed (the theme's default as placeholder), and, for the
- * diagram, the theme with its light or dark counterpart.
+ * position, the effects as toggles with every field of an effect that is on grouped under its
+ * toggle (`group`; the speed with the theme's default as placeholder, the colour with the
+ * swatches), and, for the diagram, the theme with its light or dark counterpart.
  */
 function withStrip(model, theme, themes, iconed) {
     const swatches = themeSwatches(theme);
@@ -733,14 +859,15 @@ function withStrip(model, theme, themes, iconed) {
     const fields = model.fields.map((field) => {
         if (!inStrip(field.name))
             return field;
-        const duration = /^effect\.(flow|dash|pulse|trace)\.duration$/.exec(field.name);
-        if (duration) {
-            const effect = duration[1];
-            return {
-                ...field,
-                section: "strip",
-                placeholder: String(durations[effect] ?? DEFAULT_DURATIONS[effect]),
-            };
+        // A field of an effect that is on belongs to the card of its toggle.
+        const grouped = /^(effect\.(flow|dash|pulse|trace))\.(\w+)$/.exec(field.name);
+        if (grouped) {
+            const effect = grouped[2];
+            const placed = { ...field, section: "strip", group: grouped[1] };
+            if (grouped[3] === "duration") {
+                return { ...placed, placeholder: String(durations[effect] ?? DEFAULT_DURATIONS[effect]) };
+            }
+            return field.type === "color" ? { ...placed, swatches } : placed;
         }
         if (field.type === "color")
             return { ...field, section: "strip", swatches };
@@ -823,7 +950,9 @@ function inspectFields(analysis, view, selection) {
                 title: titles.target(kindName(element.kind === "group" ? "boundary" : element.kind), id),
                 target: { kind: "element", ids: [id] },
                 fields: [
-                    ...c4ElementFields(diagram, element),
+                    ...(element.kind === "note" && element.entity === null
+                        ? viewNoteFields(view, element)
+                        : c4ElementFields(diagram, element)),
                     ...withElementDefaults(styleFields(diagram, [{ id, kind: "element" }]), view, effectiveTheme(analysis, view), [id]),
                     ...effectFields(diagram, id, "element"),
                 ],
@@ -833,12 +962,11 @@ function inspectFields(analysis, view, selection) {
         return {
             title: titles.relation(relation.id ?? `${relation.from} → ${relation.to}`),
             target: { kind: "relation", ids: [id] },
+            // Anonymous relations take styles and effects too: setting one names them in the model.
             fields: [
                 ...c4RelationFields(diagram, relation),
-                ...(relation.id
-                    ? withRelationDefaults(styleFields(diagram, [{ id: relation.id, kind: "relation" }]), diagram, relation, effectiveTheme(analysis, view))
-                    : []),
-                ...(relation.id ? effectFields(diagram, relation.id, "relation") : []),
+                ...withRelationDefaults(styleFields(diagram, [{ id: relation.id ?? relation.key, kind: "relation" }]), diagram, relation, effectiveTheme(analysis, view)),
+                ...effectFields(diagram, relation.id ?? relation.key, "relation"),
             ],
         };
     }
@@ -862,16 +990,16 @@ function inspectFields(analysis, view, selection) {
         }
         if (kind === "event") {
             const event = diagram.eventsByKey.get(id);
-            // Notes and fragments with an id take styles.
-            const styled = event.id !== null && (event.kind === "note" || event.kind === "fragment");
+            // Notes and fragments take styles and effects; setting one names an anonymous one.
+            const styled = event.kind === "note" || event.kind === "fragment";
             return {
                 // Fragment operators are notation and stay as written.
                 title: titles.target(event.kind === "fragment" ? event.operator : kindName(event.kind), event.id ?? ""),
                 target: { kind: "event", ids: [id] },
                 fields: [
                     ...eventFields(diagram, event),
-                    ...(styled ? styleFields(diagram, [{ id: event.id, kind: "event" }]) : []),
-                    ...(styled ? effectFields(diagram, event.id, "event") : []),
+                    ...(styled ? styleFields(diagram, [{ id: event.id ?? id, kind: "event" }]) : []),
+                    ...(styled ? effectFields(diagram, event.id ?? id, "event") : []),
                 ],
             };
         }
@@ -887,10 +1015,8 @@ function inspectFields(analysis, view, selection) {
                         ...styleFields(diagram, [{ id: relation.id ?? relation.key, kind: "relation" }]),
                     ]
                     : relationFields(view, relation), diagram, relation, effectiveTheme(analysis, view)),
-                // Anonymous relations take effects too: setting one names the relation.
-                ...(relation.id || !sequence
-                    ? effectFields(diagram, relation.id ?? relation.key, "relation")
-                    : []),
+                // Anonymous relations and messages take effects too: setting one names them.
+                ...effectFields(diagram, relation.id ?? relation.key, "relation"),
             ],
         };
     }
@@ -901,8 +1027,8 @@ function inspectFields(analysis, view, selection) {
         const event = diagram.eventsByKey.get(t.id);
         if (event.kind === "message")
             return [{ id: diagram.relationsByKey.get(t.id)?.id ?? t.id, kind: "relation" }];
-        return event.id !== null && (event.kind === "note" || event.kind === "fragment")
-            ? [{ id: event.id, kind: "event" }]
+        return event.kind === "note" || event.kind === "fragment"
+            ? [{ id: event.id ?? t.id, kind: "event" }]
             : [];
     });
     return {
@@ -957,12 +1083,6 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
         return effectOperations(diagram, ids, field, value);
     if (field.startsWith("style.")) {
         const property = field.slice("style.".length);
-        for (const id of ids) {
-            const event = diagram.relationsByKey.has(id) ? undefined : diagram.eventsByKey.get(id);
-            if (event && event.id === null) {
-                return { ok: false, reason: reasons.nameToStyle(event.kind) };
-            }
-        }
         let written = text === "" ? null : text;
         // Numbers within the property's bounds, such as a corner radius from 0 to 64.
         const spec = STYLE_PROPERTIES[property];
@@ -1007,7 +1127,11 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
             });
         }
         const notice = namedNotice(resolved.named);
-        return { ok: true, operations: ops, ...(notice ? { notice } : {}) };
+        return {
+            ok: true,
+            operations: ops,
+            ...(notice ? { notice, select: selectionAfter(ids, resolved.targets) } : {}),
+        };
     }
     const id = ids[0];
     if (diagram.type === "sequence") {
@@ -1062,6 +1186,9 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
                 ops.push(...steadyGroups(view, [id], parent));
                 break;
             }
+            case "attachedTo":
+                ops.push({ kind: "attachNote", diagram: d, note: id, element: text || null });
+                break;
             case "kind":
                 if (text && text !== "group")
                     ops.push({
@@ -1171,6 +1298,11 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
     }
     if (relation) {
         const named = relation.id;
+        // What an edit that named the relation first says, and the selection that follows the id.
+        const naming = (target, operations) => {
+            const notice = namedNotice(operations.length > 0 ? [target] : []);
+            return notice ? { notice, select: [target] } : {};
+        };
         switch (field) {
             case "id":
                 if (!text)
@@ -1187,7 +1319,7 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
                     relation: target,
                     label: text || null,
                 });
-                break;
+                return { ok: true, operations: ops, ...naming(target, operations) };
             }
             case "description":
                 ops.push({
@@ -1208,8 +1340,7 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
                     property: "layer",
                     value: text || null,
                 });
-                const notice = namedNotice(operations.length > 0 ? [target] : []);
-                return { ok: true, operations: ops, ...(notice ? { notice } : {}) };
+                return { ok: true, operations: ops, ...naming(target, operations) };
             }
             case "classes":
                 ops.push({
@@ -1235,8 +1366,7 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
                         property: "line",
                         value: "dotted",
                     });
-                    const notice = namedNotice(operations.length > 0 ? [target] : []);
-                    return { ok: true, operations: ops, ...(notice ? { notice } : {}) };
+                    return { ok: true, operations: ops, ...naming(target, operations) };
                 }
                 ops.push({
                     kind: "setRelationLine",
@@ -1283,17 +1413,19 @@ export function fieldOperations(analysis, diagramId, ids, field, value) {
             case "labelAt": {
                 if (number === null || !Number.isFinite(number))
                     return { ok: false, reason: reasons.percentage };
-                if (!named)
-                    return { ok: false, reason: reasons.nameToMoveLabel };
-                const entry = diagram.placement.find((p) => p.statement === "label" && p.target === named);
-                ops.push({
+                // An anonymous relation is named first: its label is placed by the relation's id.
+                const { id: target, operations } = namedRelation(diagram, relation);
+                const entry = named
+                    ? diagram.placement.find((p) => p.statement === "label" && p.target === named)
+                    : undefined;
+                ops.push(...operations, {
                     kind: "setLabelAnchor",
                     diagram: d,
-                    relation: named,
+                    relation: target,
                     at: number,
                     offset: entry?.offset ?? { x: 0, y: 0 },
                 });
-                break;
+                return { ok: true, operations: ops, ...naming(target, operations) };
             }
             default:
                 return { ok: false, reason: `Unknown field \`${field}\`.` };