@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/diagrams/SketchView.js

@@ -0,0 +1,121 @@
+import { ArchimateModel, ArchimateView } from './ArchimateModel.js';
+import { SKETCH_BOX_KINDS, DEFAULT_SKETCH_PALETTE } from './sketchBoxKinds.js';
+
+/**
+ * SketchView — a sketch view as Archi has them (archimate:SketchModel):
+ * stickies (sketch-model-sticky), stick-figure actors (sketch-model-actor)
+ * and plain lines between them, drawn on a background paper or grid.
+ *
+ * Supports palette editing: custom sticky colours/styles, actor defaults,
+ * and importing/exporting palette configurations as JSON.
+ */
+export class SketchView extends ArchimateView {
+    static kind = 'sketch';
+
+    static BOX_KINDS = SKETCH_BOX_KINDS;
+
+    static BACKGROUNDS = Object.freeze({
+        NONE: 0,
+        GRID: 1,
+        LINES: 2,
+    });
+
+    constructor(model, spec = {}) {
+        super(model, { archiViewType: 'sketch-model', elementIds: [], ...spec });
+        this._palette = spec.palette ? JSON.parse(JSON.stringify(spec.palette)) : [...DEFAULT_SKETCH_PALETTE];
+        if (spec.background !== undefined) this.background = spec.background;
+    }
+
+    /** The background kind (0 = none/plain, 1 = grid, 2 = lines). */
+    get background() {
+        const attr = this.archi?.attributes?.background;
+        return attr !== undefined ? Number(attr) : (this._background ?? 0);
+    }
+
+    set background(val) {
+        const num = Number(val) || 0;
+        this._background = num;
+        if (!this.archi) this.archi = {};
+        if (!this.archi.attributes) this.archi.attributes = {};
+        this.archi.attributes.background = String(num);
+    }
+
+    /** The sketch palette presets. */
+    get palette() {
+        return [...this._palette];
+    }
+
+    set palette(entries) {
+        if (!Array.isArray(entries)) throw new TypeError('Sketch palette must be an array of entries');
+        this._palette = entries.map(e => ({ ...e }));
+    }
+
+    /** Add or update a palette entry. */
+    setPaletteEntry(entry) {
+        if (!entry || !entry.id) throw new TypeError('Palette entry requires an id');
+        const idx = this._palette.findIndex(e => e.id === entry.id);
+        if (idx >= 0) this._palette[idx] = { ...this._palette[idx], ...entry };
+        else this._palette.push({ ...entry });
+    }
+
+    /** Remove a palette entry by id. */
+    removePaletteEntry(id) {
+        this._palette = this._palette.filter(e => e.id !== id);
+    }
+
+    /** Export the palette as a JSON string or object. */
+    exportPalette({ asString = true } = {}) {
+        const data = {
+            version: 1,
+            viewKind: 'sketch',
+            background: this.background,
+            entries: this.palette,
+        };
+        return asString ? JSON.stringify(data, null, 2) : data;
+    }
+
+    /** Import a palette from a JSON string or object. */
+    importPalette(source) {
+        const data = typeof source === 'string' ? JSON.parse(source) : source;
+        if (!data || !Array.isArray(data.entries)) {
+            throw new TypeError('Invalid sketch palette format: entries array expected');
+        }
+        if (data.background !== undefined) this.background = data.background;
+        this.palette = data.entries;
+        return this.palette;
+    }
+
+    /** CSS background styles matching this sketch's background setting. */
+    backgroundStyle() {
+        switch (this.background) {
+            case 1: // Grid
+                return {
+                    backgroundImage: 'linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px)',
+                    backgroundSize: '20px 20px',
+                    backgroundColor: '#fafafa',
+                };
+            case 2: // Lines
+                return {
+                    backgroundImage: 'linear-gradient(#e5e7eb 1px, transparent 1px)',
+                    backgroundSize: '100% 24px',
+                    backgroundColor: '#fffdfa',
+                };
+            case 0: // Plain
+            default:
+                return {
+                    backgroundColor: '#ffffff',
+                };
+        }
+    }
+
+    toJSON() {
+        return {
+            ...super.toJSON(),
+            background: this.background,
+            palette: this.palette,
+        };
+    }
+}
+
+// Self-register with ArchimateModel
+ArchimateModel.registerViewType('sketch-model', SketchView);

package/src/charting/diagrams/sketchBoxKinds.js

@@ -0,0 +1,30 @@
+import { CanvasBoxKind } from '../canvas/CanvasBoxKind.js';
+
+export const DEFAULT_SKETCH_PALETTE = Object.freeze([
+    { id: 'sticky-yellow', name: 'Yellow Sticky', color: '#fff59d', type: 'sticky' },
+    { id: 'sticky-green', name: 'Green Sticky', color: '#c8e6c9', type: 'sticky' },
+    { id: 'sticky-blue', name: 'Blue Sticky', color: '#bbdefb', type: 'sticky' },
+    { id: 'sticky-pink', name: 'Pink Sticky', color: '#f8bbd0', type: 'sticky' },
+    { id: 'sticky-orange', name: 'Orange Sticky', color: '#ffe0b2', type: 'sticky' },
+    { id: 'sticky-white', name: 'White Sticky', color: '#ffffff', type: 'sticky' },
+    { id: 'actor', name: 'Actor', color: '#000000', type: 'actor' },
+]);
+
+/**
+ * Archi's sketch palette: Stickies and Actors (stick figures).
+ */
+export const SKETCH_BOX_KINDS = Object.freeze([
+    new CanvasBoxKind({
+        key: 'sticky', label: 'Sticky', icon: '🗒', archiVisualType: 'sketch-model-sticky', width: 120, height: 80,
+        appearance: { fillColor: '#fff59d', strokeColor: 'none', textAlign: 'center', textPosition: 'middle' },
+    }),
+    new CanvasBoxKind({
+        key: 'actor', label: 'Actor', icon: '👤', archiVisualType: 'sketch-model-actor', width: 60, height: 100, shape: 'stick-figure',
+        appearance: { strokeColor: '#000000', textAlign: 'center', textPosition: 'top' },
+    }),
+]);
+
+/** A sketch box kind by key, or undefined. */
+export function sketchBoxKind(key) {
+    return SKETCH_BOX_KINDS.find(k => k.key === key);
+}

package/src/charting/modelTree/AnalysisPanel.js

@@ -1,10 +1,27 @@
 import { treeLayerOf } from './ModelTreePanel.js';
 import { typeTitle } from '../archimate/archimateNames.js';
+import { NavigatorPanel } from './NavigatorPanel.js';
+
+export { NavigatorPanel, buildNavigatorPanel } from './NavigatorPanel.js';
+export { NavigatorModel } from './NavigatorModel.js';
+
+let currentAnalysisMode = 'analysis';
+
+export function setAnalysisMode(mode) {
+    if (mode === 'analysis' || mode === 'navigator') {
+        currentAnalysisMode = mode;
+    }
+}
+
+export function getAnalysisMode() {
+    return currentAnalysisMode;
+}
+
 /**
  * Builds analysis data for a selected element: "Used in Views", incoming/outgoing relationships.
  */
 export function buildAnalysisData(model, elementId) {
-    const element = model.getElement(elementId);
+    const element = model?.getElement(elementId);
     if (!element) return null;
 
     const rels = model.relationshipsFor(elementId);
@@ -18,35 +35,88 @@ export function buildAnalysisData(model, elementId) {
 }
 
 /**
- * DOM shell for rendering analysis panel.
+ * DOM shell for rendering analysis and visual navigator panel.
  * Builds via doc.createElement/Object.assign, never innerHTML.
  */
-export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () => {} } = {}) {
+export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () => {}, onSelectView = () => {} } = {}) {
     const panel = doc.createElement('div');
     panel.style.cssText = `
         display: flex;
         flex-direction: column;
         height: 100%;
-        gap: 8px;
-        padding: 8px;
-        font-family: sans-serif;
+        padding: 6px 8px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         font-size: 13px;
         overflow: hidden;
+        background: #fff;
     `;
 
+    // Mode tabs: [ Analysis | Navigator ]
+    const header = doc.createElement('div');
+    header.style.cssText = 'display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e4e8; padding-bottom: 4px; margin-bottom: 6px; flex-shrink: 0;';
+
+    const tabs = doc.createElement('div');
+    tabs.style.cssText = 'display: flex; gap: 4px;';
+
+    const makeTab = (key, label) => {
+        const t = doc.createElement('button');
+        t.type = 'button';
+        t.textContent = label;
+        const active = (currentAnalysisMode === key);
+        t.style.cssText = `
+            font-size: 11px;
+            padding: 2px 8px;
+            border: 1px solid ${active ? '#0366d6' : '#d1d5da'};
+            border-radius: 3px;
+            background: ${active ? '#0366d6' : '#fff'};
+            color: ${active ? '#fff' : '#333'};
+            cursor: pointer;
+            font-weight: ${active ? '600' : 'normal'};
+        `;
+        t.addEventListener('click', () => {
+            currentAnalysisMode = key;
+            const updated = buildAnalysisPanel(doc, { model, elementId, onSelectItem, onSelectView });
+            panel.replaceWith(updated);
+        });
+        return t;
+    };
+
+    tabs.appendChild(makeTab('analysis', 'Analysis'));
+    tabs.appendChild(makeTab('navigator', 'Navigator'));
+    header.appendChild(tabs);
+    panel.appendChild(header);
+
+    // If Navigator mode is active, render the step-by-step NavigatorPanel
+    if (currentAnalysisMode === 'navigator') {
+        const navPanel = new NavigatorPanel(doc, {
+            model,
+            elementId,
+            onSelectItem,
+            onSelectView,
+        });
+        const navWrap = doc.createElement('div');
+        navWrap.style.cssText = 'flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0;';
+        navWrap.appendChild(navPanel.dom);
+        panel.appendChild(navWrap);
+        return panel;
+    }
+
+    // Default Analysis summary mode
     const data = buildAnalysisData(model, elementId);
     if (!data) {
-        panel.textContent = '(No element selected)';
+        const empty = doc.createElement('div');
+        empty.style.cssText = 'color: #888; font-style: italic; padding: 12px; text-align: center;';
+        empty.textContent = '(No element selected)';
+        panel.appendChild(empty);
         return panel;
     }
 
     // Element details
     const detailsDiv = doc.createElement('div');
-    detailsDiv.style.cssText = 'padding: 8px; background: #f5f5f5; border-radius: 4px;';
+    detailsDiv.style.cssText = 'padding: 8px; background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 4px; margin-bottom: 8px; flex-shrink: 0;';
 
     const nameRow = Object.assign(doc.createElement('div'), { textContent: `Name: ${data.element.name || '(unnamed)'}` });
-    const typeRow = Object.assign(doc.createElement('div'), { textContent: `Type: ${data.element.type}` });
-    // Its layer as the diagram draws it (a stored one, else its type's), as the tree files it.
+    const typeRow = Object.assign(doc.createElement('div'), { textContent: `Type: ${typeTitle(data.element.type)}` });
     const layerRow = Object.assign(doc.createElement('div'), { textContent: `Layer: ${typeTitle(treeLayerOf(data.element))}` });
 
     detailsDiv.appendChild(nameRow);
@@ -54,28 +124,34 @@ export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () =>
     detailsDiv.appendChild(layerRow);
     panel.appendChild(detailsDiv);
 
+    const bodyDiv = doc.createElement('div');
+    bodyDiv.style.cssText = 'flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;';
+
     // Used in Views
     const usedDiv = doc.createElement('div');
     usedDiv.style.cssText = 'flex-shrink: 0;';
 
     const usedLabel = Object.assign(doc.createElement('div'), {
         textContent: `Used in Views (${data.usedInViews.length})`,
-        style: 'font-weight: bold; margin-bottom: 4px;',
+        style: 'font-weight: 600; font-size: 11px; color: #586069; text-transform: uppercase; margin-bottom: 4px;',
     });
     usedDiv.appendChild(usedLabel);
 
     if (data.usedInViews.length === 0) {
         usedDiv.appendChild(Object.assign(doc.createElement('div'), {
             textContent: '(no views)',
-            style: 'font-size: 12px; color: #666;',
+            style: 'font-size: 12px; color: #888;',
         }));
     } else {
         for (const view of data.usedInViews) {
-            const row = buildAnalysisRow(doc, view.name, () => onSelectItem({ kind: 'view', id: view.id }));
+            const row = buildAnalysisRow(doc, view.name || 'View', () => {
+                onSelectView(view.id);
+                onSelectItem({ kind: 'view', id: view.id });
+            });
             usedDiv.appendChild(row);
         }
     }
-    panel.appendChild(usedDiv);
+    bodyDiv.appendChild(usedDiv);
 
     // Incoming relationships
     const incomingDiv = doc.createElement('div');
@@ -83,24 +159,24 @@ export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () =>
 
     const incomingLabel = Object.assign(doc.createElement('div'), {
         textContent: `Incoming (${data.incoming.length})`,
-        style: 'font-weight: bold; margin-bottom: 4px; margin-top: 8px;',
+        style: 'font-weight: 600; font-size: 11px; color: #586069; text-transform: uppercase; margin-bottom: 4px; margin-top: 4px;',
     });
     incomingDiv.appendChild(incomingLabel);
 
     if (data.incoming.length === 0) {
         incomingDiv.appendChild(Object.assign(doc.createElement('div'), {
             textContent: '(none)',
-            style: 'font-size: 12px; color: #666;',
+            style: 'font-size: 12px; color: #888;',
         }));
     } else {
         for (const rel of data.incoming) {
             const source = model.getElement(rel.source);
-            const label = `${source?.name || rel.source} → ${rel.kind}`;
+            const label = `${source?.name || rel.source} → ${typeTitle(rel.kind)}`;
             const row = buildAnalysisRow(doc, label, () => onSelectItem({ kind: 'relationship', id: rel.id }));
             incomingDiv.appendChild(row);
         }
     }
-    panel.appendChild(incomingDiv);
+    bodyDiv.appendChild(incomingDiv);
 
     // Outgoing relationships
     const outgoingDiv = doc.createElement('div');
@@ -108,25 +184,26 @@ export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () =>
 
     const outgoingLabel = Object.assign(doc.createElement('div'), {
         textContent: `Outgoing (${data.outgoing.length})`,
-        style: 'font-weight: bold; margin-bottom: 4px; margin-top: 8px; flex-shrink: 0;',
+        style: 'font-weight: 600; font-size: 11px; color: #586069; text-transform: uppercase; margin-bottom: 4px; margin-top: 4px; flex-shrink: 0;',
     });
     outgoingDiv.appendChild(outgoingLabel);
 
     if (data.outgoing.length === 0) {
         outgoingDiv.appendChild(Object.assign(doc.createElement('div'), {
             textContent: '(none)',
-            style: 'font-size: 12px; color: #666;',
+            style: 'font-size: 12px; color: #888;',
         }));
     } else {
         for (const rel of data.outgoing) {
             const target = model.getElement(rel.target);
-            const label = `${rel.kind} → ${target?.name || rel.target}`;
+            const label = `${typeTitle(rel.kind)} → ${target?.name || rel.target}`;
             const row = buildAnalysisRow(doc, label, () => onSelectItem({ kind: 'relationship', id: rel.id }));
             outgoingDiv.appendChild(row);
         }
     }
-    panel.appendChild(outgoingDiv);
+    bodyDiv.appendChild(outgoingDiv);
 
+    panel.appendChild(bodyDiv);
     return panel;
 }
 
@@ -143,13 +220,14 @@ function buildAnalysisRow(doc, label, onClick) {
         cursor: pointer;
         user-select: none;
         font-size: 12px;
+        color: #24292e;
         transition: background-color 0.1s;
     `;
     row.textContent = label;
 
     row.addEventListener('click', onClick);
     row.addEventListener('mouseenter', () => {
-        row.style.background = '#e0e0e0';
+        row.style.background = '#f1f3f5';
     });
     row.addEventListener('mouseleave', () => {
         row.style.background = '';