@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/ViewMenu.js

@@ -0,0 +1,70 @@
+import { FormDialog } from './FormDialog.js';
+
+/**
+ * ViewMenu — the menu items for working with the views of a ViewSetModel:
+ * new, duplicate, rename and delete. One source for every place that offers
+ * them (a tab's right-click menu, a File menu, a model tree's view node), so
+ * they read and behave the same everywhere. Names are asked for in a
+ * FormDialog; a delete is confirmed first.
+ */
+export class ViewMenu {
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} [options]
+     * @param {Document|Function} [options.document] - The page, or a function returning it
+     *   (a part only has one once mounted)
+     * @param {string} [options.noun] - What a view is called in labels ('view', 'diagram')
+     * @param {(view) => void} [options.editProperties] - Opens the view's properties (its name
+     *   included); when given, "Properties…" replaces "Rename…"
+     */
+    constructor(model, { document: doc = null, noun = 'view', editProperties = null } = {}) {
+        this.model = model;
+        this._document = doc;
+        this.noun = noun;
+        this.editProperties = editProperties;
+    }
+
+    get document() {
+        const doc = typeof this._document === 'function' ? this._document() : this._document;
+        return doc ?? globalThis.document;
+    }
+
+    /** "New view…": asks for a name, then creates the view (it becomes current). */
+    newViewItem() {
+        return {
+            label: `New ${this.noun}…`,
+            action: () => this._askTitle(`New ${this.noun}`, this.model.nextViewTitle(), (title) => this.model.createView(title)),
+        };
+    }
+
+    /** Properties… (or Rename…), Duplicate and (unless it is the last view) Delete for one view. */
+    items(viewId) {
+        const view = this.model.getView(viewId);
+        if (!view) return [];
+        return [
+            this.editProperties
+                ? { label: 'Properties…', action: () => this.editProperties(view) }
+                : { label: 'Rename…', action: () => this._askTitle(`Rename ${this.noun}`, view.title, (title) => this.model.renameView(viewId, title)) },
+            { label: 'Duplicate', action: () => this.model.duplicateView(viewId) },
+            ...(this.model.canDeleteView(viewId) ? [
+                { separator: true },
+                { label: 'Delete', danger: true, action: () => this._confirmDelete(view) },
+            ] : []),
+        ];
+    }
+
+    _askTitle(title, value, onTitle) {
+        new FormDialog({
+            title,
+            submitLabel: 'OK',
+            document: this.document,
+            fields: [{ key: 'title', label: 'Name', type: 'text', value }],
+            onApply: ({ title: t }) => { if (t?.trim()) onTitle(t.trim()); },
+        }).open();
+    }
+
+    _confirmDelete(view) {
+        const win = this.document.defaultView ?? globalThis;
+        if (win.confirm(`Delete "${view.title}"?`)) this.model.deleteView(view.id);
+    }
+}

package/src/charting/ViewPropertiesDialog.js

@@ -0,0 +1,77 @@
+import { FormDialog } from './FormDialog.js';
+import { CompositeCommand } from './CommandHistory.js';
+import { SetPropertiesCommand } from './DiagramEditorCommands.js';
+import { RenameViewCommand } from './diagramModel/RenameViewCommand.js';
+
+/**
+ * ViewPropertiesDialog — one view's properties: its name and documentation,
+ * plus whatever its kind of view adds. The name and documentation are one
+ * undo step on the model's history (renamed through the model, so tabs, tree
+ * and menus follow). Opened from a view's
+ * tab or tree menu as "Properties…" (see ViewMenu's `editProperties`).
+ *
+ * Subclasses add sections: `sections()` returns more FormDialog fields and
+ * `applySections(values)` applies them. SettingsViewPropertiesDialog (a view's
+ * level of the settings cascade, used by ArchiMate) and
+ * DiagramViewPropertiesDialog (a diagram's line style, used by the template
+ * editor) are the two kinds.
+ */
+export class ViewPropertiesDialog {
+    /**
+     * @param {Object} options
+     * @param {ViewSetModel} options.model
+     * @param {Object} options.view - A view of that model (`title`, optional `documentation`)
+     * @param {Document} [options.document]
+     */
+    constructor({ model, view, document: doc = globalThis.document }) {
+        this.model = model;
+        this.view = view;
+        this.doc = doc;
+    }
+
+    /** Every field: the view's own, then the subclass's sections. */
+    fields() {
+        return [
+            { type: 'heading', label: 'View' },
+            { key: 'title', label: 'Name', type: 'text', value: this.view.title },
+            { key: 'documentation', label: 'Documentation', type: 'textarea', rows: 3, value: this.view.documentation ?? '' },
+            ...this.sections(),
+        ];
+    }
+
+    /** More fields for this kind of view. */
+    sections() {
+        return [];
+    }
+
+    /** Apply the dialog's values: the name and documentation as one undo step, then the sections. */
+    apply(values) {
+        const { model, view } = this;
+        const title = values.title?.trim();
+        const documentation = values.documentation?.trim() || undefined;
+        const steps = [
+            title && title !== view.title && new RenameViewCommand(model, view, title),
+            documentation !== (view.documentation || undefined) && new SetPropertiesCommand(view, { documentation }, 'View documentation'),
+        ].filter(Boolean);
+        if (steps.length) (model.history ?? view.history).execute(steps.length === 1 ? steps[0] : new CompositeCommand(`Edit "${view.title}"`, steps));
+        this.applySections(values);
+    }
+
+    /** Apply this kind of view's own sections. */
+    applySections(values) {}
+
+    open() {
+        return new FormDialog({
+            title: `${this.constructor.heading} — ${this.view.title}`,
+            fields: this.fields(),
+            submitLabel: 'Save',
+            idPrefix: 'view-properties-',
+            document: this.doc,
+            validate: (values) => (values.title?.trim() ? null : 'Name is required'),
+            onApply: (values) => this.apply(values),
+        }).open();
+    }
+
+    /** The dialog's title. */
+    static heading = 'View properties';
+}

package/src/charting/ViewTabStrip.js

@@ -0,0 +1,81 @@
+import { el } from '../workspace/dom.js';
+import { PopupMenu } from './PopupMenu.js';
+
+/**
+ * ViewTabStrip — a row (or column) of tabs, one per view, with an optional
+ * close button and a right-click menu per tab. Stateless: render() builds the
+ * strip from the items given.
+ */
+export class ViewTabStrip {
+    /**
+     * @param {Object} options
+     * @param {'horizontal'|'vertical'} [options.orientation]
+     * @param {(id: string) => void} options.onSelect
+     * @param {(id: string) => void} [options.onClose] - Shows a × on each tab
+     * @param {(id: string) => Array} [options.menuItems] - PopupMenu items for a tab
+     * @param {Document} [options.document]
+     */
+    constructor({ orientation = 'horizontal', onSelect, onClose = null, menuItems = () => [], document: doc = document }) {
+        this.orientation = orientation;
+        this.onSelect = onSelect;
+        this.onClose = onClose;
+        this.menuItems = menuItems;
+        this.doc = doc;
+    }
+
+    /**
+     * @param {Array<{id: string, title: string}>} items
+     * @param {string} activeId
+     * @returns {HTMLElement}
+     */
+    render(items, activeId) {
+        const vertical = this.orientation === 'vertical';
+        return el({
+            attrs: { role: 'tablist', 'aria-orientation': this.orientation },
+            style: {
+                flex: vertical ? '0 0 150px' : '0 0 auto', display: 'flex', flexDirection: vertical ? 'column' : 'row',
+                gap: '2px', background: '#f0f0f0', padding: '4px 8px', fontSize: '12px',
+                borderRight: vertical ? '1px solid #ccc' : 'none', borderBottom: vertical ? 'none' : '1px solid #ccc',
+                overflowX: vertical ? 'visible' : 'auto', overflowY: vertical ? 'auto' : 'visible',
+            },
+            children: items.map(({ id, title }) => this._tab(id, title, id === activeId, vertical)),
+        }, this.doc);
+    }
+
+    _tab(id, title, active, vertical) {
+        const menuItems = this.menuItems(id);
+        return {
+            attrs: { role: 'tab', tabindex: '0', 'aria-selected': String(active), 'data-view-id': id },
+            style: {
+                display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 12px', border: '1px solid #ccc',
+                cursor: 'pointer', fontSize: '12px', whiteSpace: 'nowrap', userSelect: 'none',
+                borderRadius: vertical ? '3px' : '3px 3px 0 0',
+                background: active ? '#fff' : '#e8e8e8', fontWeight: active ? 'bold' : 'normal',
+            },
+            on: {
+                click: () => this.onSelect(id),
+                keydown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.onSelect(id);
+                    }
+                },
+                contextmenu: (e) => {
+                    if (!menuItems.length) return;
+                    e.preventDefault();
+                    PopupMenu.show(e.clientX, e.clientY, menuItems, this.doc);
+                },
+            },
+            children: [
+                { tag: 'span', text: title },
+                this.onClose && {
+                    tag: 'button',
+                    text: '×',
+                    attrs: { type: 'button', 'aria-label': `Close ${title}`, title: 'Close tab' },
+                    style: { border: 'none', background: 'none', padding: '0', cursor: 'pointer', fontSize: '14px', lineHeight: '1', color: '#888' },
+                    on: { click: (e) => { e.stopPropagation(); this.onClose(id); } },
+                },
+            ].filter(Boolean),
+        };
+    }
+}

package/src/charting/archimate/ArchiFileFormat.js

@@ -0,0 +1,32 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { toArchimateModel, toArchiExport } from '../../archimateArchiFormat.js';
+import { parseArchiFile, toArchiFile } from '../../archimateArchive.js';
+
+/**
+ * Archi's own file (.archimate): plain XML, or a zip archive with the
+ * pictures when a view has any (toArchiFile, parseArchiFile). Every view is
+ * written: ArchiMate diagrams, canvases and sketches.
+ */
+export class ArchiFileFormat extends ModelFileFormat {
+    get label() { return '.archimate'; }
+    get accept() { return '.archimate,.xml'; }
+    get fileName() { return 'model.archimate'; }
+    get readsBytes() { return true; }
+    get featureName() { return 'Archimate'; }
+
+    /** An Archi file: a zip archive (with pictures), or XML in Archi's namespace. */
+    recognizes(bytes) {
+        const head = bytes instanceof Uint8Array ? bytes : new TextEncoder().encode(String(bytes));
+        if (head[0] === 0x50 && head[1] === 0x4b) return true;   // 'PK': a zip archive
+        return /archimatetool\.com\/archimate/.test(new TextDecoder().decode(head.slice(0, 4000)));
+    }
+
+    /** @returns {{data, mimeType, archive}} `archive`: true when the file is a zip archive */
+    export(model) {
+        return toArchiFile(...toArchiExport(model));
+    }
+
+    import(bytes) {
+        return toArchimateModel(parseArchiFile(bytes));
+    }
+}