@colijnit/configuratorcore 262.1.0

package/fesm2022/colijnit-configuratorcore.mjs

@@ -0,0 +1,2941 @@
+import * as THREE from 'three';
+import { Group, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Vector3, CylinderGeometry, Mesh, MeshBasicMaterial, Object3D, EquirectangularReflectionMapping, Vector2, Material as Material$1, Texture, Source, Camera, Box3, LinearSRGBColorSpace, SRGBColorSpace, Color, MaterialLoader, MeshPhongMaterial, NearestFilter, DoubleSide, MeshPhysicalMaterial, MeshStandardMaterial, Euler, Quaternion } from 'three';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/service/business-object-factory.js';
+import { DecoNodeType } from '@colijnit/configuratorapi/build/enum/deco-node-type.enum.js';
+import JSZip from 'jszip';
+import axios from 'axios';
+import { DecoNode } from '@colijnit/configuratorapi/build/model/deco-node.js';
+import { Answer } from '@colijnit/configuratorapi/build/model/answer.js';
+import { SelectorStructure } from '@colijnit/configuratorapi/build/model/selector-structure.bo.js';
+import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum.js';
+import { DecoNodeKind } from '@colijnit/configuratorapi/build/enum/deco-node-kind.enum.js';
+import { Selection } from '@colijnit/configuratorapi/build/model/selection.js';
+import { HdecoPositioning } from '@colijnit/configuratorapi/build/enum/hdeco-positioning.enum.js';
+
+class ObjectUtils {
+    static materialProps = ['map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap', 'envMap', 'aoMap', 'roughnessMap', 'metalnessMap'];
+    static CreateArrow(name, color, length, direction, headLength, headWidth, doubleArrow = false) {
+        const arrow = new Group();
+        const lineGeometry = new BufferGeometry();
+        lineGeometry.setAttribute('position', new Float32BufferAttribute([0, 0, 0, 0, 1, 0], 3));
+        const line = new Line(lineGeometry, new LineBasicMaterial({ color: color, toneMapped: false }));
+        lineGeometry.rotateX(Math.PI / 2 * direction.z);
+        lineGeometry.rotateY(Math.PI / 2 * direction.y);
+        lineGeometry.rotateZ(Math.PI / 2 * direction.x);
+        const translate = new Vector3((direction.x) / 2, direction.y ? -(direction.y) / 2 : 0, -(direction.z) / 2);
+        lineGeometry.translate(translate.x, translate.y, translate.z);
+        line.name = 'arrow_line';
+        line.matrixAutoUpdate = false;
+        arrow.add(line);
+        const coneGeometry = new CylinderGeometry(0, 0.5, 1, 5, 1);
+        const coneRightGeometry = coneGeometry.clone();
+        const cone = new Mesh(coneGeometry, new MeshBasicMaterial({ color: color, toneMapped: false }));
+        coneGeometry.rotateX(Math.PI / 2 * -direction.z);
+        if (direction.y) {
+            coneGeometry.rotateZ(Math.PI);
+        }
+        coneGeometry.rotateZ(Math.PI / 2 * -direction.x);
+        // coneGeometry.translate(translate.x * 2, translate.y * 2, translate.z * 2);
+        cone.name = 'arrow_cone_left';
+        cone.matrixAutoUpdate = false;
+        arrow.add(cone);
+        if (doubleArrow) {
+            const coneRight = new Mesh(coneRightGeometry, new MeshBasicMaterial({ color: color, toneMapped: false }));
+            coneRightGeometry.rotateX(Math.PI / 2 * direction.z);
+            coneRightGeometry.rotateZ(Math.PI / 2 * direction.x);
+            // coneRightGeometry.translate(-translate.x * 2, -translate.y * 2, -translate.z * 2);
+            coneRight.name = 'arrow_cone_right';
+            coneRight.matrixAutoUpdate = false;
+            arrow.add(coneRight);
+        }
+        arrow.name = name;
+        return ObjectUtils.UpdateArrowLength(arrow, length, direction, headLength, headWidth);
+    }
+    static UpdateArrowLength(arrow, length, direction, headLength, headWidth, doubleArrow = false) {
+        try {
+            const arrowLine = arrow.getObjectByName('arrow_line');
+            const scale = new Vector3(direction.x ? Math.max(0.0001, length - (doubleArrow ? headLength * 2 : headLength)) : 1, direction.y ? Math.max(0.0001, length - (doubleArrow ? headLength * 2 : headLength)) : 1, direction.z ? Math.max(0.0001, length - (doubleArrow ? headLength * 2 : headLength)) : 1);
+            arrowLine.scale.copy(scale);
+            arrowLine.updateMatrix();
+            const cone = arrow.getObjectByName('arrow_cone_left');
+            if (cone) {
+                cone.scale.set(headWidth, headLength, headWidth);
+                cone.position.x = direction.x ? length / 2 - headLength : 0;
+                cone.position.y = direction.y ? -length / 2 + headLength : 0;
+                cone.position.z = direction.z ? -length / 2 + headLength : 0;
+                cone.updateMatrix();
+            }
+            const coneRight = arrow.getObjectByName('arrow_cone_right');
+            if (coneRight) {
+                coneRight.scale.set(headWidth, headLength, headWidth);
+                coneRight.position.x = direction.x ? -length / 2 + headLength : 0;
+                coneRight.position.y = direction.y ? length / 2 - headLength : 0;
+                coneRight.position.z = direction.z ? length / 2 - headLength : 0;
+                coneRight.updateMatrix();
+            }
+            return arrow;
+        }
+        catch (error) {
+        }
+    }
+    static ChildOf(obj, parentName) {
+        if (obj && obj.parent && obj.parent.name === parentName) {
+            return true;
+        }
+        else if (obj.parent) {
+            return ObjectUtils.ChildOf(obj.parent, parentName);
+        }
+        else {
+            return false;
+        }
+    }
+    static GetParentItem(element) {
+        if (!element.parent) {
+            return null;
+        }
+        if (element.parent instanceof Object3D) {
+            return element.parent;
+        }
+        else {
+            return ObjectUtils.GetParentItem(element.parent);
+        }
+    }
+    static GetDefaultMaterial(object) {
+        const children = object.children.filter(c => {
+            if (c instanceof Mesh) {
+                return Array.isArray(c.material) ?
+                    c.material.find(m => m.name.toLowerCase().startsWith('default_')) :
+                    c.material.name.toLowerCase().startsWith('default_');
+            }
+        });
+        return children.map(c => c.material)[0];
+    }
+    static SameMaterial(first, second) {
+        if (!first && !second) {
+            return true;
+        }
+        return first.hasOwnProperty('map') && second.hasOwnProperty('map') && first.map && second.map &&
+            first.map.image.src === second.map.image.src;
+    }
+    static GetChanges(firstItems, secondItems) {
+        const result = [];
+        for (let i = 0; i < secondItems.length; i++) { // check added/changed items
+            const secondItem = secondItems[i];
+            let oldPosition;
+            let oldMaterial;
+            const newPosition = new Vector3().copy(secondItem.position);
+            const newMaterial = ObjectUtils.GetDefaultMaterial(secondItem);
+            const firstItem = firstItems.find(fi => fi.name === secondItems[i].name);
+            if (firstItem) {
+                oldPosition = new Vector3().copy(firstItem.position);
+                oldMaterial = ObjectUtils.GetDefaultMaterial(firstItem);
+            }
+            if ((!oldPosition || (newPosition && !oldPosition.equals(newPosition))) || !ObjectUtils.SameMaterial(oldMaterial, newMaterial)) {
+                result.push({
+                    object: secondItem,
+                    name: secondItem.name,
+                    oldPosition: oldPosition,
+                    newPosition: newPosition,
+                    oldMaterial: oldMaterial,
+                    newMaterial: newMaterial
+                });
+            }
+        }
+        for (let i = 0; i < firstItems.length; i++) { // check deleted items
+            const firstItem = firstItems[i];
+            const oldPosition = new Vector3().copy(firstItem.position);
+            let newPosition;
+            const secondItem = secondItems.find(fi => fi.name === firstItems[i].name);
+            if (secondItem) {
+                newPosition = new Vector3().copy(secondItem.position);
+            }
+            if (!newPosition || (newPosition && !oldPosition.equals(newPosition))) {
+                result.push({
+                    object: firstItem,
+                    name: firstItem.name,
+                    oldPosition: oldPosition,
+                    newPosition: newPosition
+                });
+            }
+        }
+        return result;
+    }
+    static GetSelectionFromSelectedObject(object) {
+        if (object) {
+            if (object.userData && object.userData.selection) {
+                return object.userData.selection;
+            }
+            else if (object.parent) {
+                return this.GetSelectionFromSelectedObject(object.parent);
+            }
+            else {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+    static UpdateUvs(geo) {
+        if (geo) {
+            const pos = geo.attributes.position;
+            const b3 = new THREE.Box3().setFromBufferAttribute(pos);
+            const b3size = new THREE.Vector3();
+            b3.getSize(b3size);
+            const uv = [];
+            for (let i = 0; i < pos.count; i++) {
+                const x = pos.getX(i);
+                const y = pos.getY(i);
+                const u = (x - b3.min.x) / b3size.x;
+                const v = (y - b3.min.y) / b3size.y;
+                uv.push(u, v);
+            }
+            geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+        }
+    }
+    static async LoadHDRI(path, scene) {
+        const hdri = await new RGBELoader().loadAsync(path);
+        hdri.mapping = EquirectangularReflectionMapping;
+        scene.environment = hdri;
+    }
+    static ProjectToPlane(points) {
+        const centroid = new Vector3();
+        points.forEach(p => centroid.add(p));
+        centroid.divideScalar(points.length);
+        const v1 = points[1].clone().sub(points[0]);
+        const v2 = points[2].clone().sub(points[0]);
+        const normal = v1.clone().cross(v2).normalize();
+        const arbitrary = Math.abs(normal.dot(new Vector3(1, 0, 0))) > 0.9
+            ? new Vector3(0, 1, 0)
+            : new Vector3(1, 0, 0);
+        const u = new Vector3().crossVectors(normal, arbitrary).normalize();
+        const v = new Vector3().crossVectors(normal, u).normalize();
+        return points.map(p => {
+            const rel = p.clone().sub(centroid);
+            return new Vector2(rel.dot(u), rel.dot(v));
+        });
+    }
+    static CloneMaterial(material, deepClone = false) {
+        if (material instanceof Material$1) {
+            const onBeforeCompile = material.onBeforeCompile;
+            const onBeforeRender = material.onBeforeRender;
+            const clone = material.clone();
+            clone.onBeforeCompile = onBeforeCompile;
+            clone.onBeforeRender = onBeforeRender;
+            this.materialProps
+                .filter(mapType => clone[mapType] && clone[mapType] instanceof Texture)
+                .forEach(mapType => clone[mapType] = ObjectUtils.CloneTexture(clone[mapType], deepClone));
+            return clone;
+        }
+        return material.map((m) => {
+            const onBeforeCompile = m.onBeforeCompile;
+            const onBeforeRender = m.onBeforeRender;
+            const clone = m.clone();
+            clone.onBeforeCompile = onBeforeCompile;
+            clone.onBeforeRender = onBeforeRender;
+            this.materialProps
+                .filter(mapType => clone[mapType] && clone[mapType] instanceof Texture)
+                .forEach(mapType => clone[mapType] = ObjectUtils.CloneTexture(clone[mapType], deepClone));
+            return clone;
+        });
+    }
+    /**
+     * ThreeJS does not clone image property, so it stays a reference to the original image.
+     * When deepClone, this method creates a new image and copies the original image data to it.
+     * @param texture
+     * @param deepClone
+     * @constructor
+     */
+    static CloneTexture(texture, deepClone = false) {
+        const clone = texture.clone();
+        if (!deepClone) {
+            clone.needsUpdate = true;
+            return clone;
+        }
+        if (texture.image) {
+            if (texture.image instanceof HTMLImageElement && texture.image.src) {
+                const img = texture.image;
+                const newImage = new Image();
+                newImage.src = img.src;
+                clone.source = new Source(newImage);
+            }
+            else if (texture.image instanceof HTMLCanvasElement) {
+                const canvas = texture.image;
+                const newCanvas = document.createElement('canvas');
+                newCanvas.width = canvas.width;
+                newCanvas.height = canvas.height;
+                const ctx = newCanvas.getContext('2d');
+                if (ctx) {
+                    ctx.drawImage(canvas, 0, 0);
+                }
+                clone.source = new Source(newCanvas);
+            }
+            else if (texture.image.data && (texture.image.data.slice || texture.image.data instanceof ArrayBuffer)) {
+                const imgData = texture.image;
+                clone.image = {
+                    ...imgData,
+                    data: imgData.data.slice ? imgData.data.slice(0) : new Uint8Array(imgData.data).slice(0) // Deep copy the TypedArray
+                };
+            }
+        }
+        clone.needsUpdate = true;
+        return clone;
+    }
+    static CloneObject3D(source) {
+        const newObject = new Object3D();
+        source.children.forEach((child) => {
+            if (!child.visible) {
+                return;
+            }
+            if (child instanceof Mesh) {
+                newObject.add(child.clone());
+            }
+            else if (child instanceof Object3D) {
+                const clone = ObjectUtils.CloneObject3D(child);
+                clone.position.copy(child.position);
+                clone.rotation.copy(child.rotation);
+                newObject.add(clone);
+            }
+        });
+        return newObject;
+    }
+    static DeepCloneObject3D(source) {
+        if (!source) {
+            return new Object3D();
+        }
+        const clone = source.clone();
+        clone.traverse((obj) => {
+            if (obj instanceof Mesh && obj.material) {
+                obj.material = ObjectUtils.CloneMaterial(obj.material, true);
+            }
+        });
+        return clone;
+    }
+    static DisposeMaterial(material) {
+        if (!material) {
+            return;
+        }
+        if (Array.isArray(material)) {
+            material.forEach(mtrl => ObjectUtils.DisposeMaterial(mtrl));
+            return;
+        }
+        for (const key in material) {
+            if (material.hasOwnProperty(key)) {
+                const value = material[key];
+                if (value && value.isTexture) {
+                    value.dispose();
+                }
+            }
+        }
+        material.dispose();
+    }
+    static DisposeObject(object) {
+        if (!object) {
+            return;
+        }
+        if (object.children.length) {
+            object.children.forEach(child => this.DisposeObject(child));
+        }
+        ObjectUtils.DisposeNode(object);
+    }
+    static GetParentCustomObject(element) {
+        if (!element.parent) {
+            return null;
+        }
+        if (element.parent instanceof Object3D) {
+            return element.parent;
+        }
+        else {
+            return ObjectUtils.GetParentCustomObject(element.parent);
+        }
+    }
+    static DisposeNode(node) {
+        node.traverse((obj) => {
+            if (obj instanceof Mesh) {
+                if (obj.geometry) {
+                    obj.geometry.dispose();
+                }
+                ObjectUtils.DisposeMaterial(obj.material);
+            }
+            if (typeof obj.dispose === 'function') {
+                // @ts-ignore
+                obj.dispose();
+            }
+        });
+    }
+    static _remapFloat(v, min0, max0, min1, max1) {
+        return min1 + (v - min0) / (max0 - min0) * (max1 - min1);
+    }
+}
+
+class ThreedUtils {
+    clips = [];
+    _objectCache = new Map();
+    clearCache() {
+        const objs = Array.from(this._objectCache.values());
+        objs.forEach(o => ObjectUtils.DisposeObject(o));
+        this._objectCache.clear();
+    }
+    download3DSource(fileName, setVisibleFalse = true) {
+        return new Promise(async (resolve, reject) => {
+            fileName = fileName.replace('.unity3d', '');
+            let lookupFileName = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
+            if (this._objectCache.has(lookupFileName)) {
+                resolve(this._objectCache.get(lookupFileName));
+                return;
+            }
+            this.loadGlbSource(lookupFileName, setVisibleFalse)
+                .then((obj) => {
+                this._objectCache.set(lookupFileName, obj);
+                resolve(obj);
+            })
+                .catch(() => {
+                reject(`GLB source not found! (${lookupFileName})`);
+            });
+        });
+    }
+    readFileAsText(file) {
+        const fileReader = new FileReader();
+        return new Promise((resolve, reject) => {
+            fileReader.onload = (e) => resolve(e.target.result);
+            fileReader.onerror = error => reject(error);
+            fileReader.readAsText(file);
+        });
+    }
+    async loadJsonModel(filePath) {
+        if (this._objectCache.has(filePath)) {
+            return Promise.resolve(this._objectCache.get(filePath));
+        }
+        const json = await this._readJsonFile(filePath);
+        const loader = new THREE.ObjectLoader();
+        loader.crossOrigin = 'Anonymous';
+        return new Promise((resolve, reject) => {
+            try {
+                const obj = loader.parse(json);
+                this._objectCache.set(filePath, obj);
+                resolve(obj);
+            }
+            catch (e) {
+                reject(null);
+            }
+        });
+    }
+    async loadJsonObjectModel(filePath) {
+        if (this._objectCache.has(filePath)) {
+            return Promise.resolve(this._objectCache.get(filePath));
+        }
+        const loader = new THREE.ObjectLoader();
+        loader.setCrossOrigin('Anonymous');
+        loader.setResourcePath('');
+        return new Promise((resolve, reject) => {
+            loader.load(filePath, (object) => {
+                const obj = (object.type === 'Scene' && object.children[0].type === 'Object3D') ? object.children[0] : object;
+                this._objectCache.set(filePath, obj);
+                resolve(obj);
+            }, xhr => null, error => reject(error));
+        });
+    }
+    async loadGlbModel(file, cleanUp = true, dracoPath) {
+        if (this._objectCache.has(file)) {
+            return Promise.resolve(this._objectCache.get(file));
+        }
+        if (!window.hasOwnProperty('loadGLTF')) {
+            return new Promise((resolve, reject) => {
+                const loader = new GLTFLoader();
+                loader.setDRACOLoader(new DRACOLoader());
+                loader.dracoLoader.setDecoderPath(dracoPath);
+                loader.dracoLoader.setDecoderConfig({ type: 'js' });
+                loader.load(file, async (object) => {
+                    this.clips = object.animations || [];
+                    const obj = this.cleanedUpObjectsWeb(object.scene, false);
+                    this._objectCache.set(file, obj);
+                    resolve(obj);
+                }, xhr => this._handleUpdateProgressBar(xhr.loaded / xhr.total * 100), error => {
+                    console.log('Error! ', error);
+                    reject(error);
+                });
+            });
+        }
+        else {
+            const obj = await window.loadGLTF(file);
+            if (obj) {
+                this._cleanedUpObjects(obj, cleanUp);
+                this._objectCache.set(file, obj);
+                return obj;
+            }
+            else {
+                return null;
+            }
+        }
+    }
+    async loadGlbSource(file, setVisibleFalse = true, dracoPath) {
+        const obj = await this.loadGlbModel(file, true, dracoPath);
+        if (obj) {
+            obj.children = obj.children.filter(c => !(c instanceof THREE.Camera || (c.constructor.name && c.constructor.name.toLowerCase().indexOf('camera') > -1)));
+            obj.children.sort((a, b) => a['name'] < b['name'] ? 1 : -1);
+            obj.children.forEach((c) => {
+                c.traverse((t) => {
+                    t.visible = !t.name.toLowerCase().startsWith('c_');
+                });
+                if (setVisibleFalse) {
+                    c.visible = false;
+                }
+            });
+            if (obj.children.length === 1 && (obj.children[0] instanceof THREE.Group || obj.children[0].constructor.name === 'Group')) { // flatten children
+                const children = obj.children[0].children.slice();
+                const name = obj.children[0].name;
+                obj.children.length = 0;
+                const parent = new THREE.Object3D();
+                parent.name = name;
+                parent.children = children;
+                obj.add(parent);
+            }
+        }
+        return obj;
+    }
+    async textureFromUrl(url) {
+        // url = this._includeBaseUrl(url);
+        return new Promise((resolve, reject) => {
+            const textureLoader = new THREE.TextureLoader();
+            // textureLoader.setBaseU(this._settingsService.settings.assetPath);
+            textureLoader.load(url, (texture) => {
+                texture.wrapT = THREE.RepeatWrapping;
+                texture.wrapS = THREE.RepeatWrapping;
+                texture.repeat.set(1, 1);
+                texture.needsUpdate = true;
+                return resolve(texture);
+            }, null, reject);
+        });
+    }
+    cleanedUpObjectsWeb(object, cleanUp = true) {
+        let obj = new Object3D();
+        // console.log(this.clips);
+        object.children.forEach((c) => {
+            if (!(c instanceof Camera)) {
+                if (cleanUp && c instanceof Group || (c.children.length === 1 && c.children[0] instanceof Group)) {
+                    this._addGroupChildrenToObject(c, obj);
+                }
+                else if ((cleanUp && !(c instanceof Mesh)) || (!(c instanceof Mesh) && !c.name && c.children.length > 0)) {
+                    c.children.forEach((child) => {
+                        child.translateY(c.position.y);
+                    });
+                    c.translateY(-c.position.y);
+                    if (obj.children.length > 0) {
+                        obj.add(c.clone());
+                    }
+                    else {
+                        obj = c.clone();
+                    }
+                }
+                else {
+                    // if (c.position.y > 0 || c.position.y < 0) {
+                    //   c.children.forEach((child) => {
+                    //     child.translateY(c.position.y);
+                    //   });
+                    //   c.translateY(-c.position.y);
+                    // }
+                    obj.add(c.clone());
+                }
+            }
+        });
+        const boundingBox = new Box3().setFromObject(obj);
+        const bbCenterPivot = new Vector3();
+        boundingBox.getCenter(bbCenterPivot);
+        const delta = new Vector3().add(bbCenterPivot).negate();
+        obj.children.forEach((cc) => {
+            cc.position.add(delta);
+        });
+        return obj;
+    }
+    _cleanedUpObjects(object, cleanUp = true) {
+        let obj = new THREE.Object3D();
+        object.children.forEach((c) => {
+            if (!(c instanceof THREE.Camera || (c.constructor.name && c.constructor.name.toLowerCase().indexOf('camera') > -1))) {
+                if (cleanUp && (c instanceof THREE.Group || c.constructor.name === 'Group') || (c.children.length === 1 && (c.children[0] instanceof THREE.Group || c.children[0].constructor.name === 'Group'))) {
+                    this._addGroupChildrenToObject(c, obj);
+                }
+                else if ((cleanUp && !(c instanceof THREE.Mesh || c.constructor.name === 'Mesh')) || (!(c instanceof THREE.Mesh || c.constructor.name === 'Mesh') && !c.name && c.children.length > 0)) {
+                    c.children.forEach((child) => {
+                        child.translateY(c.position.y);
+                    });
+                    c.translateY(-c.position.y);
+                    if (obj.children.length > 0) {
+                        obj.add(c.clone());
+                    }
+                    else {
+                        obj = c.clone();
+                    }
+                }
+                else {
+                    if (c.position.y > 0 || c.position.y < 0) {
+                        c.children.forEach((child) => {
+                            child.translateY(c.position.y);
+                        });
+                        c.translateY(-c.position.y);
+                    }
+                    obj.add(c.clone());
+                }
+            }
+        });
+        const boundingBox = new THREE.Box3().setFromObject(obj);
+        const bbCenterPivot = new THREE.Vector3();
+        boundingBox.getCenter(bbCenterPivot);
+        const delta = new THREE.Vector3().add(bbCenterPivot).negate();
+        obj.children.forEach((cc) => {
+            cc.position.add(delta);
+        });
+        return obj;
+    }
+    _addGroupChildrenToObject(group, obj, cleanUp = true) {
+        group.children.forEach((gc) => {
+            if (cleanUp && (gc instanceof THREE.Group || gc.constructor.name === 'Group')) {
+                this._addGroupChildrenToObject(gc, obj);
+            }
+            else {
+                // gc.translateX(-group.position.x);
+                gc.translateY(group.position.y);
+                // gc.translateZ(-group.position.z);
+                obj.add(gc.clone());
+            }
+        });
+    }
+    _iterateChildren(children, callback) {
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child instanceof THREE.Mesh || child.constructor.name === 'Mesh') {
+                callback(child);
+            }
+            else {
+                this._iterateChildren(child.children, callback);
+            }
+        }
+    }
+    async _readJsonFile(filePath) {
+        try {
+            const response = await fetch(filePath);
+            if (!response.ok) {
+                return '';
+            }
+            else {
+                let empty = false;
+                await response.clone().text().then((value) => {
+                    if (value === '') {
+                        empty = true;
+                    }
+                });
+                return empty ? {} : response.json();
+            }
+        }
+        catch (e) {
+            return '';
+        }
+    }
+    _handleUpdateProgressBar(loaded) {
+        // this._progressService.progress = loaded;
+    }
+}
+
+// @dynamic
+class ImageUtils {
+    static textures = new Map();
+    static CreateTextureFromBase64(id, base64, material, defaultFlip = false) {
+        return new Promise((resolve) => {
+            if (ImageUtils.textures.has(id)) {
+                resolve(ImageUtils.textures.get(id));
+            }
+            else {
+                if (!base64) {
+                    resolve(new Texture());
+                }
+                else {
+                    const loader = new THREE.TextureLoader();
+                    loader.load(base64, (texture) => {
+                        texture.anisotropy = 16;
+                        texture.wrapS = THREE.RepeatWrapping;
+                        texture.wrapT = THREE.RepeatWrapping;
+                        texture.repeat = new THREE.Vector2(material ? material.repeatX : 1, material ? material.repeatY : 1);
+                        texture.flipY = defaultFlip; // sabina stoel gaat hierdoor kapot
+                        texture.colorSpace = LinearSRGBColorSpace;
+                        texture.needsUpdate = true;
+                        ImageUtils.textures.set(id, texture);
+                        resolve(texture);
+                    });
+                }
+            }
+        });
+    }
+    static getFixedImageFilepathUrl(imageFilepathUrl) {
+        return imageFilepathUrl.replace('/content/', '/content43/');
+    }
+    static getDocBodyWithMimeTypeDefinition(fileName, documentBody) {
+        if (documentBody === null) {
+            return documentBody;
+        }
+        const fileExtension = fileName.substr(fileName.lastIndexOf('.') + 1);
+        switch (fileExtension.toLowerCase()) {
+            case 'jpg':
+            case 'jpeg':
+                return 'data:image/jpg;base64,' + documentBody;
+            case 'png':
+                return 'data:image/png;base64,' + documentBody;
+            case 'gif':
+                return 'data:image/gif;base64,' + documentBody;
+            case 'bmp':
+                return 'data:image/bmp;base64,' + documentBody;
+            default:
+                return 'data:image/png;base64,' + documentBody;
+        }
+    }
+    static ClearCache() {
+        ImageUtils.textures.forEach(value => {
+            value.dispose();
+        });
+        ImageUtils.textures.clear();
+    }
+}
+
+class Material {
+    name;
+    schema;
+    specular = new THREE.Color(0.3, 0.3, 0.3);
+    shininess = 0;
+    // public roughness = 1;
+    // public metalness = 0.5;
+    normal;
+    texture;
+    ao;
+    metalness;
+    roughness;
+    repeatX = 4;
+    repeatY = 4;
+    loaded = false;
+    metalnessValue;
+    roughnessValue;
+    displacement;
+    displacementValue;
+    sheen;
+    sheenColor;
+    sheenColorMap;
+    sheenRoughness;
+    sheenRoughnessMap;
+    emissive;
+    emissiveValue;
+    emissiveIntensityValue;
+    envMap;
+    envMapIntensity;
+    opacity;
+    transparent;
+    reflectivity;
+    side;
+    ior;
+    transmission;
+    thickness;
+    specularIntensity;
+    transmissionMap;
+    clearcoatMap;
+    clearcoatRoughnessMap;
+}
+
+class FurnitureMaterial extends Material {
+    textureFilename;
+    normalFilename;
+    aoFilename;
+    metalnessFilename;
+    roughnessFilename;
+    displacementFilename;
+    envMapFilename;
+    emissiveFileName;
+    sheenColorMapFileName;
+    sheenRoughnessMapFileName;
+    transmissionMapFileName;
+}
+class AssetUtils {
+    static async CreateMaterialFromAsset(asset) {
+        const material = new Material();
+        if (!asset) {
+            return material;
+        }
+        if (asset.settings) {
+            AssetUtils.setSettingsOfMaterial(material, asset.settings);
+        }
+        if (asset.texture) {
+            material.texture = await ImageUtils.CreateTextureFromBase64(asset.id + '_texture', asset.texture, material);
+            material.texture.colorSpace = SRGBColorSpace;
+            material.textureFilename = asset.textureFilename;
+        }
+        if (asset.normal) {
+            material.normal = await ImageUtils.CreateTextureFromBase64(asset.id + '_normal', asset.normal, material);
+            material.normalFilename = asset.normalFilename;
+        }
+        if (asset.orm) {
+            material.ao = await ImageUtils.CreateTextureFromBase64(asset.id + '_orm', asset.orm, material);
+            material.roughness = material.ao;
+            material.metalness = material.ao;
+            material.aoFilename = asset.ormFilename;
+            material.roughnessFilename = asset.ormFilename;
+            material.metalnessFilename = asset.ormFilename;
+        }
+        else {
+            if (asset.ao) {
+                material.ao = await ImageUtils.CreateTextureFromBase64(asset.id + '_ao', asset.ao, material);
+                material.aoFilename = asset.aoFilename;
+            }
+            if (asset.metalness) {
+                material.metalness = await ImageUtils.CreateTextureFromBase64(asset.id + '_metalness', asset.metalness, material);
+                material.metalnessFilename = asset.metalnessFilename;
+            }
+            if (asset.roughness) {
+                material.roughness = await ImageUtils.CreateTextureFromBase64(asset.id + '_roughness', asset.roughness, material);
+                material.roughnessFilename = asset.roughnessFilename;
+            }
+        }
+        if (asset.displacement) {
+            material.displacement = await ImageUtils.CreateTextureFromBase64(asset.id + '_displacement', asset.displacement, material);
+            material.displacementFilename = asset.displacementFilename;
+        }
+        if (asset.envMap) {
+            material.envMap = await ImageUtils.CreateTextureFromBase64(asset.id + '_env', asset.envMap, material, true);
+            material.envMapFilename = asset.envMapFilename;
+        }
+        if (asset.sheenColorMap) {
+            material.sheenColorMap = await ImageUtils.CreateTextureFromBase64(asset.id + '_sheen_color', asset.sheenColorMap, material);
+            material.sheenColorMapFileName = asset.sheenColorMapFilename;
+        }
+        if (asset.sheenRoughnessMap) {
+            material.sheenRoughnessMap = await ImageUtils.CreateTextureFromBase64(asset.id + '_sheen_roughness', asset.sheenRoughnessMap, material);
+            material.sheenRoughnessMapFileName = asset.sheenRoughnessMapFilename;
+        }
+        if (asset.transmissionMap) {
+            material.transmissionMap = await ImageUtils.CreateTextureFromBase64(asset.id + '_transmission', asset.transmissionMap, material);
+            material.transmissionMapFileName = asset.transmissionMapFilename;
+        }
+        if (asset.emissive) {
+            material.emissive = await ImageUtils.CreateTextureFromBase64(asset.id + '_emissive', asset.emissive, material);
+            material.emissiveFileName = asset.emissiveFilename;
+        }
+        material.sheen = asset.sheen;
+        material.emissiveIntensityValue = asset.emissiveIntensity;
+        material.emissiveValue = asset.emissiveValue;
+        material.side = asset.side;
+        material.sheenColor = asset.sheenColor;
+        material.sheenRoughness = asset.sheenRoughness;
+        material.opacity = asset.opacity;
+        material.transparent = asset.transparent;
+        material.envMapIntensity = asset.envMapIntensity;
+        material.reflectivity = asset.reflectivity;
+        material.displacementValue = asset.displacementValue;
+        material.transmission = asset.transmission;
+        material.ior = asset.ior;
+        material.thickness = asset.thickness;
+        material.specularIntensity = asset.specularIntensity;
+        return material;
+    }
+    static setSettingsOfMaterial(material, settings) {
+        const shininess = parseFloat(settings['power']);
+        if (!isNaN(shininess)) {
+            material.shininess = shininess;
+            // material.roughness = 1 - (shininess / 100);
+        }
+        const level = parseFloat(settings['level']);
+        if (!isNaN(level)) {
+            material.specular = new THREE.Color(level, level, level);
+        }
+        const repeatObjectUsed = settings.hasOwnProperty('repeat');
+        const repeatx = repeatObjectUsed ? parseFloat(settings['repeat']['repeatx']) : parseFloat(settings['repeatx']);
+        if (!isNaN(repeatx)) {
+            material.repeatX = repeatx;
+        }
+        const repeaty = repeatObjectUsed ? parseFloat(settings['repeat']['repeaty']) : parseFloat(settings['repeaty']);
+        if (!isNaN(repeaty)) {
+            material.repeatY = repeaty;
+        }
+        const metalness = parseFloat(settings['metalness']);
+        if (!isNaN(metalness)) {
+            material.metalnessValue = Math.min(1, metalness);
+        }
+        const roughness = parseFloat(settings['roughness']);
+        if (!isNaN(roughness)) {
+            material.roughnessValue = Math.min(1, roughness);
+        }
+    }
+}
+
+class VariationSettingsSettings {
+    repeatx;
+    repeaty;
+    roughness;
+    metalness;
+}
+class VariationSettings {
+    id;
+    settings = new VariationSettingsSettings();
+    texture;
+    textureFilename;
+    normal;
+    normalFilename;
+    ao;
+    aoFilename;
+    metalness;
+    metalnessFilename;
+    roughness;
+    roughnessFilename;
+    orm;
+    ormFilename;
+    displacement;
+    displacementValue;
+    displacementFilename;
+    sheen;
+    sheenColor;
+    sheenColorMap;
+    sheenColorMapFilename;
+    sheenRoughness;
+    sheenRoughnessMap;
+    sheenRoughnessMapFilename;
+    transmissionMap;
+    transmissionMapFilename;
+    emissive;
+    emissiveFilename;
+    emissiveIntensity;
+    emissiveValue;
+    opacity;
+    transparent;
+    envMap;
+    envMapFilename;
+    envMapIntensity;
+    reflectivity;
+    side;
+    transmission;
+    ior;
+    thickness;
+    specularIntensity;
+    loading = false;
+    loaded = new Subject();
+    material;
+    copyFrom(settings) {
+        this.settings = settings.settings;
+        this.texture = settings.texture;
+        this.textureFilename = settings.textureFilename;
+        this.normal = settings.normal;
+        this.normalFilename = settings.normalFilename;
+        this.ao = settings.ao;
+        this.aoFilename = settings.aoFilename;
+        this.metalness = settings.metalness;
+        this.metalnessFilename = settings.metalnessFilename;
+        this.roughness = settings.roughness;
+        this.roughnessFilename = settings.roughnessFilename;
+        this.orm = settings.orm;
+        this.ormFilename = settings.ormFilename;
+        this.displacement = settings.displacement;
+        this.displacementValue = settings.displacementValue;
+        this.displacementFilename = settings.displacementFilename;
+        this.sheen = settings.sheen;
+        this.sheenColor = settings.sheenColor;
+        this.sheenColorMap = settings.sheenColorMap;
+        this.sheenColorMapFilename = settings.sheenColorMapFilename;
+        this.transmissionMap = settings.transmissionMap;
+        this.transmissionMapFilename = settings.transmissionMapFilename;
+        this.sheenRoughness = settings.sheenRoughness;
+        this.sheenRoughnessMap = settings.sheenRoughnessMap;
+        this.sheenRoughnessMapFilename = settings.sheenRoughnessMapFilename;
+        this.emissive = settings.emissive;
+        this.emissiveFilename = settings.emissiveFilename;
+        this.emissiveIntensity = settings.emissiveIntensity;
+        this.emissiveValue = settings.emissiveValue;
+        this.opacity = settings.opacity;
+        this.transparent = settings.transparent;
+        this.envMap = settings.envMap;
+        this.envMapFilename = settings.envMapFilename;
+        this.envMapIntensity = settings.envMapIntensity;
+        this.reflectivity = settings.reflectivity;
+        this.side = settings.side;
+        this.transmission = settings.transmission;
+        this.ior = settings.ior;
+        this.thickness = settings.thickness;
+        this.specularIntensity = settings.specularIntensity;
+        this.material = settings.material;
+    }
+}
+
+// Static utility functions holder related to files.
+// @dynamic
+class FileUtils {
+    static _cachedTextureUploads = new Map();
+    static _filesDontExist = [];
+    static _filesExist = [];
+    static async DoesFileExist(url) {
+        try {
+            if (this._filesDontExist.indexOf(url) > -1) { // no need to check again
+                return false;
+            }
+            if (this._filesExist.indexOf(url) > -1) { // no need to check again
+                return true;
+            }
+            const response = await fetch(url, { method: 'HEAD' });
+            if (response.ok && response.status === 200) {
+                this._filesExist.push(url);
+                return true;
+            }
+            this._filesDontExist.push(url);
+            return false;
+        }
+        catch (error) {
+            this._filesDontExist.push(url);
+            return false;
+        }
+    }
+    // Returns the given dataUri string stripped of the mimetype part.
+    static StripMimeStringFromDataUri(dataUri) {
+        if (!dataUri) {
+            return '';
+        }
+        const mimeString = this.GetMimeStringFromDataUri(dataUri);
+        return dataUri.substr(mimeString.length + 1);
+    }
+    static GetMimeStringFromDataUri(dataUri) {
+        if (!dataUri) {
+            return '';
+        }
+        return dataUri.split(',')[0];
+    }
+    static async FileExists(url, assetPath) {
+        if (!assetPath.endsWith('/')) {
+            assetPath = assetPath + '/';
+        }
+        const result = await axios({
+            method: 'get',
+            url: `${assetPath}getFiles.php?assetUrl=${url}`,
+            responseType: "json"
+        });
+        return !!result.data;
+    }
+    /**
+     * There is some discrepancy regarding locations of h3d objects
+     * Therefor we need to (temporarily?!) fix the content url
+     * Also we need to change some additionals
+     */
+    static FixUrl(assetUrl) {
+        if (!assetUrl) {
+            return '';
+        }
+        let fixedUrl = assetUrl;
+        if (!fixedUrl.endsWith('glb') && !fixedUrl.endsWith('obj') && !fixedUrl.endsWith('glb.gz') && !fixedUrl.endsWith('obj.gz')) {
+            fixedUrl = FileUtils.FixUnityUrl(fixedUrl);
+        }
+        fixedUrl = fixedUrl.replace('/content/', '/content43/');
+        return fixedUrl;
+    }
+    static FixGlbUrl(assetUrl) {
+        if (!assetUrl) {
+            return '';
+        }
+        let fixedUrl = assetUrl;
+        if (assetUrl.indexOf('_webplayer') === -1) {
+            fixedUrl = assetUrl.concat('_webplayer');
+        }
+        fixedUrl = fixedUrl.replace('/content/', '/content43/');
+        if (!fixedUrl.endsWith('.glb')) {
+            fixedUrl = fixedUrl.concat('.glb');
+        }
+        return fixedUrl;
+    }
+    // Return the mimetype of the given filename.
+    static MimeTypeFromFilename(fileName) {
+        const regEx = /(?:\.([^.]+))?$/; // regex to find extension
+        const extension = regEx.exec(fileName)[1];
+        switch (extension) {
+            case 'jpg':
+            case 'jpeg':
+                return 'image/jpeg';
+            case 'png':
+                return 'image/png';
+            case 'bmp':
+                return 'image/bmp';
+        }
+    }
+    /**
+     * Downloads the given file to the users default download location.
+     * @param fileName With or without extension
+     * @param content File content as a string
+     * @param [mimeType = 'text/plain']
+     */
+    static DownloadFile(fileName, content, mimeType = 'text/plain') {
+        const element = document.createElement('a');
+        element.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(content));
+        element.setAttribute('download', fileName);
+        element.style.display = 'none';
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+    }
+    // Returns the contents of given file as a text string.
+    static ReadAsText(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onloadend = (event) => {
+                if (event.target.readyState === 2) {
+                    resolve(event.target.result);
+                }
+            };
+        });
+    }
+    static GetExtensionFromDataUri(dataUri) {
+        return dataUri.replace(/(data:image\/)(.*?)(;base64.*)/gi, '$2');
+    }
+    static CreateDownloadFileNameFromBase64(dataUri) {
+        const ext = this.GetExtensionFromDataUri(dataUri);
+        return 'preview.' + ext;
+    }
+    static DownloadFromDataUri(dataUri, fileName) {
+        const link = document.createElement('a');
+        link.download = fileName;
+        link.href = dataUri;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    // todo remove once Connector deals with mimetypes and this method isn't used anymore
+    static DocumentBodyToDataUri(documentBody, mimeType) {
+        if (!!documentBody) {
+            return 'data:' + mimeType + ';base64,' + documentBody;
+        }
+        else {
+            return '';
+        }
+    }
+    static FixUnityUrl(url) {
+        if (url.indexOf('_webplayer') === -1) {
+            url = url.concat('_webplayer.ione3d');
+        }
+        else {
+            url = url.replace('_webplayer', '_webplayer.ione3d');
+        }
+        if (!url.endsWith('.gz')) {
+            url = url.concat('.gz');
+        }
+        return url.replace('.unity3d', '');
+    }
+}
+
+class DebugUtils {
+    static log(message) {
+        console.log(message);
+    }
+}
+
+// @dynamic
+class VariationUtils {
+    static MaterialCache = new Map();
+    static ClearCache() {
+        this.MaterialCache.clear();
+    }
+    static async LoadVariation(url, fileName, includeVariationFolder = true) {
+        if (!fileName) {
+            return null;
+        }
+        if (!fileName.includes('ione3d')) {
+            fileName = fileName.concat('.ione3d');
+        }
+        const id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
+        const variationUrl = `${url + (includeVariationFolder ? '/variation' : '')}/${fileName}`;
+        if (this.MaterialCache.has(id)) {
+            return this.MaterialCache.get(id);
+        }
+        if (!window.hasOwnProperty('downloadVariation')) {
+            try {
+                const fileExists = await FileUtils.DoesFileExist(variationUrl);
+                if (!fileExists) {
+                    DebugUtils.log(`Failed to find variation file: ${variationUrl}`);
+                    return null;
+                }
+                else {
+                    const response = await fetch(variationUrl);
+                    if (!response.ok) {
+                        DebugUtils.log(`Failed to fetch variation file: ${variationUrl} - ${response.status}`);
+                        return null;
+                    }
+                    const compressed = await response.blob();
+                    return await VariationUtils.GetVariationSettingsFromFile(id, compressed);
+                }
+            }
+            catch (err) {
+                const mute = err;
+                return null;
+            }
+        }
+        else {
+            try {
+                const file = await window.downloadVariation(variationUrl);
+                const settings = await VariationUtils.GetVariationSettingsFromFile(id, file);
+                this.MaterialCache.set(id, settings);
+                return settings;
+            }
+            catch (err) {
+                console.error('Error loading variation:', err);
+                throw err;
+            }
+        }
+    }
+    static async LoadVariationByUrl(materialCode, url) {
+        if (!url) {
+            return null;
+        }
+        if (!url.includes('ione3d')) {
+            url = url.concat('.ione3d');
+        }
+        if (this.MaterialCache.has(materialCode)) {
+            return this.MaterialCache.get(materialCode);
+        }
+        if (!window.hasOwnProperty('downloadVariation')) {
+            // Normal download
+            try {
+                const fileExists = await FileUtils.DoesFileExist(url);
+                if (!fileExists) {
+                    DebugUtils.log(`Failed to find variation file: ${url}`);
+                    return null;
+                }
+                else {
+                    const response = await fetch(url);
+                    if (!response.ok) {
+                        DebugUtils.log(`Failed to fetch variation file: ${url} - ${response.status}`);
+                        return null;
+                    }
+                    const compressed = await response.blob();
+                    return await VariationUtils.GetVariationSettingsFromFile(materialCode, compressed);
+                }
+            }
+            catch (err) {
+                console.error('Error loading variation:', err);
+                throw err;
+            }
+            // console.error('downloadVariation not defined in window global');
+            // throw new Error('downloadVariation not defined in window global');
+        }
+        else {
+            // Headless
+            try {
+                const file = await window.downloadVariation(url);
+                const settings = await VariationUtils.GetVariationSettingsFromFile(materialCode, file);
+                this.MaterialCache.set(materialCode, settings);
+                return settings;
+            }
+            catch (err) {
+                console.error('Error loading variation:', err);
+                throw err;
+            }
+        }
+    }
+    static GetUrl(assetPath, url, fileName, includeVariationFolder = true) {
+        if (fileName.indexOf('ione3d') < 0) {
+            fileName = fileName.concat('.ione3d');
+        }
+        if (assetPath && !assetPath.endsWith('/')) {
+            assetPath += '/';
+        }
+        return `${assetPath}${url + (includeVariationFolder ? '/variation' : '')}/${fileName}`;
+    }
+    static GetFloorAssetUrl(assetPath, url, fileName, articleNumber) {
+        if (fileName.indexOf('ione3d') < 0) {
+            fileName = fileName.concat('.ione3d');
+        }
+        if (assetPath && !assetPath.endsWith('/')) {
+            assetPath += '/';
+        }
+        return `${assetPath}${url + '/' + articleNumber}/${fileName}`;
+    }
+    // public static GetMaterialFromName(variationFolder: string, material: any): Promise<MeshStandardMaterial> {
+    //   return new Promise((resolve: Function) => {
+    //     if (!material) {
+    //       resolve(null);
+    //     }
+    //     if (this.MaterialCache.has(material.name)) {
+    //       resolve(this.MaterialCache.get(material.name).clone());
+    //     } else {
+    //       VariationUtils.LoadVariation(variationFolder, material.name, false).then((settings: VariationSettings) => {
+    //         if (settings) {
+    //           AssetUtils.CreateMaterialFromAsset(settings).then((materialObj: Material) => {
+    //             const materialParams: MeshStandardMaterialParameters = {};
+    //             materialParams.name = material.name;
+    //             materialParams.map = materialObj.texture;
+    //             materialParams.normalMap = materialObj.normal;
+    //             materialParams.aoMap = materialObj.ao;
+    //             materialParams.roughnessMap = materialObj.roughness;
+    //             materialParams.metalnessMap = materialObj.metalness;
+    //             materialParams.roughness = 1;
+    //             materialParams.metalness = 1;
+    //             const pbrMat: MeshStandardMaterial = new MeshStandardMaterial(materialParams);
+    //             this.MaterialCache.set(material.name, pbrMat);
+    //             resolve(pbrMat.clone());
+    //           });
+    //         } else {
+    //           resolve(material);
+    //         }
+    //       });
+    //     }
+    //   });
+    // }
+    static async GetVariationSettingsFromFile(id, compressedFile) {
+        // TODO CHECK with Patrick
+        if (!compressedFile) {
+            return null;
+        }
+        // const zipContent = await VariationUtils.GetZipContent(compressedFile);
+        // const variationSettings: VariationSettings = new VariationSettings();
+        // let index;
+        // variationSettings.id = id;
+        //
+        // if (zipContent) {
+        //   if (zipContent.files['material.glb']) {
+        //     const material: string = await zipContent.files['material.glb'].async('arraybuffer');
+        //     variationSettings.material = await VariationUtils.LoadMaterialFromGlb(material);
+        //   } else {
+        //     if (zipContent.files['index.json']) {
+        //       const indexFile: string = await zipContent.files['index.json'].async('string');
+        //       index = JSON.parse(indexFile);
+        //     }
+        //     if (index) {
+        //       await VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent);
+        //     } else {
+        //       await VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent);
+        //     }
+        //   }
+        // }
+        // return variationSettings;
+        const zipContent = await VariationUtils.GetZipContent(compressedFile);
+        const variationSettings = new VariationSettings();
+        let index;
+        variationSettings.id = id;
+        if (zipContent.files.hasOwnProperty('index.json')) {
+            const indexFile = await zipContent.files['index.json'].async('string');
+            index = JSON.parse(indexFile);
+        }
+        if (index) {
+            await VariationUtils.CreateSettingsBasedOnIndex(index, variationSettings, zipContent);
+        }
+        else {
+            await VariationUtils.CreateSettingsBasedOnFileName(variationSettings, zipContent);
+        }
+        return variationSettings;
+    }
+    static async CreateSettingsBasedOnIndex(index, variationSettings, zipContent) {
+        if (index.normalFile) {
+            variationSettings.normal = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.normalFile], index.normalFile);
+            variationSettings.normalFilename = index.normalFile;
+        }
+        if (index.diffuseFile) {
+            variationSettings.texture = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.diffuseFile], index.diffuseFile);
+            variationSettings.textureFilename = index.diffuseFile;
+        }
+        if (index.ormFile) {
+            variationSettings.orm = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.ormFile], index.ormFile);
+            variationSettings.ormFilename = index.ormFile;
+        }
+        else {
+            if (index.aoFile) {
+                variationSettings.ao = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.aoFile], index.aoFile);
+                variationSettings.aoFilename = index.aoFile;
+            }
+            if (index.metalnessFile) {
+                variationSettings.metalness = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.metalnessFile], index.metalnessFile);
+                variationSettings.metalnessFilename = index.metalnessFile;
+            }
+            if (index.roughnessFile) {
+                variationSettings.roughness = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.roughnessFile], index.roughnessFile);
+                variationSettings.roughnessFilename = index.roughnessFile;
+            }
+        }
+        if (index.displacementFile) {
+            variationSettings.displacement = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.displacementFile], index.displacementFile);
+            variationSettings.displacementFilename = index.displacementFile;
+        }
+        if (index.emissiveFile) {
+            variationSettings.emissive = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.emissiveFile], index.emissiveFile);
+            variationSettings.emissiveFilename = index.emissiveFile;
+        }
+        if (index.envMapFile) {
+            variationSettings.envMap = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.envMapFile], index.envMapFile);
+            variationSettings.envMapFilename = index.envMapFile;
+        }
+        if (index.sheenColorMapFile) {
+            variationSettings.sheenColorMap = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.sheenColorMapFile], index.sheenColorMapFile);
+            variationSettings.sheenColorMapFilename = index.sheenColorMapFile;
+        }
+        if (index.sheenRoughnessMapFile) {
+            variationSettings.sheenRoughnessMap = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.sheenRoughnessMapFile], index.sheenRoughnessMapFile);
+            variationSettings.sheenRoughnessMapFilename = index.sheenColorMapFile;
+        }
+        if (index.transmissionMapFile) {
+            variationSettings.transmissionMap = await VariationUtils.LoadFileContentFromZip(zipContent.files[index.transmissionMapFile], index.transmissionMapFile);
+            variationSettings.transmissionMapFilename = index.transmissionMapFile;
+        }
+        if (index.repeat) {
+            variationSettings.settings.repeatx = index.repeat.repeatx;
+            variationSettings.settings.repeaty = index.repeat.repeaty;
+        }
+        variationSettings.settings.metalness = index.metalness;
+        variationSettings.settings.roughness = index.roughness;
+        variationSettings.sheen = index.sheen;
+        if (index.sheenColor) {
+            variationSettings.sheenColor = new Color(index.sheenColor.r, index.sheenColor.g, index.sheenColor.b);
+        }
+        variationSettings.sheenRoughness = index.sheenRoughness;
+        variationSettings.envMapIntensity = index.envMapIntensity;
+        variationSettings.transparent = index.transparent;
+        variationSettings.opacity = index.opacity;
+        if (index.emissiveValue) {
+            variationSettings.emissiveValue = new Color(index.emissiveValue.r, index.emissiveValue.g, index.emissiveValue.b);
+        }
+        variationSettings.emissiveIntensity = index.emissiveIntensity;
+        variationSettings.reflectivity = index.reflectivity;
+        variationSettings.displacementValue = index.displacementValue;
+        variationSettings.side = index.side;
+        variationSettings.transmission = index.transmission;
+        variationSettings.ior = index.ior;
+        variationSettings.thickness = index.thickness;
+        variationSettings.specularIntensity = index.specularIntensity;
+    }
+    static async CreateSettingsBasedOnFileName(variationSettings, zipContent) {
+        const allLoaded = [];
+        for (const fileName in zipContent.files) {
+            if (zipContent.files.hasOwnProperty(fileName)) {
+                const file = await zipContent.files[fileName];
+                if (file.name.toLowerCase().indexOf('normal') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((normalFile) => {
+                        variationSettings.normal = `data:image/${this.GetBase64FileType(file.name)};base64,${normalFile}`;
+                        variationSettings.normalFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('ao') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((aoFile) => {
+                        variationSettings.ao = `data:image/${this.GetBase64FileType(file.name)};base64,${aoFile}`;
+                        variationSettings.aoFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('metalness') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((metalnessFile) => {
+                        variationSettings.metalness = `data:image/${this.GetBase64FileType(file.name)};base64,${metalnessFile}`;
+                        variationSettings.metalnessFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('roughness') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((roughnessFile) => {
+                        variationSettings.roughness = `data:image/${this.GetBase64FileType(file.name)};base64,${roughnessFile}`;
+                        variationSettings.roughnessFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('diffuse') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((diffuseFile) => {
+                        variationSettings.texture = `data:image/${this.GetBase64FileType(file.name)};base64,${diffuseFile}`;
+                        variationSettings.textureFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('displacement') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((displacementFile) => {
+                        variationSettings.displacement = `data:image/${this.GetBase64FileType(file.name)};base64,${displacementFile}`;
+                        variationSettings.displacementFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('emissive') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((emissiveFile) => {
+                        variationSettings.emissive = `data:image/${this.GetBase64FileType(file.name)};base64,${emissiveFile}`;
+                        variationSettings.emissiveFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('envMap') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((envMapFile) => {
+                        variationSettings.envMap = `data:image/${this.GetBase64FileType(file.name)};base64,${envMapFile}`;
+                        variationSettings.envMapFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('sheenColorMap') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((sheenColorMapFile) => {
+                        variationSettings.sheenColorMap = `data:image/${this.GetBase64FileType(file.name)};base64,${sheenColorMapFile}`;
+                        variationSettings.sheenColorMapFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('sheenRoughnessMap') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((sheenRoughnessMapFile) => {
+                        variationSettings.sheenRoughnessMap = `data:image/${this.GetBase64FileType(file.name)};base64,${sheenRoughnessMapFile}`;
+                        variationSettings.sheenRoughnessMapFilename = fileName;
+                    }));
+                }
+                else if (file.name.toLowerCase().indexOf('transmissionMap') > -1 && this.FileIsImage(file.name)) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((transmissionMapFile) => {
+                        variationSettings.transmissionMap = `data:image/${this.GetBase64FileType(file.name)};base64,${transmissionMapFile}`;
+                        variationSettings.transmissionMapFilename = fileName;
+                    }));
+                }
+                else if (file.name.indexOf('.jp') > -1) {
+                    allLoaded.push(zipContent.files[fileName].async('base64').then((textureFile) => {
+                        variationSettings.texture = 'data:image/jpeg;base64,' + textureFile;
+                        variationSettings.textureFilename = fileName;
+                    }));
+                }
+                else if (file.name.indexOf('.json') > -1) {
+                    allLoaded.push(zipContent.files[fileName].async('string').then((settingsFile) => {
+                        const settingsFileObj = JSON.parse(settingsFile);
+                        for (const key in settingsFileObj) {
+                            if (settingsFileObj.hasOwnProperty(key)) {
+                                variationSettings.settings[key] = settingsFileObj[key];
+                            }
+                        }
+                    }));
+                }
+            }
+        }
+        await Promise.all(allLoaded);
+    }
+    static LoadMaterialFromJson(material) {
+        const loader = new MaterialLoader();
+        if (material.textures) {
+            const textures = {};
+            for (let i = 0; i < material.textures.length; i++) {
+                textures[material.textures[i].uuid] = material.textures[i];
+            }
+            loader.setTextures(textures);
+        }
+        return loader.parse(material);
+    }
+    static LoadMaterialFromGlb(material) {
+        return new Promise(async (resolve, reject) => {
+            if (!window.hasOwnProperty('loadGLTF')) {
+                console.error('loadGLTF not defined in window global');
+                return reject();
+            }
+            const obj = await window.loadGLTF(material, false);
+            if (obj) {
+                return resolve(obj.children[0].material);
+            }
+        });
+    }
+    static LoadFileContentFromZip(zip, fileName, base64 = true) {
+        return new Promise((resolve) => {
+            if (zip && fileName) {
+                zip.async(base64 ? 'base64' : 'string').then((fileContent) => {
+                    if (base64) {
+                        resolve(`data:image/${this.GetBase64FileType(fileName)};base64,${fileContent}`);
+                    }
+                    else {
+                        resolve(fileContent);
+                    }
+                });
+            }
+            else {
+                resolve(undefined);
+            }
+        });
+    }
+    static FileIsImage(fileName) {
+        const ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+        switch (ext) {
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'bmp':
+                return true;
+            default:
+                return false;
+        }
+    }
+    static GetBase64FileType(fileName) {
+        const ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+        switch (ext) {
+            case 'jpg':
+            case 'jpeg':
+                return 'jpeg';
+            case 'png':
+                return 'png';
+            case 'bmp':
+                return 'bmp';
+            default:
+                return 'jpeg';
+        }
+    }
+    // Get the content
+    static async GetZipContent(file) {
+        try {
+            const jszip = new JSZip();
+            return await jszip.loadAsync(file);
+        }
+        catch (e) {
+            return null;
+        }
+    }
+}
+
+class Variation {
+    decoId;
+    brandId;
+    gameObjectName;
+    node;
+    optionText;
+    supplierArticleNr;
+    materialId;
+    material;
+}
+
+class VariationCacheHelper {
+    _variations = [];
+    assetPath = '';
+    threeDAssetPath = '';
+    needsMaterials = true;
+    debug;
+    destroy() {
+        this._variations.length = 0;
+    }
+    preloadVariations(schema, decoNodes, articleAssetPath = '') {
+        if (!articleAssetPath.endsWith('/')) {
+            articleAssetPath += '/';
+        }
+        decoNodes.forEach((decoNode) => {
+            let fileName;
+            let fileUrl;
+            let includeVariationFolder = true;
+            if (decoNode.materialUrl) {
+                const fileNameFromUrl = decoNode.materialUrl ? decoNode.materialUrl.substr(decoNode.materialUrl.lastIndexOf('/') + 1, decoNode.materialUrl.length) : null;
+                fileName = fileNameFromUrl ? fileNameFromUrl.substr(0, fileNameFromUrl.lastIndexOf('.')) : null; // chop extension
+                fileUrl = decoNode.materialUrl ? decoNode.materialUrl.substr(0, decoNode.materialUrl.lastIndexOf('/')) : null;
+                includeVariationFolder = false;
+            }
+            else if (decoNode.gameObjectName) {
+                fileName = decoNode.gameObjectName;
+                fileUrl = (articleAssetPath ? articleAssetPath : this.threeDAssetPath) + schema;
+            }
+            if (fileUrl && fileName && this.needsMaterials) {
+                if (!this._get(fileName)) {
+                    const settings = this._createSettingsForFileName(fileName);
+                    VariationUtils.LoadVariation(fileUrl, fileName, includeVariationFolder).then((variationSettings) => {
+                        settings.loading = false;
+                        settings.loaded.next(variationSettings);
+                        if (variationSettings) {
+                            this._set(variationSettings);
+                        }
+                    });
+                }
+            }
+        });
+    }
+    async preloadVariationsAsync(schema, decoNodes, articleAssetPath = '') {
+        const promises = [];
+        decoNodes.forEach((decoNode, index, array) => {
+            let fileName;
+            let fileUrl;
+            let includeVariationFolder = true;
+            if (decoNode.materialUrl) {
+                const fileNameFromUrl = decoNode.materialUrl ? decoNode.materialUrl.substr(decoNode.materialUrl.lastIndexOf('/') + 1, decoNode.materialUrl.length) : null;
+                fileName = fileNameFromUrl ? fileNameFromUrl.substr(0, fileNameFromUrl.lastIndexOf('.')) : null; // chop extension
+                fileUrl = decoNode.materialUrl ? decoNode.materialUrl.substr(0, decoNode.materialUrl.lastIndexOf('/')) : null;
+                includeVariationFolder = false;
+            }
+            else if (decoNode instanceof DecoNode && decoNode.gameObjectName) {
+                fileName = decoNode.gameObjectName;
+                fileUrl = (articleAssetPath ? articleAssetPath : this.threeDAssetPath) + schema;
+            }
+            else if ((decoNode instanceof Answer || decoNode instanceof SelectorStructure) && decoNode.gameObject) {
+                fileName = decoNode.gameObject;
+                fileUrl = (articleAssetPath ? articleAssetPath : this.threeDAssetPath) + schema;
+            }
+            if (fileName && !this._get(fileName) && this.needsMaterials) {
+                const settings = this._createSettingsForFileName(fileName);
+                promises.push(new Promise(resolve => {
+                    VariationUtils.LoadVariation(fileUrl, fileName, includeVariationFolder).then((variationSettings) => {
+                        settings.loading = false;
+                        settings.loaded.next(variationSettings);
+                        if (variationSettings) {
+                            this._set(variationSettings);
+                            resolve();
+                        }
+                    });
+                }));
+            }
+        });
+        await Promise.all(promises);
+    }
+    log(message) {
+        if (this.debug) {
+            this.debug(message);
+            console.log(new Date(), message);
+        }
+    }
+    async loadCachedVariation(fileName) {
+        if (!fileName) {
+            return null;
+        }
+        if (this._get(fileName)) {
+            const settings = this._get(fileName);
+            if (settings.loading) {
+                return await this._waitForVariationToLoad(settings);
+            }
+            return settings;
+        }
+    }
+    _get(id) {
+        const len = this._variations.length;
+        for (let i = 0; i < len; i++) {
+            if (this._variations[i].id && this._variations[i].id === id) {
+                return this._variations[i];
+            }
+        }
+    }
+    _set(variations) {
+        const idx = this._variations.findIndex(v => v.id === variations.id);
+        if (idx > -1) {
+            this._variations[idx] = variations;
+        }
+        else {
+            this._variations.push(variations);
+        }
+    }
+    _waitForVariationToLoad(settings) {
+        return new Promise((resolve) => {
+            settings.loaded.subscribe((value) => {
+                resolve(value);
+            });
+        });
+    }
+    _createSettingsForFileName(fileName) {
+        const settings = new VariationSettings();
+        settings.id = fileName;
+        settings.loading = true;
+        this._variations.push(settings);
+        return settings;
+    }
+}
+
+class VariationHelper extends VariationCacheHelper {
+    loadedAsset;
+    _lastKnownVariations = new Map();
+    clearCache() {
+        const variationMap = Array.from(this._lastKnownVariations.values());
+        variationMap.forEach((variations) => {
+            variations.forEach((variation) => {
+                try {
+                    if (variation.material) {
+                        if (variation.material.texture) {
+                            variation.material.texture.dispose();
+                        }
+                        if (variation.material.normal) {
+                            variation.material.normal.dispose();
+                        }
+                        if (variation.material.metalness) {
+                            variation.material.metalness.dispose();
+                        }
+                        if (variation.material.roughness) {
+                            variation.material.roughness.dispose();
+                        }
+                        if (variation.material.ao) {
+                            variation.material.ao.dispose();
+                        }
+                    }
+                }
+                catch (e) {
+                    DebugUtils.log('Failed to dispose material: ' + e);
+                }
+            });
+        });
+    }
+    async loadPart(assetPath, parts, obj, usePbr = false) {
+        try {
+            const len = parts.length;
+            for (let i = 0; i < len; i++) {
+                if (parts[i].decoNode && parts[i].decoNode.gameObjectName && parts[i].decoNode.type === DecoNodeType.Part) {
+                    let partSettings;
+                    partSettings = await this.loadCachedVariation(parts[i].decoNode.materialUrl ? parts[i].decoNode.materialCode : (parts[i].decoNode.gameObjectName || parts[i].decoId));
+                    if (partSettings) {
+                        const partVariation = new Variation();
+                        partVariation.decoId = parseFloat(parts[i].decoNode.id);
+                        partVariation.brandId = parts[i].decoNode.brandId;
+                        partVariation.gameObjectName = parts[i].decoNode.gameObjectName;
+                        partVariation.material = await AssetUtils.CreateMaterialFromAsset(partSettings);
+                        this.loadedAsset = VariationUtils.GetUrl(assetPath, parts[i].schema, parts[i].decoNode.gameObjectName || parts[i].decoId);
+                        // parts[i].variation = partVariation;
+                        this._applyMaterialPart(partVariation, parts[i].node, obj, usePbr);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            DebugUtils.log('Failed to load part: ' + e);
+            // console.error(e);
+        }
+    }
+    async loadVariation(assetPath, parts, obj, usePbr = false) {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const len = parts.length;
+                for (let i = 0; i < len; i++) {
+                    const variations = parts[i].variations;
+                    if (!variations || variations.length === 0) {
+                        if (this._getLastKnownVariations(`${parts[i].nodeId}_${parts[i].node}`)) {
+                            parts[i].variations = this._getLastKnownVariations(`${parts[i].nodeId}_${parts[i].node}`);
+                            this._applyVariations(parts[i], obj, usePbr);
+                            continue;
+                        }
+                        else {
+                            continue;
+                        }
+                    }
+                    const lastKnownVariations = [];
+                    const variationPromise = [];
+                    for (let j = 0; j < variations.length; j++) {
+                        variationPromise.push(this.loadCachedVariation(variations[j].materialUrl ? variations[j].materialCode : (variations[j].gameObjectName || parts[i].decoId)).then(async (variationSettings) => {
+                            const newVariation = this._createVariationFromNode(variations[j]);
+                            newVariation.material = await AssetUtils.CreateMaterialFromAsset(variationSettings);
+                            this.loadedAsset = variations[j].materialUrl ? variations[j].materialUrl : VariationUtils.GetUrl(assetPath, parts[i].schema, variations[j].gameObjectName || parts[i].decoId);
+                            lastKnownVariations.push(newVariation);
+                        }));
+                    }
+                    await Promise.all(variationPromise);
+                    this._setLastKnownVariations(`${parts[i].nodeId}_${parts[i].node}`, lastKnownVariations);
+                    parts[i].variations = lastKnownVariations;
+                    this._applyVariations(parts[i], obj, usePbr);
+                }
+                resolve();
+            }
+            catch (e) {
+                DebugUtils.log('Failed to load variation: ' + e);
+                // console.error(e);
+                reject();
+            }
+        });
+    }
+    async loadVariationFromLocalFile(id, file, obj) {
+        try {
+            const variationSettings = await VariationUtils.GetVariationSettingsFromFile(id, file);
+            const material = await AssetUtils.CreateMaterialFromAsset(variationSettings);
+            this._applyMaterial(obj, material);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    async loadVariationForMaterial(gameObject) {
+        const partSettings = await this.loadCachedVariation(gameObject);
+        if (partSettings) {
+            const partVariation = new Variation();
+            partVariation.gameObjectName = gameObject;
+            partVariation.material = await AssetUtils.CreateMaterialFromAsset(partSettings);
+            return this._setMeshMaterialFromVariation(gameObject, partVariation.material, true);
+        }
+    }
+    async loadVariationByAssetUrl(assetUrl) {
+        const fileName = assetUrl.substring(assetUrl.lastIndexOf('/') + 1);
+        const id = 'default_' + fileName.substring(0, fileName.lastIndexOf('.'));
+        const variationSettings = await VariationUtils.LoadVariationByUrl(id, assetUrl);
+        if (variationSettings) {
+            const materialFromAsset = await AssetUtils.CreateMaterialFromAsset(variationSettings);
+            if (materialFromAsset) {
+                return this._setMeshMaterialFromVariation(id, materialFromAsset, true);
+            }
+        }
+    }
+    async createVariationForMaterialPreview(compressedZip) {
+        const id = String(Math.floor(Math.random() * 10) + 1);
+        const variationSettings = await VariationUtils.GetVariationSettingsFromFile(id, compressedZip);
+        if (variationSettings) {
+            const materialFromAsset = await AssetUtils.CreateMaterialFromAsset(variationSettings);
+            if (materialFromAsset) {
+                return this._setMeshMaterialFromVariation(id, materialFromAsset, true);
+            }
+        }
+    }
+    _applyMaterialPart(partMaterial, nodeId, obj, usePbr = false) {
+        const children = this._getChildrenFilterByProp(obj, 'selection', 'node', nodeId);
+        const len = children.length;
+        for (let i = 0; i < len; i++) {
+            const child = children[i];
+            if (child !== null && child !== undefined) {
+                child.traverse((mesh) => {
+                    if (mesh instanceof Mesh && partMaterial) {
+                        if (Array.isArray(mesh.material)) { // multimaterial support
+                            for (let j = 0, jlen = mesh.material.length; j < jlen; j++) {
+                                if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                    mesh.material[j] = this._setMeshMaterialFromVariation(mesh.material[j].name, partMaterial, usePbr);
+                                }
+                            }
+                        }
+                        else {
+                            if (mesh.material.name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                mesh.material = this._setMeshMaterialFromVariation(mesh.material.name, partMaterial, usePbr);
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+    _applyVariations(part, obj, usePbr = false) {
+        const children = this._getChildrenFilterByProp(obj, 'selection', 'node', part.node);
+        const len = children.length;
+        for (let i = 0; i < len; i++) {
+            const child = children[i];
+            if (child !== null && child !== undefined) {
+                child.traverse((mesh) => {
+                    if (mesh instanceof Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                        //if ((mesh instanceof Mesh || mesh.constructor.name === 'Mesh') && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                        for (let j = 0; j < part.variations.length; j++) {
+                            const variation = part.variations[j];
+                            if (variation.material) {
+                                const materialToSearch = !!variation.materialId ? variation.materialId.toLowerCase() : 'default';
+                                if (Array.isArray(mesh.material)) { // multimaterial support
+                                    for (let m = 0, mlen = mesh.material.length; m < mlen; m++) {
+                                        if ((variation.materialId && mesh.material[m].name.toLowerCase() === materialToSearch) ||
+                                            (!variation.materialId && mesh.material[m].name.toLowerCase().indexOf(materialToSearch) !== -1)) {
+                                            mesh.material[m] = this._setMeshMaterialFromVariation(mesh.material[m].name, variation.material, usePbr);
+                                        }
+                                    }
+                                }
+                                else {
+                                    if ((variation.materialId && mesh.material.name.toLowerCase() === materialToSearch) ||
+                                        (!variation.materialId && mesh.material.name.toLowerCase().indexOf(materialToSearch) !== -1)) {
+                                        mesh.material = this._setMeshMaterialFromVariation(mesh.material.name, variation.material, usePbr);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+    _applyMaterial(obj, material) {
+        obj.traverse((mesh) => {
+            if (mesh instanceof Mesh) {
+                if (Array.isArray(mesh.material)) { // multimaterial support
+                    for (let m = 0, mlen = mesh.material.length; m < mlen; m++) {
+                        if (mesh.material[m].name.toLowerCase().indexOf('default') !== -1) {
+                            ObjectUtils.DisposeMaterial(mesh.material[m]);
+                            mesh.material[m] = this._setMeshMaterialFromVariation(mesh.material[m].name, material, true);
+                        }
+                    }
+                }
+                else {
+                    if (mesh.material.name.toLowerCase().indexOf('default') !== -1) {
+                        ObjectUtils.DisposeMaterial(mesh.material);
+                        mesh.material = this._setMeshMaterialFromVariation(mesh.material.name, material, true);
+                    }
+                }
+            }
+        });
+    }
+    _setMeshMaterialFromVariation(name, material, usePbr = false) {
+        if (material.texture) {
+            material.texture.needsUpdate = true;
+            material.texture.mapping = EquirectangularReflectionMapping;
+        }
+        if (!usePbr) {
+            const newMaterial = new MeshPhongMaterial({
+                name: name,
+                shininess: material.shininess,
+                specular: material.specular,
+                map: material.texture,
+                normalMap: material.normal
+            });
+            newMaterial.color.setRGB(0.8, 0.8, 0.8);
+            newMaterial.needsUpdate = true;
+            return newMaterial;
+        }
+        if (material.sheen || material.sheenColor || material.reflectivity || material.transmission) { // TODO: Proper check for all unique physical material properties
+            const params = {
+                // side: material.side ? material.side : FrontSide,
+                name: name,
+                roughness: material.roughnessValue !== undefined && material.roughnessValue !== null ? material.roughnessValue : 1,
+                metalness: material.metalnessValue !== undefined && material.metalnessValue !== null ? material.metalnessValue : 0,
+                envMapIntensity: material.envMapIntensity ? material.envMapIntensity : 0.01,
+                clearcoatMap: material.clearcoatMap ? material.clearcoatMap : null,
+                clearcoatRoughnessMap: material.clearcoatRoughnessMap ? material.clearcoatRoughnessMap : null,
+                attenuationDistance: Infinity
+                // wireframe: true,
+                // opacity: 0.3,
+                // transparent: true,
+            };
+            if (material.displacementValue) {
+                params.displacementScale = material.displacementValue;
+            }
+            if (material.opacity) {
+                params.opacity = material.opacity;
+            }
+            if (material.transparent) {
+                params.transparent = material.transparent;
+            }
+            if (material.emissiveValue) {
+                params.emissive = material.emissiveValue;
+            }
+            if (material.emissiveIntensityValue) {
+                params.emissiveIntensity = material.emissiveIntensityValue;
+            }
+            if (material.texture) {
+                params.map = material.texture;
+                params.map.needsUpdate = true;
+            }
+            if (material.ao) {
+                params.aoMap = material.ao;
+                params.aoMap.needsUpdate = true;
+            }
+            if (material.roughness) {
+                params.roughnessMap = material.roughness;
+                params.roughnessMap.needsUpdate = true;
+                // material.roughness.magFilter = NearestFilter;
+            }
+            if (material.metalness) {
+                params.metalnessMap = material.metalness;
+                params.metalnessMap.needsUpdate = true;
+            }
+            if (material.normal) {
+                params.normalMap = material.normal;
+                params.normalMap.needsUpdate = true;
+            }
+            if (material.displacement) {
+                params.displacementMap = material.displacement;
+                params.displacementMap.needsUpdate = true;
+            }
+            if (material.emissive) {
+                params.emissiveMap = material.emissive;
+                params.emissiveMap.needsUpdate = true;
+            }
+            if (material.envMap) {
+                if (material.envMapIntensity != null || 0) {
+                    params.envMap = material.envMap;
+                    params.envMap.needsUpdate = true;
+                    material.envMap.mapping = EquirectangularReflectionMapping;
+                    material.envMap.minFilter = NearestFilter;
+                    material.envMap.magFilter = NearestFilter;
+                }
+            }
+            if (material.reflectivity) {
+                params.reflectivity = material.reflectivity;
+            }
+            if (material.side) {
+                params.side = material.side;
+            }
+            else {
+                params.side = DoubleSide;
+            }
+            const newMaterial = new MeshPhysicalMaterial(params);
+            newMaterial.color.setRGB(1, 1, 1);
+            if (material.sheen) {
+                newMaterial.sheen = material.sheen;
+            }
+            if (material.sheenColor) {
+                newMaterial.sheenColor = material.sheenColor;
+            }
+            else {
+                // Add fallback for blender render
+                newMaterial.sheenColor = new Color(1, 1, 1);
+            }
+            if (material.sheenRoughness) {
+                newMaterial.sheenRoughness = material.sheenRoughness;
+            }
+            if (material.sheenColorMap) {
+                newMaterial.sheenColorMap = material.sheenColorMap;
+                newMaterial.sheenColorMap.needsUpdate = true;
+            }
+            if (material.sheenRoughnessMap) {
+                newMaterial.sheenRoughnessMap = material.sheenRoughnessMap;
+                newMaterial.sheenRoughnessMap.needsUpdate = true;
+            }
+            if (material.transmission) {
+                newMaterial.transmission = material.transmission;
+            }
+            if (material.ior !== undefined && material.ior !== null) {
+                newMaterial.ior = material.ior;
+            }
+            if (material.thickness !== undefined && material.thickness !== null) {
+                newMaterial.thickness = material.thickness;
+            }
+            if (material.specularIntensity !== undefined && material.specularIntensity !== null) {
+                newMaterial.specularIntensity = material.specularIntensity;
+            }
+            if (material.transmissionMap) {
+                newMaterial.transmissionMap = material.transmissionMap;
+                newMaterial.transmissionMap.needsUpdate = true;
+            }
+            newMaterial.needsUpdate = true;
+            return newMaterial;
+        }
+        else {
+            const params = {
+                // side: material.side ? material.side : FrontSide,
+                name: name,
+                roughness: material.roughnessValue !== undefined && material.roughnessValue !== null ? material.roughnessValue : 1,
+                metalness: material.metalnessValue !== undefined && material.metalnessValue !== null ? material.metalnessValue : 0,
+                envMapIntensity: material.envMapIntensity ? material.envMapIntensity : 0.01
+                // wireframe: true,
+                // opacity: 0.3,
+                // transparent: true,
+            };
+            if (material.displacementValue) {
+                params.displacementScale = material.displacementValue;
+            }
+            if (material.opacity) {
+                params.opacity = material.opacity;
+            }
+            if (material.transparent) {
+                params.transparent = material.transparent;
+            }
+            if (material.emissiveValue) {
+                params.emissive = material.emissiveValue;
+            }
+            if (material.emissiveIntensityValue) {
+                params.emissiveIntensity = material.emissiveIntensityValue;
+            }
+            if (material.texture) {
+                params.map = material.texture;
+                params.map.needsUpdate = true;
+            }
+            if (material.ao) {
+                params.aoMap = material.ao;
+                params.aoMap.needsUpdate = true;
+            }
+            if (material.roughness) {
+                params.roughnessMap = material.roughness;
+                params.roughnessMap.needsUpdate = true;
+                // material.roughness.magFilter = NearestFilter;
+            }
+            if (material.metalness) {
+                params.metalnessMap = material.metalness;
+                params.metalnessMap.needsUpdate = true;
+            }
+            if (material.normal) {
+                params.normalMap = material.normal;
+                params.normalMap.needsUpdate = true;
+            }
+            if (material.displacement) {
+                params.displacementMap = material.displacement;
+                params.displacementMap.needsUpdate = true;
+            }
+            if (material.emissive) {
+                params.emissiveMap = material.emissive;
+                params.emissiveMap.needsUpdate = true;
+            }
+            if (material.envMap) {
+                if (material.envMapIntensity != null || 0) {
+                    params.envMap = material.envMap;
+                    params.envMap.needsUpdate = true;
+                    material.envMap.mapping = EquirectangularReflectionMapping;
+                    material.envMap.minFilter = NearestFilter;
+                    material.envMap.magFilter = NearestFilter;
+                }
+            }
+            if (material.side) {
+                params.side = material.side;
+            }
+            else {
+                params.side = DoubleSide;
+            }
+            const newMaterial = new MeshStandardMaterial(params);
+            newMaterial.color.setRGB(1, 1, 1);
+            newMaterial.needsUpdate = true;
+            return newMaterial;
+        }
+    }
+    _setLastKnownVariations(id, variation) {
+        this._lastKnownVariations.set(id, variation);
+    }
+    _getLastKnownVariations(id) {
+        if (this._lastKnownVariations.has(id)) {
+            return this._lastKnownVariations.get(id);
+        }
+        return null;
+    }
+    _getChildrenFilterByProp(obj, userDataObjectProp, prop, value) {
+        return obj.children.filter((child) => {
+            return child.userData &&
+                child.userData.hasOwnProperty(userDataObjectProp) &&
+                child.userData[userDataObjectProp].hasOwnProperty(prop) &&
+                child.userData[userDataObjectProp][prop] === value;
+        });
+    }
+    _createVariationFromNode(node) {
+        const newVariation = new Variation();
+        newVariation.decoId = node instanceof Variation ? node.decoId : parseFloat(node.id);
+        newVariation.node = node instanceof Variation ? node.node : node.nodeId;
+        newVariation.brandId = node.brandId;
+        newVariation.optionText = node.optionText;
+        newVariation.gameObjectName = node.gameObjectName;
+        newVariation.supplierArticleNr = node.supplierArticleNr;
+        newVariation.materialId = node.materialId;
+        return newVariation;
+    }
+}
+
+class Scene3DUtil {
+    static updatePivot(obj) {
+        const boundingBox = new Box3().setFromObject(obj);
+        const bbCenterPivot = new Vector3();
+        boundingBox.getCenter(bbCenterPivot);
+        const delta = new Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+        obj.children.forEach((child) => {
+            child.position.add(delta);
+        });
+        obj.updateWorldMatrix(false, true);
+    }
+    static TrySelectorConnection(scene, parent, part1, part2, isFirstElement, createAddableFn) {
+        let addable;
+        if (createAddableFn) {
+            addable = part2;
+            part2 = createAddableFn(addable);
+        }
+        if (part1 && part2) {
+            let con1;
+            let con2;
+            // if part2 is an addable and decoConnection is present, then no need to iterate through connectors
+            if (addable && addable instanceof Selection && addable.decoConnection && addable.hdecoPositioning === HdecoPositioning.Variable) {
+                con1 = part1.children.find(c => c.name === addable.decoConnection);
+                if (!con1) {
+                    return false;
+                }
+                for (let ii = 0; ii < part2.children.length; ii++) {
+                    con2 = part2.children[ii];
+                    // if these connectors can connect connect them
+                    if (!con1.userData.connected && !con2.userData.connected && this.CanSelectorConnect(part1.children, con1, con2, isFirstElement)) {
+                        // if (!con1['connected'] && !con2['connected'] && this.CanSelectorConnect(part1.children, con1, con2, isFirstElement)) {
+                        // if addable, continue this loop with a new addable
+                        if (addable) {
+                            const newPart2 = createAddableFn(addable, part2, part1);
+                            // reference of part2 changed, so refresh con2
+                            this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
+                        }
+                        else {
+                            return this.SelectorConnect(scene, parent, con1, con2);
+                        }
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < part1.children.length; i++) {
+                    for (let ii = 0; ii < part2.children.length; ii++) {
+                        con1 = part1.children[i];
+                        con2 = part2.children[ii];
+                        let con1Connected = false;
+                        if (con1 && con1.userData) {
+                            con1Connected = con1.userData.connected;
+                        }
+                        let con2Connected = false;
+                        if (con2 && con2.userData) {
+                            con2Connected = con2.userData.connected;
+                        }
+                        // if these connectors can connect connect them
+                        if (!con1Connected && !con2Connected && this.CanSelectorConnect(part1.children, con1, con2, isFirstElement)) {
+                            // if addable, continue this loop with a new addable
+                            if (addable) {
+                                const newPart2 = createAddableFn(addable, part2, part1);
+                                // reference of part2 changed, so refresh con2
+                                this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
+                            }
+                            else {
+                                return this.SelectorConnect(scene, parent, con1, con2);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    // public static TrySelectorConnection(scene: Scene, parent: Object3D,
+    //     part1: any, part2: any, createAddableFn?: Function): boolean {
+    //     let addable: any;
+    //     if (createAddableFn) {
+    //         addable = part2;
+    //         part2 = createAddableFn(addable);
+    //     }
+    //     for (let i = 0; i < part1.children.length; i++) {
+    //         for (let ii = 0; ii < part2.children.length; ii++) {
+    //             const con1: Object3D = part1.children[i];
+    //             const con2: Object3D = part2.children[ii];
+    //             // if these connectors can connect connect them
+    //             if (!con1['connected'] && !con2['connected'] && this.CanSelectorConnect(con1, con2)) {
+    //                 // if addable, continue this loop with a new addable
+    //                 if (addable) {
+    //                     const newPart2: Object3D = createAddableFn(addable, part2, part1);
+    //                     // reference of part2 changed, so refresh con2
+    //                     this.SelectorConnect(scene, parent, con1, newPart2.children[ii]);
+    //                 } else {
+    //                     return this.SelectorConnect(scene, parent, con1, con2);
+    //                 }
+    //             }
+    //         }
+    //     }
+    //     return false;
+    // }
+    static Convert3DPointToScreenPoint(point, camera, width, height) {
+        if (!point) {
+            return new Vector2();
+        }
+        const vector = point.clone().project(camera);
+        vector.x = (vector.x + 1) / 2 * width;
+        vector.y = -(vector.y - 1) / 2 * height;
+        return new Vector2(vector.x, vector.y);
+    }
+    static CanSelectorConnect(consPart1, con1, con2, startWithMale) {
+        const con1Name = (con1 instanceof Object3D || con1 instanceof Mesh) ? con1.name : con1.connector;
+        const con2Name = (con2 instanceof Object3D || con2 instanceof Mesh) ? con2.name : con2.connector;
+        const sameParent = (con1 instanceof Object3D || con1 instanceof Mesh) &&
+            (con2 instanceof Object3D || con2 instanceof Mesh) ? con1.parent === con2.parent : false;
+        if (!con1Name || !con2Name) {
+            return false;
+        }
+        const parts1 = con1Name.toUpperCase().split('_'), parts2 = con2Name.toUpperCase().split('_');
+        if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
+            const connectable = parts1[0] === 'C' && parts2[0] === 'C' &&
+                parts1[1] === parts2[1] && parts1[2] !== parts2[2];
+            return connectable;
+        }
+        return false;
+    }
+    // public static CanSelectorConnect(con1: Object3D | any, con2: Object3D | any): boolean {
+    //     const con1Name: string = con1 instanceof Object3D ? con1.name : con1.connector;
+    //     const con2Name: string = con2 instanceof Object3D ? con2.name : con2.connector;
+    //     const sameParent: boolean = con1 instanceof Object3D && con2 instanceof Object3D ? con1.parent === con2.parent : false;
+    //     const parts1: string[] = con1Name.toUpperCase().split('_'),
+    //         parts2: string[] = con2Name.toUpperCase().split('_');
+    //     if (parts1.length >= 3 && parts2.length >= 3 && !sameParent) {
+    //         const connectable: boolean = parts1[0] === 'C' && parts2[0] === 'C' &&
+    //             parts1[1] === parts2[1] && parts1[2] !== parts2[2];
+    //         return connectable;
+    //     }
+    //     return false;
+    // }
+    static SelectorConnect(scene, parent, con1, con2) {
+        if (!scene || !parent) {
+            return false;
+        }
+        con1['connectedTo'] = con2 && con2.parent ? con2.parent.name : '';
+        con2['connectedTo'] = con1 && con1.parent ? con1.parent.name : '';
+        con1.userData.connectedTo = con2 && con2.parent ? con2.parent.name : '';
+        con1.userData.connected = false;
+        con2.userData.connectedTo = con1 && con1.parent ? con1.parent.name : '';
+        con2.userData.connected = false;
+        const motherRotation = new Euler(0, 0, 0);
+        const motherPosition = new Vector3(0, 0, 0);
+        parent.updateMatrixWorld();
+        motherRotation.copy(parent.rotation);
+        parent.getWorldPosition(motherPosition);
+        parent.rotation.set(0, 0, 0);
+        parent.position.set(0, 0, 0);
+        scene.updateMatrixWorld(true);
+        const con1Quat = new Quaternion();
+        if (con1) {
+            con1.getWorldQuaternion(con1Quat);
+        }
+        const con2Quat = new Quaternion();
+        if (con2) {
+            con2.getWorldQuaternion(con2Quat);
+        }
+        const con1QuatParent = new Quaternion();
+        if (con1 && con1.parent) {
+            con1.parent.getWorldQuaternion(con1QuatParent);
+        }
+        const con2QuatParent = new Quaternion();
+        if (con2 && con2.parent) {
+            con2.parent.getWorldQuaternion(con2QuatParent);
+        }
+        const rotation = new Quaternion().multiplyQuaternions(con1Quat.invert(), con2Quat).multiply(new Quaternion().multiplyQuaternions(con1QuatParent, con1QuatParent));
+        if (con2 && con2.parent) {
+            con2.parent.quaternion.copy(rotation);
+        }
+        // Update because the matrix has been tempered with
+        scene.updateMatrixWorld(true);
+        // Move the connectors towards eachother
+        const con1Pos = new Vector3();
+        if (con1) {
+            con1.getWorldPosition(con1Pos);
+        }
+        const con2Pos = new Vector3();
+        if (con2) {
+            con2.getWorldPosition(con2Pos);
+        }
+        const move = con1Pos.sub(con2Pos);
+        if (con2 && con2.parent) {
+            con2.parent.position.x += move.x;
+            con2.parent.position.y += move.y;
+            con2.parent.position.z += move.z;
+        }
+        // reset parent's objects rotation and position
+        parent.rotation.copy(motherRotation);
+        parent.position.copy(motherPosition);
+        scene.updateMatrixWorld(true);
+        // Set the connected flag
+        if (con1) {
+            // con1['connected'] = true;
+            con1.userData.connected = true;
+        }
+        if (con2) {
+            // con2['connected'] = true;
+            con2.userData.connected = true;
+        }
+        return true;
+    }
+}
+
+class SelectionUtils {
+    static BuildFromAdjustables(scene, item, adjustables, placedAdjustables, sourceObj, activeConnector, baseElementNodeId) {
+        const result = [];
+        if (adjustables && adjustables.length > 0) {
+            let connected = false;
+            for (let i = 0, len = adjustables.length; i < len; i++) {
+                const adjustable = SelectionUtils.CreateAdjustable(item, adjustables[i], placedAdjustables, sourceObj);
+                if (adjustable) {
+                    for (let ii = placedAdjustables.length - 1; ii >= 0; ii--) {
+                        if (SelectionUtils.IsMoveableObject(adjustable)) { // vrije verplaatsing mogelijk, connecten aan opgeslagen connector
+                            const selection = adjustable.userData.selection;
+                            SelectionUtils.AddElementOnConnector(item, adjustable, selection.decoConnection ? selection.decoConnection : activeConnector, baseElementNodeId);
+                            adjustable.visible = true;
+                            connected = true;
+                            break;
+                        }
+                        else {
+                            if (Scene3DUtil.TrySelectorConnection(scene, item, placedAdjustables[ii], adjustable, i === 1)) {
+                                adjustable.visible = true;
+                                connected = true;
+                                break;
+                            }
+                        }
+                        connected = false;
+                    }
+                }
+                if (!connected && placedAdjustables.length > 1) {
+                    DebugUtils.log(`No connection found for: ${adjustable ? adjustable.name : adjustables[i].decoNode.gameObjectName}`);
+                    result.push(`No connection found for: ${adjustable ? adjustable.name : adjustables[i].decoNode.gameObjectName}`);
+                }
+            }
+        }
+        return result;
+    }
+    static LinkSelectionsAndDecos(selections, decos, variations) {
+        const len = selections.length;
+        for (let i = 0; i < len; i++) {
+            // const id: string = this.selections[i].artNodeIdDeco;
+            let deco = decos ? decos.find(d => d.nodeId === selections[i].node) : null;
+            if (!deco) {
+                deco = new DecoNode();
+            }
+            if (deco.type !== DecoNodeType.Variation) {
+                const variation = variations ? variations.find(v => v.parentId === selections[i].artNodeIdDeco) : null;
+                if (variation) {
+                    deco.variation = variation;
+                }
+            }
+            selections[i].decoNode = deco;
+        }
+    }
+    static PrepareTheSelections(selections, adjustables, addables) {
+        const selectionOfArticle = selections.find(s => s.nodeType === NodeType.Article);
+        const adjustableSelections = selections.filter(s => s.addAdjust === '2');
+        const isArticleWithMaterial = adjustableSelections.length === 0 &&
+            selectionOfArticle.gameObject &&
+            selectionOfArticle.gameObject.length > 0;
+        // get generic variations
+        const globalVariations = selections
+            .filter(s => (s.generic || adjustableSelections.length === 1) && s.decoNode.variation && (!s.elementType || s.elementType === 'variation'))
+            .map((value, index, array) => {
+            // find selection of variation
+            const sel = selections.find(s => s.artNodeIdDeco === value.decoNode.variation.parentId);
+            if (sel) {
+                value.decoNode.variation.supplierArticleNr = sel.supplierArticleNr;
+            }
+            value.decoNode.variation.materialId = SelectionUtils.GetMaterialIdFromParent(selections, value.node);
+            return value.decoNode.variation;
+        });
+        let globalVariationsRewrite = true;
+        const len = selections.length;
+        let lastAdded;
+        let lastAdjustable;
+        let newPart = false;
+        let previousPresLevel = -1;
+        let positioning;
+        let optionText;
+        for (let i = 0; i < len; i++) {
+            const selection = selections[i];
+            if (selection.presentationLevel === 1) {
+                positioning = selection.hdecoPositioning;
+                optionText = selection.question;
+            }
+            if (selection.presentationLevel > previousPresLevel) {
+                selection.hdecoPositioning = selection.hdecoPositioning || positioning;
+            }
+            if (selection.decoNode) {
+                if (selection.decoNode.type === DecoNodeType.Variation) {
+                    const decoNode = selection.decoNode;
+                    decoNode.optionText = optionText;
+                    // find selection of variation and set materialId in case of multimaterial
+                    if (!decoNode.materialId) {
+                        decoNode.materialId = SelectionUtils.GetMaterialIdFromParent(selections, decoNode.nodeId);
+                    }
+                    if (lastAdded) {
+                        if (newPart) {
+                            if (decoNode.materialId) {
+                                lastAdded.variations.push(decoNode);
+                            }
+                            else {
+                                lastAdded.variations = [decoNode];
+                            }
+                        }
+                        else {
+                            lastAdded.variations.push(decoNode);
+                        }
+                        newPart = false;
+                    }
+                    else {
+                        globalVariations.push(decoNode);
+                    }
+                    // else {
+                    //   if (globalVariationsRewrite) {
+                    //     globalVariations.length = 0;
+                    //     globalVariationsRewrite = false;
+                    //   }
+                    //   globalVariations.push(decoNode);
+                    // }
+                    // const variation: FurniturePartVariation = new FurniturePartVariation();
+                    // variation.BrandId = selection.decoNode.brandId;
+                    // variation.Description = selection.decoNode.gameObjectName;
+                    // variation.MaterialId = (selection.decoNode as any).materialId;
+                    // variation.SupplierArticleNr = (selection.decoNode as any).supplierArticleNr;
+                    // usedVariations.push(variation);
+                }
+                else if ((selection.decoNode.type === DecoNodeType.Part &&
+                    typeof selection.decoNode.gameObjectName === 'string' &&
+                    selection.decoNode.gameObjectName.length) || (isArticleWithMaterial)) {
+                    if (selection.decoNode.kind === DecoNodeKind.Adjustable || (isArticleWithMaterial)) {
+                        selection.variations = globalVariations.slice();
+                        adjustables.push(selection);
+                        if (!lastAdded || (lastAdded.nodeId !== selection.nodeId || lastAdded.node !== selection.node)) {
+                            newPart = true;
+                        }
+                        lastAdded = selection;
+                        lastAdjustable = selection;
+                    }
+                    else if (selection.decoNode.kind === DecoNodeKind.Addable) {
+                        selection.variations = lastAdjustable ? lastAdjustable.variations : globalVariations.slice();
+                        if (lastAdjustable) {
+                            lastAdjustable.addables.push(selection);
+                        }
+                        addables.push(selection);
+                        if (!lastAdded || (lastAdded.nodeId !== selection.nodeId || lastAdded.node !== selection.node)) {
+                            newPart = true;
+                        }
+                        lastAdded = selection;
+                    }
+                }
+            }
+            previousPresLevel = selection.presentationLevel;
+        }
+        // this._upsertFurniture(this.activeInstance,
+        //   {Variations: usedVariations});
+    }
+    /**
+     * Returns the materialId of the parent up the tree until presentionlevel 1 is reached
+     * @param id
+     * @private
+     */
+    static GetMaterialIdFromParent(selections, id) {
+        if (!selections) {
+            return undefined;
+        }
+        const idx = selections.findIndex(s => s.node === id);
+        let currentLevel = 999;
+        if (idx > -1) {
+            for (let i = idx; i > 0; i--) {
+                const selection = selections[i];
+                if (selection.presentationLevel >= currentLevel) {
+                    break;
+                }
+                currentLevel = selection.presentationLevel;
+                if (selection.hdecoGameObject) {
+                    return selection.hdecoGameObject;
+                }
+            }
+        }
+        return undefined;
+    }
+    static CreateAdjustable(item, adj, placedAdjustables, sourceObj) {
+        let obj = sourceObj ? sourceObj.getObjectByName(adj.decoNode.gameObjectName || adj.gameObject) : null;
+        if (!obj) {
+            // in case of glb files, the importer removes dots from names
+            const name = adj.decoNode.gameObjectName.replace(/[.]/g, '');
+            obj = sourceObj ? sourceObj.getObjectByName(name) : null;
+            if (!obj) {
+                DebugUtils.log(`No object with name ${adj.decoNode.gameObjectName} found!`);
+                return null;
+            }
+        }
+        let adjustable = obj.clone();
+        adjustable.name = SelectionUtils.CreateUniqueName(item, obj);
+        adjustable.userData.selection = adj;
+        adjustable.position.set(0, 0, 0);
+        adjustable.traverse(c => {
+            c.visible = !c.name.toLowerCase().startsWith('c_');
+        });
+        item.add(adjustable);
+        adjustable = item.getObjectByName(adjustable.name);
+        placedAdjustables.push(adjustable);
+        return adjustable;
+    }
+    static CreateAddable(sourceObj, item, placedAddables, add, part2, part1) {
+        const obj = sourceObj.getObjectByName(add.decoNode.gameObjectName);
+        if (!obj) {
+            return null;
+        }
+        // const selection: Selection = this._getSelectionFromId(adj.artNodeIdDeco);
+        const addable = obj.clone();
+        addable.name = SelectionUtils.CreateUniqueName(item, obj);
+        addable.userData.selection = add;
+        addable.position.set(0, 0, 0);
+        addable.visible = true;
+        if (part1 && part2) {
+            return SelectionUtils.PlaceAddable(item, placedAddables, addable);
+        }
+        return addable;
+    }
+    static PlaceAddable(item, placedAddables, add) {
+        item.add(add);
+        const addable = item.getObjectByName(add.name);
+        placedAddables.push(addable);
+        return addable;
+    }
+    static PlaceAddables(scene, sourceObj, item, placedAdjustables, placedAddables) {
+        const len = placedAdjustables.length;
+        for (let i = 0; i < len; i++) {
+            if (placedAdjustables[i].userData.hasOwnProperty('selection') && placedAdjustables[i].userData.selection) {
+                const adjustableSelection = placedAdjustables[i].userData.selection;
+                if (adjustableSelection) {
+                    const lena = adjustableSelection.addables.length;
+                    let conAddable;
+                    for (let ia = 0; ia < lena; ia++) {
+                        Scene3DUtil.TrySelectorConnection(scene, item, placedAdjustables[i], adjustableSelection.addables[ia], false, (add, part2, part1) => SelectionUtils.CreateAddable(sourceObj, item, placedAddables, add, part2, part1));
+                        if (conAddable) {
+                            Scene3DUtil.TrySelectorConnection(scene, item, conAddable, adjustableSelection.addables[ia], false, (add, part2, part1) => SelectionUtils.CreateAddable(sourceObj, item, placedAddables, add, part2, part1));
+                        }
+                        conAddable = placedAddables[placedAddables.length - 1];
+                    }
+                }
+            }
+        }
+    }
+    static CreateUniqueName(item, obj) {
+        let iteration = 0;
+        let name = `${item.name}_${obj.name}`;
+        let existingObj = item.getObjectByName(name);
+        while (existingObj) {
+            iteration++;
+            name = `${item.name}_${obj.name}` + (iteration !== 0 ? ('_' + iteration) : '');
+            existingObj = item.getObjectByName(name);
+        }
+        return name;
+    }
+    static IsMoveableObject(obj) {
+        return obj.userData && obj.userData.selection && obj.userData.selection.hdecoPositioning === "V";
+    }
+    static AddElementOnConnector(currentItem, element, connector, connectedNodeId) {
+        // TODO this should do something, but not sure what
+        // const connectorFromElement = currentItem.connectorFromElement(element.userData.selection);
+        // const idFromBaseElement: number = connectedNodeId ? connectedNodeId : connectorFromElement.connectedNodeId;
+        // const baseElement: Object3D[] = currentItem.getObjectsByUserDataProp('selection', 'nodeId', idFromBaseElement);
+        //
+        // const item: Item = ObjectUtils.GetParentItem(element);
+        // if (item) {
+        //   const conn: string =
+        //     await this.elementService.placeElementOnConnector(
+        //       item.metadata.itemId,
+        //       element,
+        //       baseElement.length > 0 ? baseElement[0] : null,
+        //       false,
+        //       connector,
+        //       false
+        //     );
+        //   this.saveElementConnector(element, conn);
+        // }
+    }
+}
+
+class Builder {
+    modelLoaded = new BehaviorSubject(null);
+    set debug(value) {
+        if (value) {
+            this._debug = value;
+            if (this._variationHelper) {
+                this._variationHelper.debug = this._debug;
+            }
+        }
+    }
+    get debug() {
+        return this._debug;
+    }
+    _scene;
+    _instanceId;
+    _sku;
+    _goodId;
+    _assetPath;
+    _selections = [];
+    _answers = [];
+    _decos = [];
+    _placedAdjustables = [];
+    _placedAddables = [];
+    _adjustables = [];
+    _addables = [];
+    _debug;
+    _imageCache = new Map();
+    _boFactory;
+    _source;
+    _threedUtils;
+    _variationHelper;
+    _articleCache = new Map();
+    constructor() {
+    }
+    init(scene) {
+        this._boFactory = new BusinessObjectFactory();
+        this._threedUtils = new ThreedUtils();
+        this._variationHelper = new VariationHelper();
+        this._variationHelper.debug = this._debug;
+        if (!scene) {
+            throw 'No scene object provided!';
+        }
+        // this._imageCacheService = new ImageCacheService();
+        this._scene = scene;
+    }
+    // public async buildModel(sku?: string, instanceId?: string, goodId?: number): Promise<THREE.Object3D> {
+    //   if (!this._scene) {
+    //     return;
+    //   }
+    //   try {
+    //     await this._setInstanceId(sku, instanceId, goodId);
+    //     await this._prepareConfiguration(this._sku, this._goodId);
+    //     if (this._source) {
+    //       await this._configuratorService.setInstanceToConfigure(this._instanceId);
+    //       const promises: Promise<any>[] = [];
+    //       this._reset();
+    //       promises.push(this.getQuestionAndAnswers());
+    //       promises.push(this._getSelections(this._instanceId));
+    //       promises.push(this._getDecos());
+    //       await Promise.all(promises);
+    //       if (this._answers.length > 0) {
+    //         return;
+    //       }
+    //       this._linkSelectionsAndDecos();
+    //       this._prepareTheSelections();
+    //       this._preloadMaterials();
+    //       const build = await this._build();
+    //       return build;
+    //     } else {
+    //       throw 'GLB source not found!';
+    //     }
+    //   } catch (e) {
+    //     throw e;
+    //   }
+    // }
+    async buildModelFromData(selections, decos, assetUrl, cdnUrl, schema) {
+        return new Promise(async (resolve, reject) => {
+            if (!this._scene) {
+                reject('no scene provided!');
+            }
+            try {
+                this._log('start build', true);
+                await this._downloadAsset(assetUrl, cdnUrl, schema, selections && selections.length > 1 && decos && decos.length > 0);
+                try {
+                    if (this._source) {
+                        try {
+                            if (selections && selections.length > 1 && decos && decos.length > 0) {
+                                this._reset();
+                                this._assetPath = assetUrl;
+                                this._selections = selections;
+                                this._decos = decos;
+                                this._linkSelectionsAndDecos();
+                                this._prepareTheSelections();
+                                this._preloadMaterials(schema, cdnUrl);
+                                const build = await this._build();
+                                resolve(build);
+                            }
+                            else {
+                                resolve(this._source); // just return the source for simplicity
+                            }
+                        }
+                        catch (e) {
+                            reject(e.message);
+                        }
+                        {
+                        }
+                    }
+                    else {
+                        if (assetUrl) {
+                            reject(`Error downloading source: ${assetUrl}`);
+                        }
+                        else {
+                            reject('No 3D source provided!');
+                        }
+                    }
+                }
+                finally {
+                    this._cleanUp();
+                    this._log('finish build', true);
+                }
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    }
+    destroy() {
+        this._threedUtils.clearCache();
+        this._variationHelper.clearCache();
+    }
+    _cleanUp() {
+        this._sku = undefined;
+        this._goodId = undefined;
+        this._instanceId = undefined;
+        this._variationHelper.clearCache();
+    }
+    _handleResponseData(includeMimetype, thumb, responseData) {
+        if (responseData && responseData.resultObject) {
+            if (responseData.resultObject.filePath !== null && responseData.resultObject.filePath !== "") {
+                return ImageUtils.getFixedImageFilepathUrl(responseData.resultObject.filePath);
+            }
+            else {
+                if (includeMimetype) {
+                    return ImageUtils.getDocBodyWithMimeTypeDefinition(responseData.resultObject.fileName, thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody);
+                }
+                else {
+                    return thumb ? responseData.resultObject.thumbnailBody : responseData.resultObject.documentBody;
+                }
+            }
+        }
+        else {
+            return '';
+        }
+    }
+    _preloadMaterials(schema, assetPath) {
+        if (this._decos && this._decos.length) {
+            const materials = [...new Set(this._decos
+                    .filter(d => (d.gameObjectName || d.materialUrl) && d.type === DecoNodeType.Variation)
+                    .map(d => d))];
+            this._variationHelper.preloadVariations(schema, materials, assetPath);
+        }
+    }
+    async _downloadAsset(assetUrl, cdnUrl, schema, setVisibleFalse = true) {
+        this._source = await this._threedUtils.download3DSource(assetUrl, setVisibleFalse)
+            .catch((error) => {
+            throw error;
+        });
+        if (cdnUrl) {
+            this._variationHelper.assetPath =
+                cdnUrl +
+                    (cdnUrl.endsWith('/') ? '' : '/') +
+                    (schema ? schema : 'UP_DBA');
+        }
+    }
+    async _build() {
+        const adjustables = this._getAdjustables();
+        if (adjustables && adjustables.length === 0 && this._selections && this._selections.length > 0) { // check if article has a gameObject
+            if (this._selections[0].nodeType === NodeType.Article && this._selections[0].gameObject) {
+                adjustables.push(this._selections[0]);
+            }
+        }
+        const obj = new THREE.Object3D();
+        obj.visible = false; // no need to render visualy
+        const adjustableResult = SelectionUtils.BuildFromAdjustables(this._scene, obj, adjustables, this._placedAdjustables, this._source);
+        if (adjustableResult.length === 0) {
+            this._log('place addables');
+            SelectionUtils.PlaceAddables(this._scene, this._source, obj, this._placedAdjustables, this._placedAddables);
+            this._log('update pivot');
+            this._updatePivot(obj);
+            this._log('load variations');
+            await this._loadVariations(this._assetPath, obj);
+            // this._variationHelper.clearCache();
+            this._log('remove from scene');
+            this._scene.remove(obj);
+            ObjectUtils.DisposeObject(this._source);
+            // this._cleanUp();
+            this._log('ready!');
+            this.modelLoaded.next(obj);
+            return obj;
+        }
+        else {
+            throw 'No adjustables found!';
+            // this._building = false;
+            // if (this.selections.length < 2) {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_SELECTIONS_OR_DECOS', description: 'NO_SELECTIONS_OR_DECOS_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoSelections});
+            // } else if (this.decos.size === 0) {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_SELECTIONS_OR_DECOS', description: 'NO_SELECTIONS_OR_DECOS_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoDecoNodes});
+            // } else {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_ADJUSTABLES', description: 'NO_ADJUSTABLES_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoAdjustables});
+            // }
+        }
+    }
+    _prepareTheSelections() {
+        if (!this._selections || !this._selections.length) {
+            return;
+        }
+        SelectionUtils.PrepareTheSelections(this._selections, this._adjustables, this._addables);
+    }
+    _linkSelectionsAndDecos() {
+        if (!this._selections || !this._selections.length) {
+            return;
+        }
+        SelectionUtils.LinkSelectionsAndDecos(this._selections, this._decos, this._getVariations());
+    }
+    _getVariations() {
+        if (this._decos && this._decos.length) {
+            return this._decos.filter((deco) => {
+                return deco.type === DecoNodeType.Variation;
+            });
+        }
+        return [];
+    }
+    async _loadVariations(assetPath, obj) {
+        this._log('load variation for parts');
+        await this._variationHelper.loadPart(assetPath, this._adjustables, obj, true);
+        this._log('load variation for adjustables');
+        await this._variationHelper.loadVariation(assetPath, this._adjustables, obj, true);
+        this._log('load variation for addables');
+        await this._variationHelper.loadVariation(assetPath, this._addables, obj, true);
+        this._log('load variation clear cache');
+        this._variationHelper.clearCache();
+        this._log('load variations done');
+    }
+    _getAdjustables() {
+        if (!this._selections || !this._selections.length) {
+            return [];
+        }
+        return this._selections.filter(s => {
+            const node = s.decoNode;
+            return node && node.gameObjectName && node.type === DecoNodeType.Part && node.kind === DecoNodeKind.Adjustable;
+        });
+    }
+    _updatePivot(obj) {
+        const boundingBox = new THREE.Box3().setFromObject(obj);
+        const bbCenterPivot = new THREE.Vector3();
+        boundingBox.getCenter(bbCenterPivot);
+        const delta = new THREE.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+        obj.children.forEach((child) => {
+            child.position.add(delta);
+        });
+        obj.updateWorldMatrix(false, true);
+    }
+    _reset() {
+        this._placedAddables.length = 0;
+        this._placedAdjustables.length = 0;
+        this._adjustables.length = 0;
+        this._addables.length = 0;
+        // this._prepareTheSelections();
+    }
+    _log(message, force = false) {
+        if (this.debug) {
+            this.debug(message);
+            console.log(new Date(), message);
+        }
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Builder, DebugUtils, ImageUtils, Material, ObjectUtils, Scene3DUtil, SelectionUtils, ThreedUtils, VariationCacheHelper, VariationHelper };
+//# sourceMappingURL=colijnit-configuratorcore.mjs.map