@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/InteractionManager.js

@@ -594,6 +594,10 @@ export class InteractionManager {
 
         const onMouseMove = (event) => {
             const hitShape = engine.hitTest(event.clientX, event.clientY);
+            if (engine.renderer?.type === 'canvas' && engine.renderer.canvas) {
+                const hasClick = hitShape && (hitShape.legendItem || typeof engine._activeChart?.options?.onDatumClick === 'function');
+                engine.renderer.canvas.style.cursor = (hitShape?.tooltip || hasClick) ? 'pointer' : 'default';
+            }
             if (hitShape && hitShape.tooltip) {
                 tooltip.show(hitShape.tooltip, event.clientX, event.clientY);
             } else {

package/src/charting/ModelFileFormat.js

@@ -84,7 +84,7 @@ export class ModelFileFormat {
  * @returns {Array<Object>} menu items (with separators between formats)
  */
 export function modelFileMenuItems(formats, {
-    model, onImport, enabled = () => true, document: doc = () => globalThis.document,
+    model, onImport, onMerge = null, enabled = () => true, document: doc = () => globalThis.document,
     download = null, chooseFile = null, report = null, only = null,
 } = {}) {
     const save = download ?? (({ data, mimeType }, fileName) => downloadBlob(new (doc().defaultView ?? globalThis).Blob([data], { type: mimeType }), fileName));
@@ -96,6 +96,10 @@ export function modelFileMenuItems(formats, {
             label: only ? `${format.label}…` : `Import ${format.label}…`,
             action: () => importFile(format, { choose, onImport, report: tell }),
         },
+        only !== 'export' && format.imports && onMerge && enabled(format, 'merge') && {
+            label: only ? `${format.label} (merge)…` : `Merge ${format.label}…`,
+            action: () => importFile(format, { choose, onImport: onMerge, report: tell }),
+        },
     ].filter(Boolean)).filter(group => group.length);
     if (only) return groups.flat();
     return groups.flatMap((group, i) => (i ? [{ separator: true }, ...group] : group));

package/src/charting/SettingsManager.js

@@ -53,6 +53,7 @@ export const TREE_SETTINGS_PROPERTIES = Object.freeze([
 export const TOOL_SETTINGS_DEFAULTS = Object.freeze({
     theme: 'light',
     defaultZoom: 1,
+    elementColors: {},
     ...Object.fromEntries(TREE_SETTINGS_PROPERTIES.map(p => [p.key, p.default])),
 });
 
@@ -159,6 +160,39 @@ export class SettingsManager {
         this._notifyListeners({ type: 'view', viewId: view.id, settings: view._settings });
     }
 
+    /**
+     * Get configured element color for an element type, resolving model -> tool -> null.
+     */
+    getElementColor(typeName, modelId = null) {
+        if (modelId) {
+            const modelColors = this.getModelOverrides(modelId).elementColors;
+            if (modelColors?.[typeName]) return modelColors[typeName];
+        }
+        return this.getToolSettings().elementColors?.[typeName] ?? null;
+    }
+
+    /**
+     * Set type-level color override at tool level (default) or model level.
+     */
+    setElementColor(typeName, color, { modelId = null } = {}) {
+        if (modelId) {
+            const existing = this.getModelOverrides(modelId).elementColors ?? {};
+            this.saveModelSettings(modelId, { elementColors: { ...existing, [typeName]: color } });
+        } else {
+            const existing = this.getToolSettings().elementColors ?? {};
+            this.saveToolSettings({ elementColors: { ...existing, [typeName]: color } });
+        }
+    }
+
+    /**
+     * Merged element color overrides for a model (model overrides tool).
+     */
+    elementColors(modelId = null) {
+        const toolColors = this.getToolSettings().elementColors ?? {};
+        const modelColors = modelId ? (this.getModelOverrides(modelId).elementColors ?? {}) : {};
+        return { ...toolColors, ...modelColors };
+    }
+
     // ── Resolve Settings (hierarchy: tool ← model ← view) ──
 
     /** The cascade for one view: its own settings, then the model's, then the tool's, then defaults. */
@@ -185,6 +219,7 @@ export class SettingsManager {
             titlePosition: viewSettings.titlePosition,
             background: viewSettings.background,
             backgroundImage: viewSettings.backgroundImage,
+            elementColors: this.elementColors(modelId),
         };
     }
 }

package/src/charting/ShapePaths.js

@@ -3,7 +3,7 @@
  */
 export class ShapePaths {
     /**
-     * Build an SVG path for an annular pie/doughnut slice.
+     * Build an SVG path for an annular pie/doughnut slice (circular).
      * @param {number} cx center x
      * @param {number} cy center y
      * @param {number} rOuter outer radius
@@ -13,15 +13,87 @@ export class ShapePaths {
      * @returns {string}
      */
     static donutSlicePath(cx, cy, rOuter, rInner, startAngle, endAngle) {
-        const largeArc = (endAngle - startAngle) > Math.PI ? 1 : 0;
-        const outerStart = { x: cx + rOuter * Math.cos(startAngle), y: cy + rOuter * Math.sin(startAngle) };
-        const outerEnd   = { x: cx + rOuter * Math.cos(endAngle),   y: cy + rOuter * Math.sin(endAngle) };
-        if (rInner <= 0) {
-            return `M${cx},${cy} L${outerStart.x},${outerStart.y} A${rOuter},${rOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} Z`;
+        return ShapePaths.ellipticalSlicePath(cx, cy, rOuter, rOuter, rInner, rInner, startAngle, endAngle);
+    }
+
+    /**
+     * Build an SVG path for a circular or tilted-elliptical pie/doughnut slice.
+     * Handles full-circle (`2π`) spans cleanly by clamping slightly below `2π` so SVG arc
+     * start and end points do not coincide.
+     * @param {number} cx
+     * @param {number} cy
+     * @param {number} rxOuter
+     * @param {number} ryOuter
+     * @param {number} rxInner
+     * @param {number} ryInner
+     * @param {number} startAngle
+     * @param {number} endAngle
+     * @returns {string}
+     */
+    static ellipticalSlicePath(cx, cy, rxOuter, ryOuter, rxInner, ryInner, startAngle, endAngle) {
+        const span = endAngle - startAngle;
+        const effectiveEnd = span >= Math.PI * 2 - 1e-5 ? startAngle + Math.PI * 2 - 1e-4 : endAngle;
+        const largeArc = (effectiveEnd - startAngle) > Math.PI ? 1 : 0;
+        const outerStart = { x: cx + rxOuter * Math.cos(startAngle),   y: cy + ryOuter * Math.sin(startAngle) };
+        const outerEnd   = { x: cx + rxOuter * Math.cos(effectiveEnd), y: cy + ryOuter * Math.sin(effectiveEnd) };
+        if (rxInner <= 0 || ryInner <= 0) {
+            return `M${cx},${cy} L${outerStart.x},${outerStart.y} A${rxOuter},${ryOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} Z`;
+        }
+        const innerStart = { x: cx + rxInner * Math.cos(effectiveEnd), y: cy + ryInner * Math.sin(effectiveEnd) };
+        const innerEnd   = { x: cx + rxInner * Math.cos(startAngle),   y: cy + ryInner * Math.sin(startAngle) };
+        return `M${outerStart.x},${outerStart.y} A${rxOuter},${ryOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} `
+             + `L${innerStart.x},${innerStart.y} A${rxInner},${ryInner} 0 ${largeArc} 0 ${innerEnd.x},${innerEnd.y} Z`;
+    }
+
+    /**
+     * Build an SVG path for a vertical extruded cylinder skirt along `[startAngle, endAngle]`
+     * between `(cx, cy)` and `(cx, cy + depth)`.
+     */
+    static cylinderSkirtPath(cx, cy, rx, ry, depth, startAngle, endAngle) {
+        const span = endAngle - startAngle;
+        if (span <= 1e-6 || depth <= 0) return '';
+        const effectiveEnd = span >= Math.PI * 2 - 1e-5 ? startAngle + Math.PI * 2 - 1e-4 : endAngle;
+        const largeArc = (effectiveEnd - startAngle) > Math.PI ? 1 : 0;
+        const x0 = cx + rx * Math.cos(startAngle);
+        const y0 = cy + ry * Math.sin(startAngle);
+        const x1 = cx + rx * Math.cos(effectiveEnd);
+        const y1 = cy + ry * Math.sin(effectiveEnd);
+        return `M${x0},${y0} A${rx},${ry} 0 ${largeArc} 1 ${x1},${y1} `
+             + `L${x1},${y1 + depth} A${rx},${ry} 0 ${largeArc} 0 ${x0},${y0 + depth} Z`;
+    }
+
+    /**
+     * Build an SVG path for a flat vertical radial cut wall at `angle` from inner to outer radius
+     * and extruded down by `depth`.
+     */
+    static radialWallPath(cx, cy, rxInner, ryInner, rxOuter, ryOuter, depth, angle) {
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xIn = cx + rxInner * cos;
+        const yIn = cy + ryInner * sin;
+        const xOut = cx + rxOuter * cos;
+        const yOut = cy + ryOuter * sin;
+        return `M${xIn},${yIn} L${xOut},${yOut} L${xOut},${yOut + depth} L${xIn},${yIn + depth} Z`;
+    }
+
+    /**
+     * Intersect `[startAngle, endAngle]` with the angular intervals where `sin(θ) >= 0` (front outer rim)
+     * or `sin(θ) <= 0` (back inner rim), handling wrap-around across `[-π, 3π]`.
+     * @param {number} startAngle
+     * @param {number} endAngle
+     * @param {'front'|'back'} hemisphere `'front'` = `sin(θ) >= 0` (`[0, π]`), `'back'` = `sin(θ) <= 0` (`[-π, 0]`)
+     * @returns {Array<[number, number]>}
+     */
+    static visibleArcIntervals(startAngle, endAngle, hemisphere = 'front') {
+        const intervals = [];
+        const windows = hemisphere === 'front'
+            ? [[-Math.PI * 2, -Math.PI], [0, Math.PI], [Math.PI * 2, Math.PI * 3]]
+            : [[-Math.PI * 3, -Math.PI * 2], [-Math.PI, 0], [Math.PI, Math.PI * 2]];
+        for (const [w0, w1] of windows) {
+            const a = Math.max(startAngle, w0);
+            const b = Math.min(endAngle, w1);
+            if (b - a > 1e-5) intervals.push([a, b]);
         }
-        const innerStart = { x: cx + rInner * Math.cos(endAngle),   y: cy + rInner * Math.sin(endAngle) };
-        const innerEnd   = { x: cx + rInner * Math.cos(startAngle), y: cy + rInner * Math.sin(startAngle) };
-        return `M${outerStart.x},${outerStart.y} A${rOuter},${rOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} `
-             + `L${innerStart.x},${innerStart.y} A${rInner},${rInner} 0 ${largeArc} 0 ${innerEnd.x},${innerEnd.y} Z`;
+        return intervals;
     }
 }

package/src/charting/archimate/ArchimateCsvFileFormat.js

@@ -2,14 +2,15 @@ import { ModelFileFormat } from '../ModelFileFormat.js';
 import { ArchimateModel } from '../diagrams/ArchimateModel.js';
 import { exportModelCSV, importModelCSV } from '../../archimateCSV.js';
 
-/** Where each table starts in the one file: elements, then relationships. */
-const ELEMENTS_HEADER = '=== elements.csv ===\n';
-const RELATIONSHIPS_HEADER = '=== relationships.csv ===\n';
+/** Table segment headers in the combined CSV file. */
+const ELEMENTS_HEADER = '=== elements.csv ===';
+const RELATIONS_HEADER = '=== relations.csv ===';
+const RELATIONSHIPS_HEADER = '=== relationships.csv ===';
+const PROPERTIES_HEADER = '=== properties.csv ===';
 
 /**
- * The model's elements and relationships as CSV, both tables in one file
- * (exportModelCSV's columns). A CSV holds no views: import gives a model of
- * its elements and relationships with one view of them all, laid out.
+ * The model's elements, relationships, and properties as CSV, all tables in one file.
+ * Compatible with both renderengine format and Archi CSV export/import.
  */
 export class ArchimateCsvFileFormat extends ModelFileFormat {
     get label() { return 'CSV'; }
@@ -18,16 +19,54 @@ export class ArchimateCsvFileFormat extends ModelFileFormat {
     get featureName() { return 'CSV'; }
 
     export(model) {
-        const { elementsCSV, relationshipsCSV } = exportModelCSV({ elements: model.elements(), relationships: model.relationships() });
-        return { data: `${ELEMENTS_HEADER}${elementsCSV}\n\n${RELATIONSHIPS_HEADER}${relationshipsCSV}`, mimeType: 'text/csv' };
+        const { elementsCSV, relationshipsCSV, propertiesCSV } = exportModelCSV({
+            elements: model.elements(),
+            relationships: model.relationships(),
+        });
+        const parts = [
+            `${ELEMENTS_HEADER}\n${elementsCSV}`,
+            `${RELATIONSHIPS_HEADER}\n${relationshipsCSV}`,
+        ];
+        if (propertiesCSV && propertiesCSV.trim().split('\n').length > 1) {
+            parts.push(`${PROPERTIES_HEADER}\n${propertiesCSV}`);
+        }
+        return { data: parts.join('\n\n'), mimeType: 'text/csv' };
     }
 
     import(text) {
         const normal = String(text).replace(/\r\n?/g, '\n');
-        const at = normal.indexOf(RELATIONSHIPS_HEADER);
-        const elementsCSV = (at < 0 ? normal : normal.slice(0, at)).replace(ELEMENTS_HEADER, '').trim();
-        const relationshipsCSV = at < 0 ? '' : normal.slice(at + RELATIONSHIPS_HEADER.length).trim();
-        const { elements, relationships } = importModelCSV(elementsCSV, relationshipsCSV);
+
+        let elementsCSV = '';
+        let relationshipsCSV = '';
+        let propertiesCSV = '';
+
+        // Check if file uses section markers
+        const hasSections = normal.includes(ELEMENTS_HEADER)
+            || normal.includes(RELATIONS_HEADER)
+            || normal.includes(RELATIONSHIPS_HEADER);
+
+        if (!hasSections) {
+            // Single table: assume elements.csv
+            elementsCSV = normal.trim();
+        } else {
+            // Split by section markers
+            const sections = normal.split(/(?:^|\n)(?====\s*[\w\.-]+\s*===)/g);
+            for (const sec of sections) {
+                const trimmed = sec.trim();
+                if (!trimmed) continue;
+                if (trimmed.startsWith(ELEMENTS_HEADER)) {
+                    elementsCSV = trimmed.slice(ELEMENTS_HEADER.length).trim();
+                } else if (trimmed.startsWith(RELATIONS_HEADER)) {
+                    relationshipsCSV = trimmed.slice(RELATIONS_HEADER.length).trim();
+                } else if (trimmed.startsWith(RELATIONSHIPS_HEADER)) {
+                    relationshipsCSV = trimmed.slice(RELATIONSHIPS_HEADER.length).trim();
+                } else if (trimmed.startsWith(PROPERTIES_HEADER)) {
+                    propertiesCSV = trimmed.slice(PROPERTIES_HEADER.length).trim();
+                }
+            }
+        }
+
+        const { elements, relationships } = importModelCSV(elementsCSV, relationshipsCSV, propertiesCSV);
         const model = new ArchimateModel({ elements, relationships, views: [] });
         if (elements.length) model.generateView(elements.map(e => e.id), { name: 'Imported elements' });
         return model;