@peter.prib/renderengine 0.2.5 → 0.2.7

package/src/charting/DiagramEditor.js

@@ -8,6 +8,7 @@ import { getEdgeMarker } from './edgeMarkers/index.js';
 import { PopupMenu } from './PopupMenu.js';
 import { TextStyle, TEXT_STYLE_KEYS } from './TextStyle.js';
 import { FormDialog } from './FormDialog.js';
+import { ModelCheckDialog } from './ModelCheckDialog.js';
 import { NoteTemplate } from './templates/NoteTemplate.js';
 import { parseShapeText, placeShapes } from './textToShapes.js';
 import { ViewFit } from './ViewFit.js';
@@ -914,33 +915,11 @@ export class DiagramEditor {
         const checker = this.model?.checker?.(this.checkerOptions());
         if (!checker) return [];
         const findings = checker.run();
-        let dialog = null;
-        const list = el({
-            style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '420px' },
-            children: findings.length ? findings.map(finding => ({
-                style: { display: 'flex', gap: '4px', alignItems: 'stretch' },
-                children: [
-                    {
-                        tag: 'button',
-                        attrs: { type: 'button', title: 'Show it', 'data-code': finding.code },
-                        style: { flex: '1', textAlign: 'left', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', background: finding.severity === 'warning' ? '#fff6e5' : '#f5f8fc', cursor: 'pointer' },
-                        text: `${finding.severity === 'warning' ? '⚠' : 'ℹ'} ${finding.message}`,
-                        on: { click: () => { dialog?.close(); this.revealFinding(finding); } },
-                    },
-                    ...this.findingActions(finding).map(act => ({
-                        tag: 'button', attrs: { type: 'button', 'data-action': act.label }, text: act.label,
-                        style: { padding: '4px 8px', cursor: 'pointer' },
-                        on: { click: () => { dialog?.close(); act.action(); } },
-                    })),
-                ],
-            })) : [{ text: 'Nothing found: the model passes every check.' }],
-        }, this.document);
-        dialog = new FormDialog({
-            title: `Model check: ${findings.length} finding${findings.length === 1 ? '' : 's'}`,
-            fields: [{ key: 'findings', label: '', type: 'custom', element: list, read: () => null }],
-            submitLabel: 'Close',
+        new ModelCheckDialog({
+            findings,
+            onReveal: (finding) => this.revealFinding(finding),
+            actionsFor: (finding) => this.findingActions(finding),
             document: this.document ?? document,
-            onApply: () => {},
         }).open();
         return findings;
     }
@@ -3244,8 +3223,10 @@ export class DiagramEditor {
         // Try template-based first (template diagram pattern)
         const ids = (this._dragState?.movers ?? [elementId]).filter(id => this.getTemplate(id));
         if (!ids.length || !this.history) return;
-        // Where they were dropped: into a shape that holds them, or out of their parent.
+        // Where they were dropped: into a shape that holds them, or out of their parent;
+        // a parent they stick out of grows to show them (worked out where they lie now).
         const nesting = this.nestingChanges(ids);
+        const fits = this.fitNesting(nesting);
         // Put them back, then move them all (and nest them) as one undo step.
         for (const id of ids) {
             const t = this.getTemplate(id);
@@ -3255,6 +3236,7 @@ export class DiagramEditor {
         const steps = [
             ...ids.map(id => new MoveElementCommand(this, id, deltaX, deltaY)),
             ...nesting.map(({ childId, parentId }) => this.nestCommand(childId, parentId)).filter(Boolean),
+            ...fits.map(({ id, bounds }) => new SetPropertiesCommand(this.getTemplate(id), bounds, 'Fit around nested')),
         ];
         this.history.execute(steps.length === 1 ? steps[0] : new CompositeCommand('Move', steps));
         this.render();
@@ -3264,11 +3246,15 @@ export class DiagramEditor {
 
     // ===== Nesting (a shape drawn inside another) =====
 
+    /** The room kept around a nested shape when its parent grows to show it: the top leaves room for the parent's name. */
+    static NEST_MARGIN = Object.freeze({ side: 12, top: 28 });
+
     /**
      * After a move, as the shapes lie now: each moved shape that is not moving
      * with its parent, whose parent changes. Its new parent is the innermost
-     * shape not moved that wholly holds its box and `canHold` it; none (null)
-     * takes it out of the one it was in.
+     * shape not moved that wholly holds its box and `canHold` it, else the
+     * innermost one its centre was dropped on that `nestsOnDrop` it (fitNesting
+     * then grows it); none (null) takes it out of the one it was in.
      * @param {Array<string>} movedIds
      * @returns {Array<{childId: string, parentId: (string|null), previousId: (string|null)}>}
      */
@@ -3283,15 +3269,50 @@ export class DiagramEditor {
             const child = this.getTemplate(childId);
             if (!child) continue;
             const inner = box(child);
-            const parent = [...this.templates.values()]
-                .filter(t => !moved.has(t.id) && t.visible !== false && this.canHold(t.id, childId) && holds(box(t), inner))
-                .sort((a, b) => a.width * a.height - b.width * b.height)[0];
+            const candidates = [...this.templates.values()].filter(t => !moved.has(t.id) && t.visible !== false && this.canHold(t.id, childId));
+            const smallest = (list) => list.sort((a, b) => a.width * a.height - b.width * b.height)[0];
+            const onCentre = (t) => { const b = box(t); return b.left <= child.x && child.x <= b.right && b.top <= child.y && child.y <= b.bottom; };
+            const parent = smallest(candidates.filter(t => holds(box(t), inner)))
+                ?? smallest(candidates.filter(t => onCentre(t) && this.nestsOnDrop(t.id, childId)));
             const parentId = parent?.id ?? null;
             if (parentId !== previousId) changes.push({ childId, parentId, previousId });
         }
         return changes;
     }
 
+    /**
+     * What has to grow for some nesting changes (nestingChanges') to show each
+     * child whole, as the shapes lie now: each new parent the child sticks out
+     * of, then that parent's own parents in turn, each to hold the one inside
+     * with NEST_MARGIN around it.
+     * @returns {Array<{id: string, bounds: {x, y, width, height}}>} new centre and size, outermost last
+     */
+    fitNesting(changes) {
+        const { side, top } = DiagramEditor.NEST_MARGIN;
+        const bounds = new Map();
+        const at = (id) => bounds.get(id) ?? (({ x, y, width, height }) => ({ x, y, width, height }))(this.getTemplate(id));
+        for (const { childId, parentId } of changes) {
+            let inner = at(childId);
+            for (let outerId = parentId; outerId; outerId = this.parentOf(outerId)) {
+                const outer = at(outerId);
+                const left = Math.min(outer.x - outer.width / 2, inner.x - inner.width / 2 - side);
+                const right = Math.max(outer.x + outer.width / 2, inner.x + inner.width / 2 + side);
+                const upper = Math.min(outer.y - outer.height / 2, inner.y - inner.height / 2 - top);
+                const lower = Math.max(outer.y + outer.height / 2, inner.y + inner.height / 2 + side);
+                const grown = { x: (left + right) / 2, y: (upper + lower) / 2, width: right - left, height: lower - upper };
+                if (grown.width === outer.width && grown.height === outer.height) break;   // it already shows it
+                bounds.set(outerId, grown);
+                inner = grown;
+            }
+        }
+        return [...bounds].map(([id, b]) => ({ id, bounds: b }));
+    }
+
+    /** Whether a shape dropped on another (its centre on it, sticking out) nests there. Never here; a subclass says when. */
+    nestsOnDrop(parentId, childId) {
+        return false;
+    }
+
     /** The shape this one is drawn inside (nested in), or null. None here: a subclass with nesting says. */
     parentOf(templateId) {
         return null;

package/src/charting/DiagramTypeRegistry.js

@@ -218,14 +218,22 @@ export const DIAGRAM_TYPES = {
     'enterprise-ontology': {
         name: 'Enterprise Ontology',
         group: 'Data',
-        description: 'The universal concepts enterprise data models are built from: parties in roles enter arrangements governing resources; events change them, ledgers record their value; classification, place, time, measure and rule describe them',
+        description: 'The universal concepts enterprise data models are built from (after IBM IFW\'s data concepts): parties in roles enter arrangements for products and resources; events change them, ledgers record their value; business direction steers them; classification, place, time, measure and rule describe them',
         templates: [
             shape('party', 'Party', ActorTemplate, {},
                 'A person or legal actor that can act or hold rights: person, organisation, government body. Every business process involves actors.'),
             shape('role', 'Role', StadiumTemplate, { width: 120, height: 44, fillColor: C.purple },
                 'The part a party (or resource) plays in a context: customer, supplier, employee, owner, custodian. A party has many roles, and they change over time.'),
-            shape('arrangement', 'Arrangement', DocumentTemplate, { width: 130, height: 70, fillColor: C.yellow },
-                'A formalised relationship between parties, or parties and resources: contract, agreement, subscription, membership, policy, lease. Business interactions are structured by agreements.'),
+            shape('agreement', 'Agreement', DocumentTemplate, { width: 130, height: 70, fillColor: C.yellow },
+                'The contract parties sign: the promises they agree on as one unit. It governs the arrangements made under it (BIAN keeps the two apart).'),
+            shape('arrangement', 'Arrangement', RoundedRectangleTemplate, { width: 130, height: 60, fillColor: C.orange },
+                'The terms a product or service is provided on, under an agreement: a subscription, an account, a loan, a lease, a membership.'),
+            shape('product', 'Product', PackageTemplate, { width: 120, height: 70, fillColor: C.green },
+                'What the business offers and sells, under terms: a plan, a policy, a loan, a service bundle. Not the things it holds (resources), but the offer made of them.'),
+            shape('feature', 'Product Feature', ParallelogramTemplate, { width: 130, height: 50, fillColor: C.green },
+                'A feature a product is made up of and can be offered with: interest, payments, an overdraft, a reward scheme.'),
+            shape('condition', 'Condition', TrapezoidTemplate, { width: 120, height: 55, fillColor: C.red },
+                'A fee, rate, limit or eligibility rule a product or an arrangement is subject to.'),
             shape('resource', 'Resource', BoxTemplate, { width: 110, height: 80, fillColor: C.blue },
                 'A physical or digital thing of value or use: product, asset, document, file, device. Businesses manage things.'),
             shape('event', 'Event', EllipseTemplate, { width: 120, height: 60, fillColor: C.green },
@@ -240,6 +248,8 @@ export const DIAGRAM_TYPES = {
                 'A point or interval in time: effective date, validity period, contract term, timestamp, posting date.'),
             shape('measure', 'Measure', RectangleTemplate, { width: 110, height: 40, fillColor: C.white },
                 'A quantity with its unit: weight, price, balance, temperature, risk score, count. The basis of metrics, KPIs and ledgers.'),
+            shape('direction', 'Business Direction', StarTemplate, { width: 100, height: 90, fillColor: C.yellow },
+                'Where the business means to go: goal, objective, strategy, plan, policy, and the targets that measure them. It shapes products, arrangements and rules.'),
             shape('rule', 'Rule', DiamondTemplate, { width: 100, height: 70, fillColor: C.red },
                 'A condition that governs arrangements, events or resources: business rule, policy, validation, regulatory requirement, eligibility.'),
             note,

package/src/charting/ModelCheckDialog.js

@@ -0,0 +1,63 @@
+import { el } from '../workspace/dom.js';
+import { FormDialog } from './FormDialog.js';
+
+/**
+ * ModelCheckDialog — a model check's findings (ModelChecker#run), listed:
+ * each a button (⚠ a warning, ℹ for a look) that shows what it names
+ * (`onReveal`), with what can be done about it beside (`actionsFor`), or
+ * "nothing found". Any editor or part that checks a model shows it this way.
+ */
+export class ModelCheckDialog {
+    /**
+     * @param {Object} options
+     * @param {Array<Object>} options.findings
+     * @param {(finding: Object) => void} [options.onReveal] - Show what a finding names
+     * @param {(finding: Object) => Array<{label: string, action: Function}>} [options.actionsFor]
+     * @param {Document} [options.document]
+     */
+    constructor({ findings, onReveal = () => {}, actionsFor = () => [], document: doc = globalThis.document }) {
+        this.findings = findings;
+        this.onReveal = onReveal;
+        this.actionsFor = actionsFor;
+        this.document = doc;
+    }
+
+    /** The dialog's title: how many findings. */
+    get title() {
+        const n = this.findings.length;
+        return `Model check: ${n} finding${n === 1 ? '' : 's'}`;
+    }
+
+    /** Open it; returns the FormDialog. */
+    open() {
+        let dialog = null;
+        const list = el({
+            style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '420px' },
+            children: this.findings.length ? this.findings.map(finding => ({
+                style: { display: 'flex', gap: '4px', alignItems: 'stretch' },
+                children: [
+                    {
+                        tag: 'button',
+                        attrs: { type: 'button', title: 'Show it', 'data-code': finding.code },
+                        style: { flex: '1', textAlign: 'left', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', background: finding.severity === 'warning' ? '#fff6e5' : '#f5f8fc', cursor: 'pointer' },
+                        text: `${finding.severity === 'warning' ? '⚠' : 'ℹ'} ${finding.message}`,
+                        on: { click: () => { dialog?.close(); this.onReveal(finding); } },
+                    },
+                    ...this.actionsFor(finding).map(act => ({
+                        tag: 'button', attrs: { type: 'button', 'data-action': act.label }, text: act.label,
+                        style: { padding: '4px 8px', cursor: 'pointer' },
+                        on: { click: () => { dialog?.close(); act.action(); } },
+                    })),
+                ],
+            })) : [{ text: 'Nothing found: the model passes every check.' }],
+        }, this.document);
+        dialog = new FormDialog({
+            title: this.title,
+            fields: [{ key: 'findings', label: '', type: 'custom', element: list, read: () => null }],
+            submitLabel: 'Close',
+            document: this.document,
+            onApply: () => {},
+        });
+        return dialog.open();
+    }
+}

package/src/charting/ModelChecker.js

@@ -0,0 +1,26 @@
+/**
+ * ModelChecker — checks over a model: what is wrong or worth a look in it.
+ * Each check is a method listed by `checks()`, run in that order, so a
+ * subclass adds, drops or reorders them; `run()` gives every finding. The
+ * base of ViewSetChecker (models of views) and DataModelChecker (data
+ * models). DOM-free and advisory: findings are shown, never enforced.
+ *
+ * Each finding: `{ code, severity: 'warning'|'info', message, kind, ids }`,
+ * `kind` saying what the ids name (a view, an entity, ...).
+ */
+export class ModelChecker {
+    /** @param {Object} model */
+    constructor(model) {
+        this.model = model;
+    }
+
+    /** The checks to run, in the order their findings are listed. None here. */
+    checks() {
+        return [];
+    }
+
+    /** Every finding. @returns {Array<Object>} */
+    run() {
+        return this.checks().flatMap(check => check.call(this));
+    }
+}

package/src/charting/ViewTabStrip.js

@@ -1,81 +1,94 @@
-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),
-        };
-    }
-}
+import { el } from '../workspace/dom.js';
+import { PopupMenu } from './PopupMenu.js';
+
+/**
+ * ViewTabStrip — a row (or column) of tabs, one per open view, as a browser
+ * has them: an optional × to close a tab (`onClose`; `canClose` says which may
+ * be), a + after them to add one (`onAdd`), 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) => boolean} [options.canClose] - Which tabs get the × (default all)
+     * @param {(event: Event) => void} [options.onAdd] - Shows a + after the tabs
+     * @param {(id: string) => Array} [options.menuItems] - PopupMenu items for a tab
+     * @param {Document} [options.document]
+     */
+    constructor({ orientation = 'horizontal', onSelect, onClose = null, canClose = () => true, onAdd = null, menuItems = () => [], document: doc = document }) {
+        this.orientation = orientation;
+        this.onSelect = onSelect;
+        this.onClose = onClose;
+        this.canClose = canClose;
+        this.onAdd = onAdd;
+        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.onAdd && {
+                    tag: 'button', text: '+',
+                    attrs: { type: 'button', 'aria-label': 'New view', title: 'New view', 'data-tab-add': '' },
+                    style: { border: '1px solid transparent', background: 'none', cursor: 'pointer', fontSize: '15px', lineHeight: '1', color: '#555', padding: '2px 8px' },
+                    on: { click: (e) => this.onAdd(e) },
+                },
+            ].filter(Boolean),
+        }, 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 && this.canClose(id) && {
+                    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),
+        };
+    }
+}