@peter.prib/renderengine 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",

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/PopupMenu.js

@@ -48,6 +48,21 @@ export class PopupMenu {
         };
     }
 
+    /**
+     * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+     * to be all inside the window: to the right, or to the left when the right
+     * would pass the edge (and there is more room on the left); level with the
+     * item, or lifted by as much as it would pass the bottom. `top` is relative
+     * to the item, as the submenu is positioned.
+     */
+    static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+        const fitsRight = item.right + width + margin <= windowWidth;
+        const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+        const top = -4;
+        const overflow = item.top + top + height + margin - windowHeight;
+        return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+    }
+
     static close() {
         const open = PopupMenu._open;
         if (!open) return;
@@ -85,7 +100,16 @@ export class PopupMenu {
                 ...base,
                 attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
                 on: {
-                    mouseenter: (e) => { e.currentTarget.style.background = hover; sub.style.display = 'block'; },
+                    mouseenter: (e) => {
+                        e.currentTarget.style.background = hover;
+                        sub.style.display = 'block';
+                        // Opened near the window's right or bottom edge, it opens left, or lifts.
+                        const win = e.currentTarget.ownerDocument.defaultView;
+                        const box = sub.getBoundingClientRect?.();
+                        if (!win || !box?.width) return;
+                        const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                        Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                    },
                     mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
                     click: (e) => e.stopPropagation(),
                 },

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();
+    }
+}

package/src/charting/diagramModel/ModelComparison.js

@@ -0,0 +1,100 @@
+import { MergeModelCommand } from './MergeModelCommand.js';
+
+/**
+ * ModelComparison — how one model differs from another, kind by kind (the
+ * model's `comparedKinds()`: views, and a notation's elements and
+ * relationships), matched by id: what only the other has ('added'), what both
+ * have but not alike ('changed', with the fields that differ), and what only
+ * this one has ('removed'). It can merge (`mergeCommand`): bring what only the
+ * other has, and the other's version of what changed, into this model, with
+ * whatever those need that this model lacks.
+ */
+export class ModelComparison {
+    /**
+     * @param {ViewSetModel} mine - The model compared, and merged into
+     * @param {ViewSetModel} theirs - The model it is compared with
+     */
+    constructor(mine, theirs) {
+        this.mine = mine;
+        this.theirs = theirs;
+        /** The kinds compared, in the order things are brought (what is needed first). */
+        this.kinds = mine.comparedKinds();
+        this._differences = null;
+    }
+
+    /**
+     * Every difference: `{key, kind, id, name, change, fields?}`; `change` is
+     * 'added' (only theirs), 'changed' (both; `fields` say which differ) or
+     * 'removed' (only mine). Kind by kind, in each model's order.
+     */
+    differences() {
+        if (this._differences) return this._differences;
+        const out = [];
+        for (const kind of this.kinds) {
+            const mine = new Map(kind.items(this.mine).map(item => [kind.idOf(item), item]));
+            const theirs = new Map(kind.items(this.theirs).map(item => [kind.idOf(item), item]));
+            const entry = (id, item, change, extra = {}) => ({ key: `${kind.key}:${id}`, kind, id, name: kind.nameOf(item), change, ...extra });
+            for (const [id, item] of theirs) {
+                if (!mine.has(id)) { out.push(entry(id, item, 'added')); continue; }
+                const fields = kind.changedFields(mine.get(id), item);
+                if (fields.length) out.push(entry(id, item, 'changed', { fields }));
+            }
+            for (const [id, item] of mine) if (!theirs.has(id)) out.push(entry(id, item, 'removed'));
+        }
+        return (this._differences = out);
+    }
+
+    /** Whether the two models are alike in everything compared. */
+    get same() {
+        return !this.differences().length;
+    }
+
+    /** How many differences of each change there are, kind by kind: [{kind, added, changed, removed}]. */
+    summary() {
+        return this.kinds.map(kind => {
+            const of = this.differences().filter(d => d.kind === kind);
+            const count = (change) => of.filter(d => d.change === change).length;
+            return { kind, added: count('added'), changed: count('changed'), removed: count('removed') };
+        });
+    }
+
+    /** The differences a merge can bring: what only theirs has, and what changed. */
+    mergeable() {
+        return this.differences().filter(d => d.change !== 'removed');
+    }
+
+    /**
+     * Bring some differences (by key; default every mergeable one) into this
+     * model, with what they need that it lacks (a view's elements, a
+     * relationship's ends): a MergeModelCommand, not yet run, or null when
+     * there is nothing to bring.
+     * @param {Iterable<string>} [keys]
+     * @returns {MergeModelCommand|null}
+     */
+    mergeCommand(keys = this.mergeable().map(d => d.key)) {
+        const byKey = new Map(this.mergeable().map(d => [d.key, d]));
+        const kindOf = new Map(this.kinds.map(kind => [kind.key, kind]));
+        const chosen = new Set();
+        const take = (kind, id) => {
+            const key = `${kind.key}:${id}`;
+            if (chosen.has(key)) return;
+            // Something needed is brought when only theirs has it; what both have stays as chosen.
+            if (!byKey.has(key)) return;
+            chosen.add(key);
+            const item = kind.get(this.theirs, id);
+            for (const [needKind, needId] of kind.requires(item, this.theirs)) {
+                const need = kindOf.get(needKind);
+                if (need && !need.get(this.mine, needId)) take(need, needId);
+            }
+        };
+        for (const key of keys) {
+            const d = byKey.get(key);
+            if (d) take(d.kind, d.id);
+        }
+        if (!chosen.size) return null;
+        const steps = this.kinds.flatMap(kind => this.mergeable()
+            .filter(d => d.kind === kind && chosen.has(d.key))
+            .map(d => ({ kind, item: kind.get(this.theirs, d.id) })));
+        return new MergeModelCommand(this.mine, this.theirs, steps);
+    }
+}