@peter.prib/renderengine 0.2.5 → 0.2.6

package/src/charting/DiagramEditor.js

@@ -3244,8 +3244,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 +3257,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 +3267,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 +3290,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,7 +218,7 @@ 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.'),
@@ -226,6 +226,8 @@ export const DIAGRAM_TYPES = {
                 '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('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('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 +242,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,