@peter.prib/renderengine 0.2.3 → 0.2.5

package/src/charting/FormDialog.js

@@ -109,7 +109,7 @@ export class FormDialog {
                         style: { overflowY: 'auto', flex: '1 1 auto', minHeight: '0', paddingRight: '4px' },
                         ref: (n) => { this.body = n; },
                         children: [
-                            this.description && { text: this.description, style: { fontSize: '11px', color: '#666', margin: '0 0 10px' } },
+                            this.description && { text: this.description, style: { fontSize: '11px', color: '#666', margin: '0 0 10px', whiteSpace: 'pre-line' } },
                             { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '8px 12px', alignItems: 'center' }, children: rows.flat() },
                             { attrs: { role: 'alert' }, style: { color: '#c0392b', fontSize: '12px', marginTop: '8px', display: 'none' }, ref: (n) => { this._error = n; } },
                         ].filter(Boolean),

package/src/charting/ModelComparisonDialog.js

@@ -0,0 +1,122 @@
+import { FormDialog } from './FormDialog.js';
+
+/** What a difference is listed under, for a model called `mine` compared with `theirs`. */
+const GROUP_TEXT = {
+    added: (kind, mine, theirs) => `${kind.label} only in "${theirs}"`,
+    changed: (kind) => `${kind.label} changed`,
+    removed: (kind, mine) => `${kind.label} only in "${mine}"`,
+};
+
+/** The order of a kind's groups. */
+const CHANGE_ORDER = ['added', 'changed', 'removed'];
+
+/** 'elementInstances' reads 'element instances'. */
+const words = (field) => field.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+
+/**
+ * ModelCompareDialog — how one model differs from another (a
+ * ModelComparison), shown: how many things of each kind only one has or
+ * both have unalike, then each of them, grouped. With anything to merge, its
+ * button opens the merge (`onMerge`).
+ */
+export class ModelCompareDialog {
+    /**
+     * @param {Object} options
+     * @param {ModelComparison} options.comparison
+     * @param {string} options.mineName - What the model compared is called
+     * @param {string} options.theirsName - What the other is called
+     * @param {() => void} [options.onMerge] - Merge from the other (offered when there is something to merge)
+     * @param {Document} [options.document]
+     */
+    constructor({ comparison, mineName, theirsName, onMerge = null, document: doc = globalThis.document }) {
+        this.comparison = comparison;
+        this.mineName = mineName;
+        this.theirsName = theirsName;
+        this.onMerge = onMerge;
+        this.document = doc;
+    }
+
+    get title() {
+        return `Compare "${this.mineName}" with "${this.theirsName}"`;
+    }
+
+    /** One line per kind that differs: how many only one has, and how many changed. */
+    summaryText() {
+        if (this.comparison.same) return 'The models are alike.';
+        return this.comparison.summary()
+            .filter(s => s.added || s.changed || s.removed)
+            .map(({ kind, added, changed, removed }) => `${kind.label}: ${[
+                added && `${added} only in "${this.theirsName}"`,
+                changed && `${changed} changed`,
+                removed && `${removed} only in "${this.mineName}"`,
+            ].filter(Boolean).join(', ')}`)
+            .join('\n');
+    }
+
+    /** The differences listed: [value, text, group] for a checklist, kind by kind, each kind's groups in CHANGE_ORDER. */
+    choices(differences) {
+        const kinds = this.comparison.kinds;
+        const rank = (d) => kinds.indexOf(d.kind) * CHANGE_ORDER.length + CHANGE_ORDER.indexOf(d.change);
+        return [...differences].sort((a, b) => rank(a) - rank(b)).map(d => [
+            d.key,
+            d.change === 'changed' ? `${d.name} (${d.fields.map(words).join(', ')})` : d.name,
+            GROUP_TEXT[d.change](d.kind, this.mineName, this.theirsName),
+        ]);
+    }
+
+    /** The dialog's fields: every difference, to read. */
+    fields() {
+        const all = this.comparison.differences();
+        return all.length ? [{ key: 'items', label: '', type: 'checklist', readOnly: true, value: [], choices: this.choices(all) }] : [];
+    }
+
+    open() {
+        const canMerge = !!this.onMerge && this.comparison.mergeable().length > 0;
+        return new FormDialog({
+            title: this.title,
+            description: this.summaryText(),
+            fields: this.fields(),
+            submitLabel: canMerge ? 'Merge…' : 'Close',
+            cancelLabel: 'Close',
+            idPrefix: 'model-compare-',
+            document: this.document,
+            onApply: () => { if (canMerge) this.onMerge(); },
+        }).open();
+    }
+}
+
+/**
+ * ModelMergeDialog — choose what to bring from the other model: what only it
+ * has and its version of what changed, each ticked to start with; what this
+ * model alone has stays. Merging hands the command (ModelComparison#mergeCommand,
+ * with what the chosen need) to `onMerge`.
+ */
+export class ModelMergeDialog extends ModelCompareDialog {
+    get title() {
+        return `Merge from "${this.theirsName}" into "${this.mineName}"`;
+    }
+
+    fields() {
+        const mergeable = this.comparison.mergeable();
+        return mergeable.length
+            ? [{ key: 'items', label: '', type: 'checklist', value: this.choices(mergeable).map(([key]) => key), choices: this.choices(mergeable) }]
+            : [];
+    }
+
+    open() {
+        const nothing = !this.comparison.mergeable().length;
+        return new FormDialog({
+            title: this.title,
+            description: nothing ? `"${this.mineName}" has everything "${this.theirsName}" has.` : `${this.summaryText()}\n\nWhat the chosen need (a view's elements, a relationship's ends) comes too.`,
+            fields: this.fields(),
+            submitLabel: nothing ? 'Close' : 'Merge',
+            idPrefix: 'model-merge-',
+            document: this.document,
+            validate: ({ items }) => (nothing || items?.length ? null : 'Choose something to merge'),
+            onApply: ({ items }) => {
+                const command = nothing ? null : this.comparison.mergeCommand(items);
+                if (command) this.onMerge(command);
+            },
+        }).open();
+    }
+}

package/src/charting/Palette.js

@@ -1,119 +1,119 @@
-import { render } from '../workspace/dom.js';
-import { CreateTemplateCommand } from './DiagramEditorCommands.js';
-
-/**
- * Palette — category picker plus a grid of draggable shapes.
- *
- * Previews are drawn by the templates themselves (Template#renderPreview), so a
- * palette tile always matches what lands on the canvas.
- */
-export class Palette {
-    /**
-     * @param {Object} options
-     * @param {HTMLElement} options.container - Element the palette renders into (contents replaced)
-     * @param {TemplateCatalog} options.catalog - Shapes offered in the current category
-     * @param {DiagramEditor} options.editor - Editor receiving drops
-     * @param {Array<{group: string, types: Array<{key: string, name: string, description?: string}>}>} [options.categories]
-     *        Grouped categories for the picker; omit to hide the picker
-     * @param {string} [options.category] - Selected category key
-     * @param {(key: string) => void} [options.onCategoryChange]
-     */
-    constructor(options = {}) {
-        this.container = options.container;
-        this.catalog = options.catalog;
-        this.editor = options.editor;
-        this.categories = options.categories ?? [];
-        this.category = options.category ?? null;
-        this.onCategoryChange = options.onCategoryChange ?? (() => {});
-    }
-
-    render() {
-        if (!this.container) return;
-        const doc = this.container.ownerDocument;
-        render(this.container, [
-            this.categories.length ? this._pickerSpec() : '',
-            {
-                style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '6px', overflowY: 'auto', flex: '1 1 auto', alignContent: 'start' },
-                children: this.catalog.getAll().map(entry => this._tileSpec(entry, doc)),
-            },
-        ], doc);
-        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', gap: '8px', minHeight: '0' });
-    }
-
-    _pickerSpec() {
-        const selected = this.categories.flatMap(g => g.types).find(t => t.key === this.category);
-        return {
-            tag: 'select',
-            attrs: { 'aria-label': 'Diagram type', title: selected?.description },
-            style: { width: '100%', padding: '6px', fontSize: '12px', flex: '0 0 auto' },
-            on: { change: (e) => this.onCategoryChange(e.target.value) },
-            children: this.categories.map(({ group, types }) => ({
-                tag: 'optgroup',
-                attrs: { label: group },
-                children: types.map(t => ({
-                    tag: 'option',
-                    attrs: { value: t.key, selected: t.key === this.category, title: t.description },
-                    text: t.name,
-                })),
-            })),
-        };
-    }
-
-    _tileSpec(entry, doc) {
-        return {
-            attrs: { draggable: 'true', title: `Drag to add ${entry.name}` },
-            style: {
-                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
-                padding: '6px 4px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px',
-                cursor: 'grab', userSelect: 'none',
-            },
-            on: { dragstart: (e) => this._startDrag(e, entry) },
-            children: [
-                entry.factory('__preview', 0, 0).renderPreview(40, doc),
-                {
-                    text: entry.name,
-                    style: { fontSize: '11px', color: '#333', textAlign: 'center', lineHeight: '1.2', overflowWrap: 'anywhere' },
-                },
-            ],
-        };
-    }
-
-    _startDrag(e, entry) {
-        if (!e.dataTransfer) return;
-        e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('templateType', entry.type);
-    }
-
-    /**
-     * Create the dragged shape at a drop point given in SVG viewBox coordinates,
-     * snapping to the grid when it is shown.
-     */
-    handleDrop(e, x, y) {
-        const templateType = e.dataTransfer.getData('templateType');
-        if (!templateType) return false;
-
-        let snapX = x, snapY = y;
-        if (this.editor.showGrid && this.editor.gridSize) {
-            const gridSize = this.editor.gridSize;
-            snapX = Math.round(x / gridSize) * gridSize;
-            snapY = Math.round(y / gridSize) * gridSize;
-        }
-
-        const template = this.catalog.create(templateType, this._generateId(templateType), snapX, snapY);
-        if (!template) return false;
-
-        if (this.editor.history) {
-            this.editor.history.execute(new CreateTemplateCommand(this.editor, template));
-        } else {
-            this.editor.addTemplate(template);
-        }
-        this.editor.render();
-        return true;
-    }
-
-    _generateId(templateType) {
-        let counter = 1;
-        while (this.editor.getTemplate(`${templateType}_${counter}`)) counter++;
-        return `${templateType}_${counter}`;
-    }
-}
+import { render } from '../workspace/dom.js';
+import { CreateTemplateCommand } from './DiagramEditorCommands.js';
+
+/**
+ * Palette — category picker plus a grid of draggable shapes.
+ *
+ * Previews are drawn by the templates themselves (Template#renderPreview), so a
+ * palette tile always matches what lands on the canvas.
+ */
+export class Palette {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container - Element the palette renders into (contents replaced)
+     * @param {TemplateCatalog} options.catalog - Shapes offered in the current category
+     * @param {DiagramEditor} options.editor - Editor receiving drops
+     * @param {Array<{group: string, types: Array<{key: string, name: string, description?: string}>}>} [options.categories]
+     *        Grouped categories for the picker; omit to hide the picker
+     * @param {string} [options.category] - Selected category key
+     * @param {(key: string) => void} [options.onCategoryChange]
+     */
+    constructor(options = {}) {
+        this.container = options.container;
+        this.catalog = options.catalog;
+        this.editor = options.editor;
+        this.categories = options.categories ?? [];
+        this.category = options.category ?? null;
+        this.onCategoryChange = options.onCategoryChange ?? (() => {});
+    }
+
+    render() {
+        if (!this.container) return;
+        const doc = this.container.ownerDocument;
+        render(this.container, [
+            this.categories.length ? this._pickerSpec() : '',
+            {
+                style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '6px', overflowY: 'auto', flex: '1 1 auto', alignContent: 'start' },
+                children: this.catalog.getAll().map(entry => this._tileSpec(entry, doc)),
+            },
+        ], doc);
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', gap: '8px', minHeight: '0' });
+    }
+
+    _pickerSpec() {
+        const selected = this.categories.flatMap(g => g.types).find(t => t.key === this.category);
+        return {
+            tag: 'select',
+            attrs: { 'aria-label': 'Diagram type', title: selected?.description },
+            style: { width: '100%', padding: '6px', fontSize: '12px', flex: '0 0 auto' },
+            on: { change: (e) => this.onCategoryChange(e.target.value) },
+            children: this.categories.map(({ group, types }) => ({
+                tag: 'optgroup',
+                attrs: { label: group },
+                children: types.map(t => ({
+                    tag: 'option',
+                    attrs: { value: t.key, selected: t.key === this.category, title: t.description },
+                    text: t.name,
+                })),
+            })),
+        };
+    }
+
+    _tileSpec(entry, doc) {
+        return {
+            attrs: { draggable: 'true', title: entry.description ? `${entry.name}: ${entry.description}\nDrag to add` : `Drag to add ${entry.name}` },
+            style: {
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
+                padding: '6px 4px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px',
+                cursor: 'grab', userSelect: 'none',
+            },
+            on: { dragstart: (e) => this._startDrag(e, entry) },
+            children: [
+                entry.factory('__preview', 0, 0).renderPreview(40, doc),
+                {
+                    text: entry.name,
+                    style: { fontSize: '11px', color: '#333', textAlign: 'center', lineHeight: '1.2', overflowWrap: 'anywhere' },
+                },
+            ],
+        };
+    }
+
+    _startDrag(e, entry) {
+        if (!e.dataTransfer) return;
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData('templateType', entry.type);
+    }
+
+    /**
+     * Create the dragged shape at a drop point given in SVG viewBox coordinates,
+     * snapping to the grid when it is shown.
+     */
+    handleDrop(e, x, y) {
+        const templateType = e.dataTransfer.getData('templateType');
+        if (!templateType) return false;
+
+        let snapX = x, snapY = y;
+        if (this.editor.showGrid && this.editor.gridSize) {
+            const gridSize = this.editor.gridSize;
+            snapX = Math.round(x / gridSize) * gridSize;
+            snapY = Math.round(y / gridSize) * gridSize;
+        }
+
+        const template = this.catalog.create(templateType, this._generateId(templateType), snapX, snapY);
+        if (!template) return false;
+
+        if (this.editor.history) {
+            this.editor.history.execute(new CreateTemplateCommand(this.editor, template));
+        } else {
+            this.editor.addTemplate(template);
+        }
+        this.editor.render();
+        return true;
+    }
+
+    _generateId(templateType) {
+        let counter = 1;
+        while (this.editor.getTemplate(`${templateType}_${counter}`)) counter++;
+        return `${templateType}_${counter}`;
+    }
+}

package/src/charting/TemplateCatalog.js

@@ -1,59 +1,61 @@
-/**
- * TemplateCatalog — registry of template types that can be added to a diagram.
- * Each entry describes a template type and how to create instances.
- */
-export class TemplateCatalog {
-    constructor() {
-        this.entries = new Map();  // type -> { name, icon, factory, properties }
-    }
-
-    /**
-     * Register a template type.
-     * @param {string} type - Unique type identifier
-     * @param {Object} spec - Template specification
-     * @param {string} spec.name - Display name
-     * @param {string} spec.icon - Icon/emoji (e.g., "📦")
-     * @param {Function} spec.factory - Factory function: (id, x, y) => Template instance
-     * @param {Object} spec.properties - Default properties for this type
-     */
-    register(type, spec) {
-        if (!spec.factory) {
-            throw new Error(`TemplateCatalog.register: factory required for type '${type}'`);
-        }
-        this.entries.set(type, {
-            type,
-            name: spec.name || type,
-            icon: spec.icon || '■',
-            factory: spec.factory,
-            properties: spec.properties || {},
-        });
-    }
-
-    /**
-     * Get a template type entry.
-     */
-    get(type) {
-        return this.entries.get(type);
-    }
-
-    /**
-     * Get all entries.
-     */
-    getAll() {
-        return Array.from(this.entries.values());
-    }
-
-    /**
-     * Create a template instance of given type.
-     * @param {string} type
-     * @param {string} id - Instance id
-     * @param {number} x - X position
-     * @param {number} y - Y position
-     * @returns {Template|null}
-     */
-    create(type, id, x, y) {
-        const entry = this.get(type);
-        if (!entry) return null;
-        return entry.factory(id, x, y);
-    }
-}
+/**
+ * TemplateCatalog — registry of template types that can be added to a diagram.
+ * Each entry describes a template type and how to create instances.
+ */
+export class TemplateCatalog {
+    constructor() {
+        this.entries = new Map();  // type -> { name, icon, factory, properties }
+    }
+
+    /**
+     * Register a template type.
+     * @param {string} type - Unique type identifier
+     * @param {Object} spec - Template specification
+     * @param {string} spec.name - Display name
+     * @param {string} spec.icon - Icon/emoji (e.g., "📦")
+     * @param {Function} spec.factory - Factory function: (id, x, y) => Template instance
+     * @param {Object} spec.properties - Default properties for this type
+     * @param {string} [spec.description] - What it is (the palette shows it on hover)
+     */
+    register(type, spec) {
+        if (!spec.factory) {
+            throw new Error(`TemplateCatalog.register: factory required for type '${type}'`);
+        }
+        this.entries.set(type, {
+            type,
+            name: spec.name || type,
+            icon: spec.icon || '■',
+            factory: spec.factory,
+            properties: spec.properties || {},
+            ...(spec.description && { description: spec.description }),
+        });
+    }
+
+    /**
+     * Get a template type entry.
+     */
+    get(type) {
+        return this.entries.get(type);
+    }
+
+    /**
+     * Get all entries.
+     */
+    getAll() {
+        return Array.from(this.entries.values());
+    }
+
+    /**
+     * Create a template instance of given type.
+     * @param {string} type
+     * @param {string} id - Instance id
+     * @param {number} x - X position
+     * @param {number} y - Y position
+     * @returns {Template|null}
+     */
+    create(type, id, x, y) {
+        const entry = this.get(type);
+        if (!entry) return null;
+        return entry.factory(id, x, y);
+    }
+}

package/src/charting/diagramModel/ComparedKind.js

@@ -0,0 +1,67 @@
+/**
+ * ComparedKind — one kind of thing two models are compared on and merged by
+ * (their views; a notation's elements and relationships). A subclass per kind
+ * says how to list them, what of one counts when two are compared
+ * (`content`), what one needs to be brought into another model (the elements
+ * a view draws: `requires`), and how to bring it (`bring`, undoable).
+ * Things are matched by id, as two versions of one model (an Archi file and
+ * its later copy) keep them.
+ */
+export class ComparedKind {
+    constructor() {
+        if (new.target === ComparedKind) throw new TypeError('ComparedKind is abstract — subclass it');
+    }
+
+    /** What a difference of this kind is keyed by ('view', 'element'). @abstract */
+    get key() { throw new Error(`${this.constructor.name} must define key`); }
+
+    /** What they are called in lists ('Views', 'Elements'). @abstract */
+    get label() { throw new Error(`${this.constructor.name} must define label`); }
+
+    /** Every one of them in a model, in order. @abstract */
+    items(model) {
+        throw new Error(`${this.constructor.name} must implement items()`);
+    }
+
+    /** One of them by id, or null. */
+    get(model, id) {
+        return this.items(model).find(item => this.idOf(item) === id) ?? null;
+    }
+
+    idOf(item) {
+        return item.id;
+    }
+
+    /** What it is called: its name, else its id. */
+    nameOf(item) {
+        return item.name || item.title || this.idOf(item);
+    }
+
+    /** What of it counts when two are compared: plain JSON, nothing generated anew each time a model is read. @abstract */
+    content(item) {
+        throw new Error(`${this.constructor.name} must implement content()`);
+    }
+
+    /** The fields of `content` that differ between two of them (none: they are the same). */
+    changedFields(mine, theirs) {
+        const a = this.content(mine);
+        const b = this.content(theirs);
+        return [...new Set([...Object.keys(a), ...Object.keys(b)])]
+            .filter(k => JSON.stringify(a[k]) !== JSON.stringify(b[k]));
+    }
+
+    /** What else it needs in a model to be brought there from `from`: [[kind key, id]] (none here). */
+    requires(item, from) {
+        return [];
+    }
+
+    /**
+     * Put a copy of `item` (from `from`) in `model`, in place of the one with
+     * its id if there is one. Returns what undoes it.
+     * @abstract
+     * @returns {() => void}
+     */
+    bring(model, item, from) {
+        throw new Error(`${this.constructor.name} must implement bring()`);
+    }
+}

package/src/charting/diagramModel/DiagramView.js

@@ -34,6 +34,17 @@ export class DiagramView extends DiagramEditorState {
         return [...this.templates.values()];
     }
 
+    /** The diagram as plain JSON: its shapes (by id), lines, line style and documentation. */
+    toJSON() {
+        return {
+            title: this.title,
+            documentation: this.documentation,
+            templates: [...this.templates].map(([id, t]) => ({ id, type: t.constructor.name, name: t.name, data: t.serialize() })),
+            edges: [...this.edges.values()].map(e => JSON.parse(JSON.stringify(e))),
+            edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+        };
+    }
+
     /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
     copy(id, title, historyOptions = this.historyOptions) {
         return new DiagramView({

package/src/charting/diagramModel/MergeModelCommand.js

@@ -0,0 +1,37 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * MergeModelCommand — things from another model brought into this one
+ * (ModelComparison#mergeCommand): each step a ComparedKind's `bring`, in the
+ * order given (what is needed first). One undo step; undo takes each back,
+ * last first.
+ */
+export class MergeModelCommand extends Command {
+    /** A merge is no edit on one view: undoing it shows no other. */
+    viewId = null;
+
+    /**
+     * @param {ViewSetModel} model - Merged into
+     * @param {ViewSetModel} from - Merged from
+     * @param {Array<{kind: ComparedKind, item: Object}>} steps
+     * @param {string} [label]
+     */
+    constructor(model, from, steps, label = `Merge ${steps.length} item${steps.length === 1 ? '' : 's'} from "${from.name || 'another model'}"`) {
+        super(label);
+        this.model = model;
+        this.from = from;
+        this.steps = steps;
+        this._undos = [];
+    }
+
+    execute() {
+        this._undos = this.steps.map(({ kind, item }) => kind.bring(this.model, item, this.from));
+        this.model._notify();
+    }
+
+    undo() {
+        for (const undo of [...this._undos].reverse()) undo();
+        this._undos = [];
+        this.model._notify();
+    }
+}