@configura/babylon-view 2.2.0-alpha.1 → 2.2.0-alpha.2

package/dist/nodes/CfgProductNode.js

@@ -1,598 +1,598 @@
-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());
-    });
-};
-import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
-import { InspectableType } from "@babylonjs/core/Misc/iInspectable.js";
-import { aggregateAllMaterialApplications, CfgMtrlApplication, CfgMtrlApplicationSource, logMaterialMappingToConsole, } from "@configura/web-api";
-import { LogObservable, readFileToArrayBuffer } from "@configura/web-utilities";
-import { CfgAnchorRef, getAnchorTargetPriorityComparer, updatedStretchedAnchorPointMatrix, } from "../utilities/anchor/anchor.js";
-import { makeAnchoredToAnchorMap } from "../utilities/anchor/anchorMap.js";
-import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
-import { modelTransformToSymTransform, symTransformToMatrix } from "../utilities/utilities3D.js";
-import { isSameRootNodeSource } from "../utilities/utilitiesSymRootIdentifier.js";
-import { CfgSymRootNode, isSymRootNode } from "./CfgSymRootNode.js";
-import { CfgTransformNode } from "./CfgTransformNode.js";
-export function isProductNode(value) {
-    return value instanceof CfgProductNode;
-}
-export function isCfgSymRootNode(value) {
-    return value instanceof CfgSymRootNode;
-}
-export function isCfgAnchorableNode(value) {
-    return isProductNode(value) || isCfgSymRootNode(value);
-}
-export class CfgProductNode extends CfgTransformNode {
-    constructor(renderEnvironment, _product) {
-        super(renderEnvironment, `(Product) ${_product.sku}`);
-        this._product = _product;
-        this.logger = new LogObservable();
-        this._destroyed = false;
-        this._applicationAreas = [];
-        this._mtrlApplications = [];
-        this._debugMtrlApplications = [];
-        this._scheduledForRemoval = [];
-        this._anchoredToAnchors = new Map();
-        this._symRootLoadings = [];
-        /**
-         * The passed function is recursively applied on every descendant CfgProductNode in the tree.
-         * This node is included. Destroyed products are not included.
-         */
-        this._applyOnDescendantProductNodes = (fn) => {
-            const result = [];
-            result.push(fn(this));
-            for (const additionalProduct of this._getAdditionalProductNodes()) {
-                result.push(...additionalProduct._applyOnDescendantProductNodes(fn));
-            }
-            return result;
-        };
-        this.key = _product.key;
-        /* eslint-disable */
-        // Useful debug tool:
-        if (false) {
-            window.product = this;
-            window[this.key] = this;
-            console.log(`Use "window.product" or 'window["${this.key}"]' to access "${this.key}" product node.`);
-        }
-        /* eslint-enable */
-        this._refreshTransformAndAnchoring();
-    }
-    static make(renderEnvironment, product) {
-        return new this(renderEnvironment, product);
-    }
-    get cfgClassName() {
-        return "CfgProductNode";
-    }
-    destroy() {
-        this._destroyed = true;
-        this._symRootLoadings.length = 0;
-        for (const symRoot of this._getSymRootChildren().filter((c) => !c.isForDebug)) {
-            this.scheduleForRemoval(symRoot);
-        }
-    }
-    get product() {
-        return this._product;
-    }
-    /**
-     * We want to be able to animate nodes that are on the way out.
-     * So we do not immediately remove them from the tree.
-     */
-    scheduleForRemoval(node) {
-        node.destroy();
-        this._scheduledForRemoval.push(node);
-    }
-    isDestroyed() {
-        return this._destroyed;
-    }
-    _refreshTransformAndAnchoring() {
-        const product = this._product._internal;
-        const modelTransform = product.transform;
-        if (modelTransform !== undefined) {
-            const modelSymTransform = modelTransformToSymTransform(modelTransform);
-            this._modelMatrix = symTransformToMatrix(modelSymTransform.transform());
-        }
-        this.anchorRef = CfgAnchorRef.make(product.anchor);
-        this.refreshTransform();
-    }
-    /**
-     * This function will apply either of tree passed functions on the additional products/ in the
-     * passed CfgProduct and the additional products in the CfgProductNode.
-     * It is not applied recursively.
-     */
-    _syncAdditionalProductNodes(parentProduct, fn) {
-        const { both, productNodeButNoProduct, productButNoProductNode } = fn;
-        const additionalProducts = parentProduct.additionalProducts.filter((c) => c.selected);
-        const additionalProductNodes = this._getAdditionalProductNodes();
-        for (const additionalProductNode of additionalProductNodes) {
-            const index = additionalProducts.findIndex((p) => additionalProductNode.product.isBackedBySame(p));
-            if (index === -1) {
-                if (productNodeButNoProduct === undefined) {
-                    throw Error(`ProductNode ${additionalProductNode.key} exist, but no data for it. There is no handler for this.`);
-                }
-                productNodeButNoProduct(additionalProductNode);
-            }
-            else {
-                const additionalProduct = additionalProducts.splice(index, 1)[0];
-                if (both === undefined) {
-                    throw Error(`ProductNode ${additionalProductNode.key} and data ${additionalProduct.key} exists. There is no handler for this.`);
-                }
-                both(additionalProduct, additionalProductNode);
-            }
-        }
-        for (const additionalProduct of additionalProducts) {
-            if (productButNoProductNode === undefined) {
-                throw Error(`Data ${additionalProduct.key} exists, but no ProductNode for it. There is no handler for this.`);
-            }
-            productButNoProductNode(additionalProduct);
-        }
-    }
-    /**
-     * Application areas are essentially catalogue level material mappings.
-     * This function is recursively applied on additional products.
-     */
-    setApplicationAreas(applicationAreas) {
-        this._applyOnDescendantProductNodes((p) => {
-            p._applicationAreas = applicationAreas;
-        });
-    }
-    /**
-     * Start loading the geometry, but do not yet show it.
-     * This function is recursively applied on additional products.
-     */
-    loadGeo(coordinatorWithMeta) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const product = this._product;
-            const rootNodeSources = product._internal.rootNodeSources || [];
-            // Duplicate filter
-            const updateRootNodeSources = rootNodeSources.reduce((a, c) => {
-                if (a.every((s) => !isSameRootNodeSource(s, c))) {
-                    a.push(c);
-                }
-                return a;
-            }, []);
-            const allSymRootLoadings = this._symRootLoadings;
-            let i = allSymRootLoadings.length;
-            while (i--) {
-                const symRootLoading = allSymRootLoadings[i];
-                const updateIndex = updateRootNodeSources.findIndex((rootNodeSource) => isSameRootNodeSource(rootNodeSource, symRootLoading.rootNodeSource));
-                if (updateIndex === -1) {
-                    // We remove the inProgress, because the thing which is in progress will not be
-                    // wanted when it arrives.
-                    allSymRootLoadings.splice(i, 1);
-                }
-            }
-            for (const symRootChild of this._getSymRootChildren().filter((c) => !c.isForDebug)) {
-                const updateIndex = updateRootNodeSources.findIndex((m) => symRootChild.isSameIdentifierTransformAndAnchor(m));
-                if (updateIndex === -1) {
-                    // Not found, remove
-                    this.scheduleForRemoval(symRootChild);
-                }
-                else {
-                    // Found, no need to change anything
-                    updateRootNodeSources.splice(updateIndex, 1);
-                }
-            }
-            const batchSymRootLoadings = updateRootNodeSources.map((rootNodeSource) => {
-                let symRootLoading = allSymRootLoadings.find((s) => isSameRootNodeSource(rootNodeSource, s.rootNodeSource));
-                if (symRootLoading === undefined) {
-                    symRootLoading = {
-                        rootNodeSource,
-                        rootNodePromise: CfgSymRootNode.makeCfgSymRootFromRootNodeSource(this.logger, false, this._renderEnvironment, this, rootNodeSource),
-                    };
-                    allSymRootLoadings.push(symRootLoading);
-                }
-                return symRootLoading;
-            });
-            yield Promise.all([
-                ...batchSymRootLoadings.map((s) => s.rootNodePromise),
-                this._loadAdditionalProducts(coordinatorWithMeta),
-            ]);
-            const addedSymRoots = (yield Promise.all(batchSymRootLoadings.map((s) => s.rootNodePromise)))
-                .filter((symRoot) => symRoot !== undefined)
-                .filter((symRoot) => {
-                const loadInProgressIndex = allSymRootLoadings.findIndex((symRootLoadInProgress) => symRoot.isSameIdentifierTransformAndAnchor(symRootLoadInProgress.rootNodeSource));
-                if (loadInProgressIndex === -1) {
-                    // This node no longer needs to be added...
-                    if (!symRoot.parent) {
-                        // ...and was never added as a child
-                        symRoot.destroy();
-                        symRoot.dispose();
-                    }
-                    return false;
-                }
-                // We'll add this, so it moves from "loading" to being a proper child
-                allSymRootLoadings.splice(loadInProgressIndex, 1);
-                this.add(symRoot);
-                return true;
-            });
-            // Updated symRootChildren
-            const anchorableChildren = this._getAnchorableNodes();
-            // Make a map of who is anchored to who
-            const anchoredToAnchors = makeAnchoredToAnchorMap(anchorableChildren, getAnchorTargetPriorityComparer(this.product._internal.measureDefinitions));
-            this._anchoredToAnchors = anchoredToAnchors;
-            for (const child of anchorableChildren) {
-                child.setAnchorTarget(anchoredToAnchors.get(child));
-            }
-            this.refreshStretch();
-            for (const symRoot of addedSymRoots) {
-                if (coordinatorWithMeta === undefined) {
-                    continue;
-                }
-                const c = coordinatorWithMeta.coordinator;
-                yield c.prepareForEnter.bind(c)(symRoot, coordinatorWithMeta.isNewProduct);
-            }
-        });
-    }
-    _loadAdditionalProducts(coordinatorWithMeta) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const additionalProductLoadPromises = [];
-            this._syncAdditionalProductNodes(this._product, {
-                productNodeButNoProduct: (additionalProductNode) => {
-                    this.scheduleForRemoval(additionalProductNode);
-                },
-                productButNoProductNode: (additionalProduct) => {
-                    const additionalProductNode = CfgProductNode.make(this._renderEnvironment, additionalProduct);
-                    this.add(additionalProductNode);
-                    additionalProductLoadPromises.push(additionalProductNode.loadGeo(coordinatorWithMeta));
-                },
-                both: (_additionalProduct, additionalProductNode) => {
-                    additionalProductNode._refreshTransformAndAnchoring();
-                    additionalProductLoadPromises.push(additionalProductNode.loadGeo(coordinatorWithMeta));
-                },
-            });
-            yield Promise.all(additionalProductLoadPromises);
-        });
-    }
-    /**
-     * Run any animations and then permanently removes the nodes from the tree
-     * This function is recursively applied on additional products.
-     */
-    flushScheduledForRemove(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const thisBatch = this._scheduledForRemoval.slice();
-            this._scheduledForRemoval.length = 0;
-            yield Promise.all(this._getAdditionalProductNodes(true).map((additionalProductNode) => additionalProductNode.flushScheduledForRemove(animationCoordinator)));
-            yield Promise.all(thisBatch.map((node) => (() => __awaiter(this, void 0, void 0, function* () {
-                if (node instanceof CfgSymRootNode) {
-                    if (animationCoordinator !== undefined) {
-                        const c = animationCoordinator.coordinator;
-                        yield c.prepareForExit.bind(c)(node);
-                    }
-                }
-                this.remove(true, node);
-            }))()));
-        });
-    }
-    /**
-     * Are all materials currently needed loaded and ready to be applied?
-     * This function does not take additional products into account.
-     */
-    _isAllMeshMaterialsReady() {
-        return this._getSymRootChildren().reduce((a, c) => a && c.isAllMeshMaterialsReady(), true);
-    }
-    /**
-     * Resolves when all materials currently needed have been loaded and are ready to be applied.
-     * This function does not take additional products into account.
-     */
-    _awaitAllMeshMaterialsReady() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
-                let maxTries = 60 * 60; // Assuming 60 fps this gives a minute, which is absurdly long
-                const frame = () => {
-                    if (this._isAllMeshMaterialsReady()) {
-                        resolve();
-                        return;
-                    }
-                    if (maxTries === 0) {
-                        reject("Materials not ready in time");
-                        return;
-                    }
-                    window.requestAnimationFrame(frame);
-                    maxTries--;
-                };
-                frame();
-            });
-        });
-    }
-    /**
-     * Loads the materials needed.
-     * This function is recursively applied on additional products.
-     */
-    loadMaterials(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const product = this._product;
-            const productMtrlApplications = (product._internal.mtrlApplications || []).map((m) => CfgMtrlApplication.fromMtrlLikeApplication(CfgMtrlApplicationSource.Product, m));
-            this._mtrlApplications = productMtrlApplications;
-            this._configuration = product.configuration;
-            yield Promise.all([
-                this._aggregateMaterialsPushToChildrenAndLoad(animationCoordinator),
-                ...this._getAdditionalProductNodes().map((additionalProductNode) => additionalProductNode.loadMaterials(animationCoordinator)),
-            ]);
-        });
-    }
-    /**
-     * Update the tag (area) to material mapping and gives them to sym children
-     * This function does not take additional products into account.
-     */
-    _aggregateMaterialsPushToChildrenAndLoad(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._applicationAreas === undefined || this._configuration === undefined) {
-                return;
-            }
-            const areasToMaterials = aggregateAllMaterialApplications(this._applicationAreas, this._mtrlApplications, this._configuration, this._debugMtrlApplications);
-            this._areasToMaterials = areasToMaterials;
-            yield this._pushMaterialToSymRootChildrenAndLoad(animationCoordinator);
-        });
-    }
-    /**
-     * Starts loading the materials on the sym children (but does not apply)
-     * This function does not take additional products into account.
-     */
-    _pushMaterialToSymRootChildrenAndLoad(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const areasToMaterials = this._areasToMaterials;
-            if (areasToMaterials === undefined) {
-                return;
-            }
-            yield Promise.all(this._getSymRootChildren().map((child) => child.setMaterialsAndLoad(areasToMaterials, animationCoordinator)));
-        });
-    }
-    _getSymRootChildren() {
-        return this.getChildren()
-            .filter(isSymRootNode)
-            .filter((c) => !c.isDestroyed());
-    }
-    _getAdditionalProductNodes(includeDestroyed = false) {
-        return this.getChildren()
-            .filter(isProductNode)
-            .filter((c) => includeDestroyed || !c.isDestroyed());
-    }
-    _getAnchorableNodes() {
-        return this.getChildren()
-            .filter(isCfgAnchorableNode)
-            .filter((c) => !c.isDestroyed());
-    }
-    /**
-     * Applies and thereby shows the geometry. Finally flushes scheduled for remove.
-     * This function is recursively applied on additional products.
-     */
-    applyGeo(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.all(this._applyOnDescendantProductNodes((p) => (() => __awaiter(this, void 0, void 0, function* () {
-                p._getSymRootChildren().forEach((child) => {
-                    child.applyGeo();
-                });
-                // Wait until materials have been loaded so that we don't get any blinking.
-                // It might seem wrong that this is done after we apply, but the material
-                // will not be ready unless it is applied. So we wait after applying.
-                yield p._awaitAllMeshMaterialsReady();
-            }))()));
-            // Not blocking on this
-            void this.flushScheduledForRemove(animationCoordinator);
-        });
-    }
-    /**
-     * Applies and thereby shows the right materials.
-     * This function is recursively applied on additional products.
-     */
-    applyMaterials() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.all(this._applyOnDescendantProductNodes((p) => (() => __awaiter(this, void 0, void 0, function* () {
-                p._getSymRootChildren().forEach((child) => {
-                    child.applyMaterial();
-                });
-                // Wait until materials have been loaded so that we don't get any blinking.
-                // It might seem wrong that this is done after we apply, but the material
-                // will not be ready unless it is applied. So we wait after applying.
-                yield p._awaitAllMeshMaterialsReady();
-            }))()));
-        });
-    }
-    setAnchorTarget(anchorTarget) {
-        this._anchorTarget = anchorTarget;
-    }
-    refreshStretch() {
-        const updated = updatedStretchedAnchorPointMatrix(this.anchorRef, this._anchorTarget, this._stretchedAnchorPointMatrix);
-        if (updated !== undefined) {
-            this._stretchedAnchorPointMatrix = updated;
-            this.refreshTransform();
-        }
-        // anchoredToAnchors is sorted so that anchors always are before what
-        // is anchored to them. That way we know that if we refreshStretch on
-        // them first anchor-on-anchor will work correctly.
-        const anchorableChildren = this._getAnchorableNodes().slice();
-        for (const anchor of this._anchoredToAnchors.values()) {
-            const i = anchorableChildren.indexOf(anchor);
-            if (i === -1) {
-                // As multiple anchors can anchor to the same anchor this will happen
-                continue;
-            }
-            anchor.refreshStretch();
-            anchorableChildren.splice(i, 1);
-        }
-        // Refresh for the un-anchored
-        for (const child of anchorableChildren) {
-            child.refreshStretch();
-        }
-    }
-    get originalMatrix() {
-        var _a;
-        if (this._originalMatrixWithModelTransform === undefined) {
-            let originalMatrix = (_a = this._modelMatrix) !== null && _a !== void 0 ? _a : Matrix.Identity();
-            const stretchedAnchorPointMatrix = this._stretchedAnchorPointMatrix;
-            if (stretchedAnchorPointMatrix !== undefined) {
-                originalMatrix = originalMatrix.multiply(stretchedAnchorPointMatrix);
-            }
-            this._originalMatrixWithModelTransform = originalMatrix;
-        }
-        return this._originalMatrixWithModelTransform;
-    }
-    refreshTransform() {
-        this._originalMatrixWithModelTransform = undefined; // Reset the matrix
-        this.setPreTransformMatrix(this.originalMatrix);
-    }
-    _applyDebugSymRoots(symRootPromises) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const allSymRoots = yield Promise.all(symRootPromises);
-            allSymRoots.forEach((symRoot) => {
-                if (symRoot === undefined) {
-                    return;
-                }
-                this.add(symRoot);
-            });
-            yield this.applyGeo();
-            yield this._pushMaterialToSymRootChildrenAndLoad();
-            yield this.applyMaterials();
-            this._renderEnvironment.scheduleRerender();
-        });
-    }
-    _addDebugMtrlApplication(debugMtrlApplication) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._debugMtrlApplications.push(debugMtrlApplication);
-            yield this._aggregateMaterialsPushToChildrenAndLoad();
-            yield this.applyMaterials();
-            this._renderEnvironment.scheduleRerender();
-        });
-    }
-    get boundingBox() {
-        const bb = [...this._getSymRootChildren(), ...this._getAdditionalProductNodes()].reduce((a, m) => {
-            a.expand(m.boundingBox);
-            return a;
-        }, new CfgBoundingBox());
-        bb.applyMatrix(this.originalMatrix);
-        return bb;
-    }
-    addInspectorProperties() {
-        super.addInspectorProperties();
-        this.addInspectableCustomProperty({
-            label: "Log materialMappings",
-            propertyName: "_inspectorLogMaterialMappings",
-            type: InspectableType.Checkbox,
-        });
-        this.addInspectableCustomProperty({
-            label: "Add material to mapping from File",
-            propertyName: "_inspectorAddMaterialToMaterialMappingFromFile",
-            type: InspectableType.Checkbox,
-        });
-        this.addInspectableCustomProperty({
-            label: "Add material to mapping from Url",
-            propertyName: "_inspectorAddMaterialToMaterialMappingFromUrl",
-            type: InspectableType.Checkbox,
-        });
-        this.addInspectableCustomProperty({
-            label: "Add CmSym from File",
-            propertyName: "_inspectorAddCmSymFile",
-            type: InspectableType.Checkbox,
-        });
-        this.addInspectableCustomProperty({
-            label: "Add CmSym from Url",
-            propertyName: "_inspectorAddCmSymUrl",
-            type: InspectableType.Checkbox,
-        });
-    }
-    get _inspectorLogMaterialMappings() {
-        return this._areasToMaterials === undefined;
-    }
-    set _inspectorLogMaterialMappings(x) {
-        if (this._areasToMaterials === undefined) {
-            return;
-        }
-        logMaterialMappingToConsole(this._areasToMaterials);
-    }
-    get _inspectorAddMaterialToMaterialMappingFromFile() {
-        return this._areasToMaterials === undefined;
-    }
-    set _inspectorAddMaterialToMaterialMappingFromFile(x) {
-        if (this._areasToMaterials === undefined) {
-            return;
-        }
-        const tag = window.prompt("Please provide a Tag for the mapping");
-        if (tag === null || tag.trim().length === 0) {
-            alert("You must provide a tag for the mapping");
-            return;
-        }
-        const fileUpload = document.createElement("input");
-        fileUpload.type = "file";
-        fileUpload.style.display = "none";
-        const body = document.getElementsByTagName("body")[0];
-        body.appendChild(fileUpload);
-        fileUpload.addEventListener("change", (event) => {
-            void (() => __awaiter(this, void 0, void 0, function* () {
-                const files = fileUpload.files;
-                if (files !== null) {
-                    const mtrlApplications = yield Promise.all(Array.from(files)
-                        .map(readFileToArrayBuffer)
-                        .map((bufferAndNamePromise) => __awaiter(this, void 0, void 0, function* () {
-                        const bufferAndName = yield bufferAndNamePromise;
-                        return CfgMtrlApplication.fromBufferForDebug([tag], bufferAndName.fileName, bufferAndName.buffer);
-                    })));
-                    mtrlApplications.forEach((mtrlApplication) => {
-                        this._addDebugMtrlApplication(mtrlApplication);
-                    });
-                }
-                body.removeChild(fileUpload);
-            }))();
-        });
-        fileUpload.click();
-    }
-    get _inspectorAddMaterialToMaterialMappingFromUrl() {
-        return this._areasToMaterials === undefined;
-    }
-    set _inspectorAddMaterialToMaterialMappingFromUrl(x) {
-        if (this._areasToMaterials === undefined) {
-            return;
-        }
-        const tag = window.prompt("Please provide a Tag for the mapping");
-        if (tag === null || tag.trim().length === 0) {
-            alert("You must provide a tag for the mapping");
-            return;
-        }
-        const url = window.prompt("Please provide a material-url");
-        if (url === null || url.trim().length === 0) {
-            alert("You must provide an URL to a material-file");
-            return;
-        }
-        const mtrlApplication = CfgMtrlApplication.fromUrlForDebug([tag], url);
-        this._addDebugMtrlApplication(mtrlApplication);
-    }
-    get _inspectorAddCmSymFile() {
-        return false;
-    }
-    set _inspectorAddCmSymFile(x) {
-        const fileUpload = document.createElement("input");
-        fileUpload.type = "file";
-        fileUpload.style.display = "none";
-        const body = document.getElementsByTagName("body")[0];
-        body.appendChild(fileUpload);
-        const logger = this.logger;
-        const renderEnvironment = this._renderEnvironment;
-        fileUpload.addEventListener("change", (event) => {
-            const files = fileUpload.files;
-            if (files !== null) {
-                const symRootPromises = Array.from(files).map((file) => {
-                    return CfgSymRootNode.makeCfgSymRootFromFile(logger, true, renderEnvironment, this, file);
-                });
-                this._applyDebugSymRoots(symRootPromises);
-            }
-            body.removeChild(fileUpload);
-        });
-        fileUpload.click();
-    }
-    get _inspectorAddCmSymUrl() {
-        return false;
-    }
-    set _inspectorAddCmSymUrl(x) {
-        const url = window.prompt("Please provide a CmSym-url");
-        if (url === null || url.trim().length === 0) {
-            alert("You must provide an URL to a CmSym-file");
-            return;
-        }
-        const symRootNode = CfgSymRootNode.makeCfgSymRootFromUrl(this.logger, true, this._renderEnvironment, this, url, undefined, undefined);
-        this._applyDebugSymRoots([symRootNode]);
-    }
-}
+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());
+    });
+};
+import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
+import { InspectableType } from "@babylonjs/core/Misc/iInspectable.js";
+import { aggregateAllMaterialApplications, CfgMtrlApplication, CfgMtrlApplicationSource, logMaterialMappingToConsole, } from "@configura/web-api";
+import { LogObservable, readFileToArrayBuffer } from "@configura/web-utilities";
+import { CfgAnchorRef, getAnchorTargetPriorityComparer, updatedStretchedAnchorPointMatrix, } from "../utilities/anchor/anchor.js";
+import { makeAnchoredToAnchorMap } from "../utilities/anchor/anchorMap.js";
+import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
+import { modelTransformToSymTransform, symTransformToMatrix } from "../utilities/utilities3D.js";
+import { isSameRootNodeSource } from "../utilities/utilitiesSymRootIdentifier.js";
+import { CfgSymRootNode, isSymRootNode } from "./CfgSymRootNode.js";
+import { CfgTransformNode } from "./CfgTransformNode.js";
+export function isProductNode(value) {
+    return value instanceof CfgProductNode;
+}
+export function isCfgSymRootNode(value) {
+    return value instanceof CfgSymRootNode;
+}
+export function isCfgAnchorableNode(value) {
+    return isProductNode(value) || isCfgSymRootNode(value);
+}
+export class CfgProductNode extends CfgTransformNode {
+    constructor(renderEnvironment, _product) {
+        super(renderEnvironment, `(Product) ${_product.sku}`);
+        this._product = _product;
+        this.logger = new LogObservable();
+        this._destroyed = false;
+        this._applicationAreas = [];
+        this._mtrlApplications = [];
+        this._debugMtrlApplications = [];
+        this._scheduledForRemoval = [];
+        this._anchoredToAnchors = new Map();
+        this._symRootLoadings = [];
+        /**
+         * The passed function is recursively applied on every descendant CfgProductNode in the tree.
+         * This node is included. Destroyed products are not included.
+         */
+        this._applyOnDescendantProductNodes = (fn) => {
+            const result = [];
+            result.push(fn(this));
+            for (const additionalProduct of this._getAdditionalProductNodes()) {
+                result.push(...additionalProduct._applyOnDescendantProductNodes(fn));
+            }
+            return result;
+        };
+        this.key = _product.key;
+        /* eslint-disable */
+        // Useful debug tool:
+        if (false) {
+            window.product = this;
+            window[this.key] = this;
+            console.log(`Use "window.product" or 'window["${this.key}"]' to access "${this.key}" product node.`);
+        }
+        /* eslint-enable */
+        this._refreshTransformAndAnchoring();
+    }
+    static make(renderEnvironment, product) {
+        return new this(renderEnvironment, product);
+    }
+    get cfgClassName() {
+        return "CfgProductNode";
+    }
+    destroy() {
+        this._destroyed = true;
+        this._symRootLoadings.length = 0;
+        for (const symRoot of this._getSymRootChildren().filter((c) => !c.isForDebug)) {
+            this.scheduleForRemoval(symRoot);
+        }
+    }
+    get product() {
+        return this._product;
+    }
+    /**
+     * We want to be able to animate nodes that are on the way out.
+     * So we do not immediately remove them from the tree.
+     */
+    scheduleForRemoval(node) {
+        node.destroy();
+        this._scheduledForRemoval.push(node);
+    }
+    isDestroyed() {
+        return this._destroyed;
+    }
+    _refreshTransformAndAnchoring() {
+        const product = this._product._internal;
+        const modelTransform = product.transform;
+        if (modelTransform !== undefined) {
+            const modelSymTransform = modelTransformToSymTransform(modelTransform);
+            this._modelMatrix = symTransformToMatrix(modelSymTransform.transform());
+        }
+        this.anchorRef = CfgAnchorRef.make(product.anchor);
+        this.refreshTransform();
+    }
+    /**
+     * This function will apply either of tree passed functions on the additional products/ in the
+     * passed CfgProduct and the additional products in the CfgProductNode.
+     * It is not applied recursively.
+     */
+    _syncAdditionalProductNodes(parentProduct, fn) {
+        const { both, productNodeButNoProduct, productButNoProductNode } = fn;
+        const additionalProducts = parentProduct.additionalProducts.filter((c) => c.selected);
+        const additionalProductNodes = this._getAdditionalProductNodes();
+        for (const additionalProductNode of additionalProductNodes) {
+            const index = additionalProducts.findIndex((p) => additionalProductNode.product.isBackedBySame(p));
+            if (index === -1) {
+                if (productNodeButNoProduct === undefined) {
+                    throw Error(`ProductNode ${additionalProductNode.key} exist, but no data for it. There is no handler for this.`);
+                }
+                productNodeButNoProduct(additionalProductNode);
+            }
+            else {
+                const additionalProduct = additionalProducts.splice(index, 1)[0];
+                if (both === undefined) {
+                    throw Error(`ProductNode ${additionalProductNode.key} and data ${additionalProduct.key} exists. There is no handler for this.`);
+                }
+                both(additionalProduct, additionalProductNode);
+            }
+        }
+        for (const additionalProduct of additionalProducts) {
+            if (productButNoProductNode === undefined) {
+                throw Error(`Data ${additionalProduct.key} exists, but no ProductNode for it. There is no handler for this.`);
+            }
+            productButNoProductNode(additionalProduct);
+        }
+    }
+    /**
+     * Application areas are essentially catalogue level material mappings.
+     * This function is recursively applied on additional products.
+     */
+    setApplicationAreas(applicationAreas) {
+        this._applyOnDescendantProductNodes((p) => {
+            p._applicationAreas = applicationAreas;
+        });
+    }
+    /**
+     * Start loading the geometry, but do not yet show it.
+     * This function is recursively applied on additional products.
+     */
+    loadGeo(coordinatorWithMeta) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const product = this._product;
+            const rootNodeSources = product._internal.rootNodeSources || [];
+            // Duplicate filter
+            const updateRootNodeSources = rootNodeSources.reduce((a, c) => {
+                if (a.every((s) => !isSameRootNodeSource(s, c))) {
+                    a.push(c);
+                }
+                return a;
+            }, []);
+            const allSymRootLoadings = this._symRootLoadings;
+            let i = allSymRootLoadings.length;
+            while (i--) {
+                const symRootLoading = allSymRootLoadings[i];
+                const updateIndex = updateRootNodeSources.findIndex((rootNodeSource) => isSameRootNodeSource(rootNodeSource, symRootLoading.rootNodeSource));
+                if (updateIndex === -1) {
+                    // We remove the inProgress, because the thing which is in progress will not be
+                    // wanted when it arrives.
+                    allSymRootLoadings.splice(i, 1);
+                }
+            }
+            for (const symRootChild of this._getSymRootChildren().filter((c) => !c.isForDebug)) {
+                const updateIndex = updateRootNodeSources.findIndex((m) => symRootChild.isSameIdentifierTransformAndAnchor(m));
+                if (updateIndex === -1) {
+                    // Not found, remove
+                    this.scheduleForRemoval(symRootChild);
+                }
+                else {
+                    // Found, no need to change anything
+                    updateRootNodeSources.splice(updateIndex, 1);
+                }
+            }
+            const batchSymRootLoadings = updateRootNodeSources.map((rootNodeSource) => {
+                let symRootLoading = allSymRootLoadings.find((s) => isSameRootNodeSource(rootNodeSource, s.rootNodeSource));
+                if (symRootLoading === undefined) {
+                    symRootLoading = {
+                        rootNodeSource,
+                        rootNodePromise: CfgSymRootNode.makeCfgSymRootFromRootNodeSource(this.logger, false, this._renderEnvironment, this, rootNodeSource),
+                    };
+                    allSymRootLoadings.push(symRootLoading);
+                }
+                return symRootLoading;
+            });
+            yield Promise.all([
+                ...batchSymRootLoadings.map((s) => s.rootNodePromise),
+                this._loadAdditionalProducts(coordinatorWithMeta),
+            ]);
+            const addedSymRoots = (yield Promise.all(batchSymRootLoadings.map((s) => s.rootNodePromise)))
+                .filter((symRoot) => symRoot !== undefined)
+                .filter((symRoot) => {
+                const loadInProgressIndex = allSymRootLoadings.findIndex((symRootLoadInProgress) => symRoot.isSameIdentifierTransformAndAnchor(symRootLoadInProgress.rootNodeSource));
+                if (loadInProgressIndex === -1) {
+                    // This node no longer needs to be added...
+                    if (!symRoot.parent) {
+                        // ...and was never added as a child
+                        symRoot.destroy();
+                        symRoot.dispose();
+                    }
+                    return false;
+                }
+                // We'll add this, so it moves from "loading" to being a proper child
+                allSymRootLoadings.splice(loadInProgressIndex, 1);
+                this.add(symRoot);
+                return true;
+            });
+            // Updated symRootChildren
+            const anchorableChildren = this._getAnchorableNodes();
+            // Make a map of who is anchored to who
+            const anchoredToAnchors = makeAnchoredToAnchorMap(anchorableChildren, getAnchorTargetPriorityComparer(this.product._internal.measureDefinitions));
+            this._anchoredToAnchors = anchoredToAnchors;
+            for (const child of anchorableChildren) {
+                child.setAnchorTarget(anchoredToAnchors.get(child));
+            }
+            this.refreshStretch();
+            for (const symRoot of addedSymRoots) {
+                if (coordinatorWithMeta === undefined) {
+                    continue;
+                }
+                const c = coordinatorWithMeta.coordinator;
+                yield c.prepareForEnter.bind(c)(symRoot, coordinatorWithMeta.isNewProduct);
+            }
+        });
+    }
+    _loadAdditionalProducts(coordinatorWithMeta) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const additionalProductLoadPromises = [];
+            this._syncAdditionalProductNodes(this._product, {
+                productNodeButNoProduct: (additionalProductNode) => {
+                    this.scheduleForRemoval(additionalProductNode);
+                },
+                productButNoProductNode: (additionalProduct) => {
+                    const additionalProductNode = CfgProductNode.make(this._renderEnvironment, additionalProduct);
+                    this.add(additionalProductNode);
+                    additionalProductLoadPromises.push(additionalProductNode.loadGeo(coordinatorWithMeta));
+                },
+                both: (_additionalProduct, additionalProductNode) => {
+                    additionalProductNode._refreshTransformAndAnchoring();
+                    additionalProductLoadPromises.push(additionalProductNode.loadGeo(coordinatorWithMeta));
+                },
+            });
+            yield Promise.all(additionalProductLoadPromises);
+        });
+    }
+    /**
+     * Run any animations and then permanently removes the nodes from the tree
+     * This function is recursively applied on additional products.
+     */
+    flushScheduledForRemove(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const thisBatch = this._scheduledForRemoval.slice();
+            this._scheduledForRemoval.length = 0;
+            yield Promise.all(this._getAdditionalProductNodes(true).map((additionalProductNode) => additionalProductNode.flushScheduledForRemove(animationCoordinator)));
+            yield Promise.all(thisBatch.map((node) => (() => __awaiter(this, void 0, void 0, function* () {
+                if (node instanceof CfgSymRootNode) {
+                    if (animationCoordinator !== undefined) {
+                        const c = animationCoordinator.coordinator;
+                        yield c.prepareForExit.bind(c)(node);
+                    }
+                }
+                this.remove(true, node);
+            }))()));
+        });
+    }
+    /**
+     * Are all materials currently needed loaded and ready to be applied?
+     * This function does not take additional products into account.
+     */
+    _isAllMeshMaterialsReady() {
+        return this._getSymRootChildren().reduce((a, c) => a && c.isAllMeshMaterialsReady(), true);
+    }
+    /**
+     * Resolves when all materials currently needed have been loaded and are ready to be applied.
+     * This function does not take additional products into account.
+     */
+    _awaitAllMeshMaterialsReady() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                let maxTries = 60 * 60; // Assuming 60 fps this gives a minute, which is absurdly long
+                const frame = () => {
+                    if (this._isAllMeshMaterialsReady()) {
+                        resolve();
+                        return;
+                    }
+                    if (maxTries === 0) {
+                        reject("Materials not ready in time");
+                        return;
+                    }
+                    window.requestAnimationFrame(frame);
+                    maxTries--;
+                };
+                frame();
+            });
+        });
+    }
+    /**
+     * Loads the materials needed.
+     * This function is recursively applied on additional products.
+     */
+    loadMaterials(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const product = this._product;
+            const productMtrlApplications = (product._internal.mtrlApplications || []).map((m) => CfgMtrlApplication.fromMtrlLikeApplication(CfgMtrlApplicationSource.Product, m));
+            this._mtrlApplications = productMtrlApplications;
+            this._configuration = product.configuration;
+            yield Promise.all([
+                this._aggregateMaterialsPushToChildrenAndLoad(animationCoordinator),
+                ...this._getAdditionalProductNodes().map((additionalProductNode) => additionalProductNode.loadMaterials(animationCoordinator)),
+            ]);
+        });
+    }
+    /**
+     * Update the tag (area) to material mapping and gives them to sym children
+     * This function does not take additional products into account.
+     */
+    _aggregateMaterialsPushToChildrenAndLoad(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._applicationAreas === undefined || this._configuration === undefined) {
+                return;
+            }
+            const areasToMaterials = aggregateAllMaterialApplications(this._applicationAreas, this._mtrlApplications, this._configuration, this._debugMtrlApplications);
+            this._areasToMaterials = areasToMaterials;
+            yield this._pushMaterialToSymRootChildrenAndLoad(animationCoordinator);
+        });
+    }
+    /**
+     * Starts loading the materials on the sym children (but does not apply)
+     * This function does not take additional products into account.
+     */
+    _pushMaterialToSymRootChildrenAndLoad(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const areasToMaterials = this._areasToMaterials;
+            if (areasToMaterials === undefined) {
+                return;
+            }
+            yield Promise.all(this._getSymRootChildren().map((child) => child.setMaterialsAndLoad(areasToMaterials, animationCoordinator)));
+        });
+    }
+    _getSymRootChildren() {
+        return this.getChildren()
+            .filter(isSymRootNode)
+            .filter((c) => !c.isDestroyed());
+    }
+    _getAdditionalProductNodes(includeDestroyed = false) {
+        return this.getChildren()
+            .filter(isProductNode)
+            .filter((c) => includeDestroyed || !c.isDestroyed());
+    }
+    _getAnchorableNodes() {
+        return this.getChildren()
+            .filter(isCfgAnchorableNode)
+            .filter((c) => !c.isDestroyed());
+    }
+    /**
+     * Applies and thereby shows the geometry. Finally flushes scheduled for remove.
+     * This function is recursively applied on additional products.
+     */
+    applyGeo(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this._applyOnDescendantProductNodes((p) => (() => __awaiter(this, void 0, void 0, function* () {
+                p._getSymRootChildren().forEach((child) => {
+                    child.applyGeo();
+                });
+                // Wait until materials have been loaded so that we don't get any blinking.
+                // It might seem wrong that this is done after we apply, but the material
+                // will not be ready unless it is applied. So we wait after applying.
+                yield p._awaitAllMeshMaterialsReady();
+            }))()));
+            // Not blocking on this
+            void this.flushScheduledForRemove(animationCoordinator);
+        });
+    }
+    /**
+     * Applies and thereby shows the right materials.
+     * This function is recursively applied on additional products.
+     */
+    applyMaterials() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(this._applyOnDescendantProductNodes((p) => (() => __awaiter(this, void 0, void 0, function* () {
+                p._getSymRootChildren().forEach((child) => {
+                    child.applyMaterial();
+                });
+                // Wait until materials have been loaded so that we don't get any blinking.
+                // It might seem wrong that this is done after we apply, but the material
+                // will not be ready unless it is applied. So we wait after applying.
+                yield p._awaitAllMeshMaterialsReady();
+            }))()));
+        });
+    }
+    setAnchorTarget(anchorTarget) {
+        this._anchorTarget = anchorTarget;
+    }
+    refreshStretch() {
+        const updated = updatedStretchedAnchorPointMatrix(this.anchorRef, this._anchorTarget, this._stretchedAnchorPointMatrix);
+        if (updated !== undefined) {
+            this._stretchedAnchorPointMatrix = updated;
+            this.refreshTransform();
+        }
+        // anchoredToAnchors is sorted so that anchors always are before what
+        // is anchored to them. That way we know that if we refreshStretch on
+        // them first anchor-on-anchor will work correctly.
+        const anchorableChildren = this._getAnchorableNodes().slice();
+        for (const anchor of this._anchoredToAnchors.values()) {
+            const i = anchorableChildren.indexOf(anchor);
+            if (i === -1) {
+                // As multiple anchors can anchor to the same anchor this will happen
+                continue;
+            }
+            anchor.refreshStretch();
+            anchorableChildren.splice(i, 1);
+        }
+        // Refresh for the un-anchored
+        for (const child of anchorableChildren) {
+            child.refreshStretch();
+        }
+    }
+    get originalMatrix() {
+        var _a;
+        if (this._originalMatrixWithModelTransform === undefined) {
+            let originalMatrix = (_a = this._modelMatrix) !== null && _a !== void 0 ? _a : Matrix.Identity();
+            const stretchedAnchorPointMatrix = this._stretchedAnchorPointMatrix;
+            if (stretchedAnchorPointMatrix !== undefined) {
+                originalMatrix = originalMatrix.multiply(stretchedAnchorPointMatrix);
+            }
+            this._originalMatrixWithModelTransform = originalMatrix;
+        }
+        return this._originalMatrixWithModelTransform;
+    }
+    refreshTransform() {
+        this._originalMatrixWithModelTransform = undefined; // Reset the matrix
+        this.setPreTransformMatrix(this.originalMatrix);
+    }
+    _applyDebugSymRoots(symRootPromises) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const allSymRoots = yield Promise.all(symRootPromises);
+            allSymRoots.forEach((symRoot) => {
+                if (symRoot === undefined) {
+                    return;
+                }
+                this.add(symRoot);
+            });
+            yield this.applyGeo();
+            yield this._pushMaterialToSymRootChildrenAndLoad();
+            yield this.applyMaterials();
+            this._renderEnvironment.scheduleRerender();
+        });
+    }
+    _addDebugMtrlApplication(debugMtrlApplication) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._debugMtrlApplications.push(debugMtrlApplication);
+            yield this._aggregateMaterialsPushToChildrenAndLoad();
+            yield this.applyMaterials();
+            this._renderEnvironment.scheduleRerender();
+        });
+    }
+    get boundingBox() {
+        const bb = [...this._getSymRootChildren(), ...this._getAdditionalProductNodes()].reduce((a, m) => {
+            a.expand(m.boundingBox);
+            return a;
+        }, new CfgBoundingBox());
+        bb.applyMatrix(this.originalMatrix);
+        return bb;
+    }
+    addInspectorProperties() {
+        super.addInspectorProperties();
+        this.addInspectableCustomProperty({
+            label: "Log materialMappings",
+            propertyName: "_inspectorLogMaterialMappings",
+            type: InspectableType.Checkbox,
+        });
+        this.addInspectableCustomProperty({
+            label: "Add material to mapping from File",
+            propertyName: "_inspectorAddMaterialToMaterialMappingFromFile",
+            type: InspectableType.Checkbox,
+        });
+        this.addInspectableCustomProperty({
+            label: "Add material to mapping from Url",
+            propertyName: "_inspectorAddMaterialToMaterialMappingFromUrl",
+            type: InspectableType.Checkbox,
+        });
+        this.addInspectableCustomProperty({
+            label: "Add CmSym from File",
+            propertyName: "_inspectorAddCmSymFile",
+            type: InspectableType.Checkbox,
+        });
+        this.addInspectableCustomProperty({
+            label: "Add CmSym from Url",
+            propertyName: "_inspectorAddCmSymUrl",
+            type: InspectableType.Checkbox,
+        });
+    }
+    get _inspectorLogMaterialMappings() {
+        return this._areasToMaterials === undefined;
+    }
+    set _inspectorLogMaterialMappings(x) {
+        if (this._areasToMaterials === undefined) {
+            return;
+        }
+        logMaterialMappingToConsole(this._areasToMaterials);
+    }
+    get _inspectorAddMaterialToMaterialMappingFromFile() {
+        return this._areasToMaterials === undefined;
+    }
+    set _inspectorAddMaterialToMaterialMappingFromFile(x) {
+        if (this._areasToMaterials === undefined) {
+            return;
+        }
+        const tag = window.prompt("Please provide a Tag for the mapping");
+        if (tag === null || tag.trim().length === 0) {
+            alert("You must provide a tag for the mapping");
+            return;
+        }
+        const fileUpload = document.createElement("input");
+        fileUpload.type = "file";
+        fileUpload.style.display = "none";
+        const body = document.getElementsByTagName("body")[0];
+        body.appendChild(fileUpload);
+        fileUpload.addEventListener("change", (event) => {
+            void (() => __awaiter(this, void 0, void 0, function* () {
+                const files = fileUpload.files;
+                if (files !== null) {
+                    const mtrlApplications = yield Promise.all(Array.from(files)
+                        .map(readFileToArrayBuffer)
+                        .map((bufferAndNamePromise) => __awaiter(this, void 0, void 0, function* () {
+                        const bufferAndName = yield bufferAndNamePromise;
+                        return CfgMtrlApplication.fromBufferForDebug([tag], bufferAndName.fileName, bufferAndName.buffer);
+                    })));
+                    mtrlApplications.forEach((mtrlApplication) => {
+                        this._addDebugMtrlApplication(mtrlApplication);
+                    });
+                }
+                body.removeChild(fileUpload);
+            }))();
+        });
+        fileUpload.click();
+    }
+    get _inspectorAddMaterialToMaterialMappingFromUrl() {
+        return this._areasToMaterials === undefined;
+    }
+    set _inspectorAddMaterialToMaterialMappingFromUrl(x) {
+        if (this._areasToMaterials === undefined) {
+            return;
+        }
+        const tag = window.prompt("Please provide a Tag for the mapping");
+        if (tag === null || tag.trim().length === 0) {
+            alert("You must provide a tag for the mapping");
+            return;
+        }
+        const url = window.prompt("Please provide a material-url");
+        if (url === null || url.trim().length === 0) {
+            alert("You must provide an URL to a material-file");
+            return;
+        }
+        const mtrlApplication = CfgMtrlApplication.fromUrlForDebug([tag], url);
+        this._addDebugMtrlApplication(mtrlApplication);
+    }
+    get _inspectorAddCmSymFile() {
+        return false;
+    }
+    set _inspectorAddCmSymFile(x) {
+        const fileUpload = document.createElement("input");
+        fileUpload.type = "file";
+        fileUpload.style.display = "none";
+        const body = document.getElementsByTagName("body")[0];
+        body.appendChild(fileUpload);
+        const logger = this.logger;
+        const renderEnvironment = this._renderEnvironment;
+        fileUpload.addEventListener("change", (event) => {
+            const files = fileUpload.files;
+            if (files !== null) {
+                const symRootPromises = Array.from(files).map((file) => {
+                    return CfgSymRootNode.makeCfgSymRootFromFile(logger, true, renderEnvironment, this, file);
+                });
+                this._applyDebugSymRoots(symRootPromises);
+            }
+            body.removeChild(fileUpload);
+        });
+        fileUpload.click();
+    }
+    get _inspectorAddCmSymUrl() {
+        return false;
+    }
+    set _inspectorAddCmSymUrl(x) {
+        const url = window.prompt("Please provide a CmSym-url");
+        if (url === null || url.trim().length === 0) {
+            alert("You must provide an URL to a CmSym-file");
+            return;
+        }
+        const symRootNode = CfgSymRootNode.makeCfgSymRootFromUrl(this.logger, true, this._renderEnvironment, this, url, undefined, undefined);
+        this._applyDebugSymRoots([symRootNode]);
+    }
+}