@peter.prib/renderengine 0.4.0 → 0.7.0

package/src/workspace/nav/NavMenu.js

@@ -0,0 +1,143 @@
+import { render as renderSpecs } from '../dom.js';
+import { NavEntry } from './NavEntry.js';
+import { NavItem } from './NavItem.js';
+import { NavGroup } from './NavGroup.js';
+import { NavSection } from './NavSection.js';
+import { ICONS } from '../../icons/index.js';
+
+/**
+ * NavMenu — a vertical navigation menu (a sidebar's), written as data:
+ *
+ *   new NavMenu({
+ *       label: 'Workbench',
+ *       items: [
+ *           { section: 'Notebooks' },
+ *           { id: 'new-nb', label: '+ New Notebook', action: newNotebook, selectable: false },
+ *           { group: 'Dev Tools', id: 'devtools', items: [
+ *               { id: 'datamodel', icon: '◫', label: 'Data Model', action: (e) => open('datamodel', e) },
+ *           ] },
+ *           { id: 'admin', icon: '⚙', label: 'Admin', href: '/admin', visible: (ctx) => ctx.role === 'admin' },
+ *       ],
+ *       context: { role },
+ *   }).render(host);
+ *
+ * An entry is an item (`label`), a collapsible group (`group`, `items`) or a
+ * section heading (`section`) — NavItem, NavGroup, NavSection, built from the
+ * JSON by NavMenu.entry. The menu keeps which item is active (`activeId`,
+ * marked with `aria-current`) and which groups are open; serialize() returns
+ * both as JSON for a host to keep, and the constructor takes them back.
+ */
+export class NavMenu {
+    /**
+     * @param {Object} options
+     * @param {Array<Object|NavEntry>} options.items
+     * @param {string} [options.label] - The menu's accessible name
+     * @param {string} [options.activeId]
+     * @param {Object<string, boolean>} [options.open] - Group id → open, overriding each group's own
+     * @param {Object} [options.context] - What `visible` functions read (`{ role }`)
+     * @param {(item: NavItem, event: Event) => void} [options.onSelect] - After an item's own action
+     * @param {(groupId: string, open: boolean) => void} [options.onToggle]
+     * @param {import('../../icons/IconSet.js').IconSet} [options.icons] - Where an item's `icon` is looked up (default: the built-in ICONS)
+     * @param {Document} [options.document]
+     */
+    constructor({ items = [], label = null, activeId = null, open = {}, context = {}, onSelect = null, onToggle = null, icons = ICONS, document: doc = globalThis.document } = {}) {
+        this.entries = items.map(NavMenu.entry);
+        this.label = label;
+        this.activeId = activeId;
+        this.context = context;
+        this.onSelect = onSelect;
+        this.onToggle = onToggle;
+        this.icons = icons;
+        this.doc = doc;
+        this.host = null;
+        /** Rendered item → its element, for marking the active one in place. */
+        this.nodes = new Map();
+        for (const group of this.groups()) {
+            if (group.id != null && group.id in open) group.open = !!open[group.id];
+        }
+    }
+
+    /** An entry from its JSON: a group, a section heading or an item. */
+    static entry(json) {
+        if (json instanceof NavEntry) return json;
+        if (json == null || typeof json !== 'object') throw new Error(`NavMenu: an entry is an object, not ${json}`);
+        if ('group' in json) return new NavGroup(json, NavMenu.entry);
+        if ('section' in json) return new NavSection(json);
+        if (json.label == null) throw new Error(`NavMenu: an item needs a label (or "group", or "section")`);
+        return new NavItem(json);
+    }
+
+    /** Render into `host`, replacing what it held. */
+    render(host = this.host) {
+        if (!host) throw new Error('NavMenu: no host to render into');
+        this.host = host;
+        this.nodes = new Map();
+        renderSpecs(host, {
+            tag: 'nav',
+            cls: 'ws-nav',
+            attrs: { 'aria-label': this.label },
+            children: this.specsOf(this.entries),
+        }, this.doc);
+        return this;
+    }
+
+    /** The specs of the entries that show. */
+    specsOf(entries) {
+        return entries.filter(e => e.isVisible(this)).map(e => e.spec(this));
+    }
+
+    /** A click on `item`: its action, then (if it is selectable) it becomes active. */
+    select(item, event) {
+        item.action?.(event, item, this);
+        if (item.selectable && item.id != null) this.setActive(item.id);
+        this.onSelect?.(item, event);
+    }
+
+    /** Mark the item `id` as the active one (null: none), in place. */
+    setActive(id) {
+        this.activeId = id;
+        for (const [item, node] of this.nodes) {
+            const on = id != null && item.id === id;
+            node.classList.toggle('ws-nav-item-active', on);
+            if (on) node.setAttribute('aria-current', 'page');
+            else node.removeAttribute('aria-current');
+        }
+    }
+
+    /** A group opened or closed (by the user, or by setOpen). */
+    toggled(group, open) {
+        if (group.open === open) return;
+        group.open = open;
+        this.onToggle?.(group.id, open);
+    }
+
+    /** Change what `visible` functions read, and re-render if rendered. */
+    setContext(context) {
+        this.context = { ...this.context, ...context };
+        if (this.host) this.render();
+        return this;
+    }
+
+    /** The entry with this id, anywhere in the menu. */
+    find(id) {
+        return this.all().find(e => e.id === id) ?? null;
+    }
+
+    /** Every entry, depth first. */
+    all(entries = this.entries, out = []) {
+        for (const e of entries) { out.push(e); this.all(e.children, out); }
+        return out;
+    }
+
+    groups() {
+        return this.all().filter(e => e instanceof NavGroup);
+    }
+
+    /** The menu's state as JSON: the active item and each group's open state. */
+    serialize() {
+        return {
+            activeId: this.activeId,
+            open: Object.fromEntries(this.groups().filter(g => g.id != null).map(g => [g.id, g.open])),
+        };
+    }
+}

package/src/workspace/nav/NavSection.js

@@ -0,0 +1,17 @@
+import { NavEntry } from './NavEntry.js';
+
+/** NavSection — a heading between entries ("Notebooks"); not clickable. */
+export class NavSection extends NavEntry {
+    /**
+     * @param {Object} options
+     * @param {string} options.section - The heading's text
+     */
+    constructor({ section, ...rest }) {
+        super(rest);
+        this.label = section;
+    }
+
+    spec() {
+        return { cls: ['ws-nav-section', ...this.extraClasses()], text: this.label, attrs: { role: 'heading', title: this.title } };
+    }
+}

package/src/workspace/nav/index.js

@@ -0,0 +1,5 @@
+export { NavEntry } from './NavEntry.js';
+export { NavItem } from './NavItem.js';
+export { NavGroup } from './NavGroup.js';
+export { NavSection } from './NavSection.js';
+export { NavMenu } from './NavMenu.js';

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -57,8 +57,13 @@ export class ArchimateCanvasPart extends EditorPart {
         /** Whether a line to a box nested in its source is drawn (Archi leaves it out). */
         this.showNestedLines = !!spec.showNestedLines;
         this.settings = new SettingsManager();
-        // A settings change (Model settings…, a view's properties) redraws the canvas.
-        this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
+        // A settings change (Model settings…, a view's properties) redraws the canvas; the tool's, the tree too.
+        this._unsubscribeSettings = this.settings.onSettingsChange((event) => {
+            if (event?.type === 'tool') this.tree?.setOptions(this.settings.treeOptions());
+            if (!this.mounted) return;
+            this.editor?.render();
+            if (event?.type === 'tool') this._treePanel?.refresh();
+        });
         // The user's specializations (or the defaults), as the main editor offers them; one already loaded is kept.
         if (!ArchimateSpecializationRegistry.list().length) ArchimateSpecializationRegistry.loadFrom();
         this._follow(this.model);
@@ -124,7 +129,7 @@ export class ArchimateCanvasPart extends EditorPart {
     /** The model tree over the current model (kept across renders, so its mode and selection stay). */
     get modelTree() {
         if (this.tree?.model !== this.model) {
-            this.tree = new ModelTree(this.model, { mode: 'byLayer' });
+            this.tree = new ModelTree(this.model, { mode: 'byLayer', ...this.settings.treeOptions() });
             // A view chosen in the tree opens it; an element chosen there is selected on the canvas.
             this.tree.onSelectionChange((data) => {
                 if (data.kind === 'view' && data.view.id !== this.model.currentViewId) this.model.switchTo(data.view.id);

package/src/workspace/parts/DataModelPart.js

@@ -4,6 +4,9 @@ import { MenuBar } from '../../charting/MenuBar.js';
 import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
 import { FormDialog } from '../../charting/FormDialog.js';
 import { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
+import { duplicateSearchFields, duplicateSearchOptions, validateDuplicateSearch } from '../../charting/duplicateSearchForm.js';
+import { DuplicatesDialog } from '../../charting/DuplicatesDialog.js';
+import { MergeCompareDialog } from '../../charting/MergeCompareDialog.js';
 import { DataModelNotation } from '../../datamodel.js';
 import {
     DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
@@ -364,6 +367,7 @@ export class DataModelPart extends ModelHosted(ChartPart) {
             { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
             { separator: true },
             { label: 'Check model…', action: () => this.checkModel() },
+            ...this.modelMenuItems(),
             { label: 'Scorecard…', action: () => this.scoreModel() },
             ...EditorPart.menuGroup('Naming standard', this.namingItems()),
             { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
@@ -509,6 +513,93 @@ export class DataModelPart extends ModelHosted(ChartPart) {
         return findings;
     }
 
+    /** What can be done to the whole model: Find likely duplicates… (the Tools menu and the model's tab show it too). */
+    modelMenuItems() {
+        return [{ label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
+    }
+
+    /**
+     * Find likely duplicates…: at which level (the one in front first, when it
+     * is one), how to compare (names, definitions or attributes; exactly or
+     * by their words) and what noise to leave out (duplicateSearchFields),
+     * then the groups found, each with Merge… (showDuplicates).
+     */
+    askDuplicates() {
+        const levels = DataModel.LEVELS.filter(l => this.model.level(l).entities.length > 1);
+        const ordered = levels.includes(this.level) ? [this.level, ...levels.filter(l => l !== this.level)] : levels;
+        const entities = levels.flatMap(l => this.model.level(l).entities);
+        const properties = [...new Set(entities.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+        return new FormDialog({
+            title: 'Find likely duplicates',
+            description: 'Entities at one level are compared by their words: case, punctuation, word order and the noise words do not count.',
+            fields: duplicateSearchFields({
+                scope: { label: 'Level', choices: (ordered.length ? ordered : [this.level]).map(l => [l, DataModelNotation.level(l)?.label ?? l]) },
+                compare: [['name', 'Names'], ['documentation', 'Definitions'], ['attributes', 'Attributes']],
+                properties,
+            }).filter(f => f.key !== 'acrossTypes'),
+            submitLabel: 'Find', idPrefix: 'duplicates-',
+            document: this.container?.ownerDocument ?? globalThis.document,
+            validate: validateDuplicateSearch,
+            onApply: (values) => {
+                const { options, scope } = duplicateSearchOptions(values);
+                this.showDuplicates(scope, options);
+            },
+        }).open();
+    }
+
+    /** The entities at `level` that look like one thing twice (DataModel#duplicateEntities), listed, each group with Merge…. */
+    showDuplicates(level, options = {}) {
+        const find = () => this.model.duplicateEntities(level, options);
+        const groups = find();
+        new DuplicatesDialog({
+            groups,
+            refind: find,
+            merge: async (group) => !!(await this.askMergeEntities(group.level, group.ids)),
+            onReveal: (group) => this.revealFinding(group),
+            empty: 'No entities look like the same thing twice.',
+            document: this.container?.ownerDocument ?? globalThis.document,
+        }).open();
+        return groups;
+    }
+
+    /**
+     * Merge some entities at a level into one (DataModel#mergeEntitiesCommand),
+     * one undo step. When they differ, they are shown side by side
+     * (DataModel#entityComparison, MergeCompareDialog) to choose which is kept
+     * and, when their definitions differ, which (or all of them joined); OK
+     * merges, Cancel leaves them. Alike, the first is kept without asking.
+     * Resolves to the merge's command, or null.
+     */
+    async askMergeEntities(level, ids) {
+        const schema = this.model.level(level);
+        const entities = ids.map(id => schema.entity(id)).filter(Boolean);
+        if (entities.length < 2) return null;
+        const count = (n, noun) => `${n} ${noun}${n === 1 ? '' : 's'}`;
+        const used = (e) => `${count((e.attributes ?? []).length, 'attribute')}, ${count(schema.relationships.filter(r => r.source === e.id || r.target === e.id).length, 'relationship')}`;
+        const kept = entities.map(e => e.id);
+        const merge = (keep, choices = {}) => this.runModelEdit(this.model.mergeEntitiesCommand(level, keep, kept.filter(id => id !== keep), choices));
+        const rows = this.model.entityComparison(level, kept);
+        if (!rows.some(row => MergeCompareDialog.differs(row))) return merge(kept[0]);
+        const texts = [...new Set(entities.map(e => String(e.description ?? '').trim()).filter(Boolean))];
+        const JOINED = '\u0000joined';
+        const values = await new MergeCompareDialog({
+            title: `Merge ${entities.length} entities`,
+            description: 'The one kept takes the others\' attributes it lacks, their relationships and their mappings; the others go. Where they differ (marked ≠), choose.',
+            columns: entities.map(e => `${e.name || e.id} (${used(e)})`),
+            rows,
+            fields: [
+                { key: 'keep', label: 'Keep', type: 'select', value: kept[0], choices: entities.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
+                ...(texts.length > 1 ? [{
+                    key: 'description', label: 'Definition', type: 'select', value: JOINED,
+                    choices: [[JOINED, 'All of them, joined'], ...texts.map(t => [t, t.length > 60 ? `${t.slice(0, 60)}…` : t])],
+                }] : []),
+            ],
+            document: this.container?.ownerDocument ?? globalThis.document,
+        }).ask();
+        if (!values) return null;
+        return merge(values.keep, texts.length > 1 ? { description: values.description === JOINED ? texts.join('\n\n') : values.description } : {});
+    }
+
     /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
     revealFinding(finding) {
         if (finding.kind === 'perspective') {

package/src/workspace/parts/EditorPart.js

@@ -181,9 +181,16 @@ export class EditorPart extends Part {
                 { label: 'Transform names…', action: () => this.askTransformNames() },
                 ...(this.model.search().propertyNames().length ? [{ label: 'Rename property…', action: () => this.askRenameProperty() }] : []),
             ] : []),
+            // The editor's own edits of the whole model (Find likely duplicates…), when no Tools menu has them.
+            ...(() => { const own = this.modelsHost ? [] : this.modelMenuItems(); return own.length ? [{ separator: true }, ...own] : []; })(),
         ];
     }
 
+    /** What can be done to the whole model (Find likely duplicates…): the editor's; the Tools menu and the model's tab show them. */
+    modelMenuItems() {
+        return this.editor?.modelMenuItems?.() ?? [];
+    }
+
     /** Run a model-wide edit (null: nothing to do; a rename, a merge) as one undo step, then redraw. */
     runModelEdit(command) {
         if (!command) return null;
@@ -305,6 +312,7 @@ export class EditorPart extends Part {
             { separator: true },
             ...some(open, models['Open… in a new tab'], ...saving, models['Duplicate model'], models['Close model']),
             ...EditorPart.menuGroup(this.modelsHost?.keptWhere ?? 'This browser', this.modelsHost?.keepItems?.(this) ?? []),
+            ...(this.modelsHost?.contentItems ? [{ label: 'Open from', items: this.modelsHost.contentItems() }] : []),
             { separator: true },
             ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
             ...EditorPart.menuGroup('Export', this.exportItems(), { prefix: true }),

package/src/workspace/parts/ModelHosted.js

@@ -114,6 +114,7 @@ export const ModelHosted = (Base) => class extends Base {
                 { label: 'Duplicate model', action: () => host.duplicate(this) },
                 { label: 'Close model', action: () => host.closeModel(this.id) },
                 ...EditorPart.menuGroup(host.keptWhere ?? 'This browser', host.keepItems?.(this) ?? []),
+                ...(host.contentItems ? [{ label: 'Open from', items: host.contentItems() }] : []),
             ] : []),
         ]);
     }