@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/templates/DocumentTemplate.js

@@ -0,0 +1,32 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleQuad } from './outline.js';
+
+/** DocumentTemplate — page with a wavy bottom edge (two quadratic bezier halves). */
+export class DocumentTemplate extends Template {
+    static defaults = { width: 120, height: 70 };
+
+    get labelAnchor() { return { x: this.x, y: this.y - 12 }; }
+
+    /** [start, control, end] of each wave half, right to left. */
+    _wave() {
+        const { x, left: L, right: R, bottom: B } = this;
+        const a = Math.min(this.height * 0.12, 10);
+        const c1 = [(x + R) / 2, B - 3 * a];
+        const mid = [x, B - a];
+        // `T` reflects the previous control point through the joint.
+        const c2 = [2 * mid[0] - c1[0], 2 * mid[1] - c1[1]];
+        return [[[R, B - a], c1, mid], [mid, c2, [L, B - a]]];
+    }
+
+    outline() {
+        const [first, second] = this._wave();
+        return [[this.left, this.top], [this.right, this.top], first[0], ...sampleQuad(...first), ...sampleQuad(...second)];
+    }
+
+    shapeElements(doc) {
+        const [[start, c1, mid], [, , end]] = this._wave();
+        const d = `M ${this.left} ${this.top} H ${this.right} V ${start[1]} Q ${c1.join(' ')} ${mid.join(' ')} T ${end.join(' ')} Z`;
+        return [svgEl('path', this.paint({ d }), doc)];
+    }
+}

package/src/charting/templates/EllipseTemplate.js

@@ -0,0 +1,15 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleArc } from './outline.js';
+
+export class EllipseTemplate extends Template {
+    static defaults = { width: 120, height: 70 };
+
+    outline() {
+        return sampleArc(this.x, this.y, this.width / 2, this.height / 2, 0, 2 * Math.PI, 72);
+    }
+
+    shapeElements(doc) {
+        return [svgEl('ellipse', this.paint({ cx: this.x, cy: this.y, rx: this.width / 2, ry: this.height / 2 }), doc)];
+    }
+}

package/src/charting/templates/FinalStateTemplate.js

@@ -0,0 +1,12 @@
+import { CircleTemplate } from './CircleTemplate.js';
+import { svgEl } from './svg.js';
+
+/** FinalStateTemplate — UML final node: ring around a filled disc. */
+export class FinalStateTemplate extends CircleTemplate {
+    static defaults = { width: 30, height: 30, fillColor: '#ffffff' };
+
+    shapeElements(doc) {
+        const inner = svgEl('circle', { cx: this.x, cy: this.y, r: this.radius * 0.6, fill: this.strokeColor }, doc);
+        return [...super.shapeElements(doc), inner];
+    }
+}

package/src/charting/templates/GlyphTemplate.js

@@ -0,0 +1,47 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { Glyph } from '../glyphs/Glyph.js';
+import { glyphToSvg } from '../glyphs/glyphSvg.js';
+
+/**
+ * GlyphTemplate — a template drawn by a Glyph (src/charting/glyphs), so the
+ * editor's shape is the same drawing the graph engine makes for that notation.
+ * Lines attach to the glyph's own outline.
+ *
+ * A subclass names its glyph and drawing context; it may add decorations
+ * (badges, marks) drawn over the glyph, centred on the shape.
+ */
+export class GlyphTemplate extends Template {
+    /** The glyph that draws this shape. @abstract */
+    glyph() {
+        throw new Error(`${this.constructor.name} must implement glyph()`);
+    }
+
+    /** The glyph's drawing context: this shape's size and paint. */
+    glyphContext() {
+        return Glyph.context({
+            R: Math.max(this.width, this.height) / 2,
+            size: { w: this.width, h: this.height },
+            color: this.fillColor,
+            strokeColor: this.strokeColor,
+            strokeWidth: this.strokeWidth,
+        });
+    }
+
+    outline() {
+        return this.glyph().outline(this.glyphContext()).map(([px, py]) => [this.x + px, this.y + py]);
+    }
+
+    shapeElements(doc) {
+        const ctx = this.glyphContext();
+        const g = svgEl('g', { transform: `translate(${this.x},${this.y})` }, doc);
+        g.appendChild(glyphToSvg(this.glyph().parts(ctx), doc));
+        for (const part of this.decorations(ctx)) g.appendChild(glyphToSvg(part, doc));
+        return [g];
+    }
+
+    /** Extra glyph parts drawn over the shape, centred on (0, 0). */
+    decorations(ctx) {
+        return [];
+    }
+}

package/src/charting/templates/HexagonTemplate.js

@@ -0,0 +1,17 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/**
+ * HexagonTemplate — flat top/bottom with pointed sides (flowchart "preparation").
+ * The point inset tracks the height so wide hexagons keep a sensible angle.
+ */
+export class HexagonTemplate extends PolygonTemplate {
+    static defaults = { width: 120, height: 60 };
+
+    points() {
+        const i = Math.min(this.width / 4, this.height / 2);
+        return [
+            [this.left + i, this.top], [this.right - i, this.top], [this.right, this.y],
+            [this.right - i, this.bottom], [this.left + i, this.bottom], [this.left, this.y],
+        ];
+    }
+}

package/src/charting/templates/LifelineTemplate.js

@@ -0,0 +1,20 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+
+/** LifelineTemplate — sequence-diagram participant: head box above a dashed line. */
+export class LifelineTemplate extends Template {
+    static defaults = { width: 120, height: 280 };
+
+    get headHeight() { return Math.min(40, this.height / 3); }
+
+    get labelAnchor() { return { x: this.x, y: this.top + this.headHeight / 2 - 8 }; }
+
+    shapeElements(doc) {
+        const h = this.headHeight;
+        return [
+            svgEl('rect', { x: this.left, y: this.top, width: this.width, height: this.height, fill: 'transparent' }, doc),
+            svgEl('line', this.line({ x1: this.x, y1: this.top + h, x2: this.x, y2: this.bottom, 'stroke-dasharray': '6 4' }), doc),
+            svgEl('rect', this.paint({ x: this.left, y: this.top, width: this.width, height: h }), doc),
+        ];
+    }
+}

package/src/charting/templates/ManualInputTemplate.js

@@ -0,0 +1,12 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/** ManualInputTemplate — rectangle with a top edge sloping up to the right. */
+export class ManualInputTemplate extends PolygonTemplate {
+    static defaults = { width: 130, height: 60 };
+
+    get labelAnchor() { return { x: this.x, y: this.y + this.height * 0.1 - 8 }; }
+
+    points() {
+        return [[this.left, this.top + this.height * 0.3], [this.right, this.top], [this.right, this.bottom], [this.left, this.bottom]];
+    }
+}

package/src/charting/templates/NoteTemplate.js

@@ -0,0 +1,23 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+
+/** NoteTemplate — sheet with a folded top-right corner (comment / UML note / artifact). */
+export class NoteTemplate extends Template {
+    static defaults = { width: 120, height: 70, fillColor: '#fef9c3' };
+
+    get fold() { return Math.min(14, this.width / 4, this.height / 4); }
+
+    outline() {
+        const { left: L, right: R, top: T, bottom: B, fold: f } = this;
+        return [[L, T], [R - f, T], [R, T + f], [R, B], [L, B]];
+    }
+
+    shapeElements(doc) {
+        const { right: R, top: T, fold: f } = this;
+        const [first, ...rest] = this.outline();
+        return [
+            svgEl('path', this.paint({ d: `M ${first.join(' ')} ${rest.map(p => `L ${p.join(' ')}`).join(' ')} Z` }), doc),
+            svgEl('path', this.line({ d: `M ${R - f} ${T} V ${T + f} H ${R}` }), doc),
+        ];
+    }
+}

package/src/charting/templates/OctagonTemplate.js

@@ -0,0 +1,7 @@
+import { RegularPolygonTemplate } from './RegularPolygonTemplate.js';
+
+/** OctagonTemplate — flat top and bottom edges. */
+export class OctagonTemplate extends RegularPolygonTemplate {
+    static sides = 8;
+    static startAngle = -Math.PI / 8;
+}

package/src/charting/templates/PackageTemplate.js

@@ -0,0 +1,25 @@
+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),
+        ];
+    }
+}

package/src/charting/templates/ParallelogramTemplate.js

@@ -0,0 +1,11 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/** ParallelogramTemplate — flowchart data / input-output. */
+export class ParallelogramTemplate extends PolygonTemplate {
+    static defaults = { width: 130, height: 60 };
+
+    points() {
+        const s = Math.min(this.width * 0.2, this.height * 0.5);
+        return [[this.left + s, this.top], [this.right, this.top], [this.right - s, this.bottom], [this.left, this.bottom]];
+    }
+}

package/src/charting/templates/PentagonTemplate.js

@@ -0,0 +1,5 @@
+import { RegularPolygonTemplate } from './RegularPolygonTemplate.js';
+
+export class PentagonTemplate extends RegularPolygonTemplate {
+    static sides = 5;
+}

package/src/charting/templates/PolygonTemplate.js

@@ -0,0 +1,18 @@
+import { Template } from './Template.js';
+import { svgEl, pointsAttr } from './svg.js';
+
+/** PolygonTemplate — abstract base for shapes whose outline is one closed polygon. */
+export class PolygonTemplate extends Template {
+    /** Outline vertices in canvas coordinates, as [[x, y], ...]. Pure — no DOM. */
+    points() {
+        throw new Error(`${this.constructor.name} must implement points()`);
+    }
+
+    outline() {
+        return this.points();
+    }
+
+    shapeElements(doc) {
+        return [svgEl('polygon', this.paint({ points: pointsAttr(this.points()) }), doc)];
+    }
+}

package/src/charting/templates/PredefinedProcessTemplate.js

@@ -0,0 +1,13 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+import { svgEl } from './svg.js';
+
+/** PredefinedProcessTemplate — rectangle with double vertical side bars (subroutine). */
+export class PredefinedProcessTemplate extends RectangleTemplate {
+    get cornerRadius() { return 0; }
+
+    shapeElements(doc) {
+        const i = Math.min(12, this.width * 0.1);
+        const bar = (x) => svgEl('line', this.line({ x1: x, y1: this.top, x2: x, y2: this.bottom }), doc);
+        return [...super.shapeElements(doc), bar(this.left + i), bar(this.right - i)];
+    }
+}

package/src/charting/templates/RectangleTemplate.js

@@ -0,0 +1,28 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleArc } from './outline.js';
+
+/** RectangleTemplate — box; subclasses vary only the corner radius. */
+export class RectangleTemplate extends Template {
+    get cornerRadius() { return 2; }
+
+    outline() {
+        const r = Math.min(this.cornerRadius, this.width / 2, this.height / 2);
+        if (r < 1) return super.outline();
+        const { left: L, right: R, top: T, bottom: B } = this;
+        const q = Math.PI / 2, n = Math.max(6, Math.ceil(r / 2));
+        return [
+            ...sampleArc(R - r, T + r, r, r, -q, 0, n),
+            ...sampleArc(R - r, B - r, r, r, 0, q, n),
+            ...sampleArc(L + r, B - r, r, r, q, 2 * q, n),
+            ...sampleArc(L + r, T + r, r, r, 2 * q, 3 * q, n),
+        ];
+    }
+
+    shapeElements(doc) {
+        const r = this.cornerRadius;
+        return [svgEl('rect', this.paint({
+            x: this.left, y: this.top, width: this.width, height: this.height, rx: r, ry: r,
+        }), doc)];
+    }
+}

package/src/charting/templates/RegularPolygonTemplate.js

@@ -0,0 +1,21 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/**
+ * RegularPolygonTemplate — n equal sides inscribed in the shape's ellipse, so
+ * it stretches with width/height instead of ignoring the aspect ratio.
+ */
+export class RegularPolygonTemplate extends PolygonTemplate {
+    static defaults = { width: 100, height: 100 };
+    static sides = 0;
+    /** Angle of the first vertex in radians (0 = pointing right). */
+    static startAngle = -Math.PI / 2;
+
+    points() {
+        const { sides, startAngle } = this.constructor;
+        const hw = this.width / 2, hh = this.height / 2;
+        return Array.from({ length: sides }, (_, i) => {
+            const a = startAngle + (i * 2 * Math.PI) / sides;
+            return [this.x + hw * Math.cos(a), this.y + hh * Math.sin(a)];
+        });
+    }
+}

package/src/charting/templates/RoundedRectangleTemplate.js

@@ -0,0 +1,5 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+
+export class RoundedRectangleTemplate extends RectangleTemplate {
+    get cornerRadius() { return Math.min(12, this.width / 4, this.height / 4); }
+}

package/src/charting/templates/StadiumTemplate.js

@@ -0,0 +1,8 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+
+/** StadiumTemplate — fully rounded ends (flowchart terminator). */
+export class StadiumTemplate extends RectangleTemplate {
+    static defaults = { width: 120, height: 50 };
+
+    get cornerRadius() { return Math.min(this.width, this.height) / 2; }
+}

package/src/charting/templates/StarTemplate.js

@@ -0,0 +1,17 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+export class StarTemplate extends PolygonTemplate {
+    static defaults = { width: 100, height: 100 };
+    static spikes = 5;
+    static innerRatio = 0.45;
+
+    points() {
+        const { spikes, innerRatio } = this.constructor;
+        const hw = this.width / 2, hh = this.height / 2;
+        return Array.from({ length: spikes * 2 }, (_, i) => {
+            const r = i % 2 === 0 ? 1 : innerRatio;
+            const a = -Math.PI / 2 + (i * Math.PI) / spikes;
+            return [this.x + hw * r * Math.cos(a), this.y + hh * r * Math.sin(a)];
+        });
+    }
+}

package/src/charting/templates/SwimlaneTemplate.js

@@ -0,0 +1,18 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+import { svgEl } from './svg.js';
+
+/** SwimlaneTemplate — lane / pool / partition: large box with a title band. */
+export class SwimlaneTemplate extends RectangleTemplate {
+    static defaults = { width: 420, height: 160, fillColor: '#f8fafc' };
+
+    get cornerRadius() { return 0; }
+
+    get headerHeight() { return Math.min(26, this.height / 4); }
+
+    get labelAnchor() { return { x: this.x, y: this.top + this.headerHeight / 2 }; }
+
+    shapeElements(doc) {
+        const y = this.top + this.headerHeight;
+        return [...super.shapeElements(doc), svgEl('line', this.line({ x1: this.left, y1: y, x2: this.right, y2: y }), doc)];
+    }
+}

package/src/charting/templates/Template.js

@@ -0,0 +1,208 @@
+import { svgEl } from './svg.js';
+import { rayExitDistance, rotateVector } from './outline.js';
+import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
+
+/**
+ * Template — abstract base for diagram shapes.
+ *
+ * Owns everything shapes have in common: geometry/paint state, the element
+ * group, rotation, label and editor wiring. A subclass supplies only its
+ * outline via shapeElements(), so the canvas and the palette preview are
+ * drawn by the same code and cannot drift apart.
+ *
+ * Geometry is centre-based: (x, y) is the centre of a width x height box.
+ */
+export class Template {
+    /** Per-shape construction defaults; subclasses override. */
+    static defaults = { width: 120, height: 60 };
+
+    /** Whether the editor offers a rotate handle for this kind of shape. */
+    static rotatable = true;
+
+    /** What the format painter copies from a shape and gives to another: its paint and text style. */
+    static formatKeys = Object.freeze(['fillColor', 'strokeColor', 'strokeWidth', 'textColor', ...TEXT_STYLE_KEYS]);
+
+    /**
+     * The shape's format (`formatKeys`), as it holds it: a value it takes from
+     * elsewhere (an ArchiMate shape's layer colour) is left unset, so pasting
+     * it gives the other shape its own default too.
+     * @returns {Object}
+     */
+    format() {
+        const own = typeof this.ownProperty === 'function' ? (k) => this.ownProperty(k) : (k) => this[k];
+        return Object.fromEntries(this.constructor.formatKeys.map(k => [k, own(k)]));
+    }
+
+    constructor(id, name, options = {}) {
+        if (new.target === Template) throw new TypeError('Template is abstract — subclass it');
+        this.id = id;
+        this.rotation = options.rotation ?? 0;
+        this.connections = options.connections || [];
+        this._initState(name, options);
+    }
+
+    /**
+     * Set the name, placement and paint this shape keeps as its own fields. A
+     * subclass that keeps them elsewhere (an ArchiMate element keeps them on
+     * its view instance and model element) overrides this.
+     * @protected
+     */
+    _initState(name, options) {
+        const d = this.constructor.defaults;
+        this.name = name;
+        this.x = options.x ?? 0;
+        this.y = options.y ?? 0;
+        this.zIndex = options.zIndex ?? 0;
+        this.visible = options.visible !== false;
+        this.width = options.width ?? d.width;
+        this.height = options.height ?? d.height;
+        this.fillColor = options.fillColor ?? d.fillColor ?? '#e8f4f8';
+        this.fillOpacity = options.fillOpacity ?? d.fillOpacity ?? 1;
+        this.strokeColor = options.strokeColor ?? d.strokeColor ?? '#333';
+        this.strokeWidth = options.strokeWidth ?? d.strokeWidth ?? 2;
+        this.textColor = options.textColor ?? d.textColor ?? '#333';
+        // Text style (TextStyle): unset ones are left off, so the default applies.
+        for (const key of TEXT_STYLE_KEYS) {
+            const value = options[key] ?? d[key];
+            if (value !== undefined && value !== null && value !== '') this[key] = value;
+        }
+    }
+
+    /** The text style this shape's name is drawn in (TextStyle). */
+    get textStyle() {
+        return Object.fromEntries(TEXT_STYLE_KEYS.map(k => [k, this[k]]).filter(([, v]) => v !== undefined));
+    }
+
+    get left() { return this.x - this.width / 2; }
+    get right() { return this.x + this.width / 2; }
+    get top() { return this.y - this.height / 2; }
+    get bottom() { return this.y + this.height / 2; }
+
+    /**
+     * The visible outline as a closed polygon in unrotated canvas coordinates
+     * (curves sampled). Edges attach to it, so it must match shapeElements().
+     */
+    outline() {
+        return [[this.left, this.top], [this.right, this.top], [this.right, this.bottom], [this.left, this.bottom]];
+    }
+
+    /**
+     * Where a line heading out from the centre in screen direction (dx, dy)
+     * meets the outline, with rotation applied.
+     * @returns {{x: number, y: number}}
+     */
+    boundaryPoint(dx, dy) {
+        const len = Math.hypot(dx, dy);
+        if (!len) return { x: this.x, y: this.y };
+        const ux = dx / len, uy = dy / len;
+        // Rotation preserves length, so the exit distance found in the shape's own
+        // frame is the distance along the on-screen direction too.
+        const [lx, ly] = rotateVector(ux, uy, -this.rotation);
+        const t = rayExitDistance(this.outline(), this.x, this.y, lx, ly);
+        return { x: this.x + ux * t, y: this.y + uy * t };
+    }
+
+    /** Centre of the name text; the z-index line sits just below it. */
+    get labelAnchor() { return { x: this.x, y: this.y - 8 }; }
+
+    /**
+     * SVG nodes forming the outline, positioned in canvas coordinates.
+     * @param {Document} doc
+     * @returns {SVGElement[]}
+     */
+    shapeElements(doc) {
+        throw new Error(`${this.constructor.name} must implement shapeElements()`);
+    }
+
+    /** Fill/stroke attributes for the main outline, merged with `extra`. */
+    paint(extra = {}) {
+        return {
+            fill: this.fillColor,
+            'fill-opacity': this.fillOpacity === 1 ? null : this.fillOpacity,
+            stroke: this.strokeColor,
+            'stroke-width': this.strokeWidth,
+            ...extra,
+        };
+    }
+
+    /** Stroke-only attributes for interior detail lines. */
+    line(extra = {}) {
+        return { fill: 'none', stroke: this.strokeColor, 'stroke-width': Math.max(1, this.strokeWidth - 0.5), ...extra };
+    }
+
+    /** Draw into the editor's element group and wire interaction. */
+    render({ group, editor }) {
+        const g = this.renderElement(group.ownerDocument);
+        editor.attachElementHandlers(this.id, g);
+        group.appendChild(g);
+    }
+
+    /** Build the complete element group (outline + label) without attaching it. */
+    renderElement(doc = document) {
+        const g = svgEl('g', { 'data-id': this.id, 'data-template-id': this.id }, doc);
+        if (this.rotation) g.setAttribute('transform', `rotate(${this.rotation} ${this.x} ${this.y})`);
+        for (const node of this.shapeElements(doc)) g.appendChild(node);
+        this._renderLabel(g, doc);
+        return g;
+    }
+
+    /** Standalone thumbnail of the outline, scaled to fit a size x size box. */
+    renderPreview(size = 40, doc = document) {
+        const pad = this.strokeWidth + 2;
+        const svg = svgEl('svg', {
+            width: size,
+            height: size,
+            viewBox: `${this.left - pad} ${this.top - pad} ${this.width + pad * 2} ${this.height + pad * 2}`,
+            preserveAspectRatio: 'xMidYMid meet',
+        }, doc);
+        for (const node of this.shapeElements(doc)) svg.appendChild(node);
+        return svg;
+    }
+
+    _renderLabel(g, doc) {
+        const { x, y } = this.labelAnchor;
+        const text = (attrs, content) => {
+            const t = svgEl('text', {
+                'text-anchor': 'middle', 'dominant-baseline': 'middle', 'pointer-events': 'none', ...attrs,
+            }, doc);
+            t.textContent = content;
+            g.appendChild(t);
+        };
+        const style = this.textStyle;
+        const font = TextStyle.svgAttributes(style, { defaultPixels: 12 });
+        const zLine = `Z:${this.zIndex || 0}`;
+        if (TextStyle.placesText(style)) {
+            // Placed in the shape's box by its alignment and position (centred, middle where unset).
+            const at = TextStyle.block(style, this, 1, { pixels: font['font-size'], defaults: { textAlign: 'center', textPosition: 'middle' } });
+            const placed = { 'text-anchor': at.textAnchor, 'dominant-baseline': 'auto' };
+            if (this.name) text({ x: at.x, y: at.baseline, ...font, ...placed, fill: this.textColor }, this.name);
+            // Under the name, or over it when the name is at the bottom (so it stays in the shape).
+            const zY = style.textPosition === 'bottom' ? at.baseline - font['font-size'] - 2 : at.baseline + 12;
+            text({ x: at.x, y: zY, 'font-size': 10, fill: '#666', ...placed }, zLine);
+            return;
+        }
+        if (this.name) text({ x, y, ...font, fill: this.textColor }, this.name);
+        // Below the name, however large it is set.
+        text({ x, y: y + Math.max(16, font['font-size'] / 2 + 10), 'font-size': 10, fill: '#666' }, zLine);
+    }
+
+    serialize() {
+        return {
+            id: this.id,
+            name: this.name,
+            x: this.x,
+            y: this.y,
+            zIndex: this.zIndex,
+            visible: this.visible,
+            width: this.width,
+            height: this.height,
+            rotation: this.rotation,
+            fillColor: this.fillColor,
+            fillOpacity: this.fillOpacity,
+            strokeColor: this.strokeColor,
+            strokeWidth: this.strokeWidth,
+            textColor: this.textColor,
+            ...this.textStyle,
+        };
+    }
+}

package/src/charting/templates/TrapezoidTemplate.js

@@ -0,0 +1,11 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/** TrapezoidTemplate — wide top, narrow base (flowchart manual operation). */
+export class TrapezoidTemplate extends PolygonTemplate {
+    static defaults = { width: 130, height: 60 };
+
+    points() {
+        const s = Math.min(this.width * 0.2, this.height * 0.5);
+        return [[this.left, this.top], [this.right, this.top], [this.right - s, this.bottom], [this.left + s, this.bottom]];
+    }
+}

package/src/charting/templates/TriangleTemplate.js

@@ -0,0 +1,12 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/** TriangleTemplate — isosceles, apex up. */
+export class TriangleTemplate extends PolygonTemplate {
+    static defaults = { width: 100, height: 90 };
+
+    get labelAnchor() { return { x: this.x, y: this.y + this.height / 6 - 8 }; }
+
+    points() {
+        return [[this.x, this.top], [this.right, this.bottom], [this.left, this.bottom]];
+    }
+}

package/src/charting/templates/index.js

@@ -0,0 +1,31 @@
+export { Template } from './Template.js';
+export { PolygonTemplate } from './PolygonTemplate.js';
+export { RegularPolygonTemplate } from './RegularPolygonTemplate.js';
+export { RectangleTemplate } from './RectangleTemplate.js';
+export { RoundedRectangleTemplate } from './RoundedRectangleTemplate.js';
+export { StadiumTemplate } from './StadiumTemplate.js';
+export { PredefinedProcessTemplate } from './PredefinedProcessTemplate.js';
+export { ClassTemplate } from './ClassTemplate.js';
+export { ComponentTemplate } from './ComponentTemplate.js';
+export { SwimlaneTemplate } from './SwimlaneTemplate.js';
+export { CircleTemplate } from './CircleTemplate.js';
+export { FinalStateTemplate } from './FinalStateTemplate.js';
+export { EllipseTemplate } from './EllipseTemplate.js';
+export { DiamondTemplate } from './DiamondTemplate.js';
+export { TriangleTemplate } from './TriangleTemplate.js';
+export { PentagonTemplate } from './PentagonTemplate.js';
+export { HexagonTemplate } from './HexagonTemplate.js';
+export { OctagonTemplate } from './OctagonTemplate.js';
+export { StarTemplate } from './StarTemplate.js';
+export { ParallelogramTemplate } from './ParallelogramTemplate.js';
+export { TrapezoidTemplate } from './TrapezoidTemplate.js';
+export { ManualInputTemplate } from './ManualInputTemplate.js';
+export { CylinderTemplate } from './CylinderTemplate.js';
+export { DocumentTemplate } from './DocumentTemplate.js';
+export { NoteTemplate } from './NoteTemplate.js';
+export { CloudTemplate } from './CloudTemplate.js';
+export { ActorTemplate } from './ActorTemplate.js';
+export { PackageTemplate } from './PackageTemplate.js';
+export { BoxTemplate } from './BoxTemplate.js';
+export { DataStoreTemplate } from './DataStoreTemplate.js';
+export { LifelineTemplate } from './LifelineTemplate.js';