@meltemi/diagrams-editor 1.9.0 → 1.10.0

package/dist/session.js

@@ -13,17 +13,24 @@ import { DEFAULT_GRID, snapValue, writtenCenter } from "./canvas/snapping.js";
 import { copyFragment, pasteOperations } from "./clipboard.js";
 import { iconGroups, takesIcon, writtenIcon } from "./icons.js";
 import { fieldOperations, inspect, namedRelation } from "./inspector.js";
-import { freshRelationId } from "./targets.js";
+import { freshModelRelationId, freshRelationId, nameable } from "./targets.js";
 // The editor's catalog; `messages` names the host messages in this file.
 import { messages as wording } from "./messages/index.js";
 import { baseName, themeLocation, themePanel, themeTokenOperation } from "./themes.js";
 import { renderDiagram, renderLayout } from "./render.js";
 import { selectionAt } from "./services/navigation.js";
 import { eventInfos, sequenceAction, sequenceMove } from "./sequence.js";
-import { entityChoices, modelIsLocal } from "./c4.js";
+import { allowedKinds, copiedEntities, copiedNotes, entityChoices, entityParent, freshEntityPath, modelIsLocal, pasteEntities, } from "./c4.js";
+import { addIcons, checkIconFiles, checkIconPrefix } from "./add-icons.js";
 import { storyChoices, storyPlayback } from "./story.js";
 const NONE = { messages: [] };
 /** Default sizes of groups created from the palette, on the 14 px grid. */
+/** A note of a C4 view: a declaration of the view, not an entity of the model. */
+function isViewNote(element) {
+    return element.kind === "note" && element.entity === null;
+}
+/** What a new note measures before its text is typed: "Note" at the note size. */
+const NEW_NOTE_SIZE = { width: 36, height: 22 };
 const NEW_GROUP_SIZE = { width: 280, height: 168 };
 /**
  * Kinds created as empty shapes, `box box1 ""` or `node1[""]`, the text added later in place;
@@ -53,10 +60,15 @@ export class CanvasSession {
     rendered = new Map();
     pendingSelection;
     pendingEdit;
+    /** A status line to show after the next render and the selection it brings. */
+    pendingStatus;
     /** The diagram to show once it exists, after a conversion. */
     pendingDiagram;
-    /** True while the canvas shows the diagram's effects running. */
-    playing = false;
+    /**
+     * True while the canvas shows the diagram's effects running: from the start, so a diagram with
+     * effects opens animated; the canvas pauses it from the choice it remembers per diagram.
+     */
+    playing = true;
     /** The scenario of a sequence diagram previewed read-only, with its diagram. */
     scenario;
     /** The story the canvas plays, read-only, in story mode. */
@@ -189,6 +201,12 @@ export class CanvasSession {
             messages.push({ type: "select", ids: [this.pendingEdit] });
             this.pendingEdit = undefined;
         }
+        // After the selection, whose own announcement it would otherwise lose to.
+        if (this.pendingStatus !== undefined) {
+            if (render)
+                messages.push({ type: "status", message: this.pendingStatus });
+            this.pendingStatus = undefined;
+        }
         const model = this.inspect(view.id);
         if (model)
             messages.push({ type: "inspector", model });
@@ -264,7 +282,10 @@ export class CanvasSession {
             return NONE;
         const operation = themeTokenOperation(location, token, value);
         if (location.file !== null) {
-            return { messages: [], project: { kind: "themeFile", file: location.file, operation } };
+            return {
+                messages: [],
+                project: { kind: "files", steps: [{ file: location.file, operation }] },
+            };
         }
         return this.planned(view, "setField", [operation]);
     }
@@ -303,6 +324,13 @@ export class CanvasSession {
             const labelBox = geometry.elementLabels.get(element.id);
             const rotation = geometry.rotations.get(element.id);
             const radius = geometry.radii.get(element.id);
+            // A free line: its written points (ends and bends) and the polyline it is drawn with.
+            const connector = element.kind === "line" ? geometry.connectors.get(element.id) : undefined;
+            const line = connector && {
+                points: [connector.points[0], ...connector.via, connector.points.at(-1)],
+                drawn: connector.line,
+                via: connector.via,
+            };
             elements.push({
                 id: element.id,
                 kind: element.kind,
@@ -320,6 +348,7 @@ export class CanvasSession {
                 takesIcon: takesIcon(diagram, element),
                 icon: writtenIcon(diagram, element.id, "element"),
                 ...(labelBox ? { labelBox } : {}),
+                ...(line ? { line } : {}),
             });
         }
         const relations = [];
@@ -367,6 +396,14 @@ export class CanvasSession {
             diagram: view.id,
             profile: diagram.type,
             ...(diagram.definition ? { tools: diagram.definition.tools } : {}),
+            ...(diagram.c4
+                ? {
+                    tools: allowedKinds(diagram.c4.level).map((kind) => ({
+                        kind,
+                        label: wording().c4.tools[kind],
+                    })),
+                }
+                : {}),
             layers: diagram.properties.layers,
             mode: view.mode,
             svg: rendered.svg,
@@ -380,6 +417,7 @@ export class CanvasSession {
             scenario: scenario ?? null,
             effects,
             playing,
+            ...(this.inProject() ? { project: true } : {}),
             entities: diagram.type === "c4" ? entityChoices(diagram) : [],
             selection: this.selection,
             ...(view.layout?.theme
@@ -387,6 +425,7 @@ export class CanvasSession {
                     colors: {
                         selection: view.layout.theme.selection ?? view.layout.theme.accent,
                         guide: view.layout.theme.guide ?? view.layout.theme.accent,
+                        accent: view.layout.theme.accent,
                     },
                 }
                 : {}),
@@ -448,6 +487,44 @@ export class CanvasSession {
             return [];
         return iconGroups(analysis, this.libraries(), query);
     }
+    /**
+     * Adds icons to the project (`addIcons`): the files of the assets and the statements that give
+     * the first icon to the targets, as one request of steps over files the host applies in one
+     * undo step; outside a project every file is refused.
+     */
+    addIcons(message) {
+        const words = wording().addIcons;
+        if (!this.inProject()) {
+            const reason = words.needsProject;
+            return {
+                messages: [
+                    {
+                        type: "iconsAdded",
+                        token: message.token,
+                        added: [],
+                        refused: message.files.map((f) => ({ file: f.file, reason })),
+                    },
+                    { type: "rejected", code: "edit.unsafe-target", reason },
+                ],
+            };
+        }
+        const result = addIcons(this.analysis?.icons, this.view()?.diagram, message);
+        const answer = {
+            type: "iconsAdded",
+            token: message.token,
+            added: result.added,
+            refused: result.refused,
+        };
+        if (result.added.length === 0)
+            return { messages: [answer] };
+        return {
+            messages: [
+                answer,
+                { type: "status", message: words.added(result.added.map((a) => a.reference)) },
+            ],
+            project: { kind: "files", steps: result.steps, assets: result.assets },
+        };
+    }
     /** Highlights the element or relation of the statement at a text offset. */
     selectAt(offset) {
         if (!this.analysis)
@@ -503,6 +580,19 @@ export class CanvasSession {
                         { type: "icons", token: message.token, groups: this.searchIcons(message.query) },
                     ],
                 };
+            case "checkIcons":
+                return {
+                    messages: [
+                        {
+                            type: "iconsChecked",
+                            token: message.token,
+                            prefix: checkIconPrefix(analysis.icons, message.prefix),
+                            files: checkIconFiles(analysis.icons, message.prefix, message.files),
+                        },
+                    ],
+                };
+            case "addIcons":
+                return this.addIcons(message);
             case "editTheme":
                 this.themeEditing = message.open;
                 this.awaitedTheme = undefined;
@@ -594,6 +684,10 @@ export class CanvasSession {
                     };
                 }
                 return this.act(message.action);
+            case "presencePointer":
+            case "presenceLaser":
+                // The host's to share; the document has nothing to do with it.
+                return NONE;
         }
     }
     /** Pastes clipboard text at a point, or two grid steps off when no point is given. */
@@ -602,12 +696,32 @@ export class CanvasSession {
         if (!view)
             return NONE;
         const where = at ? { at: this.snap(at) } : { shift: { x: 2 * this.grid, y: 2 * this.grid } };
+        if (view.diagram.type === "c4")
+            return this.pasteEntities(view, text, where);
         const pasted = pasteOperations(this.analysis, view.id, text, where);
         if (!pasted.ok)
             return { messages: [{ type: "status", message: pasted.reason }] };
         this.pendingSelection = [...pasted.ids];
         return this.planned(view, "paste", pasted.operations);
     }
+    /**
+     * Pastes entities copied from a C4 view into this one: copies declared in its model, included
+     * and placed; anything else on the clipboard says why it does not paste here.
+     */
+    pasteEntities(view, text, where) {
+        const compilation = compile(text);
+        const copied = copiedEntities(compilation.document.models, compilation.document.diagrams);
+        const notes = copiedNotes(compilation.document.diagrams);
+        if (!copied || (copied.length === 0 && notes.length === 0)) {
+            return { messages: [{ type: "status", message: wording().reasons.notFragment }] };
+        }
+        const placed = view.mode !== "auto" || view.layout?.boxes !== undefined;
+        const pasted = pasteEntities(view.diagram, placed, copied, where, notes);
+        if (!pasted.ok)
+            return { messages: [{ type: "status", message: pasted.reason }] };
+        this.pendingSelection = [...pasted.ids];
+        return this.planned(view, "paste", pasted.operations);
+    }
     /** The scenario the canvas previews, if any. */
     get previewed() {
         const view = this.view();
@@ -726,6 +840,17 @@ export class CanvasSession {
      * One plan for the operations, after the arrangement of an `auto` diagram when needed; undefined
      * without operations. It changes nothing in the session: previews plan with it too.
      */
+    /**
+     * After an edit names the relation `key` as `id` first, the selection holds `id` where it held
+     * the key, so the canvas and the inspector stay on the relation; a refusal drops it.
+     */
+    followNaming(key, id, operations) {
+        if (operations.length === 0)
+            return;
+        this.pendingSelection = this.selection.includes(key)
+            ? this.selection.map((s) => (s === key ? id : s))
+            : [id];
+    }
     plan(view, kind, operations) {
         if (operations.length === 0)
             return undefined;
@@ -738,14 +863,22 @@ export class CanvasSession {
         all.push(...operations);
         return planEdit(this.analysis.compilation, all.length === 1 ? all[0] : { kind: "batch", operations: all }, { revision: this.analysis.revision });
     }
-    /** The plan of `plan` for the host to apply; a refusal drops what waited for the edit. */
-    planned(view, kind, operations) {
+    /**
+     * The plan of `plan` for the host to apply; a refusal drops what waited for the edit. When the
+     * operations write the model of a C4 view that another file holds, they go to the host as
+     * steps over files instead, with `retry` for the dependents dialog.
+     */
+    planned(view, kind, operations, retry) {
+        const steps = this.modelSteps(view, kind, operations, retry);
+        if (steps)
+            return steps;
         const result = this.plan(view, kind, operations);
         if (!result)
             return NONE;
         if (!result.ok) {
             this.pendingSelection = undefined;
             this.pendingEdit = undefined;
+            this.pendingStatus = undefined;
             this.pendingDiagram = undefined;
             return {
                 messages: [
@@ -755,10 +888,61 @@ export class CanvasSession {
         }
         return { messages: [], plan: result.plan };
     }
+    /**
+     * The operations as steps over files when a C4 view's model is in another file of the project
+     * and they write it: the model's first, then the view's, which name what the model's wrote;
+     * the host plans and applies them together. Undefined when the plan is the document's alone.
+     */
+    modelSteps(view, kind, operations, retry) {
+        const diagram = view.diagram;
+        const file = diagram.type === "c4" ? (diagram.c4?.resolved?.file ?? null) : null;
+        if (file === null || !operations.some((op) => "model" in op))
+            return undefined;
+        const own = [];
+        if (GEOMETRY.has(kind)) {
+            const materialize = materializeOperation(view);
+            if (materialize)
+                own.push(materialize);
+        }
+        own.push(...operations.filter((op) => !("model" in op)));
+        const steps = [
+            ...operations.filter((op) => "model" in op).map((operation) => ({ file, operation })),
+            ...own.map((operation) => ({ file: null, operation })),
+        ];
+        const asks = operations.some((op) => op.kind === "removeModelRelation" && !op.cascade);
+        return {
+            messages: [],
+            project: { kind: "files", steps, ...(asks && retry ? { retry } : {}) },
+        };
+    }
+    /**
+     * Where a new note's centre goes: where the tool was dropped, or, dropped on an element it is
+     * attached to, at the element's east edge plus the theme's `groupPadding`, aligned to its top,
+     * as a note of the size the text "Note" gives it, snapped to the grid.
+     */
+    notePlace(view, action) {
+        const target = action.attachedTo !== undefined ? view.layout?.boxes?.get(action.attachedTo) : undefined;
+        if (!target)
+            return this.snap(action.at);
+        const padding = view.layout?.theme?.groupPadding ?? 16;
+        return this.snap({
+            x: target.x + target.width + padding + NEW_NOTE_SIZE.width / 2,
+            y: target.y + NEW_NOTE_SIZE.height / 2,
+        });
+    }
+    /** A view whose model is not resolved cannot write it. */
+    unresolved() {
+        return {
+            messages: [
+                { type: "rejected", code: "edit.unsafe-target", reason: wording().session.fixFirst },
+            ],
+        };
+    }
     /**
      * The actions of a C4 view that differ from flow diagrams: entities are added from the model
-     * and removed by excluding them; labels are local; ids rename the model's entities. Returns
-     * undefined for the actions the flow code handles.
+     * and removed by excluding them; relations are the model's; labels are local or the model's;
+     * ids rename the model's entities and relations. Returns undefined for the actions the flow
+     * code handles.
      */
     c4Action(view, action) {
         const diagram = view.diagram;
@@ -769,6 +953,101 @@ export class CanvasSession {
         }
         const model = diagram.c4?.resolved?.definition;
         switch (action.kind) {
+            case "create": {
+                // A note, the one declaration a view holds: written in the view, never in the model.
+                if (action.elementKind === "note") {
+                    if (!diagram.c4?.resolved)
+                        return this.unresolved();
+                    const id = freeElementId(this.analysis, diagram, "note");
+                    const placed = view.mode !== "auto" || view.layout?.boxes !== undefined;
+                    const at = this.notePlace(view, action);
+                    this.pendingSelection = [id];
+                    this.pendingEdit = id;
+                    if (action.attachedTo !== undefined) {
+                        this.pendingStatus = wording().session.noteAttached(action.attachedTo);
+                    }
+                    return this.planned(view, "create", [
+                        {
+                            kind: "createElement",
+                            diagram: d,
+                            elementKind: "note",
+                            id,
+                            label: "Note",
+                            ...(placed ? { at } : {}),
+                            ...(action.attachedTo !== undefined ? { attachedTo: action.attachedTo } : {}),
+                        },
+                    ]);
+                }
+                if (action.attachedTo !== undefined) {
+                    return {
+                        messages: [
+                            {
+                                type: "rejected",
+                                code: "edit.invalid-value",
+                                reason: wording().session.attachNotesOnly(action.elementKind),
+                            },
+                        ],
+                    };
+                }
+                // An entity of a kind the level draws, declared in the model where the level puts it,
+                // included in the view (nothing when the view draws it by default) and placed.
+                if (!model)
+                    return this.unresolved();
+                const kind = action.elementKind;
+                const kinds = allowedKinds(diagram.c4.level);
+                if (!kinds.includes(kind)) {
+                    return {
+                        messages: [
+                            {
+                                type: "rejected",
+                                code: "edit.invalid-value",
+                                reason: wording().c4.kindNotDrawn(action.elementKind, kinds),
+                            },
+                        ],
+                    };
+                }
+                const parent = entityParent(diagram, kind);
+                const path = freshEntityPath(model, parent, kind);
+                const ops = [
+                    {
+                        kind: "createEntity",
+                        model: model.id,
+                        entityKind: kind,
+                        ...(parent !== null ? { parent } : {}),
+                        id: path.slice(path.lastIndexOf(".") + 1),
+                        label: "",
+                    },
+                    { kind: "includeEntity", diagram: d, entity: path },
+                ];
+                // Where it was dropped: an `auto` view writes its arrangement first, as for any creation.
+                if (view.mode !== "auto" || view.layout?.boxes) {
+                    const at = this.snap(action.at);
+                    ops.push({ kind: "setPosition", diagram: d, element: path, x: at.x, y: at.y });
+                }
+                this.pendingSelection = [path];
+                this.pendingEdit = path;
+                return this.planned(view, "create", ops);
+            }
+            case "duplicate": {
+                // Copies of the selected entities, declared beside them in the model and placed off them.
+                const fragment = copyFragment(this.analysis, d, action.ids);
+                const read = fragment ? compile(fragment) : undefined;
+                const copied = read
+                    ? copiedEntities(read.document.models, read.document.diagrams)
+                    : undefined;
+                const notes = read ? copiedNotes(read.document.diagrams) : [];
+                if (!copied || (copied.length === 0 && notes.length === 0))
+                    return { messages: [] };
+                const placed = view.mode !== "auto" || view.layout?.boxes !== undefined;
+                const pasted = pasteEntities(diagram, placed, copied, { shift: { x: 2 * this.grid, y: 2 * this.grid } }, notes);
+                if (!pasted.ok) {
+                    return {
+                        messages: [{ type: "rejected", code: "edit.invalid-value", reason: pasted.reason }],
+                    };
+                }
+                this.pendingSelection = [...pasted.ids];
+                return this.planned(view, "duplicate", pasted.operations);
+            }
             case "includeEntity": {
                 const ops = [{ kind: "includeEntity", diagram: d, entity: action.entity }];
                 if (action.at && view.mode !== "auto") {
@@ -778,33 +1057,186 @@ export class CanvasSession {
                 this.pendingSelection = [action.entity];
                 return this.planned(view, "includeEntity", ops);
             }
+            case "connect": {
+                if (!model)
+                    return this.unresolved();
+                // A relation pinned to points needs a route, and a route needs a named relation.
+                const pinned = action.pinned;
+                const id = pinned ? freshModelRelationId(diagram, action) : undefined;
+                const ops = [
+                    {
+                        kind: "createModelRelation",
+                        model: model.id,
+                        from: action.from,
+                        to: action.to,
+                        ...(id ? { id } : {}),
+                    },
+                ];
+                if (pinned && id) {
+                    ops.push({
+                        kind: "setRoute",
+                        diagram: d,
+                        relation: id,
+                        via: [],
+                        ...(pinned.fromPort !== undefined ? { from: pinned.fromPort } : {}),
+                        ...(pinned.fromPosition !== undefined ? { fromPosition: pinned.fromPosition } : {}),
+                        ...(pinned.toPort !== undefined ? { to: pinned.toPort } : {}),
+                        ...(pinned.toPosition !== undefined ? { toPosition: pinned.toPosition } : {}),
+                    });
+                }
+                // The new relation comes after the others of its pair in the model, so its key is the next.
+                const pair = model.relations.filter((r) => r.from === action.from && r.to === action.to);
+                this.pendingSelection = [id ?? `${action.from}->${action.to}#${pair.length + 1}`];
+                return this.planned(view, "connect", ops);
+            }
+            case "setEnd": {
+                const relation = diagram.relationsByKey.get(action.relation);
+                if (!relation)
+                    return { messages: [] };
+                if (!model)
+                    return this.unresolved();
+                const combined = diagram.c4?.combined.includes(relation.key) ?? false;
+                const source = combined ? undefined : model.relationsByKey.get(relation.key);
+                const current = action.end === "from" ? relation.from : relation.to;
+                const end = (id, port) => ({
+                    kind: "setRoute",
+                    diagram: d,
+                    relation: id,
+                    via: currentVia(diagram, id),
+                    ...(action.end === "from"
+                        ? {
+                            from: port,
+                            ...(action.position !== undefined ? { fromPosition: action.position } : {}),
+                        }
+                        : {
+                            to: port,
+                            ...(action.position !== undefined ? { toPosition: action.position } : {}),
+                        }),
+                });
+                if (current !== action.element) {
+                    // Another entity: the model relation's end moves there.
+                    if (!source) {
+                        return {
+                            messages: [
+                                {
+                                    type: "rejected",
+                                    code: "edit.invalid-value",
+                                    reason: wording().c4.reconnectCombination(relation.key, relation.sources),
+                                },
+                            ],
+                        };
+                    }
+                    const route = relation.id
+                        ? diagram.placement.find((p) => p.statement === "route" && p.target === relation.id)
+                        : undefined;
+                    const endpoint = route ? (action.end === "from" ? route.from : route.to) : undefined;
+                    // A dropped port, else the compass port of the old end carried over; a named port of
+                    // the old entity does not carry over.
+                    const port = action.port !== null
+                        ? action.port
+                        : endpoint?.explicitPort
+                            ? endpoint.named
+                                ? null
+                                : endpoint.port
+                            : undefined;
+                    const from = action.end === "from" ? action.element : source.from;
+                    const to = action.end === "to" ? action.element : source.to;
+                    const ops = [];
+                    let id = relation.id;
+                    if (port !== undefined && id === null) {
+                        // The route needs a name: the relation is named after its new ends.
+                        id = freshModelRelationId(diagram, { from, to });
+                        ops.push({
+                            kind: "setModelRelationProperty",
+                            model: model.id,
+                            relation: source.key,
+                            property: "id",
+                            value: id,
+                        });
+                    }
+                    // Once named, the relation goes by its id. The move rewrites the relation's routes in
+                    // the views of the model's file, with the dropped port in this one's; a route still to
+                    // write (none here yet), or one in another file than the model's, is set after it.
+                    ops.push({
+                        kind: "reconnectModelRelation",
+                        model: model.id,
+                        relation: id ?? source.key,
+                        end: action.end,
+                        entity: action.element,
+                        ...(id !== null && port !== undefined
+                            ? {
+                                view: d,
+                                port,
+                                ...(action.position !== undefined ? { position: action.position } : {}),
+                            }
+                            : {}),
+                    });
+                    const elsewhere = (diagram.c4?.resolved?.file ?? null) !== null;
+                    if (port !== undefined && id !== null && (!route || elsewhere))
+                        ops.push(end(id, port));
+                    // The relation keeps its place in the model's text, so its key counts the relations of
+                    // its new pair written before it.
+                    const before = model.relations.filter((r) => r.from === from && r.to === to && r.node.start < source.node.start).length;
+                    this.pendingSelection = [id ?? `${from}->${to}#${before + 1}`];
+                    return this.planned(view, "setEnd", ops);
+                }
+                // The same entity: the end pinned to a port or a point of its border, or handed back to
+                // the layout, which changes nothing for a relation without a route.
+                if (action.port === null && relation.id === null)
+                    return { messages: [] };
+                if (!nameable(diagram, relation)) {
+                    return {
+                        messages: [
+                            {
+                                type: "rejected",
+                                code: "edit.invalid-value",
+                                reason: wording().session.fixFirst,
+                            },
+                        ],
+                    };
+                }
+                const { id, operations } = namedRelation(diagram, relation);
+                this.followNaming(relation.key, id, operations);
+                return this.planned(view, "setEnd", [...operations, end(id, action.port)]);
+            }
             case "remove": {
                 const ops = [];
                 const elements = action.ids.filter((id) => diagram.elementsById.get(id)?.kind !== undefined);
                 for (const id of elements) {
-                    if (diagram.elementsById.get(id).kind === "group")
+                    const element = diagram.elementsById.get(id);
+                    if (element.kind === "group")
                         continue;
-                    ops.push({ kind: "excludeEntity", diagram: d, entity: id, cascade: action.cascade });
+                    // A note is the view's own declaration; an entity is left out of the view.
+                    ops.push(isViewNote(element)
+                        ? { kind: "removeElement", diagram: d, element: id, cascade: action.cascade }
+                        : { kind: "excludeEntity", diagram: d, entity: id, cascade: action.cascade });
                 }
                 for (const key of action.ids) {
                     if (diagram.c4?.combined.includes(key))
                         ops.push({ kind: "removeRelation", diagram: d, relation: key });
                     else if (diagram.relationsByKey.has(key)) {
-                        return {
-                            messages: [
-                                {
-                                    type: "rejected",
-                                    code: "edit.invalid-value",
-                                    reason: wording().session.modelRelation(key),
-                                },
-                            ],
-                        };
+                        // A drawn model relation goes from the model, with what names it in its views.
+                        const source = model?.relationsByKey.get(key);
+                        if (!model || !source)
+                            return this.unresolved();
+                        ops.push({
+                            kind: "removeModelRelation",
+                            model: model.id,
+                            relation: source.key,
+                            cascade: action.cascade,
+                            view: d,
+                        });
                     }
                 }
                 if (!action.cascade) {
                     const dependents = [];
                     for (const operation of ops) {
-                        if (operation.kind !== "excludeEntity")
+                        if (operation.kind !== "excludeEntity" &&
+                            operation.kind !== "removeElement" &&
+                            operation.kind !== "removeModelRelation")
+                            continue;
+                        // A model in another file is asked through the host's steps.
+                        if (operation.kind === "removeModelRelation" && !modelIsLocal(diagram))
                             continue;
                         const probe = planEdit(this.analysis.compilation, operation);
                         if (!probe.ok && probe.rejection.code === "edit.has-dependents") {
@@ -827,27 +1259,85 @@ export class CanvasSession {
                     }
                 }
                 this.pendingSelection = [];
-                return this.planned(view, "remove", ops);
+                return this.planned(view, "remove", ops, { ...action, cascade: true });
             }
             case "setLabel": {
                 const label = action.label === "" ? null : action.label;
-                const ops = diagram.c4?.combined.includes(action.id)
-                    ? [{ kind: "setRelationLabel", diagram: d, relation: action.id, label }]
-                    : [{ kind: "setLocalLabel", diagram: d, target: action.id, label }];
-                return this.planned(view, "setLabel", ops);
-            }
-            case "renameId": {
-                if (!model || !modelIsLocal(diagram)) {
+                if (diagram.c4?.combined.includes(action.id)) {
+                    return this.planned(view, "setLabel", [
+                        { kind: "setRelationLabel", diagram: d, relation: action.id, label },
+                    ]);
+                }
+                const relation = diagram.relationsByKey.get(action.id);
+                const note = diagram.elementsById.get(action.id);
+                if (note && isViewNote(note)) {
+                    return this.planned(view, "setLabel", [
+                        { kind: "setElementLabel", diagram: d, element: action.id, label: action.label },
+                    ]);
+                }
+                if (!relation) {
+                    // A label typed on an entity the model left empty (one just created) is the model's;
+                    // otherwise it is this view's local label.
+                    const entity = model?.entitiesByPath.get(action.id);
+                    if (entity && entity.label === "" && label !== null) {
+                        return this.planned(view, "setLabel", [
+                            {
+                                kind: "setEntityProperty",
+                                model: model.id,
+                                entity: entity.path,
+                                property: "label",
+                                value: label,
+                            },
+                        ]);
+                    }
+                    return this.planned(view, "setLabel", [
+                        { kind: "setLocalLabel", diagram: d, target: action.id, label },
+                    ]);
+                }
+                // A label typed on an arrow fills the model relation's when it has none; otherwise it is
+                // this view's local label, which names the relation first.
+                const source = model?.relationsByKey.get(relation.key);
+                if (source && source.label === null && label !== null) {
+                    return this.planned(view, "setLabel", [
+                        {
+                            kind: "setModelRelationProperty",
+                            model: model.id,
+                            relation: source.key,
+                            property: "label",
+                            value: label,
+                        },
+                    ]);
+                }
+                if (!nameable(diagram, relation)) {
                     return {
                         messages: [
                             {
                                 type: "rejected",
-                                code: "edit.unsafe-target",
-                                reason: wording().session.modelElsewhere,
+                                code: "edit.invalid-value",
+                                reason: wording().session.fixFirst,
                             },
                         ],
                     };
                 }
+                if (relation.id === null && label === null)
+                    return { messages: [] };
+                const { id, operations } = namedRelation(diagram, relation);
+                this.followNaming(relation.key, id, operations);
+                return this.planned(view, "setLabel", [
+                    ...operations,
+                    { kind: "setLocalLabel", diagram: d, target: id, label },
+                ]);
+            }
+            case "renameId": {
+                const note = diagram.elementsById.get(action.id);
+                if (note && isViewNote(note)) {
+                    this.pendingSelection = this.selection.map((s) => (s === action.id ? action.newId : s));
+                    return this.planned(view, "renameId", [
+                        { kind: "renameElement", diagram: d, element: action.id, newId: action.newId },
+                    ]);
+                }
+                if (!model)
+                    return this.unresolved();
                 const entity = model.entitiesByPath.get(action.id);
                 const relation = model.relationsByKey.get(action.id);
                 const ops = entity
@@ -970,10 +1460,28 @@ export class CanvasSession {
                 ops.push(...this.resizeOperations(view, action));
                 break;
             case "moveLabel": {
+                // A free line's pill moves as a relation's does, by the line's id.
+                const line = diagram.elementsById.get(action.relation);
+                if (line?.kind === "line") {
+                    const entry = diagram.placement.find((p) => p.statement === "label" && p.target === line.id);
+                    const offset = entry?.offset ?? { x: 0, y: 0 };
+                    ops.push({
+                        kind: "setLabelAnchor",
+                        diagram: d,
+                        relation: line.id,
+                        at: entry?.at ?? 50,
+                        offset: {
+                            x: Math.round(offset.x + action.delta.x),
+                            y: Math.round(offset.y + action.delta.y),
+                        },
+                    });
+                    break;
+                }
                 const relation = diagram.relationsByKey.get(action.relation);
                 if (!relation)
                     break;
                 const { id, operations } = namedRelation(diagram, relation);
+                this.followNaming(relation.key, id, operations);
                 const entry = relation.id
                     ? diagram.placement.find((p) => p.statement === "label" && p.target === relation.id)
                     : undefined;
@@ -990,11 +1498,58 @@ export class CanvasSession {
                 });
                 break;
             }
+            case "createLine": {
+                // In the group under the press, its points in that group's interior; the armed kind's
+                // dashes and heads as styles, with the effective theme's head.
+                const id = freeElementId(this.analysis, diagram, "line");
+                const origin = interiorOf(view, action.parent ?? null);
+                const at = (p) => {
+                    const snapped = this.snap(p);
+                    return { x: snapped.x - origin.x, y: snapped.y - origin.y };
+                };
+                const head = view.layout?.theme?.arrowhead ?? "triangle";
+                const styles = [
+                    ...(action.line === "dashed" ? [{ property: "line", value: "dashed" }] : []),
+                    ...(action.heads === "both" ? [{ property: "arrowtail", value: head }] : []),
+                    ...(action.heads !== "none" ? [{ property: "arrowhead", value: head }] : []),
+                ];
+                ops.push({
+                    kind: "createLine",
+                    diagram: d,
+                    id,
+                    from: at(action.from),
+                    to: at(action.to),
+                    ...(action.parent ? { parent: action.parent } : {}),
+                    ...(styles.length > 0 ? { styles } : {}),
+                });
+                this.pendingSelection = [id];
+                break;
+            }
+            case "setLinePoints": {
+                const element = diagram.elementsById.get(action.element);
+                if (element?.kind !== "line")
+                    break;
+                const origin = interiorOf(view, element.groupPath[element.groupPath.length - 1] ?? null);
+                const at = (p) => ({
+                    x: Math.round(p.x - origin.x),
+                    y: Math.round(p.y - origin.y),
+                });
+                ops.push({
+                    kind: "setLinePoints",
+                    diagram: d,
+                    element: element.id,
+                    from: at(action.from),
+                    to: at(action.to),
+                    via: action.via.map(at),
+                });
+                break;
+            }
             case "setVia": {
                 const relation = diagram.relationsByKey.get(action.relation);
                 if (!relation)
                     break;
                 const { id, operations } = namedRelation(diagram, relation);
+                this.followNaming(relation.key, id, operations);
                 ops.push(...operations, {
                     kind: "setRoute",
                     diagram: d,
@@ -1013,6 +1568,7 @@ export class CanvasSession {
                     if (action.port === null && relation.id === null)
                         break;
                     const { id, operations } = namedRelation(diagram, relation);
+                    this.followNaming(relation.key, id, operations);
                     ops.push(...operations, {
                         kind: "setRoute",
                         diagram: d,
@@ -1069,7 +1625,8 @@ export class CanvasSession {
                     this.pendingEdit = id;
                     break;
                 }
-                const snapped = this.snap(action.at);
+                // A note dropped on an element goes beside it; anything else where it was dropped.
+                const snapped = kind === "note" ? this.notePlace(view, action) : this.snap(action.at);
                 // Groups too go inside the group under the point, so groups nest.
                 const origin = interiorOf(view, action.parent ?? null);
                 // A library element keeps its label; a shape from the palette, the keys or the grid is empty.
@@ -1086,9 +1643,19 @@ export class CanvasSession {
                     ...(label !== undefined ? { label } : {}),
                     ...(action.icon !== undefined ? { icon: action.icon } : {}),
                     ...(action.shape !== undefined ? { shape: action.shape } : {}),
+                    ...(action.attachedTo !== undefined ? { attachedTo: action.attachedTo } : {}),
                 });
                 this.pendingSelection = [id];
                 this.pendingEdit = id;
+                // The selection is announced too; the status line ends on the attachment.
+                if (action.attachedTo !== undefined) {
+                    this.pendingStatus = words.session.noteAttached(action.attachedTo);
+                }
+                break;
+            }
+            case "attachNote": {
+                ops.push({ kind: "attachNote", diagram: d, note: action.note, element: action.element });
+                this.pendingSelection = [action.note];
                 break;
             }
             case "connect": {
@@ -1101,7 +1668,7 @@ export class CanvasSession {
                     from: action.from,
                     to: action.to,
                     line: action.line,
-                    ...(action.twoWay ? { twoWay: true } : {}),
+                    ...(action.heads ? { heads: action.heads } : {}),
                     ...(pinned
                         ? {
                             id,
@@ -1202,6 +1769,7 @@ export class CanvasSession {
                 if (!relation)
                     break;
                 const { id, operations } = namedRelation(diagram, relation);
+                this.followNaming(relation.key, id, operations);
                 ops.push(...operations, {
                     kind: "setRelationLabel",
                     diagram: d,
@@ -1277,8 +1845,10 @@ export class CanvasSession {
                 for (const id of action.ids) {
                     const element = diagram.elementsById.get(id);
                     const box = boxes.get(id);
-                    if (element && element.kind !== "group" && box)
+                    // Lines have no edges to align: they keep their points.
+                    if (element && element.kind !== "group" && element.kind !== "line" && box) {
                         selected.set(id, box);
+                    }
                 }
                 const centres = action.kind === "align"
                     ? alignBoxes(selected, action.edge)
@@ -1338,7 +1908,8 @@ export class CanvasSession {
                     this.pendingSelection = [...result.select];
                 // Moving into a group of a free diagram writes the place in the group's interior, and a
                 // group left empty gets its place and size.
-                const geometric = ["x", "y", "w", "h"].includes(action.field) ||
+                // A rotation turns a box in place: an `auto` diagram keeps its arrangement first.
+                const geometric = ["x", "y", "w", "h", "style.rotation"].includes(action.field) ||
                     (action.field === "inside" &&
                         (diagram.type === "free" ||
                             result.operations.some((op) => op.kind === "setPosition" || op.kind === "setSize")));
@@ -1351,6 +1922,20 @@ export class CanvasSession {
                     }
                     : planned;
             }
+            case "setFields": {
+                // The fields of one control written together: one plan, one undo step.
+                const operations = [];
+                for (const { field, value } of action.fields) {
+                    const result = fieldOperations(this.analysis, d, action.ids, field, value);
+                    if (!result.ok) {
+                        return {
+                            messages: [{ type: "rejected", code: "edit.invalid-value", reason: result.reason }],
+                        };
+                    }
+                    operations.push(...result.operations);
+                }
+                return this.planned(view, "setField", operations);
+            }
             case "setIcon": {
                 const targets = action.ids.filter((id) => {
                     const element = diagram.elementsById.get(id);
@@ -1491,6 +2076,9 @@ export class CanvasSession {
             for (const id of moved) {
                 const element = diagram.elementsById.get(id);
                 const parent = element.groupPath[element.groupPath.length - 1] ?? null;
+                // A free line stays in its group: its points are written there.
+                if (element.kind === "line")
+                    continue;
                 if (parent === target || carried.has(id) || element.groupPath.some((g) => moved.has(g)))
                     continue;
                 reparented.add(id);
@@ -1516,6 +2104,22 @@ export class CanvasSession {
                 const element = diagram.elementsById.get(id);
                 if (reparented.has(id) || element.groupPath.some((g) => moved.has(g)))
                     continue;
+                // A free line moves every point by the same amount, in its own coordinates.
+                if (element.kind === "line" && element.line) {
+                    const by = (p) => ({
+                        x: Math.round(p.x + action.delta.x),
+                        y: Math.round(p.y + action.delta.y),
+                    });
+                    ops.push({
+                        kind: "setLinePoints",
+                        diagram: d,
+                        element: id,
+                        from: by(element.line.from),
+                        to: by(element.line.to),
+                        via: element.line.via.map(by),
+                    });
+                    continue;
+                }
                 const to = landed(id);
                 if (!to)
                     continue;
@@ -1630,7 +2234,8 @@ export class CanvasSession {
                 return none;
             operations = [...field.operations];
         }
-        const result = this.plan(view, action.kind, operations);
+        // A rotation previews as its release writes it: after the arrangement of an `auto` diagram.
+        const result = this.plan(view, action.kind === "setField" ? "move" : action.kind, operations);
         if (!result?.ok)
             return none;
         const compilation = compile(applyTextEdits(analysis.compilation.text, result.plan.edits), analysis.compilation.options);
@@ -1645,7 +2250,13 @@ export class CanvasSession {
         if (!drawn)
             return none;
         const { width, height, offset } = drawn.geometry;
-        return { messages: [{ type: "preview", token, svg: drawn.svg, width, height, offset }] };
+        // The turned element's box in the drawing, which the canvas turns it and its outline about.
+        const box = action.kind === "setField" ? layout.boxes?.get(action.ids[0]) : undefined;
+        return {
+            messages: [
+                { type: "preview", token, svg: drawn.svg, width, height, offset, ...(box ? { box } : {}) },
+            ],
+        };
     }
 }
 /** How many errors a compilation reports. */
@@ -1669,7 +2280,8 @@ function refusal(refused, action, diagram) {
     }
     if (action.kind === "create" && action.shape !== undefined)
         keys.push("create.shape");
-    if (action.kind === "connect" && action.twoWay)
+    // A view's relations go one way with a head: no two-way arrow, no line.
+    if (action.kind === "connect" && action.heads)
         keys.push("connect.twoWay");
     const key = keys.find((k) => Object.hasOwn(refused, k));
     return key === undefined ? undefined : refused[key];