@peter.prib/renderengine 0.2.5 → 0.2.7

package/src/workspace/parts/DataModelPart.js

@@ -0,0 +1,544 @@
+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 { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
+import { DataModelNotation } from '../../datamodel.js';
+import {
+    DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
+    BianSemanticApiReader, DataType, EnumerationType, StructuredType,
+} from '../../charting/datamodel/index.js';
+import { pickFile } from '../../charting/toolbar/pickFile.js';
+import { ModelFile } from './ModelFile.js';
+import { EditorPart } from './EditorPart.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 the views that are no level (DataModel.OTHER_VIEWS:
+ * Mapping, the levels side by side joined where they map; Service landscape,
+ * the service domains in their business areas and domains, a double-click
+ * seeing the model through one), and its Model menu makes, changes and removes
+ * perspectives and contexts and reads service domains from a BIAN landscape. 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.
+ *
+ * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
+ * editor's model is (ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
+ * • while changed since, and asking before the page is left with changes
+ * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
+ * several models open, a tab each, and with that part's `keep` it is kept in
+ * this browser and backed up (File ▸ This browser), as the modeller's are.
+ *
+ * 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 file it is open from and saved to. */
+        this.file = new ModelFile(this);
+        /** Its id among the models kept in this browser, or null. */
+        this.keepId = spec.keepId ?? null;
+        this._adoptModel(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;
+    }
+
+    // ===== A model saved as a file, kept, backed up =====
+
+    /** Its file formats: the data model's own. */
+    fileFormats() {
+        return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
+    }
+
+    saveFormat() {
+        return this.fileFormats()[0];
+    }
+
+    /** The ModelsPart it is a tab of, or null. */
+    get modelsHost() {
+        return this.ctx?.models ?? null;
+    }
+
+    /** The page it is in. */
+    get document() {
+        return this.container?.ownerDocument ?? globalThis.document;
+    }
+
+    /** What its tab and the page title show: the file's name (or the model's), and • while changed. */
+    get fileLabel() {
+        return this.file.label;
+    }
+
+    /** The model as kept in this browser (ModelFile#keepEntry). */
+    keepEntry() {
+        return this.file.keepEntry();
+    }
+
+    /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
+    replaceModel(model) {
+        this._adoptModel(model);
+        this.perspectiveId = null;
+        this.contextId = null;
+        if (this.mounted) this.render();
+    }
+
+    /** A model opened from a file in a host's new tab (as EditorPart does). */
+    onImported(model) {
+        return EditorPart.prototype.onImported.call(this, model);
+    }
+
+    /** The file or its saved state changed: a ModelsPart's tab follows it. */
+    onFileState() {
+        this.modelsHost?.fileStateChanged?.(this);
+    }
+
+    /** Edit `model`: every change of it shows (• and the title) and is kept. @private */
+    _adoptModel(model) {
+        this._unsubscribeEdits?.();
+        this.model = model;
+        model.markSaved();
+        this._unsubscribeEdits = model.onEdit(() => {
+            this.file.showState();
+            this.modelsHost?.modelEdited?.(this);
+        });
+    }
+
+    mount(host, ctx) {
+        const first = !this.mounted;
+        super.mount(host, ctx);
+        if (first) {
+            this.file.listen();
+            this.file.showState();
+        }
+    }
+
+    /**
+     * File ▸: Open…, Save, Save As…, then with a ModelsPart New model and Close
+     * model, and This browser ▸ (keeping and backups).
+     */
+    fileItems() {
+        const host = this.modelsHost;
+        return EditorPart.tidyMenu([
+            ...this.file.menuItems(),
+            ...(host ? [
+                { separator: true },
+                ...EditorPart.menuGroup('New', [{ label: 'New model', action: () => host.newModel() }, ...(host.baseItems?.() ?? [])]),
+                { label: 'Duplicate model', action: () => host.duplicate(this) },
+                { label: 'Close model', action: () => host.closeModel(this.id) },
+                ...EditorPart.menuGroup('This browser', host.keepItems?.(this) ?? []),
+            ] : []),
+        ]);
+    }
+
+    /** Edit ▸: undo and redo (a merge is one step). */
+    editItems() {
+        const history = this.model.history;
+        return [
+            { label: history.canUndo ? `Undo ${history.undoLabel}` : 'Undo', disabled: !history.canUndo || undefined, action: () => { history.undo(); this._redraw(); } },
+            { label: history.canRedo ? `Redo ${history.redoLabel}` : 'Redo', disabled: !history.canRedo || undefined, action: () => { history.redo(); this._redraw(); } },
+        ];
+    }
+
+    /** Run a model-wide edit (a merge) as one undo step, then redraw. */
+    runModelEdit(command) {
+        if (!command) return null;
+        this.model.history.execute(command);
+        this._changed();
+        this._redraw();
+        return command;
+    }
+
+    /** The entities at the level shown (the concepts in the mapping view). */
+    get entities() {
+        return this.model.level(DataModel.otherView(this.level) ? '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 }),
+            ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
+        };
+    }
+
+    /** See the model through a service domain (an id), at the logical level, where its business objects are. */
+    openServiceDomain(id) {
+        if (!this.model.perspective(id)) return;
+        this.chartOptions.level = 'logical';
+        this.setPerspective(id);
+    }
+
+    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;
+        const host = this.modelsHost;
+        return [
+            new ToolbarMenu('File', () => this.fileItems()),
+            new ToolbarMenu('Edit', () => this.editItems()),
+            ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
+            new ToolbarMenu('Model', () => this.modelItems()),
+            ...(perspectives.length ? [new ToolbarSelect('Perspective',
+                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, 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.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
+            ], () => 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: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
+            { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
+            { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
+            { 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 },
+            ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
+            { 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) },
+            { separator: true },
+            { label: 'Check model…', action: () => this.checkModel() },
+        ];
+    }
+
+    /**
+     * Service domains from BIAN's published service landscape (an ArchiMate
+     * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
+     * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
+     * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
+     * @returns {Promise<Command|null>}
+     */
+    readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
+        let found = 0;
+        return this.readInto({
+            ...options, accept: '.archimate,.xml', what: 'the landscape',
+            command: (bytes, name) => {
+                const specs = reader.read(BianLandscapeReader.parse(bytes));
+                found = specs.length;
+                return this.model.serviceDomainsCommand(specs, `"${name}"`);
+            },
+            nothing: (name) => (found
+                ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
+                : `"${name}" has no service domains (Capabilities with none inside them).`),
+            then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
+        });
+    }
+
+    /**
+     * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
+     * or JSON; BianSemanticApiReader): its control record and behaviour
+     * qualifiers as logical entities, the schemas they use as data types, and
+     * the service domain, as one undo step (DataModel#bringCommand); then the
+     * model is seen through it at the logical level. An entity the model has
+     * by name stays as it is and is used.
+     * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
+     * @returns {Promise<Command|null>}
+     */
+    readSemanticApi({ depth = 1, ...options } = {}) {
+        let read = null;
+        return this.readInto({
+            ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
+            command: (bytes, name) => {
+                const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
+                read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
+                const [sd] = read.serviceDomains;
+                return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
+            },
+            nothing: (name) => `"${name}" brings nothing the model does not have.`,
+            then: () => {
+                // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
+                const [sd] = read.serviceDomains;
+                const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
+                this.chartOptions.level = 'logical';
+                this.perspectiveId = here?.id ?? sd.id;
+            },
+        });
+    }
+
+    /**
+     * Ask for a file, make a command from its bytes, and run it as one undo
+     * step; a file that cannot be read, or brings nothing, is reported.
+     * @param {Object} how
+     * @param {string} how.accept - The file chooser's filter
+     * @param {string} how.what - What is read, for the report ('the landscape')
+     * @param {(bytes: Uint8Array, name: string) => Command|null} how.command
+     * @param {(name: string) => string} how.nothing - The report when the command is null
+     * @param {() => void} [how.then] - What to show once it is run (before the redraw)
+     * @param {(accept: string) => Promise<File|null>} [how.chooseFile]
+     * @param {(message: string) => void} [how.report]
+     * @returns {Promise<Command|null>}
+     */
+    async readInto({ accept, what, command: make, nothing, then = () => {}, chooseFile = null, report = null }) {
+        const doc = this.container?.ownerDocument ?? globalThis.document;
+        const tell = report ?? ((message) => (doc.defaultView ?? globalThis).alert(message));
+        const file = await (chooseFile ?? ((filter) => pickFile(filter, doc)))(accept);
+        if (!file) return null;
+        let command;
+        try {
+            command = make(new Uint8Array(await file.arrayBuffer()), file.name);
+        } catch (err) {
+            tell(`Could not read ${what}: ${err.message}`);
+            return null;
+        }
+        if (!command) {
+            tell(nothing(file.name));
+            return null;
+        }
+        then();
+        this.runModelEdit(command);
+        return command;
+    }
+
+    /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
+    dataTypeItems() {
+        const types = this.model.dataTypes;
+        return [
+            ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
+            ...(types.length ? [
+                { separator: true },
+                { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
+                { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
+                { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
+            ] : []),
+        ];
+    }
+
+    /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
+    editDataType(type, Kind = type?.constructor ?? DataType) {
+        const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, type), (values) => {
+            const spec = Kind.specFrom(values, this.model, type);
+            if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
+            this.chartOptions.level = DataModel.DATA_TYPES;
+            this._changed();
+            this._redraw();
+        });
+    }
+
+    removeDataType(id) {
+        this.model.removeDataType(id);
+        if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
+        this._changed();
+        this._redraw();
+    }
+
+    /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
+    checkModel() {
+        const findings = this.model.checker().run();
+        new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
+        return findings;
+    }
+
+    /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
+    revealFinding(finding) {
+        if (finding.kind === 'perspective') {
+            this.chartOptions.level = 'logical';
+            this.setPerspective(finding.ids[0]);
+        } else if (finding.kind === 'mapping') {
+            this.setLevel(DataModel.MAPPING);
+        } else if (finding.kind === 'data-type') {
+            this.setLevel(DataModel.DATA_TYPES);
+        } else if (finding.level) {
+            this.setLevel(finding.level);
+        }
+        this.menuBar?.render?.();
+    }
+
+    /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
+    editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
+        const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
+            const spec = Kind.specFrom(values, this.model, perspective);
+            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 model. */
+    exportItems() {
+        const name = this.model.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() {
+        if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
+        this._drawnLevel = this.level;
+        super._draw();
+    }
+
+    /**
+     * Keep where the drawing on screen has its boxes and notes: on the level
+     * it shows, or in the mapping view's layout. Returns whether any moved. @private
+     */
+    _keepPlaces() {
+        const pos = this.engine?._graph?.pos;
+        if (!pos || !this._drawnLevel) return false;
+        let moved = false;
+        const place = (p, before, put) => {
+            if (!p || (before && before.x === p.x && before.y === p.y)) return;
+            put({ x: p.x, y: p.y });
+            moved = true;
+        };
+        const other = DataModel.otherView(this._drawnLevel);
+        if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
+        if (other) {
+            for (const [id, p] of pos) {
+                if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; });
+            }
+            return moved;
+        }
+        for (const entity of this.model.level(this._drawnLevel).entities) {
+            place(pos.get(entity.id), entity, (at) => Object.assign(entity, at));
+        }
+        for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
+            const p = pos.get(rule.id);
+            const before = this.model.notePlace(this._drawnLevel, rule);
+            place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at));
+        }
+        return moved;
+    }
+
+    dispose() {
+        this._unsubscribeEdits?.();
+        this.file.restoreTitle();
+        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,
+        };
+    }
+}

package/src/workspace/parts/DiagramEditorPart.js

@@ -4,7 +4,6 @@ import { EditorPart } from './EditorPart.js';
 import { DiagramEditor } from '../../charting/DiagramEditor.js';
 import { MenuBar } from '../../charting/MenuBar.js';
 import { DiagramModel } from '../../charting/diagramModel/index.js';
-import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
 import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
 import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
 import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
@@ -64,15 +63,10 @@ export class DiagramEditorPart extends EditorPart {
         elements.id = 'elements';
         canvas.appendChild(elements);
 
-        const tabs = new ViewTabStrip({
-            orientation: this.tabOrientation,
-            document: doc,
-            onSelect: (id) => model.switchTo(id),
-            menuItems: (id) => this.viewMenu.items(id),
-        }).render(model.views(), model.currentViewId);
+        const tabs = this.viewTabs({ orientation: this.tabOrientation });
 
         // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
-        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px' }).mount(this.container);
+        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
         palette.classList.add('ws-diagram-palette');
         Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
         main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';