@combeenation/3d-viewer 6.1.0 → 6.2.0

package/dist/lib-cjs/api/classes/element.js

@@ -1,670 +1,670 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element = void 0;
-const babylonHelper_1 = require("../util/babylonHelper");
-const resourceHelper_1 = require("../util/resourceHelper");
-const sceneLoaderHelper_1 = require("../util/sceneLoaderHelper");
-const variantParameterizable_1 = require("./../classes/variantParameterizable");
-const dottedPath_1 = require("./dottedPath");
-const parameter_1 = require("./parameter");
-const highlightLayer_1 = require("@babylonjs/core/Layers/highlightLayer");
-const pbrMaterial_1 = require("@babylonjs/core/Materials/PBR/pbrMaterial");
-const dynamicTexture_1 = require("@babylonjs/core/Materials/Textures/dynamicTexture");
-const material_1 = require("@babylonjs/core/Materials/material");
-const math_color_1 = require("@babylonjs/core/Maths/math.color");
-const abstractMesh_1 = require("@babylonjs/core/Meshes/abstractMesh");
-const instancedMesh_1 = require("@babylonjs/core/Meshes/instancedMesh");
-const mesh_1 = require("@babylonjs/core/Meshes/mesh");
-const transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
-const lodash_es_1 = require("lodash-es");
-/**
- * An {@link Element} of a {@link Variant}. Acts as a container for diverse definitions. Lives only in the context of a
- * {@link Variant}.
- *
- * When used in typings, refer to via its alias {@link VariantElement} to prevent name clashes with the web APIs
- * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
- */
-class Element extends variantParameterizable_1.VariantParameterizable {
-    /**
-     * Constructor.
-     */
-    constructor(variant, name) {
-        var _a;
-        super(variant, name);
-        this.variant = variant;
-        this.name = name;
-        this.nodes = [];
-        this._dottedNodes = new Map();
-        if ((_a = process.env.NODE_ENV) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('dev')) {
-            this.assertPathDefinitions();
-        }
-        const nodes = this.variant.inheritedNodes.map(node => (0, babylonHelper_1.cloneTransformNode)(node, this.filterNode.bind(this)));
-        this.nodes = nodes.filter(node => !!node);
-        this._dottedNodes = (0, babylonHelper_1.mapToDottedNodes)(this.nodes, node => node instanceof transformNode_1.TransformNode);
-        this.addMissingMaterialObservers();
-        this.addParameterObservers();
-    }
-    /**
-     * Creates an {@link Element} with given name.
-     */
-    static create(variant, name) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Element(variant, name);
-        });
-    }
-    /**
-     * The {@link DottedPath} in the built tree of {@link Element}s.
-     * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
-     */
-    get dottedPath() {
-        return dottedPath_1.DottedPath.create(this.variant.dottedPath).addPart(this.name);
-    }
-    /**
-     * The id representing a {@link DottedPath}.
-     */
-    get id() {
-        const dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
-        dottedPath.shiftPart(); // remove root
-        return dottedPath.path;
-    }
-    /**
-     * The {@link ElementDefinition} of the {@link Element}.
-     */
-    get definition() {
-        const definition = this.variant.structureJson.elements[this.name];
-        if ((0, lodash_es_1.isArray)(definition)) {
-            return {
-                paths: {
-                    include: definition,
-                },
-            };
-        }
-        return definition;
-    }
-    /**
-     * The {@link PathDefinitions} of the {@link Element}.
-     */
-    get pathDefinitions() {
-        return this.definition.paths;
-    }
-    /**
-     * The {@link TraceableDefinitions} of the {@link Element}.
-     */
-    get traceableDefinitions() {
-        return this.definition.traceables || {};
-    }
-    /**
-     * The {@link PaintableDefinition} of the {@link Element}.
-     */
-    get paintableDefinitions() {
-        return this.definition.paintables || {};
-    }
-    /**
-     * The inherited {@link ParameterBag}.
-     * Merges the {@link Variant}'s parameters and those from the {@link Element}.
-     */
-    get inheritedParameters() {
-        return (0, lodash_es_1.merge)({}, this.variant.inheritedParameters, this.parameters);
-    }
-    /**
-     * The actual {@link Mesh}es that make up this {@link Element}.
-     * Handy for e.g. creating a bounding box around an entire element.
-     */
-    get meshesFlat() {
-        const flatMeshes = this.nodes.reduce((accFlatMeshes, curNode) => {
-            const currMeshes = curNode.getChildMeshes(false, n => n instanceof mesh_1.Mesh);
-            return [...accFlatMeshes, ...currMeshes];
-        }, []);
-        return flatMeshes;
-    }
-    /**
-     * The actual {@link AbstractMesh}es that make up this {@link Element}.
-     * I.e. (real) Meshes as well as InstancedMeshes.
-     */
-    get abstractMeshesFlat() {
-        const allAbstractMeshes = this.nodes.reduce((acc, currNode) => {
-            const currAbstractMeshes = currNode.getChildMeshes(false, n => n instanceof abstractMesh_1.AbstractMesh);
-            if (currNode instanceof abstractMesh_1.AbstractMesh) {
-                currAbstractMeshes.unshift(currNode);
-            }
-            return [...acc, ...currAbstractMeshes];
-        }, []); // initial accumulator value
-        return allAbstractMeshes;
-    }
-    /**
-     * The meshes of this {@link Element}.
-     */
-    get meshes() {
-        return this.nodes.filter(node => node instanceof mesh_1.Mesh);
-    }
-    /**
-     * @protected
-     */
-    set highlightLayer(layer) {
-        this._highlightLayer = layer;
-    }
-    get highlightLayer() {
-        return this._highlightLayer;
-    }
-    /**
-     * Destroys this {@link Element} and dispose all nodes.
-     */
-    destroy() {
-        this.nodes.forEach(node => {
-            node.dispose();
-        });
-        return this;
-    }
-    /**
-     * Gets a node by its {@link DottedPath}.
-     */
-    getNode(dottedPath) {
-        const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-        const keys = Array.from(this._dottedNodes.keys()).map(dp => dp.path);
-        const values = Array.from(this._dottedNodes.values());
-        const node = values[keys.indexOf(_dottedPath.path)];
-        if (!node) {
-            throw new Error(`Node with path "${_dottedPath.path}" does not exist for element "${this.id}".`);
-        }
-        return node;
-    }
-    /**
-     * Gets a mesh by its {@link DottedPath}.
-     */
-    getMesh(dottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const node = yield this.getNode(dottedPath);
-            if (node instanceof mesh_1.Mesh) {
-                return node;
-            }
-            return null;
-        });
-    }
-    /**
-     * Gets a {@link PaintableDefinition} by its name.
-     */
-    getPaintableDefinition(name) {
-        if (!this.paintableDefinitions || !this.paintableDefinitions[name]) {
-            throw new Error(`No paintable "${name}" defined for element "${this.id}".`);
-        }
-        return this.paintableDefinitions[name];
-    }
-    /**
-     * Gets a {@link TraceableDefinition} by its name.
-     */
-    getTraceableDefinition(name) {
-        if (!this.traceableDefinitions || !this.traceableDefinitions[name]) {
-            throw new Error(`No traceable "${name}" defined to add observer in element "${this.id}".`);
-        }
-        return this.traceableDefinitions[name];
-    }
-    /**
-     * Gets the paintable Node by its name.
-     */
-    getPaintableNode(name) {
-        return this.getNode(this.getPaintableDefinition(name).path);
-    }
-    /**
-     * Gets the traceable Node by its name.
-     */
-    getTraceableNode(name) {
-        return this.getNode(this.getTraceableDefinition(name).path);
-    }
-    /**
-     * @see {@link VariantParameterizable.commitParameters}
-     * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
-     */
-    commitParameters(parameters) {
-        const _super = Object.create(null, {
-            commitParameters: { get: () => super.commitParameters }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            return _super.commitParameters.call(this, parameters);
-        });
-    }
-    /**
-     * Adds an observer function for camera matrix changes.
-     * The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
-     */
-    addTraceableObserver(traceable, observer, payload) {
-        if (payload && !(payload instanceof HTMLElement)) {
-            throw new Error(`Payload for camera observer must be an instance of "HTMLElement" in element "${this.id}".`);
-        }
-        if (!this.traceableDefinitions || !this.traceableDefinitions[traceable]) {
-            throw new Error(`No traceable "${traceable}" defined to add observer in element "${this.id}".`);
-        }
-        const node = this.getTraceableNode(traceable);
-        if (!(node instanceof abstractMesh_1.AbstractMesh)) {
-            throw new Error(`The path must be an instance of "AbstractMesh" for camera observer in element "${this.id}".`);
-        }
-        this.variant.viewer.sceneManager.activeCamera.onViewMatrixChangedObservable.add((eventData, eventState) => {
-            const position = (0, babylonHelper_1.getClientRectFromMesh)(node, this.variant.viewer.scene, this.variant.viewer.canvas);
-            if (payload) {
-                payload.style.top = `${position.top}px`;
-                payload.style.left = `${position.left}px`;
-            }
-            observer(node, position);
-        });
-        return this;
-    }
-    /**
-     * Draws a `ImageBitmap` or `OffscreenCanvas` onto a `paintable` defined via {@link PaintableDefinition}.
-     */
-    drawPaintable(paintable, imageSource) {
-        // node and material checks and preperation
-        const node = this.getPaintableNode(paintable);
-        if (!(node instanceof abstractMesh_1.AbstractMesh)) {
-            throw new Error(`The path must be an instance of "AbstractMesh" for paintable "${paintable}" ` + `in element "${this.id}".`);
-        }
-        if (node.material && this.variant.viewer.cloneMaterialsOnMutation) {
-            if (node.material && !(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
-                (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
-            }
-            if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.texture')) {
-                // inject initial value and mark as dirty
-                (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { texture: true } } });
-            }
-        }
-        else if (!node.material) {
-            // paintables should also work if no material is assigned to the node per default
-            // in this case a certain fallback material with fitting default values is defined
-            const pbrMat = new pbrMaterial_1.PBRMaterial(`${this.id}.${paintable}.material`, this.variant.viewer.scene);
-            pbrMat.roughness = 1.0;
-            pbrMat.metallic = 1.0;
-            node.material = pbrMat;
-        }
-        // TODO: Not sure if this really should be overwritten every time the paintable is redrawn.
-        // Maybe the 3D artist had something in mind when setting a certain transparency mode, which would get overwritten
-        // in this case.
-        // Applying it as a default if no material is set is fine though (see roughness/metallic some lines above).
-        // Removing this line will most likely break existing configurators, so be cautios!
-        node.material.transparencyMode = material_1.Material.MATERIAL_ALPHATESTANDBLEND;
-        // consider width and height of the paintable
-        const widthAndHeight = {
-            width: imageSource.width,
-            height: imageSource.height,
-        };
-        const paintableDefinition = this.getPaintableDefinition(paintable);
-        if ((0, lodash_es_1.isNumber)(paintableDefinition.textureOptions)) {
-            widthAndHeight.width = paintableDefinition.textureOptions;
-            widthAndHeight.height = paintableDefinition.textureOptions;
-        }
-        else if ((0, lodash_es_1.isPlainObject)(paintableDefinition.textureOptions)) {
-            widthAndHeight.width = paintableDefinition.textureOptions.width;
-            widthAndHeight.height = paintableDefinition.textureOptions.height;
-        }
-        // create dynamic texture on which the image can be drawn
-        const texture = new dynamicTexture_1.DynamicTexture(`${this.id}.${paintable}.texture`, widthAndHeight, this.variant.viewer.scene, false);
-        // draw image on texture
-        const ctx = texture.getContext();
-        ctx.drawImage(imageSource, 0, 0);
-        texture.update(false);
-        // finally apply the texture on the desired node material
-        (0, babylonHelper_1.setMaterialTexture)(node, texture, false);
-        return this;
-    }
-    /**
-     * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
-     */
-    drawPaintableFromSvg(paintable, svgSource) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const image = yield (0, resourceHelper_1.createImageFromSvg)(svgSource);
-            return this.drawPaintable(paintable, image);
-        });
-    }
-    /**
-     * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
-     */
-    drawPaintableFromImgSrc(paintable, imgSource) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const image = yield (0, resourceHelper_1.createImageFromImgSrc)(imgSource);
-            return this.drawPaintable(paintable, image);
-        });
-    }
-    /**
-     * Adds observers for loading missing materials where needed
-     */
-    addMissingMaterialObservers() {
-        for (const abstractMesh of this.abstractMeshesFlat) {
-            (0, sceneLoaderHelper_1.addMissingMaterialObserver)(abstractMesh);
-        }
-    }
-    /**
-     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
-     */
-    addParameterObservers() {
-        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                let visible;
-                try {
-                    visible = parameter_1.Parameter.parseBoolean(newValue);
-                }
-                catch (e) {
-                    return;
-                }
-                if (visible === true) {
-                    element.nodes.forEach(node => {
-                        (0, babylonHelper_1.injectNodeMetadata)(node, { visibility: node.isEnabled() });
-                        (0, babylonHelper_1.activateTransformNode)(node);
-                    });
-                }
-                else if (visible === false) {
-                    element.nodes.forEach(node => {
-                        (0, babylonHelper_1.injectNodeMetadata)(node, { visibility: node.isEnabled() });
-                        (0, babylonHelper_1.deactivateTransformNode)(node);
-                    });
-                }
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                // we have to deal just with root nodes here due to relative impacts in a node tree
-                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
-                    scaling: parameter_1.Parameter.parseVector(newValue),
-                    position: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.POSITION] || '(0, 0, 0)'),
-                    rotation: parameter_1.Parameter.parseRotation(element.inheritedParameters[parameter_1.Parameter.ROTATION] || '(0, 0, 0)'),
-                }));
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                // we have to deal just with root nodes here due to relative impacts in a node tree
-                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
-                    scaling: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.SCALING] || '(1, 1, 1)'),
-                    position: parameter_1.Parameter.parseVector(newValue),
-                    rotation: parameter_1.Parameter.parseRotation(element.inheritedParameters[parameter_1.Parameter.ROTATION] || '(0, 0, 0)'),
-                }));
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                // we have to deal just with root nodes here due to relative impacts in a node tree
-                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
-                    scaling: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.SCALING] || '(1, 1, 1)'),
-                    position: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.POSITION] || '(0, 0, 0)'),
-                    rotation: parameter_1.Parameter.parseRotation(newValue),
-                }));
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                const materialName = newValue.toString();
-                element.nodes.forEach(node => {
-                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
-                        if (node instanceof instancedMesh_1.InstancedMesh) {
-                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL}" ` +
-                                `of an InstancedMesh is not supported. ` +
-                                `Tried to change node "${node.id}" on element "${element.id}".`);
-                        }
-                    });
-                    (0, babylonHelper_1.setMaterial)(element.variant, node, materialName);
-                });
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                const color = parameter_1.Parameter.parseColor(newValue);
-                element.nodes.forEach(node => {
-                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
-                        if (node instanceof instancedMesh_1.InstancedMesh) {
-                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_COLOR}" ` +
-                                `of an InstancedMesh is not supported. ` +
-                                `Tried to change node "${node.id}" on element "${element.id}".`);
-                        }
-                    });
-                    if (this.variant.viewer.cloneMaterialsOnMutation) {
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
-                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
-                        }
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.color')) {
-                            // inject initial value and mark as dirty
-                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { color: oldValue } } });
-                        }
-                    }
-                    (0, babylonHelper_1.setMaterialColor)(node, color);
-                });
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                const metallness = parameter_1.Parameter.parseNumber(newValue);
-                element.nodes.forEach(node => {
-                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
-                        if (node instanceof instancedMesh_1.InstancedMesh) {
-                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_METALLNESS}" ` +
-                                `of an InstancedMesh is not supported. ` +
-                                `Tried to change node "${node.id}" on element "${element.id}".`);
-                        }
-                    });
-                    if (this.variant.viewer.cloneMaterialsOnMutation) {
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
-                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
-                        }
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.metallness')) {
-                            // inject initial value and mark as dirty
-                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { metallness: oldValue } } });
-                        }
-                    }
-                    (0, babylonHelper_1.setMaterialMetallness)(node, metallness);
-                });
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                const roughness = parameter_1.Parameter.parseNumber(newValue);
-                element.nodes.forEach(node => {
-                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
-                        if (node instanceof instancedMesh_1.InstancedMesh) {
-                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_ROUGHNESS}" ` +
-                                `of an InstancedMesh is not supported. ` +
-                                `Tried to change node "${node.id}" on element "${element.id}".`);
-                        }
-                    });
-                    if (this.variant.viewer.cloneMaterialsOnMutation) {
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
-                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
-                        }
-                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.roughness')) {
-                            // inject initial value and mark as dirty
-                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { roughness: oldValue } } });
-                        }
-                    }
-                    (0, babylonHelper_1.setMaterialRoughness)(node, roughness);
-                });
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
-                // trigger Parameter.HIGHLIGHTED observers
-                (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHTED)) === null || _a === void 0 ? void 0 : _a.forEach(observer => {
-                    observer(element, !!element.highlighted, !!element.highlighted);
-                });
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_ENABLED, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                var _b;
-                let curr;
-                try {
-                    curr = parameter_1.Parameter.parseBoolean(newValue);
-                }
-                catch (e) {
-                    return;
-                }
-                switch (curr) {
-                    case true:
-                        if (element._highlightLayer) {
-                            break;
-                        }
-                        element.highlightLayer = new highlightLayer_1.HighlightLayer(dottedPath_1.DottedPath.create(element.id).addPart('highlight').path, element.variant.viewer.scene);
-                        break;
-                    case false:
-                        (_b = element.highlightLayer) === null || _b === void 0 ? void 0 : _b.dispose();
-                        break;
-                }
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                var _c;
-                if (!element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_ENABLED]) {
-                    return;
-                }
-                // trigger Parameter.HIGHLIGHT_ENABLED observers to ensure HighlightLayer
-                (_c = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHT_ENABLED)) === null || _c === void 0 ? void 0 : _c.forEach(observer => {
-                    observer(element, this.parameters[parameter_1.Parameter.HIGHLIGHT_ENABLED], true);
-                });
-                let highlighted;
-                try {
-                    highlighted = parameter_1.Parameter.parseBoolean(newValue);
-                }
-                catch (e) {
-                    return;
-                }
-                // Add/Remove meshes to previously created highlight layers.
-                if (highlighted === true) {
-                    element.nodes.forEach(node => {
-                        (0, babylonHelper_1.assertTransformNode)(node, (node) => {
-                            if (node instanceof instancedMesh_1.InstancedMesh) {
-                                throw new Error(`Changing parameter "${parameter_1.Parameter.HIGHLIGHTED}" ` +
-                                    `of an InstancedMesh is not supported. ` +
-                                    `Tried to change node "${node.id}" on element "${element.id}".`);
-                            }
-                        });
-                        let color = math_color_1.Color3.Green();
-                        if (element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_COLOR]) {
-                            color = parameter_1.Parameter.parseColor(element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_COLOR]);
-                        }
-                        if (typeof element._highlightLayer !== 'undefined') {
-                            (0, babylonHelper_1.addToHighlightLayer)(element._highlightLayer, color, node);
-                        }
-                    });
-                }
-                else if (highlighted === false) {
-                    element.nodes.forEach(node => {
-                        if (typeof element._highlightLayer !== 'undefined') {
-                            (0, babylonHelper_1.removeFromHighlightLayer)(element._highlightLayer, node);
-                        }
-                    });
-                }
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                let castShadow;
-                try {
-                    castShadow = parameter_1.Parameter.parseBoolean(newValue);
-                }
-                catch (e) {
-                    return;
-                }
-                let lightCsl = element.inheritedParameters[parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS];
-                if (!lightCsl) {
-                    lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
-                }
-                if (castShadow === true) {
-                    yield this.castShadowValueHandler(lightCsl, babylonHelper_1.addToShadowGenerator);
-                }
-                if (castShadow === false) {
-                    yield this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator);
-                }
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                // TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
-                //       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
-                const lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
-                // cleanup all shadow generators
-                yield this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator);
-                if (element.castShadow === true) {
-                    // if newValue is undefined or '' then set newValue to lightCsl (use all lights)
-                    if (!newValue) {
-                        newValue = lightCsl;
-                    }
-                    yield this.castShadowValueHandler(newValue, babylonHelper_1.addToShadowGenerator);
-                }
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
-            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                element.nodes.forEach(node => (0, babylonHelper_1.setReceiveShadows)(node, parameter_1.Parameter.parseBoolean(newValue)));
-            }),
-        ]);
-        return this;
-    }
-    /**
-     * Filter for nodes that are not defined or excluded in the `pathDefinitions`.
-     */
-    filterNode(node) {
-        let includeTokens = [];
-        this.pathDefinitions.include.forEach(dottedPath => {
-            includeTokens = (0, lodash_es_1.union)(includeTokens, dottedPath_1.DottedPath.create(dottedPath).leafTokens);
-        });
-        const shallKeep = (dp) => {
-            const isDirectlyIncluded = !!includeTokens.find(_dp => _dp === dp.path);
-            const isSubOfIncluded = !!this.pathDefinitions.include.find(_dp => {
-                return dp.path.startsWith(`${_dp}${dottedPath_1.DottedPath.DELIMITER}`);
-            });
-            return isDirectlyIncluded || isSubOfIncluded;
-        };
-        const shallExclude = (dp) => {
-            if (!this.pathDefinitions.exclude) {
-                return false;
-            }
-            return !!this.pathDefinitions.exclude.find(_dp => dp.path === _dp);
-        };
-        return shallKeep(node.metadata.dottedPath) && !shallExclude(node.metadata.dottedPath);
-    }
-    /**
-     * Asserts whether all {@link pathDefinitions} link to a valid `Node` path.
-     * @protected
-     */
-    assertPathDefinitions() {
-        var _a;
-        const dottedNodes = this.variant.inheritedDottedNodes;
-        if (dottedNodes.size === 0) {
-            throw new Error(`There are no mapped nodes for element "${this.id}".`);
-        }
-        const include = this.pathDefinitions.include.map(path => dottedPath_1.DottedPath.create(path).path);
-        const exclude = (_a = this.pathDefinitions.exclude) === null || _a === void 0 ? void 0 : _a.map(path => dottedPath_1.DottedPath.create(path).path);
-        const keys = Array.from(dottedNodes.keys()).map(dottedPath => dottedPath.path);
-        (0, lodash_es_1.union)(include, exclude).forEach(path => {
-            if (keys.indexOf(path) === -1) {
-                throw new Error(`Node with path "${path}" does not exist for element "${this.id}".`);
-            }
-        });
-    }
-    /**
-     * Handles callback for given light parameter.
-     */
-    castShadowValueHandler(lightCsl, mutator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const lights = [];
-            for (const lightName of parameter_1.Parameter.parseCommaSeparatedList(lightCsl)) {
-                const viewerLight = yield this.variant.getViewerLight(lightName);
-                if (viewerLight) {
-                    lights.push(viewerLight.light);
-                }
-            }
-            const shadowGenerators = lights.map(light => light === null || light === void 0 ? void 0 : light.getShadowGenerator()).filter(Boolean);
-            shadowGenerators.forEach(generator => {
-                this.nodes.forEach(node => {
-                    mutator(generator, node);
-                });
-            });
-        });
-    }
-}
-exports.Element = Element;
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Element = void 0;
+const babylonHelper_1 = require("../util/babylonHelper");
+const resourceHelper_1 = require("../util/resourceHelper");
+const sceneLoaderHelper_1 = require("../util/sceneLoaderHelper");
+const variantParameterizable_1 = require("./../classes/variantParameterizable");
+const dottedPath_1 = require("./dottedPath");
+const parameter_1 = require("./parameter");
+const highlightLayer_1 = require("@babylonjs/core/Layers/highlightLayer");
+const pbrMaterial_1 = require("@babylonjs/core/Materials/PBR/pbrMaterial");
+const dynamicTexture_1 = require("@babylonjs/core/Materials/Textures/dynamicTexture");
+const material_1 = require("@babylonjs/core/Materials/material");
+const math_color_1 = require("@babylonjs/core/Maths/math.color");
+const abstractMesh_1 = require("@babylonjs/core/Meshes/abstractMesh");
+const instancedMesh_1 = require("@babylonjs/core/Meshes/instancedMesh");
+const mesh_1 = require("@babylonjs/core/Meshes/mesh");
+const transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
+const lodash_es_1 = require("lodash-es");
+/**
+ * An {@link Element} of a {@link Variant}. Acts as a container for diverse definitions. Lives only in the context of a
+ * {@link Variant}.
+ *
+ * When used in typings, refer to via its alias {@link VariantElement} to prevent name clashes with the web APIs
+ * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
+ */
+class Element extends variantParameterizable_1.VariantParameterizable {
+    /**
+     * Constructor.
+     */
+    constructor(variant, name) {
+        var _a;
+        super(variant, name);
+        this.variant = variant;
+        this.name = name;
+        this.nodes = [];
+        this._dottedNodes = new Map();
+        if ((_a = process.env.NODE_ENV) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('dev')) {
+            this.assertPathDefinitions();
+        }
+        const nodes = this.variant.inheritedNodes.map(node => (0, babylonHelper_1.cloneTransformNode)(node, this.filterNode.bind(this)));
+        this.nodes = nodes.filter(node => !!node);
+        this._dottedNodes = (0, babylonHelper_1.mapToDottedNodes)(this.nodes, node => node instanceof transformNode_1.TransformNode);
+        this.addMissingMaterialObservers();
+        this.addParameterObservers();
+    }
+    /**
+     * Creates an {@link Element} with given name.
+     */
+    static create(variant, name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Element(variant, name);
+        });
+    }
+    /**
+     * The {@link DottedPath} in the built tree of {@link Element}s.
+     * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
+     */
+    get dottedPath() {
+        return dottedPath_1.DottedPath.create(this.variant.dottedPath).addPart(this.name);
+    }
+    /**
+     * The id representing a {@link DottedPath}.
+     */
+    get id() {
+        const dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
+        dottedPath.shiftPart(); // remove root
+        return dottedPath.path;
+    }
+    /**
+     * The {@link ElementDefinition} of the {@link Element}.
+     */
+    get definition() {
+        const definition = this.variant.structureJson.elements[this.name];
+        if ((0, lodash_es_1.isArray)(definition)) {
+            return {
+                paths: {
+                    include: definition,
+                },
+            };
+        }
+        return definition;
+    }
+    /**
+     * The {@link PathDefinitions} of the {@link Element}.
+     */
+    get pathDefinitions() {
+        return this.definition.paths;
+    }
+    /**
+     * The {@link TraceableDefinitions} of the {@link Element}.
+     */
+    get traceableDefinitions() {
+        return this.definition.traceables || {};
+    }
+    /**
+     * The {@link PaintableDefinition} of the {@link Element}.
+     */
+    get paintableDefinitions() {
+        return this.definition.paintables || {};
+    }
+    /**
+     * The inherited {@link ParameterBag}.
+     * Merges the {@link Variant}'s parameters and those from the {@link Element}.
+     */
+    get inheritedParameters() {
+        return (0, lodash_es_1.merge)({}, this.variant.inheritedParameters, this.parameters);
+    }
+    /**
+     * The actual {@link Mesh}es that make up this {@link Element}.
+     * Handy for e.g. creating a bounding box around an entire element.
+     */
+    get meshesFlat() {
+        const flatMeshes = this.nodes.reduce((accFlatMeshes, curNode) => {
+            const currMeshes = curNode.getChildMeshes(false, n => n instanceof mesh_1.Mesh);
+            return [...accFlatMeshes, ...currMeshes];
+        }, []);
+        return flatMeshes;
+    }
+    /**
+     * The actual {@link AbstractMesh}es that make up this {@link Element}.
+     * I.e. (real) Meshes as well as InstancedMeshes.
+     */
+    get abstractMeshesFlat() {
+        const allAbstractMeshes = this.nodes.reduce((acc, currNode) => {
+            const currAbstractMeshes = currNode.getChildMeshes(false, n => n instanceof abstractMesh_1.AbstractMesh);
+            if (currNode instanceof abstractMesh_1.AbstractMesh) {
+                currAbstractMeshes.unshift(currNode);
+            }
+            return [...acc, ...currAbstractMeshes];
+        }, []); // initial accumulator value
+        return allAbstractMeshes;
+    }
+    /**
+     * The meshes of this {@link Element}.
+     */
+    get meshes() {
+        return this.nodes.filter(node => node instanceof mesh_1.Mesh);
+    }
+    /**
+     * @protected
+     */
+    set highlightLayer(layer) {
+        this._highlightLayer = layer;
+    }
+    get highlightLayer() {
+        return this._highlightLayer;
+    }
+    /**
+     * Destroys this {@link Element} and dispose all nodes.
+     */
+    destroy() {
+        this.nodes.forEach(node => {
+            node.dispose();
+        });
+        return this;
+    }
+    /**
+     * Gets a node by its {@link DottedPath}.
+     */
+    getNode(dottedPath) {
+        const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+        const keys = Array.from(this._dottedNodes.keys()).map(dp => dp.path);
+        const values = Array.from(this._dottedNodes.values());
+        const node = values[keys.indexOf(_dottedPath.path)];
+        if (!node) {
+            throw new Error(`Node with path "${_dottedPath.path}" does not exist for element "${this.id}".`);
+        }
+        return node;
+    }
+    /**
+     * Gets a mesh by its {@link DottedPath}.
+     */
+    getMesh(dottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const node = yield this.getNode(dottedPath);
+            if (node instanceof mesh_1.Mesh) {
+                return node;
+            }
+            return null;
+        });
+    }
+    /**
+     * Gets a {@link PaintableDefinition} by its name.
+     */
+    getPaintableDefinition(name) {
+        if (!this.paintableDefinitions || !this.paintableDefinitions[name]) {
+            throw new Error(`No paintable "${name}" defined for element "${this.id}".`);
+        }
+        return this.paintableDefinitions[name];
+    }
+    /**
+     * Gets a {@link TraceableDefinition} by its name.
+     */
+    getTraceableDefinition(name) {
+        if (!this.traceableDefinitions || !this.traceableDefinitions[name]) {
+            throw new Error(`No traceable "${name}" defined to add observer in element "${this.id}".`);
+        }
+        return this.traceableDefinitions[name];
+    }
+    /**
+     * Gets the paintable Node by its name.
+     */
+    getPaintableNode(name) {
+        return this.getNode(this.getPaintableDefinition(name).path);
+    }
+    /**
+     * Gets the traceable Node by its name.
+     */
+    getTraceableNode(name) {
+        return this.getNode(this.getTraceableDefinition(name).path);
+    }
+    /**
+     * @see {@link VariantParameterizable.commitParameters}
+     * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
+     */
+    commitParameters(parameters) {
+        const _super = Object.create(null, {
+            commitParameters: { get: () => super.commitParameters }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            return _super.commitParameters.call(this, parameters);
+        });
+    }
+    /**
+     * Adds an observer function for camera matrix changes.
+     * The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
+     */
+    addTraceableObserver(traceable, observer, payload) {
+        if (payload && !(payload instanceof HTMLElement)) {
+            throw new Error(`Payload for camera observer must be an instance of "HTMLElement" in element "${this.id}".`);
+        }
+        if (!this.traceableDefinitions || !this.traceableDefinitions[traceable]) {
+            throw new Error(`No traceable "${traceable}" defined to add observer in element "${this.id}".`);
+        }
+        const node = this.getTraceableNode(traceable);
+        if (!(node instanceof abstractMesh_1.AbstractMesh)) {
+            throw new Error(`The path must be an instance of "AbstractMesh" for camera observer in element "${this.id}".`);
+        }
+        this.variant.viewer.sceneManager.activeCamera.onViewMatrixChangedObservable.add((eventData, eventState) => {
+            const position = (0, babylonHelper_1.getClientRectFromMesh)(node, this.variant.viewer.scene, this.variant.viewer.canvas);
+            if (payload) {
+                payload.style.top = `${position.top}px`;
+                payload.style.left = `${position.left}px`;
+            }
+            observer(node, position);
+        });
+        return this;
+    }
+    /**
+     * Draws a `ImageBitmap` or `OffscreenCanvas` onto a `paintable` defined via {@link PaintableDefinition}.
+     */
+    drawPaintable(paintable, imageSource) {
+        // node and material checks and preperation
+        const node = this.getPaintableNode(paintable);
+        if (!(node instanceof abstractMesh_1.AbstractMesh)) {
+            throw new Error(`The path must be an instance of "AbstractMesh" for paintable "${paintable}" ` + `in element "${this.id}".`);
+        }
+        if (node.material && this.variant.viewer.cloneMaterialsOnMutation) {
+            if (node.material && !(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
+                (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
+            }
+            if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.texture')) {
+                // inject initial value and mark as dirty
+                (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { texture: true } } });
+            }
+        }
+        else if (!node.material) {
+            // paintables should also work if no material is assigned to the node per default
+            // in this case a certain fallback material with fitting default values is defined
+            const pbrMat = new pbrMaterial_1.PBRMaterial(`${this.id}.${paintable}.material`, this.variant.viewer.scene);
+            pbrMat.roughness = 1.0;
+            pbrMat.metallic = 1.0;
+            node.material = pbrMat;
+        }
+        // TODO: Not sure if this really should be overwritten every time the paintable is redrawn.
+        // Maybe the 3D artist had something in mind when setting a certain transparency mode, which would get overwritten
+        // in this case.
+        // Applying it as a default if no material is set is fine though (see roughness/metallic some lines above).
+        // Removing this line will most likely break existing configurators, so be cautios!
+        node.material.transparencyMode = material_1.Material.MATERIAL_ALPHATESTANDBLEND;
+        // consider width and height of the paintable
+        const widthAndHeight = {
+            width: imageSource.width,
+            height: imageSource.height,
+        };
+        const paintableDefinition = this.getPaintableDefinition(paintable);
+        if ((0, lodash_es_1.isNumber)(paintableDefinition.textureOptions)) {
+            widthAndHeight.width = paintableDefinition.textureOptions;
+            widthAndHeight.height = paintableDefinition.textureOptions;
+        }
+        else if ((0, lodash_es_1.isPlainObject)(paintableDefinition.textureOptions)) {
+            widthAndHeight.width = paintableDefinition.textureOptions.width;
+            widthAndHeight.height = paintableDefinition.textureOptions.height;
+        }
+        // create dynamic texture on which the image can be drawn
+        const texture = new dynamicTexture_1.DynamicTexture(`${this.id}.${paintable}.texture`, widthAndHeight, this.variant.viewer.scene, false);
+        // draw image on texture
+        const ctx = texture.getContext();
+        ctx.drawImage(imageSource, 0, 0);
+        texture.update(false);
+        // finally apply the texture on the desired node material
+        (0, babylonHelper_1.setMaterialTexture)(node, texture, false);
+        return this;
+    }
+    /**
+     * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
+     */
+    drawPaintableFromSvg(paintable, svgSource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = yield (0, resourceHelper_1.createImageFromSvg)(svgSource);
+            return this.drawPaintable(paintable, image);
+        });
+    }
+    /**
+     * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
+     */
+    drawPaintableFromImgSrc(paintable, imgSource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = yield (0, resourceHelper_1.createImageFromImgSrc)(imgSource);
+            return this.drawPaintable(paintable, image);
+        });
+    }
+    /**
+     * Adds observers for loading missing materials where needed
+     */
+    addMissingMaterialObservers() {
+        for (const abstractMesh of this.abstractMeshesFlat) {
+            (0, sceneLoaderHelper_1.addMissingMaterialObserver)(abstractMesh);
+        }
+    }
+    /**
+     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+     */
+    addParameterObservers() {
+        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                let visible;
+                try {
+                    visible = parameter_1.Parameter.parseBoolean(newValue);
+                }
+                catch (e) {
+                    return;
+                }
+                if (visible === true) {
+                    element.nodes.forEach(node => {
+                        (0, babylonHelper_1.injectNodeMetadata)(node, { visibility: node.isEnabled() });
+                        (0, babylonHelper_1.activateTransformNode)(node);
+                    });
+                }
+                else if (visible === false) {
+                    element.nodes.forEach(node => {
+                        (0, babylonHelper_1.injectNodeMetadata)(node, { visibility: node.isEnabled() });
+                        (0, babylonHelper_1.deactivateTransformNode)(node);
+                    });
+                }
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                // we have to deal just with root nodes here due to relative impacts in a node tree
+                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
+                    scaling: parameter_1.Parameter.parseVector(newValue),
+                    position: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.POSITION] || '(0, 0, 0)'),
+                    rotation: parameter_1.Parameter.parseRotation(element.inheritedParameters[parameter_1.Parameter.ROTATION] || '(0, 0, 0)'),
+                }));
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                // we have to deal just with root nodes here due to relative impacts in a node tree
+                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
+                    scaling: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.SCALING] || '(1, 1, 1)'),
+                    position: parameter_1.Parameter.parseVector(newValue),
+                    rotation: parameter_1.Parameter.parseRotation(element.inheritedParameters[parameter_1.Parameter.ROTATION] || '(0, 0, 0)'),
+                }));
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                // we have to deal just with root nodes here due to relative impacts in a node tree
+                element.nodes.forEach(node => (0, babylonHelper_1.transformTransformNode)(node, {
+                    scaling: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.SCALING] || '(1, 1, 1)'),
+                    position: parameter_1.Parameter.parseVector(element.inheritedParameters[parameter_1.Parameter.POSITION] || '(0, 0, 0)'),
+                    rotation: parameter_1.Parameter.parseRotation(newValue),
+                }));
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                const materialName = newValue.toString();
+                element.nodes.forEach(node => {
+                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
+                        if (node instanceof instancedMesh_1.InstancedMesh) {
+                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL}" ` +
+                                `of an InstancedMesh is not supported. ` +
+                                `Tried to change node "${node.id}" on element "${element.id}".`);
+                        }
+                    });
+                    (0, babylonHelper_1.setMaterial)(element.variant, node, materialName);
+                });
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                const color = parameter_1.Parameter.parseColor(newValue);
+                element.nodes.forEach(node => {
+                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
+                        if (node instanceof instancedMesh_1.InstancedMesh) {
+                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_COLOR}" ` +
+                                `of an InstancedMesh is not supported. ` +
+                                `Tried to change node "${node.id}" on element "${element.id}".`);
+                        }
+                    });
+                    if (this.variant.viewer.cloneMaterialsOnMutation) {
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
+                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
+                        }
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.color')) {
+                            // inject initial value and mark as dirty
+                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { color: oldValue } } });
+                        }
+                    }
+                    (0, babylonHelper_1.setMaterialColor)(node, color);
+                });
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                const metallness = parameter_1.Parameter.parseNumber(newValue);
+                element.nodes.forEach(node => {
+                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
+                        if (node instanceof instancedMesh_1.InstancedMesh) {
+                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_METALLNESS}" ` +
+                                `of an InstancedMesh is not supported. ` +
+                                `Tried to change node "${node.id}" on element "${element.id}".`);
+                        }
+                    });
+                    if (this.variant.viewer.cloneMaterialsOnMutation) {
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
+                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
+                        }
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.metallness')) {
+                            // inject initial value and mark as dirty
+                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { metallness: oldValue } } });
+                        }
+                    }
+                    (0, babylonHelper_1.setMaterialMetallness)(node, metallness);
+                });
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                const roughness = parameter_1.Parameter.parseNumber(newValue);
+                element.nodes.forEach(node => {
+                    (0, babylonHelper_1.assertTransformNode)(node, (node) => {
+                        if (node instanceof instancedMesh_1.InstancedMesh) {
+                            throw new Error(`Changing parameter "${parameter_1.Parameter.MATERIAL_ROUGHNESS}" ` +
+                                `of an InstancedMesh is not supported. ` +
+                                `Tried to change node "${node.id}" on element "${element.id}".`);
+                        }
+                    });
+                    if (this.variant.viewer.cloneMaterialsOnMutation) {
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material')) {
+                            (0, babylonHelper_1.cloneTransformNodeMaterial)(node);
+                        }
+                        if (!(0, lodash_es_1.has)(node.metadata, 'dirty.material.roughness')) {
+                            // inject initial value and mark as dirty
+                            (0, babylonHelper_1.injectNodeMetadata)(node, { dirty: { material: { roughness: oldValue } } });
+                        }
+                    }
+                    (0, babylonHelper_1.setMaterialRoughness)(node, roughness);
+                });
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                // trigger Parameter.HIGHLIGHTED observers
+                (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHTED)) === null || _a === void 0 ? void 0 : _a.forEach(observer => {
+                    observer(element, !!element.highlighted, !!element.highlighted);
+                });
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_ENABLED, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                var _b;
+                let curr;
+                try {
+                    curr = parameter_1.Parameter.parseBoolean(newValue);
+                }
+                catch (e) {
+                    return;
+                }
+                switch (curr) {
+                    case true:
+                        if (element._highlightLayer) {
+                            break;
+                        }
+                        element.highlightLayer = new highlightLayer_1.HighlightLayer(dottedPath_1.DottedPath.create(element.id).addPart('highlight').path, element.variant.viewer.scene);
+                        break;
+                    case false:
+                        (_b = element.highlightLayer) === null || _b === void 0 ? void 0 : _b.dispose();
+                        break;
+                }
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                var _c;
+                if (!element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_ENABLED]) {
+                    return;
+                }
+                // trigger Parameter.HIGHLIGHT_ENABLED observers to ensure HighlightLayer
+                (_c = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHT_ENABLED)) === null || _c === void 0 ? void 0 : _c.forEach(observer => {
+                    observer(element, this.parameters[parameter_1.Parameter.HIGHLIGHT_ENABLED], true);
+                });
+                let highlighted;
+                try {
+                    highlighted = parameter_1.Parameter.parseBoolean(newValue);
+                }
+                catch (e) {
+                    return;
+                }
+                // Add/Remove meshes to previously created highlight layers.
+                if (highlighted === true) {
+                    element.nodes.forEach(node => {
+                        (0, babylonHelper_1.assertTransformNode)(node, (node) => {
+                            if (node instanceof instancedMesh_1.InstancedMesh) {
+                                throw new Error(`Changing parameter "${parameter_1.Parameter.HIGHLIGHTED}" ` +
+                                    `of an InstancedMesh is not supported. ` +
+                                    `Tried to change node "${node.id}" on element "${element.id}".`);
+                            }
+                        });
+                        let color = math_color_1.Color3.Green();
+                        if (element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_COLOR]) {
+                            color = parameter_1.Parameter.parseColor(element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_COLOR]);
+                        }
+                        if (typeof element._highlightLayer !== 'undefined') {
+                            (0, babylonHelper_1.addToHighlightLayer)(element._highlightLayer, color, node);
+                        }
+                    });
+                }
+                else if (highlighted === false) {
+                    element.nodes.forEach(node => {
+                        if (typeof element._highlightLayer !== 'undefined') {
+                            (0, babylonHelper_1.removeFromHighlightLayer)(element._highlightLayer, node);
+                        }
+                    });
+                }
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                let castShadow;
+                try {
+                    castShadow = parameter_1.Parameter.parseBoolean(newValue);
+                }
+                catch (e) {
+                    return;
+                }
+                let lightCsl = element.inheritedParameters[parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS];
+                if (!lightCsl) {
+                    lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
+                }
+                if (castShadow === true) {
+                    yield this.castShadowValueHandler(lightCsl, babylonHelper_1.addToShadowGenerator);
+                }
+                if (castShadow === false) {
+                    yield this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator);
+                }
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                // TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
+                //       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
+                const lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
+                // cleanup all shadow generators
+                yield this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator);
+                if (element.castShadow === true) {
+                    // if newValue is undefined or '' then set newValue to lightCsl (use all lights)
+                    if (!newValue) {
+                        newValue = lightCsl;
+                    }
+                    yield this.castShadowValueHandler(newValue, babylonHelper_1.addToShadowGenerator);
+                }
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
+            (element, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                element.nodes.forEach(node => (0, babylonHelper_1.setReceiveShadows)(node, parameter_1.Parameter.parseBoolean(newValue)));
+            }),
+        ]);
+        return this;
+    }
+    /**
+     * Filter for nodes that are not defined or excluded in the `pathDefinitions`.
+     */
+    filterNode(node) {
+        let includeTokens = [];
+        this.pathDefinitions.include.forEach(dottedPath => {
+            includeTokens = (0, lodash_es_1.union)(includeTokens, dottedPath_1.DottedPath.create(dottedPath).leafTokens);
+        });
+        const shallKeep = (dp) => {
+            const isDirectlyIncluded = !!includeTokens.find(_dp => _dp === dp.path);
+            const isSubOfIncluded = !!this.pathDefinitions.include.find(_dp => {
+                return dp.path.startsWith(`${_dp}${dottedPath_1.DottedPath.DELIMITER}`);
+            });
+            return isDirectlyIncluded || isSubOfIncluded;
+        };
+        const shallExclude = (dp) => {
+            if (!this.pathDefinitions.exclude) {
+                return false;
+            }
+            return !!this.pathDefinitions.exclude.find(_dp => dp.path === _dp);
+        };
+        return shallKeep(node.metadata.dottedPath) && !shallExclude(node.metadata.dottedPath);
+    }
+    /**
+     * Asserts whether all {@link pathDefinitions} link to a valid `Node` path.
+     * @protected
+     */
+    assertPathDefinitions() {
+        var _a;
+        const dottedNodes = this.variant.inheritedDottedNodes;
+        if (dottedNodes.size === 0) {
+            throw new Error(`There are no mapped nodes for element "${this.id}".`);
+        }
+        const include = this.pathDefinitions.include.map(path => dottedPath_1.DottedPath.create(path).path);
+        const exclude = (_a = this.pathDefinitions.exclude) === null || _a === void 0 ? void 0 : _a.map(path => dottedPath_1.DottedPath.create(path).path);
+        const keys = Array.from(dottedNodes.keys()).map(dottedPath => dottedPath.path);
+        (0, lodash_es_1.union)(include, exclude).forEach(path => {
+            if (keys.indexOf(path) === -1) {
+                throw new Error(`Node with path "${path}" does not exist for element "${this.id}".`);
+            }
+        });
+    }
+    /**
+     * Handles callback for given light parameter.
+     */
+    castShadowValueHandler(lightCsl, mutator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const lights = [];
+            for (const lightName of parameter_1.Parameter.parseCommaSeparatedList(lightCsl)) {
+                const viewerLight = yield this.variant.getViewerLight(lightName);
+                if (viewerLight) {
+                    lights.push(viewerLight.light);
+                }
+            }
+            const shadowGenerators = lights.map(light => light === null || light === void 0 ? void 0 : light.getShadowGenerator()).filter(Boolean);
+            shadowGenerators.forEach(generator => {
+                this.nodes.forEach(node => {
+                    mutator(generator, node);
+                });
+            });
+        });
+    }
+}
+exports.Element = Element;
 //# sourceMappingURL=element.js.map