@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/arrangement/alignment.js

@@ -0,0 +1,88 @@
+/**
+ * Align, distribute and match size: where shapes go, worked out from their
+ * boxes alone (`{id, left, top, width, height}`), so every editor lines
+ * shapes up the same way and carries the result out with its own commands.
+ * Each function returns only the boxes that change, with their new values.
+ *
+ * As in Archi, the reference for align and match size is one of the shapes
+ * (the editor passes its primary selection); distribute keeps the first and
+ * last shapes where they are and spaces the others evenly between them.
+ */
+
+/** The ways to align, in menu order: [key, label]. */
+export const ALIGNMENTS = Object.freeze([
+    ['left', 'Left'], ['centre', 'Centre'], ['right', 'Right'],
+    ['top', 'Top'], ['middle', 'Middle'], ['bottom', 'Bottom'],
+]);
+
+/** The ways to distribute: [key, label]. */
+export const DISTRIBUTIONS = Object.freeze([['horizontal', 'Horizontally'], ['vertical', 'Vertically']]);
+
+/** The sizes to match: [key, label]. */
+export const SIZE_MATCHES = Object.freeze([['width', 'Width'], ['height', 'Height'], ['both', 'Width and height']]);
+
+/** For each alignment: the axis it moves along and where on a box it lines up (0 start, 0.5 middle, 1 end). */
+const LINE = {
+    left: ['x', 0], centre: ['x', 0.5], right: ['x', 1],
+    top: ['y', 0], middle: ['y', 0.5], bottom: ['y', 1],
+};
+const AXIS = { x: ['left', 'width'], y: ['top', 'height'] };
+
+/**
+ * Line boxes up with `reference`'s edge or middle.
+ * @param {Array<Object>} boxes
+ * @param {'left'|'centre'|'right'|'top'|'middle'|'bottom'} edge
+ * @param {Object} reference - One of the boxes (default the last)
+ * @returns {Array<{id, left, top}>} the boxes that move, at their new place
+ */
+export function align(boxes, edge, reference = boxes.at(-1)) {
+    const line = LINE[edge];
+    if (!line) throw new RangeError(`No such alignment: ${edge}`);
+    const [axis, at] = line;
+    const [start, size] = AXIS[axis];
+    const target = reference[start] + reference[size] * at;
+    return boxes
+        .map(b => ({ ...b, [start]: target - b[size] * at }))
+        .filter((b, i) => b[start] !== boxes[i][start])
+        .map(({ id, left, top }) => ({ id, left, top }));
+}
+
+/**
+ * Space boxes evenly along an axis: the first and last (by where they start)
+ * stay, and the gaps between neighbours become equal. Fewer than three: nothing.
+ * @param {Array<Object>} boxes
+ * @param {'horizontal'|'vertical'} direction
+ * @returns {Array<{id, left, top}>}
+ */
+export function distribute(boxes, direction) {
+    const axis = { horizontal: 'x', vertical: 'y' }[direction];
+    if (!axis) throw new RangeError(`No such direction: ${direction}`);
+    if (boxes.length < 3) return [];
+    const [start, size] = AXIS[axis];
+    const sorted = [...boxes].sort((a, b) => a[start] - b[start] || a[size] - b[size]);
+    const first = sorted[0], last = sorted.at(-1);
+    const used = sorted.reduce((sum, b) => sum + b[size], 0);
+    const gap = (last[start] + last[size] - first[start] - used) / (sorted.length - 1);
+    const moved = [];
+    let next = first[start] + first[size] + gap;
+    for (const box of sorted.slice(1, -1)) {
+        if (box[start] !== next) moved.push({ id: box.id, left: box.left, top: box.top, [start]: next });
+        next += box[size] + gap;
+    }
+    return moved;
+}
+
+/**
+ * Give boxes `reference`'s width, height or both; each keeps its top-left corner.
+ * @param {Array<Object>} boxes
+ * @param {'width'|'height'|'both'} dimension
+ * @param {Object} reference - One of the boxes (default the last)
+ * @returns {Array<{id, width, height}>}
+ */
+export function matchSize(boxes, dimension, reference = boxes.at(-1)) {
+    const keys = { width: ['width'], height: ['height'], both: ['width', 'height'] }[dimension];
+    if (!keys) throw new RangeError(`No such size: ${dimension}`);
+    return boxes
+        .filter(b => keys.some(k => b[k] !== reference[k]))
+        .map(b => ({ id: b.id, width: keys.includes('width') ? reference.width : b.width, height: keys.includes('height') ? reference.height : b.height }));
+}

package/src/charting/arrangement/arrangeMenuItems.js

@@ -0,0 +1,25 @@
+/**
+ * The Group / Ungroup / Lock / Unlock menu items for some items of a view:
+ * one definition for every editor (the template editor, the ArchiMate canvas
+ * and graph editors), each supplying how it carries the change out.
+ * @param {Arrangement} arrangement
+ * @param {Array<string>} ids - The items the menu is for (the clicked one first)
+ * @param {Object} act
+ * @param {(ids: string[]) => void} [act.group] - Group them (left out: no Group item)
+ * @param {(id: string) => void} act.ungroup
+ * @param {(ids: string[], locked: boolean) => void} act.setLocked
+ * @returns {Array<{label, action}>}
+ */
+export function arrangeMenuItems(arrangement, ids, { group = null, ungroup, setLocked }) {
+    const [first] = ids;
+    const itemGroup = arrangement.groupOf(first);
+    const locked = ids.every(id => arrangement.isLocked(id));
+    const together = arrangement.movers(ids);
+    const what = itemGroup?.pinnedToBack ? ' background' : '';
+    return [
+        ...(group && together.size > 1 && (!itemGroup || ids.some(id => !itemGroup.has(id)))
+            ? [{ label: '⛓ Group', action: () => group(ids) }] : []),
+        ...(itemGroup && !locked ? [{ label: `⛓ Ungroup${what}`, action: () => ungroup(first) }] : []),
+        { label: locked ? `🔓 Unlock${what}` : `🔒 Lock${what}`, action: () => setLocked(ids, !locked) },
+    ];
+}

package/src/charting/arrangement/index.js

@@ -0,0 +1,11 @@
+export { ItemGroup } from './ItemGroup.js';
+export { BackgroundGroup } from './BackgroundGroup.js';
+export { BackgroundCommand } from './BackgroundCommand.js';
+export { arrangeMenuItems } from './arrangeMenuItems.js';
+export { Arrangement } from './Arrangement.js';
+export { ArrangementCommand } from './ArrangementCommand.js';
+export { GroupCommand } from './GroupCommand.js';
+export { UngroupCommand } from './UngroupCommand.js';
+export { LockCommand } from './LockCommand.js';
+export { align, distribute, matchSize, ALIGNMENTS, DISTRIBUTIONS, SIZE_MATCHES } from './alignment.js';
+export { layout, nestLayout, LAYOUTS } from './layouts.js';

package/src/charting/arrangement/layouts.js

@@ -0,0 +1,233 @@
+/**
+ * Automatic layouts: where shapes go, worked out from their boxes
+ * (`{id, left, top, width, height}`) and the lines between them
+ * (`{source, target}`, by box id) alone, as alignment.js does for align and
+ * distribute. Every editor carries the result out with its own commands.
+ * The laid-out boxes keep the top-left corner of the area they took before,
+ * so a layout rearranges shapes where they are.
+ *
+ * `layout(kind, boxes, options)` returns `[{id, left, top}]` for every box.
+ * `nestLayout(...)` plans a shape with its parts drawn inside it.
+ */
+
+/** The layouts, in menu order: [key, label]. */
+export const LAYOUTS = Object.freeze([
+    ['grid', 'Grid'],
+    ['circle', 'Circle'],
+    ['tree-down', 'Tree, top down'],
+    ['tree-right', 'Tree, left to right'],
+    ['force', 'Force-directed'],
+    ['category', 'By kind, a row each'],
+]);
+
+/**
+ * Lay boxes out.
+ * @param {string} kind - One of LAYOUTS' keys
+ * @param {Array<Object>} boxes - `{id, left, top, width, height}`
+ * @param {Object} [options]
+ * @param {Array<{source: string, target: string}>} [options.edges] - Lines between the boxes (tree, force)
+ * @param {(box) => string} [options.categoryOf] - A box's kind (category layout); rows in order of first appearance
+ * @param {number} [options.gap] - Space between boxes
+ * @returns {Array<{id, left, top}>}
+ */
+export function layout(kind, boxes, { edges = [], categoryOf = () => '', gap = 40 } = {}) {
+    const fn = LAYOUT_FUNCTIONS[kind];
+    if (!fn) throw new RangeError(`No such layout: ${kind}`);
+    if (!boxes.length) return [];
+    const ids = new Set(boxes.map(b => b.id));
+    const lines = edges.filter(e => ids.has(e.source) && ids.has(e.target) && e.source !== e.target);
+    const placed = fn(readingOrder(boxes), { edges: lines, categoryOf, gap });
+    return keepCorner(boxes, placed);
+}
+
+const LAYOUT_FUNCTIONS = {
+    grid: (boxes, { gap }) => {
+        const columns = Math.ceil(Math.sqrt(boxes.length));
+        const cellW = Math.max(...boxes.map(b => b.width)) + gap;
+        const cellH = Math.max(...boxes.map(b => b.height)) + gap;
+        return boxes.map((b, i) => ({ id: b.id, left: (i % columns) * cellW, top: Math.floor(i / columns) * cellH }));
+    },
+
+    circle: (boxes, { gap }) => {
+        const size = Math.max(...boxes.map(b => Math.max(b.width, b.height))) + gap;
+        const radius = Math.max(size, (boxes.length * size) / (2 * Math.PI));
+        return boxes.map((b, i) => {
+            const angle = -Math.PI / 2 + (2 * Math.PI * i) / boxes.length;
+            return { id: b.id, left: radius + radius * Math.cos(angle) - b.width / 2, top: radius + radius * Math.sin(angle) - b.height / 2 };
+        });
+    },
+
+    'tree-down': (boxes, options) => tree(boxes, options, 'down'),
+    'tree-right': (boxes, options) => tree(boxes, options, 'right'),
+
+    force: (boxes, { edges, gap }) => forceDirected(boxes, edges, gap),
+
+    category: (boxes, { categoryOf, gap }) => {
+        const rows = new Map();
+        for (const b of boxes) {
+            const key = categoryOf(b) ?? '';
+            if (!rows.has(key)) rows.set(key, []);
+            rows.get(key).push(b);
+        }
+        const placed = [];
+        let top = 0;
+        for (const row of rows.values()) {
+            let left = 0;
+            for (const b of row) { placed.push({ id: b.id, left, top }); left += b.width + gap; }
+            top += Math.max(...row.map(b => b.height)) + gap;
+        }
+        return placed;
+    },
+};
+
+/** Boxes in reading order: top to bottom, then left to right (rows by half a box). */
+function readingOrder(boxes) {
+    const rowOf = (b) => Math.round(b.top / Math.max(1, b.height / 2));
+    return [...boxes].sort((a, b) => rowOf(a) - rowOf(b) || a.left - b.left);
+}
+
+/** Move a layout's result so its top-left is where the boxes' was. */
+function keepCorner(boxes, placed) {
+    const left0 = Math.min(...boxes.map(b => b.left)), top0 = Math.min(...boxes.map(b => b.top));
+    const left1 = Math.min(...placed.map(p => p.left)), top1 = Math.min(...placed.map(p => p.top));
+    return placed.map(p => ({ id: p.id, left: Math.round(p.left - left1 + left0), top: Math.round(p.top - top1 + top0) }));
+}
+
+/**
+ * A tidy tree along the lines (source above target): each box centred over
+ * its children, siblings side by side; a box no line reaches is a root, and
+ * one reached twice stays under the first that reached it.
+ */
+function tree(boxes, { edges, gap }, direction) {
+    const byId = new Map(boxes.map(b => [b.id, b]));
+    const children = new Map(boxes.map(b => [b.id, []]));
+    const reached = new Set(edges.map(e => e.target));
+    const parentOf = new Map();
+    const roots = boxes.filter(b => !reached.has(b.id)).map(b => b.id);
+    const seen = new Set(roots);
+    const queue = [...roots];
+    while (queue.length) {
+        const id = queue.shift();
+        for (const e of edges.filter(x => x.source === id)) {
+            if (seen.has(e.target)) continue;
+            seen.add(e.target);
+            parentOf.set(e.target, id);
+            children.get(id).push(e.target);
+            queue.push(e.target);
+        }
+    }
+    // What the walk did not reach (all in cycles, or a cycle no root leads to) starts its own tree.
+    for (const b of boxes) if (!seen.has(b.id)) { roots.push(b.id); seen.add(b.id); }
+
+    // Along the tree, "breadth" is across (x when down) and "depth" is along it.
+    const across = direction === 'down' ? 'width' : 'height';
+    const along = direction === 'down' ? 'height' : 'width';
+    const span = new Map();
+    const measure = (id) => {
+        const own = byId.get(id)[across];
+        const kids = children.get(id);
+        const kidsSpan = kids.reduce((sum, k) => sum + measure(k), 0) + gap * Math.max(0, kids.length - 1);
+        const s = Math.max(own, kidsSpan);
+        span.set(id, s);
+        return s;
+    };
+    const levelDepth = [];
+    const depthOf = (id, d = 0) => { levelDepth[d] = Math.max(levelDepth[d] ?? 0, byId.get(id)[along]); children.get(id).forEach(k => depthOf(k, d + 1)); };
+    roots.forEach(r => { measure(r); depthOf(r); });
+    const levelStart = [];
+    levelDepth.reduce((at, size, d) => { levelStart[d] = at; return at + size + gap * 1.5; }, 0);
+
+    const placed = [];
+    const place = (id, start, d) => {
+        const box = byId.get(id);
+        const centre = start + span.get(id) / 2;
+        const a = centre - box[across] / 2, l = levelStart[d];
+        placed.push(direction === 'down' ? { id, left: a, top: l } : { id, left: l, top: a });
+        let at = start + (span.get(id) - (children.get(id).reduce((s, k) => s + span.get(k), 0) + gap * Math.max(0, children.get(id).length - 1))) / 2;
+        for (const k of children.get(id)) { place(k, at, d + 1); at += span.get(k) + gap; }
+    };
+    let start = 0;
+    for (const r of roots) { place(r, start, 0); start += span.get(r) + gap; }
+    return placed;
+}
+
+/**
+ * Fruchterman–Reingold: lines pull their ends together, every pair of boxes
+ * pushes apart, cooling over the iterations. Deterministic: it starts from
+ * where the boxes are (boxes on one spot are spread round it first).
+ */
+function forceDirected(boxes, edges, gap) {
+    const size = Math.max(...boxes.map(b => Math.max(b.width, b.height))) + gap;
+    const k = size * 1.2;
+    const pos = boxes.map((b, i) => ({ x: b.left + b.width / 2 + (i % 3) * 0.5, y: b.top + b.height / 2 + Math.floor(i / 3) * 0.5 }));
+    const index = new Map(boxes.map((b, i) => [b.id, i]));
+    let temperature = size * 2;
+    for (let iteration = 0; iteration < 120; iteration++) {
+        const shift = pos.map(() => ({ x: 0, y: 0 }));
+        for (let i = 0; i < pos.length; i++) {
+            for (let j = i + 1; j < pos.length; j++) {
+                let dx = pos[i].x - pos[j].x, dy = pos[i].y - pos[j].y;
+                if (dx === 0 && dy === 0) { dx = 0.1 * (j - i); dy = 0.1; }
+                const d = Math.max(1, Math.hypot(dx, dy));
+                const push = (k * k) / d;
+                shift[i].x += (dx / d) * push; shift[i].y += (dy / d) * push;
+                shift[j].x -= (dx / d) * push; shift[j].y -= (dy / d) * push;
+            }
+        }
+        for (const e of edges) {
+            const i = index.get(e.source), j = index.get(e.target);
+            const dx = pos[i].x - pos[j].x, dy = pos[i].y - pos[j].y;
+            const d = Math.max(1, Math.hypot(dx, dy));
+            const pull = (d * d) / k;
+            shift[i].x -= (dx / d) * pull; shift[i].y -= (dy / d) * pull;
+            shift[j].x += (dx / d) * pull; shift[j].y += (dy / d) * pull;
+        }
+        for (let i = 0; i < pos.length; i++) {
+            const d = Math.max(1e-9, Math.hypot(shift[i].x, shift[i].y));
+            const step = Math.min(d, temperature);
+            pos[i].x += (shift[i].x / d) * step;
+            pos[i].y += (shift[i].y / d) * step;
+        }
+        temperature *= 0.95;
+    }
+    return boxes.map((b, i) => ({ id: b.id, left: pos[i].x - b.width / 2, top: pos[i].y - b.height / 2 }));
+}
+
+/**
+ * A shape with its parts drawn inside it, theirs inside them, however deep:
+ * each shape's parts in a grid below its label, and the shape grown to hold
+ * them (never shrunk). The top shape keeps its top-left corner.
+ * @param {string} rootId
+ * @param {(id: string) => Array<string>} partsOf - A shape's parts (each placed once)
+ * @param {(id: string) => {left, top, width, height}} boxOf
+ * @param {{padding?: number, gap?: number, header?: number}} [options]
+ * @returns {Map<string, {left, top, width, height, parentId}>} every shape's new box (the root's included,
+ *   its parentId null) and the shape it goes inside
+ */
+export function nestLayout(rootId, partsOf, boxOf, { padding = 15, gap = 12, header = 30 } = {}) {
+    const plan = new Map();
+    const seen = new Set([rootId]);
+    // Sizes bottom-up, relative positions of the parts within their parent.
+    const size = (id) => {
+        const own = boxOf(id);
+        const parts = partsOf(id).filter(p => !seen.has(p) && seen.add(p));
+        if (!parts.length) return { width: own.width, height: own.height, parts: [] };
+        const sized = parts.map(p => ({ id: p, ...size(p) }));
+        const columns = Math.ceil(Math.sqrt(sized.length));
+        const cellW = Math.max(...sized.map(s => s.width)), cellH = Math.max(...sized.map(s => s.height));
+        const placed = sized.map((s, i) => ({ ...s, dx: padding + (i % columns) * (cellW + gap), dy: header + Math.floor(i / columns) * (cellH + gap) }));
+        const rows = Math.ceil(sized.length / columns);
+        return {
+            width: Math.max(own.width, padding * 2 + columns * cellW + (columns - 1) * gap),
+            height: Math.max(own.height, header + rows * cellH + (rows - 1) * gap + padding),
+            parts: placed,
+        };
+    };
+    const place = (id, left, top, sized, parentId = null) => {
+        plan.set(id, { left, top, width: sized.width, height: sized.height, parentId });
+        for (const p of sized.parts) place(p.id, left + p.dx, top + p.dy, p, id);
+    };
+    const root = boxOf(rootId);
+    place(rootId, root.left, root.top, size(rootId));
+    return plan;
+}

package/src/charting/canvas/ArchiHint.js

@@ -0,0 +1,78 @@
+/**
+ * ArchiHint — the hint Archi keeps on a canvas and its boxes (Archi's Hints
+ * view): a title (the `hintTitle` attribute) and content (a `hintContent`
+ * element, HTML). Both live in what an Archi file said that the model does
+ * not use (an `archi` record), so this reads them from any record: a view's
+ * or a box's.
+ *
+ * The content is HTML from a file: it is never inserted as HTML. `text()`
+ * turns it into plain text (paragraphs and line breaks kept, tags dropped,
+ * entities decoded), safe to show as text.
+ */
+export class ArchiHint {
+    /**
+     * The hint in an `archi` record, or null when there is none.
+     * @param {Object|null} archi
+     * @returns {{title: string, content: string, text: string}|null}
+     */
+    static of(archi) {
+        const title = archi?.attributes?.hintTitle ?? '';
+        const content = archi?.elements?.find(e => e.tag === 'hintContent')?.text ?? '';
+        if (!title && !content) return null;
+        return { title, content, text: ArchiHint.text(content) };
+    }
+
+    /**
+     * A copy of an `archi` record with its hint set (or, with no title and no
+     * text, removed): the title as \`hintTitle\`, the text as \`hintContent\` HTML.
+     * @param {Object|null} archi
+     * @param {{title?: string, text?: string}} hint
+     * @returns {Object} the new record
+     */
+    static write(archi, { title = '', text = '' } = {}) {
+        const record = archi ?? {};
+        const attributes = { ...(record.attributes ?? {}) };
+        const elements = (record.elements ?? []).filter(e => e.tag !== 'hintContent');
+        if (title.trim()) attributes.hintTitle = title.trim();
+        else delete attributes.hintTitle;
+        if (text.trim()) elements.push({ tag: 'hintContent', text: ArchiHint.html(text), attributes: {} });
+        return { ...record, attributes, elements };
+    }
+
+    /**
+     * Plain text as hint HTML: a blank line starts a paragraph, a single line
+     * break is a <br>; the text is escaped (what is typed shows as typed).
+     * @param {string} text
+     */
+    static html(text = '') {
+        const escape = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return String(text).replace(/\r\n?/g, '\n').trim().split(/\n\s*\n/)
+            .map(paragraph => `<p>${paragraph.split('\n').map(line => escape(line.trim())).join('<br>')}</p>`)
+            .join('');
+    }
+
+    /**
+     * HTML as plain text: a paragraph, list item, heading or <br> ends a line,
+     * every other tag goes, entities are decoded, runs of blank lines collapse.
+     * @param {string} html
+     */
+    static text(html = '') {
+        const entities = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' };
+        return String(html)
+            .replace(/\r\n?/g, '\n')
+            .replace(/<\s*br\s*\/?>/gi, '\n')
+            .replace(/<\/\s*(p|div|li|h[1-6]|tr)\s*>/gi, '\n')
+            .replace(/<\s*li[^>]*>/gi, '• ')
+            .replace(/<[^>]*>/g, '')
+            .replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (match, name) => {
+                if (name[0] === '#') {
+                    const code = name[1] === 'x' || name[1] === 'X' ? parseInt(name.slice(2), 16) : parseInt(name.slice(1), 10);
+                    return Number.isFinite(code) ? String.fromCodePoint(code) : match;
+                }
+                return entities[name.toLowerCase()] ?? match;
+            })
+            .split('\n').map(line => line.trim()).join('\n')
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+    }
+}

package/src/charting/canvas/CanvasBoxKind.js

@@ -0,0 +1,39 @@
+/**
+ * CanvasBoxKind — one kind of box a view adds besides elements: a canvas's
+ * Block, Sticky and Image, an ArchiMate view's Note and Image (each view
+ * class lists its own, ArchimateView.BOX_KINDS). Its Archi class (when it
+ * has one of its own), size and look. A box is a view object
+ * (ViewObjectInstance); the kind makes its content and appearance.
+ */
+export class CanvasBoxKind {
+    /**
+     * @param {Object} spec
+     * @param {string} spec.key - 'block', 'sticky', 'image'
+     * @param {string} spec.label - As the palette shows it
+     * @param {string} [spec.archiVisualType] - Archi's class ('canvas-model-block', ...); none for a note or picture
+     * @param {number} spec.width
+     * @param {number} spec.height
+     * @param {Object} [spec.appearance] - Fill, line, text position... (an instance's appearance)
+     * @param {string} [spec.shape] - The renderer's shape ('rect', or 'image' for a picture)
+     * @param {string} [spec.icon] - A glyph for menus and palettes
+     */
+    constructor({ key, label, archiVisualType, width, height, appearance = {}, shape = 'rect', icon = '' }) {
+        Object.assign(this, { key, label, archiVisualType, width, height, appearance: Object.freeze({ ...appearance }), shape, icon });
+        Object.freeze(this);
+    }
+
+    /**
+     * A new box's content (ViewObjectInstance content).
+     * @param {string} id
+     * @param {Object} [options]
+     * @param {string} [options.name] - Its text (default: the kind's label)
+     * @param {string} [options.iconUrl] - Its picture (an image's, or a block's)
+     */
+    content(id, { name = this.label, iconUrl } = {}) {
+        return {
+            id, name, label: this.shape === 'image' ? '' : name, shape: this.shape,
+            ...(this.archiVisualType && { archiVisualType: this.archiVisualType }), width: this.width, height: this.height,
+            ...(iconUrl && { iconUrl }),
+        };
+    }
+}

package/src/charting/canvas/CanvasPalette.js

@@ -0,0 +1,49 @@
+import { ArchimatePalette } from '../archimate/ArchimatePalette.js';
+import { CANVAS_BOX_KINDS } from './canvasBoxKinds.js';
+
+/** The data type a dragged canvas palette tile carries: a CanvasBoxKind's key. */
+export const CANVAS_BOX_MIME = 'application/x-canvas-box';
+
+/**
+ * CanvasPalette — the side palette for a canvas: Archi's Block, Sticky and
+ * Image (CANVAS_BOX_KINDS) instead of ArchiMate's element types. A tile is
+ * clicked (onPick gets the kind's key) or dragged onto the canvas
+ * (CANVAS_BOX_MIME). The layout is ArchimatePalette's.
+ */
+export class CanvasPalette extends ArchimatePalette {
+    paletteGroups() {
+        return [{ key: 'canvas', label: 'Canvas', types: [...CANVAS_BOX_KINDS] }];
+    }
+
+    get dragType() {
+        return CANVAS_BOX_MIME;
+    }
+
+    itemKey(kind) {
+        return kind.key;
+    }
+
+    itemTitle(kind) {
+        return kind.label;
+    }
+
+    /** A small picture of a kind: a box in its fill and line (an image: its icon). */
+    preview(kind, size = this.constructor.TILE.icon) {
+        const { fillColor = '#ffffff', strokeColor = '#555555' } = kind.appearance;
+        const doc = this.doc;
+        const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', String(size * 1.4));
+        svg.setAttribute('height', String(size + 4));
+        if (kind.shape === 'image') {
+            const t = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+            for (const [k, v] of Object.entries({ x: size * 0.7, y: size / 2 + 8, 'text-anchor': 'middle', 'font-size': size * 0.7 })) t.setAttribute(k, String(v));
+            t.textContent = kind.icon;
+            svg.appendChild(t);
+            return svg;
+        }
+        const r = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        for (const [k, v] of Object.entries({ x: 2, y: 2, width: size * 1.4 - 4, height: size, fill: fillColor, stroke: strokeColor === 'none' ? '#d8c97a' : strokeColor })) r.setAttribute(k, String(v));
+        svg.appendChild(r);
+        return svg;
+    }
+}

package/src/charting/canvas/CanvasTemplateLibrary.js

@@ -0,0 +1,61 @@
+import { TemplateLibrary } from '../TemplateLibrary.js';
+import { ZipArchive } from '../../zip/ZipArchive.js';
+import { parseArchiFile, archivedFileUrl } from '../../archimateArchive.js';
+import { parseXML, toArchimateModel } from '../../archimateArchiFormat.js';
+import { DEFAULT_CANVAS_TEMPLATES } from './defaultCanvasTemplates.js';
+
+/** The archive entry of an Archi template that holds its model. */
+export const ARCHI_TEMPLATE_MODEL_ENTRY = 'model.archimate';
+/** The archive entry of an Archi template that describes it. */
+export const ARCHI_TEMPLATE_MANIFEST_ENTRY = 'manifest.xml';
+
+/**
+ * CanvasTemplateLibrary — the TemplateLibrary of canvases: entries' views are
+ * CanvasView JSON (a canvas is made from one with
+ * `model.newCanvasFromTemplate(entry.view, name)`), it starts with the
+ * built-in canvases (DEFAULT_CANVAS_TEMPLATES), and it imports Archi's own
+ * template files.
+ */
+export class CanvasTemplateLibrary extends TemplateLibrary {
+    static STORAGE_KEY = 'renderengine.canvasTemplates';
+    static DEFAULTS = DEFAULT_CANVAS_TEMPLATES;
+
+    /**
+     * Add the canvases of an Archi template (`.archicanvas`, `.architemplate`):
+     * a zip of a manifest (name, description, thumbnail) and the template's
+     * model, itself an Archi file. Every canvas in it becomes an entry; a
+     * template with one canvas takes the manifest's name.
+     * @param {Uint8Array|ArrayBuffer} bytes
+     * @returns {Array<Object>} the entries added
+     */
+    importArchiTemplate(bytes) {
+        const data = bytes instanceof ArrayBuffer ? new Uint8Array(bytes) : bytes;
+        if (!ZipArchive.isZip(data)) throw new Error('Not an Archi template: it is not a zip archive');
+        const zip = ZipArchive.read(data);
+        const modelBytes = zip.get(ARCHI_TEMPLATE_MODEL_ENTRY);
+        if (!modelBytes) throw new Error(`Not an Archi template: it has no ${ARCHI_TEMPLATE_MODEL_ENTRY}`);
+        const manifest = CanvasTemplateLibrary._readManifest(zip);
+
+        const model = toArchimateModel(parseArchiFile(modelBytes));
+        const canvases = model.views().filter(v => v.constructor.kind === 'canvas');
+        if (!canvases.length) throw new Error('The Archi template has no canvas');
+        const thumbnailBytes = manifest.thumbnail ? zip.get(manifest.thumbnail) : null;
+        const thumbnail = thumbnailBytes ? archivedFileUrl(thumbnailBytes, manifest.thumbnail) : null;
+        const single = canvases.length === 1;
+        return canvases.map(view => this.add({
+            view: view.toJSON(),
+            name: (single && manifest.name) || view.name,
+            description: (single && manifest.description) || view.documentation || '',
+            thumbnail: single ? thumbnail : null,
+        }));
+    }
+
+    /** An Archi template's manifest: name, description and key thumbnail's path. @private */
+    static _readManifest(zip) {
+        const bytes = zip.get(ARCHI_TEMPLATE_MANIFEST_ENTRY);
+        if (!bytes) return {};
+        const root = parseXML(new TextDecoder().decode(bytes));
+        const text = (tag) => root.children.find(c => c.tagName === tag)?.textContent?.replace(/\r\n?/g, '\n').trim() || '';
+        return { name: text('name'), description: text('description'), thumbnail: text('key-thumbnail') || null };
+    }
+}