@peter.prib/renderengine 0.2.5 → 0.2.6

package/src/datamodel.js

@@ -1,122 +1,132 @@
-// Copyright 2026 Jaroslav Peter Prib, Purveyor of Excellence
-/**
- * Data-modelling notation — deliberately its own file/OO module, same split
- * as src/archimate.js: keeps this domain's vocabulary (levels, notation
- * styles, cardinality) out of RenderEngine itself, queried through the
- * `DataModelNotation` registry rather than flat string-keyed maps.
- *
- * **Three levels, one entity.** A conceptual/logical/physical data model
- * isn't three unrelated diagrams — it's the same entities and relationships
- * shown at increasing fidelity. `dataModelDiagram` (see RenderEngine)
- * expresses that as ONE entity object carrying per-level detail
- * (`entity.logical.attributes`, `entity.physical.attributes`, ...) under a
- * shared `name`/`description` — the same "object" (level-agnostic identity)
- * vs "visual/detail" (this level's own presentation) split archimateDiagram
- * already draws between an element and its diagram — with `options.level`
- * picking which one's on screen. That's the cross-mapping: switching level
- * re-renders the SAME entities/relationships, not a second, separately
- * maintained diagram, so a conceptual entity, its logical attributes, and
- * its physical column types can never drift out of correspondence.
- *
- * **Three notations, one cardinality vocabulary.** A relationship's
- * cardinality at each end is stored once, as a UML-style multiplicity
- * string (`'0..1'|'1'|'0..*'|'*'|'1..*'`) — CARDINALITIES below — and each
- * `NotationStyle` renders it its own way: Chen turns the relationship
- * itself into a diamond-shaped node with a plain text label ('1'/'N') on
- * each connecting edge; Crow's Foot renders it as an arrowhead-style glyph
- * at the entity end (fork for "many", tick for "one", circle for
- * "optional" — see the `crowsfoot-*` markers in SVGRenderer.js); UML shows
- * the multiplicity string itself as a text label near that end
- * (`edge.sourceLabel`/`targetLabel`, a plain graphDiagram feature, not
- * data-model-specific). None of these are pixel-perfect renditions of the
- * real notations' full rule set (Chen's own attribute-oval convention,
- * every crow's-foot optionality combination, UML's aggregation/composition
- * diamonds) — they're a representative, genuinely-readable version of each,
- * the same calibration archimateDiagram's own icons use.
- */
-
-/** One data-modelling abstraction level. See DataModelNotation.levels(). */
-export class DataModelLevel {
-    constructor(name, description) {
-        this.name = name;
-        this.description = description;
-    }
-}
-
-/** The canonical cardinality vocabulary every NotationStyle renders
- *  differently — UML-style multiplicity strings, since they're the only one
- *  of the three notations expressive enough to BE the canonical form
- *  without losing information (Chen/Crow's Foot each collapse some of these
- *  distinctions on purpose). */
-const CARDINALITIES = new Set(['0..1', '1', '0..*', '*', '1..*']);
-
-function chenCardinalityLabel(cardinality) {
-    return cardinality === '1' || cardinality === '0..1' ? '1' : 'N';
-}
-
-const CROWSFOOT_ARROWHEADS = {
-    '1': 'crowsfoot-one',
-    '0..1': 'crowsfoot-one-optional',
-    '1..*': 'crowsfoot-many-mandatory',
-    '0..*': 'crowsfoot-many',
-    '*': 'crowsfoot-many',
-};
-
-/**
- * One drawing technique for entities/relationships — Chen, Crow's Foot, or
- * UML (class-diagram style). `entityShape` picks the graphDiagram node shape
- * (`'rect'` for a plain box, `'table'` for a header + attribute-rows card);
- * `relationshipAsNode` (Chen only) turns a relationship into its own
- * diamond-shaped node with two plain edges instead of one direct edge;
- * `cardinalityArrowhead`/`cardinalityLabel` (each `(cardinality) => value or
- * undefined`) pick how a relationship's own cardinality at one end renders
- * — at most one of the two is ever set for a given notation, the other
- * always returns undefined.
- */
-export class NotationStyle {
-    constructor(name, { entityShape, relationshipAsNode, cardinalityArrowhead, cardinalityLabel }) {
-        this.name = name;
-        this.entityShape = entityShape;
-        this.relationshipAsNode = relationshipAsNode;
-        this.cardinalityArrowhead = cardinalityArrowhead;
-        this.cardinalityLabel = cardinalityLabel;
-    }
-}
-
-const LEVELS = {
-    conceptual: new DataModelLevel('conceptual', 'Entities and their relationships only — no attributes, no keys, no types.'),
-    logical: new DataModelLevel('logical', 'Attributes and keys, still database-agnostic — no column types or engine specifics.'),
-    physical: new DataModelLevel('physical', 'Real column types, keys, and constraints as they exist in an actual database.'),
-};
-
-const NOTATIONS = {
-    chen: new NotationStyle('chen', {
-        entityShape: 'rect',
-        relationshipAsNode: true,
-        cardinalityArrowhead: () => undefined,
-        cardinalityLabel: chenCardinalityLabel,
-    }),
-    crowsfoot: new NotationStyle('crowsfoot', {
-        entityShape: 'table',
-        relationshipAsNode: false,
-        cardinalityArrowhead: (cardinality) => CROWSFOOT_ARROWHEADS[cardinality],
-        cardinalityLabel: () => undefined,
-    }),
-    uml: new NotationStyle('uml', {
-        entityShape: 'table',
-        relationshipAsNode: false,
-        cardinalityArrowhead: () => undefined,
-        cardinalityLabel: (cardinality) => cardinality,
-    }),
-};
-
-export const DataModelNotation = {
-    levels() { return Object.values(LEVELS); },
-    levelNames() { return Object.keys(LEVELS); },
-    level(name) { return LEVELS[name]; },
-    notations() { return Object.values(NOTATIONS); },
-    notationNames() { return Object.keys(NOTATIONS); },
-    notation(name) { return NOTATIONS[name] || NOTATIONS.crowsfoot; },
-    isCardinality(value) { return CARDINALITIES.has(value); },
-    cardinalities() { return [...CARDINALITIES]; },
-};
+// Copyright 2026 Jaroslav Peter Prib, Purveyor of Excellence
+/**
+ * Data-modelling notation — deliberately its own file/OO module, same split
+ * as src/archimate.js: keeps this domain's vocabulary (levels, notation
+ * styles, cardinality) out of RenderEngine itself, queried through the
+ * `DataModelNotation` registry rather than flat string-keyed maps.
+ *
+ * **Three levels, one entity.** A conceptual/logical/physical data model
+ * isn't three unrelated diagrams — it's the same entities and relationships
+ * shown at increasing fidelity. `dataModelDiagram` (see RenderEngine)
+ * expresses that as ONE entity object carrying per-level detail
+ * (`entity.logical.attributes`, `entity.physical.attributes`, ...) under a
+ * shared `name`/`description` — the same "object" (level-agnostic identity)
+ * vs "visual/detail" (this level's own presentation) split archimateDiagram
+ * already draws between an element and its diagram — with `options.level`
+ * picking which one's on screen. That's the cross-mapping: switching level
+ * re-renders the SAME entities/relationships, not a second, separately
+ * maintained diagram, so a conceptual entity, its logical attributes, and
+ * its physical column types can never drift out of correspondence.
+ *
+ * **Three notations, one cardinality vocabulary.** A relationship's
+ * cardinality at each end is stored once, as a UML-style multiplicity
+ * string (`'0..1'|'1'|'0..*'|'*'|'1..*'`) — CARDINALITIES below — and each
+ * `NotationStyle` renders it its own way: Chen turns the relationship
+ * itself into a diamond-shaped node with a plain text label ('1'/'N') on
+ * each connecting edge; Crow's Foot renders it as an arrowhead-style glyph
+ * at the entity end (fork for "many", tick for "one", circle for
+ * "optional" — see the `crowsfoot-*` markers in SVGRenderer.js); UML shows
+ * the multiplicity string itself as a text label near that end
+ * (`edge.sourceLabel`/`targetLabel`, a plain graphDiagram feature, not
+ * data-model-specific). None of these are pixel-perfect renditions of the
+ * real notations' full rule set (Chen's own attribute-oval convention,
+ * every crow's-foot optionality combination, UML's aggregation/composition
+ * diamonds) — they're a representative, genuinely-readable version of each,
+ * the same calibration archimateDiagram's own icons use.
+ */
+
+/** One data-modelling abstraction level. See DataModelNotation.levels(). */
+export class DataModelLevel {
+    constructor(name, description) {
+        this.name = name;
+        this.description = description;
+    }
+
+    /** What a menu calls it ('Conceptual'). */
+    get label() {
+        return this.name.charAt(0).toUpperCase() + this.name.slice(1);
+    }
+}
+
+/** The canonical cardinality vocabulary every NotationStyle renders
+ *  differently — UML-style multiplicity strings, since they're the only one
+ *  of the three notations expressive enough to BE the canonical form
+ *  without losing information (Chen/Crow's Foot each collapse some of these
+ *  distinctions on purpose). */
+const CARDINALITIES = new Set(['0..1', '1', '0..*', '*', '1..*']);
+
+function chenCardinalityLabel(cardinality) {
+    return cardinality === '1' || cardinality === '0..1' ? '1' : 'N';
+}
+
+const CROWSFOOT_ARROWHEADS = {
+    '1': 'crowsfoot-one',
+    '0..1': 'crowsfoot-one-optional',
+    '1..*': 'crowsfoot-many-mandatory',
+    '0..*': 'crowsfoot-many',
+    '*': 'crowsfoot-many',
+};
+
+/**
+ * One drawing technique for entities/relationships — Chen, Crow's Foot, or
+ * UML (class-diagram style). `entityShape` picks the graphDiagram node shape
+ * (`'rect'` for a plain box, `'table'` for a header + attribute-rows card);
+ * `relationshipAsNode` (Chen only) turns a relationship into its own
+ * diamond-shaped node with two plain edges instead of one direct edge;
+ * `cardinalityArrowhead`/`cardinalityLabel` (each `(cardinality) => value or
+ * undefined`) pick how a relationship's own cardinality at one end renders
+ * — at most one of the two is ever set for a given notation, the other
+ * always returns undefined.
+ */
+export class NotationStyle {
+    constructor(name, { label = name, entityShape, relationshipAsNode, cardinalityArrowhead, cardinalityLabel }) {
+        this.name = name;
+        /** What a menu calls it ("Crow's Foot"). */
+        this.label = label;
+        this.entityShape = entityShape;
+        this.relationshipAsNode = relationshipAsNode;
+        this.cardinalityArrowhead = cardinalityArrowhead;
+        this.cardinalityLabel = cardinalityLabel;
+    }
+}
+
+const LEVELS = {
+    conceptual: new DataModelLevel('conceptual', 'Entities and their relationships only — no attributes, no keys, no types.'),
+    logical: new DataModelLevel('logical', 'Attributes and keys, still database-agnostic — no column types or engine specifics.'),
+    physical: new DataModelLevel('physical', 'Real column types, keys, and constraints as they exist in an actual database.'),
+};
+
+const NOTATIONS = {
+    chen: new NotationStyle('chen', {
+        label: 'Chen',
+        entityShape: 'rect',
+        relationshipAsNode: true,
+        cardinalityArrowhead: () => undefined,
+        cardinalityLabel: chenCardinalityLabel,
+    }),
+    crowsfoot: new NotationStyle('crowsfoot', {
+        label: "Crow's Foot",
+        entityShape: 'table',
+        relationshipAsNode: false,
+        cardinalityArrowhead: (cardinality) => CROWSFOOT_ARROWHEADS[cardinality],
+        cardinalityLabel: () => undefined,
+    }),
+    uml: new NotationStyle('uml', {
+        label: 'UML',
+        entityShape: 'table',
+        relationshipAsNode: false,
+        cardinalityArrowhead: () => undefined,
+        cardinalityLabel: (cardinality) => cardinality,
+    }),
+};
+
+export const DataModelNotation = {
+    levels() { return Object.values(LEVELS); },
+    levelNames() { return Object.keys(LEVELS); },
+    level(name) { return LEVELS[name]; },
+    notations() { return Object.values(NOTATIONS); },
+    notationNames() { return Object.keys(NOTATIONS); },
+    notation(name) { return NOTATIONS[name] || NOTATIONS.crowsfoot; },
+    isCardinality(value) { return CARDINALITIES.has(value); },
+    cardinalities() { return [...CARDINALITIES]; },
+};

package/src/diagramCatalog.js

@@ -1,30 +1,35 @@
-/**
- * Single source of truth for "what diagram types does RenderEngine support".
- *
- * Mirrors src/chartCatalog.js: the registry is the object-oriented lookup
- * layer over the flat catalog, and `getDiagramCatalogEntry` is the legacy-style
- * helper kept for backward compatibility.
- */
-
-import { DiagramRegistry } from './charting/DiagramRegistry.js';
-import { GraphDiagram } from './charting/diagrams/GraphDiagram.js';
-import { GraphDiagram3D } from './charting/diagrams/GraphDiagram3D.js';
-import { ArchimateDiagram } from './charting/diagrams/ArchimateDiagram.js';
-import { DataModelDiagram } from './charting/diagrams/DataModelDiagram.js';
-import { EbnfDiagram } from './charting/diagrams/EbnfDiagram.js';
-
-export const DIAGRAM_CATALOG = [
-    { key: 'graph', method: 'graphDiagram', DiagramClass: GraphDiagram },
-    { key: 'graph3d', method: 'graphDiagram3D', DiagramClass: GraphDiagram3D },
-    { key: 'archimate', method: 'archimateDiagram', DiagramClass: ArchimateDiagram },
-    { key: 'dataModel', method: 'dataModelDiagram', DiagramClass: DataModelDiagram },
-    { key: 'ebnf', method: 'ebnfDiagram', DiagramClass: EbnfDiagram },
-];
-
-/** Canonical registry instance seeded with the built-in diagram types. */
-export const diagramRegistry = new DiagramRegistry(DIAGRAM_CATALOG);
-
-/** Look up one catalog entry by key, or undefined if the key is unknown. */
-export function getDiagramCatalogEntry(key) {
-    return diagramRegistry.get(key);
-}
+/**
+ * Single source of truth for "what diagram types does RenderEngine support".
+ *
+ * Mirrors src/chartCatalog.js: the registry is the object-oriented lookup
+ * layer over the flat catalog, and `getDiagramCatalogEntry` is the legacy-style
+ * helper kept for backward compatibility.
+ */
+
+import { DiagramRegistry } from './charting/DiagramRegistry.js';
+import { GraphDiagram } from './charting/diagrams/GraphDiagram.js';
+import { GraphDiagram3D } from './charting/diagrams/GraphDiagram3D.js';
+import { ArchimateDiagram } from './charting/diagrams/ArchimateDiagram.js';
+import { DataModelDiagram } from './charting/diagrams/DataModelDiagram.js';
+import { EbnfDiagram } from './charting/diagrams/EbnfDiagram.js';
+
+/**
+ * Each entry: `key`, the RenderEngine `method` that draws it, its `DiagramClass`,
+ * and `args`: the options a registered diagram (RenderEngine#register) keeps its
+ * data in, in the order the method takes them before its options.
+ */
+export const DIAGRAM_CATALOG = [
+    { key: 'graph', method: 'graphDiagram', DiagramClass: GraphDiagram, args: ['nodes', 'edges'] },
+    { key: 'graph3d', method: 'graphDiagram3D', DiagramClass: GraphDiagram3D, args: ['nodes', 'edges'] },
+    { key: 'archimate', method: 'archimateDiagram', DiagramClass: ArchimateDiagram, args: ['elements', 'relationships'] },
+    { key: 'dataModel', method: 'dataModelDiagram', DiagramClass: DataModelDiagram, args: ['entities', 'relationships'] },
+    { key: 'ebnf', method: 'ebnfDiagram', DiagramClass: EbnfDiagram, args: ['rule'] },
+];
+
+/** Canonical registry instance seeded with the built-in diagram types. */
+export const diagramRegistry = new DiagramRegistry(DIAGRAM_CATALOG);
+
+/** Look up one catalog entry by key, or undefined if the key is unknown. */
+export function getDiagramCatalogEntry(key) {
+    return diagramRegistry.get(key);
+}

package/src/index.js

@@ -165,6 +165,7 @@ import { buildAnalysisPanel, buildAnalysisData } from './charting/modelTree/Anal
 import { buildTypeCategoryTree, buildPropertyTree } from './charting/modelTree/buildFilterTrees.js';
 import { DiagramTabs } from './charting/modelTree/DiagramTabs.js';
 import { DataModelNotation, DataModelLevel, NotationStyle } from './datamodel.js';
+import { DataModel, DataModelPerspective, DataModelContext, LevelSchema, LevelMapping } from './charting/datamodel/index.js';
 import {
     ARCHI_VISUAL_OBJECTS, ARCHI_VIEW_TYPES,
     parseXML, parseArchiModel, toRenderEngineModel, toArchimateModel, toArchiXML, fromArchimateView, toArchiExport,
@@ -221,6 +222,7 @@ export {
   RadialLayout, DerivedRelationships, EdgeGeometry,
   buildModelTreePanel, buildAnalysisPanel, buildAnalysisData, buildTypeCategoryTree, buildPropertyTree, DiagramTabs,
   DataModelNotation, DataModelLevel, NotationStyle,
+  DataModel, DataModelPerspective, DataModelContext, LevelSchema, LevelMapping,
   exportElementsCSV, exportRelationshipsCSV, exportModelCSV,
   importElementsCSV, importRelationshipsCSV, importModelCSV,
   parseArchiModel, toArchimateModel, fromArchimateView, toArchiExport,
@@ -2594,7 +2596,10 @@ export class RenderEngine {
         const methodName = chartEntry?.method ?? diagramEntry?.method ?? config.type;
         if (typeof this[methodName] !== 'function') return;
 
-        if (config.options.nodes !== undefined) {
+        if (diagramEntry?.args) {
+            // A diagram takes its data as positional args (its catalog entry names them), then the options.
+            this[methodName](...diagramEntry.args.map(arg => config.options[arg] ?? []), config.options);
+        } else if (config.options.nodes !== undefined) {
             // Graph-shaped registration: two positional data args, not one.
             this[methodName](config.options.nodes, config.options.edges || [], config.options);
         } else {

package/src/workspace/index.js

@@ -56,6 +56,7 @@ export {
     LIGHT_THEME, DARK_THEME, MIDNIGHT_THEME, SEPIA_THEME,
 } from './themes.js';
 export { ChartPart } from './parts/ChartPart.js';
+export { DataModelPart } from './parts/DataModelPart.js';
 export { EditorPart } from './parts/EditorPart.js';
 export { DiagramEditorPart } from './parts/DiagramEditorPart.js';
 export { ArchimateEditorPart } from './parts/ArchimateEditorPart.js';

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -55,6 +55,8 @@ export class ArchimateCanvasPart extends EditorPart {
         this.viewpoint = spec.viewpoint ?? 'All';
         this.viewpointMode = spec.viewpointMode ?? 'fade';
         this.showDerived = !!spec.showDerived;
+        /** Whether a line to a box nested in its source is drawn (Archi leaves it out). */
+        this.showNestedLines = !!spec.showNestedLines;
         this.settings = new SettingsManager();
         // A settings change (Model settings…, a view's properties) redraws the canvas.
         this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
@@ -224,7 +226,7 @@ export class ArchimateCanvasPart extends EditorPart {
             diagramContainerId: canvasId,
             view,
             model,
-            nodeOptions: { archimateVersion: this.version, useDistinctShapes: this.distinctShapes, viewpoint: this.viewpoint, viewpointMode: this.viewpointMode, showDerived: this.showDerived },
+            nodeOptions: { archimateVersion: this.version, useDistinctShapes: this.distinctShapes, viewpoint: this.viewpoint, viewpointMode: this.viewpointMode, showDerived: this.showDerived, showNestedLines: this.showNestedLines },
             chooseKind: (kinds, from, to, options) => this.chooseKind(kinds, from, to, options),
             // The view's settings: background, title, watermark, how invalid relationships show.
             viewSettings: () => this.settings.getEffectiveSettings(this.model.currentView, 'default'),
@@ -234,8 +236,9 @@ export class ArchimateCanvasPart extends EditorPart {
             // Canvas templates: placed on a canvas, saved from its shapes (the browser's library).
             templateMenu: this.templateMenu,
             // Version and distinct shapes (⚙ Settings) change the palette too.
-            onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived }) => {
+            onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived, showNestedLines }) => {
                 this.showDerived = !!showDerived;
+                this.showNestedLines = !!showNestedLines;
                 this.version = archimateVersion;
                 this.distinctShapes = !!useDistinctShapes;
                 this.viewpoint = viewpoint;

package/src/workspace/parts/ChartPart.js

@@ -94,10 +94,15 @@ export class ChartPart extends Part {
         // The renderer is sized at construction, so a resize means a new engine.
         this.canvasHost.textContent = '';
         this.engine = new RenderEngine(this.canvasHost, { rendererType: this.rendererType });
-        this.engine.register(this.chartId, this.chartType, this.chartOptions);
+        this.engine.register(this.chartId, this.chartType, this.drawOptions());
         this.engine.refreshChart(this.chartId);
     }
 
+    /** What is drawn: the part's options (its data among them). A subclass that draws something made from them says so. */
+    drawOptions() {
+        return this.chartOptions;
+    }
+
     /** Append a point to a bounded window — see REFERENCE.md's streaming section. */
     addDataPoint(pointOrFactory, opts) {
         this.engine?.addDataPoint(this.chartId, pointOrFactory, opts);

package/src/workspace/parts/DataModelPart.js

@@ -0,0 +1,234 @@
+import { ChartPart } from './ChartPart.js';
+import { el } from '../dom.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { DataModelNotation } from '../../datamodel.js';
+import { DataModel, DataModelPerspective, DataModelContext } from '../../charting/datamodel/index.js';
+import { downloadPng, downloadSvg } from '../../exportImage.js';
+
+/**
+ * DataModelPart — a data model (DataModel, drawn by dataModelDiagram) in a
+ * pane: its conceptual, logical and physical levels, each its own schema, and
+ * how they map; seen through a perspective (whose concepts, under whose names)
+ * read in a context (what they mean here, the rules that hold, where and
+ * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
+ * of them, Level offering Mapping (the levels side by side, joined where they
+ * map), and its Model menu makes, changes and removes perspectives and
+ * contexts. Boxes and notes stay where they were dragged. Export ▸ saves the
+ * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
+ * ChartPart's.
+ *
+ * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
+ * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
+ * — the model as DataModel takes it (or `entities`/`relationships` in the older
+ * one-entity form); `perspective`/`context` the ids chosen; `level` default
+ * 'logical' ('mapping' for the mapping view), `notation` default 'crowsfoot';
+ * `options` anything else dataModelDiagram takes (editable, resizable by default).
+ */
+export class DataModelPart extends ChartPart {
+    static type = 'data-model';
+
+    constructor(spec = {}) {
+        const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
+        super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
+        /** The levels, their mappings, perspectives and contexts. */
+        this.model = new DataModel(spec);
+        /** The ids chosen, or null. */
+        this.perspectiveId = perspective;
+        this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
+        /** The level the drawing on screen is of (where a drag is kept). */
+        this._drawnLevel = level;
+    }
+
+    /** The entities at the level shown (the concepts in the mapping view). */
+    get entities() {
+        return this.model.level(this.level === DataModel.MAPPING ? 'conceptual' : this.level).entities;
+    }
+    get level() { return this.chartOptions.level; }
+    get notation() { return this.chartOptions.notation; }
+    /** The perspective chosen (DataModelPerspective), or null. */
+    get perspective() { return this.model.perspective(this.perspectiveId); }
+    /** The context chosen (DataModelContext), or null. */
+    get context() { return this.model.context(this.contextId); }
+
+    /** Show another level ('conceptual', 'logical', 'physical'), or how they map ('mapping'). */
+    setLevel(level) {
+        this.chartOptions.level = level;
+        this._redraw();
+    }
+
+    /** Draw the model in another notation ('chen', 'crowsfoot', 'uml'). */
+    setNotation(notation) {
+        this.chartOptions.notation = notation;
+        this._redraw();
+    }
+
+    /** See the model through a perspective (an id; null: the whole schema), in the context it is read in, if it names one. */
+    setPerspective(id) {
+        this.perspectiveId = id || null;
+        const own = this.perspective?.context;
+        if (own) this.contextId = own;
+        this._redraw();
+    }
+
+    /** Read the model in a context (an id; null: the schema's own descriptions). */
+    setContext(id) {
+        this.contextId = id || null;
+        this._redraw();
+    }
+
+    /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
+    drawOptions() {
+        return { ...this.chartOptions, ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }) };
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+        const toolbar = this.container.appendChild(el({}));
+        super.render();
+        Object.assign(this.canvasHost.style, { flex: '1 1 auto', minHeight: '0', height: 'auto' });
+        this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.container.ownerDocument }).render();
+    }
+
+    /**
+     * Model ▸ (perspectives and contexts of one's own), Perspective and Context
+     * (when the model has any; the context's scope beside them), Level (each
+     * level from DataModelNotation, then Mapping) and Notation, and Export ▸.
+     */
+    menuBarItems() {
+        const { perspectives, contexts } = this.model;
+        return [
+            new ToolbarMenu('Model', () => this.modelItems()),
+            ...(perspectives.length ? [new ToolbarSelect('Perspective',
+                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.name, p.description])],
+                () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
+            ...(contexts.length ? [
+                new ToolbarSelect('Context',
+                    () => [['', 'None'], ...this.model.contexts.map(c => [c.id, c.name, c.description])],
+                    () => this.contextId ?? '', (v) => this.setContext(v)),
+                new ToolbarText(() => this.context?.scope ?? ''),
+            ] : []),
+            new ToolbarSelect('Level', () => [
+                ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
+                [DataModel.MAPPING, 'Mapping', 'The levels side by side, joined where one realises another'],
+            ], () => this.level, (v) => this.setLevel(v)),
+            new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
+            new ToolbarMenu('Export', () => this.exportItems()),
+        ];
+    }
+
+    /** Model ▸: make, change or remove a perspective or a context (the one chosen). */
+    modelItems() {
+        return [
+            { label: 'New perspective…', action: () => this.editPerspective(null) },
+            { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
+            { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
+            { separator: true },
+            { label: 'New context…', action: () => this.editContext(null) },
+            { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
+            { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
+        ];
+    }
+
+    /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
+    editPerspective(perspective) {
+        return this._dialog(perspective ? `Perspective: ${perspective.name}` : 'New perspective', DataModelPerspective.fields(this.model, perspective), (values) => {
+            const spec = DataModelPerspective.specFrom(values, this.model);
+            const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
+            this._changed();
+            this.setPerspective(saved.id);
+        });
+    }
+
+    /** A dialog making a context (none given) or changing one (DataModelContext.fields); applied, it is the one read in. */
+    editContext(context) {
+        return this._dialog(context ? `Context: ${context.name}` : 'New context', DataModelContext.fields(this.model, context), (values) => {
+            const spec = DataModelContext.specFrom(values, this.model, context);
+            const saved = context ? this.model.updateContext(context.id, spec) : this.model.addContext(spec);
+            this._changed();
+            this.setContext(saved.id);
+        });
+    }
+
+    removePerspective(id) {
+        this.model.removePerspective(id);
+        this._changed();
+        this.setPerspective(null);
+    }
+
+    removeContext(id) {
+        this.model.removeContext(id);
+        this._changed();
+        this.setContext(null);
+    }
+
+    /** Open a form (a name is needed). @private */
+    _dialog(title, fields, apply) {
+        return new FormDialog({
+            title, fields, submitLabel: 'Save', idPrefix: 'data-model-',
+            document: this.container?.ownerDocument ?? globalThis.document,
+            validate: ({ name }) => ((name ?? '').trim() ? null : 'Give it a name'),
+            onApply: apply,
+        }).open();
+    }
+
+    /** The perspectives or contexts changed: the toolbar shows them anew. @private */
+    _changed() {
+        if (this.menuBar) this.menuBar.items = this.menuBarItems();
+        this.menuBar?.render?.();
+    }
+
+    /** Export ▸: the picture, as PNG or SVG, named after the part. */
+    exportItems() {
+        const name = this.title || 'data-model';
+        return [
+            { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
+            { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
+        ];
+    }
+
+    /** Redraw now (a choice made), when there is somewhere to draw. @private */
+    _redraw() {
+        if (this.canvasHost) this._draw();
+    }
+
+    /**
+     * Keep where the boxes and notes were dragged (the drawing is made anew each
+     * time): on the level shown, or in the mapping view's own layout. Then draw.
+     */
+    _draw() {
+        const pos = this.engine?._graph?.pos;
+        if (pos && this._drawnLevel) {
+            if (this._drawnLevel === DataModel.MAPPING) {
+                for (const [id, p] of pos) if (id.includes(':')) this.model.mappingLayout[id] = { x: p.x, y: p.y };
+            } else {
+                for (const entity of this.model.level(this._drawnLevel).entities) {
+                    const p = pos.get(entity.id);
+                    if (p) { entity.x = p.x; entity.y = p.y; }
+                }
+                for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
+                    const p = pos.get(rule.id);
+                    if (p) this.model.placeNote(this._drawnLevel, rule, p);
+                }
+            }
+        }
+        this._drawnLevel = this.level;
+        super._draw();
+    }
+
+    dispose() {
+        this.menuBar?.dispose?.();
+        super.dispose();
+    }
+
+    /** The spec again: the model (with where its boxes are), what is chosen, and the other options. */
+    serialize() {
+        const { options, chartType, ...base } = super.serialize();
+        const { level, notation, ...rest } = options;
+        return {
+            ...base, ...this.model.toJSON(),
+            perspective: this.perspectiveId, context: this.contextId, level, notation, options: rest,
+        };
+    }
+}