@peter.prib/renderengine 0.12.0 → 0.14.0

package/src/charting/table/TableView.js

@@ -1,4 +1,5 @@
 import { ChartChooser } from '../ChartChooser.js';
+import { TableChart } from '../charts/TableChart.js';
 
 /**
  * TableView — the state of an interactive table over result rows, kept apart from drawing so all of
@@ -52,8 +53,10 @@ export class TableView {
      * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
      * @param {ChartChooser} [options.chooser]
      * @param {function} [options.highlight] row → true for a row drawn highlighted (a host's selection)
+     * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every column or per
+     *   column (`TableChart.formatFor`). A copy keeps the raw numbers.
      */
-    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null } = {}) {
+    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null, format = null } = {}) {
         this.rows = rows;
         this.columns = ChartChooser.describe(rows, columns);
         this.complete = complete;
@@ -63,6 +66,7 @@ export class TableView {
         this.copy = copy ?? TableView.clipboard;
         this.chooser = chooser ?? new ChartChooser();
         this.highlight = highlight;
+        this.format = format;
         /** The sort keys, most significant first: `{ column, direction: 'asc' | 'desc' }`. */
         this.sorts = [];
         this.filters = [];           // { column, op, value }
@@ -70,6 +74,11 @@ export class TableView {
         this.page = 0;
     }
 
+    /** A column's value as the table shows it, in the column's `format` when there is one. */
+    valueText(column, value, nullText = '—') {
+        return TableChart.cellText(value, nullText, TableChart.formatFor(this.format, column));
+    }
+
     static clipboard(text) {
         return globalThis.navigator?.clipboard?.writeText(text);
     }

package/src/charting/table/TableViewChart.js

@@ -82,7 +82,7 @@ export class TableViewChart extends TableChart {
             columns.forEach((c, i) => {
                 const left = x0 + i * colW;
                 const hit = this.renderer.rect(left, top, colW, ROW_H, 'transparent', null);
-                const text = this._cell(TableChart.cellText(row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
+                const text = this._cell(view.valueText(c.key, row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
                 this._on(interactive, [hit, text], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(row, c.key)), null);
             });
             top += ROW_H;

package/src/charting/templates/Template.js

@@ -102,6 +102,16 @@ export class Template {
         return { x: this.x + ux * t, y: this.y + uy * t };
     }
 
+    /**
+     * Where a line from (px, py), a point inside the shape, heading in
+     * direction (dx, dy) leaves its outline (the shape unrotated).
+     * @returns {{x: number, y: number}}
+     */
+    exitPoint(px, py, dx, dy) {
+        const t = rayExitDistance(this.outline(), px, py, dx, dy);
+        return { x: px + dx * t, y: py + dy * t };
+    }
+
     /** Centre of the name text; the z-index line sits just below it. */
     get labelAnchor() { return { x: this.x, y: this.y - 8 }; }
 

package/src/exportImage.js

@@ -31,10 +31,10 @@ export const MAX_IMAGE_PIXELS = 32_000_000;
 /**
  * Work out the bitmap size to rasterize at.
  *
- * `scale` is what the caller asked for (2 = retina-sharp). It is reduced, never
- * the diagram's own dimensions, when the result would be too large: halving the
- * scale of a huge diagram still shows all of it, whereas cropping or shrinking
- * the diagram loses content or legibility.
+ * `scale` is what the caller asked for (1 = 100%, 2 = retina-sharp, 0.5 = half
+ * size). It is reduced, never the diagram's own dimensions, when the result
+ * would be too large: halving the scale of a huge diagram still shows all of
+ * it, whereas cropping or shrinking the diagram loses content or legibility.
  *
  * @returns {{width:number, height:number, scale:number, clamped:boolean}}
  */
@@ -49,10 +49,6 @@ export function imageSize({ width, height, scale = 2, maxPixels = MAX_IMAGE_PIXE
         s = Math.sqrt(maxPixels / (w * h));
         clamped = true;
     }
-    // A scale below 1:1 would be a downscale the caller never asked for, but a
-    // diagram that is itself over the budget leaves no choice.
-    if (s < 1 && w * h <= maxPixels) s = 1;
-
     return { width: Math.max(1, Math.round(w * s)), height: Math.max(1, Math.round(h * s)), scale: s, clamped };
 }
 
@@ -67,8 +63,10 @@ export function imageSize({ width, height, scale = 2, maxPixels = MAX_IMAGE_PIXE
  * @param {number} [options.width]       pixels; omitted leaves what is there
  * @param {number} [options.height]
  * @param {string|null} [options.background='#ffffff']  null for transparent
+ * @param {string} [options.viewBox]  the drawing's own units, when it has none
+ *   (so a picture sized other than as drawn scales rather than crops)
  */
-export function prepareSvgMarkup(markup, { width, height, background = '#ffffff' } = {}) {
+export function prepareSvgMarkup(markup, { width, height, background = '#ffffff', viewBox } = {}) {
     let out = String(markup ?? '').trim();
     const open = out.match(/^<svg\b[^>]*>/i);
     if (!open) return out;          // not an <svg> — hand it back untouched
@@ -87,13 +85,23 @@ export function prepareSvgMarkup(markup, { width, height, background = '#ffffff'
     };
     if (Number.isFinite(width) && width > 0) setAttr('width', Math.round(width));
     if (Number.isFinite(height) && height > 0) setAttr('height', Math.round(height));
+    if (viewBox && !/\sviewBox\s*=/i.test(tag)) setAttr('viewBox', viewBox);
 
     out = tag + out.slice(open[0].length);
 
     if (background) {
-        // First child, so it sits behind everything. Percentages rather than
-        // pixels so it still covers the drawing if a viewBox rescales it.
-        out = out.replace(tag, `${tag}<rect x="0" y="0" width="100%" height="100%" fill="${background}"/>`);
+        // First child, so it sits behind everything. With a viewBox it reaches
+        // a whole viewBox past each side (the picture clips it): a percentage
+        // counts from (0,0), so a viewBox starting elsewhere (a cropped
+        // drawing) would leave a strip bare, and the viewBox alone would leave
+        // the bands a picture of another shape letterboxes it with.
+        // Without one, percentages, so it covers whatever size it is shown at.
+        const box = tag.match(/\sviewBox\s*=\s*["']\s*([-\d.e+]+)[\s,]+([-\d.e+]+)[\s,]+([-\d.e+]+)[\s,]+([-\d.e+]+)\s*["']/i);
+        const [x, y, w, h] = box ? box.slice(1).map(Number) : [];
+        const rect = box
+            ? `<rect x="${x - w}" y="${y - h}" width="${3 * w}" height="${3 * h}" fill="${background}"/>`
+            : `<rect x="0" y="0" width="100%" height="100%" fill="${background}"/>`;
+        out = out.replace(tag, `${tag}${rect}`);
     }
     return out;
 }
@@ -126,12 +134,12 @@ export function findDrawable(host) {
  * Size is taken from the element's laid-out box rather than its attributes,
  * because that is what the user is actually looking at.
  */
-export function serializeSvg(svgEl, { background = '#ffffff', width, height } = {}) {
+export function serializeSvg(svgEl, { background = '#ffffff', width, height, scale = 1 } = {}) {
     const box = svgEl.getBoundingClientRect?.() ?? {};
     const w = width ?? svgEl.width?.baseVal?.value ?? box.width;
     const h = height ?? svgEl.height?.baseVal?.value ?? box.height;
     const markup = new XMLSerializer().serializeToString(svgEl);
-    return prepareSvgMarkup(markup, { width: w, height: h, background });
+    return prepareSvgMarkup(markup, { width: w * scale, height: h * scale, background, viewBox: `0 0 ${w} ${h}` });
 }
 
 /**
@@ -150,9 +158,16 @@ export async function toPngBlob(host, { scale = 2, background = '#ffffff', maxPi
     }
 
     const box = drawable.getBoundingClientRect();
-    const size = imageSize({ width: box.width, height: box.height, scale, maxPixels });
     const markup = serializeSvg(drawable, { background, width: box.width, height: box.height });
+    return svgMarkupToPngBlob(markup, { width: box.width, height: box.height, scale, background, maxPixels });
+}
 
+/**
+ * Rasterize standalone SVG markup (prepareSvgMarkup's) drawn `width` × `height`
+ * to a PNG Blob at `scale`. DOM only.
+ */
+export async function svgMarkupToPngBlob(markup, { width, height, scale = 1, background = '#ffffff', maxPixels = MAX_IMAGE_PIXELS } = {}) {
+    const size = imageSize({ width, height, scale, maxPixels });
     // A data: URL rather than a blob: URL — a blob: URL taints nothing either,
     // but Safari has historically refused to draw SVG from one.
     const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
@@ -200,7 +215,15 @@ export function downloadBlob(blob, filename) {
  * @returns {Promise<{via:'clipboard'|'download', filename?:string}>}
  */
 export async function copyImage(host, { scale = 2, background = '#ffffff', name = 'diagram' } = {}) {
-    const blob = await toPngBlob(host, { scale, background });
+    return copyPngBlob(await toPngBlob(host, { scale, background }), { name });
+}
+
+/**
+ * Put a PNG Blob on the clipboard, or download it where the browser cannot
+ * (as copyImage). DOM only.
+ * @returns {Promise<{via:'clipboard'|'download', filename?:string}>}
+ */
+export async function copyPngBlob(blob, { name = 'diagram' } = {}) {
     const canWrite = typeof ClipboardItem !== 'undefined'
         && typeof navigator !== 'undefined'
         && navigator.clipboard?.write;
@@ -220,10 +243,14 @@ export async function copyImage(host, { scale = 2, background = '#ffffff', name
 }
 
 /** Save a diagram as an SVG file. DOM only. */
-export function downloadSvg(host, { background = '#ffffff', name = 'diagram' } = {}) {
+export function downloadSvg(host, { background = '#ffffff', name = 'diagram', scale = 1 } = {}) {
     const drawable = findDrawable(host);
     if (!drawable || drawable.tagName.toLowerCase() !== 'svg') throw new Error('No <svg> to export');
-    const markup = serializeSvg(drawable, { background });
+    downloadSvgMarkup(serializeSvg(drawable, { background, scale }), { name });
+}
+
+/** Save standalone SVG markup as a file. DOM only. */
+export function downloadSvgMarkup(markup, { name = 'diagram' } = {}) {
     downloadBlob(new Blob([markup], { type: 'image/svg+xml;charset=utf-8' }), imageFileName(name, 'svg'));
 }
 

package/src/index.js

@@ -33,6 +33,10 @@ import { LagPlotChart } from './charting/charts/LagPlotChart.js';
 import { TreemapChart } from './charting/charts/TreemapChart.js';
 import { SunburstChart } from './charting/charts/SunburstChart.js';
 import { OutlineChart } from './charting/charts/OutlineChart.js';
+import { IcicleChart } from './charting/charts/IcicleChart.js';
+import { ParetoChart } from './charting/charts/ParetoChart.js';
+import { LollipopChart } from './charting/charts/LollipopChart.js';
+import { MarimekkoChart } from './charting/charts/MarimekkoChart.js';
 import { TableChart } from './charting/charts/TableChart.js';
 import { ChartChooser } from './charting/ChartChooser.js';
 import { TableView } from './charting/table/TableView.js';
@@ -40,6 +44,8 @@ import { TableViewChart } from './charting/table/TableViewChart.js';
 import { PivotView } from './charting/pivot/PivotView.js';
 import { PivotGridChart } from './charting/pivot/PivotGridChart.js';
 import { PivotChart } from './charting/pivot/PivotChart.js';
+import { AskView } from './charting/ask/AskView.js';
+import { AskBar } from './charting/ask/AskBar.js';
 import { RadarChart } from './charting/charts/RadarChart.js';
 import { FunnelChart } from './charting/charts/FunnelChart.js';
 import { WaterfallChart } from './charting/charts/WaterfallChart.js';
@@ -188,13 +194,18 @@ import {
     parseXML, parseArchiModel, toRenderEngineModel, toArchimateModel, toArchiXML, fromArchimateView, toArchiExport,
 } from './archimateArchiFormat.js';
 import { parseExchangeModel, toExchangeXML, EXCHANGE_NAMESPACE, EXCHANGE_TYPE_PROPERTY, EXCHANGE_VIEWPOINTS } from './archimateExchangeFormat.js';
-import { ModelFileFormat, modelFileMenuItems, importFile } from './charting/ModelFileFormat.js';
+import { ModelFileFormat, modelFileMenuItems, importFile, findPayload, askPasteImport } from './charting/ModelFileFormat.js';
 import { ArchiFileFormat, ExchangeFileFormat, ArchimateCsvFileFormat, ARCHIMATE_FILE_FORMATS } from './charting/archimate/index.js';
 import { ShowElementCommand } from './charting/diagrams/ShowElementCommand.js';
 import { EmphasisRule, EMPHASIS_OPACITY, EMPHASIS_LEVELS, strongerEmphasis } from './charting/emphasis/EmphasisRule.js';
 import { HighlightRule } from './charting/emphasis/HighlightRule.js';
 import { CatalogDialog } from './charting/CatalogDialog.js';
-import { CustomViewpoints, CUSTOM_VIEWPOINTS_STORE, specializationCatalogDialog, elementTypeChoices } from './charting/archimate/index.js';
+import { CustomViewpoints, CUSTOM_VIEWPOINTS_STORE, specializationCatalogDialog, elementTypeChoices, askDeleteFromModel, deleteFromModelMessage } from './charting/archimate/index.js';
+import { DeleteFromModelCommand } from './charting/diagrams/DeleteFromModelCommand.js';
+import {
+  CHANGE_COLOURS, CHANGE_MAKERS, CHANGE_WORDS, changeAction, relationshipChange, elementChange,
+  propertyParams, expressionValues, resultBands, sequentialColours,
+} from './charting/archimate/heatMaps.js';
 import { ViewpointRule, ElementFilterRule } from './charting/archimate/index.js';
 import { MODEL_ELEMENT_MIME, TREE_LAYERS, treeLayerOf } from './charting/modelTree/ModelTreePanel.js';
 import { parseArchiFile, toArchiFile, ARCHI_MODEL_ENTRY } from './archimateArchive.js';
@@ -207,6 +218,7 @@ import {
 // reference sits inside a function body, so loading it under node does nothing.
 import {
   copyImage, toPngBlob, downloadPng, downloadSvg, downloadBlob,
+  svgMarkupToPngBlob, copyPngBlob, downloadSvgMarkup,
   serializeSvg, prepareSvgMarkup, imageSize, imageFileName, findDrawable, MAX_IMAGE_PIXELS,
 } from './exportImage.js';
 // Same reasoning as exportImage: every DOM reference sits inside a function
@@ -222,7 +234,8 @@ import {
 // separate browser-only entry: import 'renderengine/src/workspace.js' directly.
 
 export {
-  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart, TableView, TableViewChart, PivotView, PivotGridChart, PivotChart,
+  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart, TableView, TableViewChart, PivotView, PivotGridChart, PivotChart, AskView, AskBar,
+  ParetoChart, LollipopChart, MarimekkoChart, IcicleChart,
   DIAGRAM_CATALOG, getDiagramCatalogEntry, diagramRegistry,
   TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry,
   AXIS_KIND, ENCODING_CHANNEL, COORD_SYSTEM, COLOR_MODE, CAMERA_MODE,
@@ -249,12 +262,16 @@ export {
   importElementsCSV, importRelationshipsCSV, importModelCSV,
   parseArchiModel, toArchimateModel, fromArchimateView, toArchiExport,
   parseExchangeModel, toExchangeXML, EXCHANGE_NAMESPACE, EXCHANGE_TYPE_PROPERTY, EXCHANGE_VIEWPOINTS,
-  ModelFileFormat, modelFileMenuItems, importFile, ArchiFileFormat, ExchangeFileFormat, ArchimateCsvFileFormat, ARCHIMATE_FILE_FORMATS,
+  ModelFileFormat, modelFileMenuItems, importFile, findPayload, askPasteImport, ArchiFileFormat, ExchangeFileFormat, ArchimateCsvFileFormat, ARCHIMATE_FILE_FORMATS,
   ShowElementCommand, MODEL_ELEMENT_MIME, TREE_LAYERS, treeLayerOf,
   EmphasisRule, EMPHASIS_OPACITY, EMPHASIS_LEVELS, strongerEmphasis, HighlightRule, ViewpointRule, ElementFilterRule,
   CatalogDialog, CustomViewpoints, CUSTOM_VIEWPOINTS_STORE, specializationCatalogDialog, elementTypeChoices,
+  askDeleteFromModel, deleteFromModelMessage, DeleteFromModelCommand,
+  CHANGE_COLOURS, CHANGE_MAKERS, CHANGE_WORDS, changeAction, relationshipChange, elementChange,
+  propertyParams, expressionValues, resultBands, sequentialColours,
   parseArchiFile, toArchiFile, ARCHI_MODEL_ENTRY, ZipArchive,
   copyImage, toPngBlob, downloadPng, downloadSvg, downloadBlob,
+  svgMarkupToPngBlob, copyPngBlob, downloadSvgMarkup,
   serializeSvg, prepareSvgMarkup, imageSize, imageFileName, findDrawable, MAX_IMAGE_PIXELS,
   showPropertiesDialog, showDiagramPropertiesDialog, showGlobalSettingsDialog,
   propertyRowsFor, coerceFieldValue, derivedRefreshPlan, LAYER_CHOICES, NODE_SECTIONS,
@@ -1460,6 +1477,8 @@ export class RenderEngine {
      * @param {string} [options.title]
      * @param {number} [options.chartHeight] a chart's height (360)
      * @param {boolean} [options.fitHeight] size the container to what is drawn (true)
+     * @param {function|Intl.NumberFormat|object} [options.format] how numbers show: for every column, or
+     *   per column ({ Amount: Intl.NumberFormat }); copies keep the raw numbers
      * @returns {TableView|null} the table's state, for the host to read or change
      */
     resultView(rows, options = {}) {
@@ -1488,6 +1507,39 @@ export class RenderEngine {
         const back = this.renderer.text('◂ Table', 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle' });
         back?.addEventListener?.('click', () => this._drawResultTable(view, options));
         if (back?.style) back.style.cursor = 'pointer';
+        const choices = view.chartChoices();
+        if (choices.length > 1) {
+            const pick = this.renderer.text(`${choice.label} ▾`, 68, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
+            const show = options.showMenu ?? ((x, y, items) => PopupMenu.show(x, y, items));
+            pick?.addEventListener?.('click', (e) => show(e.clientX, e.clientY, choices.map(c => ({
+                label: `${c.label}${c.key === choice.key ? ' ✓' : ''}`,
+                action: () => this._drawResultChart(view, c, options),
+            }))));
+            if (pick?.style) pick.style.cursor = 'pointer';
+        }
+    }
+
+    /**
+     * Mounts an interactive `AskBar` (question input, configurable next-word prediction in a
+     * scrollable list, semantic sense/reference/relation badges, and sample query pills) into
+     * `container` (or links `resultEngine: this` when called as `engine.askBar(container, options)`).
+     * @param {HTMLElement|string|object} containerOrOptions host container element/id, or options when mounting into `this.container`
+     * @param {object} [options] `AskBar` / `AskView` options (`suggest`, `measures`, `dimensions`, `members`, `sampleQuestions`, `visibleCount`, `predictChoices`, `onAsk`, etc.)
+     * @returns {AskBar}
+     */
+    askBar(containerOrOptions, options = {}) {
+        const isPlainOptions = containerOrOptions
+            && typeof containerOrOptions === 'object'
+            && !containerOrOptions.nodeType
+            && typeof containerOrOptions.appendChild !== 'function';
+        const container = isPlainOptions ? this.container : containerOrOptions;
+        const opts = isPlainOptions ? containerOrOptions : options;
+        return new AskBar(container, { resultEngine: this, ...opts });
+    }
+
+    /** Static helper: `RenderEngine.askBar(container, options)` constructs and mounts an `AskBar`. */
+    static askBar(container, options = {}) {
+        return new AskBar(container, options);
     }
 
     /**
@@ -1499,7 +1551,8 @@ export class RenderEngine {
      * the axes. The container's height follows the grid, as resultView's does.
      * @param {Array<object>} rows
      * @param {object} [options] rowAxis, columnAxis, measures, columns (hints, with the rollup column's),
-     *   dimensions, onDrill, menus, title, nullText, fitHeight
+     *   dimensions, onDrill, menus, title, nullText, fitHeight, format (how numbers show, per measure or for
+     *   all: cells, totals and the traffic lights' cut-offs; the copy keeps the raw numbers)
      * @returns {PivotView|null} the grid's state, for the host to read or change
      */
     pivotView(rows, options = {}) {
@@ -1537,7 +1590,8 @@ export class RenderEngine {
     pivotChart(view, options = {}) {
         if (!this.renderer) return null;
         const chart = new PivotChart(view, options);
-        chart.detach = view.listen(() => this._drawPivotChart(chart, options));
+        chart.redraw = () => this._drawPivotChart(chart, options);
+        chart.detach = view.listen(chart.redraw);
         this._drawPivotChart(chart, options);
         return chart;
     }
@@ -1548,15 +1602,19 @@ export class RenderEngine {
         if (choice === null) {
             this.renderer.clear();
             this.renderer.text('No chart fits what the grid shows', 8, 14, { fill: '#666', fontSize: '12px', verticalAlign: 'middle' });
+            options.onDraw?.(null, chart);
             return;
         }
         // No title unless one is given: the grid beside it says what is charted, and the link below
         // names the chart (with the chooser's reason as its tooltip).
         this.renderChartType(choice.key, choice.data, {
+            ...choice.options,
             title: options.title,
             legend: true,   // a series per column member: which colour is which must be said
             onDatumClick: (datum) => chart.click(datum),
+            onNodeClick: (node) => chart.click({ label: node.label }),
         });
+        options.onDraw?.(choice, chart);
         // Which chart, and the menu to change it, drawn over the chart as resultView's "◂ Table" is.
         if (!this.renderer.supportsSceneGraph) return;
         const pick = this.renderer.text(`${choice.label} ▾`, 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
@@ -1574,6 +1632,57 @@ export class RenderEngine {
         this.fitToContainer();
     }
 
+    /**
+     * Renders an icicle chart — rectangular hierarchical partition chart (top-down bands by depth,
+     * width proportional to value within each parent's span).
+     * @param {Array<{label: string, value?: number, children?: Array}>} data
+     * @param {object} [options]
+     */
+    icicleChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'icicle', data, options };
+        this._renderChart(new IcicleChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a Pareto chart — categories sorted descending with a cumulative percentage line (0–100%)
+     * on a right-hand axis and an 80% cutoff reference line.
+     * @param {Array<{label: string, value: number}>} data
+     * @param {object} [options]
+     */
+    paretoChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'pareto', data, options };
+        this._renderChart(new ParetoChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a lollipop chart — stem-and-dot alternative to bars for 1D or multi-series comparisons.
+     * @param {Array<{label: string, value: number}>|Array<{name: string, values: Array<{label: string, value: number}>}>} data
+     * @param {object} [options]
+     */
+    lollipopChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'lollipop', data, options };
+        this._renderChart(new LollipopChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a Marimekko (mosaic) chart — variable-width 100%-stacked columns where column width is
+     * proportional to each category's total and segment height is each series' share within that category.
+     * @param {Array<{name: string, values: Array<{label: string, value: number}>}>|Array<{label: string, values: number[]}>} data
+     * @param {object} [options]
+     */
+    marimekkoChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'marimekko', data, options };
+        this._renderChart(new MarimekkoChart(this.renderer, data, options));
+    }
+
     /**
      * Renders a waterfall chart — running-total bars, each floating from the
      * previous cumulative value to the new one (a "delta" bar), except

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -253,6 +253,8 @@ export class ArchimateCanvasPart extends EditorPart {
         if (previous) {
             this.editor.showGrid = previous.showGrid;
             this.editor.gridSize = previous.gridSize;
+            this.editor.showExportArea = previous.showExportArea;
+            this.editor.exportOptions = previous.exportOptions;
         }
 
         // A canvas's palette is Archi's canvas palette; another view's, ArchiMate's element types.
@@ -351,6 +353,7 @@ export class ArchimateCanvasPart extends EditorPart {
                 this.editor?.selectTemplate(instanceId);
             },
             addToView: (el) => this.editor?.showElement(el.id, this.editor.visibleCentre()),
+            deleteFromModel: (el) => this.editor?.askDeleteFromModel([el.id]),
         });
     }
 

package/src/workspace/parts/DiagramEditorPart.js

@@ -89,6 +89,8 @@ export class DiagramEditorPart extends EditorPart {
         if (previous) {
             this.editor.showGrid = previous.showGrid;
             this.editor.gridSize = previous.gridSize;
+            this.editor.showExportArea = previous.showExportArea;
+            this.editor.exportOptions = previous.exportOptions;
         }
         this.editor.initPaletteForDiagramType(palette, model.templateType);
         this.menuBar?.dispose();

package/src/workspace/parts/ModelHosted.js

@@ -1,6 +1,6 @@
 import { ModelFile } from './ModelFile.js';
 import { EditorPart } from './EditorPart.js';
-import { modelFileMenuItems } from '../../charting/ModelFileFormat.js';
+import { modelFileMenuItems, askPasteImport } from '../../charting/ModelFileFormat.js';
 import { pickFile } from '../../charting/toolbar/pickFile.js';
 
 /**
@@ -121,9 +121,20 @@ export const ModelHosted = (Base) => class extends Base {
 
     /** Import ▸: each format that only reads (another tool's export), opened as a new model. */
     importItems() {
-        return modelFileMenuItems(this.fileFormats().filter(f => f.exports === false), {
-            model: () => this.model, only: 'import', onImport: (model) => this.onImported(model), document: () => this.document,
-        });
+        return [
+            ...modelFileMenuItems(this.fileFormats().filter(f => f.exports === false), {
+                model: () => this.model, only: 'import', onImport: (model) => this.onImported(model), document: () => this.document,
+            }),
+            ...this.pasteItems(),
+        ];
+    }
+
+    /** Paste …: a model in each of its text formats from pasted text (an assistant's answer, say), as Open… would bring it. */
+    pasteItems() {
+        return this.fileFormats().filter(f => f.imports && !f.readsBytes).map(format => ({
+            label: `From pasted text (${format.label})…`,
+            action: () => askPasteImport(format, { onImport: (model) => this.onImported(model), document: this.document ?? globalThis.document }),
+        }));
     }
 
     /**