@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/report/TemplatedReport.js

@@ -0,0 +1,547 @@
+/**
+ * TemplatedReport — template-driven report generator (PDF, Word, Excel, Markdown, HTML).
+ *
+ * Implements Archi's Jasper-style reporting with customizable templates,
+ * placeholders for model metadata, views, view diagrams (SVG/PNG), elements,
+ * relationships, and properties.
+ */
+
+/** Built-in template templates */
+export const REPORT_TEMPLATES = Object.freeze({
+    EXECUTIVE: 'executive',
+    DETAILED: 'detailed',
+    TABULAR: 'tabular',
+});
+
+function escapeHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function escapeXml(str) {
+    return escapeHtml(str);
+}
+
+function escapeCsv(val) {
+    const s = String(val ?? '');
+    if (/[",\n\r]/.test(s)) {
+        return `"${s.replace(/"/g, '""')}"`;
+    }
+    return s;
+}
+
+export class TemplatedReport {
+    /**
+     * @param {Object|ViewSetModel|ArchimateModel} model
+     * @param {Object} [options]
+     * @param {Object<string, string>} [options.pictures] - View SVG markup by view id
+     * @param {string} [options.title] - Override title
+     * @param {string} [options.template] - 'executive' | 'detailed' | 'tabular'
+     */
+    constructor(model, { pictures = {}, title = null, template = REPORT_TEMPLATES.DETAILED } = {}) {
+        this.model = model;
+        this.pictures = pictures;
+        this._title = title;
+        this.templateKind = template;
+    }
+
+    get title() {
+        return this._title || this.model.name || this.model.title || 'Model Report';
+    }
+
+    /**
+     * Normalized model data extracted for reporting.
+     */
+    extractData() {
+        const m = this.model;
+        const title = this.title;
+        const doc = m.documentation || '';
+
+        // Extract views
+        const viewsList = typeof m.views === 'function' ? m.views() : (m.views || []);
+        const views = viewsList.map(v => {
+            const vDoc = v.documentation || '';
+            const pic = this.pictures[v.id] || v.picture?.svg || (typeof v.toSvg === 'function' ? v.toSvg() : null) || '';
+            // Get view elements
+            let vElements = [];
+            if (Array.isArray(v.elements)) {
+                vElements = v.elements.map(e => ({
+                    id: e.id,
+                    name: e.name || e.label || '',
+                    type: e.type || e.archiVisualType || 'Element',
+                }));
+            } else if (typeof v.elementInstancesFor === 'function' && Array.isArray(v.elementIds)) {
+                vElements = v.elementIds.map(id => {
+                    const el = typeof m.getElement === 'function' ? m.getElement(id) : null;
+                    return {
+                        id,
+                        name: el?.name || id,
+                        type: el?.type || 'Element',
+                    };
+                });
+            }
+
+            const vProps = Array.isArray(v.properties) ? v.properties : [];
+
+            return {
+                id: v.id,
+                name: v.name || v.title || 'View',
+                documentation: vDoc,
+                picture: pic,
+                elements: vElements,
+                properties: vProps,
+            };
+        });
+
+        // Extract elements
+        let elements = [];
+        if (typeof m.allElements === 'function') {
+            elements = m.allElements();
+        } else if (typeof m.elements === 'function') {
+            elements = m.elements();
+        } else if (Array.isArray(m.elements)) {
+            elements = m.elements;
+        }
+        const normElements = elements.map(e => ({
+            id: e.id,
+            name: e.name || '',
+            type: e.type || 'Element',
+            layer: e.layer || (typeof e.type === 'string' && e.type.split('-')[0]) || '',
+            documentation: e.documentation || '',
+            properties: Array.isArray(e.properties) ? e.properties : [],
+        }));
+
+        // Extract relationships
+        let relationships = [];
+        if (typeof m.relationships === 'function') {
+            relationships = m.relationships();
+        } else if (Array.isArray(m.relationships)) {
+            relationships = m.relationships;
+        }
+        const normRelationships = relationships.map(r => {
+            const src = typeof m.getElement === 'function' ? m.getElement(r.source ?? r.sourceId) : null;
+            const tgt = typeof m.getElement === 'function' ? m.getElement(r.target ?? r.targetId) : null;
+            return {
+                id: r.id,
+                name: r.name || '',
+                type: r.type || r.kind || 'Relationship',
+                source: src?.name || r.source || r.sourceId || '',
+                sourceId: r.source || r.sourceId || '',
+                target: tgt?.name || r.target || r.targetId || '',
+                targetId: r.target || r.targetId || '',
+                documentation: r.documentation || '',
+                properties: Array.isArray(r.properties) ? r.properties : [],
+            };
+        });
+
+        // Extract properties
+        const properties = Array.isArray(m.properties) ? m.properties : [];
+
+        return {
+            model: {
+                id: m.id || 'model',
+                name: title,
+                documentation: doc,
+                version: m.version || '1.0',
+                properties,
+            },
+            views,
+            elements: normElements,
+            relationships: normRelationships,
+            properties,
+            date: new Date().toISOString().split('T')[0],
+        };
+    }
+
+    /**
+     * Render the report as HTML with print-to-PDF styles and vector SVG view diagrams.
+     * @param {Object} [options]
+     * @param {boolean} [options.printable=true]
+     * @returns {string}
+     */
+    toHtml({ printable = true } = {}) {
+        const data = this.extractData();
+        const { model, views, elements, relationships, properties, date } = data;
+
+        const printCss = printable ? `
+@media print {
+    body { background: #fff; margin: 0; padding: 0; font-size: 11pt; color: #000; }
+    header, footer { position: fixed; width: 100%; left: 0; font-size: 9pt; color: #777; }
+    header { top: 0; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
+    footer { bottom: 0; border-top: 1px solid #ccc; padding-top: 4px; display: flex; justify-content: space-between; }
+    .page-break { page-break-after: always; }
+    .no-break { page-break-inside: avoid; }
+    .picture { max-width: 100% !important; page-break-inside: avoid; }
+    table { page-break-inside: auto; }
+    tr { page-break-inside: avoid; page-break-after: auto; }
+}
+@page {
+    size: A4;
+    margin: 20mm;
+}` : '';
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(model.name)}</title>
+<style>
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #222; margin: 24px auto; max-width: 960px; padding: 0 16px; }
+h1 { font-size: 26px; border-bottom: 2px solid #2563eb; padding-bottom: 6px; margin-top: 24px; color: #1e3a8a; }
+h2 { font-size: 20px; border-bottom: 1px solid #cbd5e1; padding-bottom: 4px; margin-top: 24px; color: #1e40af; }
+h3 { font-size: 16px; margin-top: 18px; color: #334155; }
+.meta { font-size: 13px; color: #64748b; margin-bottom: 20px; }
+.doc { white-space: pre-wrap; background: #f8fafc; border-left: 4px solid #3b82f6; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
+table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
+th, td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; vertical-align: top; }
+th { background: #f1f5f9; font-weight: 600; color: #334155; }
+tr:nth-child(even) { background: #f8fafc; }
+.picture { margin: 16px 0; border: 1px solid #e2e8f0; border-radius: 4px; padding: 8px; background: #fff; overflow-x: auto; text-align: center; }
+.picture svg { max-width: 100%; height: auto; }
+.badge { display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: 500; border-radius: 3px; background: #e0f2fe; color: #0369a1; }
+${printCss}
+</style>
+</head>
+<body>
+<h1>${escapeHtml(model.name)}</h1>
+<div class="meta">Generated: ${escapeHtml(date)} | Version: ${escapeHtml(model.version)}</div>
+${model.documentation ? `<div class="doc">${escapeHtml(model.documentation)}</div>` : ''}
+
+${properties.length ? `
+<h2>Model Properties</h2>
+<table>
+<thead><tr><th>Property</th><th>Value</th></tr></thead>
+<tbody>
+${properties.map(p => `<tr><td>${escapeHtml(p.name)}</td><td>${escapeHtml(p.value)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+<h2>Views (${views.length})</h2>
+${views.map(v => `
+<div class="no-break">
+<h3>${escapeHtml(v.name)}</h3>
+${v.documentation ? `<div class="doc">${escapeHtml(v.documentation)}</div>` : ''}
+${v.picture ? `<div class="picture">${v.picture}</div>` : ''}
+${v.elements.length ? `
+<table>
+<thead><tr><th>Element</th><th>Type</th></tr></thead>
+<tbody>
+${v.elements.map(e => `<tr><td>${escapeHtml(e.name)}</td><td><span class="badge">${escapeHtml(e.type)}</span></td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+</div>
+<div class="page-break"></div>
+`).join('')}
+
+${elements.length ? `
+<h2>Elements (${elements.length})</h2>
+<table>
+<thead><tr><th>Name</th><th>Type</th><th>Layer</th><th>Documentation</th></tr></thead>
+<tbody>
+${elements.map(e => `<tr><td><strong>${escapeHtml(e.name)}</strong></td><td><span class="badge">${escapeHtml(e.type)}</span></td><td>${escapeHtml(e.layer)}</td><td>${escapeHtml(e.documentation)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+${relationships.length ? `
+<h2>Relationships (${relationships.length})</h2>
+<table>
+<thead><tr><th>Type</th><th>Source</th><th>Target</th><th>Name</th><th>Documentation</th></tr></thead>
+<tbody>
+${relationships.map(r => `<tr><td><span class="badge">${escapeHtml(r.type)}</span></td><td>${escapeHtml(r.source)}</td><td>${escapeHtml(r.target)}</td><td>${escapeHtml(r.name)}</td><td>${escapeHtml(r.documentation)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+</body>
+</html>`;
+    }
+
+    /**
+     * Render the report as Microsoft Word-compatible HTML document (.doc / .docx compatible).
+     * Word opens this with native tables, headings, and formatting intact.
+     * @returns {string}
+     */
+    toWord() {
+        const data = this.extractData();
+        const { model, views, elements, relationships, properties, date } = data;
+
+        return `<html xmlns:o="urn:schemas-microsoft-com:office:office"
+xmlns:w="urn:schemas-microsoft-com:office:word"
+xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+<meta charset="utf-8">
+<title>${escapeXml(model.name)}</title>
+<!--[if gte mso 9]>
+<xml>
+ <w:WordDocument>
+  <w:View>Print</w:View>
+  <w:Zoom>100</w:Zoom>
+  <w:DoNotOptimizeForBrowser/>
+ </w:WordDocument>
+</xml>
+<![endif]-->
+<style>
+body { font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.4; color: #333333; }
+h1 { font-size: 22pt; color: #1f4e79; border-bottom: 2pt solid #1f4e79; margin-bottom: 12pt; }
+h2 { font-size: 16pt; color: #2e75b6; margin-top: 18pt; margin-bottom: 8pt; }
+h3 { font-size: 13pt; color: #595959; margin-top: 12pt; }
+p.doc { font-style: italic; background-color: #f2f2f2; padding: 6pt; border-left: 3pt solid #2e75b6; }
+table { width: 100%; border-collapse: collapse; margin-top: 8pt; margin-bottom: 12pt; }
+th, td { border: 0.5pt solid #d9d9d9; padding: 4pt 6pt; font-size: 10pt; }
+th { background-color: #f2f2f2; font-weight: bold; color: #1f4e79; }
+.page-break { page-break-before: always; }
+</style>
+</head>
+<body>
+<h1>${escapeXml(model.name)}</h1>
+<p><strong>Generated:</strong> ${escapeXml(date)} | <strong>Version:</strong> ${escapeXml(model.version)}</p>
+${model.documentation ? `<p class="doc">${escapeXml(model.documentation)}</p>` : ''}
+
+${properties.length ? `
+<h2>Properties</h2>
+<table>
+<tr><th>Property</th><th>Value</th></tr>
+${properties.map(p => `<tr><td>${escapeXml(p.name)}</td><td>${escapeXml(p.value)}</td></tr>`).join('')}
+</table>` : ''}
+
+<h2>Views</h2>
+${views.map(v => `
+<div class="page-break"></div>
+<h3>${escapeXml(v.name)}</h3>
+${v.documentation ? `<p class="doc">${escapeXml(v.documentation)}</p>` : ''}
+${v.picture ? `<div>${v.picture}</div>` : ''}
+${v.elements.length ? `
+<table>
+<tr><th>Element</th><th>Type</th></tr>
+${v.elements.map(e => `<tr><td>${escapeXml(e.name)}</td><td>${escapeXml(e.type)}</td></tr>`).join('')}
+</table>` : ''}
+`).join('')}
+
+${elements.length ? `
+<div class="page-break"></div>
+<h2>Elements (${elements.length})</h2>
+<table>
+<tr><th>Name</th><th>Type</th><th>Layer</th><th>Documentation</th></tr>
+${elements.map(e => `<tr><td><strong>${escapeXml(e.name)}</strong></td><td>${escapeXml(e.type)}</td><td>${escapeXml(e.layer)}</td><td>${escapeXml(e.documentation)}</td></tr>`).join('')}
+</table>` : ''}
+
+${relationships.length ? `
+<div class="page-break"></div>
+<h2>Relationships (${relationships.length})</h2>
+<table>
+<tr><th>Type</th><th>Source</th><th>Target</th><th>Name</th></tr>
+${relationships.map(r => `<tr><td>${escapeXml(r.type)}</td><td>${escapeXml(r.source)}</td><td>${escapeXml(r.target)}</td><td>${escapeXml(r.name)}</td></tr>`).join('')}
+</table>` : ''}
+
+</body>
+</html>`;
+    }
+
+    /**
+     * Render the report as Microsoft Excel XML Spreadsheet 2003 format (.xml / .xls).
+     * Opens in Excel with native worksheets: Model, Views, Elements, Relationships, Properties.
+     * @returns {string}
+     */
+    toExcel() {
+        const data = this.extractData();
+        const { model, views, elements, relationships, properties, date } = data;
+
+        const makeRow = (cells, isHeader = false) => `
+    <Row>
+${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:Type="String">${escapeXml(c)}</Data></Cell>`).join('\n')}
+    </Row>`;
+
+        return `<?xml version="1.0"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:o="urn:schemas-microsoft-com:office:office"
+ xmlns:x="urn:schemas-microsoft-com:office:excel"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
+ <Styles>
+  <Style ss:ID="Default" ss:Name="Normal">
+   <Alignment ss:Vertical="Center"/>
+   <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#000000"/>
+  </Style>
+  <Style ss:ID="Header">
+   <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FFFFFF" ss:Bold="1"/>
+   <Interior ss:Color="#2563EB" ss:Pattern="Solid"/>
+  </Style>
+  <Style ss:ID="Title">
+   <Font ss:FontName="Calibri" ss:Size="16" ss:Color="#1E3A8A" ss:Bold="1"/>
+  </Style>
+ </Styles>
+
+ <Worksheet ss:Name="Model Summary">
+  <Table>
+   <Column ss:Width="160"/>
+   <Column ss:Width="400"/>
+   <Row>
+    <Cell ss:StyleID="Title"><Data ss:Type="String">${escapeXml(model.name)}</Data></Cell>
+   </Row>
+   ${makeRow(['Item', 'Details'], true)}
+   ${makeRow(['Title', model.name])}
+   ${makeRow(['Version', model.version])}
+   ${makeRow(['Generated', date])}
+   ${makeRow(['Documentation', model.documentation])}
+   ${makeRow(['Total Views', String(views.length)])}
+   ${makeRow(['Total Elements', String(elements.length)])}
+   ${makeRow(['Total Relationships', String(relationships.length)])}
+  </Table>
+ </Worksheet>
+
+ <Worksheet ss:Name="Views">
+  <Table>
+   <Column ss:Width="180"/>
+   <Column ss:Width="80"/>
+   <Column ss:Width="300"/>
+   ${makeRow(['View Name', 'Elements Count', 'Documentation'], true)}
+   ${views.map(v => makeRow([v.name, String(v.elements.length), v.documentation])).join('')}
+  </Table>
+ </Worksheet>
+
+ <Worksheet ss:Name="Elements">
+  <Table>
+   <Column ss:Width="140"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="100"/>
+   <Column ss:Width="280"/>
+   ${makeRow(['Name', 'Type', 'Layer', 'Documentation'], true)}
+   ${elements.map(e => makeRow([e.name, e.type, e.layer, e.documentation])).join('')}
+  </Table>
+ </Worksheet>
+
+ <Worksheet ss:Name="Relationships">
+  <Table>
+   <Column ss:Width="140"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="100"/>
+   <Column ss:Width="200"/>
+   ${makeRow(['Type', 'Source', 'Target', 'Name', 'Documentation'], true)}
+   ${relationships.map(r => makeRow([r.type, r.source, r.target, r.name, r.documentation])).join('')}
+  </Table>
+ </Worksheet>
+
+ ${properties.length ? `
+ <Worksheet ss:Name="Properties">
+  <Table>
+   <Column ss:Width="160"/>
+   <Column ss:Width="300"/>
+   ${makeRow(['Name', 'Value'], true)}
+   ${properties.map(p => makeRow([p.name, p.value])).join('')}
+  </Table>
+ </Worksheet>` : ''}
+</Workbook>`;
+    }
+
+    /**
+     * Export a model table as standard CSV.
+     * @param {'elements'|'relationships'|'views'|'properties'} [table='elements']
+     * @returns {string}
+     */
+    toCsv(table = 'elements') {
+        const data = this.extractData();
+        switch (table) {
+            case 'views': {
+                const header = ['ID', 'Name', 'Elements', 'Documentation'];
+                const rows = data.views.map(v => [v.id, v.name, v.elements.length, v.documentation]);
+                return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+            }
+            case 'relationships': {
+                const header = ['ID', 'Type', 'Source', 'Target', 'Name', 'Documentation'];
+                const rows = data.relationships.map(r => [r.id, r.type, r.source, r.target, r.name, r.documentation]);
+                return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+            }
+            case 'properties': {
+                const header = ['Name', 'Value'];
+                const rows = data.properties.map(p => [p.name, p.value]);
+                return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+            }
+            case 'elements':
+            default: {
+                const header = ['ID', 'Name', 'Type', 'Layer', 'Documentation'];
+                const rows = data.elements.map(e => [e.id, e.name, e.type, e.layer, e.documentation]);
+                return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+            }
+        }
+    }
+
+    /**
+     * Render the report as GitHub-flavored Markdown.
+     * @returns {string}
+     */
+    toMarkdown() {
+        const data = this.extractData();
+        const { model, views, elements, relationships, properties, date } = data;
+        const lines = [];
+
+        lines.push(`# ${model.name}`);
+        lines.push(`*Generated: ${date} | Version: ${model.version}*`);
+        lines.push('');
+
+        if (model.documentation) {
+            lines.push(model.documentation);
+            lines.push('');
+        }
+
+        if (properties.length) {
+            lines.push('## Properties');
+            lines.push('');
+            lines.push('| Property | Value |');
+            lines.push('| --- | --- |');
+            for (const p of properties) {
+                lines.push(`| ${p.name} | ${p.value} |`);
+            }
+            lines.push('');
+        }
+
+        if (views.length) {
+            lines.push(`## Views (${views.length})`);
+            lines.push('');
+            for (const v of views) {
+                lines.push(`### ${v.name}`);
+                if (v.documentation) {
+                    lines.push('');
+                    lines.push(v.documentation);
+                }
+                if (v.elements.length) {
+                    lines.push('');
+                    lines.push('| Element | Type |');
+                    lines.push('| --- | --- |');
+                    for (const e of v.elements) {
+                        lines.push(`| ${e.name} | ${e.type} |`);
+                    }
+                }
+                lines.push('');
+            }
+        }
+
+        if (elements.length) {
+            lines.push(`## Elements (${elements.length})`);
+            lines.push('');
+            lines.push('| Name | Type | Layer | Documentation |');
+            lines.push('| --- | --- | --- | --- |');
+            for (const e of elements) {
+                lines.push(`| **${e.name}** | ${e.type} | ${e.layer} | ${e.documentation.replace(/\n/g, ' ')} |`);
+            }
+            lines.push('');
+        }
+
+        if (relationships.length) {
+            lines.push(`## Relationships (${relationships.length})`);
+            lines.push('');
+            lines.push('| Type | Source | Target | Name |');
+            lines.push('| --- | --- | --- | --- |');
+            for (const r of relationships) {
+                lines.push(`| ${r.type} | ${r.source} | ${r.target} | ${r.name} |`);
+            }
+            lines.push('');
+        }
+
+        return lines.join('\n');
+    }
+}

package/src/charting/templates/BoxTemplate.js

@@ -1,27 +1,28 @@
-import { Template } from './Template.js';
-import { svgEl, pointsAttr } from './svg.js';
-
-/** BoxTemplate — 3D box (UML deployment node, server, device). */
-export class BoxTemplate extends Template {
-    static defaults = { width: 140, height: 90 };
-
-    get depth() { return Math.min(14, this.width * 0.15, this.height * 0.15); }
-
-    get labelAnchor() { return { x: this.x - this.depth / 2, y: this.y + this.depth / 2 - 8 }; }
-
-    outline() {
-        const { left: L, right: R, top: T, bottom: B, depth: d } = this;
-        return [[L, T + d], [L + d, T], [R, T], [R, B - d], [R - d, B], [L, B]];
-    }
-
-    shapeElements(doc) {
-        const { left: L, right: R, top: T, bottom: B } = this;
-        const d = this.depth;
-        const face = (pts, shade) => svgEl('polygon', this.paint({ points: pointsAttr(pts), 'fill-opacity': shade }), doc);
-        return [
-            face([[L, T + d], [L + d, T], [R, T], [R - d, T + d]], 0.7),
-            face([[R - d, T + d], [R, T], [R, B - d], [R - d, B]], 0.5),
-            svgEl('rect', this.paint({ x: L, y: T + d, width: this.width - d, height: this.height - d }), doc),
-        ];
-    }
-}
+import { Template } from './Template.js';
+import { svgEl, pointsAttr } from './svg.js';
+
+/** BoxTemplate — 3D box (UML deployment node, server, device). */
+export class BoxTemplate extends Template {
+    static isContainer = true;
+    static defaults = { width: 140, height: 90 };
+
+    get depth() { return Math.min(14, this.width * 0.15, this.height * 0.15); }
+
+    get labelAnchor() { return { x: this.x - this.depth / 2, y: this.y + this.depth / 2 - 8 }; }
+
+    outline() {
+        const { left: L, right: R, top: T, bottom: B, depth: d } = this;
+        return [[L, T + d], [L + d, T], [R, T], [R, B - d], [R - d, B], [L, B]];
+    }
+
+    shapeElements(doc) {
+        const { left: L, right: R, top: T, bottom: B } = this;
+        const d = this.depth;
+        const face = (pts, shade) => svgEl('polygon', this.paint({ points: pointsAttr(pts), 'fill-opacity': shade }), doc);
+        return [
+            face([[L, T + d], [L + d, T], [R, T], [R - d, T + d]], 0.7),
+            face([[R - d, T + d], [R, T], [R, B - d], [R - d, B]], 0.5),
+            svgEl('rect', this.paint({ x: L, y: T + d, width: this.width - d, height: this.height - d }), doc),
+        ];
+    }
+}

package/src/charting/templates/PackageTemplate.js

@@ -1,25 +1,26 @@
-import { Template } from './Template.js';
-import { svgEl } from './svg.js';
-
-/** PackageTemplate — UML package / folder: body with a name tab on the top-left. */
-export class PackageTemplate extends Template {
-    static defaults = { width: 160, height: 110 };
-
-    get tabHeight() { return Math.min(16, this.height / 5); }
-
-    get labelAnchor() { return { x: this.x, y: this.y + this.tabHeight / 2 - 8 }; }
-
-    outline() {
-        const { left: L, right: R, top: T, bottom: B, tabHeight: t } = this;
-        const tabRight = L + this.width * 0.4;
-        return [[L, T], [tabRight, T], [tabRight, T + t], [R, T + t], [R, B], [L, B]];
-    }
-
-    shapeElements(doc) {
-        const t = this.tabHeight;
-        return [
-            svgEl('rect', this.paint({ x: this.left, y: this.top, width: this.width * 0.4, height: t }), doc),
-            svgEl('rect', this.paint({ x: this.left, y: this.top + t, width: this.width, height: this.height - t }), doc),
-        ];
-    }
-}
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+
+/** PackageTemplate — UML package / folder: body with a name tab on the top-left. */
+export class PackageTemplate extends Template {
+    static isContainer = true;
+    static defaults = { width: 160, height: 110 };
+
+    get tabHeight() { return Math.min(16, this.height / 5); }
+
+    get labelAnchor() { return { x: this.x, y: this.y + this.tabHeight / 2 - 8 }; }
+
+    outline() {
+        const { left: L, right: R, top: T, bottom: B, tabHeight: t } = this;
+        const tabRight = L + this.width * 0.4;
+        return [[L, T], [tabRight, T], [tabRight, T + t], [R, T + t], [R, B], [L, B]];
+    }
+
+    shapeElements(doc) {
+        const t = this.tabHeight;
+        return [
+            svgEl('rect', this.paint({ x: this.left, y: this.top, width: this.width * 0.4, height: t }), doc),
+            svgEl('rect', this.paint({ x: this.left, y: this.top + t, width: this.width, height: this.height - t }), doc),
+        ];
+    }
+}