@combeenation/3d-viewer 6.1.0 → 6.2.0

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

@@ -1,829 +1,842 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Variant = void 0;
-const babylonHelper_1 = require("../util/babylonHelper");
-const resourceHelper_1 = require("../util/resourceHelper");
-const sceneLoaderHelper_1 = require("../util/sceneLoaderHelper");
-const dottedPath_1 = require("./dottedPath");
-const element_1 = require("./element");
-const event_1 = require("./event");
-const parameter_1 = require("./parameter");
-const parameterizable_1 = require("./parameterizable");
-const viewerLight_1 = require("./viewerLight");
-require("@babylonjs/core/Loading/Plugins/babylonFileLoader");
-const sceneLoader_1 = require("@babylonjs/core/Loading/sceneLoader");
-const transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
-const assetContainer_1 = require("@babylonjs/core/assetContainer");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat");
-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_sheen");
-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");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu");
-require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform");
-require("@babylonjs/loaders/glTF/2.0/glTFLoader");
-const lodash_es_1 = require("lodash-es");
-/**
- * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
- */
-class Variant extends parameterizable_1.Parameterizable {
-    /**
-     * Constructor.
-     */
-    constructor(name, _structureJson, viewer, parent) {
-        super((0, lodash_es_1.cloneDeep)(_structureJson.parameterDeclaration), (0, lodash_es_1.cloneDeep)(_structureJson.parameters));
-        this.name = name;
-        this._structureJson = _structureJson;
-        this.viewer = viewer;
-        this.parent = parent;
-        this.elements = [];
-        this.viewerLights = [];
-        this._children = new Map();
-        this._parameterObservers = new Map();
-        /**
-         * @internal
-         */
-        this.parametersInitialized = false;
-        for (const 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 = (0, lodash_es_1.cloneDeep)(_structureJson);
-    }
-    /**
-     * Creates a {@link Variant} based on given parameters.
-     *
-     * @throws Error if "gltf" property is provided without a filename
-     */
-    static create(name, structureJson, viewer, parent) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const variant = new Variant(name, structureJson, viewer, parent);
-            yield variant.loadAssets();
-            return variant;
-        });
-    }
-    /**
-     * The ancestor {@link Variant}s ordered from top to bottom in the built tree.
-     */
-    get ancestors() {
-        const ancestors = [];
-        let variant = this;
-        while (variant.parent) {
-            ancestors.unshift(variant.parent);
-            variant = variant.parent;
-        }
-        return ancestors;
-    }
-    /**
-     * The root {@link Variant}.
-     */
-    get root() {
-        var _a;
-        return (_a = this.ancestors[0]) !== null && _a !== void 0 ? _a : this;
-    }
-    /**
-     * The {@link DottedPath} in the built tree of {@link Variant}s.
-     * E.g. "_.top-1.sub-2.sub-sub-3"
-     */
-    get dottedPath() {
-        const parentIds = this.ancestors.map(ancestor => {
-            return ancestor.name;
-        });
-        return dottedPath_1.DottedPath.createFromParts(parentIds).addPart(this.name);
-    }
-    /**
-     * The id representing a {@link DottedPath}.
-     */
-    get id() {
-        const dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
-        dottedPath.shiftPart(); // remove root
-        return dottedPath.path || '_';
-    }
-    /**
-     * The defined glTF Asset.
-     */
-    get glTF() {
-        if (this.structureJson.glTF) {
-            if ((0, lodash_es_1.isString)(this.structureJson.glTF)) {
-                return {
-                    rootUrl: this.structureJson.glTF,
-                    fileName: undefined,
-                };
-            }
-            if ((0, 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;
-        }
-    }
-    /**
-     * The defined glTF URI.
-     */
-    get glTFUri() {
-        if (this.glTF) {
-            return [this.glTF.rootUrl, this.glTF.fileName].join('');
-        }
-    }
-    /**
-     * The inherited defined glTF URI.
-     */
-    get inheritedGlTFUri() {
-        if (!this.glTFUri && this.parent) {
-            return this.parent.inheritedGlTFUri;
-        }
-        return this.glTFUri;
-    }
-    /**
-     * The TransformNodes of the {@link Variant}.
-     */
-    get nodes() {
-        const rootNodes = this.assetContainer
-            .getNodes()
-            .filter(n => n instanceof transformNode_1.TransformNode && !n.parent);
-        return rootNodes;
-    }
-    /**
-     * The {@link ViewerLight}s of the {@link Variant}.
-     */
-    get lights() {
-        return this.assetContainer.lights;
-    }
-    /**
-     * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
-     */
-    get dottedNodes() {
-        if (!this._dottedNodes) {
-            const nodes = this.assetContainer.getNodes().filter(n => n instanceof transformNode_1.TransformNode);
-            const dottedNodes = new Map();
-            nodes.forEach(node => {
-                dottedNodes.set(node.metadata.dottedPath, node);
-            });
-            this._dottedNodes = dottedNodes;
-        }
-        return this._dottedNodes;
-    }
-    /**
-     * The Materials of the {@link Variant}.
-     */
-    get materials() {
-        return this.assetContainer.materials;
-    }
-    /**
-     * All {@link Element}s from this {@link Variant}'s parents.
-     */
-    get inheritedElements() {
-        let elements = [];
-        this.ancestors.forEach(ancestor => {
-            elements = (0, lodash_es_1.concat)(elements, ancestor.elements);
-        });
-        return (0, lodash_es_1.concat)(elements, this.elements);
-    }
-    /**
-     * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
-     */
-    get inheritedViewerLights() {
-        let viewerLights = [];
-        this.ancestors.forEach(ancestor => {
-            viewerLights = (0, lodash_es_1.concat)(viewerLights, ancestor.viewerLights);
-        });
-        return (0, lodash_es_1.concat)(viewerLights, this.viewerLights);
-    }
-    /**
-     * All TransformNodes inherited from this {@link Variant}'s parents.
-     */
-    get inheritedNodes() {
-        let nodes = [];
-        this.ancestors.forEach(ancestor => {
-            nodes = (0, lodash_es_1.concat)(nodes, ancestor.nodes);
-        });
-        return (0, lodash_es_1.concat)(nodes, this.nodes);
-    }
-    /**
-     * All TransformNodes inherited from this {@link Variant}'s parents mapped flat with a {@link DottedPath}.
-     */
-    get inheritedDottedNodes() {
-        let dottedNodes = this.dottedNodes;
-        this.ancestors.forEach(ancestor => {
-            dottedNodes = (0, resourceHelper_1.mergeMaps)(dottedNodes, ancestor.dottedNodes);
-        });
-        return dottedNodes;
-    }
-    /**
-     * All Lights inherited from this {@link Variant}'s parents.
-     */
-    get inheritedLights() {
-        let lights = [];
-        this.ancestors.forEach(ancestor => {
-            lights = (0, lodash_es_1.concat)(lights, ancestor.lights);
-        });
-        return (0, lodash_es_1.concat)(lights, this.lights);
-    }
-    /**
-     * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
-     */
-    get inheritedParameterDeclaration() {
-        const declaration = {};
-        this.ancestors.forEach(ancestor => {
-            (0, lodash_es_1.merge)(declaration, ancestor.parameterDeclaration);
-        });
-        return (0, lodash_es_1.merge)(declaration, this.parameterDeclaration);
-    }
-    /**
-     * The {@link ParameterBag} inherited from this {@link Variant}'s parents.
-     */
-    get inheritedParameters() {
-        const parameters = {};
-        this.ancestors.forEach(ancestor => {
-            (0, lodash_es_1.merge)(parameters, ancestor.parameters);
-        });
-        return (0, lodash_es_1.merge)(parameters, this.parameters);
-    }
-    /**
-     * All Materials from this {@link Variant}'s parents.
-     */
-    get inheritedMaterials() {
-        let materials = [];
-        this.ancestors.forEach(ancestor => {
-            materials = (0, lodash_es_1.concat)(materials, ancestor.materials);
-        });
-        return (0, lodash_es_1.concat)(materials, this.materials);
-    }
-    /**
-     * Gets the direct children of the current {@link Variant}.
-     */
-    getChildren() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const children = [];
-            for (const name in this.structureJson.variants) {
-                children.push(yield this.getDescendant(name));
-            }
-            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}.
-     */
-    getDescendant(dottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-            const [name, ...descendantParts] = _dottedPath.parts;
-            let variant;
-            if (this._children.has(name)) {
-                variant = this._children.get(name);
-            }
-            else {
-                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) {
-                    const file = this.structureJson.variants[name].file;
-                    variant = yield Variant.create(name, yield (0, resourceHelper_1.loadJson)(file), this.viewer, this);
-                }
-                else {
-                    variant = yield Variant.create(name, this.structureJson.variants[name], this.viewer, this);
-                }
-                this._children.set(name, variant);
-            }
-            if (!variant) {
-                throw new Error(`Variant "${_dottedPath.path}" was not created.`);
-            }
-            if (descendantParts.length > 0) {
-                return yield variant.getDescendant(dottedPath_1.DottedPath.createFromParts(descendantParts));
-            }
-            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.
-     */
-    getElement(dottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-            const elementName = _dottedPath.popPart();
-            let variant = this;
-            if (_dottedPath.parts.length > 0) {
-                variant = yield this.getDescendant(_dottedPath);
-            }
-            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?).`);
-            }
-            let element;
-            variant.inheritedElements.forEach(_element => {
-                if (_element.name === elementName) {
-                    element = _element;
-                }
-            });
-            if (!element) {
-                throw new Error(`Element with name "${elementName}" does not exist for variant "${variant.id}".`);
-            }
-            return element;
-        });
-    }
-    /**
-     * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
-     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
-     */
-    getViewerLight(dottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-            const viewerLightName = _dottedPath.popPart();
-            let variant = this;
-            if (_dottedPath.parts.length > 0) {
-                variant = yield this.getDescendant(_dottedPath);
-            }
-            if (variant.inheritedViewerLights.length === 0) {
-                throw new Error(`No viewerLights for variant "${variant.id}" found. ` +
-                    `Either none are defined or they are not initialized (are you operating on the appropriate living?).`);
-            }
-            let viewerLight;
-            variant.inheritedViewerLights.forEach(_viewerLight => {
-                if (_viewerLight.name === viewerLightName) {
-                    viewerLight = _viewerLight;
-                }
-            });
-            if (!viewerLight) {
-                throw new Error(`ViewerLight with name "${viewerLightName}" does not exist for variant "${variant.id}".`);
-            }
-            return viewerLight;
-        });
-    }
-    /**
-     * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
-     */
-    getNode(elementDottedPath, nodeDottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const element = yield this.getElement(elementDottedPath);
-            return element.getNode(nodeDottedPath);
-        });
-    }
-    /**
-     * A proxy for directly getting a Mesh from an {@link Element} by its {@link DottedPath}s.
-     */
-    getMesh(elementDottedPath, meshDottedPath) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const element = yield this.getElement(elementDottedPath);
-            return element.getMesh(meshDottedPath);
-        });
-    }
-    /**
-     * Gets the Material defined in one of the variants glTFs by its id.
-     */
-    getOrCreateMaterial(id) {
-        const scene = this.viewer.scene;
-        for (const material of this.inheritedMaterials) {
-            if (material.id === id) {
-                return material;
-            }
-        }
-        // fallback to dynamically created materials on scene
-        for (const material of scene.materials) {
-            if (material.id === id) {
-                return material;
-            }
-        }
-        const cbnAssetMaterial = (0, sceneLoaderHelper_1.createMaterialFromCbnAssets)(id, scene);
-        if (cbnAssetMaterial) {
-            return cbnAssetMaterial;
-        }
-        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
-     */
-    createLiving(parameters) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const parent = yield ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.createLiving());
-            const 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 = (0, lodash_es_1.cloneDeep)(this.parameterObservers);
-            yield variant.createElements();
-            yield variant.createViewerLights();
-            variant.addParameterObservers();
-            yield variant.bootstrapParameters(parameters);
-            this.broadcastEvent(event_1.Event.VARIANT_CREATED, variant);
-            return variant;
-        });
-    }
-    /**
-     * Destroys this {@link Variant}, all parents and destroy the {@link Element}s.
-     */
-    destroy() {
-        this.elements.forEach(element => 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}
-     */
-    commitParameters(parameters) {
-        return __awaiter(this, void 0, void 0, function* () {
-            parameters = (0, lodash_es_1.merge)({}, parameters);
-            // remember old parameter values for later comparison
-            const oldParameters = (0, lodash_es_1.cloneDeep)(this.inheritedParameters);
-            // replace patterns in given parameters
-            let _parameters = JSON.stringify(parameters);
-            for (const parameter in this.inheritedParameters) {
-                const value = this.inheritedParameters[parameter];
-                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
-                _parameters = _parameters.replace(search, value.toString());
-            }
-            (0, lodash_es_1.merge)(parameters, JSON.parse(_parameters));
-            // merge inherited parameters and replaced given parameters
-            const mergedParameters = (0, lodash_es_1.merge)({}, this.inheritedParameters, parameters);
-            // replace patterns in structure parameters
-            const structureParameters = this._structureJson.parameters || {};
-            let _structureParameters = JSON.stringify(structureParameters);
-            for (const parameter in mergedParameters) {
-                const value = mergedParameters[parameter];
-                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
-                _structureParameters = _structureParameters.replace(search, value.toString());
-            }
-            const replacedStructureParameters = JSON.parse(_structureParameters);
-            // calculate which replaced structure parameters have changed and should overload given parameters
-            const differentStructureParameters = {};
-            for (const parameter in replacedStructureParameters) {
-                if (!(0, lodash_es_1.isEqual)(structureParameters[parameter], replacedStructureParameters[parameter])) {
-                    differentStructureParameters[parameter] = replacedStructureParameters[parameter];
-                }
-            }
-            // merge replaced structure parameters and given inherited parameters to structure parameters
-            (0, lodash_es_1.merge)(this.parameters, mergedParameters, differentStructureParameters);
-            // inherited parameters are now the new parameters to process
-            const newParameters = this.inheritedParameters;
-            // replace all parameter patterns in structure json
-            let structure = JSON.stringify(this._structureJson);
-            for (const parameter in newParameters) {
-                const value = newParameters[parameter];
-                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
-                structure = structure.replace(search, value.toString());
-            }
-            this.structureJson = JSON.parse(structure);
-            // handle parameter observers
-            let observerPromises = [];
-            for (const parameter in newParameters) {
-                const oldParameterValue = oldParameters[parameter];
-                const newParameterValue = newParameters[parameter];
-                this.assertParameter(this.inheritedParameterDeclaration, parameter, newParameterValue);
-                if (oldParameterValue === newParameterValue && this.parametersInitialized) {
-                    continue;
-                }
-                // parameter changed
-                const parameterObservers = (0, resourceHelper_1.mergeMaps)(this._parameterObservers, this.parameterObservers);
-                if (parameterObservers.has(parameter)) {
-                    const observers = parameterObservers.get(parameter);
-                    observerPromises = (0, lodash_es_1.concat)(observerPromises, observers.map(observer => {
-                        const observerResult = observer(this, oldParameterValue, newParameterValue);
-                        return Promise.resolve(observerResult).then(() => {
-                            if (this.parametersInitialized) {
-                                this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_COMMITTED, this, parameter, oldParameterValue, newParameterValue);
-                            }
-                        });
-                    }));
-                }
-            }
-            yield Promise.all(observerPromises);
-            // broadcast that bag has been committed
-            this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
-            // commit parameters to elements
-            yield this.commitParametersToElements(newParameters);
-            // commit parameters to lights
-            yield this.commitParametersToViewerLights(newParameters);
-            // propagate parameters to parent
-            if (this.parent) {
-                yield this.parent.commitParameters(this.parameters);
-            }
-            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.
-     */
-    addTraceableObserver(dottedPath, observer, payload) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
-            const 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).`);
-            }
-            const element = yield this.getElement(_dottedPath);
-            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}
-     */
-    loadAssets() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.broadcastEvent(event_1.Event.ASSET_LOADING_START, this);
-            const promisifiedLoader = new Promise((resolve, reject) => {
-                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.LoadAssetContainer(this.glTF.rootUrl, this.glTF.fileName, this.viewer.scene, 
-                // on success
-                container => {
-                    this.assetContainer = container;
-                    const nodes = this.assetContainer.getNodes().filter(n => n instanceof transformNode_1.TransformNode);
-                    nodes.forEach(node => {
-                        (0, babylonHelper_1.deactivateTransformNode)(node, false);
-                        (0, babylonHelper_1.injectNodeMetadata)(node, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(node) }, false);
-                    });
-                    this.assetContainer.lights.forEach(light => {
-                        light.setEnabled(false);
-                        (0, babylonHelper_1.injectNodeMetadata)(light, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(light) }, false);
-                        this.viewer.scene.addLight(light);
-                    });
-                    this.assetContainer.cameras.forEach(camera => {
-                        camera.setEnabled(false);
-                        (0, babylonHelper_1.injectNodeMetadata)(camera, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(camera) }, false);
-                        this.viewer.scene.addCamera(camera);
-                    });
-                    this.assetContainer.materials.forEach(material => this.viewer.scene.materials.push(material));
-                    this.broadcastEvent(event_1.Event.ASSET_LOADING_END, this);
-                    resolve(this);
-                }, 
-                // on progress
-                undefined, 
-                // on error
-                reason => {
-                    this.broadcastEvent(event_1.Event.ASSET_LOADING_END, this);
-                    throw new Error(`Error loading assets for variant "${this.id}": ${reason}.`);
-                });
-            });
-            return yield promisifiedLoader;
-        });
-    }
-    /**
-     * Commits given parameters to all {@link Element}s.
-     */
-    commitParametersToElements(parameters) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.all(this.elements.map(element => this.commitParametersToVariantParameterizable(parameters, element, 'elements')));
-        });
-    }
-    /**
-     * Commits given parameters to all {@link ViewerLight}s.
-     */
-    commitParametersToViewerLights(parameters) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.all(this.viewerLights.map(viewerLight => this.commitParametersToVariantParameterizable(parameters, viewerLight, 'lights')));
-        });
-    }
-    /**
-     * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
-     * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
-     * `this.structureJson.elements`.
-     */
-    commitParametersToVariantParameterizable(parameters, parameterizable, definitionKey) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const initialDefinition = (0, lodash_es_1.get)(this._structureJson, definitionKey)[parameterizable.name];
-            let initialDefinitionStr = JSON.stringify(initialDefinition);
-            const _parameters = {};
-            for (const parameter in parameters) {
-                const dpp = dottedPath_1.DottedPath.create(parameter);
-                if (dpp.shiftPart() !== parameterizable.name) {
-                    continue;
-                }
-                // we got a parameterizable ("element") parameter
-                let parameterValue = parameters[parameter];
-                const parameterizableParameter = dpp.path;
-                // 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 (parameterizableParameter === parameter_1.Parameter.VISIBLE && parameters[parameter_1.Parameter.VISIBLE] === false) {
-                    parameterValue = false;
-                }
-                _parameters[parameterizableParameter] = parameterValue;
-                const search = new RegExp(`\\$\\{${parameterizableParameter}\\}`, 'g');
-                initialDefinitionStr = initialDefinitionStr.replace(search, parameterValue.toString());
-            }
-            const definition = (0, lodash_es_1.get)(this.structureJson, definitionKey);
-            definition[this.name] = JSON.parse(initialDefinitionStr);
-            (0, lodash_es_1.set)(this.structureJson, definitionKey, definition);
-            return yield parameterizable.commitParameters(_parameters);
-        });
-    }
-    /**
-     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
-     */
-    commitParameterToElements(parameter, value) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const promises = [];
-            for (const element of this.elements) {
-                const paramShowsVariant = parameter_1.Parameter.VISIBLE === parameter && value;
-                // Fixes https://combeenation.youtrack.cloud/issue/CB-7773
-                // Don't enable/show the variants element if it is explicitly hidden via its element parameters.
-                // E.g. via spec:
-                // ```
-                // variants: {
-                //   theVariant: {
-                //     elements: {
-                //       Main: ['root.main'],
-                //       Secondary: ['root.secondary'],
-                //     },
-                //     parameters: {
-                //       // !!! The element `Secondary` should **not** be enabled when its containing variant is enabled !!!
-                //       'Secondary.visible': false,
-                //     }
-                //   }
-                // }
-                // ```
-                const elVisibleParamPath = dottedPath_1.DottedPath.create([element.name, parameter_1.Parameter.VISIBLE]).toString();
-                const elVisibleParamValue = this.inheritedParameters[elVisibleParamPath];
-                const elVisibleParamValueParsed = elVisibleParamValue && parameter_1.Parameter.parseBoolean(elVisibleParamValue);
-                const elIsHiddenViaParams = elVisibleParamValueParsed === false;
-                if (paramShowsVariant && elIsHiddenViaParams)
-                    continue;
-                // Fixes https://combeenation.youtrack.cloud/issue/CB-7809
-                // Apply element material before showing the element to prevent loading of the elements "original" material which
-                // is never shown when "overwritten" by elements material param.
-                const elMaterialParamPath = dottedPath_1.DottedPath.create([element.name, parameter_1.Parameter.MATERIAL]).toString();
-                const elMaterialParamValue = this.inheritedParameters[elMaterialParamPath];
-                if (paramShowsVariant && elMaterialParamValue) {
-                    yield element.commitParameter(parameter_1.Parameter.MATERIAL, elMaterialParamValue);
-                }
-                promises.push(element.commitParameter(parameter, value));
-            }
-            yield Promise.all(promises);
-            return this;
-        });
-    }
-    /**
-     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
-     */
-    commitParameterToViewerLights(parameter, value) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const promises = [];
-            for (const viewerLight of this.viewerLights) {
-                promises.push(viewerLight.commitParameter(parameter, value));
-            }
-            yield Promise.all(promises);
-            return this;
-        });
-    }
-    /**
-     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
-     */
-    addParameterObservers() {
-        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.VISIBLE, newValue);
-                yield variant.commitParameterToViewerLights(parameter_1.Parameter.VISIBLE, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.SCALING, newValue);
-                yield variant.commitParameterToViewerLights(parameter_1.Parameter.SCALING, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_COLOR, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_METALLNESS, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_ROUGHNESS, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHT_COLOR, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHTED, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.POSITION, newValue);
-                yield variant.commitParameterToViewerLights(parameter_1.Parameter.POSITION, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.ROTATION, newValue);
-                yield variant.commitParameterToViewerLights(parameter_1.Parameter.ROTATION, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, newValue);
-            }),
-        ]);
-        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
-            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
-                yield variant.commitParameterToElements(parameter_1.Parameter.RECEIVE_SHADOWS, newValue);
-            }),
-        ]);
-        return this;
-    }
-    /**
-     * Creates {@link Element}s and clones nodes into them.
-     */
-    createElements() {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const name in this.structureJson.elements || {}) {
-                this.elements.push(yield element_1.Element.create(this, name));
-            }
-            // 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(element => {
-                element.nodes.forEach(node => {
-                    (0, babylonHelper_1.injectNodeMetadata)(node, { variant: this, variantParameterizable: element });
-                });
-            });
-            return this;
-        });
-    }
-    /**
-     * Creates {@link ViewerLight}s.
-     */
-    createViewerLights() {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const name in this.structureJson.lights || {}) {
-                this.viewerLights.push(yield viewerLight_1.ViewerLight.create(this, name));
-            }
-            this.inheritedViewerLights.forEach(viewerLight => {
-                (0, babylonHelper_1.injectNodeMetadata)(viewerLight.light, { variant: this, variantParameterizable: viewerLight });
-            });
-            return this;
-        });
-    }
-    /**
-     * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
-     */
-    bootstrapParameters(parameters) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.commitParameters((0, lodash_es_1.merge)((0, lodash_es_1.cloneDeep)(this.parameters), parameters));
-            (0, lodash_es_1.concat)(this.ancestors, this).forEach(ancestor => (ancestor.parametersInitialized = true));
-            return this;
-        });
-    }
-}
-exports.Variant = Variant;
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variant = void 0;
+const babylonHelper_1 = require("../util/babylonHelper");
+const resourceHelper_1 = require("../util/resourceHelper");
+const sceneLoaderHelper_1 = require("../util/sceneLoaderHelper");
+const dottedPath_1 = require("./dottedPath");
+const element_1 = require("./element");
+const event_1 = require("./event");
+const parameter_1 = require("./parameter");
+const parameterizable_1 = require("./parameterizable");
+const viewerLight_1 = require("./viewerLight");
+require("@babylonjs/core/Loading/Plugins/babylonFileLoader");
+const sceneLoader_1 = require("@babylonjs/core/Loading/sceneLoader");
+const transformNode_1 = require("@babylonjs/core/Meshes/transformNode");
+const assetContainer_1 = require("@babylonjs/core/assetContainer");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat");
+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_sheen");
+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");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu");
+require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform");
+require("@babylonjs/loaders/glTF/2.0/glTFLoader");
+const lodash_es_1 = require("lodash-es");
+/**
+ * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
+ */
+class Variant extends parameterizable_1.Parameterizable {
+    /**
+     * Constructor.
+     */
+    constructor(name, _structureJson, viewer, parent) {
+        super((0, lodash_es_1.cloneDeep)(_structureJson.parameterDeclaration), (0, lodash_es_1.cloneDeep)(_structureJson.parameters));
+        this.name = name;
+        this._structureJson = _structureJson;
+        this.viewer = viewer;
+        this.parent = parent;
+        this.elements = [];
+        this.viewerLights = [];
+        this._children = new Map();
+        this._parameterObservers = new Map();
+        /**
+         * @internal
+         */
+        this.parametersInitialized = false;
+        for (const 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 = (0, lodash_es_1.cloneDeep)(_structureJson);
+    }
+    /**
+     * Creates a {@link Variant} based on given parameters.
+     *
+     * @throws Error if "gltf" property is provided without a filename
+     */
+    static create(name, structureJson, viewer, parent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const variant = new Variant(name, structureJson, viewer, parent);
+            yield variant.loadAssets();
+            return variant;
+        });
+    }
+    /**
+     * The ancestor {@link Variant}s ordered from top to bottom in the built tree.
+     */
+    get ancestors() {
+        const ancestors = [];
+        let variant = this;
+        while (variant.parent) {
+            ancestors.unshift(variant.parent);
+            variant = variant.parent;
+        }
+        return ancestors;
+    }
+    /**
+     * The root {@link Variant}.
+     */
+    get root() {
+        var _a;
+        return (_a = this.ancestors[0]) !== null && _a !== void 0 ? _a : this;
+    }
+    /**
+     * The {@link DottedPath} in the built tree of {@link Variant}s.
+     * E.g. "_.top-1.sub-2.sub-sub-3"
+     */
+    get dottedPath() {
+        const parentIds = this.ancestors.map(ancestor => {
+            return ancestor.name;
+        });
+        return dottedPath_1.DottedPath.createFromParts(parentIds).addPart(this.name);
+    }
+    /**
+     * The id representing a {@link DottedPath}.
+     */
+    get id() {
+        const dottedPath = dottedPath_1.DottedPath.create(this.dottedPath);
+        dottedPath.shiftPart(); // remove root
+        return dottedPath.path || '_';
+    }
+    /**
+     * The defined glTF Asset.
+     */
+    get glTF() {
+        if (this.structureJson.glTF) {
+            if ((0, lodash_es_1.isString)(this.structureJson.glTF)) {
+                return {
+                    rootUrl: this.structureJson.glTF,
+                    fileName: undefined,
+                };
+            }
+            if ((0, 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;
+        }
+    }
+    /**
+     * The defined glTF URI.
+     */
+    get glTFUri() {
+        if (this.glTF) {
+            return [this.glTF.rootUrl, this.glTF.fileName].join('');
+        }
+    }
+    /**
+     * The inherited defined glTF URI.
+     */
+    get inheritedGlTFUri() {
+        if (!this.glTFUri && this.parent) {
+            return this.parent.inheritedGlTFUri;
+        }
+        return this.glTFUri;
+    }
+    /**
+     * The TransformNodes of the {@link Variant}.
+     */
+    get nodes() {
+        const rootNodes = this.assetContainer
+            .getNodes()
+            .filter(n => n instanceof transformNode_1.TransformNode && !n.parent);
+        return rootNodes;
+    }
+    /**
+     * The {@link ViewerLight}s of the {@link Variant}.
+     */
+    get lights() {
+        return this.assetContainer.lights;
+    }
+    /**
+     * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
+     */
+    get dottedNodes() {
+        if (!this._dottedNodes) {
+            const nodes = this.assetContainer.getNodes().filter(n => n instanceof transformNode_1.TransformNode);
+            const dottedNodes = new Map();
+            nodes.forEach(node => {
+                dottedNodes.set(node.metadata.dottedPath, node);
+            });
+            this._dottedNodes = dottedNodes;
+        }
+        return this._dottedNodes;
+    }
+    /**
+     * The Materials of the {@link Variant}.
+     */
+    get materials() {
+        return this.assetContainer.materials;
+    }
+    /**
+     * All {@link Element}s from this {@link Variant}'s parents.
+     */
+    get inheritedElements() {
+        let elements = [];
+        this.ancestors.forEach(ancestor => {
+            elements = (0, lodash_es_1.concat)(elements, ancestor.elements);
+        });
+        return (0, lodash_es_1.concat)(elements, this.elements);
+    }
+    /**
+     * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
+     */
+    get inheritedViewerLights() {
+        let viewerLights = [];
+        this.ancestors.forEach(ancestor => {
+            viewerLights = (0, lodash_es_1.concat)(viewerLights, ancestor.viewerLights);
+        });
+        return (0, lodash_es_1.concat)(viewerLights, this.viewerLights);
+    }
+    /**
+     * All TransformNodes inherited from this {@link Variant}'s parents.
+     */
+    get inheritedNodes() {
+        let nodes = [];
+        this.ancestors.forEach(ancestor => {
+            nodes = (0, lodash_es_1.concat)(nodes, ancestor.nodes);
+        });
+        return (0, lodash_es_1.concat)(nodes, this.nodes);
+    }
+    /**
+     * All TransformNodes inherited from this {@link Variant}'s parents mapped flat with a {@link DottedPath}.
+     */
+    get inheritedDottedNodes() {
+        let dottedNodes = this.dottedNodes;
+        this.ancestors.forEach(ancestor => {
+            dottedNodes = (0, resourceHelper_1.mergeMaps)(dottedNodes, ancestor.dottedNodes);
+        });
+        return dottedNodes;
+    }
+    /**
+     * All Lights inherited from this {@link Variant}'s parents.
+     */
+    get inheritedLights() {
+        let lights = [];
+        this.ancestors.forEach(ancestor => {
+            lights = (0, lodash_es_1.concat)(lights, ancestor.lights);
+        });
+        return (0, lodash_es_1.concat)(lights, this.lights);
+    }
+    /**
+     * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
+     */
+    get inheritedParameterDeclaration() {
+        const declaration = {};
+        this.ancestors.forEach(ancestor => {
+            (0, lodash_es_1.merge)(declaration, ancestor.parameterDeclaration);
+        });
+        return (0, lodash_es_1.merge)(declaration, this.parameterDeclaration);
+    }
+    /**
+     * The {@link ParameterBag} inherited from this {@link Variant}'s parents.
+     */
+    get inheritedParameters() {
+        const parameters = {};
+        this.ancestors.forEach(ancestor => {
+            (0, lodash_es_1.merge)(parameters, ancestor.parameters);
+        });
+        return (0, lodash_es_1.merge)(parameters, this.parameters);
+    }
+    /**
+     * All Materials from this {@link Variant}'s parents.
+     */
+    get inheritedMaterials() {
+        let materials = [];
+        this.ancestors.forEach(ancestor => {
+            materials = (0, lodash_es_1.concat)(materials, ancestor.materials);
+        });
+        return (0, lodash_es_1.concat)(materials, this.materials);
+    }
+    /**
+     * Gets the direct children of the current {@link Variant}.
+     */
+    getChildren() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const children = [];
+            for (const name in this.structureJson.variants) {
+                children.push(yield this.getDescendant(name));
+            }
+            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}.
+     */
+    getDescendant(dottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+            const [name, ...descendantParts] = _dottedPath.parts;
+            let variant;
+            if (this._children.has(name)) {
+                variant = this._children.get(name);
+            }
+            else {
+                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) {
+                    const file = this.structureJson.variants[name].file;
+                    variant = yield Variant.create(name, yield (0, resourceHelper_1.loadJson)(file), this.viewer, this);
+                }
+                else {
+                    variant = yield Variant.create(name, this.structureJson.variants[name], this.viewer, this);
+                }
+                this._children.set(name, variant);
+            }
+            if (!variant) {
+                throw new Error(`Variant "${_dottedPath.path}" was not created.`);
+            }
+            if (descendantParts.length > 0) {
+                return yield variant.getDescendant(dottedPath_1.DottedPath.createFromParts(descendantParts));
+            }
+            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.
+     */
+    getElement(dottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+            const elementName = _dottedPath.popPart();
+            let variant = this;
+            if (_dottedPath.parts.length > 0) {
+                variant = yield this.getDescendant(_dottedPath);
+            }
+            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?).`);
+            }
+            let element;
+            variant.inheritedElements.forEach(_element => {
+                if (_element.name === elementName) {
+                    element = _element;
+                }
+            });
+            if (!element) {
+                throw new Error(`Element with name "${elementName}" does not exist for variant "${variant.id}".`);
+            }
+            return element;
+        });
+    }
+    /**
+     * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
+     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
+     */
+    getViewerLight(dottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+            const viewerLightName = _dottedPath.popPart();
+            let variant = this;
+            if (_dottedPath.parts.length > 0) {
+                variant = yield this.getDescendant(_dottedPath);
+            }
+            if (variant.inheritedViewerLights.length === 0) {
+                throw new Error(`No viewerLights for variant "${variant.id}" found. ` +
+                    `Either none are defined or they are not initialized (are you operating on the appropriate living?).`);
+            }
+            let viewerLight;
+            variant.inheritedViewerLights.forEach(_viewerLight => {
+                if (_viewerLight.name === viewerLightName) {
+                    viewerLight = _viewerLight;
+                }
+            });
+            if (!viewerLight) {
+                throw new Error(`ViewerLight with name "${viewerLightName}" does not exist for variant "${variant.id}".`);
+            }
+            return viewerLight;
+        });
+    }
+    /**
+     * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
+     */
+    getNode(elementDottedPath, nodeDottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = yield this.getElement(elementDottedPath);
+            return element.getNode(nodeDottedPath);
+        });
+    }
+    /**
+     * A proxy for directly getting a Mesh from an {@link Element} by its {@link DottedPath}s.
+     */
+    getMesh(elementDottedPath, meshDottedPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = yield this.getElement(elementDottedPath);
+            return element.getMesh(meshDottedPath);
+        });
+    }
+    /**
+     * Gets the Material defined in one of the variants glTFs by its id.
+     */
+    getOrCreateMaterial(id) {
+        const scene = this.viewer.scene;
+        for (const material of this.inheritedMaterials) {
+            if (material.id === id) {
+                return material;
+            }
+        }
+        // fallback to dynamically created materials on scene
+        for (const material of scene.materials) {
+            if (material.id === id) {
+                return material;
+            }
+        }
+        const cbnAssetMaterial = (0, sceneLoaderHelper_1.createMaterialFromCbnAssets)(id, scene);
+        if (cbnAssetMaterial) {
+            return cbnAssetMaterial;
+        }
+        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
+     */
+    createLiving(parameters) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const parent = yield ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.createLiving());
+            const 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 = (0, lodash_es_1.cloneDeep)(this.parameterObservers);
+            yield variant.createElements();
+            yield variant.createViewerLights();
+            variant.addParameterObservers();
+            yield variant.bootstrapParameters(parameters);
+            this.broadcastEvent(event_1.Event.VARIANT_CREATED, variant);
+            return variant;
+        });
+    }
+    /**
+     * Destroys this {@link Variant}, all parents and destroy the {@link Element}s.
+     */
+    destroy() {
+        this.elements.forEach(element => 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}
+     */
+    commitParameters(parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            parameters = (0, lodash_es_1.merge)({}, parameters);
+            // remember old parameter values for later comparison
+            const oldParameters = (0, lodash_es_1.cloneDeep)(this.inheritedParameters);
+            // replace patterns in given parameters
+            let _parameters = JSON.stringify(parameters);
+            for (const parameter in this.inheritedParameters) {
+                const value = this.inheritedParameters[parameter];
+                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
+                _parameters = _parameters.replace(search, value.toString());
+            }
+            (0, lodash_es_1.merge)(parameters, JSON.parse(_parameters));
+            // merge inherited parameters and replaced given parameters
+            const mergedParameters = (0, lodash_es_1.merge)({}, this.inheritedParameters, parameters);
+            // replace patterns in structure parameters
+            const structureParameters = this._structureJson.parameters || {};
+            let _structureParameters = JSON.stringify(structureParameters);
+            for (const parameter in mergedParameters) {
+                const value = mergedParameters[parameter];
+                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
+                _structureParameters = _structureParameters.replace(search, value.toString());
+            }
+            const replacedStructureParameters = JSON.parse(_structureParameters);
+            // calculate which replaced structure parameters have changed and should overload given parameters
+            const differentStructureParameters = {};
+            for (const parameter in replacedStructureParameters) {
+                if (!(0, lodash_es_1.isEqual)(structureParameters[parameter], replacedStructureParameters[parameter])) {
+                    differentStructureParameters[parameter] = replacedStructureParameters[parameter];
+                }
+            }
+            // merge replaced structure parameters and given inherited parameters to structure parameters
+            (0, lodash_es_1.merge)(this.parameters, mergedParameters, differentStructureParameters);
+            // inherited parameters are now the new parameters to process
+            const newParameters = this.inheritedParameters;
+            // replace all parameter patterns in structure json
+            let structure = JSON.stringify(this._structureJson);
+            for (const parameter in newParameters) {
+                const value = newParameters[parameter];
+                const search = new RegExp(`\\$\\{${parameter}\\}`, 'g');
+                structure = structure.replace(search, value.toString());
+            }
+            this.structureJson = JSON.parse(structure);
+            // handle parameter observers
+            let observerPromises = [];
+            for (const parameter in newParameters) {
+                const oldParameterValue = oldParameters[parameter];
+                const newParameterValue = newParameters[parameter];
+                this.assertParameter(this.inheritedParameterDeclaration, parameter, newParameterValue);
+                if (oldParameterValue === newParameterValue && this.parametersInitialized) {
+                    continue;
+                }
+                // parameter changed
+                const parameterObservers = (0, resourceHelper_1.mergeMaps)(this._parameterObservers, this.parameterObservers);
+                if (parameterObservers.has(parameter)) {
+                    const observers = parameterObservers.get(parameter);
+                    observerPromises = (0, lodash_es_1.concat)(observerPromises, observers.map(observer => {
+                        const observerResult = observer(this, oldParameterValue, newParameterValue);
+                        return Promise.resolve(observerResult).then(() => {
+                            if (this.parametersInitialized) {
+                                this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_COMMITTED, this, parameter, oldParameterValue, newParameterValue);
+                            }
+                        });
+                    }));
+                }
+            }
+            yield Promise.all(observerPromises);
+            // broadcast that bag has been committed
+            this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
+            // commit parameters to elements
+            yield this.commitParametersToElements(newParameters);
+            // commit parameters to lights
+            yield this.commitParametersToViewerLights(newParameters);
+            // propagate parameters to parent
+            if (this.parent) {
+                yield this.parent.commitParameters(this.parameters);
+            }
+            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.
+     */
+    addTraceableObserver(dottedPath, observer, payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+            const 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).`);
+            }
+            const element = yield this.getElement(_dottedPath);
+            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}
+     */
+    loadAssets() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.broadcastEvent(event_1.Event.ASSET_LOADING_START, this);
+            const promisifiedLoader = new Promise((resolve, reject) => {
+                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.LoadAssetContainer(this.glTF.rootUrl, this.glTF.fileName, this.viewer.scene, 
+                // on success
+                container => {
+                    this.assetContainer = container;
+                    const nodes = this.assetContainer.getNodes().filter(n => n instanceof transformNode_1.TransformNode);
+                    nodes.forEach(node => {
+                        (0, babylonHelper_1.deactivateTransformNode)(node, false);
+                        (0, babylonHelper_1.injectNodeMetadata)(node, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(node) }, false);
+                    });
+                    this.assetContainer.lights.forEach(light => {
+                        light.setEnabled(false);
+                        (0, babylonHelper_1.injectNodeMetadata)(light, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(light) }, false);
+                        this.viewer.scene.addLight(light);
+                    });
+                    this.assetContainer.cameras.forEach(camera => {
+                        camera.setEnabled(false);
+                        (0, babylonHelper_1.injectNodeMetadata)(camera, { dottedPath: (0, babylonHelper_1.getDottedPathForNode)(camera) }, false);
+                        this.viewer.scene.addCamera(camera);
+                    });
+                    this.assetContainer.materials.forEach(material => this.viewer.scene.materials.push(material));
+                    this.broadcastEvent(event_1.Event.ASSET_LOADING_END, this);
+                    resolve(this);
+                }, 
+                // on progress
+                undefined, 
+                // on error
+                reason => {
+                    this.broadcastEvent(event_1.Event.ASSET_LOADING_END, this);
+                    throw new Error(`Error loading assets for variant "${this.id}": ${reason}.`);
+                });
+            });
+            return yield promisifiedLoader;
+        });
+    }
+    /**
+     * Commits given parameters to all {@link Element}s.
+     */
+    commitParametersToElements(parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this.elements.map(element => this.commitParametersToVariantParameterizable(parameters, element, 'elements')));
+        });
+    }
+    /**
+     * Commits given parameters to all {@link ViewerLight}s.
+     */
+    commitParametersToViewerLights(parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this.viewerLights.map(viewerLight => this.commitParametersToVariantParameterizable(parameters, viewerLight, 'lights')));
+        });
+    }
+    /**
+     * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
+     * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
+     * `this.structureJson.elements`.
+     */
+    commitParametersToVariantParameterizable(parameters, parameterizable, definitionKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const initialDefinition = (0, lodash_es_1.get)(this._structureJson, definitionKey)[parameterizable.name];
+            let initialDefinitionStr = JSON.stringify(initialDefinition);
+            const _parameters = {};
+            for (const parameter in parameters) {
+                const dpp = dottedPath_1.DottedPath.create(parameter);
+                if (dpp.shiftPart() !== parameterizable.name) {
+                    continue;
+                }
+                // we got a parameterizable ("element") parameter
+                let parameterValue = parameters[parameter];
+                const parameterizableParameter = dpp.path;
+                // 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 (parameterizableParameter === parameter_1.Parameter.VISIBLE && parameters[parameter_1.Parameter.VISIBLE] === false) {
+                    parameterValue = false;
+                }
+                _parameters[parameterizableParameter] = parameterValue;
+                const search = new RegExp(`\\$\\{${parameterizableParameter}\\}`, 'g');
+                initialDefinitionStr = initialDefinitionStr.replace(search, parameterValue.toString());
+            }
+            const definition = (0, lodash_es_1.get)(this.structureJson, definitionKey);
+            definition[this.name] = JSON.parse(initialDefinitionStr);
+            (0, lodash_es_1.set)(this.structureJson, definitionKey, definition);
+            return yield parameterizable.commitParameters(_parameters);
+        });
+    }
+    /**
+     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
+     */
+    commitParameterToElements(parameter, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const promises = [];
+            for (const element of this.elements) {
+                const paramShowsVariant = parameter_1.Parameter.VISIBLE === parameter && value;
+                // Fixes https://combeenation.youtrack.cloud/issue/CB-7773
+                // Don't enable/show the variants element if it is explicitly hidden via its element parameters.
+                // E.g. via spec:
+                // ```
+                // variants: {
+                //   theVariant: {
+                //     elements: {
+                //       Main: ['root.main'],
+                //       Secondary: ['root.secondary'],
+                //     },
+                //     parameters: {
+                //       // !!! The element `Secondary` should **not** be enabled when its containing variant is enabled !!!
+                //       'Secondary.visible': false,
+                //     }
+                //   }
+                // }
+                // ```
+                const elVisibleParamPath = dottedPath_1.DottedPath.create([element.name, parameter_1.Parameter.VISIBLE]).toString();
+                const elVisibleParamValue = this.inheritedParameters[elVisibleParamPath];
+                const elVisibleParamValueParsed = elVisibleParamValue && parameter_1.Parameter.parseBoolean(elVisibleParamValue);
+                const elIsHiddenViaParams = elVisibleParamValueParsed === false;
+                if (paramShowsVariant && elIsHiddenViaParams)
+                    continue;
+                // Fixes https://combeenation.youtrack.cloud/issue/CB-7809
+                // Apply element material before showing the element to prevent loading of the elements "original" material which
+                // is never shown when "overwritten" by elements material param.
+                const elMaterialParamPath = dottedPath_1.DottedPath.create([element.name, parameter_1.Parameter.MATERIAL]).toString();
+                const elMaterialParamValue = this.inheritedParameters[elMaterialParamPath];
+                if (paramShowsVariant && elMaterialParamValue) {
+                    yield element.commitParameter(parameter_1.Parameter.MATERIAL, elMaterialParamValue);
+                }
+                promises.push(element.commitParameter(parameter, value));
+            }
+            yield Promise.all(promises);
+            return this;
+        });
+    }
+    /**
+     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
+     */
+    commitParameterToViewerLights(parameter, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const promises = [];
+            for (const viewerLight of this.viewerLights) {
+                promises.push(viewerLight.commitParameter(parameter, value));
+            }
+            yield Promise.all(promises);
+            return this;
+        });
+    }
+    /**
+     * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+     */
+    addParameterObservers() {
+        this._parameterObservers.set(parameter_1.Parameter.VISIBLE, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.VISIBLE, newValue);
+                yield variant.commitParameterToViewerLights(parameter_1.Parameter.VISIBLE, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.SCALING, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.SCALING, newValue);
+                yield variant.commitParameterToViewerLights(parameter_1.Parameter.SCALING, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_COLOR, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_COLOR, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_METALLNESS, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_METALLNESS, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.MATERIAL_ROUGHNESS, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.MATERIAL_ROUGHNESS, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHT_COLOR, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHT_COLOR, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.HIGHLIGHTED, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.HIGHLIGHTED, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.POSITION, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.POSITION, newValue);
+                yield variant.commitParameterToViewerLights(parameter_1.Parameter.POSITION, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.ROTATION, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.ROTATION, newValue);
+                yield variant.commitParameterToViewerLights(parameter_1.Parameter.ROTATION, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, newValue);
+            }),
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
+            (variant, oldValue, newValue) => __awaiter(this, void 0, void 0, function* () {
+                yield variant.commitParameterToElements(parameter_1.Parameter.RECEIVE_SHADOWS, newValue);
+            }),
+        ]);
+        return this;
+    }
+    /**
+     * Creates {@link Element}s and clones nodes into them.
+     */
+    createElements() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.createElementDefinitionsIfNotExist();
+            for (const name in this.structureJson.elements || {}) {
+                this.elements.push(yield element_1.Element.create(this, name));
+            }
+            // 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(element => {
+                element.nodes.forEach(node => {
+                    (0, babylonHelper_1.injectNodeMetadata)(node, { variant: this, variantParameterizable: element });
+                });
+            });
+            return this;
+        });
+    }
+    /**
+     * Creates {@link ViewerLight}s.
+     */
+    createViewerLights() {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const name in this.structureJson.lights || {}) {
+                this.viewerLights.push(yield viewerLight_1.ViewerLight.create(this, name));
+            }
+            this.inheritedViewerLights.forEach(viewerLight => {
+                (0, babylonHelper_1.injectNodeMetadata)(viewerLight.light, { variant: this, variantParameterizable: viewerLight });
+            });
+            return this;
+        });
+    }
+    /**
+     * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
+     */
+    bootstrapParameters(parameters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.commitParameters((0, lodash_es_1.merge)((0, lodash_es_1.cloneDeep)(this.parameters), parameters));
+            (0, lodash_es_1.concat)(this.ancestors, this).forEach(ancestor => (ancestor.parametersInitialized = true));
+            return this;
+        });
+    }
+    /**
+     * Ensures there is at least one "Main" {@link Element} for the {@link Variant} with all "root nodes" defined in path.
+     */
+    createElementDefinitionsIfNotExist() {
+        if (this._structureJson.elements || this.inheritedNodes.length === 0) {
+            return;
+        }
+        this._structureJson.elements = {
+            Main: { paths: { include: this.inheritedNodes.map(node => node.metadata.dottedPath.path) } },
+        };
+        this.structureJson.elements = (0, lodash_es_1.cloneDeep)(this._structureJson.elements);
+    }
+}
+exports.Variant = Variant;
 //# sourceMappingURL=variant.js.map