@peter.prib/renderengine 0.0.0-stage → 0.1.0

package/src/charting/diagramModel/ModelHistory.js

@@ -0,0 +1,43 @@
+import { CommandHistory } from '../CommandHistory.js';
+
+/**
+ * ModelHistory — one undo history for a whole model (Archi's command stack
+ * per model): every view's edits, and the model's own (views added,
+ * renamed, deleted; elements edited from the tree), in the order they were
+ * made. Each edit remembers the view in front when it was made (`viewId`),
+ * and undoing or redoing it shows that view again, so the change is seen.
+ * A command that names no view of its own (a view added or removed) sets
+ * `viewId = null`.
+ */
+export class ModelHistory extends CommandHistory {
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} [options] - CommandHistory options
+     */
+    constructor(model, options = {}) {
+        super(options);
+        this.model = model;
+    }
+
+    execute(cmd) {
+        if (cmd && typeof cmd === 'object' && !('viewId' in cmd)) cmd.viewId = this.model.currentViewId;
+        const done = super.execute(cmd);
+        if (done !== cmd && done && !('viewId' in done)) done.viewId = cmd.viewId;   // merged into the last one
+        return done;
+    }
+
+    undo() {
+        return this._show(super.undo());
+    }
+
+    redo() {
+        return this._show(super.redo());
+    }
+
+    /** Show the view an undone or redone edit was made on (after the change, so it is drawn changed). @private */
+    _show(cmd) {
+        const id = cmd?.viewId;
+        if (id && id !== this.model.currentViewId && this.model.getView(id)) this.model.switchTo(id);
+        return cmd;
+    }
+}

package/src/charting/diagramModel/ModelReport.js

@@ -0,0 +1,153 @@
+/**
+ * ModelReport — what a browsable report of a model holds, as plain JSON
+ * (reportHtml writes it out as a page): a page per item (the model, each
+ * view, and whatever a notation's model adds: elements, relationships, ...)
+ * and the tree the pages are found by.
+ *
+ * Here, what every view set has: the model's page, and a page per view with
+ * its documentation, properties and picture. A notation's model returns a
+ * subclass from `model.report()` that adds its own items (`conceptItems()`),
+ * tree sections (`conceptSections()`) and what a view's page lists
+ * (`viewLists(view)`).
+ *
+ * An item: `{ key, name, kind, type, color?, documentation?, properties:
+ * [{name, value}], facts: [{label, text} | {label, key}], lists: [{title,
+ * rows: [{key, note?}]}], picture? }`; a fact or row with a `key` links to
+ * that item's page. A picture (from the editor, see DiagramEditor#viewPicture)
+ * is `{ svg, viewBox: {x, y, width, height}, areas: [{ref, x, y, width,
+ * height}] }`; an area's `ref` (`{kind, id}`) is the item it opens.
+ */
+export class ModelReport {
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} [options]
+     * @param {Object<string, Object>} [options.pictures] - Each view's picture, by view id
+     * @param {string} [options.title] - Default: the model's name
+     */
+    constructor(model, { pictures = {}, title = null } = {}) {
+        this.model = model;
+        this.pictures = pictures;
+        this._title = title;
+    }
+
+    /** The report's title: the model's name, or what was asked for. */
+    get title() {
+        return this._title || this.model.name || this.model.title || 'Model';
+    }
+
+    /** An item's key: unique across kinds, since a view and an element may share an id. */
+    key(kind, id) {
+        return `${kind}:${id}`;
+    }
+
+    /** The report: `{ title, home, sections, items }` (see the class). */
+    data() {
+        const items = [this.modelItem(), ...this.viewItems(), ...this.conceptItems()];
+        return {
+            title: this.title,
+            home: items[0].key,
+            sections: [...this.conceptSections(), this.viewSection()]
+                .map(s => ({ ...s, groups: s.groups.filter(g => g.keys.length) }))
+                .filter(s => s.groups.length),
+            items: Object.fromEntries(items.map(item => [item.key, item])),
+        };
+    }
+
+    /** The model's own page: its documentation, properties and how much it holds. */
+    modelItem() {
+        const model = this.model;
+        return this.item('model', model.id ?? 'model', {
+            name: this.title, type: 'Model',
+            documentation: model.documentation,
+            properties: model.properties,
+            facts: this.modelFacts(),
+        });
+    }
+
+    /** The model page's counts: its views (a subclass adds its own). */
+    modelFacts() {
+        return [{ label: 'Views', text: String(this.model.views().length) }];
+    }
+
+    /** A page per view. */
+    viewItems() {
+        return this.model.views().map(view => this.item('view', view.id, {
+            name: view.title || view.name || view.id,
+            type: this.viewType(view),
+            documentation: view.documentation,
+            properties: view.properties,
+            facts: this.viewFacts(view),
+            lists: this.viewLists(view),
+            picture: this.picture(view),
+        }));
+    }
+
+    /** What kind of view a view is, as its page says. */
+    viewType(view) {
+        return 'View';
+    }
+
+    /** A view's picture, with its areas' refs turned into item keys (an area with nothing to open is dropped). */
+    picture(view) {
+        const picture = this.pictures[view.id];
+        if (!picture) return undefined;
+        const areas = (picture.areas ?? [])
+            .map(({ ref, ...box }) => ({ ...box, key: ref && this.key(ref.kind, ref.id) }))
+            .filter(area => area.key);
+        return { svg: picture.svg, viewBox: picture.viewBox, areas };
+    }
+
+    /** A view's facts (its viewpoint, ...): none here. */
+    viewFacts(view) {
+        return [];
+    }
+
+    /** What a view's page lists (its elements, ...): none here. */
+    viewLists(view) {
+        return [];
+    }
+
+    /** The tree's Views section. */
+    viewSection() {
+        return { title: 'Views', groups: [{ title: null, keys: this.model.views().map(v => this.key('view', v.id)) }] };
+    }
+
+    /** A notation's own items (elements, relationships): none here. */
+    conceptItems() {
+        return [];
+    }
+
+    /** A notation's own tree sections, before Views: none here. */
+    conceptSections() {
+        return [];
+    }
+
+    /**
+     * An item from its kind, id and fields: empty lists dropped, properties as
+     * `[{name, value}]` whichever way the model keeps them.
+     * @protected
+     */
+    item(kind, id, { name, type, color, documentation, properties, facts = [], lists = [], picture } = {}) {
+        const props = ModelReport.properties(properties);
+        return {
+            key: this.key(kind, id),
+            name: name || id, kind, type,
+            ...(color && { color }),
+            ...(documentation && { documentation: String(documentation) }),
+            ...(props.length && { properties: props }),
+            ...(facts.length && { facts }),
+            ...(lists.some(l => l.rows.length) && { lists: lists.filter(l => l.rows.length) }),
+            ...(picture && { picture }),
+        };
+    }
+
+    /** Properties as `[{name, value}]`, from `[{name|key, value}]`, `[[name, value]]` or `{name: value}`. */
+    static properties(properties) {
+        if (!properties) return [];
+        const list = Array.isArray(properties) ? properties : Object.entries(properties);
+        return list.map(p => (Array.isArray(p)
+            ? { name: String(p[0]), value: String(p[1] ?? '') }
+            : { name: String(p.name ?? p.key ?? ''), value: String(p.value ?? '') }))
+            .filter(p => p.name);
+    }
+}

package/src/charting/diagramModel/ModelSearch.js

@@ -0,0 +1,223 @@
+import { ReplaceTextCommand } from './ReplaceTextCommand.js';
+import { Command } from '../CommandHistory.js';
+import { transformName, NAME_TRANSFORMS } from './nameTransforms.js';
+
+/** What can be looked in, in the order a dialog offers them: [field, label]. */
+export const SEARCH_FIELDS = Object.freeze([['name', 'Names'], ['documentation', 'Documentation'], ['property', 'Property values']]);
+
+/**
+ * ModelSearch — find and replace over a model's texts (Archi's Find/Replace):
+ * every name, documentation and property value, each a target
+ * `{ kind, id, viewId?, owner, field, fieldLabel, required?, read(), write(text) }`
+ * (`owner` names what it belongs to; `required` text can't be emptied).
+ *
+ * Here, what every view set has: the model's own name, documentation and
+ * properties, and each view's title, documentation and properties. A
+ * notation's model returns a subclass from `model.search()` that adds what its
+ * views hold (`viewItemTargets(view)`: shapes, notes) and its own concepts
+ * (`conceptTargets()`: elements, relationships). DOM-free.
+ *
+ * Options, for find and replace alike: `{ matchCase, wholeWord, regex, fields }`,
+ * `fields` among SEARCH_FIELDS' keys (default all).
+ */
+export class ModelSearch {
+    /** @param {ViewSetModel} model */
+    constructor(model) {
+        this.model = model;
+    }
+
+    /** Every text in the model, in order: the model's, then each view's and what it holds, then the concepts'. */
+    targets() {
+        return [
+            ...this.modelTargets(),
+            ...this.model.views().flatMap(view => [...this.viewTargets(view), ...this.viewItemTargets(view)]),
+            ...this.conceptTargets(),
+        ];
+    }
+
+    /** The model's own name (when it has one), documentation and properties. */
+    modelTargets() {
+        const model = this.model;
+        const owner = { kind: 'model', id: model.id ?? 'model', owner: model.name || 'Model' };
+        return [
+            ...(typeof model.name === 'string' ? [this.text(owner, 'name', model, 'name')] : []),
+            this.text(owner, 'documentation', model, 'documentation'),
+            ...this.propertyTargets(owner, model.properties),
+        ];
+    }
+
+    /** A view's title (retitled through the model, so tabs follow; never emptied), documentation and properties. */
+    viewTargets(view) {
+        const owner = { kind: 'view', id: view.id, viewId: view.id, owner: view.title || view.name || view.id };
+        return [
+            {
+                ...owner, field: 'name', fieldLabel: 'Name', required: true,
+                read: () => view.title ?? '',
+                write: (text) => { this.model._retitle(view.id, text); },
+            },
+            this.text(owner, 'documentation', view, 'documentation'),
+            ...this.propertyTargets(owner, view.properties),
+        ];
+    }
+
+    /** What a view holds that has its own text: none here. */
+    viewItemTargets(view) {
+        return [];
+    }
+
+    /** A notation's own concepts' texts: none here. */
+    conceptTargets() {
+        return [];
+    }
+
+    /**
+     * The texts that match, each `{ ...target, target, text, count }` (`text`
+     * as it is now, `count` how many times it matches).
+     * @throws {SyntaxError} for an invalid regular expression
+     */
+    find(text, options = {}) {
+        const pattern = ModelSearch.pattern(text, options);
+        if (!pattern) return [];
+        const fields = new Set(options.fields ?? SEARCH_FIELDS.map(([f]) => f));
+        return this.targets()
+            .filter(t => fields.has(t.field))
+            .map(target => {
+                const current = String(target.read() ?? '');
+                const count = current.match(pattern)?.length ?? 0;
+                const { read, write, ...about } = target;
+                return { ...about, target, text: current, count };
+            })
+            .filter(m => m.count);
+    }
+
+    /**
+     * Replace every match (or those of `matches`, from find) as one
+     * ReplaceTextCommand, not yet executed; null when nothing would change.
+     * With `regex`, `$1` and the like in `replacement` refer to its groups.
+     */
+    replaceCommand(text, replacement, options = {}, matches = this.find(text, options)) {
+        const pattern = ModelSearch.pattern(text, options);
+        if (!pattern) return null;
+        const changes = matches
+            .map(({ target }) => {
+                const before = String(target.read() ?? '');
+                const after = options.regex ? before.replace(pattern, replacement) : before.replace(pattern, () => replacement);
+                return { target, before, after };
+            })
+            .filter(c => c.after !== c.before && !(c.target.required && !c.after.trim()));
+        return changes.length ? new ReplaceTextCommand(changes, `Replace "${text}" (${changes.length})`) : null;
+    }
+
+    /**
+     * Rewrite names (nameTransforms.js: Title Case, split camelCase, ...): every
+     * name, or those containing `text` (with find's options), as one
+     * ReplaceTextCommand, not yet executed; null when nothing changes. A view
+     * is never left without a name.
+     * @param {string} transform - One of NAME_TRANSFORMS' keys
+     */
+    transformCommand(transform, text = '', options = {}) {
+        const targets = text
+            ? this.find(text, { ...options, fields: ['name'] }).map(m => m.target)
+            : this.targets().filter(t => t.field === 'name');
+        const changes = targets
+            .map(target => { const before = String(target.read() ?? ''); return { target, before, after: transformName(transform, before) }; })
+            .filter(c => c.after !== c.before && !(c.target.required && !c.after.trim()));
+        const label = NAME_TRANSFORMS.find(([k]) => k === transform)?.[1].split(' (')[0] ?? transform;
+        return changes.length ? new ReplaceTextCommand(changes, `${label} (${changes.length})`) : null;
+    }
+
+    /**
+     * What holds properties (`[{name|key, value}]` lists): the model and its
+     * views here; a notation's search adds its concepts.
+     * @returns {Array<{owner: string, properties: Array}>}
+     */
+    propertyHolders() {
+        return [{ owner: 'model', object: this.model }, ...this.model.views().map(v => ({ owner: `view ${v.id}`, object: v }))];
+    }
+
+    /** Every property name in use, sorted. */
+    propertyNames() {
+        const names = new Set();
+        for (const { object } of this.propertyHolders()) for (const p of Array.isArray(object.properties) ? object.properties : []) if (p.name ?? p.key) names.add(p.name ?? p.key);
+        return [...names].sort((a, b) => a.localeCompare(b));
+    }
+
+    /**
+     * Rename a property everywhere it is (Rename property…): one command, not
+     * yet executed; null when nothing has it. Where something has both names,
+     * the old one's value goes to the new one only where the new one is empty.
+     */
+    renamePropertyCommand(from, to) {
+        const holders = this.propertyHolders().filter(({ object }) => Array.isArray(object.properties) && object.properties.some(p => (p.name ?? p.key) === from));
+        if (!from || !to || from === to || !holders.length) return null;
+        return new PropertyRenameCommand(holders.map(h => h.object), from, to);
+    }
+
+    /**
+     * An object's own text field as a target; an emptied text is unset.
+     * @protected
+     */
+    text(owner, field, object, key = field) {
+        return {
+            ...owner, field, fieldLabel: field === 'name' ? 'Name' : 'Documentation',
+            read: () => object[key] ?? '',
+            write: (text) => { object[key] = text === '' && field !== 'name' ? undefined : text; },
+        };
+    }
+
+    /**
+     * Each property whose value is text, as a target (`[{name|key, value, type?}]`;
+     * a number or true/false is left out).
+     * @protected
+     */
+    propertyTargets(owner, properties) {
+        if (!Array.isArray(properties)) return [];
+        return properties
+            .filter(p => p.value == null || typeof p.value === 'string')
+            .map(p => ({
+                ...owner, field: 'property', fieldLabel: `Property "${p.name ?? p.key}"`,
+                read: () => p.value ?? '',
+                write: (text) => { p.value = text; },
+            }));
+    }
+
+    /**
+     * The pattern for `text` (global): literal unless `regex`, whole words with
+     * `wholeWord`, any case unless `matchCase`. Null for empty text.
+     * @throws {SyntaxError} for an invalid regular expression
+     */
+    static pattern(text, { matchCase = false, wholeWord = false, regex = false } = {}) {
+        if (!text) return null;
+        const source = regex ? text : text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return new RegExp(wholeWord ? `\\b(?:${source})\\b` : source, matchCase ? 'g' : 'gi');
+    }
+}
+
+/** Rename a property on some objects (their property lists), one undo step: as ModelSearch#renamePropertyCommand says. */
+class PropertyRenameCommand extends Command {
+    constructor(objects, from, to) {
+        super(`Rename property "${from}" to "${to}"`);
+        Object.assign(this, { objects, from, to, _before: null });
+    }
+
+    execute() {
+        const nameOf = (p) => p.name ?? p.key;
+        this._before = this.objects.map(o => [o, o.properties]);
+        for (const object of this.objects) {
+            const list = object.properties.map(p => ({ ...p }));
+            const old = list.find(p => nameOf(p) === this.from);
+            const existing = list.find(p => nameOf(p) === this.to);
+            if (existing) {
+                if ((existing.value ?? '') === '') existing.value = old.value;
+                object.properties = list.filter(p => p !== old);
+            } else {
+                if ('name' in old) old.name = this.to; else old.key = this.to;
+                object.properties = list;
+            }
+        }
+    }
+
+    undo() {
+        for (const [object, properties] of this._before) object.properties = properties;
+    }
+}

package/src/charting/diagramModel/RemoveViewCommand.js

@@ -0,0 +1,25 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * RemoveViewCommand — a view deleted from a model; its neighbour comes to
+ * the front when it was. Undo puts the same view back where it was, shown
+ * again if it was in front.
+ */
+export class RemoveViewCommand extends Command {
+    viewId = null;
+
+    constructor(model, view, label = `Delete "${view.title || view.name || view.id}"`) {
+        super(label);
+        this.model = model;
+        this.view = view;
+        this._was = null;
+    }
+
+    execute() {
+        this._was = this.model._removeView(this.view.id);
+    }
+
+    undo() {
+        this.model._insertView(this.view, this._was);
+    }
+}

package/src/charting/diagramModel/RenameViewCommand.js

@@ -0,0 +1,21 @@
+import { Command } from '../CommandHistory.js';
+
+/** RenameViewCommand — a view's title changed; undo gives it back its old one. */
+export class RenameViewCommand extends Command {
+    constructor(model, view, title, label = `Rename "${view.title}"`) {
+        super(label);
+        this.model = model;
+        this.view = view;
+        this.title = title;
+        this.before = view.title;
+        this.viewId = view.id;
+    }
+
+    execute() {
+        this.model._retitle(this.view.id, this.title);
+    }
+
+    undo() {
+        this.model._retitle(this.view.id, this.before);
+    }
+}

package/src/charting/diagramModel/ReplaceTextCommand.js

@@ -0,0 +1,25 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * ReplaceTextCommand — texts replaced across a model (ModelSearch#replaceCommand)
+ * as one undo step: each change is `{ target, before, after }`, a target being
+ * one of ModelSearch's texts (its `write(text)` puts it in place).
+ */
+export class ReplaceTextCommand extends Command {
+    /**
+     * @param {Array<{target: Object, before: string, after: string}>} changes
+     * @param {string} [label]
+     */
+    constructor(changes, label = 'Replace') {
+        super(label);
+        this.changes = changes.slice();
+    }
+
+    execute() {
+        for (const { target, after } of this.changes) target.write(after);
+    }
+
+    undo() {
+        for (let i = this.changes.length - 1; i >= 0; i--) this.changes[i].target.write(this.changes[i].before);
+    }
+}

package/src/charting/diagramModel/ViewSetChecker.js

@@ -0,0 +1,34 @@
+/**
+ * ViewSetChecker — checks over any ViewSetModel (a template editor's
+ * DiagramModel, an ArchimateModel): what is wrong or worth a look across its
+ * views. A notation adds its own checks in a subclass (ArchimateModelChecker).
+ * DOM-free and advisory.
+ *
+ * Each finding: `{ code, severity: 'warning'|'info', message, kind, ids }`;
+ * `kind` says what the ids name ('view' here; a subclass adds its own).
+ * Each check is a method listed by `checks()`, so a subclass can add, drop or
+ * reorder them.
+ */
+export class ViewSetChecker {
+    /** @param {ViewSetModel} model */
+    constructor(model) {
+        this.model = model;
+    }
+
+    /** The checks to run, in the order their findings are listed. */
+    checks() {
+        return [this.emptyViews];
+    }
+
+    /** Every finding. @returns {Array<Object>} */
+    run() {
+        return this.checks().flatMap(check => check.call(this));
+    }
+
+    /** Views with nothing on them (a template is left out: an empty one is still a start). */
+    emptyViews() {
+        return this.model.views()
+            .filter(v => !v.template && v.isEmpty())
+            .map(v => ({ code: 'empty-view', severity: 'info', kind: 'view', ids: [v.id], message: `View "${v.title || v.name || v.id}" is empty` }));
+    }
+}