@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/diagrams/CanvasView.js

@@ -0,0 +1,112 @@
+import { ArchimateModel, ArchimateView } from './ArchimateModel.js';
+import { PlaceItemsCommand } from './PlaceItemsCommand.js';
+import { ViewObjectInstance } from './ViewObjectInstance.js';
+import { ArchiHint } from '../canvas/ArchiHint.js';
+import { CANVAS_BOX_KINDS } from '../canvas/canvasBoxKinds.js';
+import { Arrangement } from '../arrangement/index.js';
+
+/**
+ * CanvasView — a canvas, as Archi has them: a view of blocks, stickies and
+ * pictures (view-only boxes, no model elements) and plain lines between them,
+ * often with hints (guidance text) on the canvas and its blocks.
+ *
+ * A canvas may be a template (`template`): kept to copy from, shown in the
+ * model tree's Templates folder rather than with the canvases. Its JSON form
+ * (`toJSON`, `CanvasView.fromJSON`) is what a template library keeps.
+ */
+export class CanvasView extends ArchimateView {
+    static kind = 'canvas';
+
+    static LINE_TYPE = 'canvas-model-connection';
+
+    /** Archi's canvas palette: Block, Sticky, Image. */
+    static BOX_KINDS = CANVAS_BOX_KINDS;
+
+    /**
+     * @param {ArchimateModel} model
+     * @param {Object} spec - As ArchimateView, plus:
+     * @param {boolean} [spec.template] - Kept to copy from (a model template)
+     */
+    constructor(model, { template = false, ...spec } = {}) {
+        super(model, { archiViewType: 'canvas-model', elementIds: [], ...spec });
+        /** Whether this canvas is a template, kept to make canvases from. */
+        this.template = !!template;
+    }
+
+    /** The canvas's hint title (Archi's hintTitle), or ''. */
+    get hintTitle() {
+        return this.hint?.title ?? '';
+    }
+
+    /** The canvas's hint text (Archi's hintContent, HTML), or ''. */
+    get hintContent() {
+        return this.hint?.content ?? '';
+    }
+
+    /** The canvas's own hint (ArchiHint), or null. */
+    get hint() {
+        return ArchiHint.of(this.archi);
+    }
+
+    /** The hint for a box (its own, as a template's blocks have), else the canvas's. */
+    hintFor(instanceId) {
+        return ArchiHint.of(this.getElementInstance(instanceId)?.archi) ?? this.hint;
+    }
+
+
+    /**
+     * Put a template's boxes and lines on this canvas, as its own locked
+     * background group (behind everything else, held still until unlocked):
+     * one undo step on the canvas.
+     * @param {CanvasView|Object} source - A template canvas, or CanvasView JSON (a library entry's view)
+     * @param {Object} [options]
+     * @param {{x: number, y: number}} [options.at] - Where its top left goes (default: where it was)
+     * @param {string} [options.name] - The group's name (default: the template's, "(template)")
+     * @returns {string|null} the group's id (null for an empty template)
+     */
+    placeTemplate(source, { at = null, name } = {}) {
+        const data = typeof source.toJSON === 'function' ? source.toJSON() : source;
+        const salt = `${this.id}-${Date.now().toString(36)}-${ArchimateView.placed++}`;
+        const { elementInstances, viewConnections } = CanvasView.copyItems(data, salt);
+        const boxes = [...elementInstances.values()];
+        if (!boxes.length) return null;
+        if (at) {
+            const left = Math.min(...boxes.map(b => b.x - (b.size?.width ?? b.content?.width ?? 0) / 2));
+            const top = Math.min(...boxes.map(b => b.y - (b.size?.height ?? b.content?.height ?? 0) / 2));
+            for (const b of boxes) { b.x += at.x - left; b.y += at.y - top; }
+            for (const line of viewConnections) line.waypoints = line.waypoints.map(wp => ({ x: wp.x + at.x - left, y: wp.y + at.y - top }));
+        }
+        const cmd = new PlaceItemsCommand(this, { elementInstances: boxes, viewConnections }, {
+            background: { name: name ?? `${data.name ?? 'Template'} (template)` },
+        });
+        this.history.execute(cmd);
+        return cmd.groupId;
+    }
+
+    /**
+     * A canvas from its JSON form (toJSON), in `model`, with new ids for the
+     * view, its boxes and lines (lines, groups and locks follow the boxes).
+     * Archi's own ids stay with the source.
+     * @param {ArchimateModel} model
+     * @param {Object} data
+     * @param {{id: string, name?: string, template?: boolean}} options
+     * @returns {CanvasView}
+     */
+    static fromJSON(model, data, { id, name = data.name, template = false }) {
+        const { elementInstances, viewConnections, mapId } = CanvasView.copyItems(data, id);
+        return new CanvasView(model, {
+            id, name, template,
+            documentation: data.documentation,
+            properties: data.properties ?? [],
+            archi: data.archi ?? null,
+            elementInstances,
+            relationshipInstances: new Map(),
+            viewConnections,
+            arrangement: Arrangement.fromJSON(data.arrangement).copy(mapId),
+        });
+    }
+}
+
+/** Placements so far: part of each placed line's new id. @private */
+
+ArchimateModel.registerViewType('canvas-model', CanvasView);

package/src/charting/diagrams/ContextMenu.js

@@ -0,0 +1,37 @@
+import { PopupMenu } from '../PopupMenu.js';
+
+/**
+ * ContextMenu — graph-diagram right-click menus, shown through the shared
+ * PopupMenu. Keeps the graph engine's item format: `{ label, action(subject,
+ * engine, point) }` (label may be a function of the subject), `{ label, items }`
+ * for a submenu (items may be a function of the subject too; an empty submenu
+ * is left out), or `{ separator: true }`.
+ */
+export class ContextMenu {
+    constructor(container) {
+        this.container = container;
+    }
+
+    remove() {
+        PopupMenu.close();
+    }
+
+    /** Build and show a context menu at the given mouse event.
+     *  @param {MouseEvent} event
+     *  @param {Array} menuItems
+     *  @param {*} subject passed to every action
+     *  @param {Function} clientToSvgPoint `(clientX, clientY) => {x,y}`
+     *  @param {*} engine passed as the second argument to every action
+     */
+    show(event, menuItems, subject, clientToSvgPoint, engine) {
+        const point = clientToSvgPoint(event.clientX, event.clientY);
+        const toPopup = (item) => {
+            if (item.separator) return { separator: true };
+            const label = typeof item.label === 'function' ? item.label(subject) : item.label;
+            const items = typeof item.items === 'function' ? item.items(subject) : item.items;
+            if (items) return items.length ? { label, items: items.map(toPopup) } : null;
+            return { label, action: () => item.action(subject, engine, point) };
+        };
+        PopupMenu.show(event.clientX, event.clientY, menuItems.map(toPopup).filter(Boolean), this.container.ownerDocument);
+    }
+}

package/src/charting/diagrams/DataModelDiagram.js

@@ -0,0 +1,86 @@
+import { Diagram } from '../Diagram.js';
+import { DataModelNotation } from '../../datamodel.js';
+import { RelationshipAsEdgeStrategy, RelationshipAsNodeStrategy } from './DataModelRelationshipStrategy.js';
+
+/**
+ * DataModelDiagram — builds entity-relationship nodes/edges and renders them
+ * through the shared GraphDiagram engine.
+ */
+export class DataModelDiagram extends Diagram {
+    static diagramType = 'dataModel';
+
+    constructor(renderer, entities, relationships, options = {}, engine = null) {
+        super(renderer, { entities, relationships }, options);
+        this.engine = engine;
+    }
+
+    static _strategyFor(notation) {
+        return notation.relationshipAsNode
+            ? new RelationshipAsNodeStrategy()
+            : new RelationshipAsEdgeStrategy();
+    }
+
+    render() {
+        const { entities, relationships } = this.data;
+        const options = this.options;
+        const { level = 'logical', notation: notationName = 'crowsfoot', ...rest } = options;
+        const notation = DataModelNotation.notation(notationName);
+        const nodes = entities.map(entity => DataModelDiagram.buildNode(entity, { level, notation }));
+        const strategy = DataModelDiagram._strategyFor(notation);
+        const { nodes: relNodes, edges } = strategy.apply(relationships, {
+            buildEdge: DataModelDiagram.buildEdge,
+            notation,
+        });
+        nodes.push(...relNodes);
+        this.engine.graphDiagram(nodes, edges, { edgeColor: '#666666', ...rest });
+    }
+
+    static typeGroup(type) {
+        if (!type) return 'UNKNOWN';
+        const t = String(type).toUpperCase();
+        if (/^(INT|INTEGER|BIGINT|SMALLINT|TINYINT|DECIMAL|NUMERIC|FLOAT|DOUBLE|REAL|NUMBER|SERIAL)/.test(t)) return 'NUMBER';
+        if (/^(VARCHAR|CHAR|TEXT|STRING|CLOB|UUID)/.test(t)) return 'TEXT';
+        if (/^(TIMESTAMP|DATE|DATETIME|TIME)/.test(t)) return 'TIMESTAMP';
+        if (/^(BOOL|BOOLEAN)/.test(t)) return 'BOOLEAN';
+        if (/^(JSON|JSONB)/.test(t)) return 'JSON';
+        return 'UNKNOWN';
+    }
+
+    static buildNode(entity, { level, notation }) {
+        const levelData = entity[level] || {};
+        const attributes = levelData.attributes;
+        if (notation.entityShape === 'table' && attributes?.length) {
+            return {
+                id: entity.id,
+                label: levelData.tableName || entity.name,
+                shape: 'table',
+                x: entity.x,
+                y: entity.y,
+                color: entity.color,
+                columns: attributes.map(a => ({ name: a.name, typeGroup: DataModelDiagram.typeGroup(a.type), isPK: !!a.isPK, isFK: !!a.isFK })),
+            };
+        }
+        return {
+            id: entity.id,
+            label: entity.name,
+            shape: entity.shape || 'rect',
+            x: entity.x,
+            y: entity.y,
+            color: entity.color,
+            description: entity.description,
+            labelPosition: entity.labelPosition || 'inside',
+        };
+    }
+
+    static buildEdge(relationship, notation) {
+        return {
+            ...relationship,
+            label: relationship.name,
+            lineStyle: relationship.identifying === false ? 'dashed' : 'solid',
+            arrowheadStart: notation.cardinalityArrowhead(relationship.sourceCardinality) || 'none',
+            arrowhead: notation.cardinalityArrowhead(relationship.targetCardinality) || 'none',
+            sourceLabel: notation.cardinalityLabel(relationship.sourceCardinality),
+            targetLabel: notation.cardinalityLabel(relationship.targetCardinality),
+        };
+    }
+}

package/src/charting/diagrams/DataModelRelationshipStrategy.js

@@ -0,0 +1,38 @@
+/**
+ * Strategy interface for turning data-model relationships into diagram nodes
+ * and edges. Crow's Foot and UML keep relationships as direct edges; Chen
+ * turns each relationship into a diamond node plus two connecting edges.
+ */
+export class DataModelRelationshipStrategy {
+    /**
+     * @param {Array<object>} relationships
+     * @param {object} context
+     * @param {Function} context.buildEdge
+     * @returns {{nodes: Array<object>, edges: Array<object>}}
+     */
+    apply(relationships, context) {
+        throw new Error(`${this.constructor.name} must implement apply()`);
+    }
+}
+
+export class RelationshipAsEdgeStrategy extends DataModelRelationshipStrategy {
+    apply(relationships, { buildEdge, notation }) {
+        const edges = relationships.map(r => buildEdge(r, notation));
+        return { nodes: [], edges };
+    }
+}
+
+export class RelationshipAsNodeStrategy extends DataModelRelationshipStrategy {
+    apply(relationships, { notation }) {
+        const nodes = [];
+        const edges = [];
+        relationships.forEach((relationship, i) => {
+            const relId = relationship.id || `${relationship.source}__${relationship.target}__rel${i}`;
+            const lineStyle = relationship.identifying === false ? 'dashed' : 'solid';
+            nodes.push({ id: relId, label: relationship.name || '', shape: 'diamond', color: relationship.color || '#f6c344' });
+            edges.push({ source: relationship.source, target: relId, label: notation.cardinalityLabel(relationship.sourceCardinality), lineStyle });
+            edges.push({ source: relId, target: relationship.target, label: notation.cardinalityLabel(relationship.targetCardinality), lineStyle });
+        });
+        return { nodes, edges };
+    }
+}

package/src/charting/diagrams/DerivedRelationships.js

@@ -0,0 +1,102 @@
+/**
+ * DerivedRelationships — compute indirect relationships through composition/assignment chains.
+ *
+ * Pure function: given a model, find transitive relationships that chain through
+ * composition, aggregation, assignment, or realization kinds.
+ */
+export class DerivedRelationships {
+    /**
+     * Kinds that allow "chaining" — relationships that can form paths through intermediate elements.
+     */
+    static CHAINABLE_KINDS = new Set(['composition', 'aggregation', 'assignment', 'realization']);
+
+    /**
+     * Compute all derived (indirect) relationships in a model.
+     * Follows chains up to `maxHops` deep; includes direct relationships for comparison.
+     *
+     * @param {ArchimateModel} model - the model to analyze
+     * @param {object} options - { maxHops: 2, onlyNewRelationships: true }
+     * @returns {object} { direct: [], derived: [] } relationship arrays
+     */
+    static compute(model, options = {}) {
+        const { maxHops = 2, onlyNewRelationships = true } = options;
+
+        const allRels = model.relationships();
+        const direct = new Set();
+        const graph = new Map(); // element -> { outgoing: [rel], incoming: [rel] }
+
+        // Build adjacency graph and collect direct relationships
+        for (const rel of allRels) {
+            direct.add(DerivedRelationships._relKey(rel));
+
+            if (!graph.has(rel.source)) graph.set(rel.source, { outgoing: [], incoming: [] });
+            if (!graph.has(rel.target)) graph.set(rel.target, { outgoing: [], incoming: [] });
+
+            graph.get(rel.source).outgoing.push(rel);
+            graph.get(rel.target).incoming.push(rel);
+        }
+
+        // Find derived relationships via BFS
+        const derived = [];
+        const seen = new Set();
+
+        for (const startRel of allRels) {
+            if (!DerivedRelationships.CHAINABLE_KINDS.has(startRel.kind)) continue;
+
+            // BFS from target through chainable relationships
+            const queue = [{ element: startRel.target, path: [startRel], hops: 1 }];
+
+            while (queue.length > 0) {
+                const { element, path, hops } = queue.shift();
+
+                if (hops > maxHops) continue;
+
+                const node = graph.get(element);
+                if (!node) continue;
+
+                // Look for outgoing chainable relationships
+                for (const nextRel of node.outgoing) {
+                    if (!DerivedRelationships.CHAINABLE_KINDS.has(nextRel.kind)) continue;
+
+                    const endElement = nextRel.target;
+                    const fullPath = [...path, nextRel];
+                    const key = DerivedRelationships._relKey({
+                        source: startRel.source,
+                        target: endElement,
+                    });
+
+                    // Skip if we already have a direct relationship for this pair
+                    if (onlyNewRelationships && direct.has(key)) continue;
+                    if (seen.has(key)) continue;
+
+                    seen.add(key);
+                    derived.push({
+                        source: startRel.source,
+                        target: endElement,
+                        kind: 'derived',
+                        path: fullPath.map(r => r.id),
+                        pathSummary: fullPath.map(r => r.kind).join('→'),
+                        distance: hops + 1,
+                        id: `derived_${startRel.source}_${endElement}`,
+                    });
+
+                    queue.push({
+                        element: endElement,
+                        path: fullPath,
+                        hops: hops + 1,
+                    });
+                }
+            }
+        }
+
+        return { direct: allRels, derived };
+    }
+
+    /**
+     * Serialize a relationship as "source→target" for deduplication.
+     * @private
+     */
+    static _relKey(rel) {
+        return `${rel.source}→${rel.target}`;
+    }
+}

package/src/charting/diagrams/EbnfDiagram.js

@@ -0,0 +1,39 @@
+import { Diagram } from '../Diagram.js';
+import { ebnfAstToDiagram } from '../../ebnfDiagram.js';
+import { parseEbnf } from '../../ebnfParser.js';
+
+/**
+ * EbnfDiagram — renders an EBNF grammar rule as a railroad (syntax) diagram.
+ */
+export class EbnfDiagram extends Diagram {
+    static diagramType = 'ebnf';
+
+    _render() {
+        const rule = this.data;
+        const options = this.options;
+        const isText = typeof rule === 'string';
+        const { ast } = isText ? parseEbnf(rule) : { ast: rule };
+
+        this.renderer.renderDiagram(ebnfAstToDiagram(ast));
+
+        if (isText) this._drawCaption(rule, options);
+    }
+
+    /**
+     * Draws the verbatim EBNF source text in a caption band under an
+     * already-rendered railroad diagram.
+     * @private
+     */
+    _drawCaption(text, options) {
+        if (!this.renderer?.svg) return;
+        const svg = this.renderer.svg;
+        const viewBox = (svg.getAttribute('viewBox') || '0 0 0 0').split(/\s+/).map(Number);
+        const [vx, vy, vw, vh] = viewBox;
+        const capHeight = 32;
+        svg.setAttribute('viewBox', `${vx} ${vy} ${vw} ${vh + capHeight}`);
+        this.renderer.rect(vx, vy + vh, vw, capHeight, options.captionBackground || '#fdf6e3', null, {});
+        this.renderer.text(text, vx + 10, vy + vh + capHeight / 2, {
+            textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fontFamily: 'monospace', fill: '#333',
+        });
+    }
+}