@combeenation/3d-viewer 3.1.1-alpha7 → 3.1.2

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

@@ -1,874 +1,864 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Variant = void 0;
-var tslib_1 = require("tslib");
-var assetContainer_1 = require("@babylonjs/core/assetContainer");
-require("@babylonjs/core/Loading/Plugins/babylonFileLoader");
-var sceneLoader_1 = require("@babylonjs/core/Loading/sceneLoader");
-var transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform");
-require("@babylonjs/loaders/glTF/2.0/glTFLoader");
-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 element_1 = require("./element");
-var elementParameterizable_1 = require("./elementParameterizable");
-var event_1 = require("./event");
-var parameter_1 = require("./parameter");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_ior");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_pbrSpecularGlossiness");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_specular");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_translucency");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_transmission");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_unlit");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants");
-/**
- * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
- */
-var Variant = /** @class */ (function (_super) {
-    tslib_1.__extends(Variant, _super);
-    /**
-     * Constructor.
-     */
-    function Variant(name, _structureJson, viewer, parent) {
-        var _this = _super.call(this, lodash_es_1.cloneDeep(_structureJson.parameterDeclaration), lodash_es_1.cloneDeep(_structureJson.parameters)) || this;
-        _this.name = name;
-        _this._structureJson = _structureJson;
-        _this.viewer = viewer;
-        _this.parent = parent;
-        _this.elements = [];
-        _this._children = new Map();
-        _this._parameterObservers = new Map();
-        /**
-         * @internal
-         */
-        _this.parametersInitialized = false;
-        for (var parameter in _structureJson.parameterDeclaration) {
-            if (!(parameter in (_structureJson.parameters || []))) {
-                throw new Error("No default value for parameter \"" + parameter + "\" defined.");
-            }
-        }
-        _this.assetContainer = new assetContainer_1.AssetContainer(viewer.scene);
-        _this.structureJson = lodash_es_1.cloneDeep(_structureJson);
-        return _this;
-    }
-    /**
-     * Creates a {@link Variant} based on given parameters.
-     *
-     * @throws Error if "gltf" property is provided without a filename
-     */
-    Variant.create = function (name, structureJson, viewer, parent) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var variant;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        variant = new Variant(name, structureJson, viewer, parent);
-                        return [4 /*yield*/, variant.loadAssets()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/, variant];
-                }
-            });
-        });
-    };
-    Object.defineProperty(Variant.prototype, "ancestors", {
-        /**
-         * The ancestor {@link Variant}s ordered from top to bottom in the built tree.
-         */
-        get: function () {
-            var ancestors = [];
-            var variant = this;
-            while (variant.parent) {
-                ancestors.unshift(variant.parent);
-                variant = variant.parent;
-            }
-            return ancestors;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "root", {
-        /**
-         * The root {@link Variant}.
-         */
-        get: function () {
-            var _a;
-            return (_a = this.ancestors[0]) !== null && _a !== void 0 ? _a : this;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "dottedPath", {
-        /**
-         * The {@link DottedPath} in the built tree of {@link Variant}s.
-         * E.g. "_.top-1.sub-2.sub-sub-3"
-         */
-        get: function () {
-            var parentIds = this.ancestors.map(function (ancestor) {
-                return ancestor.name;
-            });
-            return dottedPath_1.DottedPath.createFromParts(parentIds).addPart(this.name);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.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(Variant.prototype, "glTF", {
-        /**
-         * The defined glTF Asset.
-         */
-        get: function () {
-            if (this.structureJson.glTF) {
-                if (lodash_es_1.isString(this.structureJson.glTF)) {
-                    return {
-                        rootUrl: this.structureJson.glTF,
-                        fileName: undefined
-                    };
-                }
-                if (lodash_es_1.isEmpty(this.structureJson.glTF.rootUrl)) {
-                    throw new Error("No \"rootUrl\" defined in \"glTF\" definition for variant \"" + this.id + "\".");
-                }
-                return this.structureJson.glTF;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "glTFUri", {
-        /**
-         * The defined glTF URI.
-         */
-        get: function () {
-            if (this.glTF) {
-                return [this.glTF.rootUrl, this.glTF.fileName].join('');
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedGlTFUri", {
-        /**
-         * The inherited defined glTF URI.
-         */
-        get: function () {
-            if (!this.glTFUri && this.parent) {
-                return this.parent.inheritedGlTFUri;
-            }
-            return this.glTFUri;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "nodes", {
-        /**
-         * The TransformNodes of the {@link Variant}.
-         */
-        get: function () {
-            var rootNodes = this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode && !n.parent; });
-            return rootNodes;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "dottedNodes", {
-        /**
-         * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
-         */
-        get: function () {
-            if (!this._dottedNodes) {
-                var nodes = this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode; });
-                var dottedNodes_1 = new Map();
-                nodes.forEach(function (node) {
-                    dottedNodes_1.set(node.metadata.dottedPath, node);
-                });
-                this._dottedNodes = dottedNodes_1;
-            }
-            return this._dottedNodes;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "materials", {
-        /**
-         * The Materials of the {@link Variant}.
-         */
-        get: function () {
-            return this.assetContainer.materials;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedElements", {
-        /**
-         * All {@link Element}s from this {@link Variant}'s parents.
-         */
-        get: function () {
-            var elements = [];
-            this.ancestors.forEach(function (ancestor) {
-                elements = lodash_es_1.concat(elements, ancestor.elements);
-            });
-            return lodash_es_1.concat(elements, this.elements);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedNodes", {
-        /**
-         * All TransformNodes inherited from this {@link Variant}'s parents.
-         */
-        get: function () {
-            var nodes = [];
-            this.ancestors.forEach(function (ancestor) {
-                nodes = lodash_es_1.concat(nodes, ancestor.nodes);
-            });
-            return lodash_es_1.concat(nodes, this.nodes);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedDottedNodes", {
-        /**
-         * All TransformNodes inherited from this {@link Variant}'s parents mapped flat with a {@link DottedPath}.
-         */
-        get: function () {
-            var dottedNodes = this.dottedNodes;
-            this.ancestors.forEach(function (ancestor) {
-                dottedNodes = resourceHelper_1.mergeMaps(dottedNodes, ancestor.dottedNodes);
-            });
-            return dottedNodes;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedParameterDeclaration", {
-        /**
-         * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
-         */
-        get: function () {
-            var declaration = {};
-            this.ancestors.forEach(function (ancestor) {
-                lodash_es_1.merge(declaration, ancestor.parameterDeclaration);
-            });
-            return lodash_es_1.merge(declaration, this.parameterDeclaration);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedParameters", {
-        /**
-         * The {@link ParameterBag} inherited from this {@link Variant}'s parents.
-         */
-        get: function () {
-            var parameters = {};
-            this.ancestors.forEach(function (ancestor) {
-                lodash_es_1.merge(parameters, ancestor.parameters);
-            });
-            return lodash_es_1.merge(parameters, this.parameters);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Variant.prototype, "inheritedMaterials", {
-        /**
-         * All Materials from this {@link Variant}'s parents.
-         */
-        get: function () {
-            var materials = [];
-            this.ancestors.forEach(function (ancestor) {
-                materials = lodash_es_1.concat(materials, ancestor.materials);
-            });
-            return lodash_es_1.concat(materials, this.materials);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Gets the direct children of the current {@link Variant}.
-     */
-    Variant.prototype.getChildren = function () {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var children, _a, _b, _i, name_1, _c, _d;
-            return tslib_1.__generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        children = [];
-                        _a = [];
-                        for (_b in this.structureJson.variants)
-                            _a.push(_b);
-                        _i = 0;
-                        _e.label = 1;
-                    case 1:
-                        if (!(_i < _a.length)) return [3 /*break*/, 4];
-                        name_1 = _a[_i];
-                        _d = (_c = children).push;
-                        return [4 /*yield*/, this.getDescendant(name_1)];
-                    case 2:
-                        _d.apply(_c, [_e.sent()]);
-                        _e.label = 3;
-                    case 3:
-                        _i++;
-                        return [3 /*break*/, 1];
-                    case 4: return [2 /*return*/, children];
-                }
-            });
-        });
-    };
-    /**
-     *  Gets a descendant {@link Variant} of the current {@link Variant} relative to its {@link DottedPath}.
-     *  If you have the dotted path `_.product_x.variant_blue.with_yellow_highlight` in a tree and you operate on the
-     *  `product_x`, you can call `this.getDescendant('variant_blue.with_yellow_highlight')` to get the lowermost
-     *  {@link Variant}.
-     */
-    Variant.prototype.getDescendant = function (dottedPath) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _dottedPath, _a, name, descendantParts, variant, file, _b, _c, _d;
-            return tslib_1.__generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-                        _a = _dottedPath.parts, name = _a[0], descendantParts = _a.slice(1);
-                        if (!this._children.has(name)) return [3 /*break*/, 1];
-                        variant = this._children.get(name);
-                        return [3 /*break*/, 7];
-                    case 1:
-                        if (!this.structureJson.variants) {
-                            throw new Error("Missing key \"variants\" in JSON structure for variant \"" + this.id + "\".");
-                        }
-                        if (!this.structureJson.variants[name]) {
-                            throw new Error("Variant \"" + _dottedPath.path + "\" not defined in JSON structure for variant \"" + this.id + "\".");
-                        }
-                        if (!this.structureJson.variants[name].file) return [3 /*break*/, 4];
-                        file = this.structureJson.variants[name].file;
-                        _c = (_b = Variant).create;
-                        _d = [name];
-                        return [4 /*yield*/, resourceHelper_1.loadJson(file)];
-                    case 2: return [4 /*yield*/, _c.apply(_b, _d.concat([_e.sent(), this.viewer, this]))];
-                    case 3:
-                        variant = _e.sent();
-                        return [3 /*break*/, 6];
-                    case 4: return [4 /*yield*/, Variant.create(name, this.structureJson.variants[name], this.viewer, this)];
-                    case 5:
-                        variant = _e.sent();
-                        _e.label = 6;
-                    case 6:
-                        this._children.set(name, variant);
-                        _e.label = 7;
-                    case 7:
-                        if (!variant) {
-                            throw new Error("Variant \"" + _dottedPath.path + "\" was not created.");
-                        }
-                        if (!(descendantParts.length > 0)) return [3 /*break*/, 9];
-                        return [4 /*yield*/, variant.getDescendant(dottedPath_1.DottedPath.createFromParts(descendantParts))];
-                    case 8: return [2 /*return*/, _e.sent()];
-                    case 9: return [2 /*return*/, variant];
-                }
-            });
-        });
-    };
-    /**
-     * Gets the desired {@link Element} of the current {@link Variant} relative to its {@link DottedPath}.
-     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
-     */
-    Variant.prototype.getElement = function (dottedPath) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _dottedPath, elementName, variant, element;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-                        elementName = _dottedPath.popPart();
-                        variant = this;
-                        if (!(_dottedPath.parts.length > 0)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.getDescendant(_dottedPath)];
-                    case 1:
-                        variant = _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        if (variant.inheritedElements.length === 0) {
-                            throw new Error("No elements for variant \"" + variant.id + "\" found. " +
-                                "Either none are defined or they are not initialized (are you operating on the appropriate living?).");
-                        }
-                        variant.inheritedElements.forEach(function (_element) {
-                            if (_element.name === elementName) {
-                                element = _element;
-                            }
-                        });
-                        if (!element) {
-                            throw new Error("Element with name \"" + elementName + "\" does not exist for variant \"" + variant.id + "\".");
-                        }
-                        return [2 /*return*/, element];
-                }
-            });
-        });
-    };
-    /**
-     * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
-     */
-    Variant.prototype.getNode = function (elementDottedPath, nodeDottedPath) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var element;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getElement(elementDottedPath)];
-                    case 1:
-                        element = _a.sent();
-                        return [2 /*return*/, element.getNode(nodeDottedPath)];
-                }
-            });
-        });
-    };
-    /**
-     * A proxy for directly getting a Mesh from an {@link Element} by its {@link DottedPath}s.
-     */
-    Variant.prototype.getMesh = function (elementDottedPath, meshDottedPath) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var element;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getElement(elementDottedPath)];
-                    case 1:
-                        element = _a.sent();
-                        return [2 /*return*/, element.getMesh(meshDottedPath)];
-                }
-            });
-        });
-    };
-    /**
-     * Gets the Material defined in one of the variants glTFs by its id.
-     */
-    Variant.prototype.getMaterial = function (id) {
-        for (var _i = 0, _a = this.inheritedMaterials; _i < _a.length; _i++) {
-            var material = _a[_i];
-            if (material.id === id) {
-                return material;
-            }
-        }
-        // fallback to dynamically created materials on scene
-        for (var _b = 0, _c = this.viewer.scene.materials; _b < _c.length; _b++) {
-            var material = _c[_b];
-            if (material.id === id) {
-                return material;
-            }
-        }
-        throw new Error("Material with id \"" + id + "\" does not exist for variant \"" + this.id + "\".");
-    };
-    /**
-     * Creates a living clone of this {@link Variant}. Will clone all parent {@link Variant}s in tree.
-     *
-     * @emit {@link Event.VARIANT_CREATED}
-     * @ignore
-     */
-    Variant.prototype.createLiving = function (parameters) {
-        var _a;
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var parent, variant;
-            return tslib_1.__generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.createLiving())];
-                    case 1:
-                        parent = _b.sent();
-                        variant = new Variant(this.name, this._structureJson, this.viewer, parent);
-                        parent === null || parent === void 0 ? void 0 : parent._children.set(variant.name, variant);
-                        variant.assetContainer = this.assetContainer;
-                        variant.parameterObservers = lodash_es_1.cloneDeep(this.parameterObservers);
-                        variant.createElements();
-                        variant.addParameterObservers();
-                        return [4 /*yield*/, variant.bootstrapParameters(parameters)];
-                    case 2:
-                        _b.sent();
-                        this.broadcastEvent(event_1.Event.VARIANT_CREATED, variant);
-                        return [2 /*return*/, variant];
-                }
-            });
-        });
-    };
-    /**
-     * Destroys this {@link Variant}, all parents and destroy the {@link Element}s.
-     */
-    Variant.prototype.destroy = function () {
-        this.elements.forEach(function (element) { return element.destroy(); });
-        if (this.parent) {
-            this.parent.destroy();
-        }
-        this.broadcastEvent(event_1.Event.VARIANT_DESTROYED, this);
-        return this;
-    };
-    /**
-     * Places the given {@link ParameterBag} in the {@link Variant}'s parameters, replaces all patterns in the
-     * {@link StructureJson}, broadcasts all {@link ParameterObserver}s and delegates them to its {@link Element}s.
-     *
-     * @emit {@link Event.VARIANT_PARAMETER_COMMITTED}
-     */
-    Variant.prototype.commitParameters = function (parameters) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var oldParameters, _parameters, parameter, value, search, mergedParameters, structureParameters, _structureParameters, parameter, value, search, replacedStructureParameters, differentStructureParameters, parameter, newParameters, structure, parameter, value, search, observerPromises, _loop_1, this_1, parameter, elementPromises;
-            var _this = this;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        parameters = lodash_es_1.merge({}, parameters);
-                        oldParameters = lodash_es_1.cloneDeep(this.inheritedParameters);
-                        _parameters = JSON.stringify(parameters);
-                        for (parameter in this.inheritedParameters) {
-                            value = this.inheritedParameters[parameter];
-                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
-                            _parameters = _parameters.replace(search, value.toString());
-                        }
-                        lodash_es_1.merge(parameters, JSON.parse(_parameters));
-                        mergedParameters = lodash_es_1.merge({}, this.inheritedParameters, parameters);
-                        structureParameters = this._structureJson.parameters || {};
-                        _structureParameters = JSON.stringify(structureParameters);
-                        for (parameter in mergedParameters) {
-                            value = mergedParameters[parameter];
-                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
-                            _structureParameters = _structureParameters.replace(search, value.toString());
-                        }
-                        replacedStructureParameters = JSON.parse(_structureParameters);
-                        differentStructureParameters = {};
-                        for (parameter in replacedStructureParameters) {
-                            if (!lodash_es_1.isEqual(structureParameters[parameter], replacedStructureParameters[parameter])) {
-                                differentStructureParameters[parameter] = replacedStructureParameters[parameter];
-                            }
-                        }
-                        // merge replaced structure parameters and given inherited parameters to structure parameters
-                        lodash_es_1.merge(this.parameters, mergedParameters, differentStructureParameters);
-                        newParameters = this.inheritedParameters;
-                        structure = JSON.stringify(this._structureJson);
-                        for (parameter in newParameters) {
-                            value = newParameters[parameter];
-                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
-                            structure = structure.replace(search, value.toString());
-                        }
-                        this.structureJson = JSON.parse(structure);
-                        observerPromises = [];
-                        _loop_1 = function (parameter) {
-                            var oldParameterValue = oldParameters[parameter];
-                            var newParameterValue = newParameters[parameter];
-                            this_1.assertParameter(this_1.inheritedParameterDeclaration, parameter, newParameterValue);
-                            if (oldParameterValue === newParameterValue && this_1.parametersInitialized) {
-                                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 () {
-                                        if (_this.parametersInitialized) {
-                                            _this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_COMMITTED, _this, parameter, oldParameterValue, newParameterValue);
-                                        }
-                                    });
-                                }));
-                            }
-                        };
-                        this_1 = this;
-                        for (parameter in newParameters) {
-                            _loop_1(parameter);
-                        }
-                        return [4 /*yield*/, Promise.all(observerPromises)];
-                    case 1:
-                        _a.sent();
-                        // broadcast that bag has been committed
-                        this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
-                        elementPromises = this.elements.map(function (element) {
-                            var _elementDefinition = JSON.stringify(_this._structureJson.elements[element.name]);
-                            var elementParameters = {};
-                            for (var parameter in newParameters) {
-                                if (dottedPath_1.DottedPath.create(parameter).firstPart !== element.name) {
-                                    continue;
-                                }
-                                // we got an element parameter
-                                var newParameterValue = newParameters[parameter];
-                                var elementParameter = parameter.replace(element.name + ".", '');
-                                // If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
-                                // an exception for visibility to avoid overloading already applied element parameters with element parameters
-                                // defined in the variant spec ("dotted parameters").
-                                // @see https://github.com/Combeenation/3d-viewer/issues/44
-                                if (elementParameter === parameter_1.Parameter.VISIBLE && newParameters[parameter_1.Parameter.VISIBLE] === false) {
-                                    newParameterValue = false;
-                                }
-                                elementParameters[elementParameter] = newParameterValue;
-                                var search = new RegExp("\\$\\{" + elementParameter + "\\}", 'g');
-                                _elementDefinition = _elementDefinition.replace(search, newParameterValue.toString());
-                            }
-                            _this.structureJson.elements[_this.name] = JSON.parse(_elementDefinition);
-                            return element.commitParameters(elementParameters);
-                        });
-                        return [4 /*yield*/, Promise.all(elementPromises)];
-                    case 2:
-                        _a.sent();
-                        if (!this.parent) return [3 /*break*/, 4];
-                        return [4 /*yield*/, this.parent.commitParameters(this.parameters)];
-                    case 3:
-                        _a.sent();
-                        _a.label = 4;
-                    case 4: return [2 /*return*/, this];
-                }
-            });
-        });
-    };
-    /**
-     * Adds an observer function for camera matrix changes for given `dottedPath` representing the {@link Element}
-     * and the `traceable`. The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
-     */
-    Variant.prototype.addTraceableObserver = function (dottedPath, observer, payload) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _dottedPath, traceableName, element;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-                        traceableName = _dottedPath.popPart();
-                        if (!traceableName) {
-                            throw new Error("The dottedPath must consist of the element and the name of the defined corresponding " +
-                                ("traceable (\"" + _dottedPath.path + "\" given)."));
-                        }
-                        return [4 /*yield*/, this.getElement(_dottedPath)];
-                    case 1:
-                        element = _a.sent();
-                        return [2 /*return*/, element.addTraceableObserver(traceableName, observer, payload)];
-                }
-            });
-        });
-    };
-    /**
-     * Loads {@link glTFUri} with assets, adds them to the {@link Variant}'s `assetContainer` and deactivates the meshes.
-     * (for further processing).
-     * @emits {@link Event.ASSET_LOADING_START}
-     * @emits {@link Event.ASSET_LOADING_END}
-     */
-    Variant.prototype.loadAssets = function () {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return tslib_1.__generator(this, function (_a) {
-                this.broadcastEvent(event_1.Event.ASSET_LOADING_START, this);
-                return [2 /*return*/, new Promise(function (resolve) {
-                        if (!_this.structureJson) {
-                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
-                            return resolve(_this);
-                        }
-                        if (!_this.glTF) {
-                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
-                            return resolve(_this);
-                        }
-                        sceneLoader_1.SceneLoader.LoadAssetContainerAsync(_this.glTF.rootUrl, _this.glTF.fileName, _this.viewer.scene).then(function (container) {
-                            _this.assetContainer = container;
-                            var nodes = _this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode; });
-                            nodes.forEach(function (node) {
-                                babylonHelper_1.deactivateTransformNode(node, false);
-                                babylonHelper_1.injectTransformNodeMetadata(node, { dottedPath: babylonHelper_1.getDottedPathForTransformNode(node) }, false);
-                            });
-                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
-                            resolve(_this);
-                        }).catch(function (reason) {
-                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
-                            throw new Error("Error loading assets for variant \"" + _this.id + "\": " + reason + ".");
-                        });
-                    })];
-            });
-        });
-    };
-    /**
-     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
-     */
-    Variant.prototype.commitParameterToElements = function (parameter, value) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var promises, _i, _a, element;
-            return tslib_1.__generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        promises = [];
-                        for (_i = 0, _a = this.elements; _i < _a.length; _i++) {
-                            element = _a[_i];
-                            promises.push(element.commitParameter(parameter, value));
-                        }
-                        return [4 /*yield*/, Promise.all(promises)];
-                    case 1:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
-     */
-    Variant.prototype.addParameterObservers = function () {
-        var _this = this;
-        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.VISIBLE, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.SCALING, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_COLOR, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_METALLNESS, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_ROUGHNESS, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHT_COLOR, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHTED, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.POSITION, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
-            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.ROTATION, newValue)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }
-        ]);
-        return this;
-    };
-    /**
-     * Creates {@link Element}s and clones nodes into them.
-     */
-    Variant.prototype.createElements = function () {
-        var _this = this;
-        for (var elementName in this.structureJson.elements || {}) {
-            this.elements.push(new element_1.Element(this, elementName));
-        }
-        // inject node meta to all inherited elements
-        // we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
-        this.inheritedElements.forEach(function (element) {
-            element.nodes.forEach(function (node) {
-                babylonHelper_1.injectTransformNodeMetadata(node, { variant: _this, element: element });
-            });
-        });
-        return this;
-    };
-    /**
-     * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
-     */
-    Variant.prototype.bootstrapParameters = function (parameters) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.commitParameters(lodash_es_1.merge(lodash_es_1.cloneDeep(this.parameters), parameters))];
-                    case 1:
-                        _a.sent();
-                        lodash_es_1.concat(this.ancestors, this).forEach(function (ancestor) { return ancestor.parametersInitialized = true; });
-                        return [2 /*return*/, this];
-                }
-            });
-        });
-    };
-    return Variant;
-}(elementParameterizable_1.ElementParameterizable));
-exports.Variant = Variant;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variant = void 0;
+var tslib_1 = require("tslib");
+var assetContainer_1 = require("@babylonjs/core/assetContainer");
+require("@babylonjs/core/Loading/Plugins/babylonFileLoader");
+var sceneLoader_1 = require("@babylonjs/core/Loading/sceneLoader");
+var transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform");
+require("@babylonjs/loaders/glTF/2.0/glTFLoader");
+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 element_1 = require("./element");
+var elementParameterizable_1 = require("./elementParameterizable");
+var event_1 = require("./event");
+var parameter_1 = require("./parameter");
+/**
+ * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
+ */
+var Variant = /** @class */ (function (_super) {
+    tslib_1.__extends(Variant, _super);
+    /**
+     * Constructor.
+     */
+    function Variant(name, _structureJson, viewer, parent) {
+        var _this = _super.call(this, lodash_es_1.cloneDeep(_structureJson.parameterDeclaration), lodash_es_1.cloneDeep(_structureJson.parameters)) || this;
+        _this.name = name;
+        _this._structureJson = _structureJson;
+        _this.viewer = viewer;
+        _this.parent = parent;
+        _this.elements = [];
+        _this._children = new Map();
+        _this._parameterObservers = new Map();
+        /**
+         * @internal
+         */
+        _this.parametersInitialized = false;
+        for (var parameter in _structureJson.parameterDeclaration) {
+            if (!(parameter in (_structureJson.parameters || []))) {
+                throw new Error("No default value for parameter \"" + parameter + "\" defined.");
+            }
+        }
+        _this.assetContainer = new assetContainer_1.AssetContainer(viewer.scene);
+        _this.structureJson = lodash_es_1.cloneDeep(_structureJson);
+        return _this;
+    }
+    /**
+     * Creates a {@link Variant} based on given parameters.
+     *
+     * @throws Error if "gltf" property is provided without a filename
+     */
+    Variant.create = function (name, structureJson, viewer, parent) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var variant;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        variant = new Variant(name, structureJson, viewer, parent);
+                        return [4 /*yield*/, variant.loadAssets()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, variant];
+                }
+            });
+        });
+    };
+    Object.defineProperty(Variant.prototype, "ancestors", {
+        /**
+         * The ancestor {@link Variant}s ordered from top to bottom in the built tree.
+         */
+        get: function () {
+            var ancestors = [];
+            var variant = this;
+            while (variant.parent) {
+                ancestors.unshift(variant.parent);
+                variant = variant.parent;
+            }
+            return ancestors;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "root", {
+        /**
+         * The root {@link Variant}.
+         */
+        get: function () {
+            var _a;
+            return (_a = this.ancestors[0]) !== null && _a !== void 0 ? _a : this;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "dottedPath", {
+        /**
+         * The {@link DottedPath} in the built tree of {@link Variant}s.
+         * E.g. "_.top-1.sub-2.sub-sub-3"
+         */
+        get: function () {
+            var parentIds = this.ancestors.map(function (ancestor) {
+                return ancestor.name;
+            });
+            return dottedPath_1.DottedPath.createFromParts(parentIds).addPart(this.name);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.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(Variant.prototype, "glTF", {
+        /**
+         * The defined glTF Asset.
+         */
+        get: function () {
+            if (this.structureJson.glTF) {
+                if (lodash_es_1.isString(this.structureJson.glTF)) {
+                    return {
+                        rootUrl: this.structureJson.glTF,
+                        fileName: undefined
+                    };
+                }
+                if (lodash_es_1.isEmpty(this.structureJson.glTF.rootUrl)) {
+                    throw new Error("No \"rootUrl\" defined in \"glTF\" definition for variant \"" + this.id + "\".");
+                }
+                return this.structureJson.glTF;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "glTFUri", {
+        /**
+         * The defined glTF URI.
+         */
+        get: function () {
+            if (this.glTF) {
+                return [this.glTF.rootUrl, this.glTF.fileName].join('');
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedGlTFUri", {
+        /**
+         * The inherited defined glTF URI.
+         */
+        get: function () {
+            if (!this.glTFUri && this.parent) {
+                return this.parent.inheritedGlTFUri;
+            }
+            return this.glTFUri;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "nodes", {
+        /**
+         * The TransformNodes of the {@link Variant}.
+         */
+        get: function () {
+            var rootNodes = this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode && !n.parent; });
+            return rootNodes;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "dottedNodes", {
+        /**
+         * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
+         */
+        get: function () {
+            if (!this._dottedNodes) {
+                var nodes = this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode; });
+                var dottedNodes_1 = new Map();
+                nodes.forEach(function (node) {
+                    dottedNodes_1.set(node.metadata.dottedPath, node);
+                });
+                this._dottedNodes = dottedNodes_1;
+            }
+            return this._dottedNodes;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "materials", {
+        /**
+         * The Materials of the {@link Variant}.
+         */
+        get: function () {
+            return this.assetContainer.materials;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedElements", {
+        /**
+         * All {@link Element}s from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var elements = [];
+            this.ancestors.forEach(function (ancestor) {
+                elements = lodash_es_1.concat(elements, ancestor.elements);
+            });
+            return lodash_es_1.concat(elements, this.elements);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedNodes", {
+        /**
+         * All TransformNodes inherited from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var nodes = [];
+            this.ancestors.forEach(function (ancestor) {
+                nodes = lodash_es_1.concat(nodes, ancestor.nodes);
+            });
+            return lodash_es_1.concat(nodes, this.nodes);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedDottedNodes", {
+        /**
+         * All TransformNodes inherited from this {@link Variant}'s parents mapped flat with a {@link DottedPath}.
+         */
+        get: function () {
+            var dottedNodes = this.dottedNodes;
+            this.ancestors.forEach(function (ancestor) {
+                dottedNodes = resourceHelper_1.mergeMaps(dottedNodes, ancestor.dottedNodes);
+            });
+            return dottedNodes;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedParameterDeclaration", {
+        /**
+         * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var declaration = {};
+            this.ancestors.forEach(function (ancestor) {
+                lodash_es_1.merge(declaration, ancestor.parameterDeclaration);
+            });
+            return lodash_es_1.merge(declaration, this.parameterDeclaration);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedParameters", {
+        /**
+         * The {@link ParameterBag} inherited from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var parameters = {};
+            this.ancestors.forEach(function (ancestor) {
+                lodash_es_1.merge(parameters, ancestor.parameters);
+            });
+            return lodash_es_1.merge(parameters, this.parameters);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Variant.prototype, "inheritedMaterials", {
+        /**
+         * All Materials from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var materials = [];
+            this.ancestors.forEach(function (ancestor) {
+                materials = lodash_es_1.concat(materials, ancestor.materials);
+            });
+            return lodash_es_1.concat(materials, this.materials);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Gets the direct children of the current {@link Variant}.
+     */
+    Variant.prototype.getChildren = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var children, _a, _b, _i, name_1, _c, _d;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        children = [];
+                        _a = [];
+                        for (_b in this.structureJson.variants)
+                            _a.push(_b);
+                        _i = 0;
+                        _e.label = 1;
+                    case 1:
+                        if (!(_i < _a.length)) return [3 /*break*/, 4];
+                        name_1 = _a[_i];
+                        _d = (_c = children).push;
+                        return [4 /*yield*/, this.getDescendant(name_1)];
+                    case 2:
+                        _d.apply(_c, [_e.sent()]);
+                        _e.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/, children];
+                }
+            });
+        });
+    };
+    /**
+     *  Gets a descendant {@link Variant} of the current {@link Variant} relative to its {@link DottedPath}.
+     *  If you have the dotted path `_.product_x.variant_blue.with_yellow_highlight` in a tree and you operate on the
+     *  `product_x`, you can call `this.getDescendant('variant_blue.with_yellow_highlight')` to get the lowermost
+     *  {@link Variant}.
+     */
+    Variant.prototype.getDescendant = function (dottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _dottedPath, _a, name, descendantParts, variant, file, _b, _c, _d;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+                        _a = _dottedPath.parts, name = _a[0], descendantParts = _a.slice(1);
+                        if (!this._children.has(name)) return [3 /*break*/, 1];
+                        variant = this._children.get(name);
+                        return [3 /*break*/, 7];
+                    case 1:
+                        if (!this.structureJson.variants) {
+                            throw new Error("Missing key \"variants\" in JSON structure for variant \"" + this.id + "\".");
+                        }
+                        if (!this.structureJson.variants[name]) {
+                            throw new Error("Variant \"" + _dottedPath.path + "\" not defined in JSON structure for variant \"" + this.id + "\".");
+                        }
+                        if (!this.structureJson.variants[name].file) return [3 /*break*/, 4];
+                        file = this.structureJson.variants[name].file;
+                        _c = (_b = Variant).create;
+                        _d = [name];
+                        return [4 /*yield*/, resourceHelper_1.loadJson(file)];
+                    case 2: return [4 /*yield*/, _c.apply(_b, _d.concat([_e.sent(), this.viewer, this]))];
+                    case 3:
+                        variant = _e.sent();
+                        return [3 /*break*/, 6];
+                    case 4: return [4 /*yield*/, Variant.create(name, this.structureJson.variants[name], this.viewer, this)];
+                    case 5:
+                        variant = _e.sent();
+                        _e.label = 6;
+                    case 6:
+                        this._children.set(name, variant);
+                        _e.label = 7;
+                    case 7:
+                        if (!variant) {
+                            throw new Error("Variant \"" + _dottedPath.path + "\" was not created.");
+                        }
+                        if (!(descendantParts.length > 0)) return [3 /*break*/, 9];
+                        return [4 /*yield*/, variant.getDescendant(dottedPath_1.DottedPath.createFromParts(descendantParts))];
+                    case 8: return [2 /*return*/, _e.sent()];
+                    case 9: return [2 /*return*/, variant];
+                }
+            });
+        });
+    };
+    /**
+     * Gets the desired {@link Element} of the current {@link Variant} relative to its {@link DottedPath}.
+     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
+     */
+    Variant.prototype.getElement = function (dottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _dottedPath, elementName, variant, element;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+                        elementName = _dottedPath.popPart();
+                        variant = this;
+                        if (!(_dottedPath.parts.length > 0)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.getDescendant(_dottedPath)];
+                    case 1:
+                        variant = _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        if (variant.inheritedElements.length === 0) {
+                            throw new Error("No elements for variant \"" + variant.id + "\" found. " +
+                                "Either none are defined or they are not initialized (are you operating on the appropriate living?).");
+                        }
+                        variant.inheritedElements.forEach(function (_element) {
+                            if (_element.name === elementName) {
+                                element = _element;
+                            }
+                        });
+                        if (!element) {
+                            throw new Error("Element with name \"" + elementName + "\" does not exist for variant \"" + variant.id + "\".");
+                        }
+                        return [2 /*return*/, element];
+                }
+            });
+        });
+    };
+    /**
+     * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
+     */
+    Variant.prototype.getNode = function (elementDottedPath, nodeDottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var element;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getElement(elementDottedPath)];
+                    case 1:
+                        element = _a.sent();
+                        return [2 /*return*/, element.getNode(nodeDottedPath)];
+                }
+            });
+        });
+    };
+    /**
+     * A proxy for directly getting a Mesh from an {@link Element} by its {@link DottedPath}s.
+     */
+    Variant.prototype.getMesh = function (elementDottedPath, meshDottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var element;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getElement(elementDottedPath)];
+                    case 1:
+                        element = _a.sent();
+                        return [2 /*return*/, element.getMesh(meshDottedPath)];
+                }
+            });
+        });
+    };
+    /**
+     * Gets the Material defined in one of the variants glTFs by its id.
+     */
+    Variant.prototype.getMaterial = function (id) {
+        for (var _i = 0, _a = this.inheritedMaterials; _i < _a.length; _i++) {
+            var material = _a[_i];
+            if (material.id === id) {
+                return material;
+            }
+        }
+        // fallback to dynamically created materials on scene
+        for (var _b = 0, _c = this.viewer.scene.materials; _b < _c.length; _b++) {
+            var material = _c[_b];
+            if (material.id === id) {
+                return material;
+            }
+        }
+        throw new Error("Material with id \"" + id + "\" does not exist for variant \"" + this.id + "\".");
+    };
+    /**
+     * Creates a living clone of this {@link Variant}. Will clone all parent {@link Variant}s in tree.
+     *
+     * @emit {@link Event.VARIANT_CREATED}
+     * @ignore
+     */
+    Variant.prototype.createLiving = function (parameters) {
+        var _a;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var parent, variant;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.createLiving())];
+                    case 1:
+                        parent = _b.sent();
+                        variant = new Variant(this.name, this._structureJson, this.viewer, parent);
+                        parent === null || parent === void 0 ? void 0 : parent._children.set(variant.name, variant);
+                        variant.assetContainer = this.assetContainer;
+                        variant.parameterObservers = lodash_es_1.cloneDeep(this.parameterObservers);
+                        variant.createElements();
+                        variant.addParameterObservers();
+                        return [4 /*yield*/, variant.bootstrapParameters(parameters)];
+                    case 2:
+                        _b.sent();
+                        this.broadcastEvent(event_1.Event.VARIANT_CREATED, variant);
+                        return [2 /*return*/, variant];
+                }
+            });
+        });
+    };
+    /**
+     * Destroys this {@link Variant}, all parents and destroy the {@link Element}s.
+     */
+    Variant.prototype.destroy = function () {
+        this.elements.forEach(function (element) { return element.destroy(); });
+        if (this.parent) {
+            this.parent.destroy();
+        }
+        this.broadcastEvent(event_1.Event.VARIANT_DESTROYED, this);
+        return this;
+    };
+    /**
+     * Places the given {@link ParameterBag} in the {@link Variant}'s parameters, replaces all patterns in the
+     * {@link StructureJson}, broadcasts all {@link ParameterObserver}s and delegates them to its {@link Element}s.
+     *
+     * @emit {@link Event.VARIANT_PARAMETER_COMMITTED}
+     */
+    Variant.prototype.commitParameters = function (parameters) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var oldParameters, _parameters, parameter, value, search, mergedParameters, structureParameters, _structureParameters, parameter, value, search, replacedStructureParameters, differentStructureParameters, parameter, newParameters, structure, parameter, value, search, observerPromises, _loop_1, this_1, parameter, elementPromises;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        parameters = lodash_es_1.merge({}, parameters);
+                        oldParameters = lodash_es_1.cloneDeep(this.inheritedParameters);
+                        _parameters = JSON.stringify(parameters);
+                        for (parameter in this.inheritedParameters) {
+                            value = this.inheritedParameters[parameter];
+                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
+                            _parameters = _parameters.replace(search, value.toString());
+                        }
+                        lodash_es_1.merge(parameters, JSON.parse(_parameters));
+                        mergedParameters = lodash_es_1.merge({}, this.inheritedParameters, parameters);
+                        structureParameters = this._structureJson.parameters || {};
+                        _structureParameters = JSON.stringify(structureParameters);
+                        for (parameter in mergedParameters) {
+                            value = mergedParameters[parameter];
+                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
+                            _structureParameters = _structureParameters.replace(search, value.toString());
+                        }
+                        replacedStructureParameters = JSON.parse(_structureParameters);
+                        differentStructureParameters = {};
+                        for (parameter in replacedStructureParameters) {
+                            if (!lodash_es_1.isEqual(structureParameters[parameter], replacedStructureParameters[parameter])) {
+                                differentStructureParameters[parameter] = replacedStructureParameters[parameter];
+                            }
+                        }
+                        // merge replaced structure parameters and given inherited parameters to structure parameters
+                        lodash_es_1.merge(this.parameters, mergedParameters, differentStructureParameters);
+                        newParameters = this.inheritedParameters;
+                        structure = JSON.stringify(this._structureJson);
+                        for (parameter in newParameters) {
+                            value = newParameters[parameter];
+                            search = new RegExp("\\$\\{" + parameter + "\\}", 'g');
+                            structure = structure.replace(search, value.toString());
+                        }
+                        this.structureJson = JSON.parse(structure);
+                        observerPromises = [];
+                        _loop_1 = function (parameter) {
+                            var oldParameterValue = oldParameters[parameter];
+                            var newParameterValue = newParameters[parameter];
+                            this_1.assertParameter(this_1.inheritedParameterDeclaration, parameter, newParameterValue);
+                            if (oldParameterValue === newParameterValue && this_1.parametersInitialized) {
+                                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 () {
+                                        if (_this.parametersInitialized) {
+                                            _this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_COMMITTED, _this, parameter, oldParameterValue, newParameterValue);
+                                        }
+                                    });
+                                }));
+                            }
+                        };
+                        this_1 = this;
+                        for (parameter in newParameters) {
+                            _loop_1(parameter);
+                        }
+                        return [4 /*yield*/, Promise.all(observerPromises)];
+                    case 1:
+                        _a.sent();
+                        // broadcast that bag has been committed
+                        this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
+                        elementPromises = this.elements.map(function (element) {
+                            var _elementDefinition = JSON.stringify(_this._structureJson.elements[element.name]);
+                            var elementParameters = {};
+                            for (var parameter in newParameters) {
+                                if (dottedPath_1.DottedPath.create(parameter).firstPart !== element.name) {
+                                    continue;
+                                }
+                                // we got an element parameter
+                                var newParameterValue = newParameters[parameter];
+                                var elementParameter = parameter.replace(element.name + ".", '');
+                                // If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
+                                // an exception for visibility to avoid overloading already applied element parameters with element parameters
+                                // defined in the variant spec ("dotted parameters").
+                                // @see https://github.com/Combeenation/3d-viewer/issues/44
+                                if (elementParameter === parameter_1.Parameter.VISIBLE && newParameters[parameter_1.Parameter.VISIBLE] === false) {
+                                    newParameterValue = false;
+                                }
+                                elementParameters[elementParameter] = newParameterValue;
+                                var search = new RegExp("\\$\\{" + elementParameter + "\\}", 'g');
+                                _elementDefinition = _elementDefinition.replace(search, newParameterValue.toString());
+                            }
+                            _this.structureJson.elements[_this.name] = JSON.parse(_elementDefinition);
+                            return element.commitParameters(elementParameters);
+                        });
+                        return [4 /*yield*/, Promise.all(elementPromises)];
+                    case 2:
+                        _a.sent();
+                        if (!this.parent) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.parent.commitParameters(this.parameters)];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4: return [2 /*return*/, this];
+                }
+            });
+        });
+    };
+    /**
+     * Adds an observer function for camera matrix changes for given `dottedPath` representing the {@link Element}
+     * and the `traceable`. The `observer` gets 2 parameters: the `AbstractMesh` and a `ClientRect` object.
+     */
+    Variant.prototype.addTraceableObserver = function (dottedPath, observer, payload) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _dottedPath, traceableName, element;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+                        traceableName = _dottedPath.popPart();
+                        if (!traceableName) {
+                            throw new Error("The dottedPath must consist of the element and the name of the defined corresponding " +
+                                ("traceable (\"" + _dottedPath.path + "\" given)."));
+                        }
+                        return [4 /*yield*/, this.getElement(_dottedPath)];
+                    case 1:
+                        element = _a.sent();
+                        return [2 /*return*/, element.addTraceableObserver(traceableName, observer, payload)];
+                }
+            });
+        });
+    };
+    /**
+     * Loads {@link glTFUri} with assets, adds them to the {@link Variant}'s `assetContainer` and deactivates the meshes.
+     * (for further processing).
+     * @emits {@link Event.ASSET_LOADING_START}
+     * @emits {@link Event.ASSET_LOADING_END}
+     */
+    Variant.prototype.loadAssets = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                this.broadcastEvent(event_1.Event.ASSET_LOADING_START, this);
+                return [2 /*return*/, new Promise(function (resolve) {
+                        if (!_this.structureJson) {
+                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
+                            return resolve(_this);
+                        }
+                        if (!_this.glTF) {
+                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
+                            return resolve(_this);
+                        }
+                        sceneLoader_1.SceneLoader.LoadAssetContainerAsync(_this.glTF.rootUrl, _this.glTF.fileName, _this.viewer.scene).then(function (container) {
+                            _this.assetContainer = container;
+                            var nodes = _this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode; });
+                            nodes.forEach(function (node) {
+                                babylonHelper_1.deactivateTransformNode(node, false);
+                                babylonHelper_1.injectTransformNodeMetadata(node, { dottedPath: babylonHelper_1.getDottedPathForTransformNode(node) }, false);
+                            });
+                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
+                            resolve(_this);
+                        }).catch(function (reason) {
+                            _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
+                            throw new Error("Error loading assets for variant \"" + _this.id + "\": " + reason + ".");
+                        });
+                    })];
+            });
+        });
+    };
+    /**
+     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
+     */
+    Variant.prototype.commitParameterToElements = function (parameter, value) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var promises, _i, _a, element;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        promises = [];
+                        for (_i = 0, _a = this.elements; _i < _a.length; _i++) {
+                            element = _a[_i];
+                            promises.push(element.commitParameter(parameter, value));
+                        }
+                        return [4 /*yield*/, Promise.all(promises)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+     */
+    Variant.prototype.addParameterObservers = function () {
+        var _this = this;
+        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.VISIBLE, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.SCALING, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_COLOR, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_METALLNESS, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_ROUGHNESS, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHT_COLOR, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHTED, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.POSITION, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.ROTATION, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        return this;
+    };
+    /**
+     * Creates {@link Element}s and clones nodes into them.
+     */
+    Variant.prototype.createElements = function () {
+        var _this = this;
+        for (var elementName in this.structureJson.elements || {}) {
+            this.elements.push(new element_1.Element(this, elementName));
+        }
+        // inject node meta to all inherited elements
+        // we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
+        this.inheritedElements.forEach(function (element) {
+            element.nodes.forEach(function (node) {
+                babylonHelper_1.injectTransformNodeMetadata(node, { variant: _this, element: element });
+            });
+        });
+        return this;
+    };
+    /**
+     * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
+     */
+    Variant.prototype.bootstrapParameters = function (parameters) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.commitParameters(lodash_es_1.merge(lodash_es_1.cloneDeep(this.parameters), parameters))];
+                    case 1:
+                        _a.sent();
+                        lodash_es_1.concat(this.ancestors, this).forEach(function (ancestor) { return ancestor.parametersInitialized = true; });
+                        return [2 /*return*/, this];
+                }
+            });
+        });
+    };
+    return Variant;
+}(elementParameterizable_1.ElementParameterizable));
+exports.Variant = Variant;
 //# sourceMappingURL=variant.js.map