@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/archimate/ArchimateCsvFileFormat.js

@@ -0,0 +1,35 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { ArchimateModel } from '../diagrams/ArchimateModel.js';
+import { exportModelCSV, importModelCSV } from '../../archimateCSV.js';
+
+/** Where each table starts in the one file: elements, then relationships. */
+const ELEMENTS_HEADER = '=== elements.csv ===\n';
+const RELATIONSHIPS_HEADER = '=== relationships.csv ===\n';
+
+/**
+ * The model's elements and relationships as CSV, both tables in one file
+ * (exportModelCSV's columns). A CSV holds no views: import gives a model of
+ * its elements and relationships with one view of them all, laid out.
+ */
+export class ArchimateCsvFileFormat extends ModelFileFormat {
+    get label() { return 'CSV'; }
+    get accept() { return '.csv'; }
+    get fileName() { return 'model.csv'; }
+    get featureName() { return 'CSV'; }
+
+    export(model) {
+        const { elementsCSV, relationshipsCSV } = exportModelCSV({ elements: model.elements(), relationships: model.relationships() });
+        return { data: `${ELEMENTS_HEADER}${elementsCSV}\n\n${RELATIONSHIPS_HEADER}${relationshipsCSV}`, mimeType: 'text/csv' };
+    }
+
+    import(text) {
+        const normal = String(text).replace(/\r\n?/g, '\n');
+        const at = normal.indexOf(RELATIONSHIPS_HEADER);
+        const elementsCSV = (at < 0 ? normal : normal.slice(0, at)).replace(ELEMENTS_HEADER, '').trim();
+        const relationshipsCSV = at < 0 ? '' : normal.slice(at + RELATIONSHIPS_HEADER.length).trim();
+        const { elements, relationships } = importModelCSV(elementsCSV, relationshipsCSV);
+        const model = new ArchimateModel({ elements, relationships, views: [] });
+        if (elements.length) model.generateView(elements.map(e => e.id), { name: 'Imported elements' });
+        return model;
+    }
+}

package/src/charting/archimate/ArchimateEdge.js

@@ -0,0 +1,137 @@
+import { Edge } from '../Edge.js';
+import { EDGE_STYLE_PROPERTIES } from '../edgeStyle/EdgeStyleSchema.js';
+import { ArchimateNotation } from '../../archimate.js';
+
+/** Style keys the relationship's kind decides: the notation. */
+const NOTATION_KEYS = ['lineStyle', 'startMarker', 'endMarker'];
+
+/**
+ * ArchimateEdge — one relationship on an ArchiMate view, as an editor line.
+ * Like ArchimateElementTemplate it keeps no copy of its own: the route (bend
+ * points, pinned sides) and the line's own style are read from and written to
+ * its RelationshipInstance, so the editor's waypoint, side and style commands
+ * edit the view and undo there.
+ *
+ * Its notation — dashes and end markers — comes from the relationship's kind
+ * (ArchimateRelationshipType#edgeStyle) and cannot be set on the line; change
+ * the kind instead. The other style properties (routing, attach, colour,
+ * width) may be set per line, and unset means inherit (EdgeStyleCascade).
+ */
+export class ArchimateEdge extends Edge {
+    /**
+     * @param {RelationshipInstance} instance
+     * @param {ArchimateView} view - Resolves the ends when the instance does not pin them
+     */
+    constructor(instance, view) {
+        super(instance.id, undefined, undefined, {});
+        this.instance = instance;
+        this.view = view;
+    }
+
+    /** Ends, label, route and visibility live on the instance and the model relationship. @protected */
+    _initState() {}
+
+    /** The model relationship this line shows. */
+    get relationship() {
+        return this.view.model.getRelationship(this.instance.relationshipId);
+    }
+
+    /** The relationship's notation as line style values. */
+    get notation() {
+        const kind = ArchimateNotation.relationshipType(this.relationship?.kind) ?? ArchimateNotation.relationshipType('association');
+        return kind.edgeStyle();
+    }
+
+    // The ends: the instances this pairing joins, or the first of each element.
+    get sourceId() {
+        return this.instance.sourceInstanceId ?? this.view.elementInstancesFor(this.relationship?.source)[0]?.id;
+    }
+    set sourceId(_) { this._notHere('its ends; reconnect the relationship in the model'); }
+    get targetId() {
+        return this.instance.targetInstanceId ?? this.view.elementInstancesFor(this.relationship?.target)[0]?.id;
+    }
+    set targetId(_) { this._notHere('its ends; reconnect the relationship in the model'); }
+
+    get label() { return this.relationship?.label ?? this.relationship?.name ?? ''; }
+    set label(value) {
+        if (this.relationship) this.relationship.label = value || undefined;
+    }
+
+    /** This view's bend points, or the relationship's own when the view has none. */
+    get waypoints() {
+        return this.instance.waypoints ?? (this.relationship?.waypoints ?? []).map(({ x, y }) => ({ x, y }));
+    }
+    set waypoints(points) {
+        this.instance.waypoints = (points ?? []).map(({ x, y }) => ({ x, y }));
+    }
+
+    /** The view's own copy of the route, made on first edit so an inherited route is not changed in the model. @private */
+    _ownWaypoints() {
+        if (!this.instance.waypoints) this.instance.waypoints = this.waypoints;
+        return this.instance.waypoints;
+    }
+
+    addWaypoint(x, y, index = this.waypoints.length) {
+        this._ownWaypoints().splice(index, 0, { x, y });
+    }
+
+    removeWaypoint(index) {
+        const points = this._ownWaypoints();
+        if (index >= 0 && index < points.length) points.splice(index, 1);
+    }
+
+    moveWaypoint(index, x, y) {
+        const points = this._ownWaypoints();
+        if (index >= 0 && index < points.length) points[index] = { x, y };
+    }
+
+    clearWaypoints() {
+        this.instance.waypoints = [];
+    }
+
+    get sourceSide() { return this.instance.sourceSide ?? 'auto'; }
+    set sourceSide(side) { this.instance.sourceSide = side && side !== 'auto' ? side : null; }
+    get targetSide() { return this.instance.targetSide ?? 'auto'; }
+    set targetSide(side) { this.instance.targetSide = side && side !== 'auto' ? side : null; }
+
+    get visible() { return this.instance.visible; }
+    set visible(value) { this.instance.visible = value !== false; }
+
+    /** Every style property but the notation, which the relationship's kind decides. */
+    get styleProperties() {
+        return EDGE_STYLE_PROPERTIES.filter(p => !NOTATION_KEYS.includes(p.key));
+    }
+
+    /** A plain Edge with this line's current route and style (e.g. for a template-editor copy). */
+    clone() {
+        return new Edge(this.id, this.sourceId, this.targetId, {
+            label: this.label, waypoints: this.waypoints, sourceSide: this.sourceSide, targetSide: this.targetSide,
+            visible: this.visible, ...this.styleOverrides(),
+        });
+    }
+
+    /** @private */
+    _notHere(what) {
+        throw new TypeError(`An ArchiMate line does not set ${what}`);
+    }
+}
+
+// Style properties: the notation from the kind (read-only), the rest per line on the instance.
+for (const { key } of EDGE_STYLE_PROPERTIES) {
+    Object.defineProperty(ArchimateEdge.prototype, key, NOTATION_KEYS.includes(key)
+        ? {
+            get() { return this.notation[key]; },
+            set() { this._notHere(`${key}: it comes from the relationship's kind`); },
+            configurable: true,
+        }
+        : {
+            get() { return this.instance.appearance[key]; },
+            set(value) {
+                if (value === undefined) delete this.instance.appearance[key];
+                else this.instance.appearance = { ...this.instance.appearance, [key]: value };
+            },
+            configurable: true,
+        });
+}
+
+ArchimateEdge.NOTATION_KEYS = NOTATION_KEYS;

package/src/charting/archimate/ArchimateElementTemplate.js

@@ -0,0 +1,195 @@
+import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
+import { GlyphTemplate } from '../templates/GlyphTemplate.js';
+import { Glyph } from '../glyphs/Glyph.js';
+import { glyphFor } from '../glyphs/index.js';
+import { ArchimateDiagram } from '../diagrams/ArchimateDiagram.js';
+import { LabelHelper } from '../diagrams/LabelHelper.js';
+
+/** Paint a view can set on one occurrence: template property → appearance key (same names). */
+const APPEARANCE = ['fillColor', 'fillOpacity', 'strokeColor', 'strokeWidth', 'textColor', ...TEXT_STYLE_KEYS];
+
+/**
+ * ArchimateElementTemplate — one element (or note, or image) on an ArchiMate
+ * view, as an editor template. It keeps no copy of its own: position, size,
+ * stacking and paint are read from and written to its ElementInstance, and
+ * what it looks like comes from the model element through the same
+ * enrichment the graph engine uses (ArchimateDiagram.buildNode: layer colour,
+ * corner style, notation shape, type badge, label position). So every editor
+ * command that moves, resizes, restacks or repaints a template edits the view
+ * itself, and its undo does too.
+ *
+ * The shape is the node's glyph: a box (sharp, rounded or chamfered by
+ * aspect) with the type's glyph as a corner badge, or the full notation shape
+ * when distinct shapes are on; notes and images draw their own glyph.
+ */
+export class ArchimateElementTemplate extends GlyphTemplate {
+    /** ArchiMate notation is not rotated. */
+    static rotatable = false;
+
+    /** The format painter copies its appearance (what the view's instance holds). */
+    static formatKeys = Object.freeze([...APPEARANCE]);
+
+    /**
+     * @param {ElementInstance} instance - What this template shows, and where
+     * @param {ArchimateModel} model
+     * @param {Object} [options]
+     * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options
+     *   (archimateVersion, useDistinctShapes, layerColors, elementWidth, ...)
+     */
+    constructor(instance, model, { nodeOptions = {} } = {}) {
+        super(instance.id, undefined, {});
+        this.instance = instance;
+        this.model = model;
+        this.nodeOptions = nodeOptions;
+    }
+
+    /** State lives on the instance and the model element, not here. @protected */
+    _initState() {}
+
+    /** The element as the ArchiMate notation draws it on this view. */
+    get node() {
+        const projected = this.instance.project(this.model) ?? { id: this.instance.id, name: this.instance.elementId };
+        return ArchimateDiagram.buildNode(projected, this.nodeOptions);
+    }
+
+    get name() { return this.instance.getDisplayName(this.model); }
+    /** Renaming one occurrence labels it on this view; the element's own name is left alone. */
+    set name(value) {
+        const own = this.instance.resolve(this.model)?.name;
+        this.instance.labelOverride = value && value !== own ? value : null;
+    }
+
+    get x() { return this.instance.x; }
+    set x(value) { this.instance.x = value; }
+    get y() { return this.instance.y; }
+    set y(value) { this.instance.y = value; }
+    get zIndex() { return this.instance.zIndex; }
+    set zIndex(value) { this.instance.zIndex = value ?? 0; }
+    get visible() { return this.instance.visible; }
+    set visible(value) { this.instance.visible = value !== false; }
+
+    get width() { return this.node.width; }
+    set width(value) { this._setSize('width', value); }
+    get height() { return this.node.height; }
+    set height(value) { this._setSize('height', value); }
+
+    get fillColor() { return this.node.color; }
+    set fillColor(value) { this._setAppearance('fillColor', value); }
+    get fillOpacity() { return this.instance.appearance.fillOpacity ?? 1; }
+    set fillOpacity(value) { this._setAppearance('fillOpacity', value); }
+    get strokeColor() { return this.node.strokeColor; }
+    set strokeColor(value) { this._setAppearance('strokeColor', value); }
+    get strokeWidth() { return this.node.strokeWidth; }
+    set strokeWidth(value) { this._setAppearance('strokeWidth', value); }
+    get textColor() { return this.instance.appearance.textColor ?? '#222'; }
+    set textColor(value) { this._setAppearance('textColor', value); }
+    get fontFamily() { return this.instance.appearance.fontFamily; }
+    set fontFamily(value) { this._setAppearance('fontFamily', value); }
+    get fontSize() { return this.instance.appearance.fontSize; }
+    set fontSize(value) { this._setAppearance('fontSize', value); }
+    get fontWeight() { return this.instance.appearance.fontWeight; }
+    set fontWeight(value) { this._setAppearance('fontWeight', value); }
+    get fontStyle() { return this.instance.appearance.fontStyle; }
+    set fontStyle(value) { this._setAppearance('fontStyle', value); }
+    get textDecoration() { return this.instance.appearance.textDecoration; }
+    set textDecoration(value) { this._setAppearance('textDecoration', value); }
+    get textAlign() { return this.instance.appearance.textAlign; }
+    set textAlign(value) { this._setAppearance('textAlign', value); }
+    get textPosition() { return this.instance.appearance.textPosition; }
+    set textPosition(value) { this._setAppearance('textPosition', value); }
+
+    /**
+     * What this occurrence sets itself for a property (undefined when it shows
+     * the element's own), for commands that must undo to "unset".
+     */
+    ownProperty(key) {
+        if (APPEARANCE.includes(key)) return this.instance.appearance[key];
+        if (key === 'width' || key === 'height') return this.instance.size[key];
+        if (key === 'name') return this.instance.labelOverride ?? undefined;
+        return this[key];
+    }
+
+    /** undefined puts the occurrence back on the element's own value. @private */
+    _setSize(key, value) {
+        if (value === undefined) delete this.instance.size[key];
+        else this.instance.size = { ...this.instance.size, [key]: value };
+    }
+
+    /** @private */
+    _setAppearance(key, value) {
+        if (!APPEARANCE.includes(key)) throw new TypeError(`Not an appearance property: ${key}`);
+        if (value === undefined) delete this.instance.appearance[key];
+        else this.instance.appearance = { ...this.instance.appearance, [key]: value };
+    }
+
+    glyph() {
+        return glyphFor(this.node.shape);
+    }
+
+    glyphContext() {
+        const node = this.node;
+        return Glyph.context({
+            R: Math.max(node.width, node.height) / 2,
+            size: { w: node.width, h: node.height },
+            color: node.color,
+            cornerStyle: node.cornerStyle,
+            strokeColor: node.strokeColor,
+            strokeWidth: node.strokeWidth,
+            icon: node.icon,
+            iconUrl: node.iconUrl,
+            ownFill: this.instance.appearance.fillColor ?? null,
+        });
+    }
+
+    /**
+     * The type badge in the top-right corner: its glyph, or an icon (text or
+     * image). As in the graph engine, a notation shape gets no glyph badge
+     * (buildNode leaves iconShape unset) but keeps an icon the element sets.
+     */
+    decorations(ctx) {
+        const node = this.node;
+        const { w, h } = ctx;
+        if (node.iconShape) {
+            const badge = Math.max(10, Math.round(Math.min(w, h) * 0.3));
+            const inset = badge / 2 + 3;
+            const parts = glyphFor(node.iconShape).parts(Glyph.context({
+                R: badge / 2, size: { w: badge, h: badge * 0.78 }, color: 'none', strokeColor: node.strokeColor || '#000000', strokeWidth: 1,
+            }));
+            return [Glyph.group([parts], { transform: `translate(${w / 2 - inset},${-h / 2 + inset})`, 'pointer-events': 'none' })];
+        }
+        if (node.icon || node.iconUrl) {
+            const size = Math.max(12, Math.round(Math.min(w, h) * 0.3));
+            const bx = w / 2 - (size / 2 + 2), by = -h / 2 + (size / 2 + 2);
+            return [node.iconUrl
+                ? Glyph.image(node.iconUrl, bx - size / 2, by - size / 2, size, size, { 'pointer-events': 'none' })
+                : Glyph.text(node.icon, bx, by, { fill: node.strokeColor || '#fff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: `${size}px`, 'pointer-events': 'none' })];
+        }
+        return [];
+    }
+
+    /** The name inside the box (wrapped, top-left) or below a notation shape; images have none. */
+    _renderLabel(g, doc) {
+        const node = this.node;
+        if (node.shape === 'image') return;
+        const text = (x, y, content, attrs) => {
+            const t = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+            for (const [k, v] of Object.entries({ x, y, 'pointer-events': 'none', 'font-family': 'sans-serif', ...attrs })) t.setAttribute(k, String(v));
+            t.textContent = content;
+            g.appendChild(t);
+        };
+        const { width: w, height: h } = node;
+        const inside = (node.labelPosition || (node.shape === 'note' ? 'inside' : 'below')) === 'inside';
+        if (inside) {
+            const font = TextStyle.svgAttributes(this.textStyle, { defaultPixels: 10 });
+            const PAD = 6, FONT_SIZE = font['font-size'], LINE_HEIGHT = Math.round(FONT_SIZE * 1.2);
+            const lines = LabelHelper.wrapLabelLines(this.name, w - PAD * 2, FONT_SIZE, h - PAD * 2, LINE_HEIGHT);
+            // Top left unless the occurrence says otherwise, as in Archi.
+            const at = TextStyle.block(this.textStyle, { left: this.x - w / 2, right: this.x + w / 2, top: this.y - h / 2, bottom: this.y + h / 2 },
+                lines.length, { pixels: FONT_SIZE, lineHeight: LINE_HEIGHT, pad: PAD });
+            lines.forEach((line, i) => text(at.x, at.baseline + i * LINE_HEIGHT, line,
+                { ...font, fill: this.textColor, 'font-size': `${FONT_SIZE}px`, 'text-anchor': at.textAnchor }));
+        } else {
+            text(this.x, this.y + h / 2 + 9, this.name, { fill: '#333', 'font-size': '9px', 'text-anchor': 'middle' });
+        }
+    }
+}

package/src/charting/archimate/ArchimatePalette.js

@@ -0,0 +1,102 @@
+import { el } from '../../workspace/dom.js';
+import { ArchimateViewpoints } from '../../archimate.js';
+import { ARCHIMATE_TYPE_MIME, typeTitle as TITLE } from './archimateNames.js';
+import { elementTypeGroups } from './elementTypeGroups.js';
+import { typeGlyph } from './typeGlyph.js';
+
+
+/**
+ * ArchimatePalette — the ArchiMate element types, grouped by layer in the
+ * notation's own order, each a tile showing its notation glyph in its layer
+ * colour (its name on hover). Drag a tile onto the canvas (ARCHIMATE_TYPE_MIME carries the type)
+ * or click it (`onPick`) to add an element of that type. With a viewpoint,
+ * only the types it allows are offered, as in Archi.
+ */
+export class ArchimatePalette {
+    /**
+     * Tiles (one place, for every palette): a picture only, `columns` to a row,
+     * its name on hover. A tile is there to say which type to drag, so it is small.
+     */
+    static TILE = Object.freeze({ icon: 22, columns: 4, padding: '3px 1px', gap: '3px' });
+
+    /**
+     * The groups for a version: each layer that has types, then ArchiMate 4's
+     * common behaviour types (no layer of their own).
+     * @returns {Array<{key: string, label: string, types: ArchimateElementType[]}>}
+     */
+    static groups(version = '4') {
+        return elementTypeGroups(version);
+    }
+
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.version] - ArchiMate version ('4' or '3.2')
+     * @param {(typeName: string) => void} [options.onPick] - A tile was clicked
+     * @param {Document} [options.document]
+     * @param {string} [options.viewpoint] - Offer only the types this viewpoint allows ('All' or none: every type)
+     * @param {Array<Object>} [options.customViewpoints]
+     */
+    constructor({ version = '4', onPick = () => {}, document: doc = globalThis.document, viewpoint = null, customViewpoints = [] } = {}) {
+        this.version = version;
+        this.viewpoint = viewpoint && viewpoint !== 'All' ? viewpoint : null;
+        this.customViewpoints = customViewpoints;
+        this.onPick = onPick;
+        this.doc = doc;
+    }
+
+    /** A small picture of a type: its notation glyph, filled with its colour. */
+    preview(type, size = this.constructor.TILE.icon) {
+        return typeGlyph(type.name, { size, version: this.version, document: this.doc });
+    }
+
+    /** Render into a container (replacing what it held). */
+    render(container) {
+        const { TILE } = this.constructor;
+        const tile = (type) => ({
+            attrs: { draggable: 'true', title: type.description ? `${this.itemTitle(type)}: ${type.description}` : this.itemTitle(type), 'aria-label': this.itemTitle(type), 'data-palette-item': this.itemKey(type), ...(type.name && { 'data-archimate-type': type.name }) },
+            style: {
+                display: 'flex', alignItems: 'center', justifyContent: 'center', padding: TILE.padding,
+                border: '1px solid #ddd', borderRadius: '4px', background: '#fff', cursor: 'grab',
+            },
+            on: {
+                dragstart: (e) => { e.dataTransfer.setData(this.dragType, this.itemKey(type)); e.dataTransfer.effectAllowed = 'copy'; },
+                click: () => this.onPick(this.itemKey(type)),
+            },
+            children: [this.preview(type)],
+        });
+        const group = ({ key, label, types }) => ({
+            tag: 'details', attrs: { open: true, 'data-archimate-layer': key }, style: { marginBottom: '6px' },
+            children: [
+                { tag: 'summary', text: label, style: { fontWeight: 'bold', fontSize: '12px', cursor: 'pointer', margin: '4px 0' } },
+                { style: { display: 'grid', gridTemplateColumns: `repeat(${TILE.columns}, 1fr)`, gap: TILE.gap }, children: types.map(tile) },
+            ],
+        });
+        container.replaceChildren(el({ style: { overflowY: 'auto', height: '100%' }, children: this.paletteGroups().map(group) }, this.doc));
+        return container;
+    }
+
+    // What a subclass (CanvasPalette) changes: its groups, and how a tile names, shows and drags its item.
+
+    /** The groups of tiles: `[{key, label, types}]`, narrowed to the viewpoint's types (empty groups go). */
+    paletteGroups() {
+        const groups = ArchimatePalette.groups(this.version);
+        if (!this.viewpoint) return groups;
+        const allowed = new Set(ArchimateViewpoints.allowedElementTypes(this.viewpoint, this.version, this.customViewpoints));
+        return groups.map(g => ({ ...g, types: g.types.filter(t => allowed.has(t.name)) })).filter(g => g.types.length);
+    }
+
+    /** The data type a dragged tile carries (the editor's drop handler accepts it). */
+    get dragType() {
+        return ARCHIMATE_TYPE_MIME;
+    }
+
+    /** What a tile picks or drags: an element type's name. */
+    itemKey(type) {
+        return type.name;
+    }
+
+    /** A tile's caption. */
+    itemTitle(type) {
+        return TITLE(type.name);
+    }
+}

package/src/charting/archimate/CsvImportDialog.js

@@ -0,0 +1,105 @@
+import { FormDialog } from '../FormDialog.js';
+import { ArchimateNotation } from '../../archimate.js';
+import { parseCsvTable } from '../../csvTable.js';
+import { planCsvImport } from './csvMapping.js';
+import { ImportRowsCommand } from '../diagrams/ImportRowsCommand.js';
+import { typeTitle } from './archimateNames.js';
+
+const KINDS = ['serving', 'realization', 'assignment', 'composition', 'aggregation', 'access', 'flow', 'triggering', 'influence', 'specialization', 'association'];
+
+/**
+ * Import CSV with mapping…: a spreadsheet's rows into the open model (they
+ * add to it, never replace it), the columns chosen in one dialog (csvMapping.js),
+ * the new elements placed on the current view. One undo step on the model's
+ * history; rows that could not be read are reported after.
+ */
+export class CsvImportDialog {
+    /**
+     * @param {Object} options
+     * @param {ArchimateModel} options.model
+     * @param {ArchimateView} [options.view] - Where the new elements are placed
+     * @param {string} [options.version]
+     * @param {Document} [options.document]
+     * @param {(result) => void} [options.onDone] - After the import (redraw)
+     */
+    constructor({ model, view = null, version = '4', document: doc = globalThis.document, onDone = () => {} }) {
+        Object.assign(this, { model, view, version, doc, onDone });
+    }
+
+    /** The column a header is most likely to mean, by a pattern; '' when none. */
+    static guess(columns, pattern) {
+        return columns.find(c => pattern.test(c)) ?? '';
+    }
+
+    /** The mapping a first look at the columns suggests (Name, Type, ID, Documentation; the rest are properties). */
+    static suggest(columns) {
+        const name = CsvImportDialog.guess(columns, /^name$/i) || CsvImportDialog.guess(columns, /name/i) || columns[0] || '';
+        const type = CsvImportDialog.guess(columns, /^(type|kind|class)$/i);
+        const id = CsvImportDialog.guess(columns, /^id$/i);
+        const documentation = CsvImportDialog.guess(columns, /^(documentation|description|notes?)$/i);
+        const used = new Set([name, type, id, documentation]);
+        return { name, type, id, documentation, properties: columns.filter(c => !used.has(c)) };
+    }
+
+    /** The mapping a dialog's values describe. */
+    static mapping(values) {
+        return {
+            name: values.name, type: values.type || null, fixedType: values.fixedType, id: values.id || null,
+            documentation: values.documentation || null, properties: values.properties ?? [],
+            related: values.related || null, relatedKind: values.relatedKind, relatedDirection: values.relatedDirection,
+        };
+    }
+
+    /** Ask how the columns map, then import. */
+    open(text) {
+        const table = parseCsvTable(text);
+        if (!table.columns.length || !table.rows.length) return this.tell('The file has no rows to import.');
+        const { columns } = table;
+        const s = CsvImportDialog.suggest(columns);
+        const none = (label) => [['', label], ...columns.map(c => [c, c])];
+        const types = ArchimateNotation.elementTypeNames(this.version).map(t => [t, typeTitle(t)]);
+        return new FormDialog({
+            title: `Import CSV: ${table.rows.length} rows`,
+            description: 'Rows become elements, added to the model. A row whose id, or name and type, is an element already updates it.',
+            fields: [
+                { key: 'name', label: 'Name', type: 'select', value: s.name, choices: columns.map(c => [c, c]) },
+                { key: 'type', label: 'Type', type: 'select', value: s.type, choices: none('(the same for every row)') },
+                { key: 'fixedType', label: 'Every row is a', type: 'select', value: 'application-component', choices: types, hint: 'When no column holds the type' },
+                { key: 'id', label: 'Id', type: 'select', value: s.id, choices: none('(none: by name and type)') },
+                { key: 'documentation', label: 'Documentation', type: 'select', value: s.documentation, choices: none('(none)') },
+                { key: 'properties', label: 'Properties', type: 'checklist', value: s.properties, choices: columns.map(c => [c, c]) },
+                { type: 'heading', label: 'Relationships' },
+                { key: 'related', label: 'Related to', type: 'select', value: '', choices: none('(none)'), hint: 'Names or ids, several split by ";"' },
+                { key: 'relatedKind', label: 'As', type: 'select', value: 'serving', choices: KINDS.map(k => [k, typeTitle(k)]) },
+                { key: 'relatedDirection', label: 'Direction', type: 'select', value: 'out', choices: [['out', 'From the row to them'], ['in', 'From them to the row']] },
+                { key: 'place', label: 'Put new elements on this view', type: 'checkbox', value: !!this.view },
+            ],
+            submitLabel: 'Import',
+            idPrefix: 'csv-import-',
+            document: this.doc,
+            validate: (values) => {
+                const plan = planCsvImport(table, CsvImportDialog.mapping(values), this.model, { version: this.version });
+                return plan.creates.length || plan.updates.length || plan.relationships.length ? null
+                    : `Nothing to import${plan.problems.length ? `: ${plan.problems[0].message} (row ${plan.problems[0].row})` : ''}`;
+            },
+            onApply: (values) => this.import(table, CsvImportDialog.mapping(values), { place: !!values.place }),
+        }).open();
+    }
+
+    /** Carry an import out: one undo step; what could not be read is told. @returns the plan */
+    import(table, mapping, { place = true } = {}) {
+        const plan = planCsvImport(table, mapping, this.model, { version: this.version });
+        this.model.history.execute(new ImportRowsCommand(this.model, plan, { view: place ? this.view : null }));
+        if (plan.problems.length) {
+            this.tell(`Imported. ${plan.problems.length} row${plan.problems.length === 1 ? '' : 's'} left out:\n${plan.problems.slice(0, 8).map(p => `row ${p.row}: ${p.message}`).join('\n')}`);
+        }
+        this.onDone(plan);
+        return plan;
+    }
+
+    /** @private */
+    tell(message) {
+        (this.doc?.defaultView?.alert ?? globalThis.alert ?? (() => {}))(message);
+        return null;
+    }
+}

package/src/charting/archimate/CustomViewpoints.js

@@ -0,0 +1,74 @@
+import { ArchimateViewpoints } from '../../archimate.js';
+import { LocalJsonStore } from '../storage/LocalJsonStore.js';
+import { CatalogDialog } from '../CatalogDialog.js';
+import { elementTypeChoices } from './elementTypeChoices.js';
+
+/** Where the user's own viewpoints are kept (this browser's localStorage). */
+export const CUSTOM_VIEWPOINTS_STORE = new LocalJsonStore('renderengine.archimate.viewpoints');
+
+/**
+ * CustomViewpoints — the viewpoints a user defines (a name, a description and
+ * the element types they allow), offered after the standard ones wherever a
+ * viewpoint is chosen. Kept in `store`; both editors read them from there.
+ */
+export class CustomViewpoints {
+    /** The saved viewpoints (ArchimateViewpoints.custom objects), in order. */
+    static load(store = CUSTOM_VIEWPOINTS_STORE) {
+        const saved = store.load([]);
+        return (Array.isArray(saved) ? saved : [])
+            .filter(v => v && typeof v.name === 'string' && v.name)
+            .map(v => ArchimateViewpoints.custom({ name: v.name, description: v.description ?? '', allowedTypes: v.allowedTypes ?? [] }));
+    }
+
+    /** Keep `viewpoints` as the saved list. */
+    static save(viewpoints, store = CUSTOM_VIEWPOINTS_STORE) {
+        return store.save(viewpoints.map(({ name, description, allowedTypes }) => ({ name, description, allowedTypes })));
+    }
+
+    /**
+     * Edit the saved viewpoints: name, description and the element types each
+     * allows. A standard viewpoint's name cannot be taken.
+     * @param {Object} [options]
+     * @param {string} [options.version] - Whose element types to offer
+     * @param {LocalJsonStore} [options.store]
+     * @param {(viewpoints: Array<Object>) => void} [options.onChange] - After a change, with the new list
+     * @param {Document} [options.document]
+     * @returns {CatalogDialog}
+     */
+    static dialog({ version = '4', store = CUSTOM_VIEWPOINTS_STORE, onChange = () => {}, document: doc = globalThis.document } = {}) {
+        const list = () => CustomViewpoints.load(store);
+        const standard = new Set(ArchimateViewpoints.standard.map(v => v.name));
+        const write = (viewpoints) => { CustomViewpoints.save(viewpoints, store); };
+        return new CatalogDialog({
+            title: 'Viewpoints',
+            description: 'Viewpoints of your own, offered after the standard ones: the element types each allows.',
+            noun: 'viewpoint',
+            items: list,
+            label: (vp) => `${vp.name} (${vp.allowedTypes.length} type${vp.allowedTypes.length === 1 ? '' : 's'})`,
+            fields: (vp) => [
+                { key: 'name', label: 'Name', type: 'text', value: vp?.name ?? '' },
+                { key: 'description', label: 'Description', type: 'textarea', rows: 2, value: vp?.description ?? '' },
+                { key: 'allowedTypes', label: 'Allows', type: 'checklist', value: vp?.allowedTypes ?? [], choices: elementTypeChoices(version) },
+            ],
+            validate: (vp, { name, allowedTypes }) => {
+                const wanted = String(name ?? '').trim();
+                if (!wanted) return 'A viewpoint needs a name.';
+                if (standard.has(wanted)) return `"${wanted}" is a standard viewpoint.`;
+                if (list().some(v => v.name === wanted && v.name !== vp?.name)) return `There is already a viewpoint called "${wanted}".`;
+                if (!allowedTypes?.length) return 'Choose at least one element type.';
+                return null;
+            },
+            save: (vp, { name, description, allowedTypes }) => {
+                const entry = ArchimateViewpoints.custom({ name: name.trim(), description: description?.trim() ?? '', allowedTypes });
+                const current = list();
+                const at = vp ? current.findIndex(v => v.name === vp.name) : -1;
+                if (at >= 0) current[at] = entry;
+                else current.push(entry);
+                write(current);
+            },
+            remove: (vp) => write(list().filter(v => v.name !== vp.name)),
+            onChange: () => onChange(list()),
+            document: doc,
+        });
+    }
+}