@datamoc/mw_games 0.36.1 → 0.38.0

package/dist/two-d/presentation/MwlPresentation.js

@@ -0,0 +1,704 @@
+import { Container, Graphics, Sprite } from 'pixi.js';
+import * as Input from '../../core/Input.js';
+import { texture } from '../../assets/loader.js';
+import { Camera } from '../render/Camera.js';
+import { Button } from '../ui/Button.js';
+import { Label } from '../ui/Label.js';
+import { Bar } from '../ui/Bar.js';
+import { Window } from '../ui/Window.js';
+import { WindowStack } from '../ui/WindowStack.js';
+import { Grid, flowLayout, resolveAnchor } from '../ui/Layout.js';
+import { setTheme, theme } from '../ui/theme.js';
+/**
+ * Instantiates compiled MWL presentation using existing Pixi widgets. The controller owns state
+ * and actions; context switches restyle the same views without rebuilding procedural adapters.
+ * Kept off the root barrel so a game pays for this runtime only when it imports the subpath.
+ *
+ * @example
+ * ```ts
+ * import { MwlPresentation } from '@datamoc/mw_games/two-d/presentation';
+ * import type { CompiledPresentation } from '@datamoc/mw_games/mwl/presentation';
+ * import { Node2D } from '@datamoc/mw_games/two-d/render';
+ * declare const data: CompiledPresentation;
+ * const ui = new MwlPresentation(data, 'game', { parent: new Node2D(), state: () => ({}), actions: {} });
+ * ui.resize(800, 600);
+ * ui.update(1 / 60);
+ * ui.destroy();
+ * ```
+ */
+export class MwlPresentation {
+    constructor(data, sceneId, options) {
+        this.root = new Container();
+        this.nodes = new Map();
+        this.roots = [];
+        this.appliedTheme = null;
+        this.context = '';
+        this.tokens = {};
+        this.viewport = { width: 0, height: 0 };
+        this.focused = null;
+        this.destroyed = false;
+        this.state = {};
+        this.inputListener = (action) => this.handleAction(action);
+        this.data = data;
+        this.options = options;
+        if (!Object.hasOwn(data.scenes, sceneId))
+            throw new Error(`unknown presentation scene "${sceneId}"`);
+        const scene = data.scenes[sceneId];
+        for (const action of data.manifest.actions)
+            if (!Object.hasOwn(options.actions, action))
+                throw new Error(`missing presentation action "${action}"`);
+        for (const adapter of data.manifest.adapters ?? [])
+            if (!options.adapters || !Object.hasOwn(options.adapters, adapter))
+                throw new Error(`missing presentation adapter "${adapter}"`);
+        this.baseTheme = scene.theme;
+        this.previousTheme = theme();
+        const cameraNode = scene.children.find((node) => node.kind === 'scene_camera');
+        this.cameraProperties = cameraNode?.properties ?? {};
+        this.cameraPath = cameraNode ? `${sceneId}/${cameraNode.id}` : null;
+        this.camera = new Camera({ zoom: Number(cameraNode?.properties.zoom ?? 1) });
+        this.camera.snapTo(Number(cameraNode?.properties.x ?? 0), Number(cameraNode?.properties.y ?? 0));
+        this.windows = new WindowStack();
+        this.root.addChild(this.camera.world);
+        options.parent.addChild(this.root);
+        try {
+            this.applyTheme();
+            for (const node of scene.children) {
+                if (node.kind === 'scene_camera')
+                    continue;
+                const parent = node.kind === 'scene_layer' && node.properties.space === 'world' ? this.camera.world : this.root;
+                this.roots.push(this.createRecord(node, `${sceneId}/${node.id}`, parent));
+            }
+            this.root.addChild(this.windows);
+            Input.onAction.add(this.inputListener);
+            this.update();
+            this.unsubscribe = options.subscribe?.(() => this.update());
+        }
+        catch (error) {
+            this.destroy();
+            throw error;
+        }
+    }
+    /** Looks up an instance by its compiled path; repeats add their stable key to the path. */
+    get(id) {
+        if (!this.destroyed && id === this.cameraPath)
+            return this.camera.world;
+        return this.nodes.get(id)?.view ?? null;
+    }
+    get focusId() {
+        return this.focused?.path ?? null;
+    }
+    get activeContext() {
+        return this.context;
+    }
+    get palette() {
+        return this.tokens;
+    }
+    setContext(context = '') {
+        this.assertAlive();
+        if (context && !Object.hasOwn(this.data.contexts, context))
+            throw new Error(`unknown presentation context "${context}"`);
+        if (context === this.context)
+            return;
+        this.context = context;
+        this.applyTheme();
+        for (const node of this.nodes.values())
+            node.values = {};
+        this.update();
+    }
+    applyTheme() {
+        const context = this.data.contexts[this.context];
+        const definition = this.data.themes[context?.theme ?? this.baseTheme];
+        this.tokens = { ...definition.tokens, ...context?.tokens };
+        const p = definition.properties;
+        setTheme({
+            ...this.previousTheme,
+            padding: Number(p.padding ?? this.previousTheme.padding),
+            spacing: Number(p.spacing ?? this.previousTheme.spacing),
+            font: {
+                ...this.previousTheme.font,
+                family: p.font_family ?? this.previousTheme.font.family,
+                size: Number(p.font_size ?? this.previousTheme.font.size),
+            },
+            color: {
+                ...this.previousTheme.color,
+                panelFill: this.tokens.panel,
+                text: this.tokens.text,
+                textHighlight: this.tokens.accent,
+                selection: this.tokens.selection,
+            },
+        });
+        this.appliedTheme = theme();
+    }
+    update(dt = 0) {
+        this.assertAlive();
+        this.state = this.options.state();
+        let changed = false;
+        for (const node of this.roots)
+            changed = this.refresh(node) || changed;
+        if (this.root.children[this.root.children.length - 1] !== this.windows)
+            this.root.setChildIndex(this.windows, this.root.children.length - 1);
+        if (changed)
+            this.layout();
+        for (const node of this.nodes.values())
+            node.adapter?.update?.(dt, this.state);
+        this.camera.update(dt);
+        this.windows.update(dt);
+        const window = this.windows.top
+            ? [...this.nodes.values()].find((node) => node.view === this.windows.top)
+            : undefined;
+        const candidates = this.focusable(window);
+        if (!this.focused || !candidates.includes(this.focused))
+            this.setFocus(candidates[0] ?? null);
+    }
+    resize(width, height) {
+        this.assertAlive();
+        if (![width, height].every((size) => Number.isFinite(size) && size >= 0))
+            throw new Error('presentation viewport must be finite and nonnegative');
+        this.viewport = { width, height };
+        this.camera.setViewport(width, height);
+        if (this.cameraProperties.fit_width)
+            this.camera.fit(Number(this.cameraProperties.fit_width), Number(this.cameraProperties.fit_height));
+        this.windows.setViewport(width, height);
+        this.layout();
+    }
+    createRecord(definition, path, parent, item) {
+        const node = {
+            definition,
+            path,
+            parent,
+            item,
+            view: null,
+            children: [],
+            properties: {},
+            values: {},
+            width: 0,
+            height: 0,
+            state: 'idle',
+            closed: false,
+            cleanups: [],
+        };
+        if (this.nodes.has(path))
+            throw new Error(`duplicate presentation path "${path}"`);
+        this.nodes.set(path, node);
+        return node;
+    }
+    read(node, name, fallback) {
+        const binding = node.definition.properties[`${name}_binding`];
+        if (!binding)
+            return node.definition.properties[name] === undefined
+                ? fallback
+                : this.coerce(node.definition.properties[name], typeof fallback);
+        const value = binding.startsWith('item.') ? node.item?.[binding.slice(5)] : this.state[binding];
+        if (typeof value !== typeof fallback || (typeof value === 'number' && !Number.isFinite(value)))
+            throw new Error(`${node.path}: invalid binding "${binding}"`);
+        return value;
+    }
+    coerce(value, type) {
+        if (type === 'number')
+            return Number(value);
+        if (type === 'boolean')
+            return value === 'true';
+        return value;
+    }
+    resolveProperties(node) {
+        const base = node.definition.properties;
+        return {
+            ...base,
+            ...this.data.contexts[this.context]?.overrides[node.definition.source],
+            ...this.data.variants[base.variant],
+            ...node.definition.states[node.state],
+        };
+    }
+    refresh(node) {
+        const visible = this.read(node, 'visible', true);
+        if (!visible)
+            node.closed = false;
+        if (node.definition.kind === 'ui_window' && (!visible || node.closed)) {
+            const changed = Boolean(node.view);
+            if (node.view)
+                this.unmount(node);
+            return changed;
+        }
+        let changed = false;
+        if (!node.view) {
+            this.mount(node);
+            changed = true;
+        }
+        if (node.view.visible !== visible) {
+            node.view.visible = visible;
+            changed = true;
+        }
+        if (node.view instanceof Button) {
+            const disabled = this.read(node, 'disabled', false);
+            const selected = this.read(node, 'selected', false);
+            if (disabled !== node.view.disabled) {
+                node.view.setDisabled(disabled);
+                changed = true;
+            }
+            if (selected !== node.view.selected) {
+                node.view.setSelected(selected);
+                changed = true;
+            }
+            if (disabled)
+                node.state = 'disabled';
+            else if (selected)
+                node.state = 'selected';
+            else if (node === this.focused)
+                node.state = 'focused';
+            else if (['disabled', 'selected', 'focused'].includes(node.state))
+                node.state = 'idle';
+        }
+        const properties = this.resolveProperties(node);
+        if (!equalProperties(node.properties, properties)) {
+            node.properties = properties;
+            changed = true;
+        }
+        const values = { visible, alpha: Number(properties.alpha ?? 1) };
+        if (node.view instanceof Button || node.view instanceof Label)
+            values.text = this.read(node, 'text', '');
+        if (node.view instanceof Window)
+            values.title = this.read(node, 'title', '');
+        if (node.view instanceof Bar) {
+            values.value = this.read(node, 'value', 1);
+            values.max = this.read(node, 'max', 1);
+            values.color = this.read(node, 'color', this.token(properties.color_token, 'accent'));
+        }
+        if (!equalProperties(node.values, values)) {
+            node.values = values;
+            changed = true;
+        }
+        if (changed)
+            this.applyProperties(node);
+        if (node.definition.kind === 'ui_repeat')
+            changed = this.reconcile(node) || changed;
+        for (const child of node.children) {
+            child.item = node.item ?? child.item;
+            changed = this.refresh(child) || changed;
+        }
+        return changed;
+    }
+    mount(node) {
+        const p = this.resolveProperties(node);
+        const width = Number(p.width ?? 160), height = Number(p.height ?? 32);
+        switch (node.definition.kind) {
+            case 'ui_label':
+                node.view = new Label({ text: '', color: this.token(p.color_token, 'text') });
+                break;
+            case 'ui_button':
+                node.view = new Button({ width, height, text: '' });
+                break;
+            case 'ui_bar':
+                node.view = new Bar({ width, height: Number(p.height ?? 12) });
+                break;
+            case 'ui_window':
+                node.view = new Window({
+                    width,
+                    height: Number(p.height ?? 200),
+                    title: '',
+                    modal: p.modal !== 'false',
+                    closable: p.closable !== 'false',
+                    closeButton: true,
+                    blocker: true,
+                    anchor: (p.anchor ?? 'center'),
+                });
+                break;
+            default: {
+                if (p.adapter) {
+                    node.adapter = this.options.adapters[p.adapter]({ tokens: this.tokens, properties: p });
+                    node.view = node.adapter.view;
+                }
+                else
+                    node.view = new Container();
+            }
+        }
+        node.parent.addChild(node.view);
+        const childParent = node.view instanceof Window ? node.view.content : node.view;
+        if (node.definition.kind !== 'ui_repeat')
+            for (const child of node.definition.children)
+                node.children.push(this.createRecord(child, `${node.path}/${child.id}`, childParent, node.item));
+        if (node.view instanceof Button) {
+            const button = node.view;
+            const click = () => {
+                this.setFocus(node);
+                this.invoke(node.definition.properties.action, node.item);
+                if (!this.destroyed)
+                    this.update();
+            };
+            button.onClick.add(click);
+            node.cleanups.push(() => button.onClick.remove(click));
+            for (const [event, state] of [
+                ['pointerover', 'hover'],
+                ['pointerout', 'idle'],
+                ['pointerdown', 'pressed'],
+                ['pointerup', 'hover'],
+            ]) {
+                const listener = () => {
+                    node.state = state;
+                    this.update();
+                };
+                button.on(event, listener);
+                node.cleanups.push(() => button.off(event, listener));
+            }
+        }
+        if (node.view instanceof Window) {
+            const window = node.view;
+            window.delegate = { handleAction: (action) => this.navigate(action, node) };
+            const close = () => {
+                node.closed = true;
+                this.unmount(node, false);
+                this.invoke(node.definition.properties.close_action, node.item);
+            };
+            window.onClose.add(close);
+            node.cleanups.push(() => window.onClose.remove(close));
+            this.windows.push(window);
+        }
+    }
+    reconcile(node) {
+        const p = node.definition.properties;
+        const items = this.state[p.items_binding];
+        if (!Array.isArray(items))
+            throw new Error(`${node.path}: collection "${p.items_binding}" must be an array`);
+        const keys = new Set();
+        for (const item of items) {
+            const key = item[p.key];
+            if ((typeof key !== 'string' && typeof key !== 'number') ||
+                (typeof key === 'number' && !Number.isFinite(key)))
+                throw new Error(`${node.path}: invalid repeat key`);
+            const path = `${node.path}/${encodeURIComponent(String(key))}`;
+            if (keys.has(path))
+                throw new Error(`${node.path}: duplicate repeat key "${key}"`);
+            keys.add(path);
+        }
+        const existing = new Map(node.children.map((child) => [child.path.slice(0, child.path.lastIndexOf('/')), child]));
+        const next = [];
+        let changed = false;
+        for (const item of items) {
+            const prefix = `${node.path}/${encodeURIComponent(String(item[p.key]))}`;
+            const template = node.definition.children[0];
+            const child = existing.get(prefix) ?? this.createRecord(template, `${prefix}/${template.id}`, node.view, item);
+            if (!existing.has(prefix))
+                changed = true;
+            existing.delete(prefix);
+            child.item = item;
+            next.push(child);
+        }
+        for (const child of existing.values()) {
+            this.dispose(child);
+            changed = true;
+        }
+        if (next.some((child, i) => child !== node.children[i]))
+            changed = true;
+        node.children = next;
+        return changed;
+    }
+    token(name, fallback) {
+        return this.tokens[name ?? fallback];
+    }
+    applyProperties(node) {
+        const view = node.view, p = node.properties, values = node.values;
+        view.alpha = values.alpha;
+        if (node.definition.kind === 'scene_layer' && !node.adapter) {
+            if (p.image) {
+                if (!node.image) {
+                    node.image = new Sprite(texture(p.image));
+                    view.addChildAt(node.image, 0);
+                }
+                else
+                    node.image.texture = texture(p.image);
+            }
+            else {
+                node.image?.destroy();
+                node.image = undefined;
+            }
+        }
+        if (['ui_container', 'ui_row', 'ui_column', 'ui_grid', 'ui_mount', 'ui_repeat'].includes(node.definition.kind)) {
+            if (p.background_token && !node.background) {
+                node.background = new Graphics();
+                view.addChildAt(node.background, 0);
+            }
+            else if (!p.background_token && node.background) {
+                node.background.destroy();
+                node.background = undefined;
+            }
+        }
+        const translate = this.options.translate ?? ((text) => text);
+        if (view instanceof Label) {
+            view.setText(translate(values.text));
+            view.setColor(this.token(p.color_token, 'text'));
+        }
+        if (view instanceof Button) {
+            view.setText(translate(values.text));
+            view.setColors({
+                text: this.token(p.color_token, 'text'),
+                disabledText: this.token(p.color_token, 'text'),
+                background: this.token(p.background_token, 'panel'),
+                border: this.token(p.border_token, 'accent'),
+                selection: node.definition.states[node.state]?.background_token
+                    ? this.token(p.background_token, 'selection')
+                    : this.tokens.selection,
+            });
+        }
+        if (view instanceof Bar) {
+            view.setValue(values.value, values.max);
+            view.setColor(values.color);
+            view.setBackground(this.token(p.background_token, 'panel'));
+        }
+        if (view instanceof Window) {
+            view.setTitle(translate(values.title));
+            view.setColors({
+                background: this.token(p.background_token, 'panel'),
+                border: this.token(p.border_token, 'accent'),
+                title: this.token(p.color_token, 'accent'),
+            });
+        }
+        node.adapter?.restyle?.({ tokens: this.tokens, properties: p });
+    }
+    layout() {
+        const bounds = { x: 0, y: 0, ...this.viewport };
+        for (const node of this.roots)
+            this.layoutNode(node, node.parent === this.camera.world
+                ? { ...bounds, width: this.camera.view.width, height: this.camera.view.height }
+                : bounds);
+        this.windows.setViewport(this.viewport.width, this.viewport.height);
+    }
+    layoutNode(node, bounds) {
+        const view = node.view;
+        if (!view || !view.visible)
+            return;
+        const p = node.properties;
+        const kind = node.definition.kind;
+        const defaultWidth = view instanceof Button || view instanceof Bar ? 160 : bounds.width;
+        let width = Math.min(Number(p.width ?? defaultWidth), bounds.width);
+        let height = Number(p.height ??
+            (view instanceof Button
+                ? 32
+                : view instanceof Bar
+                    ? 12
+                    : view instanceof Label
+                        ? view.height
+                        : bounds.height));
+        if (view instanceof Window) {
+            width = Math.max(0, Math.min(Number(p.width ?? 300), this.viewport.width - theme().padding * 2));
+            height = Math.max(0, Math.min(Number(p.height ?? 200), this.viewport.height - theme().padding * 2));
+            view.resize(width, height);
+        }
+        else if (view instanceof Button || view instanceof Bar)
+            view.resize(width, height);
+        else if (view instanceof Label) {
+            view.setWrapWidth(width);
+            height = view.height;
+        }
+        const padding = Number(p.padding ?? 0), gap = Number(p.gap ?? 0);
+        const inner = {
+            x: 0,
+            y: 0,
+            width: Math.max(0, width - padding * 2),
+            height: Math.max(0, height - padding * 2),
+        };
+        if (view instanceof Window) {
+            inner.width = view.contentWidth;
+            inner.height = view.contentHeight;
+        }
+        const visible = node.children.filter((child) => child.view?.visible);
+        for (const child of visible)
+            this.layoutNode(child, inner);
+        if (['ui_row', 'ui_repeat'].includes(kind)) {
+            const total = visible.reduce((sum, child) => sum + child.width, 0) + gap * Math.max(0, visible.length - 1);
+            const result = flowLayout(visible, kind === 'ui_row' && p.wrap === 'false' ? Math.max(total, inner.width) : inner.width, { gap, align: p.align });
+            visible.forEach((child, i) => {
+                child.view.position.set(padding + result.positions[i].x, padding + result.positions[i].y);
+            });
+            if (p.height === undefined)
+                height = result.height + padding * 2;
+        }
+        else if (kind === 'ui_column') {
+            let y = padding;
+            for (const child of visible) {
+                child.view.position.set(padding, y);
+                y += child.height + gap;
+            }
+            if (p.height === undefined)
+                height = Math.max(0, y - gap + padding);
+        }
+        else if (kind === 'ui_grid') {
+            const columns = Number(p.columns), rows = Math.ceil(visible.length / columns);
+            const grid = new Grid({
+                columns: Array.from({ length: columns }, () => ({ grow: 1 })),
+                rows: Array.from({ length: rows }, () => ({
+                    size: Math.max(0, ...visible.map((child) => child.height)),
+                })),
+                gap,
+            });
+            visible.forEach((child, i) => {
+                const cell = grid.rect(Math.floor(i / columns), i % columns, inner);
+                this.layoutNode(child, { ...cell, x: cell.x + padding, y: cell.y + padding });
+            });
+            if (p.height === undefined)
+                height =
+                    grid.rowSizes(inner.height).reduce((sum, size) => sum + size, 0) +
+                        gap * Math.max(0, rows - 1) +
+                        padding * 2;
+        }
+        else if (['ui_container', 'ui_mount'].includes(kind) && p.height === undefined) {
+            height = Math.max(0, ...visible.map((child) => child.view.y + child.height)) + padding * 2;
+        }
+        node.width = width;
+        node.height = height;
+        if (node.background) {
+            node.background.clear().rect(0, 0, width, height).fill(this.token(p.background_token, 'panel'));
+            if (p.border_token)
+                node.background.stroke({ color: this.token(p.border_token, 'accent'), width: 1 });
+        }
+        if (node.parent === this.camera.world)
+            view.position.set(Number(p.x ?? 0), Number(p.y ?? 0));
+        else if (!(view instanceof Window)) {
+            const placed = resolveAnchor({
+                anchor: (p.anchor ?? 'top-left'),
+                width,
+                height,
+                offsetX: Number(p.x ?? 0),
+                offsetY: Number(p.y ?? 0),
+            }, bounds);
+            view.position.set(placed.x, placed.y);
+        }
+        node.adapter?.resize?.(width, height);
+    }
+    invoke(action, item) {
+        if (action)
+            this.options.actions[action](item);
+    }
+    isFocusable(node) {
+        if (!(node.view instanceof Button) || node.view.disabled)
+            return false;
+        for (let view = node.view; view; view = view.parent)
+            if (!view.visible)
+                return false;
+        return true;
+    }
+    focusable(window) {
+        const result = [];
+        const visit = (node) => {
+            if (this.isFocusable(node))
+                result.push(node);
+            for (const child of node.children)
+                visit(child);
+        };
+        for (const node of window ? window.children : this.roots)
+            visit(node);
+        return result;
+    }
+    setFocus(node) {
+        if (node === this.focused)
+            return;
+        if (this.focused?.state === 'focused')
+            this.focused.state = 'idle';
+        this.focused = node;
+        if (node && node.state === 'idle')
+            node.state = 'focused';
+    }
+    navigate(action, window) {
+        const nodes = this.focusable(window);
+        if (!nodes.length)
+            return false;
+        let index = nodes.indexOf(this.focused);
+        if (['up', 'left', 'down', 'right', 'next'].includes(action)) {
+            const delta = ['up', 'left'].includes(action) ? -1 : 1;
+            index = index < 0 ? 0 : (index + delta + nodes.length) % nodes.length;
+            this.setFocus(nodes[index]);
+            this.update();
+            return true;
+        }
+        if (action === 'confirm') {
+            const node = nodes[Math.max(0, index)];
+            this.setFocus(node);
+            node.view.onClick.dispatch();
+            this.update();
+            return true;
+        }
+        return false;
+    }
+    /** Offers modal windows input first, then the screen-space buttons. */
+    handleAction(action) {
+        if (this.destroyed)
+            return false;
+        if (this.windows.top)
+            return this.windows.handleAction(action) || this.windows.blocksWorld;
+        return this.navigate(action);
+    }
+    unmount(node, destroyView = true) {
+        const children = node.children;
+        const cleanups = node.cleanups;
+        const adapter = node.adapter;
+        const view = node.view;
+        node.children = [];
+        node.cleanups = [];
+        node.adapter = undefined;
+        node.background = undefined;
+        node.image = undefined;
+        node.view = null;
+        node.values = {};
+        node.properties = {};
+        cleanupAll([
+            ...children.map((child) => () => this.dispose(child)),
+            ...cleanups,
+            () => adapter?.destroy?.(),
+            () => {
+                if (!destroyView || !view || view.destroyed)
+                    return;
+                if (view instanceof Window)
+                    view.close();
+                else {
+                    view.parent?.removeChild(view);
+                    view.destroy({ children: true });
+                }
+            },
+        ]);
+    }
+    dispose(node) {
+        this.nodes.delete(node.path);
+        this.unmount(node);
+    }
+    assertAlive() {
+        if (this.destroyed)
+            throw new Error('presentation is destroyed');
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        const unsubscribe = this.unsubscribe;
+        this.unsubscribe = undefined;
+        Input.onAction.remove(this.inputListener);
+        cleanupAll([
+            () => unsubscribe?.(),
+            ...this.roots.map((node) => () => this.dispose(node)),
+            () => {
+                this.nodes.clear();
+                this.focused = null;
+                this.root.parent?.removeChild(this.root);
+                this.root.destroy({ children: true });
+            },
+            () => {
+                if (theme() === this.appliedTheme)
+                    setTheme(this.previousTheme);
+            },
+        ]);
+    }
+}
+function cleanupAll(tasks) {
+    const errors = [];
+    for (const task of tasks) {
+        try {
+            task();
+        }
+        catch (error) {
+            errors.push(error);
+        }
+    }
+    if (errors.length)
+        throw new AggregateError(errors, 'presentation cleanup failed');
+}
+function equalProperties(a, b) {
+    return Object.keys(a).length === Object.keys(b).length && Object.keys(b).every((key) => a[key] === b[key]);
+}
+//# sourceMappingURL=MwlPresentation.js.map