@peter.prib/renderengine 0.2.4 → 0.2.6

package/src/charting/archimate/ArchimateElementTemplate.js

@@ -1,195 +1,208 @@
-import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
-import { GlyphTemplate } from '../templates/GlyphTemplate.js';
-import { Glyph } from '../glyphs/Glyph.js';
-import { glyphFor } from '../glyphs/index.js';
-import { ArchimateDiagram } from '../diagrams/ArchimateDiagram.js';
-import { LabelHelper } from '../diagrams/LabelHelper.js';
-
-/** Paint a view can set on one occurrence: template property → appearance key (same names). */
-const APPEARANCE = ['fillColor', 'fillOpacity', 'strokeColor', 'strokeWidth', 'textColor', ...TEXT_STYLE_KEYS];
-
-/**
- * ArchimateElementTemplate — one element (or note, or image) on an ArchiMate
- * view, as an editor template. It keeps no copy of its own: position, size,
- * stacking and paint are read from and written to its ElementInstance, and
- * what it looks like comes from the model element through the same
- * enrichment the graph engine uses (ArchimateDiagram.buildNode: layer colour,
- * corner style, notation shape, type badge, label position). So every editor
- * command that moves, resizes, restacks or repaints a template edits the view
- * itself, and its undo does too.
- *
- * The shape is the node's glyph: a box (sharp, rounded or chamfered by
- * aspect) with the type's glyph as a corner badge, or the full notation shape
- * when distinct shapes are on; notes and images draw their own glyph.
- */
-export class ArchimateElementTemplate extends GlyphTemplate {
-    /** ArchiMate notation is not rotated. */
-    static rotatable = false;
-
-    /** The format painter copies its appearance (what the view's instance holds). */
-    static formatKeys = Object.freeze([...APPEARANCE]);
-
-    /**
-     * @param {ElementInstance} instance - What this template shows, and where
-     * @param {ArchimateModel} model
-     * @param {Object} [options]
-     * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options
-     *   (archimateVersion, useDistinctShapes, layerColors, elementWidth, ...)
-     */
-    constructor(instance, model, { nodeOptions = {} } = {}) {
-        super(instance.id, undefined, {});
-        this.instance = instance;
-        this.model = model;
-        this.nodeOptions = nodeOptions;
-    }
-
-    /** State lives on the instance and the model element, not here. @protected */
-    _initState() {}
-
-    /** The element as the ArchiMate notation draws it on this view. */
-    get node() {
-        const projected = this.instance.project(this.model) ?? { id: this.instance.id, name: this.instance.elementId };
-        return ArchimateDiagram.buildNode(projected, this.nodeOptions);
-    }
-
-    get name() { return this.instance.getDisplayName(this.model); }
-    /** Renaming one occurrence labels it on this view; the element's own name is left alone. */
-    set name(value) {
-        const own = this.instance.resolve(this.model)?.name;
-        this.instance.labelOverride = value && value !== own ? value : null;
-    }
-
-    get x() { return this.instance.x; }
-    set x(value) { this.instance.x = value; }
-    get y() { return this.instance.y; }
-    set y(value) { this.instance.y = value; }
-    get zIndex() { return this.instance.zIndex; }
-    set zIndex(value) { this.instance.zIndex = value ?? 0; }
-    get visible() { return this.instance.visible; }
-    set visible(value) { this.instance.visible = value !== false; }
-
-    get width() { return this.node.width; }
-    set width(value) { this._setSize('width', value); }
-    get height() { return this.node.height; }
-    set height(value) { this._setSize('height', value); }
-
-    get fillColor() { return this.node.color; }
-    set fillColor(value) { this._setAppearance('fillColor', value); }
-    get fillOpacity() { return this.instance.appearance.fillOpacity ?? 1; }
-    set fillOpacity(value) { this._setAppearance('fillOpacity', value); }
-    get strokeColor() { return this.node.strokeColor; }
-    set strokeColor(value) { this._setAppearance('strokeColor', value); }
-    get strokeWidth() { return this.node.strokeWidth; }
-    set strokeWidth(value) { this._setAppearance('strokeWidth', value); }
-    get textColor() { return this.instance.appearance.textColor ?? '#222'; }
-    set textColor(value) { this._setAppearance('textColor', value); }
-    get fontFamily() { return this.instance.appearance.fontFamily; }
-    set fontFamily(value) { this._setAppearance('fontFamily', value); }
-    get fontSize() { return this.instance.appearance.fontSize; }
-    set fontSize(value) { this._setAppearance('fontSize', value); }
-    get fontWeight() { return this.instance.appearance.fontWeight; }
-    set fontWeight(value) { this._setAppearance('fontWeight', value); }
-    get fontStyle() { return this.instance.appearance.fontStyle; }
-    set fontStyle(value) { this._setAppearance('fontStyle', value); }
-    get textDecoration() { return this.instance.appearance.textDecoration; }
-    set textDecoration(value) { this._setAppearance('textDecoration', value); }
-    get textAlign() { return this.instance.appearance.textAlign; }
-    set textAlign(value) { this._setAppearance('textAlign', value); }
-    get textPosition() { return this.instance.appearance.textPosition; }
-    set textPosition(value) { this._setAppearance('textPosition', value); }
-
-    /**
-     * What this occurrence sets itself for a property (undefined when it shows
-     * the element's own), for commands that must undo to "unset".
-     */
-    ownProperty(key) {
-        if (APPEARANCE.includes(key)) return this.instance.appearance[key];
-        if (key === 'width' || key === 'height') return this.instance.size[key];
-        if (key === 'name') return this.instance.labelOverride ?? undefined;
-        return this[key];
-    }
-
-    /** undefined puts the occurrence back on the element's own value. @private */
-    _setSize(key, value) {
-        if (value === undefined) delete this.instance.size[key];
-        else this.instance.size = { ...this.instance.size, [key]: value };
-    }
-
-    /** @private */
-    _setAppearance(key, value) {
-        if (!APPEARANCE.includes(key)) throw new TypeError(`Not an appearance property: ${key}`);
-        if (value === undefined) delete this.instance.appearance[key];
-        else this.instance.appearance = { ...this.instance.appearance, [key]: value };
-    }
-
-    glyph() {
-        return glyphFor(this.node.shape);
-    }
-
-    glyphContext() {
-        const node = this.node;
-        return Glyph.context({
-            R: Math.max(node.width, node.height) / 2,
-            size: { w: node.width, h: node.height },
-            color: node.color,
-            cornerStyle: node.cornerStyle,
-            strokeColor: node.strokeColor,
-            strokeWidth: node.strokeWidth,
-            icon: node.icon,
-            iconUrl: node.iconUrl,
-            ownFill: this.instance.appearance.fillColor ?? null,
-        });
-    }
-
-    /**
-     * The type badge in the top-right corner: its glyph, or an icon (text or
-     * image). As in the graph engine, a notation shape gets no glyph badge
-     * (buildNode leaves iconShape unset) but keeps an icon the element sets.
-     */
-    decorations(ctx) {
-        const node = this.node;
-        const { w, h } = ctx;
-        if (node.iconShape) {
-            const badge = Math.max(10, Math.round(Math.min(w, h) * 0.3));
-            const inset = badge / 2 + 3;
-            const parts = glyphFor(node.iconShape).parts(Glyph.context({
-                R: badge / 2, size: { w: badge, h: badge * 0.78 }, color: 'none', strokeColor: node.strokeColor || '#000000', strokeWidth: 1,
-            }));
-            return [Glyph.group([parts], { transform: `translate(${w / 2 - inset},${-h / 2 + inset})`, 'pointer-events': 'none' })];
-        }
-        if (node.icon || node.iconUrl) {
-            const size = Math.max(12, Math.round(Math.min(w, h) * 0.3));
-            const bx = w / 2 - (size / 2 + 2), by = -h / 2 + (size / 2 + 2);
-            return [node.iconUrl
-                ? Glyph.image(node.iconUrl, bx - size / 2, by - size / 2, size, size, { 'pointer-events': 'none' })
-                : Glyph.text(node.icon, bx, by, { fill: node.strokeColor || '#fff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: `${size}px`, 'pointer-events': 'none' })];
-        }
-        return [];
-    }
-
-    /** The name inside the box (wrapped, top-left) or below a notation shape; images have none. */
-    _renderLabel(g, doc) {
-        const node = this.node;
-        if (node.shape === 'image') return;
-        const text = (x, y, content, attrs) => {
-            const t = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
-            for (const [k, v] of Object.entries({ x, y, 'pointer-events': 'none', 'font-family': 'sans-serif', ...attrs })) t.setAttribute(k, String(v));
-            t.textContent = content;
-            g.appendChild(t);
-        };
-        const { width: w, height: h } = node;
-        const inside = (node.labelPosition || (node.shape === 'note' ? 'inside' : 'below')) === 'inside';
-        if (inside) {
-            const font = TextStyle.svgAttributes(this.textStyle, { defaultPixels: 10 });
-            const PAD = 6, FONT_SIZE = font['font-size'], LINE_HEIGHT = Math.round(FONT_SIZE * 1.2);
-            const lines = LabelHelper.wrapLabelLines(this.name, w - PAD * 2, FONT_SIZE, h - PAD * 2, LINE_HEIGHT);
-            // Top left unless the occurrence says otherwise, as in Archi.
-            const at = TextStyle.block(this.textStyle, { left: this.x - w / 2, right: this.x + w / 2, top: this.y - h / 2, bottom: this.y + h / 2 },
-                lines.length, { pixels: FONT_SIZE, lineHeight: LINE_HEIGHT, pad: PAD });
-            lines.forEach((line, i) => text(at.x, at.baseline + i * LINE_HEIGHT, line,
-                { ...font, fill: this.textColor, 'font-size': `${FONT_SIZE}px`, 'text-anchor': at.textAnchor }));
-        } else {
-            text(this.x, this.y + h / 2 + 9, this.name, { fill: '#333', 'font-size': '9px', 'text-anchor': 'middle' });
-        }
-    }
-}
+import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
+import { GlyphTemplate } from '../templates/GlyphTemplate.js';
+import { Glyph } from '../glyphs/Glyph.js';
+import { glyphFor } from '../glyphs/index.js';
+import { ArchimateDiagram } from '../diagrams/ArchimateDiagram.js';
+import { LabelHelper } from '../diagrams/LabelHelper.js';
+
+/** Paint a view can set on one occurrence: template property → appearance key (same names). */
+const APPEARANCE = ['fillColor', 'fillOpacity', 'strokeColor', 'strokeWidth', 'textColor', ...TEXT_STYLE_KEYS];
+
+/**
+ * ArchimateElementTemplate — one element (or note, or image) on an ArchiMate
+ * view, as an editor template. It keeps no copy of its own: position, size,
+ * stacking and paint are read from and written to its ElementInstance, and
+ * what it looks like comes from the model element through the same
+ * enrichment the graph engine uses (ArchimateDiagram.buildNode: layer colour,
+ * corner style, notation shape, type badge, label position). So every editor
+ * command that moves, resizes, restacks or repaints a template edits the view
+ * itself, and its undo does too.
+ *
+ * The shape is the node's glyph: a box (sharp, rounded or chamfered by
+ * aspect) with the type's glyph as a corner badge, or the full notation shape
+ * when distinct shapes are on; notes and images draw their own glyph.
+ */
+export class ArchimateElementTemplate extends GlyphTemplate {
+    /** ArchiMate notation is not rotated. */
+    static rotatable = false;
+
+    /** The format painter copies its appearance (what the view's instance holds). */
+    static formatKeys = Object.freeze([...APPEARANCE]);
+
+    /**
+     * @param {ElementInstance} instance - What this template shows, and where
+     * @param {ArchimateModel} model
+     * @param {Object} [options]
+     * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options
+     *   (archimateVersion, useDistinctShapes, layerColors, elementWidth, ...)
+     */
+    constructor(instance, model, { nodeOptions = {} } = {}) {
+        super(instance.id, undefined, {});
+        this.instance = instance;
+        this.model = model;
+        this.nodeOptions = nodeOptions;
+    }
+
+    /** State lives on the instance and the model element, not here. @protected */
+    _initState() {}
+
+    /** The element as the ArchiMate notation draws it on this view. */
+    get node() {
+        const projected = this.instance.project(this.model) ?? { id: this.instance.id, name: this.instance.elementId };
+        return ArchimateDiagram.buildNode(projected, this.nodeOptions);
+    }
+
+    get name() { return this.instance.getDisplayName(this.model); }
+    /** Renaming one occurrence labels it on this view; the element's own name is left alone. */
+    set name(value) {
+        const own = this.instance.resolve(this.model)?.name;
+        this.instance.labelOverride = value && value !== own ? value : null;
+    }
+
+    get x() { return this.instance.x; }
+    set x(value) { this.instance.x = value; }
+    get y() { return this.instance.y; }
+    set y(value) { this.instance.y = value; }
+    get zIndex() { return this.instance.zIndex; }
+    set zIndex(value) { this.instance.zIndex = value ?? 0; }
+    get visible() { return this.instance.visible; }
+    set visible(value) { this.instance.visible = value !== false; }
+
+    get width() { return this.node.width; }
+    set width(value) { this._setSize('width', value); }
+    get height() { return this.node.height; }
+    set height(value) { this._setSize('height', value); }
+
+    get fillColor() { return this.node.color; }
+    set fillColor(value) { this._setAppearance('fillColor', value); }
+    get fillOpacity() { return this.instance.appearance.fillOpacity ?? 1; }
+    set fillOpacity(value) { this._setAppearance('fillOpacity', value); }
+    get strokeColor() { return this.node.strokeColor; }
+    set strokeColor(value) { this._setAppearance('strokeColor', value); }
+    get strokeWidth() { return this.node.strokeWidth; }
+    set strokeWidth(value) { this._setAppearance('strokeWidth', value); }
+    get textColor() { return this.instance.appearance.textColor ?? '#222'; }
+    set textColor(value) { this._setAppearance('textColor', value); }
+    get fontFamily() { return this.instance.appearance.fontFamily; }
+    set fontFamily(value) { this._setAppearance('fontFamily', value); }
+    get fontSize() { return this.instance.appearance.fontSize; }
+    set fontSize(value) { this._setAppearance('fontSize', value); }
+    get fontWeight() { return this.instance.appearance.fontWeight; }
+    set fontWeight(value) { this._setAppearance('fontWeight', value); }
+    get fontStyle() { return this.instance.appearance.fontStyle; }
+    set fontStyle(value) { this._setAppearance('fontStyle', value); }
+    get textDecoration() { return this.instance.appearance.textDecoration; }
+    set textDecoration(value) { this._setAppearance('textDecoration', value); }
+    get textAlign() { return this.instance.appearance.textAlign; }
+    set textAlign(value) { this._setAppearance('textAlign', value); }
+    get textPosition() { return this.instance.appearance.textPosition; }
+    set textPosition(value) { this._setAppearance('textPosition', value); }
+
+    /**
+     * What this occurrence sets itself for a property (undefined when it shows
+     * the element's own), for commands that must undo to "unset".
+     */
+    ownProperty(key) {
+        if (APPEARANCE.includes(key)) return this.instance.appearance[key];
+        if (key === 'width' || key === 'height') return this.instance.size[key];
+        if (key === 'name') return this.instance.labelOverride ?? undefined;
+        return this[key];
+    }
+
+    /** undefined puts the occurrence back on the element's own value. @private */
+    _setSize(key, value) {
+        if (value === undefined) delete this.instance.size[key];
+        else this.instance.size = { ...this.instance.size, [key]: value };
+    }
+
+    /** @private */
+    _setAppearance(key, value) {
+        if (!APPEARANCE.includes(key)) throw new TypeError(`Not an appearance property: ${key}`);
+        if (value === undefined) delete this.instance.appearance[key];
+        else this.instance.appearance = { ...this.instance.appearance, [key]: value };
+    }
+
+    glyph() {
+        return glyphFor(this.node.shape);
+    }
+
+    glyphContext() {
+        const node = this.node;
+        return Glyph.context({
+            R: Math.max(node.width, node.height) / 2,
+            size: { w: node.width, h: node.height },
+            color: node.color,
+            cornerStyle: node.cornerStyle,
+            strokeColor: node.strokeColor,
+            strokeWidth: node.strokeWidth,
+            icon: node.icon,
+            iconUrl: node.iconUrl,
+            ownFill: this.instance.appearance.fillColor ?? null,
+        });
+    }
+
+    /**
+     * The badge's size: the same whatever the box's size (as Archi draws it), so
+     * resizing a box, or a parent growing to hold what is dropped in it, leaves
+     * it as it was; only a box too small for it gets a smaller one.
+     */
+    static badgeSize(w, h) {
+        return Math.max(8, Math.min(ArchimateElementTemplate.BADGE_SIZE, Math.round(Math.min(w, h) * 0.4)));
+    }
+
+    /**
+     * The type badge in the top-right corner: its glyph, or an icon (text or
+     * image), a fixed size (badgeSize). As in the graph engine, a notation shape
+     * gets no glyph badge (buildNode leaves iconShape unset) but keeps an icon the element sets.
+     */
+    decorations(ctx) {
+        const node = this.node;
+        const { w, h } = ctx;
+        const fixed = ArchimateElementTemplate.badgeSize(w, h);
+        if (node.iconShape) {
+            const badge = fixed;
+            const inset = badge / 2 + 3;
+            const parts = glyphFor(node.iconShape).parts(Glyph.context({
+                R: badge / 2, size: { w: badge, h: badge * 0.78 }, color: 'none', strokeColor: node.strokeColor || '#000000', strokeWidth: 1,
+            }));
+            return [Glyph.group([parts], { transform: `translate(${w / 2 - inset},${-h / 2 + inset})`, 'pointer-events': 'none' })];
+        }
+        if (node.icon || node.iconUrl) {
+            const size = fixed;
+            const bx = w / 2 - (size / 2 + 2), by = -h / 2 + (size / 2 + 2);
+            return [node.iconUrl
+                ? Glyph.image(node.iconUrl, bx - size / 2, by - size / 2, size, size, { 'pointer-events': 'none' })
+                : Glyph.text(node.icon, bx, by, { fill: node.strokeColor || '#fff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: `${size}px`, 'pointer-events': 'none' })];
+        }
+        return [];
+    }
+
+    /** The name inside the box (wrapped, top-left) or below a notation shape; images have none. */
+    _renderLabel(g, doc) {
+        const node = this.node;
+        if (node.shape === 'image') return;
+        const text = (x, y, content, attrs) => {
+            const t = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+            for (const [k, v] of Object.entries({ x, y, 'pointer-events': 'none', 'font-family': 'sans-serif', ...attrs })) t.setAttribute(k, String(v));
+            t.textContent = content;
+            g.appendChild(t);
+        };
+        const { width: w, height: h } = node;
+        const inside = (node.labelPosition || (node.shape === 'note' ? 'inside' : 'below')) === 'inside';
+        if (inside) {
+            const font = TextStyle.svgAttributes(this.textStyle, { defaultPixels: 10 });
+            const PAD = 6, FONT_SIZE = font['font-size'], LINE_HEIGHT = Math.round(FONT_SIZE * 1.2);
+            const lines = LabelHelper.wrapLabelLines(this.name, w - PAD * 2, FONT_SIZE, h - PAD * 2, LINE_HEIGHT);
+            // Top left unless the occurrence says otherwise, as in Archi.
+            const at = TextStyle.block(this.textStyle, { left: this.x - w / 2, right: this.x + w / 2, top: this.y - h / 2, bottom: this.y + h / 2 },
+                lines.length, { pixels: FONT_SIZE, lineHeight: LINE_HEIGHT, pad: PAD });
+            lines.forEach((line, i) => text(at.x, at.baseline + i * LINE_HEIGHT, line,
+                { ...font, fill: this.textColor, 'font-size': `${FONT_SIZE}px`, 'text-anchor': at.textAnchor }));
+        } else {
+            text(this.x, this.y + h / 2 + 9, this.name, { fill: '#333', 'font-size': '9px', 'text-anchor': 'middle' });
+        }
+    }
+}
+
+/** The corner badge's size in pixels (badgeSize). */
+ArchimateElementTemplate.BADGE_SIZE = 16;