@peter.prib/renderengine 0.0.0-stage → 0.2.0

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

package/src/charting/diagramModel/ViewSetModel.js

@@ -0,0 +1,243 @@
+import { ViewSetChecker } from './ViewSetChecker.js';
+import { ModelReport } from './ModelReport.js';
+import { ModelSearch } from './ModelSearch.js';
+import { ModelHistory } from './ModelHistory.js';
+import { AddViewCommand } from './AddViewCommand.js';
+import { RemoveViewCommand } from './RemoveViewCommand.js';
+import { RenameViewCommand } from './RenameViewCommand.js';
+
+/**
+ * ViewSetModel — a model edited as several views (diagrams), with one current.
+ * Owns what every such model does with its views: create, duplicate, rename,
+ * delete, switch, and telling listeners after each change, so a UI only has to
+ * re-render on notification. It has one undo history (`history`, a
+ * ModelHistory, as Archi has one command stack per model) that every view of
+ * it shares: adding, renaming and deleting views are undoable steps on it too.
+ *
+ * Subclasses make their own kind of view through `_newView(id, title)`; a view
+ * has an `id`, a `title`, and `copy(id, title)` for duplication. DiagramModel
+ * (the template editor) and ArchimateModel extend it.
+ */
+export class ViewSetModel {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.idPrefix] - Prefix for generated view ids
+     * @param {string} [options.viewNoun] - What a view is called in default titles ('Diagram', 'View')
+     */
+    constructor({ idPrefix = 'view', viewNoun = 'View' } = {}) {
+        if (new.target === ViewSetModel) throw new TypeError('ViewSetModel is abstract — subclass it');
+        /** @type {Map<string, Object>} in tab order */
+        this._views = new Map();
+        this.currentViewId = null;
+        this.idPrefix = idPrefix;
+        this.viewNoun = viewNoun;
+        this._nextId = 1;
+        this._listeners = [];
+        /** Bumped by every change to the set of views (new, duplicated, renamed, deleted). */
+        this._structure = 0;
+        this._saved = null;
+        this._editListeners = [];
+        this._watched = new WeakSet();
+    }
+
+    /** The model's one undo history, which every view of it shares (ModelHistory). */
+    get history() {
+        return (this._history ??= new ModelHistory(this, this.historyOptions ?? {}));
+    }
+
+    /** Make a view one of this model's: its edits go on the model's history. @protected */
+    _adopt(view) {
+        view.history = this.history;
+        return view;
+    }
+
+    // ===== Saved or not =====
+
+    /** Remember this state as the saved one (after opening or saving a file). */
+    markSaved() {
+        this._saved = { structure: this._structure, token: this.history.stateToken };
+        this._emitEdit();
+    }
+
+    /**
+     * Whether anything changed since markSaved: an edit on the model's history
+     * (any view's, or to the views themselves) not undone back again.
+     */
+    isDirty() {
+        const saved = this._saved ?? { structure: 0, token: 0 };
+        return this._structure !== saved.structure || this.history.stateToken !== saved.token;
+    }
+
+    /** Call `fn(model)` after every edit (any view's history, or the set of views). Returns an unsubscribe function. */
+    onEdit(fn) {
+        this._editListeners.push(fn);
+        this._watchHistories();
+        return () => { this._editListeners = this._editListeners.filter(l => l !== fn); };
+    }
+
+    /** Listen to the model's history (and any view's own, for one not adopted). @private */
+    _watchHistories() {
+        for (const history of [this.history, ...this.views().map(v => v.history)]) {
+            if (!history?.onChange || this._watched.has(history)) continue;
+            this._watched.add(history);
+            history.onChange(() => this._emitEdit());
+        }
+    }
+
+    /** @private */
+    _emitEdit() {
+        for (const fn of this._editListeners) fn(this);
+    }
+
+    /** A new, empty view of this model's kind. @protected */
+    _newView(id, title) {
+        throw new Error(`${this.constructor.name} must implement _newView()`);
+    }
+
+    /** Subscribe to changes; returns an unsubscribe function. */
+    onChange(fn) {
+        this._listeners.push(fn);
+        return () => { this._listeners = this._listeners.filter(l => l !== fn); };
+    }
+
+    /** All views, in order. */
+    views() {
+        return [...this._views.values()];
+    }
+
+    get viewCount() {
+        return this._views.size;
+    }
+
+    get currentView() {
+        return this._views.get(this.currentViewId) ?? null;
+    }
+
+    getView(id) {
+        return this._views.get(id) ?? null;
+    }
+
+    /** Title offered for the next new view. */
+    nextViewTitle() {
+        return `${this.viewNoun} ${this._views.size + 1}`;
+    }
+
+    /** Add an empty view and make it current. */
+    createView(title = this.nextViewTitle()) {
+        return this._add(this._newView(this._newId(), title));
+    }
+
+    /** Add an independent copy of a view and make it current. */
+    duplicateView(id) {
+        const original = this._views.get(id);
+        if (!original) return null;
+        return this._add(original.copy(this._newId(), `${original.title} (copy)`));
+    }
+
+    /** Give a view a new title (not an empty one). One undo step. */
+    renameView(id, title) {
+        const view = this._views.get(id);
+        if (!view || !title || title === view.title) return false;
+        this.history.execute(new RenameViewCommand(this, view, title));
+        return true;
+    }
+
+    /** A view's title set, as RenameViewCommand and replace do it (not undoable by itself). @protected */
+    _retitle(id, title) {
+        const view = this._views.get(id);
+        if (!view) return;
+        view.title = title;
+        this._notify();
+    }
+
+    /** The checks this model is held to (ViewSetChecker; a notation's model returns its own). */
+    checker() {
+        return new ViewSetChecker(this);
+    }
+
+    /** Find and replace over the model's texts (ModelSearch; a notation's model returns its own). */
+    search() {
+        return new ModelSearch(this);
+    }
+
+    /** The model's report (ModelReport; a notation's model returns its own), for reportHtml. */
+    report(options) {
+        return new ModelReport(this, options);
+    }
+
+    /** Whether a view may be deleted: the last one stays. */
+    canDeleteView(id) {
+        return this._views.has(id) && this._views.size > 1;
+    }
+
+    /** Remove a view; the last one cannot be removed. The neighbour becomes current. One undo step. */
+    deleteView(id) {
+        if (!this.canDeleteView(id)) return false;
+        this.history.execute(new RemoveViewCommand(this, this._views.get(id)));
+        return true;
+    }
+
+    switchTo(id) {
+        if (!this._views.has(id) || id === this.currentViewId) return false;
+        this.currentViewId = id;
+        this._notify();
+        return true;
+    }
+
+    /**
+     * Add a view (last), shown unless `current` is false: one undo step on the
+     * model's history (AddViewCommand).
+     * @protected
+     */
+    _add(view, { current = true } = {}) {
+        this.history.execute(new AddViewCommand(this, this._adopt(view), { current }));
+        return view;
+    }
+
+    /**
+     * Put a view in the model at `index` (default last), current if asked; as
+     * AddViewCommand and RemoveViewCommand's undo do it.
+     * @protected
+     */
+    _insertView(view, { index = this._views.size, current = true } = {}) {
+        const entries = [...this._views].filter(([id]) => id !== view.id);
+        entries.splice(Math.min(index, entries.length), 0, [view.id, view]);
+        this._views = new Map(entries);
+        if (current || !this.currentViewId) this.currentViewId = view.id;
+        this._notify();
+    }
+
+    /**
+     * Take a view out of the model; the one in front becomes `next` (if given
+     * and still there) or, when it was this one, its neighbour.
+     * @returns {{index: number, current: boolean}} where it was, and whether it was in front
+     * @protected
+     */
+    _removeView(id, { next = null } = {}) {
+        const ids = [...this._views.keys()];
+        const index = ids.indexOf(id);
+        const current = this.currentViewId === id;
+        this._views.delete(id);
+        if (next && this._views.has(next)) this.currentViewId = next;
+        else if (current) this.currentViewId = ids[index + 1] ?? ids[index - 1] ?? null;
+        this._notify();
+        return { index, current };
+    }
+
+    _newId() {
+        let id;
+        do { id = `${this.idPrefix}-${this._nextId++}`; } while (this._views.has(id));
+        return id;
+    }
+
+    _notify() {
+        for (const fn of this._listeners) fn(this);
+        this._watchHistories();
+    }
+
+    /** A change to the set of views: the model is no longer as saved. @protected */
+    _changedStructure() {
+        this._structure++;
+        this._emitEdit();
+    }
+}

package/src/charting/diagramModel/index.js

@@ -0,0 +1,6 @@
+export { DiagramModel } from './DiagramModel.js';
+export { DiagramView } from './DiagramView.js';
+export { ViewSetModel } from './ViewSetModel.js';
+export { ModelSearch, SEARCH_FIELDS } from './ModelSearch.js';
+export { DiagramModelSearch } from './DiagramModelSearch.js';
+export { ReplaceTextCommand } from './ReplaceTextCommand.js';

package/src/charting/diagramModel/nameTransforms.js

@@ -0,0 +1,29 @@
+/**
+ * Ways to rewrite a name (the nameTransform jArchi script): Title Case,
+ * Sentence case, splitting camelCase into words and back, squeezing spaces,
+ * upper and lower case. Pure; ModelSearch#transformCommand applies one to
+ * a model's names.
+ */
+
+const words = (s) => String(s ?? '').trim().split(/\s+/).filter(Boolean);
+/** Words not capitalised inside a title. */
+const SMALL = new Set(['a', 'an', 'and', 'as', 'at', 'but', 'by', 'for', 'in', 'of', 'on', 'or', 'the', 'to', 'with']);
+const capital = (w) => w.charAt(0).toUpperCase() + w.slice(1);
+
+/** The transforms, in menu order: [key, label, (name) => name]. */
+export const NAME_TRANSFORMS = Object.freeze([
+    ['title', 'Title Case', (s) => words(s).map((w, i) => (i && SMALL.has(w.toLowerCase()) ? w.toLowerCase() : capital(w.toLowerCase()))).join(' ')],
+    ['sentence', 'Sentence case', (s) => { const t = words(s).join(' ').toLowerCase(); return capital(t); }],
+    ['split-camel', 'Split camelCase (OrderService → Order Service)', (s) => String(s ?? '').replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim()],
+    ['camel', 'camelCase (Order Service → orderService)', (s) => words(String(s ?? '').replace(/[_-]+/g, ' ')).map((w, i) => (i ? capital(w.toLowerCase()) : w.toLowerCase())).join('')],
+    ['squeeze', 'Remove extra spaces', (s) => words(s).join(' ')],
+    ['upper', 'UPPER CASE', (s) => String(s ?? '').trim().toUpperCase()],
+    ['lower', 'lower case', (s) => String(s ?? '').trim().toLowerCase()],
+]);
+
+/** A name transformed (`key` one of NAME_TRANSFORMS'). */
+export function transformName(key, name) {
+    const fn = NAME_TRANSFORMS.find(([k]) => k === key)?.[2];
+    if (!fn) throw new RangeError(`No such name transform: ${key}`);
+    return fn(name);
+}