@peter.prib/renderengine 0.2.5 → 0.2.7

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;

package/src/charting/datamodel/BianLandscapeReader.js

@@ -0,0 +1,185 @@
+import { BianNotation } from '../../bian.js';
+import { ServiceDomain } from './ServiceDomain.js';
+import { parseArchiFile } from '../../archimateArchive.js';
+import { parseExchangeModel } from '../../archimateExchangeFormat.js';
+import { ZipArchive } from '../../zip/ZipArchive.js';
+
+/** A stereotype as compared: no case, no spaces ('Service Domain' is 'servicedomain'). */
+const plainWord = (text) => String(text ?? '').toLowerCase().replace(/[\s_-]+/g, '');
+
+/**
+ * BianLandscapeReader — service domains from BIAN's published service
+ * landscape, an ArchiMate model (an Archi file or the Exchange Format, as
+ * parseArchiFile / parseExchangeModel give it), rather than retyped.
+ *
+ * BIAN's own model (its v14 landscape) marks each element with a stereotype:
+ * a business area is a Grouping marked BusinessArea, composed of business
+ * domains (Capabilities marked BusinessDomain), each composed of service
+ * domains (Capabilities marked ServiceDomain); other Groupings aggregate
+ * service domains as overlays (a value chain, a release wave). Where the file
+ * keeps the stereotypes (an Archi specialization, or a "Stereotype" property:
+ * `stereotypeKeys`), they say which element is which: a service domain's
+ * business domain is the container marked so, its area the one that holds that.
+ * Without them it goes by structure: a service domain is a service-domain-type
+ * element nothing of those types sits inside, its nearest container its
+ * business domain and the outermost its area.
+ *
+ * What contains what: a composition from the container to what it holds before
+ * an aggregation (an overlay's), and failing both, a box drawn inside another's
+ * in a view. A service domain's functional pattern is the one realizing it (an
+ * element named as a BIAN pattern, as BIAN's model has them), else a property
+ * (`patternKeys`); its asset a property (`assetKeys`). A pattern BIAN lacks is
+ * left for the model check to report.
+ */
+export class BianLandscapeReader {
+    /**
+     * @param {Object} [options]
+     * @param {string[]} [options.serviceDomainTypes] - Element types a service domain may be
+     * @param {string[]} [options.containerTypes] - Element types a business area or domain may be
+     * @param {string[]} [options.containmentTypes] - Relationship types from a container to what it holds, the first preferred
+     * @param {{serviceDomain: string, businessDomain: string, businessArea: string}} [options.stereotypes] - BIAN's stereotypes for each
+     * @param {string[]} [options.stereotypeKeys] - Property keys a stereotype may be under
+     * @param {string[]} [options.patternKeys] - Property keys naming its functional pattern
+     * @param {string[]} [options.assetKeys] - Property keys naming the asset it manages
+     */
+    constructor({
+        serviceDomainTypes = ['Capability'],
+        containerTypes = ['Grouping', 'Capability'],
+        containmentTypes = ['CompositionRelationship', 'AggregationRelationship'],
+        stereotypes = { serviceDomain: 'ServiceDomain', businessDomain: 'BusinessDomain', businessArea: 'BusinessArea' },
+        stereotypeKeys = ['Stereotype', 'Stereotypes', 'stereotype', 'stereotypes'],
+        patternKeys = ['Functional Pattern', 'functional pattern', 'FunctionalPattern', 'pattern'],
+        assetKeys = ['Asset Type', 'asset type', 'Asset', 'asset'],
+    } = {}) {
+        Object.assign(this, { serviceDomainTypes, containerTypes, containmentTypes, stereotypes, stereotypeKeys, patternKeys, assetKeys });
+    }
+
+    /**
+     * An ArchiMate model from a file: an Archi file (XML or an archive) or the
+     * Exchange Format, as parseArchiFile / parseExchangeModel give it.
+     * @param {string|Uint8Array|ArrayBuffer} data
+     */
+    static parse(data) {
+        const bytes = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+        if (typeof bytes !== 'string' && ZipArchive.isZip(bytes)) return parseArchiFile(bytes);
+        const text = typeof bytes === 'string' ? bytes : new TextDecoder().decode(bytes);
+        return /opengroup\.org\/xsd\/archimate/.test(text.slice(0, 2000)) ? parseExchangeModel(text) : parseArchiFile(text);
+    }
+
+    /**
+     * Service domain specs (ServiceDomain's), one per service domain in the landscape.
+     * @param {{elements: Array, relationships?: Array, views?: Array}} parsed
+     * @returns {Array<Object>}
+     */
+    read(parsed) {
+        const elements = new Map((parsed.elements ?? []).map(e => [e.id, e]));
+        const containers = this.containers(parsed, elements);
+        const stereotypeOf = this._stereotypes(parsed);
+        const is = (id, which) => stereotypeOf(elements.get(id)).includes(plainWord(this.stereotypes[which]));
+        const name = (id) => elements.get(id)?.name ?? '';
+        const marked = [...elements.keys()].some(id => is(id, 'serviceDomain'));
+        let found;
+        if (marked) {
+            // Marked so, or (as some in BIAN's own model are not) a service-domain-type element in a business domain.
+            const isServiceDomain = (e) => is(e.id, 'serviceDomain') || (this.serviceDomainTypes.includes(e.type)
+                && !is(e.id, 'businessDomain') && !is(e.id, 'businessArea') && (containers.get(e.id) ?? []).some(c => is(c, 'businessDomain')));
+            found = [...elements.values()].filter(isServiceDomain).map(e => {
+                const domain = (containers.get(e.id) ?? []).find(c => is(c, 'businessDomain'));
+                const area = [...(containers.get(domain) ?? []), ...(containers.get(e.id) ?? [])].find(c => is(c, 'businessArea'));
+                return [e, area ? name(area) : '', domain ? name(domain) : ''];
+            });
+        } else {
+            const holdsAny = new Set([...containers.values()].flat());
+            found = [...elements.values()].filter(e => this.serviceDomainTypes.includes(e.type) && !holdsAny.has(e.id)).map(e => {
+                const chain = [];
+                for (let at = containers.get(e.id)?.[0]; at && !chain.includes(at); at = containers.get(at)?.[0]) chain.push(at);
+                return [e, chain.length ? name(chain[chain.length - 1]) : '', chain.length > 1 ? name(chain[0]) : ''];
+            });
+        }
+        // A model may hold copies of one service domain (BIAN's has some, for other diagrams): the placed one is it.
+        const placed = new Set(found.filter(([, , domain]) => domain).map(([e]) => plainWord(e.name)));
+        const seen = new Set();
+        found = found.filter(([e, , domain]) => {
+            const key = plainWord(e.name);
+            if (seen.has(key) || (!domain && placed.has(key))) return false;
+            if (domain || !placed.has(key)) seen.add(key);
+            return true;
+        });
+        const realizedBy = this._patternsRealizing(parsed, elements);
+        return found.map(([e, businessArea, businessDomain]) => {
+            const pattern = realizedBy.get(e.id) ?? this._property(e, this.patternKeys);
+            return {
+                kind: ServiceDomain.kind,
+                id: e.id,
+                name: e.name ?? '',
+                ...(e.documentation && { description: e.documentation }),
+                businessArea, businessDomain,
+                asset: this._property(e, this.assetKeys) ?? '',
+                pattern: BianNotation.findPattern(pattern)?.name ?? pattern ?? '',
+            };
+        });
+    }
+
+    /**
+     * What each element sits in (child id -> its containers, the likeliest
+     * first): by the containment relationships, a type's before the next's
+     * (composition before aggregation), then by being drawn inside a container
+     * in a view.
+     */
+    containers(parsed, elements = new Map((parsed.elements ?? []).map(e => [e.id, e]))) {
+        const isContainer = (id) => this.containerTypes.includes(elements.get(id)?.type);
+        const of = new Map();
+        const add = (child, container) => {
+            if (!elements.has(child) || child === container) return;
+            const list = of.get(child) ?? [];
+            if (!list.includes(container)) of.set(child, [...list, container]);
+        };
+        for (const type of this.containmentTypes) {
+            for (const r of parsed.relationships ?? []) if (r.type === type && isContainer(r.source)) add(r.target, r.source);
+        }
+        const walk = (visuals, container) => {
+            for (const v of visuals ?? []) {
+                const id = v.archimateElement;
+                if (id && container) add(id, container);
+                walk(v.children, id && isContainer(id) ? id : container);
+            }
+        };
+        for (const view of parsed.views ?? []) walk(view.children, null);
+        return of;
+    }
+
+    /** An element's stereotypes (compared plainly): its Archi specialization's name, and any stereotype property. @private */
+    _stereotypes(parsed) {
+        const profiles = new Map((parsed.archi?.elements ?? []).filter(e => e.tag === 'profile').map(p => [p.attributes?.id, p.attributes?.name]));
+        return (element) => {
+            if (!element) return [];
+            const profile = element.archi?.attributes?.profiles;
+            return [
+                ...(profile ? String(profile).split(/\s+/).map(id => profiles.get(id)).filter(Boolean) : []),
+                ...String(this._property(element, this.stereotypeKeys) ?? '').split(/[,;|]/),
+            ].map(plainWord).filter(Boolean);
+        };
+    }
+
+    /** Each service domain's pattern by what realizes it: an element named as a BIAN functional pattern. @private */
+    _patternsRealizing(parsed, elements) {
+        const patternOf = new Map();
+        for (const r of parsed.relationships ?? []) {
+            if (r.type !== 'RealizationRelationship' || patternOf.has(r.target)) continue;
+            const pattern = BianNotation.findPattern(elements.get(r.source)?.name);
+            if (pattern) patternOf.set(r.target, pattern.name);
+        }
+        return patternOf;
+    }
+
+    /** The first of some property keys an element has a value for. @private */
+    _property(element, keys) {
+        const props = element.properties ?? {};
+        const pairs = Array.isArray(props) ? props.map(p => [p.key, p.value]) : Object.entries(props);
+        for (const key of keys) {
+            const hit = pairs.find(([k, v]) => k === key && v);
+            if (hit) return String(hit[1]).trim();
+        }
+        return null;
+    }
+}