@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/diagrams/commands/RenameFolderCommand.js

@@ -0,0 +1,31 @@
+/** Command to rename a folder */
+export class RenameFolderCommand {
+    constructor(folderId, oldName, newName, { diagram = null, onRename = null } = {}) {
+        this.folderId = folderId;
+        this.oldName = oldName;
+        this.newName = newName;
+        this.diagram = diagram;
+        this.onRename = onRename;
+    }
+
+    execute() {
+        if (this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            const folder = model?.getFolder?.(this.folderId);
+            if (folder) {
+                folder.name = this.newName;
+            }
+        }
+        this.onRename?.(this.folderId, this.newName);
+    }
+
+    undo() {
+        if (this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            const folder = model?.getFolder?.(this.folderId);
+            if (folder) {
+                folder.name = this.oldName;
+            }
+        }
+    }
+}

package/src/charting/diagrams/commands/RenameNodeCommand.js

@@ -0,0 +1,27 @@
+import { Command } from '../../CommandHistory.js';
+
+export class RenameNodeCommand extends Command {
+    constructor(nodeId, from, to, { diagram, label = 'Rename node', onRename } = {}) {
+        super(label);
+        this.nodeId = nodeId;
+        this.from = from;
+        this.to = to;
+        this._diagram = diagram;
+        this._onRename = onRename;
+    }
+
+    execute() { this._apply(this.to); }
+    undo() { this._apply(this.from); }
+
+    _apply(name) {
+        const node = this._findNode();
+        if (!node) return;
+        node.label = name;
+        this._diagram?._rerenderGraph?.();
+        this._onRename?.(node, name);
+    }
+
+    _findNode() {
+        return this._diagram?._chartState?.nodes?.find(n => n.id === this.nodeId);
+    }
+}

package/src/charting/diagrams/commands/ResizeNodeCommand.js

@@ -0,0 +1,46 @@
+import { GraphCommand } from './GraphCommand.js';
+
+/** What a resize can change: a box's width/height, or a round shape's radius. */
+export const NODE_SIZE_KEYS = ['width', 'height', 'radius'];
+
+/** A node's size, every key present (undefined = not set, the node's default). */
+export function nodeSize(node) {
+    return Object.fromEntries(NODE_SIZE_KEYS.map(key => [key, node?.[key]]));
+}
+
+/**
+ * ResizeNodeCommand — sets a node's size (`from`/`to` as from `nodeSize()`;
+ * an undefined key is removed, putting the node back on its default) and
+ * coalesces with the previous resize of the same node. Every apply, including
+ * undo and redo, reports the node through `onNodeResize(node)`.
+ */
+export class ResizeNodeCommand extends GraphCommand {
+    constructor(nodeId, from, to, { diagram, label = 'Resize node' } = {}) {
+        super(label, diagram);
+        this.nodeId = nodeId;
+        this.from = { ...from };
+        this.to = { ...to };
+    }
+
+    execute() { this._apply(this.to); }
+    undo() { this._apply(this.from); }
+
+    _apply(size) {
+        const node = this._node(this.nodeId);
+        if (!node) return;
+        for (const key of NODE_SIZE_KEYS) {
+            if (!(key in size)) continue;
+            if (size[key] == null) delete node[key];
+            else node[key] = size[key];
+        }
+        this._redraw();
+        this.options.onNodeResize?.(node);
+    }
+
+    merge(other) {
+        if (other instanceof ResizeNodeCommand && other.nodeId === this.nodeId) {
+            return new ResizeNodeCommand(this.nodeId, this.from, other.to, { diagram: this._diagram, label: this.label });
+        }
+        return undefined;
+    }
+}

package/src/charting/diagrams/commands/UpdateEdgeSideCommand.js

@@ -0,0 +1,40 @@
+import { EdgeCommand } from './GraphCommand.js';
+
+/**
+ * UpdateEdgeSideCommand — pins the side of a node one end of an edge attaches
+ * to. Every apply, including undo and redo, reports it through
+ * `onEdgeSideChange(edge, endpoint, side)` (endpoint 'source'|'target').
+ */
+export class UpdateEdgeSideCommand extends EdgeCommand {
+    /**
+     * @param {Object} edge
+     * @param {'source'|'target'} endpointType
+     * @param {string} newSide
+     * @param {Object} [options]
+     * @param {string} [options.oldSide] - The side before the edit, `undefined` for automatic
+     *   (default when omitted: the edge's side now)
+     */
+    constructor(edge, endpointType, newSide, options = {}) {
+        const { diagram, label = 'Update edge side' } = options;
+        super(label, edge, diagram);
+        this._endpointType = endpointType; // 'source' or 'target'
+        this._newSide = newSide;
+        this._oldSide = 'oldSide' in options ? options.oldSide : (endpointType === 'source' ? edge.sourceSide : edge.targetSide);
+    }
+
+    execute() {
+        this._apply(this._newSide);
+    }
+
+    undo() {
+        this._apply(this._oldSide);
+    }
+
+    _apply(side) {
+        const edge = this.edge;
+        if (!edge) return;
+        edge[this._endpointType === 'source' ? 'sourceSide' : 'targetSide'] = side;
+        this._redraw();
+        this.options.onEdgeSideChange?.(edge, this._endpointType, side);
+    }
+}

package/src/charting/diagrams/commands/index.js

@@ -0,0 +1,17 @@
+export { AddEdgeCommand } from './AddEdgeCommand.js';
+export { AddNodeCommand } from './AddNodeCommand.js';
+export { AddWaypointCommand } from './AddWaypointCommand.js';
+export { CreateFolderCommand } from './CreateFolderCommand.js';
+export { DeleteEdgeCommand } from './DeleteEdgeCommand.js';
+export { DeleteFolderCommand } from './DeleteFolderCommand.js';
+export { DeleteNodeCommand } from './DeleteNodeCommand.js';
+export { DeleteWaypointCommand } from './DeleteWaypointCommand.js';
+export { InvertEdgeCommand } from './InvertEdgeCommand.js';
+export { MoveNodeCommand } from './MoveNodeCommand.js';
+export { MoveWaypointCommand } from './MoveWaypointCommand.js';
+export { RenameEdgeCommand } from './RenameEdgeCommand.js';
+export { RenameFolderCommand } from './RenameFolderCommand.js';
+export { RenameNodeCommand } from './RenameNodeCommand.js';
+export { ResizeNodeCommand, NODE_SIZE_KEYS, nodeSize } from './ResizeNodeCommand.js';
+export { GraphCommand, EdgeCommand, WaypointCommand } from './GraphCommand.js';
+export { UpdateEdgeSideCommand } from './UpdateEdgeSideCommand.js';

package/src/charting/diagrams/duplicates.js

@@ -0,0 +1,49 @@
+/**
+ * When two elements are probably one thing twice: one definition for the
+ * model check (likely duplicates) and whatever offers to merge them.
+ *
+ * Names are compared by their words, ignoring case, punctuation, word order
+ * and filler words ("of", "and", "the", ...): "Order Management System",
+ * "order-management system" and "System of Order Management" match. A name
+ * that is only filler is compared as it is.
+ */
+
+/** Words that do not tell two names apart. */
+export const FILLER_WORDS = Object.freeze(['a', 'an', 'and', 'the', 'of', 'on', 'for', 'to', 'in', 'at', 'by', 'with', '&']);
+
+/** The words a name is compared by, as one key ('' for no name). */
+export function nameKey(name) {
+    const words = String(name ?? '').toLowerCase().replace(/[^\p{L}\p{N}&]+/gu, ' ').trim().split(/\s+/).filter(Boolean);
+    const meaningful = words.filter(w => !FILLER_WORDS.includes(w));
+    return [...new Set(meaningful.length ? meaningful : words)].sort().join(' ');
+}
+
+/**
+ * The elements that are probably the same thing twice: groups of two or more
+ * of one type whose names have the same key.
+ * @param {Array<Object>} elements
+ * @returns {Array<Array<Object>>}
+ */
+export function duplicateGroups(elements) {
+    const groups = new Map();
+    for (const e of elements) {
+        const key = nameKey(e.name);
+        if (!key) continue;
+        const k = `${e.type} ${key}`;
+        if (!groups.has(k)) groups.set(k, []);
+        groups.get(k).push(e);
+    }
+    return [...groups.values()].filter(g => g.length > 1);
+}
+
+/** A character class of these code-point ranges (written as numbers: such characters cannot sit in the source). */
+const charClass = (ranges, flags = '') => {
+    const escape = (code) => '\\u' + code.toString(16).padStart(4, '0');
+    return new RegExp('[' + ranges.map(([a, b = a]) => `${escape(a)}-${escape(b)}`).join('') + ']', flags);
+};
+
+/** Characters that should not be in a name (any control character) or documentation (one but tab and line breaks); zero-width spaces in either. */
+export const UNPRINTABLE = Object.freeze({
+    name: charClass([[0x00, 0x1f], [0x7f, 0x9f], [0x200b, 0x200f], [0x2028, 0x2029], [0xfeff]]),
+    documentation: charClass([[0x00, 0x08], [0x0b, 0x0c], [0x0e, 0x1f], [0x7f, 0x9f], [0x200b, 0x200f], [0xfeff]]),
+});

package/src/charting/diagrams/nesting.js

@@ -0,0 +1,30 @@
+import { ViewObjectInstance } from './ViewObjectInstance.js';
+
+/**
+ * Nesting: an element's box drawn inside another element's on a view (Archi's
+ * nested elements), which stands for a relationship from the parent to the
+ * child. One definition for the editor (what it offers when you nest) and the
+ * model check (nested elements with no such relationship).
+ */
+
+/** What nesting one element in another can stand for, in the order offered (Archi's defaults). */
+export const NESTING_KINDS = Object.freeze(['composition', 'aggregation', 'assignment', 'realization', 'specialization']);
+
+/**
+ * Each element box drawn inside another element's on a view.
+ * @param {ArchimateView} view
+ * @returns {Array<{view, parentElementId: string, childElementId: string, childInstanceId: string}>}
+ */
+export function viewNestings(view) {
+    const instances = [...(view.elementInstances?.values() ?? [])].filter(i => !(i instanceof ViewObjectInstance));
+    const byVisualId = new Map(instances.map(i => [i.visualId, i]));
+    return instances
+        .map(child => [child, byVisualId.get(child.nestedIn)])
+        .filter(([child, parent]) => parent && parent !== child)
+        .map(([child, parent]) => ({ view, parentElementId: parent.elementId, childElementId: child.elementId, childInstanceId: child.id }));
+}
+
+/** The model's relationships a nesting can stand for, from `parentId` to `childId`. */
+export function nestingRelationships(model, parentId, childId) {
+    return model.relationships().filter(r => r.source === parentId && r.target === childId && NESTING_KINDS.includes(r.kind));
+}

package/src/charting/diagrams/roadmap.js

@@ -0,0 +1,77 @@
+/**
+ * Roadmaps: elements with a start and an end date drawn as bars on a time
+ * line of months (as the roadMap jArchi script draws them), work packages,
+ * plateaus, projects and anything else with dates. Pure: where things go;
+ * ArchimateModel#generateRoadmap makes the view.
+ */
+
+const MONTHS = {
+    short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+};
+
+/**
+ * A date written in a property: ISO (2026-03-31, 2026-03), or day/month/year
+ * (31/03/2026, 31.3.2026). Null when it is not a date.
+ * @returns {Date|null} at midnight UTC
+ */
+export function parseDate(text) {
+    const s = String(text ?? '').trim();
+    let m = s.match(/^(\d{4})-(\d{1,2})(?:-(\d{1,2}))?/);
+    if (m) return valid(+m[1], +m[2], +(m[3] ?? 1));
+    m = s.match(/^(\d{1,2})[/.](\d{1,2})[/.](\d{4})$/);
+    if (m) return valid(+m[3], +m[2], +m[1]);
+    return null;
+}
+
+function valid(year, month, day) {
+    const d = new Date(Date.UTC(year, month - 1, day));
+    return d.getUTCFullYear() === year && d.getUTCMonth() === month - 1 && d.getUTCDate() === day ? d : null;
+}
+
+/**
+ * Where each part of a roadmap goes.
+ * @param {Array<{id: string, start: Date, end: Date}>} items
+ * @param {Object} [options]
+ * @param {number} [options.monthWidth] - A month's width
+ * @param {number} [options.barHeight]
+ * @param {number} [options.gap] - Between lanes
+ * @param {'short'|'full'} [options.monthNames]
+ * @param {{x: number, y: number}} [options.at] - The top-left corner
+ * @returns {{years: Array, months: Array, bars: Array<{id, x, y, width, height, lane}>, height: number}}
+ *   every part a box `{x, y, width, height}` (top-left), years and months with a `label`
+ */
+export function roadmapPlan(items, { monthWidth = 60, barHeight = 24, gap = 6, monthNames = 'short', at = { x: 20, y: 20 } } = {}) {
+    const dated = items.filter(i => i.start && i.end && i.end >= i.start);
+    if (!dated.length) return { years: [], months: [], bars: [], height: 0 };
+    const first = new Date(Math.min(...dated.map(i => i.start)));
+    const last = new Date(Math.max(...dated.map(i => i.end)));
+    const startYear = first.getUTCFullYear(), startMonth = first.getUTCMonth();
+    const monthCount = (last.getUTCFullYear() - startYear) * 12 + last.getUTCMonth() - startMonth + 1;
+    const headerHeight = 24;
+    const xOf = (date) => {
+        const months = (date.getUTCFullYear() - startYear) * 12 + date.getUTCMonth() - startMonth;
+        const days = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
+        return at.x + (months + (date.getUTCDate() - 1) / days) * monthWidth;
+    };
+
+    const months = [], years = [];
+    for (let i = 0; i < monthCount; i++) {
+        const year = startYear + Math.floor((startMonth + i) / 12), month = (startMonth + i) % 12;
+        months.push({ label: MONTHS[monthNames][month], x: at.x + i * monthWidth, y: at.y + headerHeight, width: monthWidth, height: headerHeight });
+        const y = years.at(-1);
+        if (y?.label === String(year)) y.width += monthWidth;
+        else years.push({ label: String(year), x: at.x + i * monthWidth, y: at.y, width: monthWidth, height: headerHeight });
+    }
+
+    // Earliest first (the longer first when they start together), each in the first lane free by its start.
+    const lanes = [];
+    const bars = [...dated].sort((a, b) => a.start - b.start || b.end - a.end).map(item => {
+        let lane = lanes.findIndex(end => end < item.start);
+        if (lane < 0) { lane = lanes.length; lanes.push(item.end); } else lanes[lane] = item.end;
+        const x = xOf(item.start);
+        const endX = xOf(new Date(item.end.getTime() + 86400000));   // through the end day
+        return { id: item.id, lane, x, y: at.y + 2 * headerHeight + gap + lane * (barHeight + gap), width: Math.max(8, endX - x), height: barHeight };
+    });
+    return { years, months, bars, height: 2 * headerHeight + gap + lanes.length * (barHeight + gap) };
+}

package/src/charting/edgeMarkers/ArrowMarker.js

@@ -0,0 +1,15 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** ArrowMarker — filled arrowhead; navigable association / flow direction. */
+export class ArrowMarker extends EdgeMarker {
+    static key = 'arrow';
+    static label = 'Arrow';
+
+    shapes(tip, dir, size, color) {
+        const at = (back, side) => EdgeMarker.at(tip, dir, back, side);
+        return [{
+            tag: 'polygon',
+            attrs: { points: EdgeMarker.points([tip, at(size * 1.25, size * 0.55), at(size * 1.25, -size * 0.55)]), fill: color },
+        }];
+    }
+}

package/src/charting/edgeMarkers/CircleMarker.js

@@ -0,0 +1,13 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** CircleMarker — filled dot touching the node. */
+export class CircleMarker extends EdgeMarker {
+    static key = 'circle';
+    static label = 'Circle';
+
+    shapes(tip, dir, size, color) {
+        const r = size / 2;
+        const c = EdgeMarker.at(tip, dir, r);
+        return [{ tag: 'circle', attrs: { cx: c.x, cy: c.y, r, fill: color } }];
+    }
+}

package/src/charting/edgeMarkers/CrowsFootMarker.js

@@ -0,0 +1,16 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** CrowsFootMarker — ER "many": three prongs fanning out from the edge to the node. */
+export class CrowsFootMarker extends EdgeMarker {
+    static key = 'crowsfoot';
+    static label = "Crow's Foot";
+
+    shapes(tip, dir, size, color) {
+        const vertex = EdgeMarker.at(tip, dir, size * 1.5);
+        const feet = [tip, EdgeMarker.at(tip, dir, 0, size * 0.8), EdgeMarker.at(tip, dir, 0, -size * 0.8)];
+        return feet.map(foot => ({
+            tag: 'line',
+            attrs: { x1: vertex.x, y1: vertex.y, x2: foot.x, y2: foot.y, stroke: color, 'stroke-width': 1.5 },
+        }));
+    }
+}

package/src/charting/edgeMarkers/DiamondMarker.js

@@ -0,0 +1,15 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** DiamondMarker — filled diamond (UML composition) with its point on the node. */
+export class DiamondMarker extends EdgeMarker {
+    static key = 'diamond';
+    static label = 'Diamond';
+
+    shapes(tip, dir, size, color) {
+        const at = (back, side) => EdgeMarker.at(tip, dir, back, side);
+        return [{
+            tag: 'polygon',
+            attrs: { points: EdgeMarker.points([tip, at(size, size * 0.5), at(size * 2, 0), at(size, -size * 0.5)]), fill: color },
+        }];
+    }
+}

package/src/charting/edgeMarkers/EdgeMarker.js

@@ -0,0 +1,34 @@
+/**
+ * EdgeMarker — glyph drawn where an edge meets a node (arrowhead, crow's foot, ...).
+ *
+ * Geometry is pure: shapes() returns element descriptors with the glyph's tip
+ * ON the node boundary and its body extending back along the edge, so no part
+ * of it is hidden under the node. `dir` is the unit direction in which the
+ * edge travels into the node at that end.
+ */
+export class EdgeMarker {
+    /** Stored value on an edge (`edge.startMarker` / `edge.endMarker`). */
+    static key = null;
+    /** Display name for pickers. */
+    static label = null;
+
+    /**
+     * @param {{x: number, y: number}} tip - Where the edge meets the node
+     * @param {{x: number, y: number}} dir - Unit direction of travel into the node
+     * @param {number} size - Nominal glyph size in canvas units
+     * @param {string} color
+     * @returns {Array<{tag: string, attrs: Object}>}
+     */
+    shapes(tip, dir, size, color) {
+        throw new Error(`${this.constructor.name} must implement shapes()`);
+    }
+
+    /** Point `back` units behind the tip along the edge, offset `side` units to its left. */
+    static at(tip, dir, back, side = 0) {
+        return { x: tip.x - dir.x * back - dir.y * side, y: tip.y - dir.y * back + dir.x * side };
+    }
+
+    static points(pts) {
+        return pts.map(p => `${p.x},${p.y}`).join(' ');
+    }
+}

package/src/charting/edgeMarkers/HalfArrowMarker.js

@@ -0,0 +1,8 @@
+import { OpenArrowMarker } from './OpenArrowMarker.js';
+
+/** HalfArrowMarker — a single barb at the node (ArchiMate's directed association). */
+export class HalfArrowMarker extends OpenArrowMarker {
+    static key = 'openarrowhalf';
+    static label = 'Half arrow';
+    static sides = [1];
+}

package/src/charting/edgeMarkers/HollowDiamondMarker.js

@@ -0,0 +1,18 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** HollowDiamondMarker — outlined diamond (aggregation) with its point on the node. */
+export class HollowDiamondMarker extends EdgeMarker {
+    static key = 'diamondhollow';
+    static label = 'Hollow diamond';
+
+    shapes(tip, dir, size, color, background = '#ffffff') {
+        const at = (back, side) => EdgeMarker.at(tip, dir, back, side);
+        return [{
+            tag: 'polygon',
+            attrs: {
+                points: EdgeMarker.points([tip, at(size, size * 0.5), at(size * 2, 0), at(size, -size * 0.5)]),
+                fill: background, stroke: color, 'stroke-width': 1.5,
+            },
+        }];
+    }
+}

package/src/charting/edgeMarkers/HollowTriangleMarker.js

@@ -0,0 +1,18 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** HollowTriangleMarker — outlined triangle (realization, specialization) with its point on the node. */
+export class HollowTriangleMarker extends EdgeMarker {
+    static key = 'trianglehollow';
+    static label = 'Hollow triangle';
+
+    shapes(tip, dir, size, color, background = '#ffffff') {
+        const at = (back, side) => EdgeMarker.at(tip, dir, back, side);
+        return [{
+            tag: 'polygon',
+            attrs: {
+                points: EdgeMarker.points([tip, at(size * 1.5, size * 0.75), at(size * 1.5, -size * 0.75)]),
+                fill: background, stroke: color, 'stroke-width': 1.5,
+            },
+        }];
+    }
+}

package/src/charting/edgeMarkers/OpenArrowMarker.js

@@ -0,0 +1,17 @@
+import { EdgeMarker } from './EdgeMarker.js';
+
+/** OpenArrowMarker — two strokes meeting at the node (serving, access, influence). */
+export class OpenArrowMarker extends EdgeMarker {
+    static key = 'openarrow';
+    static label = 'Open arrow';
+
+    /** Sides the barbs sit on: both. */
+    static sides = [1, -1];
+
+    shapes(tip, dir, size, color) {
+        return this.constructor.sides.map(side => {
+            const barb = EdgeMarker.at(tip, dir, size * 1.25, side * size * 0.6);
+            return { tag: 'line', attrs: { x1: tip.x, y1: tip.y, x2: barb.x, y2: barb.y, stroke: color, 'stroke-width': 1.5 } };
+        });
+    }
+}

package/src/charting/edgeMarkers/index.js

@@ -0,0 +1,27 @@
+import { ArrowMarker } from './ArrowMarker.js';
+import { DiamondMarker } from './DiamondMarker.js';
+import { CircleMarker } from './CircleMarker.js';
+import { CrowsFootMarker } from './CrowsFootMarker.js';
+import { HollowDiamondMarker } from './HollowDiamondMarker.js';
+import { HollowTriangleMarker } from './HollowTriangleMarker.js';
+import { OpenArrowMarker } from './OpenArrowMarker.js';
+import { HalfArrowMarker } from './HalfArrowMarker.js';
+
+export { EdgeMarker } from './EdgeMarker.js';
+export { ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker };
+
+/** Marker instances in picker order. */
+export const EDGE_MARKERS = [
+    new ArrowMarker(), new OpenArrowMarker(), new HalfArrowMarker(), new HollowTriangleMarker(),
+    new DiamondMarker(), new HollowDiamondMarker(), new CircleMarker(), new CrowsFootMarker(),
+];
+
+/**
+ * Marker for a stored `edge.startMarker` / `edge.endMarker` value, or null for
+ * none/unknown. Case and punctuation are ignored, so "Crow's Foot",
+ * "crows foot" and "crowsfoot" all resolve to the same marker.
+ */
+export function getEdgeMarker(value) {
+    const key = String(value ?? '').toLowerCase().replace(/[^a-z]/g, '');
+    return EDGE_MARKERS.find(m => m.constructor.key === key) ?? null;
+}

package/src/charting/edgeStyle/EdgeStyleCascade.js

@@ -0,0 +1,22 @@
+import { SettingsCascade } from '../SettingsCascade.js';
+import { EDGE_STYLE_PROPERTIES } from './EdgeStyleSchema.js';
+
+/**
+ * EdgeStyleCascade — a SettingsCascade over the line-style schema, where the
+ * line itself is always the first (most specific) level.
+ */
+export class EdgeStyleCascade extends SettingsCascade {
+    constructor(levels = [], properties = EDGE_STYLE_PROPERTIES) {
+        super(levels, properties);
+    }
+
+    /** Effective style for a line, plus where each value came from. */
+    resolve(edge) {
+        return this.resolveWith({ key: 'line', label: 'This line', style: edge ?? {} });
+    }
+
+    /** What a level inherits; 'line' means a line with no overrides of its own. */
+    inheritedBy(levelKey) {
+        return super.inheritedBy(levelKey === 'line' ? null : levelKey);
+    }
+}

package/src/charting/edgeStyle/EdgeStyleDialog.js

@@ -0,0 +1,51 @@
+import { FormDialog } from '../FormDialog.js';
+import { inheritableFields } from '../SettingsCascade.js';
+
+/**
+ * EdgeStyleDialog — edit one style holder: a single line, or a level's defaults
+ * (diagram, model, tool). A FormDialog whose fields come from the schema;
+ * cascading fields offer "Inherit", labelled with the value and the level it
+ * would come from.
+ */
+export class EdgeStyleDialog {
+    /**
+     * @param {Object} options
+     * @param {string} options.title
+     * @param {Object} options.target - Current values (unset keys inherit)
+     * @param {ReadonlyArray<Object>} options.properties - Cascading schema properties
+     * @param {{style: Object, sources: Object}} options.inherited - What unset values resolve to
+     * @param {ReadonlyArray<Object>} [options.fixedProperties] - Non-cascading properties (line only)
+     * @param {Array<Object>} [options.extraFields] - More FormDialog fields after those (e.g. what the line stands for);
+     *   their values come to onApply too
+     * @param {(patch: Object) => void} options.onApply - Receives every shown key; undefined = inherit
+     * @param {Document} [options.document]
+     */
+    constructor({ title, target, properties, inherited, fixedProperties = [], extraFields = [], onApply, document: doc }) {
+        const fixed = fixedProperties.map(p => ({ ...p, value: target[p.key] ?? p.default }));
+        const cascading = inheritableFields(properties, target, inherited);
+        this.dialog = new FormDialog({
+            title,
+            fields: [...fixed, ...extraFields, ...(extraFields.length ? [{ type: 'heading', label: 'Line style' }] : []), ...cascading],
+            idPrefix: 'edge-style-',
+            document: doc,
+            onApply: (values) => {
+                // A line-only field left at its default is stored as unset.
+                for (const p of fixedProperties) if (values[p.key] === p.default) values[p.key] = undefined;
+                onApply(values);
+            },
+        });
+    }
+
+    open() {
+        this.dialog.open();
+        return this;
+    }
+
+    close() {
+        this.dialog.close();
+    }
+
+    get overlay() {
+        return this.dialog.overlay;
+    }
+}

package/src/charting/edgeStyle/EdgeStyleSchema.js

@@ -0,0 +1,43 @@
+/**
+ * EdgeStyleSchema — the line properties that cascade (line → diagram → model →
+ * tool → built-in default), and the line-only properties that do not.
+ *
+ * Pure data: the cascade, the property dialogs and Edge#clone all read these
+ * lists, so adding a property here is the whole change. Vocabulary matches
+ * GraphDiagram/ArchiMate (`routing`, `lineStyle`, marker names).
+ */
+import { EDGE_MARKERS } from '../edgeMarkers/index.js';
+
+/** Dash pattern per `lineStyle`; shared with GraphDiagram so both draw identically. */
+export const LINE_STYLE_DASH = Object.freeze({ solid: null, dashed: '5 4', dotted: '1.5 3' });
+
+const MARKER_CHOICES = [['none', 'None'], ...EDGE_MARKERS.map(m => [m.constructor.key, m.constructor.label])];
+
+/** Cascading properties: unset (undefined) on a level means "inherit". */
+export const EDGE_STYLE_PROPERTIES = Object.freeze([
+    {
+        key: 'routing', label: 'Routing', type: 'select', default: 'straight',
+        choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
+    },
+    {
+        key: 'attach', label: 'Attach to', type: 'select', default: 'floating',
+        choices: [['floating', 'Outline, aimed at the other end'], ['sides', 'Middle of the facing side']],
+    },
+    {
+        key: 'lineStyle', label: 'Line', type: 'select', default: 'solid',
+        choices: [['solid', 'Solid'], ['dashed', 'Dashed'], ['dotted', 'Dotted']],
+    },
+    { key: 'strokeColor', label: 'Colour', type: 'color', default: '#666666' },
+    { key: 'strokeWidth', label: 'Width', type: 'number', default: 2, min: 1, max: 10 },
+    { key: 'startMarker', label: 'Start', type: 'select', default: 'none', choices: MARKER_CHOICES },
+    { key: 'endMarker', label: 'End', type: 'select', default: 'none', choices: MARKER_CHOICES },
+]);
+
+const SIDE_CHOICES = [['auto', 'Automatic'], ['top', 'Top'], ['right', 'Right'], ['bottom', 'Bottom'], ['left', 'Left']];
+
+/** Properties that only make sense on one particular line. */
+export const LINE_ONLY_PROPERTIES = Object.freeze([
+    { key: 'label', label: 'Label', type: 'text', default: '' },
+    { key: 'sourceSide', label: 'Start side', type: 'select', default: 'auto', choices: SIDE_CHOICES },
+    { key: 'targetSide', label: 'End side', type: 'select', default: 'auto', choices: SIDE_CHOICES },
+]);

package/src/charting/edgeStyle/SetStyleCommand.js

@@ -0,0 +1,12 @@
+import { SetPropertiesCommand } from '../DiagramEditorCommands.js';
+
+/**
+ * SetStyleCommand — a SetPropertiesCommand on a style holder (a line, or a
+ * level's style object). An `undefined` value removes the key, which in a
+ * cascade means "inherit".
+ */
+export class SetStyleCommand extends SetPropertiesCommand {
+    constructor(target, patch, label = 'Change line style') {
+        super(target, patch, label);
+    }
+}