@combeenation/3d-viewer 4.0.0-beta4 → 4.0.0-beta5

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

@@ -1,683 +1,744 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element = void 0;
-var tslib_1 = require("tslib");
-var highlightLayer_1 = require("@babylonjs/core/Layers/highlightLayer");
-var material_1 = require("@babylonjs/core/Materials/material");
-var standardMaterial_1 = require("@babylonjs/core/Materials/standardMaterial");
-var dynamicTexture_1 = require("@babylonjs/core/Materials/Textures/dynamicTexture");
-var math_axis_1 = require("@babylonjs/core/Maths/math.axis");
-var math_color_1 = require("@babylonjs/core/Maths/math.color");
-var abstractMesh_1 = require("@babylonjs/core/Meshes/abstractMesh");
-var instancedMesh_1 = require("@babylonjs/core/Meshes/instancedMesh");
-var mesh_1 = require("@babylonjs/core/Meshes/mesh");
-var transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
-var lodash_es_1 = require("lodash-es");
-var babylonHelper_1 = require("../util/babylonHelper");
-var resourceHelper_1 = require("../util/resourceHelper");
-var dottedPath_1 = require("./dottedPath");
-var elementParameterizable_1 = require("./elementParameterizable");
-var event_1 = require("./event");
-var parameter_1 = require("./parameter");
-/**
- * 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
- */
-var Element = /** @class */ (function (_super) {
-    tslib_1.__extends(Element, _super);
-    /**
-     * Constructor.
-     */
-    function Element(variant, name) {
-        var _a;
-        var _this = _super.call(this) || this;
-        _this.variant = variant;
-        _this.name = name;
-        _this._dottedNodes = new Map();
-        _this._parameterObservers = new Map();
-        _this.nodes = [];
-        if ((_a = process.env.NODE_ENV) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('dev')) {
-            _this.assertPathDefinitions();
-        }
-        var nodes = _this.variant.inheritedNodes.map(function (node) { return babylonHelper_1.cloneTransformNode(node, _this.filterNode.bind(_this)); });
-        _this.nodes = nodes.filter(function (node) { return !!node; });
-        _this._dottedNodes = babylonHelper_1.mapToDottedNodes(_this.nodes, function (node) { return node instanceof transformNode_1.TransformNode; });
-        _this.addParameterObservers();
-        return _this;
-    }
-    Object.defineProperty(Element.prototype, "dottedPath", {
-        /**
-         * The {@link DottedPath} in the built tree of {@link Element}s.
-         * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
-         */
-        get: function () {
-            return dottedPath_1.DottedPath.create(this.variant.dottedPath).addPart(this.name);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "id", {
-        /**
-         * The id representing a {@link DottedPath}.
-         */
-        get: function () {
-            var dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
-            dottedPath.shiftPart(); // remove root
-            return dottedPath.path;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "definition", {
-        /**
-         * The {@link ElementDefinition} of the {@link Element}.
-         */
-        get: function () {
-            var definition = this.variant.structureJson.elements[this.name];
-            if (lodash_es_1.isArray(definition)) {
-                return {
-                    paths: {
-                        include: definition
-                    }
-                };
-            }
-            return definition;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "pathDefinitions", {
-        /**
-         * The {@link PathDefinitions} of the {@link Element}.
-         */
-        get: function () {
-            return this.definition.paths;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "traceableDefinitions", {
-        /**
-         * The {@link TraceableDefinitions} of the {@link Element}.
-         */
-        get: function () {
-            return this.definition.traceables || {};
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "paintableDefinitions", {
-        /**
-         * The {@link PaintableDefinition} of the {@link Element}.
-         */
-        get: function () {
-            return this.definition.paintables || {};
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "inheritedParameters", {
-        /**
-         * The inherited {@link ParameterBag}.
-         * Merges the {@link Variant}'s parameters and those from the {@link Element}.
-         */
-        get: function () {
-            return lodash_es_1.merge({}, this.variant.inheritedParameters, this.parameters);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Element.prototype, "highlightLayer", {
-        get: function () {
-            return this._highlightLayer;
-        },
-        /**
-         * @protected
-         */
-        set: function (layer) {
-            this._highlightLayer = layer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Destroys this {@link Element} and dispose all nodes.
-     */
-    Element.prototype.destroy = function () {
-        this.nodes.forEach(function (node) {
-            node.dispose();
-        });
-        return this;
-    };
-    /**
-     * Gets a node by its {@link DottedPath}.
-     */
-    Element.prototype.getNode = function (dottedPath) {
-        var _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-        var keys = Array.from(this._dottedNodes.keys()).map(function (dp) { return dp.path; });
-        var values = Array.from(this._dottedNodes.values());
-        var 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}.
-     */
-    Element.prototype.getMesh = function (dottedPath) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var node;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getNode(dottedPath)];
-                    case 1:
-                        node = _a.sent();
-                        if (node instanceof mesh_1.Mesh) {
-                            return [2 /*return*/, node];
-                        }
-                        return [2 /*return*/, null];
-                }
-            });
-        });
-    };
-    /**
-     * Gets a {@link PaintableDefinition} by its name.
-     */
-    Element.prototype.getPaintableDefinition = function (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.
-     */
-    Element.prototype.getTraceableDefinition = function (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.
-     */
-    Element.prototype.getPaintableNode = function (name) {
-        return this.getNode(this.getPaintableDefinition(name).path);
-    };
-    /**
-     * Gets the traceable Node by its name.
-     */
-    Element.prototype.getTraceableNode = function (name) {
-        return this.getNode(this.getTraceableDefinition(name).path);
-    };
-    /**
-     * Places the given {@link ParameterBag} in the {@link Element}'s parameters, replaces all patterns in the
-     * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-     *
-     * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
-     */
-    Element.prototype.commitParameters = function (parameters) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var oldParameters, observerPromises, _loop_1, this_1, parameter;
-            var _this = this;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!parameters) {
-                            parameters = {};
-                        }
-                        oldParameters = lodash_es_1.cloneDeep(this.parameters);
-                        lodash_es_1.merge(this.parameters, parameters);
-                        observerPromises = [];
-                        _loop_1 = function (parameter) {
-                            var oldParameterValue = oldParameters[parameter];
-                            var newParameterValue = this_1.parameters[parameter];
-                            this_1.variant.assertParameter(this_1.variant.inheritedParameterDeclaration, parameter, newParameterValue);
-                            if (oldParameterValue === newParameterValue) {
-                                return "continue";
-                            }
-                            // parameter changed
-                            var parameterObservers = resourceHelper_1.mergeMaps(this_1._parameterObservers, this_1.parameterObservers);
-                            if (parameterObservers.has(parameter)) {
-                                var observers = parameterObservers.get(parameter);
-                                observerPromises = lodash_es_1.concat(observerPromises, observers.map(function (observer) {
-                                    var observerResult = observer(_this, oldParameterValue, newParameterValue);
-                                    return Promise.resolve(observerResult).then(function () {
-                                        _this.broadcastEvent(event_1.Event.ELEMENT_PARAMETER_COMMITTED, _this, parameter, oldParameterValue, newParameterValue);
-                                    });
-                                }));
-                            }
-                        };
-                        this_1 = this;
-                        for (parameter in this.parameters) {
-                            _loop_1(parameter);
-                        }
-                        return [4 /*yield*/, Promise.all(observerPromises)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/, this];
-                }
-            });
-        });
-    };
-    /**
-     * Adds an observer function for camera matrix changes.
-     * The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
-     */
-    Element.prototype.addTraceableObserver = function (traceable, observer, payload) {
-        var _this = this;
-        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 + "\".");
-        }
-        var 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(function (eventData, eventState) {
-            var position = 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}.
-     */
-    Element.prototype.drawPaintable = function (paintable, imageSource) {
-        // node and material checks and preperation
-        var 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 && !lodash_es_1.get(node.metadata, 'dirty.material')) {
-            babylonHelper_1.cloneTransformNodeMaterial(node);
-        }
-        if (!node.material) {
-            node.material = new standardMaterial_1.StandardMaterial(this.id + "." + paintable + ".material", this.variant.viewer.scene);
-        }
-        node.material.transparencyMode = material_1.Material.MATERIAL_ALPHATESTANDBLEND;
-        if (!lodash_es_1.get(node.metadata, 'dirty.material.texture')) {
-            // inject initial value and mark as dirty
-            babylonHelper_1.injectTransformNodeMetadata(node, { dirty: { material: { texture: true } } });
-        }
-        // consider width and height of the paintable
-        var widthAndHeight = {
-            width: imageSource.width,
-            height: imageSource.height
-        };
-        var paintableDefinition = this.getPaintableDefinition(paintable);
-        if (lodash_es_1.isNumber(paintableDefinition.textureOptions)) {
-            widthAndHeight.width = paintableDefinition.textureOptions;
-            widthAndHeight.height = paintableDefinition.textureOptions;
-        }
-        else if (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
-        var texture = new dynamicTexture_1.DynamicTexture(this.id + "." + paintable + ".texture", widthAndHeight, this.variant.viewer.scene, false);
-        // draw image on texture
-        var ctx = texture.getContext();
-        ctx.drawImage(imageSource, 0, 0);
-        texture.update(false);
-        // finally apply the texture on the desired node material
-        babylonHelper_1.setMaterialTexture(node, texture, false);
-        return this;
-    };
-    /**
-     * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
-     */
-    Element.prototype.drawPaintableFromSvg = function (paintable, svgSource) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var image;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, resourceHelper_1.createImageFromSvg(svgSource)];
-                    case 1:
-                        image = _a.sent();
-                        return [2 /*return*/, this.drawPaintable(paintable, image)];
-                }
-            });
-        });
-    };
-    /**
-     * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
-     */
-    Element.prototype.drawPaintableFromImgSrc = function (paintable, imgSource) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var image;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, resourceHelper_1.createImageFromImgSrc(imgSource)];
-                    case 1:
-                        image = _a.sent();
-                        return [2 /*return*/, this.drawPaintable(paintable, image)];
-                }
-            });
-        });
-    };
-    /**
-     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
-     */
-    Element.prototype.addParameterObservers = function () {
-        var _this = this;
-        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var visible;
-                return tslib_1.__generator(this, function (_a) {
-                    try {
-                        visible = parameter_1.Parameter.parseBoolean(newValue);
-                    }
-                    catch (e) {
-                        return [2 /*return*/];
-                    }
-                    if (visible === true) {
-                        element.nodes.forEach(function (node) {
-                            babylonHelper_1.injectTransformNodeMetadata(node, { visibility: node.isEnabled() });
-                            babylonHelper_1.activateTransformNode(node);
-                        });
-                    }
-                    else if (visible === false) {
-                        element.nodes.forEach(function (node) {
-                            babylonHelper_1.injectTransformNodeMetadata(node, { visibility: node.isEnabled() });
-                            babylonHelper_1.deactivateTransformNode(node);
-                        });
-                    }
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    // we have to deal just with root nodes here due to relative impacts in a node tree
-                    element.nodes.forEach(function (node) { return node.scaling = parameter_1.Parameter.parseScaling(newValue); });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var material;
-                return tslib_1.__generator(this, function (_a) {
-                    material = element.variant.getMaterial(newValue.toString());
-                    element.nodes.forEach(function (node) {
-                        babylonHelper_1.assertTransformNode(node, function (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 + "\"."));
-                            }
-                        });
-                        babylonHelper_1.setMaterial(node, material);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var color;
-                return tslib_1.__generator(this, function (_a) {
-                    color = parameter_1.Parameter.parseColor(newValue);
-                    element.nodes.forEach(function (node) {
-                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.get(node.metadata, 'dirty.material')) {
-                            babylonHelper_1.cloneTransformNodeMaterial(node);
-                        }
-                        if (!lodash_es_1.get(node.metadata, 'dirty.material.color')) {
-                            // inject initial value and mark as dirty
-                            babylonHelper_1.injectTransformNodeMetadata(node, { dirty: { material: { color: oldValue } } });
-                        }
-                        babylonHelper_1.setMaterialColor(node, color);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var metallness;
-                return tslib_1.__generator(this, function (_a) {
-                    metallness = parameter_1.Parameter.parseNumber(newValue);
-                    element.nodes.forEach(function (node) {
-                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.get(node.metadata, 'dirty.material')) {
-                            babylonHelper_1.cloneTransformNodeMaterial(node);
-                        }
-                        if (!lodash_es_1.get(node.metadata, 'dirty.material.metallness')) {
-                            // inject initial value and mark as dirty
-                            babylonHelper_1.injectTransformNodeMetadata(node, { dirty: { material: { metallness: oldValue } } });
-                        }
-                        babylonHelper_1.setMaterialMetallness(node, metallness);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var roughness;
-                return tslib_1.__generator(this, function (_a) {
-                    roughness = parameter_1.Parameter.parseNumber(newValue);
-                    element.nodes.forEach(function (node) {
-                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.get(node.metadata, 'dirty.material')) {
-                            babylonHelper_1.cloneTransformNodeMaterial(node);
-                        }
-                        if (!lodash_es_1.get(node.metadata, 'dirty.material.roughness')) {
-                            // inject initial value and mark as dirty
-                            babylonHelper_1.injectTransformNodeMetadata(node, { dirty: { material: { roughness: oldValue } } });
-                        }
-                        babylonHelper_1.setMaterialRoughness(node, roughness);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var _a;
-                return tslib_1.__generator(this, function (_b) {
-                    // trigger Parameter.HIGHLIGHTED observers
-                    (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHTED)) === null || _a === void 0 ? void 0 : _a.forEach(function (observer) {
-                        observer(element, !!element.highlighted, !!element.highlighted);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_ENABLED, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var curr;
-                var _a;
-                return tslib_1.__generator(this, function (_b) {
-                    try {
-                        curr = parameter_1.Parameter.parseBoolean(newValue);
-                    }
-                    catch (e) {
-                        return [2 /*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:
-                            (_a = element.highlightLayer) === null || _a === void 0 ? void 0 : _a.dispose();
-                            break;
-                    }
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var highlighted;
-                var _this = this;
-                var _a;
-                return tslib_1.__generator(this, function (_b) {
-                    if (!element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_ENABLED]) {
-                        return [2 /*return*/];
-                    }
-                    // trigger Parameter.HIGHLIGHT_ENABLED observers to ensure HighlightLayer
-                    (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHT_ENABLED)) === null || _a === void 0 ? void 0 : _a.forEach(function (observer) {
-                        observer(element, _this.parameters[parameter_1.Parameter.HIGHLIGHT_ENABLED], true);
-                    });
-                    try {
-                        highlighted = parameter_1.Parameter.parseBoolean(newValue);
-                    }
-                    catch (e) {
-                        return [2 /*return*/];
-                    }
-                    // Add/Remove meshes to previously created highlight layers.
-                    if (highlighted === true) {
-                        element.nodes.forEach(function (node) {
-                            babylonHelper_1.assertTransformNode(node, function (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 + "\"."));
-                                }
-                            });
-                            var 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") {
-                                babylonHelper_1.addToHighlightLayer(element._highlightLayer, color, node);
-                            }
-                        });
-                    }
-                    else if (highlighted === false) {
-                        element.nodes.forEach(function (node) {
-                            if (typeof element._highlightLayer !== "undefined") {
-                                babylonHelper_1.removeFromHighlightLayer(element._highlightLayer, node);
-                            }
-                        });
-                    }
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    // we have to deal just with root nodes here due to relative impacts in a node tree
-                    element.nodes.forEach(function (node) {
-                        // remember absolute position and reset it before translating
-                        if (!lodash_es_1.get(node.metadata, 'position')) {
-                            node.metadata.position = node.absolutePosition.clone();
-                        }
-                        node.setAbsolutePosition(node.metadata.position);
-                        // move
-                        var distance = parameter_1.Parameter.parseVector(newValue);
-                        node.translate(math_axis_1.Axis.X, distance.x, math_axis_1.Space.WORLD);
-                        node.translate(math_axis_1.Axis.Y, distance.y, math_axis_1.Space.WORLD);
-                        node.translate(math_axis_1.Axis.Z, distance.z, math_axis_1.Space.WORLD);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
-            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    // we have to deal just with root nodes here due to relative impacts in a node tree
-                    element.nodes.forEach(function (node) {
-                        // remember absolute rotation and reset it before translating
-                        if (!lodash_es_1.get(node.metadata, 'rotation')) {
-                            node.metadata.rotation = node.rotation.clone();
-                        }
-                        node.rotation = node.metadata.rotation;
-                        // rotate
-                        var rotation = parameter_1.Parameter.parseRotation(newValue);
-                        node.rotate(math_axis_1.Axis.X, rotation.x, math_axis_1.Space.WORLD);
-                        node.rotate(math_axis_1.Axis.Y, rotation.y, math_axis_1.Space.WORLD);
-                        node.rotate(math_axis_1.Axis.Z, rotation.z, math_axis_1.Space.WORLD);
-                    });
-                    return [2 /*return*/];
-                });
-            }); }
-        ]);
-        return this;
-    };
-    /**
-     * Filter for nodes that are not defined or excluded in the `pathDefinitions`.
-     */
-    Element.prototype.filterNode = function (node) {
-        var _this = this;
-        var includeTokens = [];
-        this.pathDefinitions.include.forEach(function (dottedPath) {
-            includeTokens = lodash_es_1.union(includeTokens, dottedPath_1.DottedPath.create(dottedPath).leafTokens);
-        });
-        var shallKeep = function (dp) {
-            var isDirectlyIncluded = !!includeTokens.find(function (_dp) { return _dp === dp.path; });
-            var isSubOfIncluded = !!_this.pathDefinitions.include.find(function (_dp) {
-                return dp.path.startsWith("" + _dp + dottedPath_1.DottedPath.DELIMITER);
-            });
-            return isDirectlyIncluded || isSubOfIncluded;
-        };
-        var shallExclude = function (dp) {
-            if (!_this.pathDefinitions.exclude) {
-                return false;
-            }
-            return !!_this.pathDefinitions.exclude.find(function (_dp) { return dp.path === _dp; });
-        };
-        return shallKeep(node.metadata.dottedPath) && !shallExclude(node.metadata.dottedPath);
-    };
-    /**
-     * Asserts whether all {@link pathDefinitions} link to a valid `Node` path.
-     * @protected
-     */
-    Element.prototype.assertPathDefinitions = function () {
-        var _this = this;
-        var _a;
-        var dottedNodes = this.variant.inheritedDottedNodes;
-        if (dottedNodes.size === 0) {
-            throw new Error("There are no mapped nodes for element \"" + this.id + "\".");
-        }
-        var include = this.pathDefinitions.include.map(function (path) { return dottedPath_1.DottedPath.create(path).path; });
-        var exclude = (_a = this.pathDefinitions.exclude) === null || _a === void 0 ? void 0 : _a.map(function (path) { return dottedPath_1.DottedPath.create(path).path; });
-        var keys = Array.from(dottedNodes.keys()).map(function (dottedPath) { return dottedPath.path; });
-        lodash_es_1.union(include, exclude).forEach(function (path) {
-            if (keys.indexOf(path) === -1) {
-                throw new Error("Node with path \"" + path + "\" does not exist for element \"" + _this.id + "\".");
-            }
-        });
-    };
-    return Element;
-}(elementParameterizable_1.ElementParameterizable));
-exports.Element = Element;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Element = void 0;
+var tslib_1 = require("tslib");
+var highlightLayer_1 = require("@babylonjs/core/Layers/highlightLayer");
+var material_1 = require("@babylonjs/core/Materials/material");
+var standardMaterial_1 = require("@babylonjs/core/Materials/standardMaterial");
+var dynamicTexture_1 = require("@babylonjs/core/Materials/Textures/dynamicTexture");
+var math_color_1 = require("@babylonjs/core/Maths/math.color");
+var abstractMesh_1 = require("@babylonjs/core/Meshes/abstractMesh");
+var instancedMesh_1 = require("@babylonjs/core/Meshes/instancedMesh");
+var mesh_1 = require("@babylonjs/core/Meshes/mesh");
+var transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
+var lodash_es_1 = require("lodash-es");
+var babylonHelper_1 = require("../util/babylonHelper");
+var resourceHelper_1 = require("../util/resourceHelper");
+var variantParameterizable_1 = require("./../classes/variantParameterizable");
+var dottedPath_1 = require("./dottedPath");
+var parameter_1 = require("./parameter");
+/**
+ * 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
+ */
+var Element = /** @class */ (function (_super) {
+    tslib_1.__extends(Element, _super);
+    /**
+     * Constructor.
+     */
+    function Element(variant, name) {
+        var _a;
+        var _this = _super.call(this, variant, name) || this;
+        _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();
+        }
+        var nodes = _this.variant.inheritedNodes.map(function (node) { return babylonHelper_1.cloneTransformNode(node, _this.filterNode.bind(_this)); });
+        _this.nodes = nodes.filter(function (node) { return !!node; });
+        _this._dottedNodes = babylonHelper_1.mapToDottedNodes(_this.nodes, function (node) { return node instanceof transformNode_1.TransformNode; });
+        _this.addParameterObservers();
+        return _this;
+    }
+    /**
+     * Creates an {@link Element} with given name.
+     */
+    Element.create = function (variant, name) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, new Element(variant, name)];
+            });
+        });
+    };
+    Object.defineProperty(Element.prototype, "dottedPath", {
+        /**
+         * The {@link DottedPath} in the built tree of {@link Element}s.
+         * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
+         */
+        get: function () {
+            return dottedPath_1.DottedPath.create(this.variant.dottedPath).addPart(this.name);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "id", {
+        /**
+         * The id representing a {@link DottedPath}.
+         */
+        get: function () {
+            var dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
+            dottedPath.shiftPart(); // remove root
+            return dottedPath.path;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "definition", {
+        /**
+         * The {@link ElementDefinition} of the {@link Element}.
+         */
+        get: function () {
+            var definition = this.variant.structureJson.elements[this.name];
+            if (lodash_es_1.isArray(definition)) {
+                return {
+                    paths: {
+                        include: definition
+                    }
+                };
+            }
+            return definition;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "pathDefinitions", {
+        /**
+         * The {@link PathDefinitions} of the {@link Element}.
+         */
+        get: function () {
+            return this.definition.paths;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "traceableDefinitions", {
+        /**
+         * The {@link TraceableDefinitions} of the {@link Element}.
+         */
+        get: function () {
+            return this.definition.traceables || {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "paintableDefinitions", {
+        /**
+         * The {@link PaintableDefinition} of the {@link Element}.
+         */
+        get: function () {
+            return this.definition.paintables || {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "inheritedParameters", {
+        /**
+         * The inherited {@link ParameterBag}.
+         * Merges the {@link Variant}'s parameters and those from the {@link Element}.
+         */
+        get: function () {
+            return lodash_es_1.merge({}, this.variant.inheritedParameters, this.parameters);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "highlightLayer", {
+        get: function () {
+            return this._highlightLayer;
+        },
+        /**
+         * @protected
+         */
+        set: function (layer) {
+            this._highlightLayer = layer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Destroys this {@link Element} and dispose all nodes.
+     */
+    Element.prototype.destroy = function () {
+        this.nodes.forEach(function (node) {
+            node.dispose();
+        });
+        return this;
+    };
+    /**
+     * Gets a node by its {@link DottedPath}.
+     */
+    Element.prototype.getNode = function (dottedPath) {
+        var _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+        var keys = Array.from(this._dottedNodes.keys()).map(function (dp) { return dp.path; });
+        var values = Array.from(this._dottedNodes.values());
+        var 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}.
+     */
+    Element.prototype.getMesh = function (dottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var node;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getNode(dottedPath)];
+                    case 1:
+                        node = _a.sent();
+                        if (node instanceof mesh_1.Mesh) {
+                            return [2 /*return*/, node];
+                        }
+                        return [2 /*return*/, null];
+                }
+            });
+        });
+    };
+    /**
+     * Gets a {@link PaintableDefinition} by its name.
+     */
+    Element.prototype.getPaintableDefinition = function (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.
+     */
+    Element.prototype.getTraceableDefinition = function (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.
+     */
+    Element.prototype.getPaintableNode = function (name) {
+        return this.getNode(this.getPaintableDefinition(name).path);
+    };
+    /**
+     * Gets the traceable Node by its name.
+     */
+    Element.prototype.getTraceableNode = function (name) {
+        return this.getNode(this.getTraceableDefinition(name).path);
+    };
+    /**
+     * @see {@link VariantParameterizable.commitParameters}
+     * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
+     */
+    Element.prototype.commitParameters = function (parameters) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, _super.prototype.commitParameters.call(this, parameters)];
+            });
+        });
+    };
+    /**
+     * Adds an observer function for camera matrix changes.
+     * The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
+     */
+    Element.prototype.addTraceableObserver = function (traceable, observer, payload) {
+        var _this = this;
+        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 + "\".");
+        }
+        var 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(function (eventData, eventState) {
+            var position = 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}.
+     */
+    Element.prototype.drawPaintable = function (paintable, imageSource) {
+        // node and material checks and preperation
+        var 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 && !lodash_es_1.has(node.metadata, 'dirty.material')) {
+            babylonHelper_1.cloneTransformNodeMaterial(node);
+        }
+        if (!node.material) {
+            node.material = new standardMaterial_1.StandardMaterial(this.id + "." + paintable + ".material", this.variant.viewer.scene);
+        }
+        node.material.transparencyMode = material_1.Material.MATERIAL_ALPHATESTANDBLEND;
+        if (!lodash_es_1.has(node.metadata, 'dirty.material.texture')) {
+            // inject initial value and mark as dirty
+            babylonHelper_1.injectNodeMetadata(node, { dirty: { material: { texture: true } } });
+        }
+        // consider width and height of the paintable
+        var widthAndHeight = {
+            width: imageSource.width,
+            height: imageSource.height
+        };
+        var paintableDefinition = this.getPaintableDefinition(paintable);
+        if (lodash_es_1.isNumber(paintableDefinition.textureOptions)) {
+            widthAndHeight.width = paintableDefinition.textureOptions;
+            widthAndHeight.height = paintableDefinition.textureOptions;
+        }
+        else if (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
+        var texture = new dynamicTexture_1.DynamicTexture(this.id + "." + paintable + ".texture", widthAndHeight, this.variant.viewer.scene, false);
+        // draw image on texture
+        var ctx = texture.getContext();
+        ctx.drawImage(imageSource, 0, 0);
+        texture.update(false);
+        // finally apply the texture on the desired node material
+        babylonHelper_1.setMaterialTexture(node, texture, false);
+        return this;
+    };
+    /**
+     * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
+     */
+    Element.prototype.drawPaintableFromSvg = function (paintable, svgSource) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var image;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, resourceHelper_1.createImageFromSvg(svgSource)];
+                    case 1:
+                        image = _a.sent();
+                        return [2 /*return*/, this.drawPaintable(paintable, image)];
+                }
+            });
+        });
+    };
+    /**
+     * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
+     */
+    Element.prototype.drawPaintableFromImgSrc = function (paintable, imgSource) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var image;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, resourceHelper_1.createImageFromImgSrc(imgSource)];
+                    case 1:
+                        image = _a.sent();
+                        return [2 /*return*/, this.drawPaintable(paintable, image)];
+                }
+            });
+        });
+    };
+    /**
+     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+     */
+    Element.prototype.addParameterObservers = function () {
+        var _this = this;
+        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var visible;
+                return tslib_1.__generator(this, function (_a) {
+                    try {
+                        visible = parameter_1.Parameter.parseBoolean(newValue);
+                    }
+                    catch (e) {
+                        return [2 /*return*/];
+                    }
+                    if (visible === true) {
+                        element.nodes.forEach(function (node) {
+                            babylonHelper_1.injectNodeMetadata(node, { visibility: node.isEnabled() });
+                            babylonHelper_1.activateTransformNode(node);
+                        });
+                    }
+                    else if (visible === false) {
+                        element.nodes.forEach(function (node) {
+                            babylonHelper_1.injectNodeMetadata(node, { visibility: node.isEnabled() });
+                            babylonHelper_1.deactivateTransformNode(node);
+                        });
+                    }
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    // we have to deal just with root nodes here due to relative impacts in a node tree
+                    element.nodes.forEach(function (node) { return node.scaling = parameter_1.Parameter.parseScaling(newValue); });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var material;
+                return tslib_1.__generator(this, function (_a) {
+                    material = element.variant.getMaterial(newValue.toString());
+                    element.nodes.forEach(function (node) {
+                        babylonHelper_1.assertTransformNode(node, function (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 + "\"."));
+                            }
+                        });
+                        babylonHelper_1.setMaterial(node, material);
+                    });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var color;
+                return tslib_1.__generator(this, function (_a) {
+                    color = parameter_1.Parameter.parseColor(newValue);
+                    element.nodes.forEach(function (node) {
+                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.has(node.metadata, 'dirty.material')) {
+                            babylonHelper_1.cloneTransformNodeMaterial(node);
+                        }
+                        if (!lodash_es_1.has(node.metadata, 'dirty.material.color')) {
+                            // inject initial value and mark as dirty
+                            babylonHelper_1.injectNodeMetadata(node, { dirty: { material: { color: oldValue } } });
+                        }
+                        babylonHelper_1.setMaterialColor(node, color);
+                    });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var metallness;
+                return tslib_1.__generator(this, function (_a) {
+                    metallness = parameter_1.Parameter.parseNumber(newValue);
+                    element.nodes.forEach(function (node) {
+                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.has(node.metadata, 'dirty.material')) {
+                            babylonHelper_1.cloneTransformNodeMaterial(node);
+                        }
+                        if (!lodash_es_1.has(node.metadata, 'dirty.material.metallness')) {
+                            // inject initial value and mark as dirty
+                            babylonHelper_1.injectNodeMetadata(node, { dirty: { material: { metallness: oldValue } } });
+                        }
+                        babylonHelper_1.setMaterialMetallness(node, metallness);
+                    });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var roughness;
+                return tslib_1.__generator(this, function (_a) {
+                    roughness = parameter_1.Parameter.parseNumber(newValue);
+                    element.nodes.forEach(function (node) {
+                        babylonHelper_1.assertTransformNode(node, function (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 (!lodash_es_1.has(node.metadata, 'dirty.material')) {
+                            babylonHelper_1.cloneTransformNodeMaterial(node);
+                        }
+                        if (!lodash_es_1.has(node.metadata, 'dirty.material.roughness')) {
+                            // inject initial value and mark as dirty
+                            babylonHelper_1.injectNodeMetadata(node, { dirty: { material: { roughness: oldValue } } });
+                        }
+                        babylonHelper_1.setMaterialRoughness(node, roughness);
+                    });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var _a;
+                return tslib_1.__generator(this, function (_b) {
+                    // trigger Parameter.HIGHLIGHTED observers
+                    (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHTED)) === null || _a === void 0 ? void 0 : _a.forEach(function (observer) {
+                        observer(element, !!element.highlighted, !!element.highlighted);
+                    });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_ENABLED, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var curr;
+                var _a;
+                return tslib_1.__generator(this, function (_b) {
+                    try {
+                        curr = parameter_1.Parameter.parseBoolean(newValue);
+                    }
+                    catch (e) {
+                        return [2 /*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:
+                            (_a = element.highlightLayer) === null || _a === void 0 ? void 0 : _a.dispose();
+                            break;
+                    }
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var highlighted;
+                var _this = this;
+                var _a;
+                return tslib_1.__generator(this, function (_b) {
+                    if (!element.inheritedParameters[parameter_1.Parameter.HIGHLIGHT_ENABLED]) {
+                        return [2 /*return*/];
+                    }
+                    // trigger Parameter.HIGHLIGHT_ENABLED observers to ensure HighlightLayer
+                    (_a = this._parameterObservers.get(parameter_1.Parameter.HIGHLIGHT_ENABLED)) === null || _a === void 0 ? void 0 : _a.forEach(function (observer) {
+                        observer(element, _this.parameters[parameter_1.Parameter.HIGHLIGHT_ENABLED], true);
+                    });
+                    try {
+                        highlighted = parameter_1.Parameter.parseBoolean(newValue);
+                    }
+                    catch (e) {
+                        return [2 /*return*/];
+                    }
+                    // Add/Remove meshes to previously created highlight layers.
+                    if (highlighted === true) {
+                        element.nodes.forEach(function (node) {
+                            babylonHelper_1.assertTransformNode(node, function (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 + "\"."));
+                                }
+                            });
+                            var 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") {
+                                babylonHelper_1.addToHighlightLayer(element._highlightLayer, color, node);
+                            }
+                        });
+                    }
+                    else if (highlighted === false) {
+                        element.nodes.forEach(function (node) {
+                            if (typeof element._highlightLayer !== "undefined") {
+                                babylonHelper_1.removeFromHighlightLayer(element._highlightLayer, node);
+                            }
+                        });
+                    }
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    // we have to deal just with root nodes here due to relative impacts in a node tree
+                    element.nodes.forEach(function (node) { return babylonHelper_1.moveTransformNode(node, parameter_1.Parameter.parseVector(newValue)); });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(parameter_1.Parameter.POSITION in element.inheritedParameters)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, element.commitParameter(parameter_1.Parameter.POSITION, element.inheritedParameters[parameter_1.Parameter.POSITION])];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            // we have to deal just with root nodes here due to relative impacts in a node tree
+                            element.nodes.forEach(function (node) { return babylonHelper_1.rotateTransformNode(node, parameter_1.Parameter.parseRotation(newValue)); });
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var castShadow, lightCsl;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            try {
+                                castShadow = parameter_1.Parameter.parseBoolean(newValue);
+                            }
+                            catch (e) {
+                                return [2 /*return*/];
+                            }
+                            lightCsl = element.inheritedParameters[parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS];
+                            if (!lightCsl) {
+                                lightCsl = element.variant.inheritedViewerLights.map(function (l) { return l.name; }).join(',');
+                            }
+                            if (!(castShadow === true)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.castShadowValueHandler(lightCsl, babylonHelper_1.addToShadowGenerator)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            if (!(castShadow === false)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator)];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var lightCsl;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lightCsl = element.variant.inheritedViewerLights.map(function (l) { return l.name; }).join(',');
+                            // cleanup all shadow generators
+                            return [4 /*yield*/, this.castShadowValueHandler(lightCsl, babylonHelper_1.removeFromShadowGenerator)];
+                        case 1:
+                            // cleanup all shadow generators
+                            _a.sent();
+                            if (!(element.castShadow === true)) return [3 /*break*/, 3];
+                            // if newValue is undefined or '' then set newValue to lightCsl (use all lights)
+                            if (!newValue) {
+                                newValue = lightCsl;
+                            }
+                            return [4 /*yield*/, this.castShadowValueHandler(newValue, babylonHelper_1.addToShadowGenerator)];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
+            function (element, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    element.nodes.forEach(function (node) { return babylonHelper_1.setReceiveShadows(node, parameter_1.Parameter.parseBoolean(newValue)); });
+                    return [2 /*return*/];
+                });
+            }); }
+        ]);
+        return this;
+    };
+    /**
+     * Filter for nodes that are not defined or excluded in the `pathDefinitions`.
+     */
+    Element.prototype.filterNode = function (node) {
+        var _this = this;
+        var includeTokens = [];
+        this.pathDefinitions.include.forEach(function (dottedPath) {
+            includeTokens = lodash_es_1.union(includeTokens, dottedPath_1.DottedPath.create(dottedPath).leafTokens);
+        });
+        var shallKeep = function (dp) {
+            var isDirectlyIncluded = !!includeTokens.find(function (_dp) { return _dp === dp.path; });
+            var isSubOfIncluded = !!_this.pathDefinitions.include.find(function (_dp) {
+                return dp.path.startsWith("" + _dp + dottedPath_1.DottedPath.DELIMITER);
+            });
+            return isDirectlyIncluded || isSubOfIncluded;
+        };
+        var shallExclude = function (dp) {
+            if (!_this.pathDefinitions.exclude) {
+                return false;
+            }
+            return !!_this.pathDefinitions.exclude.find(function (_dp) { return dp.path === _dp; });
+        };
+        return shallKeep(node.metadata.dottedPath) && !shallExclude(node.metadata.dottedPath);
+    };
+    /**
+     * Asserts whether all {@link pathDefinitions} link to a valid `Node` path.
+     * @protected
+     */
+    Element.prototype.assertPathDefinitions = function () {
+        var _this = this;
+        var _a;
+        var dottedNodes = this.variant.inheritedDottedNodes;
+        if (dottedNodes.size === 0) {
+            throw new Error("There are no mapped nodes for element \"" + this.id + "\".");
+        }
+        var include = this.pathDefinitions.include.map(function (path) { return dottedPath_1.DottedPath.create(path).path; });
+        var exclude = (_a = this.pathDefinitions.exclude) === null || _a === void 0 ? void 0 : _a.map(function (path) { return dottedPath_1.DottedPath.create(path).path; });
+        var keys = Array.from(dottedNodes.keys()).map(function (dottedPath) { return dottedPath.path; });
+        lodash_es_1.union(include, exclude).forEach(function (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.
+     */
+    Element.prototype.castShadowValueHandler = function (lightCsl, mutator) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var lights, _i, _a, lightName, viewerLight, shadowGenerators;
+            var _this = this;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        lights = [];
+                        _i = 0, _a = parameter_1.Parameter.parseCommaSeparatedList(lightCsl);
+                        _b.label = 1;
+                    case 1:
+                        if (!(_i < _a.length)) return [3 /*break*/, 4];
+                        lightName = _a[_i];
+                        return [4 /*yield*/, this.variant.getViewerLight(lightName)];
+                    case 2:
+                        viewerLight = _b.sent();
+                        if (viewerLight) {
+                            lights.push(viewerLight.light);
+                        }
+                        _b.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        shadowGenerators = lights
+                            .map(function (light) { return light === null || light === void 0 ? void 0 : light.getShadowGenerator(); })
+                            .filter(Boolean);
+                        shadowGenerators.forEach(function (generator) {
+                            _this.nodes.forEach(function (node) {
+                                mutator(generator, node);
+                            });
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return Element;
+}(variantParameterizable_1.VariantParameterizable));
+exports.Element = Element;
 //# sourceMappingURL=element.js.map