@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/archimate/DerivedEdge.js

@@ -0,0 +1,29 @@
+import { Edge } from '../Edge.js';
+
+/**
+ * DerivedEdge — a derived relationship drawn on a view (DerivedRelationships):
+ * one the model implies through a chain of structural relationships but does
+ * not hold. It is shown dotted, labelled with its chain (e.g.
+ * "composition→assignment"), and cannot be selected or edited: it is not in
+ * the model or the view, only drawn from them.
+ */
+export class DerivedEdge extends Edge {
+    /**
+     * @param {Object} derived - As DerivedRelationships.compute gives it: {id, pathSummary, distance, ...}
+     * @param {string} sourceId - The source element's box on the view
+     * @param {string} targetId - The target element's box on the view
+     */
+    constructor(derived, sourceId, targetId) {
+        super(derived.id, sourceId, targetId, { label: derived.pathSummary, lineStyle: 'dotted', endMarker: 'arrow' });
+        this.derived = derived;
+    }
+
+    /** Drawn only: not selectable, movable or deletable. */
+    get editable() {
+        return false;
+    }
+
+    get tooltip() {
+        return `Derived: ${this.derived.pathSummary}`;
+    }
+}

package/src/charting/archimate/DrawioFileFormat.js

@@ -0,0 +1,24 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { toDrawioXML } from '../../archimateDrawio.js';
+
+/**
+ * draw.io (diagrams.net): every view a page, in draw.io's ArchiMate shapes
+ * (archimateDrawio.js). Export only: a draw.io file is a drawing, not a model.
+ */
+export class DrawioFileFormat extends ModelFileFormat {
+    get label() { return 'draw.io (.drawio)'; }
+    get accept() { return '.drawio'; }
+    get fileName() { return 'model.drawio'; }
+    get featureName() { return 'Drawio'; }
+
+    /** A drawing does not come back as a model. */
+    get imports() { return false; }
+
+    recognizes() {
+        return false;
+    }
+
+    export(model) {
+        return { data: toDrawioXML(model), mimeType: 'application/xml' };
+    }
+}

package/src/charting/archimate/ElementFilterRule.js

@@ -0,0 +1,21 @@
+import { EmphasisRule } from '../emphasis/EmphasisRule.js';
+
+/**
+ * ElementFilterRule — a filter's result on an ArchiMate view: shapes of the
+ * model elements it kept are drawn as usual, every other element dimmed.
+ * Notes, groups and canvas boxes are not model elements, and a filter never
+ * dims them. Lines are left as they are.
+ */
+export class ElementFilterRule extends EmphasisRule {
+    /** @param {Iterable<string>} elementIds - The model elements the filter kept */
+    constructor(elementIds) {
+        super();
+        this.elementIds = new Set(elementIds);
+    }
+
+    template(template, editor) {
+        const elementId = template.instance?.elementId;
+        if (!elementId || !editor.model?.getElement?.(elementId)) return null;
+        return this.elementIds.has(elementId) ? null : 'dimmed';
+    }
+}

package/src/charting/archimate/ExchangeFileFormat.js

@@ -0,0 +1,28 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { toArchimateModel, toArchiExport } from '../../archimateArchiFormat.js';
+import { parseExchangeModel, toExchangeXML } from '../../archimateExchangeFormat.js';
+
+/**
+ * The Open Group Exchange Format (.xml), the standard route to other
+ * ArchiMate tools. Only ArchiMate diagrams are written: the format has no
+ * canvases or sketches.
+ */
+export class ExchangeFileFormat extends ModelFileFormat {
+    get label() { return 'Exchange Format (.xml)'; }
+    get accept() { return '.xml'; }
+    get fileName() { return 'model.xml'; }
+    get featureName() { return 'Exchange'; }
+
+    /** An Exchange file names the Open Group's namespace. */
+    recognizes(xml) {
+        return /opengroup\.org\/xsd\/archimate/.test(String(xml).slice(0, 4000));
+    }
+
+    export(model) {
+        return { data: toExchangeXML(...toArchiExport(model)), mimeType: 'application/xml' };
+    }
+
+    import(xml) {
+        return toArchimateModel(parseExchangeModel(xml));
+    }
+}

package/src/charting/archimate/ViewGroupTemplate.js

@@ -0,0 +1,137 @@
+import { GlyphTemplate } from '../templates/GlyphTemplate.js';
+import { Glyph } from '../glyphs/Glyph.js';
+import { TabbedBoxGlyph, TAB_HEIGHT } from '../glyphs/TabbedBoxGlyph.js';
+import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
+
+/** Archi's grey for a group with no fill of its own. */
+export const GROUP_FILL = '#d2d7d7';
+
+/** Paint a group keeps on its layout entry (as an instance keeps its appearance). */
+const APPEARANCE = ['fillColor', 'strokeColor', 'strokeWidth', 'textColor', ...TEXT_STYLE_KEYS];
+
+/**
+ * ViewGroupTemplate — a group drawn on an ArchiMate view (an Archi group), as
+ * an editor template: Archi's box with a name tab. Like
+ * ArchimateElementTemplate it keeps nothing of its own: its bounds, stacking
+ * and paint live in the view's `folderLayout` entry for it (top-left x/y,
+ * width, height, zIndex, appearance), and its name on the model folder it
+ * draws. So the editor's move, resize, restack and repaint commands edit the
+ * view, and undo there. What it contains moves with it
+ * (ArchimateCanvasEditor#containedIn).
+ */
+export class ViewGroupTemplate extends GlyphTemplate {
+    static rotatable = false;
+
+    /** The format painter copies its appearance. */
+    static formatKeys = Object.freeze([...APPEARANCE]);
+
+    /**
+     * @param {string} folderId - The model folder the group draws
+     * @param {ArchimateView} view - Holds its layout entry
+     */
+    constructor(folderId, view) {
+        super(folderId, undefined, {});
+        this.view = view;
+    }
+
+    /** State lives on the view's layout entry and the model folder. @protected */
+    _initState() {}
+
+    /** The view's layout entry for this group. */
+    get layout() {
+        return this.view.folderLayout[this.id];
+    }
+
+    /** The model folder this group draws. */
+    get folder() {
+        return this.view.model.getFolder(this.id);
+    }
+
+    get name() { return this.folder?.name ?? 'Group'; }
+    set name(value) { if (this.folder) this.folder.name = value || 'Group'; }
+
+    // The layout keeps the top-left corner; a template is placed by its centre.
+    get x() { return this.layout.x + this.width / 2; }
+    set x(value) { this.layout.x = value - this.width / 2; }
+    get y() { return this.layout.y + this.height / 2; }
+    set y(value) { this.layout.y = value - this.height / 2; }
+    get width() { return this.layout.width ?? 400; }
+    set width(value) { const x = this.x; this.layout.width = value; this.x = x; }
+    get height() { return this.layout.height ?? 140; }
+    set height(value) { const y = this.y; this.layout.height = value; this.y = y; }
+    get zIndex() { return this.layout.zIndex ?? 0; }
+    set zIndex(value) { this.layout.zIndex = value ?? 0; }
+    get visible() { return true; }
+    set visible(_) {}
+
+    get fillColor() { return this._appearance.fillColor ?? GROUP_FILL; }
+    set fillColor(value) { this._setAppearance('fillColor', value); }
+    get fillOpacity() { return 1; }
+    set fillOpacity(_) {}
+    get strokeColor() { return this._appearance.strokeColor ?? '#5c5c5c'; }
+    set strokeColor(value) { this._setAppearance('strokeColor', value); }
+    get strokeWidth() { return this._appearance.strokeWidth ?? 1; }
+    set strokeWidth(value) { this._setAppearance('strokeWidth', value); }
+    get textColor() { return this._appearance.textColor ?? '#222'; }
+    set textColor(value) { this._setAppearance('textColor', value); }
+    get fontFamily() { return this._appearance.fontFamily; }
+    set fontFamily(value) { this._setAppearance('fontFamily', value); }
+    get fontSize() { return this._appearance.fontSize; }
+    set fontSize(value) { this._setAppearance('fontSize', value); }
+    get fontWeight() { return this._appearance.fontWeight; }
+    set fontWeight(value) { this._setAppearance('fontWeight', value); }
+    get fontStyle() { return this._appearance.fontStyle; }
+    set fontStyle(value) { this._setAppearance('fontStyle', value); }
+    get textDecoration() { return this._appearance.textDecoration; }
+    set textDecoration(value) { this._setAppearance('textDecoration', value); }
+    get textAlign() { return this._appearance.textAlign; }
+    set textAlign(value) { this._setAppearance('textAlign', value); }
+    get textPosition() { return this._appearance.textPosition; }
+    set textPosition(value) { this._setAppearance('textPosition', value); }
+
+    /** What the group sets itself (undefined: the default), for commands that undo to "unset". */
+    ownProperty(key) {
+        if (APPEARANCE.includes(key)) return this._appearance[key];
+        return this[key];
+    }
+
+    /** @private */
+    get _appearance() {
+        return this.layout.appearance ?? {};
+    }
+
+    /** @private */
+    _setAppearance(key, value) {
+        const appearance = { ...this._appearance };
+        if (value === undefined) delete appearance[key];
+        else appearance[key] = value;
+        this.layout.appearance = appearance;
+    }
+
+    glyph() {
+        return new TabbedBoxGlyph();
+    }
+
+    glyphContext() {
+        return Glyph.context({
+            R: Math.max(this.width, this.height) / 2,
+            size: { w: this.width, h: this.height },
+            color: this.fillColor === 'none' ? 'none' : this.fillColor,
+            strokeColor: this.strokeColor === 'none' ? 'none' : this.strokeColor,
+            strokeWidth: this.strokeWidth,
+        });
+    }
+
+    /** The name in the tab, as Archi writes it. */
+    _renderLabel(g, doc) {
+        const font = TextStyle.svgAttributes(this.textStyle, { defaultPixels: 11 });
+        const t = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        const attrs = {
+            x: this.x - this.width / 2 + 6, y: this.y - this.height / 2 + TAB_HEIGHT - 5,
+            'pointer-events': 'none', 'font-family': 'sans-serif', ...font, fill: this.textColor,
+        };
+        for (const [k, v] of Object.entries(attrs)) t.setAttribute(k, String(v));
+        t.textContent = this.name;
+        g.appendChild(t);
+    }
+}

package/src/charting/archimate/ViewLineEdge.js

@@ -0,0 +1,84 @@
+import { Edge } from '../Edge.js';
+import { EDGE_STYLE_PROPERTIES } from '../edgeStyle/EdgeStyleSchema.js';
+
+/** Style keys the line's Archi type bits decide (dashes, arrows). */
+const TYPE_KEYS = ['lineStyle', 'startMarker', 'endMarker'];
+
+/**
+ * ViewLineEdge — a plain line on an ArchiMate view (ViewConnectionInstance: a
+ * canvas connection, or a line from a note), as an editor line. Like
+ * ArchimateEdge it keeps nothing of its own: its ends, label, route and colour
+ * are the line's, so the editor's commands edit the view and undo there. Its
+ * dashes and arrows come from the line's type bits (Archi's) and are not set
+ * here.
+ */
+export class ViewLineEdge extends Edge {
+    /** @param {ViewConnectionInstance} line */
+    constructor(line) {
+        super(line.id, undefined, undefined, {});
+        this.line = line;
+    }
+
+    /** Everything lives on the line. @protected */
+    _initState() {}
+
+    get sourceId() { return this.line.sourceInstanceId; }
+    set sourceId(id) { this.line.sourceInstanceId = id; }
+    get targetId() { return this.line.targetInstanceId; }
+    set targetId(id) { this.line.targetInstanceId = id; }
+
+    get label() { return this.line.label ?? ''; }
+    set label(value) { this.line.label = value || ''; }
+
+    get waypoints() { return this.line.waypoints; }
+    set waypoints(points) { this.line.waypoints = (points ?? []).map(({ x, y }) => ({ x, y })); }
+
+    addWaypoint(x, y, index = this.line.waypoints.length) { this.line.waypoints.splice(index, 0, { x, y }); }
+    removeWaypoint(index) { if (index >= 0 && index < this.line.waypoints.length) this.line.waypoints.splice(index, 1); }
+    moveWaypoint(index, x, y) { if (index >= 0 && index < this.line.waypoints.length) this.line.waypoints[index] = { x, y }; }
+    clearWaypoints() { this.line.waypoints = []; }
+
+    get sourceSide() { return this.line.sourceSide ?? 'auto'; }
+    set sourceSide(side) { this.line.sourceSide = side && side !== 'auto' ? side : undefined; }
+    get targetSide() { return this.line.targetSide ?? 'auto'; }
+    set targetSide(side) { this.line.targetSide = side && side !== 'auto' ? side : undefined; }
+
+    get visible() { return this.line.visible; }
+    set visible(value) { this.line.visible = value !== false; }
+
+    /** Dashes and arrows from the line's type bits, as edge style values. */
+    get typeStyle() {
+        return { lineStyle: this.line.lineStyle, startMarker: this.line.arrowhead('source'), endMarker: this.line.arrowhead('target') };
+    }
+
+    /** Every style property but the dashes and arrows, which the line's type bits decide. */
+    get styleProperties() {
+        return EDGE_STYLE_PROPERTIES.filter(p => !TYPE_KEYS.includes(p.key));
+    }
+
+    /** A plain Edge with this line's route and style. */
+    clone() {
+        return new Edge(this.id, this.sourceId, this.targetId, {
+            label: this.label, waypoints: this.waypoints, sourceSide: this.sourceSide, targetSide: this.targetSide,
+            visible: this.visible, ...this.styleOverrides(),
+        });
+    }
+}
+
+// Style: dashes and arrows from the type bits (read-only), the rest per line on its appearance.
+for (const { key } of EDGE_STYLE_PROPERTIES) {
+    Object.defineProperty(ViewLineEdge.prototype, key, TYPE_KEYS.includes(key)
+        ? {
+            get() { return this.typeStyle[key]; },
+            set() { throw new TypeError(`A plain line's ${key} comes from its type`); },
+            configurable: true,
+        }
+        : {
+            get() { return this.line.appearance[key]; },
+            set(value) {
+                if (value === undefined) delete this.line.appearance[key];
+                else this.line.appearance = { ...this.line.appearance, [key]: value };
+            },
+            configurable: true,
+        });
+}

package/src/charting/archimate/ViewpointRule.js

@@ -0,0 +1,45 @@
+import { EmphasisRule } from '../emphasis/EmphasisRule.js';
+import { ArchimateViewpoints } from '../../archimate.js';
+
+/**
+ * ViewpointRule — an ArchiMate viewpoint on a view: elements of a type the
+ * viewpoint does not allow are faded (mode 'fade') or hidden ('hide'), as
+ * Archi ghosts them. A line between two allowed elements is drawn as usual,
+ * one with a single allowed end faded, and one between two that are not
+ * allowed is hidden. Notes, groups and canvas boxes are not elements, and a
+ * viewpoint leaves them alone.
+ */
+export class ViewpointRule extends EmphasisRule {
+    /**
+     * @param {Object} options
+     * @param {string} options.viewpoint - A viewpoint name ('All' or none: everything is allowed)
+     * @param {'fade'|'hide'} [options.mode]
+     * @param {string} [options.version] - ArchiMate version ('4', '3.2')
+     * @param {Array<Object>} [options.customViewpoints]
+     */
+    constructor({ viewpoint, mode = 'fade', version = '4', customViewpoints = [] }) {
+        super();
+        this.viewpoint = viewpoint && viewpoint !== 'All' ? viewpoint : null;
+        this.mode = mode;
+        this.version = version;
+        this.customViewpoints = customViewpoints;
+        this._allowed = this.viewpoint ? new Set(ArchimateViewpoints.allowedElementTypes(this.viewpoint, version, customViewpoints)) : null;
+    }
+
+    /** Whether a shape is outside the viewpoint: a model element of a type it does not allow. */
+    excludes(template, editor) {
+        if (!this._allowed || !template) return false;
+        const element = editor.model?.getElement?.(template.instance?.elementId);
+        return !!element && !this._allowed.has(element.type);
+    }
+
+    template(template, editor) {
+        if (!this.excludes(template, editor)) return null;
+        return this.mode === 'hide' ? 'hidden' : 'faded';
+    }
+
+    edge(edge, editor) {
+        const out = [edge.sourceId, edge.targetId].filter(id => this.excludes(editor.templates.get(id), editor)).length;
+        return [null, 'faded', 'hidden'][out];
+    }
+}

package/src/charting/archimate/archimateFileFormats.js

@@ -0,0 +1,12 @@
+import { ArchimateCsvFileFormat } from './ArchimateCsvFileFormat.js';
+import { ArchiFileFormat } from './ArchiFileFormat.js';
+import { ExchangeFileFormat } from './ExchangeFileFormat.js';
+import { DrawioFileFormat } from './DrawioFileFormat.js';
+
+/** The file formats an ArchiMate model is exported to and imported from, in File menu order. */
+export const ARCHIMATE_FILE_FORMATS = Object.freeze([
+    new ArchimateCsvFileFormat(),
+    new ArchiFileFormat(),
+    new ExchangeFileFormat(),
+    new DrawioFileFormat(),
+]);

package/src/charting/archimate/archimateNames.js

@@ -0,0 +1,5 @@
+/** Title for a type name: 'business-actor' → 'Business Actor'. */
+export const typeTitle = (name) => name.replace(/(^|-)(\w)/g, (_, dash, c) => (dash ? ' ' : '') + c.toUpperCase());
+
+/** dataTransfer type an ArchiMate palette tile carries: the element type's name. */
+export const ARCHIMATE_TYPE_MIME = 'application/x-archimate-type';

package/src/charting/archimate/csvMapping.js

@@ -0,0 +1,122 @@
+import { ArchimateNotation } from '../../archimate.js';
+import { ArchimateValidator } from '../diagrams/ArchimateValidator.js';
+import { typeTitle } from './archimateNames.js';
+
+/**
+ * A spreadsheet's rows as model elements (the load_csv / importCSV jArchi
+ * scripts): which column holds the name, the type (or one type for every
+ * row), an id, the documentation, which columns are properties, and one
+ * whose cells name elements a row's element is related to. Pure: it plans;
+ * ImportCsvCommand carries the plan out.
+ *
+ * A row whose id (or, without an id column, whose name and type) is an
+ * element the model has updates it rather than making a second; rows that
+ * name the same element are one element.
+ *
+ * Mapping: `{ name, type?, fixedType?, id?, documentation?, properties?: [column],
+ *            related?, relatedKind?, relatedDirection?: 'out'|'in' }`, columns by name.
+ */
+
+/** A type written in a cell ("business-actor", "Business Actor", "business actor") as its name, or null. */
+export function resolveElementType(text, version = '4') {
+    // Archi's CSV writes CamelCase (BusinessActor): a capital after a letter starts a word.
+    const wanted = String(text ?? '').trim().replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace(/[\s_]+/g, '-');
+    if (!wanted) return null;
+    // A title is its name with spaces (Business Actor: business-actor), so one comparison covers both.
+    return ArchimateNotation.elementTypeNames(version).find(t => t === wanted) ?? null;
+}
+
+/**
+ * The plan for importing a table's rows into a model.
+ * @param {{columns, rows}} table - parseCsvTable's
+ * @param {Object} mapping
+ * @param {ArchimateModel} model
+ * @param {{version?: string}} [options]
+ * @returns {{creates: Array<Object>, updates: Array<{element, changes}>, relationships: Array<Object>, problems: Array<{row: number, message: string}>}}
+ *   `row` counts from 2, as a spreadsheet numbers the rows under its header
+ */
+export function planCsvImport({ rows }, mapping, model, { version = '4' } = {}) {
+    const problems = [];
+    const creates = [];
+    const updates = new Map();   // element id -> { element, changes }
+    const byKey = new Map();     // an id, or a type+name, -> the element (existing or planned)
+    const key = (type, name) => `${type} ${String(name).trim().toLowerCase().replace(/\s+/g, ' ')}`;
+    for (const e of model.elements()) { byKey.set(`id ${e.id}`, e); byKey.set(key(e.type, e.name ?? ''), e); }
+    const existingIds = new Set(model.elements().map(e => e.id));
+    const newId = (type, name) => {
+        const base = `${type}-${String(name).trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'element'}`;
+        let id = base, n = 2;
+        while (existingIds.has(id)) id = `${base}-${n++}`;
+        existingIds.add(id);
+        return id;
+    };
+    const rowElement = [];   // per row, the element it names (or null)
+
+    rows.forEach((row, i) => {
+        const at = i + 2;
+        const name = String(row[mapping.name] ?? '').trim();
+        if (!name) { problems.push({ row: at, message: 'no name' }); rowElement.push(null); return; }
+        const typeText = mapping.type ? row[mapping.type] : mapping.fixedType;
+        const type = resolveElementType(typeText, version);
+        if (!type) { problems.push({ row: at, message: `"${typeText ?? ''}" is not an element type` }); rowElement.push(null); return; }
+        const id = mapping.id ? String(row[mapping.id] ?? '').trim() : '';
+        const found = (id && byKey.get(`id ${id}`)) || byKey.get(key(type, name));
+        const documentation = mapping.documentation ? String(row[mapping.documentation] ?? '').trim() : '';
+        const properties = (mapping.properties ?? [])
+            .map(column => ({ name: column, type: 'string', value: String(row[column] ?? '').trim() }))
+            .filter(p => p.value !== '');
+        if (found && !creates.includes(found)) {
+            // An element the model has: what the row says that it does not.
+            const entry = updates.get(found.id) ?? { element: found, changes: {} };
+            if (documentation && documentation !== (found.documentation ?? '')) entry.changes.documentation = documentation;
+            if (properties.length) {
+                const merged = [...(entry.changes.properties ?? found.properties ?? []).map(p => ({ ...p }))];
+                for (const p of properties) {
+                    const same = merged.find(q => (q.name ?? q.key) === p.name);
+                    if (same) same.value = p.value; else merged.push(p);
+                }
+                if (JSON.stringify(merged) !== JSON.stringify(found.properties ?? [])) entry.changes.properties = merged;
+            }
+            if (Object.keys(entry.changes).length) updates.set(found.id, entry);
+            rowElement.push(found);
+            return;
+        }
+        if (found) {   // a later row naming an element planned already: what it adds
+            if (documentation && !found.documentation) found.documentation = documentation;
+            for (const p of properties) if (!found.properties.some(q => q.name === p.name)) found.properties.push(p);
+            rowElement.push(found);
+            return;
+        }
+        const element = { id: id && !existingIds.has(id) ? (existingIds.add(id), id) : newId(type, name), name, type, ...(documentation && { documentation }), properties };
+        creates.push(element);
+        byKey.set(`id ${element.id}`, element);
+        byKey.set(key(type, name), element);
+        rowElement.push(element);
+    });
+
+    // Relationships: each name or id in a row's related cell (several split by ";").
+    const relationships = [];
+    if (mapping.related && mapping.relatedKind) {
+        const named = (text) => byKey.get(`id ${text}`) ?? [...byKey.values()].find(e => (e.name ?? '').trim().toLowerCase() === text.toLowerCase());
+        const have = new Set(model.relationships().map(r => `${r.kind} ${r.source} ${r.target}`));
+        rows.forEach((row, i) => {
+            const element = rowElement[i];
+            if (!element) return;
+            for (const text of String(row[mapping.related] ?? '').split(';').map(t => t.trim()).filter(Boolean)) {
+                const other = named(text);
+                if (!other) { problems.push({ row: i + 2, message: `no element "${text}" to relate to` }); continue; }
+                const [source, target] = mapping.relatedDirection === 'in' ? [other, element] : [element, other];
+                const allowed = ArchimateValidator.allowedKinds(source, target, version);
+                if (mapping.relatedKind !== 'association' && !allowed.includes(mapping.relatedKind)) {
+                    problems.push({ row: i + 2, message: `${typeTitle(source.type)} to ${typeTitle(target.type)}: not ${mapping.relatedKind}` });
+                    continue;
+                }
+                const k = `${mapping.relatedKind} ${source.id} ${target.id}`;
+                if (have.has(k)) continue;
+                have.add(k);
+                relationships.push({ id: `${source.id}-${mapping.relatedKind}-${target.id}`, source: source.id, target: target.id, kind: mapping.relatedKind });
+            }
+        });
+    }
+    return { creates, updates: [...updates.values()], relationships, problems };
+}

package/src/charting/archimate/elementMenuItems.js

@@ -0,0 +1,32 @@
+/**
+ * What can be done with a model element from the model tree, as menu items:
+ * its properties; the views it is on (choosing one shows it there, selected);
+ * adding it to the current view when it is not there; a view of it and what
+ * it relates to. One definition for both editors; each says how it opens a
+ * view, edits, and adds.
+ * @param {Object} element - A model element
+ * @param {Object} host
+ * @param {ArchimateModel} host.model
+ * @param {ArchimateView} [host.view] - The view open now
+ * @param {(element) => void} host.editProperties
+ * @param {(view, instanceId) => void} host.showIn - Open `view` with that box selected
+ * @param {(element) => void} [host.addToView] - Show it on `view` (offered when it is not there)
+ * @returns {Array<Object>} menu items
+ */
+export function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null }) {
+    const placed = model.views()
+        .map(v => ({ view: v, instance: v.elementInstancesFor?.(element.id)?.[0] }))
+        .filter(({ instance }) => instance);
+    const onThisView = placed.find(p => p.view === view);
+    return [
+        { label: 'Properties…', action: () => editProperties(element) },
+        placed.length
+            ? {
+                label: `Show in View (${placed.length})`,
+                items: placed.map(({ view: v, instance }) => ({ label: v.name || v.id, checked: v === view, action: () => showIn(v, instance.id) })),
+            }
+            : { label: 'Show in View (on none)', disabled: true, action: () => {} },
+        ...(addToView && view && !onThisView ? [{ label: `Add to "${view.name || 'this view'}"`, action: () => addToView(element) }] : []),
+        { label: 'Generate View For This', action: () => model.generateView([element.id]) },
+    ];
+}