@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/modelTree/TreeBuilder.js

@@ -0,0 +1,238 @@
+/**
+ * Generic tree component builder for hierarchical node rendering.
+ * Handles expand/collapse, selection, context menus, and recursive rendering.
+ * Domain code provides node data and callbacks; TreeBuilder handles UI.
+ */
+export class TreeBuilder {
+    /**
+     * Create a tree builder instance.
+     * @param {Document} doc - Document object for creating elements
+     * @param {Object} options - Configuration options
+     * @param {HTMLElement} options.container - Element the tree renders into (an element, not an id,
+     *   so several trees can share a page)
+     * @param {Array} options.rootNodes - Root-level nodes to render
+     * @param {Function} options.onNodeClick - Callback when node is clicked: (nodeId) => void
+     * @param {Function} options.onNodeContext - Callback for context menu: (event, node) => void
+     * @param {Function} options.getNodeChildren - Get children of a node: (node) => Array or null
+     * @param {(node) => (Node|null)} [options.iconFor] - A picture for a node (an element's type glyph);
+     *   null: its `icon` text
+     * @param {Map<string, boolean>} [options.openState] - Which folders are open, by node id: kept
+     *   by the caller so a rebuilt tree opens them as they were. A folder not in it is open unless
+     *   its node says `collapsed: true`; opening or closing one records it here.
+     */
+    constructor(doc, { container, rootNodes = [], onNodeClick = null, onNodeContext = null, getNodeChildren = null, openState = new Map(), iconFor = null } = {}) {
+        this.doc = doc;
+        this.container = container;
+        this.rootNodes = rootNodes;
+        this.onNodeClick = onNodeClick;
+        this.onNodeContext = onNodeContext;
+        this.getNodeChildren = getNodeChildren;
+        this.openState = openState;
+        this.iconFor = iconFor;
+        this.selectedNode = null;
+    }
+
+    /**
+     * Render the tree into the container.
+     * @param {Array} nodes - Nodes to render (defaults to rootNodes)
+     */
+    render(nodes = this.rootNodes) {
+        const container = this.container;
+        if (!container) return;
+
+        container.innerHTML = '';
+        for (const node of nodes) {
+            container.appendChild(this._renderNode(node));
+        }
+    }
+
+    /**
+     * Render a single node with optional expand/collapse.
+     * @private
+     */
+    _renderNode(node) {
+        const children = this.getNodeChildren?.(node) || [];
+        const hasChildren = children.length > 0;
+
+        if (hasChildren) {
+            return this._renderExpandable(node, children);
+        } else {
+            return this._renderLeaf(node);
+        }
+    }
+
+    /**
+     * Render a node with children as expandable <details> element.
+     * @private
+     */
+    _renderExpandable(node, children) {
+        const details = this.doc.createElement('details');
+        details.open = this.openState.get(node.id) ?? !node.collapsed;
+        details.setAttribute('data-node-id', node.id);
+        details.addEventListener('toggle', () => this.openState.set(node.id, details.open));
+
+        const summary = this.doc.createElement('summary');
+        summary.style.cssText = `
+            cursor: pointer;
+            padding: 4px 6px;
+            margin: 2px 0;
+            border-radius: 3px;
+            user-select: none;
+            border-left: 3px solid transparent;
+            transition: background-color 0.1s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        `;
+        summary.setAttribute('data-node-id', node.id);
+
+        this._applyNodeStyling(summary, node);
+        summary.addEventListener('click', (e) => this._handleNodeClick(e, summary, node));
+        summary.addEventListener('contextmenu', (e) => this._handleNodeContext(e, node));
+        summary.addEventListener('mouseenter', () => this._onNodeHover(summary, true));
+        summary.addEventListener('mouseleave', () => this._onNodeHover(summary, false));
+
+        details.appendChild(summary);
+
+        const childContainer = this.doc.createElement('div');
+        childContainer.style.cssText = 'padding-left: 16px;';
+        for (const child of children) {
+            childContainer.appendChild(this._renderNode(child));
+        }
+        details.appendChild(childContainer);
+
+        return details;
+    }
+
+    /**
+     * Render a leaf node without children.
+     * @private
+     */
+    _renderLeaf(node) {
+        const leaf = this.doc.createElement('div');
+        leaf.setAttribute('data-node-id', node.id);
+        // Element leaves are filter targets and drag sources; mark them here so a rebuilt tree keeps that.
+        if (node.type === 'element' && node._element) {
+            leaf.setAttribute('data-element-id', node._element.id);
+            leaf.draggable = true;
+        }
+        leaf.style.cssText = `
+            padding: 4px 6px;
+            margin: 2px 0;
+            border-radius: 3px;
+            cursor: pointer;
+            user-select: none;
+            border-left: 3px solid transparent;
+            transition: background-color 0.1s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        `;
+
+        this._applyNodeStyling(leaf, node);
+        leaf.addEventListener('click', (e) => this._handleNodeClick(e, leaf, node));
+        leaf.addEventListener('contextmenu', (e) => this._handleNodeContext(e, node));
+        leaf.addEventListener('mouseenter', () => this._onNodeHover(leaf, true));
+        leaf.addEventListener('mouseleave', () => this._onNodeHover(leaf, false));
+
+        return leaf;
+    }
+
+    /**
+     * Apply icon and label to a node element.
+     * @private
+     */
+    _applyNodeStyling(element, node) {
+        // Icon: a picture when iconFor gives one, else the node's icon text.
+        const picture = this.iconFor?.(node) ?? null;
+        if (picture) {
+            const icon = this.doc.createElement('span');
+            icon.style.cssText = 'flex-shrink: 0; display: inline-flex; align-items: center;';
+            icon.appendChild(picture);
+            element.appendChild(icon);
+        } else if (node.icon) {
+            const icon = this.doc.createElement('span');
+            icon.textContent = node.icon;
+            icon.style.cssText = 'flex-shrink: 0; font-size: 14px;';
+            element.appendChild(icon);
+        }
+
+        // Label
+        const label = this.doc.createElement('span');
+        label.textContent = node.label || 'Untitled';
+        element.appendChild(label);
+    }
+
+    /**
+     * Handle node click (selection).
+     * @private
+     */
+    _handleNodeClick(event, element, node) {
+        event.stopPropagation();
+
+        // Deselect previous
+        if (this.selectedNode) {
+            this.selectedNode.style.background = '';
+            this.selectedNode.style.borderLeftColor = 'transparent';
+        }
+
+        // Select new
+        element.style.background = 'var(--accent, #91cc75)';
+        element.style.borderLeftColor = 'var(--accent-dark, #5ba344)';
+        element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        this.selectedNode = element;
+
+        // Invoke callback
+        this.onNodeClick?.(node.id, node);
+    }
+
+    /**
+     * Handle node context menu.
+     * @private
+     */
+    _handleNodeContext(event, node) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onNodeContext?.(event, node);
+    }
+
+    /**
+     * Handle node hover styling.
+     * @private
+     */
+    _onNodeHover(element, isEntering) {
+        if (isEntering && element.style.background === '') {
+            element.style.background = '#f0f0f0';
+        } else if (!isEntering && element.style.background === 'rgb(240, 240, 240)') {
+            element.style.background = '';
+        }
+    }
+
+    /**
+     * Select a node by ID programmatically.
+     */
+    selectNode(nodeId) {
+        const element = this.doc.querySelector(`[data-node-id="${nodeId}"]`);
+        if (element) {
+            if (this.selectedNode) {
+                this.selectedNode.style.background = '';
+                this.selectedNode.style.borderLeftColor = 'transparent';
+            }
+            element.style.background = 'var(--accent, #91cc75)';
+            element.style.borderLeftColor = 'var(--accent-dark, #5ba344)';
+            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            this.selectedNode = element;
+        }
+    }
+
+    /**
+     * Clear selection.
+     */
+    clearSelection() {
+        if (this.selectedNode) {
+            this.selectedNode.style.background = '';
+            this.selectedNode.style.borderLeftColor = 'transparent';
+            this.selectedNode = null;
+        }
+    }
+}

package/src/charting/modelTree/TreeModeRegistry.js

@@ -0,0 +1,51 @@
+import { TreeViewMode } from './TreeViewMode.js';
+
+/**
+ * Registry for tree view modes, mirrors DiagramRegistry/ChartRegistry pattern.
+ */
+export class TreeModeRegistry {
+    constructor(entries = []) {
+        this._entries = [];
+        this._index = new Map();
+        for (const entry of entries) this.register(entry);
+    }
+
+    get size() { return this._entries.length; }
+
+    register(entry) {
+        if (!entry || typeof entry.key !== 'string') {
+            throw new TypeError('TreeModeRegistry entry must have a string key');
+        }
+        if (!entry.TreeModeClass || !(entry.TreeModeClass.prototype instanceof TreeViewMode)) {
+            throw new TypeError(
+                `${entry.TreeModeClass?.name ?? entry.TreeModeClass} must extend TreeViewMode`
+            );
+        }
+        if (entry.TreeModeClass.key !== entry.key) {
+            throw new TypeError(
+                `TreeModeClass.key (${entry.TreeModeClass.key}) must match entry.key (${entry.key})`
+            );
+        }
+
+        if (this._index.has(entry.key)) {
+            const i = this._entries.findIndex(e => e.key === entry.key);
+            this._entries[i] = entry;
+        } else {
+            this._entries.push(entry);
+        }
+        this._index.set(entry.key, entry);
+        return this;
+    }
+
+    unregister(key) {
+        const i = this._entries.findIndex(e => e.key === key);
+        if (i !== -1) this._entries.splice(i, 1);
+        return this._index.delete(key);
+    }
+
+    get(key) { return this._index.get(key); }
+    list() { return this._entries.slice(); }
+    keys() { return this._entries.map(e => e.key); }
+    classes() { return this._entries.map(e => e.TreeModeClass); }
+    has(key) { return this._index.has(key); }
+}

package/src/charting/modelTree/TreeViewMode.js

@@ -0,0 +1,110 @@
+/**
+ * Abstract base class for tree grouping/presentation modes.
+ * Subclasses implement buildGroups() to organize model elements into groups.
+ */
+
+export class TreeViewMode {
+    static key = null;          // registry key; subclasses override
+    static label = '';          // human-readable label; subclasses override
+
+    constructor() {
+        if (new.target === TreeViewMode) {
+            throw new TypeError('TreeViewMode is abstract — subclass it');
+        }
+        if (!this.constructor.key) {
+            throw new TypeError(`${this.constructor.name} must define static key`);
+        }
+    }
+
+    /**
+     * Build groups from model elements.
+     * @param {ArchimateModel} model
+     * @param {Object} opts
+     * @param {string} opts.filterText - text to filter by (case-insensitive name/type/layer)
+     * @param {Set<string>} opts.typeIds - filter by element type (e.g. Set(['type:business-actor']))
+     * @param {Set<string>} opts.specializationIds - filter by specialization (e.g. Set(['spec:Microservice']))
+     * @param {Set<string>} opts.propertyIds - filter by property values (e.g. Set(['propval:Owner=Alice']))
+     * @returns {Array<{label, items: Array<{id, kind, label, type}>}>}
+     */
+    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
+        throw new Error(`${this.constructor.name} must implement buildGroups()`);
+    }
+
+    /**
+     * Check if an item matches all active filters (text + type + specialization + properties).
+     * Subclasses can override for custom filtering logic.
+     * @protected
+     */
+    _matchesFilter(item, { text = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
+        // Text filter (label or type)
+        if (text) {
+            const textLower = text.toLowerCase();
+            const label = (item.label ?? '').toLowerCase();
+            const type = (item.type ?? '').toLowerCase();
+            if (!label.includes(textLower) && !type.includes(textLower)) {
+                return false;
+            }
+        }
+
+        // Type filter (elements only; 'type:business-actor' format)
+        if (typeIds && typeIds.size > 0 && item.kind === 'element') {
+            const typeId = `type:${item.type}`;
+            if (!typeIds.has(typeId)) {
+                return false;
+            }
+        }
+
+        // Specialization filter (elements only; 'spec:Microservice' format)
+        if (specializationIds && specializationIds.size > 0 && item.kind === 'element') {
+            if (!item.specialization) {
+                // Elements without specialization don't match specialization filters
+                return false;
+            }
+            const specId = `spec:${item.specialization}`;
+            if (!specializationIds.has(specId)) {
+                return false;
+            }
+        }
+
+        // Property filter ('propval:PropertyName=Value' format; both elements and relationships)
+        if (propertyIds && propertyIds.size > 0) {
+            if (!Array.isArray(item.properties)) {
+                // No properties defined — doesn't match property filter
+                return false;
+            }
+            // Check if any property matches the filter
+            const matches = item.properties.some(prop => {
+                const propId = `propval:${prop.name}=${prop.value}`;
+                return propertyIds.has(propId);
+            });
+            if (!matches) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    /** Group items into {label, items} structure. @protected */
+    _group(items, keyFn, labelFn) {
+        const groups = new Map();
+        for (const item of items) {
+            const key = keyFn(item);
+            if (!groups.has(key)) {
+                groups.set(key, { label: labelFn(key), items: [] });
+            }
+            groups.get(key).items.push(item);
+        }
+        return Array.from(groups.values());
+    }
+
+    /** Get elements from model (handles both ArchimateModel.elements() and ArchimateView.elements). @protected */
+    _getElements(model) {
+        return typeof model.elements === 'function' ? model.elements() : model.elements;
+    }
+
+    /** Get relationships from model (handles both ArchimateModel.relationships() and ArchimateView.relationships). @protected */
+    _getRelationships(model) {
+        return typeof model.relationships === 'function' ? model.relationships() : model.relationships;
+    }
+}

package/src/charting/modelTree/buildFilterTrees.js

@@ -0,0 +1,138 @@
+/**
+ * buildFilterTrees — pure functions to construct checkbox-tree node structures from a model.
+ *
+ * No DOM, no side effects. Returns plain { id, label, children? } tree nodes ready to pass
+ * to CheckboxTreeSelector.
+ */
+
+import { ArchimateDiagram } from '../diagrams/ArchimateDiagram.js';
+
+/**
+ * Build a hierarchical tree: Layer → Type → Specialization
+ * Only includes specializations that actually exist in the model for that type.
+ *
+ * @param {ArchimateModel} model
+ * @param {string} archimateVersion - '3.2' or '4' (default '4')
+ * @returns {Array<{id, label, children}>}
+ */
+export function buildTypeCategoryTree(model, { archimateVersion = '4' } = {}) {
+    const elements = model.elements();
+
+    // Collect layers present in model
+    const layerMap = new Map(); // layer name -> { layer, types: Map<typeName, {type, specs: Set}> }
+
+    for (const element of elements) {
+        // The layer the diagram draws it in (an IT type's too; v4 Common Domain types have none)
+        const layerName = ArchimateDiagram.elementLayer(element, archimateVersion);
+
+        if (!layerMap.has(layerName)) {
+            layerMap.set(layerName, { layer: layerName, types: new Map() });
+        }
+
+        const entry = layerMap.get(layerName);
+        if (!entry.types.has(element.type)) {
+            entry.types.set(element.type, { type: element.type, specs: new Set() });
+        }
+
+        // Collect specializations for this type in this layer
+        if (element.specialization) {
+            entry.types.get(element.type).specs.add(element.specialization);
+        }
+    }
+
+    // Build tree: layers sorted by name, types by name, specs by name
+    const tree = [];
+    for (const [layerName, layerEntry] of new Map([...layerMap].sort())) {
+        const typeChildren = [];
+
+        for (const [typeName, typeEntry] of new Map([...layerEntry.types].sort())) {
+            const specChildren = [];
+
+            for (const spec of new Set([...typeEntry.specs].sort())) {
+                specChildren.push({
+                    id: `spec:${spec}`,
+                    label: spec,
+                });
+            }
+
+            typeChildren.push({
+                id: `type:${typeName}`,
+                label: typeName,
+                children: specChildren.length > 0 ? specChildren : undefined,
+            });
+        }
+
+        tree.push({
+            id: `layer:${layerName}`,
+            label: layerName,
+            children: typeChildren.length > 0 ? typeChildren : undefined,
+        });
+    }
+
+    return tree;
+}
+
+/**
+ * Build a tree: Property Name → Property Value
+ * Scans all custom properties on elements and relationships in the model.
+ * Only includes property values that actually exist.
+ *
+ * @param {ArchimateModel} model
+ * @returns {Array<{id, label, children}>}
+ */
+export function buildPropertyTree(model) {
+    const elements = model.elements();
+    const relationships = model.relationships();
+
+    // Collect property names and their values
+    const propMap = new Map(); // propName -> Set<value>
+
+    for (const element of elements) {
+        if (Array.isArray(element.properties)) {
+            for (const prop of element.properties) {
+                const propName = String(prop.name);
+                const propValue = String(prop.value);
+
+                if (!propMap.has(propName)) {
+                    propMap.set(propName, new Set());
+                }
+                propMap.get(propName).add(propValue);
+            }
+        }
+    }
+
+    for (const rel of relationships) {
+        if (Array.isArray(rel.properties)) {
+            for (const prop of rel.properties) {
+                const propName = String(prop.name);
+                const propValue = String(prop.value);
+
+                if (!propMap.has(propName)) {
+                    propMap.set(propName, new Set());
+                }
+                propMap.get(propName).add(propValue);
+            }
+        }
+    }
+
+    // Build tree: property names sorted, values sorted per name
+    const tree = [];
+    for (const [propName, values] of new Map([...propMap].sort())) {
+        const valueChildren = [];
+
+        for (const value of new Set([...values].sort())) {
+            valueChildren.push({
+                id: `propval:${propName}=${value}`,
+                label: value,
+            });
+        }
+
+        tree.push({
+            id: `prop:${propName}`,
+            label: propName,
+            children: valueChildren.length > 0 ? valueChildren : undefined,
+        });
+    }
+
+    return tree;
+}

package/src/charting/modelTree/modes/FlatTreeMode.js

@@ -0,0 +1,46 @@
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: flat alphabetical list of all elements and relationships.
+ */
+export class FlatTreeMode extends TreeViewMode {
+    static key = 'flat';
+    static label = 'Flat';
+
+    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => ({
+            id: el.id,
+            kind: 'element',
+            label: el.name || '(unnamed)',
+            type: el.type,
+            icon: el.icon,
+            specialization: el.specialization,
+            properties: el.properties,
+        }));
+
+        // Build relationship items
+        const relationshipItems = this._getRelationships(model).map(rel => ({
+            id: rel.id,
+            kind: 'relationship',
+            label: rel.label || `${rel.source} → ${rel.target}`,
+            type: rel.kind,
+            properties: rel.properties,
+        }));
+
+        // Combine and filter with all criteria
+        const allItems = [...elementItems, ...relationshipItems];
+        const filtered = allItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
+
+        // Sort alphabetically
+        filtered.sort((a, b) => a.label.localeCompare(b.label));
+
+        // Single group containing all
+        if (filtered.length === 0) return [];
+
+        return [{
+            label: '',
+            items: filtered,
+        }];
+    }
+}

package/src/charting/modelTree/modes/LayerGroupedTreeMode.js

@@ -0,0 +1,62 @@
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: groups elements by ArchiMate layer, then relationships.
+ * Replicates the demo's current behavior.
+ */
+export class LayerGroupedTreeMode extends TreeViewMode {
+    static key = 'byLayer';
+    static label = 'By Layer';
+
+    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => ({
+            id: el.id,
+            kind: 'element',
+            label: el.name || '(unnamed)',
+            type: el.type,
+            layer: el.layer,
+            icon: el.icon,
+            specialization: el.specialization,
+            properties: el.properties,
+        }));
+
+        // Filter elements with all criteria
+        const filtered = elementItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
+
+        // Group by layer
+        const layerGroups = this._group(
+            filtered,
+            item => item.layer || 'Other',
+            layer => layer
+        );
+
+        // Sort layers in a sensible order (layers are lowercase-kebab)
+        const layerOrder = ['strategy', 'business', 'application', 'technology', 'physical', 'implementation', 'motivation', 'Other'];
+        layerGroups.sort((a, b) => {
+            const aIdx = layerOrder.indexOf(a.label);
+            const bIdx = layerOrder.indexOf(b.label);
+            return (aIdx === -1 ? 999 : aIdx) - (bIdx === -1 ? 999 : bIdx);
+        });
+
+        // Add relationships group
+        const relationshipItems = this._getRelationships(model).map(rel => ({
+            id: rel.id,
+            kind: 'relationship',
+            label: rel.label || `${rel.source} → ${rel.target}`,
+            type: rel.kind,
+            properties: rel.properties,
+        }));
+
+        const filtered_rels = relationshipItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
+
+        if (filtered_rels.length > 0) {
+            layerGroups.push({
+                label: 'Relationships',
+                items: filtered_rels,
+            });
+        }
+
+        return layerGroups;
+    }
+}