@peter.prib/renderengine 0.12.0 → 0.13.0

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

@@ -188,13 +188,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 +212,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
@@ -249,12 +255,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 +1470,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 = {}) {
@@ -1499,7 +1511,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 = {}) {

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 }),
+        }));
     }
 
     /**