@colijnit/homedecorator 255.1.2 → 255.1.3

package/fesm2015/colijnit-homedecorator.js

@@ -31,7 +31,7 @@ import { HttpHeaders } from '@angular/common/http';
 import axios from 'axios';
 import * as applyPatch from 'textdiff-patch';
 import * as THREE from 'three';
-import { Vector2, Material as Material$1, Object3D, Mesh, Vector3, Scene, EventDispatcher, PerspectiveCamera, Box3, PlaneGeometry, MeshBasicMaterial, DoubleSide, MeshStandardMaterial, CylinderGeometry, RingGeometry, Matrix4, Raycaster, PointLight, Euler, BoxGeometry, WebGLRenderTarget, NearestFilter, RGBAFormat, SRGBColorSpace, AxesHelper, Group, BufferGeometry, Line, DataTexture, LuminanceAlphaFormat, UnsignedByteType, LinearFilter, Shape, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, Texture as Texture$1, DirectionalLight, MeshPhongMaterial, Color, WebGLRenderer, NoToneMapping, TextureLoader, EllipseCurve, ArcCurve, BufferAttribute, MeshPhysicalMaterial, Quaternion, Path, ShapeGeometry, BasicShadowMap, PCFShadowMap, VSMShadowMap, LinearSRGBColorSpace, Float32BufferAttribute, LineBasicMaterial, EquirectangularReflectionMapping, FrontSide, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, MathUtils, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, LuminanceFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, ClampToEdgeWrapping, MirroredRepeatWrapping, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, NoBlending, NormalBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, TangentSpaceNormalMap, ObjectSpaceNormalMap, BackSide, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, Source, SpotLight, AmbientLight, HemisphereLight, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, CanvasTexture, Clock, AnimationMixer, AnimationClip, NoColorSpace, ArrowHelper, PMREMGenerator } from 'three';
+import { Vector2, Material as Material$1, Object3D, Mesh, Vector3, Scene, EventDispatcher, PerspectiveCamera, Box3, PlaneGeometry, MeshBasicMaterial, DoubleSide, MeshStandardMaterial, CylinderGeometry, RingGeometry, Matrix4, Raycaster, PointLight, Euler, BoxGeometry, WebGLRenderTarget, NearestFilter, RGBAFormat, SRGBColorSpace, AxesHelper, Group, BufferGeometry, Line, DataTexture, LuminanceAlphaFormat, UnsignedByteType, LinearFilter, Shape, SphereGeometry, PCFSoftShadowMap, ShadowMaterial, LightProbe, Texture as Texture$1, DirectionalLight, MeshPhongMaterial, DepthTexture, UnsignedIntType, DepthFormat, Color, OrthographicCamera, WebGLRenderer, NoToneMapping, TextureLoader, EllipseCurve, ArcCurve, BufferAttribute, MeshPhysicalMaterial, Quaternion, Path, ShapeGeometry, BasicShadowMap, PCFShadowMap, VSMShadowMap, LinearSRGBColorSpace, Float32BufferAttribute, LineBasicMaterial, EquirectangularReflectionMapping, FrontSide, AdditiveBlending, LineSegments, EdgesGeometry, CircleGeometry, MathUtils, ObjectLoader, Light, Camera as Camera$1, RepeatWrapping, InstancedMesh, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, NearestMipmapNearestFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipMapLinearFilter, LinearMipmapNearestFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipMapLinearFilter, AlphaFormat, LuminanceFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, ByteType, ShortType, UnsignedShortType, IntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, ClampToEdgeWrapping, MirroredRepeatWrapping, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, NoBlending, NormalBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, TangentSpaceNormalMap, ObjectSpaceNormalMap, BackSide, ZeroStencilOp, KeepStencilOp, ReplaceStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp, InvertStencilOp, NeverStencilFunc, LessStencilFunc, EqualStencilFunc, LessEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc, GreaterEqualStencilFunc, AlwaysStencilFunc, Source, SpotLight, AmbientLight, HemisphereLight, SpotLightHelper, DirectionalLightHelper, HemisphereLightHelper, PointLightHelper, CanvasTexture, Clock, AnimationMixer, AnimationClip, NoColorSpace, ArrowHelper, GridHelper, PMREMGenerator } from 'three';
 import * as TWEEN from '@tweenjs/tween.js';
 import * as PolygonTools from 'polygon-tools';
 import { WebGLPathTracer } from 'three-gpu-pathtracer';
@@ -45,11 +45,11 @@ import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';
-import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass';
 import * as md5 from 'md5';
 import GUI from 'three/examples/jsm/libs/lil-gui.module.min';
 import { N8AOPass } from 'n8ao';
-import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass';
+import { TAARenderPass } from 'three/examples/jsm/postprocessing/TAARenderPass';
 import * as i1 from '@angular/platform-browser';
 import * as i2$1 from 'ngx-device-detector';
 import * as i5$1 from '@angular/material/icon';
@@ -86,6 +86,7 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as BufferGeometryUtils$1 from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { MeshBVH } from 'three-mesh-bvh';
 import { LinearSRGBColorSpace as LinearSRGBColorSpace$1, SrcAlphaSaturateFactor, LinearFilter as LinearFilter$1, LinearToneMapping, FloatType as FloatType$1 } from 'three/src/constants';
 import * as i4 from '@colijnit/corecomponents';
 import { IconModule, CardModule, SlideoutModule, SummaryLineModule, PriceDisplayPipeModule, ButtonModule, HtmlHeaderModule, InputTextModule, InputTextChipsModule } from '@colijnit/corecomponents';
@@ -138,7 +139,8 @@ import html2canvas from 'html2canvas';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader';
-import * as i6$3 from '@angular/material/radio';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
+import * as i9$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i19$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -157,6 +159,8 @@ import * as i1$5 from 'ngx-lightbox';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i10$2 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
 
 var MessageType;
 (function (MessageType) {
@@ -663,9 +667,7 @@ class HomedecoratorConnectorAdapterService {
     }
     store3DModelCDN(filename, fileContents) {
         return __awaiter$1m(this, void 0, void 0, function* () {
-            // convert ArrayBuffer to Int8Array so the middletier understand it
-            const int8Array = new Int8Array(fileContents);
-            const response = yield this.mainApi.uploadModelToCDN(filename, int8Array);
+            const response = yield this.mainApi.uploadModelToCDN(filename, fileContents);
             if (response && response.validationResult && response.validationResult.success) {
                 return response.resultObject;
             }
@@ -676,7 +678,7 @@ class HomedecoratorConnectorAdapterService {
     }
     getCatalogDefinitionsList() {
         return __awaiter$1m(this, void 0, void 0, function* () {
-            const response = yield this._articleApi.getCatalogDefinitions().catch(e => {
+            const response = yield this.articleApi.getCatalogDefinitions().catch(e => {
                 return new DataServiceResponseData();
             });
             if (response && response.validationResult && response.validationResult.success) {
@@ -692,7 +694,7 @@ class HomedecoratorConnectorAdapterService {
             if (!externalSourceId) {
                 return null;
             }
-            const response = yield this._articleApi.getExternalSource(externalSourceId);
+            const response = yield this.articleApi.getExternalSource(externalSourceId);
             if (response && response.validationResult && response.validationResult.success) {
                 if (response.resultObject) {
                     return this._boFactory.makeWithRawBackendData(ExternalSource, response.resultObject);
@@ -870,6 +872,7 @@ class HomedecoratorSettingsOptions {
         this.useRenderWebsocket = false;
         this.productRenderSceneAssetId = 'scene_studio_eevee';
         this.pathTracer = false;
+        this.ssrEnabled = false;
         this.maxRenderSamples = 100;
     }
 }
@@ -1648,6 +1651,8 @@ class HomedecoratorConnectorService {
     }
     getArticle(sku, branch) {
         return __awaiter$1g(this, void 0, void 0, function* () {
+            this.selections = [];
+            this._decoNodes = [];
             const article = yield this._connector.getArticle(sku, branch)
                 .catch(e => {
                 return Promise.reject(e);
@@ -5974,7 +5979,6 @@ class OutlineService {
         this._hideOutlineTimeout = 10000;
         this._animationDuration = 5000;
         this._outlinePassAsError = false;
-        this._useMSAA = false;
         this._initializing = false;
         this._subs = [];
         this.needsRender = false;
@@ -5997,16 +6001,18 @@ class OutlineService {
         this._composer = new EffectComposer(this._renderer, this._renderTarget);
         this._composer.setPixelRatio(window.devicePixelRatio);
         const renderPass = new RenderPass(this._scene, this._camera);
-        this._composer.addPass(renderPass);
+        this._outputPass = new OutputPass();
         this._outlinePass = new OutlinePass(new Vector2(width, height), this._scene, this._camera);
-        this._composer.addPass(this._outlinePass);
         this._fxaaPass = new ShaderPass(FXAAShader);
         this._fxaaPass.material.uniforms['resolution'].value.set(1 / width, 1 / height);
-        this._composer.addPass(this._fxaaPass);
         // needed for the sRGBEncoding to work
         // https://stackoverflow.com/questions/72936071/srgbencoding-in-not-working-in-three-effectcomposer
-        const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
-        this._composer.addPass(gammaCorrectionPass);
+        // const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
+        this._composer.addPass(renderPass);
+        this._composer.addPass(this._outlinePass);
+        this._composer.addPass(this._fxaaPass);
+        // this._composer.addPass(gammaCorrectionPass);
+        this._composer.addPass(this._outputPass);
         this._setSelectionGlowSettings();
         this._composer.setSize(width, height);
     }
@@ -7345,6 +7351,19 @@ class ArService {
     endSessionEvent() {
         this._session.end();
     }
+    arIOSSupported() {
+        return __awaiter$13(this, void 0, void 0, function* () {
+            const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
+                (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+            if (isIOS) {
+                const anchor = document.createElement('a');
+                return anchor.relList.supports('ar');
+            }
+            else {
+                return false;
+            }
+        });
+    }
     arSupported() {
         return __awaiter$13(this, void 0, void 0, function* () {
             if (navigator.xr) {
@@ -8113,25 +8132,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class PostProcessingService {
     constructor(_configurationService) {
         this._configurationService = _configurationService;
-        this._subs = [];
-        this._subs.push(this._configurationService.onChange.subscribe((changed) => {
-            if (ConfigurationKey.ShowPostProcessingSettings in changed) {
-                this._showHideGui(changed[ConfigurationKey.ShowPostProcessingSettings]);
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    init(renderer, scene, camera, width, height) {
-        this._renderer = renderer;
-        this._scene = scene;
-        this._camera = camera;
-        this._composer = new EffectComposer(renderer);
-        this._n8aoPass = new N8AOPass(scene, camera, width, height);
-        const smaaPass = new SMAAPass(width, height);
-        this._composer.addPass(this._n8aoPass);
-        this._composer.addPass(smaaPass);
         this._effectController = {
             aoSamples: 32.0,
             denoiseSamples: 8.0,
@@ -8149,7 +8149,51 @@ class PostProcessingService {
             stencil: true,
             accumulate: false
         };
+        this._subs = [];
+        this._subs.push(this._configurationService.onChange.subscribe((changed) => {
+            if (ConfigurationKey.ShowPostProcessingSettings in changed) {
+                this._showHideGui(changed[ConfigurationKey.ShowPostProcessingSettings]);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    init(renderer, scene, camera, width, height) {
+        this._renderer = renderer;
+        this._scene = scene;
+        this._camera = camera;
+        this._renderTarget = new WebGLRenderTarget(width, height, {
+            minFilter: NearestFilter,
+            magFilter: NearestFilter,
+            format: RGBAFormat,
+            colorSpace: SRGBColorSpace
+        });
+        this._renderTarget.samples = 4;
+        this._renderTarget.depthTexture = new DepthTexture(width, height, UnsignedIntType);
+        this._renderTarget.depthTexture.format = DepthFormat;
+        this._composer = new EffectComposer(this._renderer, this._renderTarget);
+        this._n8aoPass = new N8AOPass(scene, camera, width, height);
+        this._n8aoPass.configuration.gammaCorrection = false;
+        this._n8aoPass.debugMode = true;
+        // const smaaPass = new SMAAPass(width, height);
+        // this._composer.addPass(smaaPass);
+        // const fxaaPass = new ShaderPass(FXAAShader);
+        // const pixelRatio = this._renderer.getPixelRatio();
+        // fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / (width * pixelRatio);
+        // fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / (height * pixelRatio);
+        this._outputPass = new OutputPass();
+        this._taaRenderPass = new TAARenderPass(this._scene, this._camera, 0x000000, 0);
+        this._taaRenderPass.unbiased = false;
+        this._taaRenderPass.sampleLevel = 4;
+        this._renderPass = new RenderPass(this._scene, this._camera);
+        // this._renderPass.enabled = false;
+        this._composer.addPass(this._renderPass);
+        this._composer.addPass(this._taaRenderPass);
+        this._composer.addPass(this._n8aoPass);
+        this._composer.addPass(this._outputPass);
         this._createGui();
+        this._createGuiTaaPass();
     }
     _updatePass() {
         this._n8aoPass.configuration.aoRadius = this._effectController.aoRadius;
@@ -8169,6 +8213,34 @@ class PostProcessingService {
         this._n8aoPass.configuration.accumulate = this._effectController.accumulate;
         this.render();
     }
+    _createGuiTaaPass() {
+        this._taaPassGui = new GUI();
+        this._taaPassGui.hide();
+        const param = { TAAEnabled: '1', TAASampleLevel: 0 };
+        this._taaPassGui.add(param, 'TAAEnabled', {
+            'Disabled': '0',
+            'Enabled': '1'
+        }).onFinishChange(() => {
+            if (this._taaRenderPass) {
+                this._taaRenderPass.enabled = (param.TAAEnabled === '1');
+            }
+            this.render();
+        });
+        this._taaPassGui.add(param, 'TAASampleLevel', {
+            'Level 0: 1 Sample': 0,
+            'Level 1: 2 Samples': 1,
+            'Level 2: 4 Samples': 2,
+            'Level 3: 8 Samples': 3,
+            'Level 4: 16 Samples': 4,
+            'Level 5: 32 Samples': 5
+        }).onFinishChange(() => {
+            if (this._taaRenderPass) {
+                this._taaRenderPass.sampleLevel = param.TAASampleLevel;
+            }
+            this.render();
+        });
+        this._taaPassGui.open();
+    }
     setSize(width, height) {
         this._composer.setSize(width, height);
     }
@@ -8233,6 +8305,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
+class SsrService {
+    constructor(_settingsService) {
+        this._settingsService = _settingsService;
+        this._enabled = false;
+        this._subs = [];
+    }
+    set enabled(value) {
+        this._enabled = value;
+        if (this._enabled) {
+            this._prepareWebsocket();
+        }
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    sceneChanged(scene) {
+        if (this._websocket.readyState === WebSocket.OPEN) {
+            const sceneClone = scene.clone(true);
+            this._websocket.send(JSON.stringify(sceneClone));
+        }
+    }
+    _prepareWebsocket() {
+        if (!this._settingsService.settings.newRenderParameters.websocket) {
+            return;
+        }
+        const webSocketConnection = this._settingsService.settings.newRenderParameters.websocket;
+        this._websocket = new WebSocket(webSocketConnection);
+        // webSocket.onopen = () => {
+        //   webSocket.send(JSON.stringify(data));
+        // };
+        this._websocket.onmessage = (event) => {
+            const result = JSON.parse(event.data);
+            if (result) {
+                console.log(result);
+            }
+        };
+    }
+}
+SsrService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SsrService, deps: [{ token: HomedecoratorSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+SsrService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SsrService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SsrService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: HomedecoratorSettingsService }]; } });
+
 var __awaiter$12 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8243,7 +8365,7 @@ var __awaiter$12 = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class SceneService {
-    constructor(_cameraService, _configurationService, _xrService, _vrService, _arService, _messageBusService, _viewModeService, _outlineService, _settingsService, _postProcessing) {
+    constructor(_cameraService, _configurationService, _xrService, _vrService, _arService, _messageBusService, _viewModeService, _outlineService, _settingsService, _postProcessing, _ssrService) {
         this._cameraService = _cameraService;
         this._configurationService = _configurationService;
         this._xrService = _xrService;
@@ -8254,6 +8376,7 @@ class SceneService {
         this._outlineService = _outlineService;
         this._settingsService = _settingsService;
         this._postProcessing = _postProcessing;
+        this._ssrService = _ssrService;
         this.onBeforeRender = new Subject();
         this.onAfterRender = new Subject();
         this.sceneInitialized = new BehaviorSubject(false);
@@ -8327,6 +8450,7 @@ class SceneService {
             if (loaded) {
                 this._initPathTracer();
                 this._maxRenderSamples = this._settingsService.settings.options.maxRenderSamples;
+                this._ssrService.enabled = this._settingsService.settings.options.ssrEnabled;
             }
         })
         // this._xrService.sessionStarted.subscribe((mode: XrMode) => {
@@ -8388,6 +8512,20 @@ class SceneService {
         });
         this.needsRender = true;
     }
+    createRenderWithOrthographicCamera() {
+        const aspect = window.innerWidth / window.innerHeight;
+        const frustumSize = 10;
+        const orthographicCamera = new OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, 100);
+        orthographicCamera.position.set(0, 3, -2);
+        orthographicCamera.lookAt(0, 0, -2);
+        orthographicCamera.name = 'orthographiccamera';
+        this.scene.add(orthographicCamera);
+        this.renderer.render(this.scene, orthographicCamera);
+        const render = this.renderer.domElement.toDataURL('image/jpeg');
+        this.scene.getObjectByName('orthographiccamera').remove();
+        this.renderer.render(this.scene, this._cameraService.camera);
+        return render;
+    }
     _initScene() {
         this.scene = new Scene();
         this._setSceneBackground();
@@ -8447,13 +8585,13 @@ class SceneService {
             //     logarithmicDepthBuffer: true*/
             //   });
             // this.renderer = new WebGLRenderer({alpha: true, antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: true});
-            this.renderer = new WebGLRenderer({
-                precision: 'highp',
-                powerPreference: 'high-performance',
-                antialias: false,
-                stencil: false,
-                depth: false
-            });
+            this.renderer = new WebGLRenderer( /*{
+              precision: 'highp',
+              powerPreference: 'high-performance',
+              antialias: true,
+              stencil: false,
+              depth: false
+            }*/);
             this.renderer.outputColorSpace = SRGBColorSpace;
             this.renderer.autoClear = false;
             this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -8517,8 +8655,8 @@ class SceneService {
                         this.renderer.render(this.scene, this._cameraService.camera);
                     }
                     else {
-                        // this._outlineService.render();
                         this._postProcessing.render();
+                        this._outlineService.render();
                     }
                     // this.renderer.render(this.scene, this._cameraService.camera);
                 }
@@ -8564,14 +8702,14 @@ class SceneService {
         return this.renderer.domElement.toDataURL('image/jpeg');
     }
 }
-SceneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SceneService, deps: [{ token: CameraService }, { token: ConfigurationService }, { token: XrService }, { token: VrService }, { token: ArService }, { token: MessageBusService }, { token: ViewModeService }, { token: OutlineService }, { token: HomedecoratorSettingsService }, { token: PostProcessingService }], target: i0.ɵɵFactoryTarget.Injectable });
+SceneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SceneService, deps: [{ token: CameraService }, { token: ConfigurationService }, { token: XrService }, { token: VrService }, { token: ArService }, { token: MessageBusService }, { token: ViewModeService }, { token: OutlineService }, { token: HomedecoratorSettingsService }, { token: PostProcessingService }, { token: SsrService }], target: i0.ɵɵFactoryTarget.Injectable });
 SceneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SceneService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SceneService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: CameraService }, { type: ConfigurationService }, { type: XrService }, { type: VrService }, { type: ArService }, { type: MessageBusService }, { type: ViewModeService }, { type: OutlineService }, { type: HomedecoratorSettingsService }, { type: PostProcessingService }]; } });
+        }], ctorParameters: function () { return [{ type: CameraService }, { type: ConfigurationService }, { type: XrService }, { type: VrService }, { type: ArService }, { type: MessageBusService }, { type: ViewModeService }, { type: OutlineService }, { type: HomedecoratorSettingsService }, { type: PostProcessingService }, { type: SsrService }]; } });
 
 var __awaiter$11 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -11938,12 +12076,16 @@ class LightPreset {
         model.standalone = modelInterface.standalone;
         model.group = modelInterface.group;
         model.navigatorType = modelInterface.navigatorType;
-        model.shadowMapType = modelInterface.shadowMapType ?
-            Array.from(shadowMapTypesMap.entries()).find((key, value) => key[1] === modelInterface.shadowMapType)[0] :
-            ShadowMapLocalType.PCFSoftShadowMap;
-        model.outputEncoding = modelInterface.outputEncoding ?
-            Array.from(outputEncodingMap.entries()).find((key, value) => key[1] === modelInterface.outputEncoding)[0] :
-            OutputEncoding.SRGBColorSpace;
+        if (Array.from(shadowMapTypesMap.entries()).find((key, value) => key[1] === modelInterface.shadowMapType)) {
+            model.shadowMapType = modelInterface.shadowMapType ?
+                Array.from(shadowMapTypesMap.entries()).find((key, value) => key[1] === modelInterface.shadowMapType)[0] :
+                ShadowMapLocalType.PCFSoftShadowMap;
+        }
+        if (Array.from(outputEncodingMap.entries()).find((key, value) => key[1] === modelInterface.outputEncoding)) {
+            model.outputEncoding = modelInterface.outputEncoding ?
+                Array.from(outputEncodingMap.entries()).find((key, value) => key[1] === modelInterface.outputEncoding)[0] :
+                OutputEncoding.SRGBColorSpace;
+        }
         model.shadowRadius = modelInterface.shadowRadius;
         model.toneMappingExposure = modelInterface.toneMappingExposure ? modelInterface.toneMappingExposure : 1;
         model.physicallyCorrectLights = modelInterface.physicallyCorrectLights ? modelInterface.physicallyCorrectLights : false;
@@ -11973,9 +12115,9 @@ class MediaResource {
 // IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT!
 /* tslint:disable */
 const VersionInfo = {
-    "application": "Homedecorator",
-    "appVersion": "252.0.1",
-    "revision": "44fb58ea"
+    application: "Homedecorator",
+    appVersion: "255.1.2",
+    revision: "111614"
 };
 /* tslint:enable */
 
@@ -12364,10 +12506,18 @@ class FloorPlaneItem extends Item {
         this.floorTexture = texture;
         if (object && object instanceof Mesh) {
             this._originalFloorMaterial = object.material;
+            this.floorMesh = object;
+            this._volume = new Box3();
+            this._volume.setFromObject(object);
             this._originalUvs = object.geometry.attributes.uv.array;
             this._originalGeometry = object.geometry;
         }
     }
+    get size() {
+        const size = new Vector3();
+        this._volume.getSize(size);
+        return size;
+    }
     set floorMaterial(mat) {
         this.children.forEach(c => {
             if (c instanceof Mesh) {
@@ -12377,6 +12527,20 @@ class FloorPlaneItem extends Item {
             }
         });
     }
+    set floorObject(object) {
+        this.children.forEach(c => c.visible = false);
+        this._restoreObjects = this.children;
+        this._configurableFloor = object;
+        this.add(object);
+    }
+    restoreFloorObject() {
+        if (!this._configurableFloor) {
+            return;
+        }
+        this.remove(this._configurableFloor);
+        this._configurableFloor.children.forEach((child) => child.dispose());
+        this._restoreObjects.forEach(c => c.visible = true);
+    }
     getTexture() {
         return this.floorTexture;
     }
@@ -12387,6 +12551,7 @@ class FloorPlaneItem extends Item {
         return false;
     }
     removed() {
+        this.restoreFloorObject();
         if (this._originalFloorMaterial) {
             this.configurable = false;
             this.metadata.ione = false;
@@ -13161,11 +13326,14 @@ class FloorService {
             else {
                 geometry = new ShapeGeometry(shape).center();
             }
+            this._sceneService.needsRender = true;
+            // floorMaterial.metalness = 0;
+            geometry.rotateX(Math.PI / 2);
             const floorMaterial = yield this._createFloorMaterial(color, texture);
             const floorMesh = new ThreeMesh(geometry, floorMaterial);
             const floorPlane = new FloorPlaneItem({ itemType: ItemType.FloorDecoration }, floorMesh);
             floorPlane.name = 'floor-plane';
-            floorPlane.rotation.set(Math.PI / 2, 0, 0);
+            // floorPlane.rotation.set(Math.PI / 2, 0, 0);
             floorPlane.receiveShadow = true;
             floorPlane.castShadow = false;
             const floorCenter = corners ? this._getFloorCenter(corners) : new Vector3(0, 0, 0);
@@ -17294,6 +17462,21 @@ class UtilsService {
         this._ktx2Loader.detectSupport(this._sceneService.renderer);
         return this._ktx2Loader;
     }
+    downloadUSDZforARIOS(object) {
+        return __awaiter$R(this, void 0, void 0, function* () {
+            const exporter = new USDZExporter();
+            const arraybuffer = yield exporter.parseAsync(object);
+            const blob = new Blob([arraybuffer], { type: 'model/vnd.usdz+zip' });
+            const url = URL.createObjectURL(blob);
+            const element = document.createElement('a');
+            element.style.display = 'none';
+            element.href = url;
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+            URL.revokeObjectURL(url);
+        });
+    }
     _download3DModelAsGLB(object) {
         const options = {
             trs: false,
@@ -20601,6 +20784,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
+var FloorPattern;
+(function (FloorPattern) {
+    FloorPattern[FloorPattern["NORMAL"] = 0] = "NORMAL";
+    FloorPattern[FloorPattern["HERRINGBONE"] = 1] = "HERRINGBONE";
+    FloorPattern[FloorPattern["HON60"] = 2] = "HON60";
+    FloorPattern[FloorPattern["HON45"] = 3] = "HON45";
+})(FloorPattern || (FloorPattern = {}));
+var FloorPatternDirection;
+(function (FloorPatternDirection) {
+    FloorPatternDirection[FloorPatternDirection["STANDING"] = 0] = "STANDING";
+    FloorPatternDirection[FloorPatternDirection["LYING"] = 1] = "LYING";
+})(FloorPatternDirection || (FloorPatternDirection = {}));
+class FloorPatternService {
+    generatePattern(floorPattern, plankSize, floorSize, direction = FloorPatternDirection.LYING) {
+        const floorRotation = direction === FloorPatternDirection.STANDING ? 90 : 0;
+        let floorWidth = floorSize.x;
+        let floorLength = floorSize.z;
+        if (direction === FloorPatternDirection.STANDING) {
+            floorWidth = floorSize.z;
+            floorLength = floorSize.x;
+        }
+        switch (floorPattern) {
+            case FloorPattern.NORMAL:
+                return this._normalPattern(plankSize, floorWidth, floorLength, floorRotation);
+            case FloorPattern.HERRINGBONE:
+                return this._herringBone(plankSize, floorWidth, floorLength, floorRotation);
+            case FloorPattern.HON45:
+                return this._hon(plankSize, floorWidth, floorLength, floorRotation, 45);
+            case FloorPattern.HON60:
+                return this._hon(plankSize, floorWidth, floorLength, floorRotation, 60);
+        }
+    }
+    _rotatePatternOnZAxis(items, floorRotation) {
+        if (floorRotation % 360 > 0) {
+            items.forEach(item => {
+                const radians = MathUtils.degToRad(floorRotation);
+                const x = item.position.x;
+                const z = item.position.z;
+                item.position.x = x * Math.cos(radians) - z * Math.sin(radians);
+                item.position.z = x * Math.sin(radians) + z * Math.cos(radians);
+            });
+        }
+    }
+    _normalPattern(plankSize, floorWidth, floorLength, floorRotation) {
+        const items = [];
+        const stepOffsetAmount = .4;
+        const plankWidth = plankSize.x;
+        const plankLength = plankSize.z;
+        const offsetSteps = plankWidth / stepOffsetAmount;
+        const rows = Math.ceil(floorLength / plankLength);
+        const columns = Math.ceil(floorWidth / plankWidth);
+        const centerOffsetX = (floorWidth / 2 * -1) + (plankWidth / 2);
+        const centerOffsetZ = (floorLength / 2 * -1) + (plankLength / 2);
+        let currentOffsetStep = 0;
+        for (let row = 0; row < rows; row++) {
+            if (currentOffsetStep > offsetSteps) {
+                currentOffsetStep = 0;
+            }
+            const plankPosZ = (plankLength * row);
+            const currentOffsetAmount = stepOffsetAmount * currentOffsetStep;
+            const planks = currentOffsetStep > 0 ? columns + 1 : columns;
+            for (let col = 0; col < planks; col++) {
+                const plankPosX = (plankWidth * col) - currentOffsetAmount;
+                items.push({
+                    position: new Vector3(plankPosX + centerOffsetX, 0, plankPosZ + centerOffsetZ),
+                    rotation: new Vector3(0, MathUtils.degToRad(floorRotation), 0),
+                    isLeft: true
+                });
+            }
+            currentOffsetStep++;
+        }
+        this._rotatePatternOnZAxis(items, floorRotation);
+        return items;
+    }
+    _herringBone(plankSize, floorWidth, floorLength, floorRotation) {
+        const items = [];
+        const herringBoneAngle = 45;
+        const sqrt2 = Math.sqrt(2);
+        const plankWidth = plankSize.x;
+        const plankLength = plankSize.z;
+        const offsetPlankPosX = plankWidth * sqrt2;
+        const offsetPlankPosZ = plankLength * sqrt2;
+        const columns = Math.ceil(floorWidth / (plankWidth * sqrt2));
+        const rows = Math.ceil(floorLength / (plankLength * sqrt2) +
+            // add extra rows so that there isn't a gap
+            offsetPlankPosX * 2);
+        const centerOffsetX = floorWidth / 2 * -1 + offsetPlankPosX / 4 - offsetPlankPosZ / 4;
+        const centerOffsetZ = floorLength / 2 * -1 - offsetPlankPosX / 4;
+        for (let column = 0; column < columns; column++) {
+            const plankPosX = offsetPlankPosX * column;
+            for (let row = 0; row < rows; row++) {
+                const plankPosZ = offsetPlankPosZ * row;
+                const plankLeft = {
+                    position: new Vector3(plankPosX + centerOffsetX, 0, plankPosZ + centerOffsetZ),
+                    rotation: new Vector3(0, MathUtils.degToRad(floorRotation + herringBoneAngle), 0),
+                    isLeft: true
+                };
+                const plankRight = {
+                    position: new Vector3(plankPosX + offsetPlankPosX / 2 + centerOffsetX, 0, plankPosZ + offsetPlankPosZ / 2 + centerOffsetZ),
+                    rotation: new Vector3(0, MathUtils.degToRad(floorRotation - herringBoneAngle), 0),
+                    isLeft: false
+                };
+                items.push(plankLeft, plankRight);
+            }
+        }
+        this._rotatePatternOnZAxis(items, floorRotation);
+        return items;
+    }
+    _hon(plankSize, floorWidth, floorLength, floorRotation, patternAngle) {
+        const items = [];
+        const patternAngleRad = MathUtils.degToRad(patternAngle);
+        const plankWidth = plankSize.x;
+        const plankLength = plankSize.z;
+        const sin = Math.sin(patternAngleRad);
+        const cos = Math.cos(patternAngleRad);
+        const overlapValue = plankLength * cos;
+        const rowExtendValue = plankWidth * cos;
+        const offsetZ = plankLength * cos * 2;
+        const offsetX = plankWidth * sin;
+        const centerOffsetX = (floorWidth - offsetX) / 2 + overlapValue;
+        const centerOffsetZ = (floorLength + rowExtendValue) / 2;
+        const columns = Math.ceil(floorWidth / ((offsetX - overlapValue) * 2));
+        const rows = Math.ceil((floorLength + rowExtendValue) / offsetZ);
+        for (let column = 0; column < columns; column++) {
+            const plankPosX = column * (offsetX - overlapValue) * 2;
+            for (let row = 0; row < rows; row++) {
+                const plankPosZ = row * offsetZ;
+                const plankLeft = {
+                    position: new Vector3(plankPosX - centerOffsetX, 0, plankPosZ - centerOffsetZ),
+                    rotation: new Vector3(0, MathUtils.degToRad((90 - patternAngle) + floorRotation), 0),
+                    isLeft: true
+                };
+                const plankRight = {
+                    position: new Vector3(plankPosX + offsetX - overlapValue - centerOffsetX, 0, plankPosZ - centerOffsetZ),
+                    rotation: new Vector3(0, MathUtils.degToRad((90 + patternAngle) + floorRotation), 0),
+                    isLeft: false
+                };
+                items.push(plankLeft, plankRight);
+            }
+        }
+        this._rotatePatternOnZAxis(items, floorRotation);
+        return items;
+    }
+}
+FloorPatternService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorPatternService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FloorPatternService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorPatternService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorPatternService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 var __awaiter$H = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -21058,6 +21394,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SceneService }]; } });
 
+class FloorTileIntersectionService {
+    constructor(_sceneService) {
+        this._sceneService = _sceneService;
+        this._debug = false;
+        this._edgeCollisionMargin = 0.05;
+    }
+    toggleDebug() {
+        this._debug = !this._debug;
+    }
+    countTiles(floorMesh, floorPattern, geometry) {
+        const result = {
+            left: 0,
+            right: 0,
+            edge: 0,
+            total: 0,
+        };
+        console.log(floorMesh.position);
+        const { floorHits, edgeHits } = this._checkIntersection2(floorMesh, floorPattern, geometry);
+        for (const floorHit of floorHits) {
+            if (floorHit.isLeft) {
+                result.left += 1;
+            }
+            else {
+                result.right += 1;
+            }
+        }
+        result.edge = edgeHits.length;
+        result.total = floorHits.length;
+        return result;
+    }
+    _checkIntersection2(floorMesh, floorPattern, geometry) {
+        // const edgeColliders = this._generateEdgeColliders(floorMesh.geometry);
+        const result = {
+            floorHits: new Array(),
+            edgeHits: new Array()
+        };
+        const bvh = new MeshBVH(geometry);
+        const positionReference = new Object3D();
+        for (const floorItem of floorPattern) {
+            const pos = floorItem.position;
+            positionReference.position.set(pos.x, pos.y, pos.z);
+            positionReference.updateMatrixWorld();
+            const floorWorldToBhv = new Matrix4()
+                .copy(positionReference.matrixWorld)
+                .invert()
+                .multiply(floorMesh.matrixWorld);
+            if (bvh.intersectsGeometry(floorMesh.geometry, floorWorldToBhv)) {
+                result.floorHits.push(floorItem);
+                // TODO: find solution for edge detection, this should work as it used the same logic as for the floor.
+                // for (const edgeCollider of edgeColliders) {
+                //   const edgeWorldToBhv = new Matrix4()
+                //     .copy(positionReference.matrixWorld)
+                //     .invert()
+                //     .multiply(edgeCollider.matrixWorld);
+                //   if (bvh.intersectsGeometry(edgeCollider.geometry, edgeWorldToBhv)) {
+                //     result.edgeHits.push(floorItem);
+                //   }
+                // }
+            }
+        }
+        return result;
+    }
+    _generateEdgeColliders(floorGeom) {
+        const edgeLinesGeom = new EdgesGeometry(floorGeom);
+        const linePositions = edgeLinesGeom.getAttribute('position').array;
+        const edges = new Array();
+        for (let i = 0; i < linePositions.length; i += 6) {
+            // store vector a and b (1 line pair), because we work in 2D we skip the y-axis which should be zero
+            const vectorA = new Vector2(linePositions[i], linePositions[i + 2]);
+            const vectorB = new Vector2(linePositions[i + 3], linePositions[i + 5]);
+            // calculate center of line
+            const position = new Vector2().lerpVectors(vectorA, vectorB, .5);
+            // calculate length
+            const length = vectorA.distanceTo(vectorB);
+            // create normalised orientation
+            const unitVector = new Vector2().subVectors(vectorB, vectorA).normalize();
+            // rotation in radians
+            const rotation = Math.atan2(unitVector.y, unitVector.x);
+            // create edge line with volume
+            const edgeGeom = new BoxGeometry(length, 0.1, this._edgeCollisionMargin);
+            const edge = new Mesh(edgeGeom);
+            // position edge
+            edge.rotation.y = rotation * -1;
+            edge.position.z = position.y;
+            edge.position.x = position.x;
+            // update bounding box value for correct collision
+            edge.updateMatrixWorld();
+            edge.geometry.computeBoundingBox();
+            edge.geometry.boundingBox.applyMatrix4(edge.matrixWorld);
+            // adds meshes to scene
+            edges.push(edge);
+        }
+        if (this._debug) {
+            const scene = this._sceneService.scene;
+            for (const edge of edges) {
+                edge.material = this._randomColMat();
+                scene.add(edge);
+            }
+        }
+        return edges;
+    }
+    _randomColMat() {
+        const color = new Color(Math.random(), Math.random(), Math.random());
+        return new MeshBasicMaterial({ color: color, wireframe: false, side: DoubleSide });
+    }
+    ngOnDestroy() {
+    }
+}
+FloorTileIntersectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorTileIntersectionService, deps: [{ token: SceneService }], target: i0.ɵɵFactoryTarget.Injectable });
+FloorTileIntersectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorTileIntersectionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FloorTileIntersectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: SceneService }]; } });
+
 var __awaiter$G = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -21070,7 +21523,7 @@ var __awaiter$G = (this && this.__awaiter) || function (thisArg, _arguments, P,
 const defaultPosition$1 = new Vector3(4, 0, 1);
 const defaultRotation$1 = new Euler(0, Math.PI, 0);
 class BuildFurnitureService {
-    constructor(_dialog, _iOne, _threedSelectorService, _collisionManager, _messageBus, _dictionaryService, _hudService, _sceneService, _cameraService, _sceneEventService, _appEventService, _presetService, _itemService, _elementService, _permanentStoreService, _googleTagManager, _settingsService, _utilsService, _variationService, _appStateService, _errorService, _itemGroupService, _variationCacheService, _resizeService, _viewModeService, _floorService) {
+    constructor(_dialog, _iOne, _threedSelectorService, _collisionManager, _messageBus, _dictionaryService, _hudService, _sceneService, _cameraService, _sceneEventService, _appEventService, _presetService, _itemService, _elementService, _permanentStoreService, _googleTagManager, _settingsService, _utilsService, _variationService, _appStateService, _errorService, _itemGroupService, _variationCacheService, _resizeService, _viewModeService, _floorService, _floorPatternService, _floorTileIntersectionService) {
         this._dialog = _dialog;
         this._iOne = _iOne;
         this._threedSelectorService = _threedSelectorService;
@@ -21097,6 +21550,8 @@ class BuildFurnitureService {
         this._resizeService = _resizeService;
         this._viewModeService = _viewModeService;
         this._floorService = _floorService;
+        this._floorPatternService = _floorPatternService;
+        this._floorTileIntersectionService = _floorTileIntersectionService;
         this.toggleSelectedElement = new Subject();
         this.configureModeChanged = new Subject();
         this.buildFinished = new Subject();
@@ -21377,6 +21832,10 @@ class BuildFurnitureService {
         const objectToExport = this._currentCustomFloorGroup ? this._currentCustomFloorGroup : this._itemService.items[0];
         this._utilsService.showExportDialog(objectToExport);
     }
+    downloadUDSZforARIOS() {
+        const objectToExport = this._currentCustomFloorGroup ? this._currentCustomFloorGroup : this._itemService.items[0];
+        this._utilsService.downloadUSDZforARIOS(objectToExport);
+    }
     downloadScene() {
         const assetPath = this._settingsService.settings.assetPath;
         // The ground plane looks odd in renders.
@@ -21444,6 +21903,7 @@ class BuildFurnitureService {
             }
             this._answerSelected.length = 0;
             this._hudService.updateSelectedItemHud();
+            this._generateLayingPattern(item);
             this.buildFinished.next(result);
             if (result.resultType === ResultType.NoSelections) {
                 result.resultType = ResultType.ConfigurationFixed;
@@ -21454,6 +21914,126 @@ class BuildFurnitureService {
             return result;
         });
     }
+    _generateLayingPattern(floor) {
+        const floorPatternInfo = this._generateFloorPatternInfo(floor);
+        floor.restoreFloorObject();
+        const meshLeft = this.full3DObjectToUse.children.find(m => m.name === floorPatternInfo.meshIdLeft);
+        this._normalizeMesh(meshLeft);
+        let meshRight = null;
+        if (floorPatternInfo.meshIdRight !== null) {
+            meshRight = this.full3DObjectToUse.children.find(m => m.name === floorPatternInfo.meshIdRight);
+            this._normalizeMesh(meshRight);
+        }
+        const floorSize = floor.size;
+        const plankSize = new Vector3();
+        meshLeft.geometry.boundingBox.getSize(plankSize);
+        const items = this._floorPatternService.generatePattern(floorPatternInfo.floorPattern, plankSize, floorSize, floorPatternInfo.floorPatternDirection);
+        const itemAmount = (meshRight === null) ? items.length : items.length / 2;
+        const material = floor.getMaterial();
+        const planksLeft = new InstancedMesh(meshLeft.geometry, material, itemAmount);
+        let planksRight;
+        if (meshRight) {
+            planksRight = new InstancedMesh(meshRight.geometry, material, itemAmount);
+        }
+        // assign transform to each item in instanced mesh
+        const dummy = new Object3D();
+        let matrixIndex = 0;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const targetPlankMesh = (item.isLeft) ? planksLeft : planksRight;
+            const position = item.position;
+            const rotation = item.rotation;
+            dummy.position.set(position.x, position.y, position.z);
+            dummy.rotation.set(rotation.x, rotation.y, rotation.z);
+            dummy.updateMatrix();
+            targetPlankMesh.setMatrixAt(matrixIndex, dummy.matrix);
+            if (planksRight) {
+                if (i !== 0 && (i % 2 !== 0)) {
+                    matrixIndex++;
+                }
+            }
+            else {
+                matrixIndex++;
+            }
+        }
+        const customFloorWrapper = new Object3D();
+        customFloorWrapper.add(planksLeft);
+        if (planksRight)
+            customFloorWrapper.add(planksRight);
+        floor.floorObject = customFloorWrapper;
+        // this._floorTileIntersectionService.toggleDebug();
+        floor.metadata.floorCountResult = this._floorTileIntersectionService.countTiles(floor.floorMesh, items, meshLeft.geometry);
+    }
+    _generateFloorPatternInfo(item) {
+        this._generateSelectedInMetadata(item);
+        const info = {
+            meshIdLeft: null,
+            meshIdRight: null,
+            floorPattern: FloorPattern.NORMAL,
+            floorPatternDirection: FloorPatternDirection.LYING
+        };
+        const selected = item.metadata.selections;
+        const afmeting = selected.find(s => s.question.toLowerCase() === 'plank afmeting');
+        let afmetingString = afmeting.answer.toLowerCase();
+        afmetingString = afmetingString.substr(afmetingString.lastIndexOf(' ') + 1);
+        const legPatroonAnswer = selected.find(s => s.question.toLowerCase() === 'leg patroon').answer.toLowerCase();
+        let legPatroonString = '';
+        switch (true) {
+            case legPatroonAnswer.indexOf('recht') !== -1:
+                legPatroonString = '90';
+                info.floorPattern = FloorPattern.NORMAL;
+                break;
+            case legPatroonAnswer.indexOf('graat') !== -1:
+                legPatroonString = '90';
+                info.floorPattern = FloorPattern.HERRINGBONE;
+                break;
+            case legPatroonAnswer.indexOf('60') !== -1:
+                legPatroonString = '60';
+                info.floorPattern = FloorPattern.HON60;
+                break;
+            case legPatroonAnswer.indexOf('45') !== -1:
+                legPatroonString = '45';
+                info.floorPattern = FloorPattern.HON45;
+                break;
+        }
+        info.meshIdLeft = `${afmetingString}_${legPatroonString}`;
+        if (info.floorPattern === FloorPattern.HON45 || info.floorPattern === FloorPattern.HON60) {
+            info.meshIdRight = `r_${afmetingString}_${legPatroonString}`;
+        }
+        if (info.floorPattern === FloorPattern.HERRINGBONE) {
+            info.meshIdRight = info.meshIdLeft;
+        }
+        const legRichtingAnswer = selected.find(s => s.question.toLowerCase() === 'leg richting').answer.toLowerCase();
+        info.floorPatternDirection = (legRichtingAnswer.indexOf('verticaal') !== -1) ? FloorPatternDirection.STANDING : FloorPatternDirection.LYING;
+        return info;
+    }
+    _generateSelectedInMetadata(item) {
+        const cloneSelections = JSON.parse(JSON.stringify(this.selections));
+        cloneSelections.forEach(s => {
+            s.imageData = undefined;
+            s.imageDataLastAnswer = undefined;
+            if (s.addables) {
+                s.addables.forEach(a => {
+                    a.imageData = undefined;
+                });
+            }
+        });
+        item.metadata.decos = Array.from(this._iOne.decoNodes);
+        item.metadata.selections = cloneSelections;
+    }
+    _normalizeMesh(mesh) {
+        const meshSize = new Vector3();
+        mesh.geometry.computeBoundingBox();
+        mesh.geometry.boundingBox.getSize(meshSize);
+        if (meshSize.z > meshSize.x) {
+            mesh.geometry.rotateY(Math.PI / 2);
+        }
+        mesh.geometry.center();
+        mesh.geometry.computeBoundingBox();
+        const center = new Vector3();
+        mesh.geometry.boundingBox.getCenter(center);
+        mesh.position.copy(center);
+    }
     _startToBuildFromConfigurator(metadata) {
         return this.startToBuild(null, metadata);
     }
@@ -22331,14 +22911,14 @@ class BuildFurnitureService {
         }
     }
 }
-BuildFurnitureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BuildFurnitureService, deps: [{ token: i1$1.MatDialog }, { token: HomedecoratorConnectorService }, { token: ThreedselectorService }, { token: CollisionManagerService }, { token: MessageBusService }, { token: HomedecoratorDictionaryService }, { token: HudService }, { token: SceneService }, { token: CameraService }, { token: SceneEventService }, { token: HomedecoratorAppEventService }, { token: PresetsService }, { token: ItemService }, { token: ElementService }, { token: PermanentStoreService }, { token: GoogleTagManagerService }, { token: HomedecoratorSettingsService }, { token: UtilsService }, { token: VariationService }, { token: AppStateService }, { token: ErrorService }, { token: ItemGroupService }, { token: VariationCacheService }, { token: ResizeService }, { token: ViewModeService }, { token: FloorService }], target: i0.ɵɵFactoryTarget.Injectable });
+BuildFurnitureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BuildFurnitureService, deps: [{ token: i1$1.MatDialog }, { token: HomedecoratorConnectorService }, { token: ThreedselectorService }, { token: CollisionManagerService }, { token: MessageBusService }, { token: HomedecoratorDictionaryService }, { token: HudService }, { token: SceneService }, { token: CameraService }, { token: SceneEventService }, { token: HomedecoratorAppEventService }, { token: PresetsService }, { token: ItemService }, { token: ElementService }, { token: PermanentStoreService }, { token: GoogleTagManagerService }, { token: HomedecoratorSettingsService }, { token: UtilsService }, { token: VariationService }, { token: AppStateService }, { token: ErrorService }, { token: ItemGroupService }, { token: VariationCacheService }, { token: ResizeService }, { token: ViewModeService }, { token: FloorService }, { token: FloorPatternService }, { token: FloorTileIntersectionService }], target: i0.ɵɵFactoryTarget.Injectable });
 BuildFurnitureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BuildFurnitureService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BuildFurnitureService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: HomedecoratorConnectorService }, { type: ThreedselectorService }, { type: CollisionManagerService }, { type: MessageBusService }, { type: HomedecoratorDictionaryService }, { type: HudService }, { type: SceneService }, { type: CameraService }, { type: SceneEventService }, { type: HomedecoratorAppEventService }, { type: PresetsService }, { type: ItemService }, { type: ElementService }, { type: PermanentStoreService }, { type: GoogleTagManagerService }, { type: HomedecoratorSettingsService }, { type: UtilsService }, { type: VariationService }, { type: AppStateService }, { type: ErrorService }, { type: ItemGroupService }, { type: VariationCacheService }, { type: ResizeService }, { type: ViewModeService }, { type: FloorService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: HomedecoratorConnectorService }, { type: ThreedselectorService }, { type: CollisionManagerService }, { type: MessageBusService }, { type: HomedecoratorDictionaryService }, { type: HudService }, { type: SceneService }, { type: CameraService }, { type: SceneEventService }, { type: HomedecoratorAppEventService }, { type: PresetsService }, { type: ItemService }, { type: ElementService }, { type: PermanentStoreService }, { type: GoogleTagManagerService }, { type: HomedecoratorSettingsService }, { type: UtilsService }, { type: VariationService }, { type: AppStateService }, { type: ErrorService }, { type: ItemGroupService }, { type: VariationCacheService }, { type: ResizeService }, { type: ViewModeService }, { type: FloorService }, { type: FloorPatternService }, { type: FloorTileIntersectionService }]; } });
 
 var __awaiter$F = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -27249,13 +27829,15 @@ class NewRenderService {
     _getNewRenderImage(force = false) {
         return __awaiter$x(this, void 0, void 0, function* () {
             if (this._settingsService.settings.blenderRenderService) {
-                this.messageService.emit(MessageType.ShowLoadingIndicator, { title: 'Rendering...' });
-                const renderInput = {
-                    'height': 800,
-                    'width': 1200,
-                    'sceneAssetId': this._settingsService.settings.productRenderSceneAssetId
-                };
-                yield this._utilsService.prepRoomForRender(true, renderInput);
+                const data = this._getDataForRender(force);
+                this._handleAjaxBlenderRender(data);
+                // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Rendering...'});
+                // const renderInput = {
+                //   'height': 800,
+                //   'width': 1200,
+                //   'sceneAssetId': this._settingsService.settings.productRenderSceneAssetId
+                // };
+                // await this._utilsService.prepRoomForRender(true, renderInput);
             }
             else {
                 const data = this._getDataForRender(force);
@@ -27268,6 +27850,25 @@ class NewRenderService {
             }
         });
     }
+    _handleAjaxBlenderRender(data) {
+        return __awaiter$x(this, void 0, void 0, function* () {
+            const result = yield axios({
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST',
+                data: JSON.stringify(data),
+                url: `${this._settingsService.settings.newRenderParameters.host}:${this._settingsService.settings.newRenderParameters.port}/getBlenderRenderFromData`,
+                responseType: 'json'
+            });
+            if (result.status === 200) {
+                // const image = `data:${result.data.fileType};base64,${result.data.image}`;
+                // this._showPreviewImage(result.data.image);
+                // console.log(image);
+                this.renderImageChanged.next(result.data.image);
+            }
+        });
+    }
     _handleAjaxRender(data) {
         return __awaiter$x(this, void 0, void 0, function* () {
             const result = yield axios({
@@ -27280,10 +27881,10 @@ class NewRenderService {
                 responseType: 'json'
             });
             if (result.status === 200) {
-                const image = `data:${result.data.fileType};base64,${result.data.image}`;
-                // this._showPreviewImage(image);
+                // const image = `data:${result.data.fileType};base64,${result.data.image}`;
+                // this._showPreviewImage(result.data.image);
                 // console.log(image);
-                this.renderImageChanged.next(image);
+                this.renderImageChanged.next(result.data.image);
             }
         });
     }
@@ -27338,21 +27939,24 @@ class NewRenderService {
             img.style.position = 'fixed';
             img.style.top = '0';
             img.style.left = '0';
-            img.style.width = '800px';
+            // img.style.width = '800px';
             img.style.height = '600px';
             img.style.zIndex = '10';
         }
         img.src = src;
     }
     _getDataForRender(force = false) {
+        this._cameraService.camera.updateMatrixWorld(true);
+        const camMatrix = Array.from(this._cameraService.camera.matrixWorld.elements);
         const options = {
             force: force,
             width: this._settingsService.settings.newRenderParameters.imageWidth,
             height: this._settingsService.settings.newRenderParameters.imageHeight,
+            sceneAssetId: this._settingsService.settings.productRenderSceneAssetId,
             max_samples: this._settingsService.settings.newRenderParameters.iterations,
             cameraOptions: {
                 fov: this._cameraService.camera.fov,
-                matrix: this.standAloneCameraMatrix
+                matrix: camMatrix
             },
             environmentOptions: {
                 hdri: this._settingsService.settings.newRenderParameters.hdri,
@@ -27980,7 +28584,7 @@ class ArGuiButtonsComponent {
     }
 }
 ArGuiButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ArGuiButtonsComponent, deps: [{ token: HomedecoratorIconCacheService }, { token: ArService }], target: i0.ɵɵFactoryTarget.Component });
-ArGuiButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ArGuiButtonsComponent, selector: "ar-gui-buttons", ngImport: i0, template: "<div class=\"buttons-container\">\r\n  <div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button mat-mini-fab class=\"button-icon back\" (click)=\"endSession()\">\r\n      <co-icon class=\"icon rotated\" [iconData]=\"iconService.getIcon(icon.TriangleDown)\"></co-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button class=\"button-icon\" mat-mini-fab (click)=\"showConfigurator()\">\r\n      <co-icon class=\"icon\" [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".buttons-container{position:absolute;display:flex;left:50%;bottom:0;transform:translate(-50%)}.button-container{padding:20px}.button-icon{text-align:-webkit-center}.back{padding-right:3px}.icon{width:65%;height:65%;fill:#fff}.rotated{transform:rotate(90deg)}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] });
+ArGuiButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ArGuiButtonsComponent, selector: "ar-gui-buttons", ngImport: i0, template: "<div class=\"buttons-container\">\r\n  <div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button mat-mini-fab class=\"button-icon back\" (click)=\"endSession()\">\r\n      <co-icon class=\"icon rotated\" [iconData]=\"iconService.getIcon(icon.Cross)\"></co-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!--div class=\"button-container\" xmlns=\"http://www.w3.org/1999/html\">\r\n    <button class=\"button-icon\" mat-mini-fab (click)=\"showConfigurator()\">\r\n      <co-icon class=\"icon\" [iconData]=\"iconService.getIcon(icon.MagicWand)\"></co-icon>\r\n    </button>\r\n  </div-->\r\n</div>\r\n", styles: [".buttons-container{position:absolute;display:flex;right:15px;top:15px}.button-container{padding:20px}.button-icon{text-align:-webkit-center}.back{padding-right:3px}.icon{width:65%;height:65%;fill:#fff}.rotated{transform:rotate(90deg)}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ArGuiButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -28492,7 +29096,7 @@ SelectionsSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
               <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
           </button>
       </header>
-      <div class="selections-content small-scrollbar">
+      <div class="selections-content small-scrollbar" *ngIf="selections && selections.length > 0">
           <ng-container *ngFor="let sel of selections; let index = index">
               <rp-selections-summary-line
                       [selection]="sel"
@@ -28531,7 +29135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
               <mat-icon class="homedecorator-material-icons" aria-hidden="true">close</mat-icon>
           </button>
       </header>
-      <div class="selections-content small-scrollbar">
+      <div class="selections-content small-scrollbar" *ngIf="selections && selections.length > 0">
           <ng-container *ngFor="let sel of selections; let index = index">
               <rp-selections-summary-line
                       [selection]="sel"
@@ -38881,7 +39485,20 @@ class ThreedselectorComponent {
                         }
                     }
                 };
+                const arIOSButton = {
+                    id: 3,
+                    elementId: 'standalone_ar_session',
+                    tooltip: 'START_AR_SESSION',
+                    order: 10,
+                    image: this._iconCacheService.getIconAsBase64(IconEnum.ArCircle),
+                    toggle: false,
+                    show: (yield this._arService.arIOSSupported()) &&
+                        this._settingsService.settings.options.showStandaloneARButton &&
+                        this._settingsService.settings.options.arEnabled,
+                    click: () => this._buildFurnitureService.downloadUDSZforARIOS()
+                };
                 this._sceneOptionsService.addSceneOptionButton(arButton);
+                this._sceneOptionsService.addSceneOptionButton(arIOSButton);
             }
         });
     }
@@ -39232,10 +39849,7 @@ class ThreedselectorComponent {
             // }
             const len = selection.decoNode ? selection.decoNode.connectors.length : 0;
             for (let i = 0; i < len; i++) {
-                let conObject = this._selectedElementObject.getObjectByName(selection.decoNode.connectors[i].connector);
-                if (!conObject && this._selectedElementObject.parent) {
-                    conObject = this._selectedElementObject.parent.getObjectByName(selection.decoNode.connectors[i].connector);
-                }
+                const conObject = this._getConnectorObject(this._selectedElementObject, selection.decoNode.connectors[i].connector);
                 if (conObject && this._canShowAddButton(selection.decoNode.connectors[i], conObject)) {
                     this.editAddButtons.push(new CustomButton('', () => {
                         this._handleAddButtonClick(selection, selection.decoNode.connectors[i], this._selectedElementObject);
@@ -39258,6 +39872,23 @@ class ThreedselectorComponent {
             });
         }
     }
+    _getConnectorObject(obj, connector) {
+        if (!obj) {
+            return null;
+        }
+        const objFound = obj.getObjectByName(connector);
+        if (objFound) {
+            return objFound;
+        }
+        else {
+            if (obj.parent) {
+                return this._getConnectorObject(obj.parent, connector);
+            }
+            else {
+                return null;
+            }
+        }
+    }
     _getOppositeConnectorParts(connector) {
         const connectorPartsArr = connector.split('_');
         connectorPartsArr.pop(); // remove number
@@ -40813,7 +41444,7 @@ var __awaiter$4 = (this && this.__awaiter) || function (thisArg, _arguments, P,
     });
 };
 class ModelPreviewComponent {
-    constructor(data, settingsService, _dialogRef, _thirdPartyModelService, _messageService, _dialog, _adapterService) {
+    constructor(data, settingsService, _dialogRef, _thirdPartyModelService, _messageService, _dialog, _adapterService, _lightPresetsService, _dictionaryService, _fontService) {
         this.data = data;
         this.settingsService = settingsService;
         this._dialogRef = _dialogRef;
@@ -40821,8 +41452,21 @@ class ModelPreviewComponent {
         this._messageService = _messageService;
         this._dialog = _dialog;
         this._adapterService = _adapterService;
+        this._lightPresetsService = _lightPresetsService;
+        this._dictionaryService = _dictionaryService;
+        this._fontService = _fontService;
         this.unitsOfMeasurement = 'cm';
         this.mathPi = Math.PI;
+        this.showReferenceModel = true;
+        this.floorSizeHeight = 10;
+        this.floorSizeWidth = 10;
+        this.gridSize = 10;
+        this.gridDivision = 10;
+        this.distanceStep = 1;
+        this.stackable = false;
+        this.heightAdjustable = false;
+        this._measurements = [];
+        this.font = this._fontService.hudFont;
     }
     ngOnInit() {
         this.initScene();
@@ -40856,44 +41500,50 @@ class ModelPreviewComponent {
         this.rendererPreview.domElement.setAttribute('id', 'threed');
         this.rendererPreview.setSize(window.innerWidth / 2, window.innerHeight / 2, true);
         // init camera
-        this.cameraPreview = new PerspectiveCamera(45, 1, 0.01, 10000);
+        this.cameraPreview = new PerspectiveCamera(45, 1, 0.01, 100000000);
         this.cameraPreview.position.set(0, 2, 10);
         this.cameraPreview.aspect = window.innerWidth / window.innerHeight;
         this.cameraPreview.updateProjectionMatrix();
         this.controls = new OrbitControls(this.cameraPreview, this.rendererPreview.domElement);
         this.controls.update();
-        const box1geo = new BoxGeometry(1, 1, 1);
-        const box1 = new Mesh(box1geo, new MeshBasicMaterial({ color: 0x0000ff }));
-        box1.position.set(3, 0.5, 3);
-        box1.castShadow = true;
-        box1.receiveShadow = true;
-        box1.name = 'Reference_model';
-        this.scenePreview.add(box1);
-        const planeGeometry = new PlaneGeometry(10, 10);
-        const planeMaterial = new MeshBasicMaterial({ color: 0xFAF9F6, side: THREE.DoubleSide });
+        this.loadFloorPlane();
+        this.loadReferenceModel();
+        this.loadLights();
+        const gridHelper = new GridHelper(this.gridSize, this.gridDivision);
+        gridHelper.name = 'GridHelper';
+        this.scenePreview.add(gridHelper);
+        this._animate();
+    }
+    loadFloorPlane() {
+        const planeGeometry = new PlaneGeometry(this.floorSizeWidth, this.floorSizeHeight);
+        const planeMaterial = new MeshBasicMaterial({ color: 0x899499, side: THREE.DoubleSide });
         const plane = new Mesh(planeGeometry, planeMaterial);
         plane.rotation.x = -Math.PI / 2;
         plane.position.y = 0;
         plane.name = 'floor_plane';
         this.scenePreview.add(plane);
-        // Add some basic lights for when models contains MeshLambertMaterial
-        const ambientLight = new AmbientLight(0x404040);
-        this.scenePreview.add(ambientLight);
-        const directionalLight = new DirectionalLight(0xffffff, 8);
-        directionalLight.position.set(0, 10, 0);
-        directionalLight.castShadow = true;
-        this.scenePreview.add(directionalLight);
-        const pointLight = new PointLight(0xffffff, 1, 100);
-        pointLight.position.set(0, 5, 5);
-        this.scenePreview.add(pointLight);
-        // basic hdri lighting
-        const hdriPath = '/assets/hdri/std_env_v2_A.hdr';
-        this.loadHDRI(hdriPath).then(() => {
-            // console.log('HDRI loaded successfully.');
-        }).catch((error) => {
-            // console.error('Error loading HDRI:', error);
-        });
-        this._animate();
+    }
+    loadLights() {
+        const listOfLightPresets = this._lightPresetsService.loadedLightPresets;
+        const lightPreset = this._lightPresetsService.activeLightPreset;
+        for (const lightProperties of lightPreset.lights) {
+            this._createLightFromProperties(lightProperties);
+        }
+    }
+    loadReferenceModel() {
+        let referenceModelPath = '';
+        const referenceModel = 'reference_pop.glb';
+        if (this.settingsService.settings.threeDAssetPath) {
+            referenceModelPath = this.settingsService.settings.threeDAssetPath + 'assets/';
+        }
+        const loader = new GLTFLoader();
+        loader.load(referenceModelPath + referenceModel, (gltf) => __awaiter$4(this, void 0, void 0, function* () {
+            gltf.scene.position.set(3, 0, 3);
+            gltf.scene.castShadow = true;
+            gltf.scene.receiveShadow = true;
+            gltf.scene.name = 'Reference_model';
+            this.scenePreview.add(gltf.scene);
+        }));
     }
     loadModel(input) {
         this.modelName = this._setModelName(input.file.file.name);
@@ -40910,6 +41560,9 @@ class ModelPreviewComponent {
         else if (fileType === '3ds') {
             this._tdsLoader(input);
         }
+        else if (fileType === 'stl') {
+            this._stlLoader(input);
+        }
     }
     loadHDRI(path) {
         return new Promise((resolve, reject) => {
@@ -40929,11 +41582,10 @@ class ModelPreviewComponent {
         // add timestamp
         const timestamp = new Date().getTime();
         const exportFileName = this._setModelName(this.glbExportName.nativeElement.value) + '_' + timestamp;
-        const elementsToRemove = ['Reference_model', 'floor_plane'];
+        const elementsToRemove = ['Reference_model', 'floor_plane', 'GridHelper', 'Ambient', 'Directional front-left', 'spot back (anti-sun)', 'boxHeight', 'boxWidth', 'boxDepth'];
         const gltfExporter = new GLTFExporter();
         let scene;
         scene = this.scenePreview.clone();
-        scene.environment.dispose();
         scene.children.forEach(c => {
             if (c instanceof Light) {
                 scene.remove(c);
@@ -40958,7 +41610,8 @@ class ModelPreviewComponent {
             else {
                 this._downloadModel(`${exportFileName}.glb`, file);
             }
-        }, () => {
+        }, (e) => {
+            console.log(e);
         }, options);
     }
     scaleArticle() {
@@ -40987,9 +41640,33 @@ class ModelPreviewComponent {
         }
         this._getBoundingBox(model);
     }
+    moveModel(axis, amount) {
+        const model = this.scenePreview.getObjectByName(this.modelName);
+        if (axis === 'x') {
+            model.position.x += amount;
+        }
+        else if (axis === 'y') {
+            model.position.y += amount;
+        }
+        else if (axis === 'z') {
+            model.position.z += amount;
+        }
+        this._getBoundingBox(model);
+    }
     setUnit(event) {
         this.unitsOfMeasurement = event.value;
     }
+    toggleShowReferenceModel() {
+        const model = this.scenePreview.getObjectByName('Reference_model');
+        model.visible = !this.showReferenceModel;
+        this.showReferenceModel = !this.showReferenceModel;
+    }
+    setStackable(event) {
+        this.stackable = event.value;
+    }
+    setHeightAdjustable(event) {
+        this.heightAdjustable = event.value;
+    }
     _animate() {
         setTimeout(() => {
             this.rendererPreview.setAnimationLoop((timestamp, frame) => this._render(timestamp, frame));
@@ -41011,21 +41688,29 @@ class ModelPreviewComponent {
     }
     _sendModelToCDN(fileName, blob) {
         return __awaiter$4(this, void 0, void 0, function* () {
-            this._blobToArrayBuffer(blob).then(file => {
-                this._adapterService.store3DModelCDN(fileName, file).then(filePath => {
-                    console.log(filePath);
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = (event) => __awaiter$4(this, void 0, void 0, function* () {
+                const fileAsString = FileUtils.StripMimeStringFromDataUri(event.target.result);
+                this._adapterService.store3DModelCDN(fileName, fileAsString).then(filePath => {
+                    if (filePath) {
+                        this._blobToArrayBuffer(blob).then(file => {
+                            const hash = fileName;
+                            const modelUrl = filePath; // Set url from the CDN
+                            const configurationData = {};
+                            const priceData = {};
+                            const metaData = this._thirdPartyModelService.setMetadata(hash, modelUrl, configurationData);
+                            metaData.canElevate = this.heightAdjustable;
+                            metaData.thirdPartyModel = true;
+                            // We also can set the metadata here and pas it as the last argument for parseModelToGLB.
+                            this._thirdPartyModelService.parseModelToGLB(file, hash, modelUrl, configurationData, priceData, metaData).then(result => {
+                                this._dialog.closeAll();
+                                this._messageService.emit(MessageType.HideProductCatalog);
+                            });
+                        });
+                    }
                 });
             });
-            // const hash: string = fileName;
-            // const modelUrl: string = ''; // Set url from the CDN
-            // const configurationData: any = {};
-            // const priceData: any = {};
-            // // const metaData: Metadata = new Metadata();
-            // // We also can set the metadata here and pas it as the last argument for parseModelToGLB.
-            //
-            // await this._thirdPartyModelService.parseModelToGLB(file, hash, modelUrl, configurationData, priceData);
-            // this._dialog.closeAll();
-            // this._messageService.emit(MessageType.HideProductCatalog);
         });
     }
     _setModelName(name) {
@@ -41035,12 +41720,7 @@ class ModelPreviewComponent {
     _glbLoader(input) {
         const loader = new GLTFLoader();
         loader.parse(input.file.fileContents, '', (object) => __awaiter$4(this, void 0, void 0, function* () {
-            object.scene.name = this.modelName;
-            object.scene.position.set(0, 0, 0);
-            object.scene.scale.set(1, 1, 1);
-            this.scenePreview.add(object.scene);
-            this.loadedModel = object.scene;
-            this._getBoundingBox(object.scene);
+            this._prepModelForScene(object.scene);
         }), error => {
             console.log('Parsing error');
         });
@@ -41048,12 +41728,7 @@ class ModelPreviewComponent {
     _fbxLoader(input) {
         const fbxLoader = new FBXLoader();
         const object = fbxLoader.parse(input.file.fileContents, '');
-        object.name = this.modelName;
-        object.position.set(0, 0, 0);
-        object.scale.set(1, 1, 1);
-        this.scenePreview.add(object);
-        this.loadedModel = object;
-        this._getBoundingBox(object);
+        this._prepModelForScene(object);
     }
     _objLoader(input) {
         const objLoader = new OBJLoader();
@@ -41062,26 +41737,105 @@ class ModelPreviewComponent {
         const decoder = new TextDecoder();
         const str = decoder.decode(buf);
         const object = objLoader.parse(str);
-        object.name = this.modelName;
-        object.position.set(0, 0, 0);
-        object.scale.set(1, 1, 1);
-        this.scenePreview.add(object);
-        this.loadedModel = object;
-        this._getBoundingBox(object);
+        this._prepModelForScene(object);
     }
     _tdsLoader(input) {
         const tdsLoader = new TDSLoader();
         const object = tdsLoader.parse(input.file.fileContents, '');
+        object.traverse(element => {
+            console.log(element);
+        });
+        this._prepModelForScene(object);
+    }
+    _stlLoader(input) {
+        const stlLoader = new STLLoader();
+        const object = stlLoader.parse(input.file.fileContents);
+        this._addFromGeometry(object);
+    }
+    _addFromGeometry(geometry) {
+        const material = new MeshPhongMaterial({ transparent: true, opacity: geometry.alpha });
+        const model = new Mesh(geometry, material);
+        this._prepModelForScene(model);
+    }
+    _prepModelForScene(object) {
         object.name = this.modelName;
         object.position.set(0, 0, 0);
         object.scale.set(1, 1, 1);
+        // Remove lights from the children
+        object.children.forEach(c => {
+            if (c instanceof Light) {
+                object.remove(c);
+            }
+        });
         this.scenePreview.add(object);
         this.loadedModel = object;
         this._getBoundingBox(object);
     }
     _getBoundingBox(object) {
-        const boundingBox = new THREE.Box3().setFromObject(object);
+        const boundingBox = new Box3().setFromObject(object);
         this.boundingBoxSize = boundingBox.getSize(new Vector3());
+        this._setMeasurements(this.boundingBoxSize);
+        this._showMeasurements();
+    }
+    _showMeasurements() {
+        const measurementsMeshes = this._measurements.map(value => value.textMesh);
+        measurementsMeshes.forEach(object => this.scenePreview.add(object));
+    }
+    _setMeasurements(boundingBox) {
+        const setHeight = this._createHeightMeasurement(boundingBox.y);
+        this._measurements.push(setHeight);
+        const setWidth = this._createWidthMeasurement(boundingBox.x);
+        this._measurements.push(setWidth);
+        const setDepth = this._createDepthMeasurement(boundingBox.z);
+        this._measurements.push(setDepth);
+    }
+    _createHeightMeasurement(heightInput) {
+        const height = new BoxMeasurement();
+        const heightString = MeasurementUtils.makeText(heightInput, this.unitsOfMeasurement, this.distanceStep);
+        const text = this._dictionaryService.get('LABEL_HEIGHT');
+        height.textMesh = makeTextMesh(heightString, this.font, 0xFF00FF, 0.08, false, false, text);
+        height.positions = this._calculateHeightPositions();
+        height.textMesh.name = 'boxHeight';
+        return height;
+    }
+    _createWidthMeasurement(widthInput) {
+        const width = new BoxMeasurement();
+        const widthString = MeasurementUtils.makeText(widthInput, this.unitsOfMeasurement, this.distanceStep);
+        const text = this._dictionaryService.get('LABEL_WIDTH');
+        width.textMesh = makeTextMesh(widthString, this.font, 0xFF00FF, 0.08, false, false, text);
+        width.positions = this._calculateWidthPositions();
+        width.textMesh.name = 'boxWidth';
+        return width;
+    }
+    _createDepthMeasurement(depthInput) {
+        const depth = new BoxMeasurement();
+        const depthString = MeasurementUtils.makeText(depthInput, this.unitsOfMeasurement, this.distanceStep);
+        const text = this._dictionaryService.get('LABEL_DEPTH');
+        depth.textMesh = makeTextMesh(depthString, this.font, 0xFF00FF, 0.08, false, false, text);
+        depth.positions = this._calculateDepthPositions();
+        depth.textMesh.name = 'boxDepth';
+        return depth;
+    }
+    _calculateHeightPositions() {
+        return positioningFactors.map(([j, k]) => {
+            return new THREE.Vector3()
+                .addScaledVector(xDirection, j / 2 * this.boundingBoxSize.x)
+                .addScaledVector(zDirection, k / 2 * this.boundingBoxSize.z);
+        });
+    }
+    _calculateWidthPositions() {
+        return positioningFactors.map(([j, k]) => {
+            return new THREE.Vector3()
+                .addScaledVector(yDirection, j / 2 * this.boundingBoxSize.y)
+                .addScaledVector(zDirection, k / 2 * this.boundingBoxSize.z);
+        });
+    }
+    _calculateDepthPositions() {
+        return positioningFactors.map(([j, k]) => {
+            return new THREE.Vector3()
+                .addScaledVector(yDirection, j / 2 * this.boundingBoxSize.y)
+                .addScaledVector(xDirection, k / 2 * this.boundingBoxSize.x);
+        });
     }
     _blobToArrayBuffer(blob) {
         return new Promise((resolve, reject) => {
@@ -41100,8 +41854,47 @@ class ModelPreviewComponent {
             reader.readAsArrayBuffer(blob);
         });
     }
+    _createLightFromProperties(lightProperties) {
+        const lightType = lightProperties.type;
+        const getLights = new LightCreateService();
+        const light = getLights.createNewLight(lightType);
+        light.userData.wallOffset = lightProperties.wallOffset;
+        light.userData.rotationOffset = lightProperties.rotationOffset;
+        light.userData.topDownDirectional = lightProperties.topDownDirectional;
+        for (const property in lightProperties) {
+            if (!light.hasOwnProperty(property)) {
+                continue;
+            }
+            if (property === 'position') {
+                light.position.y = lightProperties.position.y;
+            }
+            else if (property === 'color') {
+                light.color = new Color(lightProperties.color);
+            }
+            else if (property === 'groundColor') {
+                light.groundColor = new Color(lightProperties.groundColor);
+            }
+            else {
+                this._setObjectProperties(light, property, lightProperties[property]);
+            }
+        }
+        this.scenePreview.add(light);
+    }
+    _setObjectProperties(object, property, value) {
+        if (property === 'shadow') {
+            for (const prop in value) {
+                if (!object[property].hasOwnProperty(prop)) {
+                    continue;
+                }
+                object[property][prop] = value[prop];
+            }
+        }
+        else {
+            object[property] = value;
+        }
+    }
 }
-ModelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: i1$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+ModelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: HomedecoratorSettingsService }, { token: i1$1.MatDialogRef }, { token: ThirdPartyModelService }, { token: MessageBusService }, { token: i1$1.MatDialog }, { token: HomedecoratorConnectorAdapterService }, { token: LightPresetsService }, { token: HomedecoratorDictionaryService }, { token: FontService }], target: i0.ɵɵFactoryTarget.Component });
 ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModelPreviewComponent, selector: "rp-model-preview", viewQueries: [{ propertyName: "glbExportName", first: true, predicate: ["fileName"], descendants: true }, { propertyName: "heightArticle", first: true, predicate: ["heightArticle"], descendants: true }], ngImport: i0, template: `
     <div class="model-preview">
       <div class="model-preview-container" id="canvasContainer">
@@ -41121,6 +41914,10 @@ ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
           </div>
         </div>
 
+        <div>
+          <button (click)="toggleShowReferenceModel()">Show Reference model</button>
+        </div>
+
         <div class="rotation-button-container">
           <p>Rotation</p>
           <div class="rotation-x-buttons">
@@ -41137,6 +41934,23 @@ ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
           </div>
         </div>
 
+
+        <div class="rotation-button-container">
+          <p>Positie</p>
+          <div class="rotation-x-buttons">
+            <button (click)="moveModel('x',  0.01)">x-as + 0.01</button>
+            <button (click)="moveModel('x', -0.01)">x-as -0.01</button>
+          </div>
+          <div class="rotation-y-buttons">
+            <button (click)="moveModel('y', 0.01)">y-as + 0.01</button>
+            <button (click)="moveModel('y', -0.01)">y-as - 0.01</button>
+          </div>
+          <div class="rotation-z-buttons">
+            <button (click)="moveModel('z',  0.01)">z-as + 0.01</button>
+            <button (click)="moveModel('z', -mathPi / 2)">z-as -0.01</button>
+          </div>
+        </div>
+
         <div class="model-preview-info" *ngIf="this.data">
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
@@ -41146,14 +41960,35 @@ ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
               <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
             </div>
           </div>
+
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
-              <label>Size</label>
+              <label>Stackable</label>
             </div>
             <div class="model-preview-info-right">
-              <label>{{ this.data.file.file.size }}</label>
+              <div class="mat-radio-wrapper">
+                <mat-radio-group aria-label="Select an unit" (change)="setStackable($event)">
+                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
+                  <mat-radio-button value="true">Yes</mat-radio-button>
+                </mat-radio-group>
+              </div>
             </div>
           </div>
+
+          <div class="model-preview-info-container">
+            <div class="model-preview-info-left">
+              <label>Height adjustable</label>
+            </div>
+            <div class="model-preview-info-right">
+              <div class="mat-radio-wrapper">
+                <mat-radio-group aria-label="Select an unit" (change)="setHeightAdjustable($event)">
+                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
+                  <mat-radio-button value="true">Yes</mat-radio-button>
+                </mat-radio-group>
+              </div>
+            </div>
+          </div>
+
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
               <label>Extension</label>
@@ -41162,13 +41997,13 @@ ModelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
               <label>{{ this.data.file.fileType }}</label>
             </div>
           </div>
-          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Add to scene</button>
+          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Upload to CDN and add to scene</button>
           <p></p>
-          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download</button>
+          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download model</button>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row}.model-preview .model-preview-actions{min-width:240px;box-sizing:border-box;padding:10px 20px;border-left:1px solid #5b6875}.model-preview .model-preview-actions .model-preview-info-container{margin-bottom:10px}.model-preview .model-preview-actions .model-preview-info-container .model-preview-info-left{font-weight:bolder}.model-preview .exportButton{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#dda73f;color:#fff}input{border:1px solid #5b6875;box-sizing:border-box;padding:3px 10px;border-radius:3px}.mat-radio-wrapper{margin:10px 0}mat-radio-group mat-radio-button{display:block}.rotation-button-container div{display:flex;justify-content:space-between;margin-bottom:10px}.rotation-button-container div button{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px}.rotation-button-container div button:hover{background:#dda73f;color:#fff}\n"], components: [{ type: i6$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i6$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [".model-preview{display:flex;flex-direction:row}.model-preview .model-preview-actions{min-width:240px;box-sizing:border-box;padding:10px 20px;border-left:1px solid #5b6875}.model-preview .model-preview-actions .model-preview-info-container{margin-bottom:10px}.model-preview .model-preview-actions .model-preview-info-container .model-preview-info-left{font-weight:bolder}.model-preview .exportButton{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}.model-preview .exportButton:hover{background:#dda73f;color:#fff}input{border:1px solid #5b6875;box-sizing:border-box;padding:3px 10px;border-radius:3px}.mat-radio-wrapper{margin:10px 0}mat-radio-group mat-radio-button{display:block}.rotation-button-container div{display:flex;justify-content:space-between;margin-bottom:10px}.rotation-button-container div button{cursor:pointer;color:#fff;background:#dda73f;border:1px solid #dda73f;border-radius:3px;box-sizing:border-box;padding:5px}.rotation-button-container div button:hover{background:#dda73f;color:#fff}\n"], components: [{ type: i9$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i9$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModelPreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -41192,6 +42027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
           </div>
         </div>
 
+        <div>
+          <button (click)="toggleShowReferenceModel()">Show Reference model</button>
+        </div>
+
         <div class="rotation-button-container">
           <p>Rotation</p>
           <div class="rotation-x-buttons">
@@ -41208,6 +42047,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
           </div>
         </div>
 
+
+        <div class="rotation-button-container">
+          <p>Positie</p>
+          <div class="rotation-x-buttons">
+            <button (click)="moveModel('x',  0.01)">x-as + 0.01</button>
+            <button (click)="moveModel('x', -0.01)">x-as -0.01</button>
+          </div>
+          <div class="rotation-y-buttons">
+            <button (click)="moveModel('y', 0.01)">y-as + 0.01</button>
+            <button (click)="moveModel('y', -0.01)">y-as - 0.01</button>
+          </div>
+          <div class="rotation-z-buttons">
+            <button (click)="moveModel('z',  0.01)">z-as + 0.01</button>
+            <button (click)="moveModel('z', -mathPi / 2)">z-as -0.01</button>
+          </div>
+        </div>
+
         <div class="model-preview-info" *ngIf="this.data">
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
@@ -41217,14 +42073,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
               <input type="text" id="fileName" #fileName value="{{ this.data.file.file.name }}">
             </div>
           </div>
+
+          <div class="model-preview-info-container">
+            <div class="model-preview-info-left">
+              <label>Stackable</label>
+            </div>
+            <div class="model-preview-info-right">
+              <div class="mat-radio-wrapper">
+                <mat-radio-group aria-label="Select an unit" (change)="setStackable($event)">
+                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
+                  <mat-radio-button value="true">Yes</mat-radio-button>
+                </mat-radio-group>
+              </div>
+            </div>
+          </div>
+
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
-              <label>Size</label>
+              <label>Height adjustable</label>
             </div>
             <div class="model-preview-info-right">
-              <label>{{ this.data.file.file.size }}</label>
+              <div class="mat-radio-wrapper">
+                <mat-radio-group aria-label="Select an unit" (change)="setHeightAdjustable($event)">
+                  <mat-radio-button [checked]="true" value="false">No</mat-radio-button>
+                  <mat-radio-button value="true">Yes</mat-radio-button>
+                </mat-radio-group>
+              </div>
             </div>
           </div>
+
           <div class="model-preview-info-container">
             <div class="model-preview-info-left">
               <label>Extension</label>
@@ -41233,9 +42110,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
               <label>{{ this.data.file.fileType }}</label>
             </div>
           </div>
-          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Add to scene</button>
+          <button class="exportButton" (click)="exportSceneAsGLB('upload')">Upload to CDN and add to scene</button>
           <p></p>
-          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download</button>
+          <button class="exportButton" (click)="exportSceneAsGLB('download')">Download model</button>
         </div>
       </div>
     </div>
@@ -41245,7 +42122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: HomedecoratorSettingsService }, { type: i1$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }]; }, propDecorators: { glbExportName: [{
+                }] }, { type: HomedecoratorSettingsService }, { type: i1$1.MatDialogRef }, { type: ThirdPartyModelService }, { type: MessageBusService }, { type: i1$1.MatDialog }, { type: HomedecoratorConnectorAdapterService }, { type: LightPresetsService }, { type: HomedecoratorDictionaryService }, { type: FontService }]; }, propDecorators: { glbExportName: [{
                 type: ViewChild,
                 args: ['fileName']
             }], heightArticle: [{
@@ -41605,20 +42482,12 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
           <mat-icon class="homedecorator-material-icons" matTooltip="{{'DOWNLOAD_ROOM_AS_GLB' | localize}}">cloud_download</mat-icon>
         </button>
       </ng-container>
+      <div class="hd-toolbar-spacer"></div>
 
-      <!--      <ng-container *ngIf="settingsService.settings.options.showRoomRenderButton">-->
-      <!--        <button mat-icon-button (click)="apiRoomRender()">-->
-      <!--          <mat-icon class="homedecorator-material-icons" matTooltip="{{'RENDER_GLB' | localize}}">share_windows</mat-icon>-->
-      <!--        </button>-->
-      <!--      </ng-container>-->
-
-      <!--      <ng-container>-->
-      <!--        <button mat-icon-button (click)="testRender()">-->
-      <!--          TEST-->
-      <!--        </button>-->
-      <!--      </ng-container>-->
+<!--      <ng-container>-->
+<!--        <rp-pdf-export></rp-pdf-export>-->
+<!--      </ng-container>-->
 
-      <div class="hd-toolbar-spacer"></div>
       <mat-nav-list class="toolbar__nav" role="list">
         <div matTooltip="{{'NEW_ROOM' | localize}}">
           <mat-list-item role="listitem" (click)="newRoom()">{{ 'NEW' | localize }}</mat-list-item>
@@ -41769,20 +42638,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
           <mat-icon class="homedecorator-material-icons" matTooltip="{{'DOWNLOAD_ROOM_AS_GLB' | localize}}">cloud_download</mat-icon>
         </button>
       </ng-container>
+      <div class="hd-toolbar-spacer"></div>
 
-      <!--      <ng-container *ngIf="settingsService.settings.options.showRoomRenderButton">-->
-      <!--        <button mat-icon-button (click)="apiRoomRender()">-->
-      <!--          <mat-icon class="homedecorator-material-icons" matTooltip="{{'RENDER_GLB' | localize}}">share_windows</mat-icon>-->
-      <!--        </button>-->
-      <!--      </ng-container>-->
-
-      <!--      <ng-container>-->
-      <!--        <button mat-icon-button (click)="testRender()">-->
-      <!--          TEST-->
-      <!--        </button>-->
-      <!--      </ng-container>-->
+<!--      <ng-container>-->
+<!--        <rp-pdf-export></rp-pdf-export>-->
+<!--      </ng-container>-->
 
-      <div class="hd-toolbar-spacer"></div>
       <mat-nav-list class="toolbar__nav" role="list">
         <div matTooltip="{{'NEW_ROOM' | localize}}">
           <mat-list-item role="listitem" (click)="newRoom()">{{ 'NEW' | localize }}</mat-list-item>
@@ -42027,13 +42888,14 @@ class ModelUploaderComponent {
         this.file = null;
         this.fileMaxSize = 30; // file size in mb
         this._maxFileSize = this.fileMaxSize * 1024 * 1024; // fileMaxSize to kb
-        this._allowedFiles = ['glb', 'obj', 'fbx', '3ds', 'gltf'];
+        this._allowedFiles = ['glb', 'obj', 'fbx', '3ds', 'gltf', 'stl'];
     }
     ngOnInit() {
     }
     ngOnDestroy() {
     }
     onChange(event) {
+        this.showUploadError = false;
         const file = event.target.files[0];
         if (file) {
             this.file = file;
@@ -42261,7 +43123,8 @@ class ProductCatalogComponent {
             if (jsonString) {
                 const jsonObj = JSON.parse(jsonString);
                 if (jsonObj['hash'] !== undefined) {
-                    const customerName = 'Linteloo';
+                    const customerName = this.catalogInfo.username;
+                    // const customerName: string = 'Linteloo';
                     // three main api urls
                     const modelUrl = this.catalogInfo.externalSource.domain + '/models/' + jsonObj['hash'] + '/glb';
                     const configurationUrl = this.catalogInfo.externalSource.domain + '/configurationData/' + jsonObj['hash'];
@@ -44812,6 +45675,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class ExportPdfComponent {
+    constructor(_sceneService, _floorService, _messageBusService) {
+        this._sceneService = _sceneService;
+        this._floorService = _floorService;
+        this._messageBusService = _messageBusService;
+        this._subs = [];
+        this._diagramBackground = '';
+        this._subs.push(this._messageBusService.subscribe(MessageType.LoadScaledDiagram, (input) => this.setDiagramBackground(input)));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    getFloor() {
+        const activeFloor = this._floorService.floorToConfigure.metadata;
+        const output = [];
+        if (activeFloor) {
+            const floorCountResult = activeFloor.floorCountResult;
+            output.push(['Planken links', floorCountResult.left.toString()]);
+            output.push(['Planken rechts', floorCountResult.right.toString()]);
+            output.push(['Hoek', floorCountResult.edge.toString()]);
+            output.push(['Totaal aantal planken', floorCountResult.total.toString()]);
+            const selectedSelections = activeFloor.selections;
+            for (const selectedSelection of selectedSelections) {
+                if (selectedSelection.commercialAnswer !== undefined) {
+                    output.push([selectedSelection.commercialQuestion, selectedSelection.commercialAnswer]);
+                }
+            }
+            console.log(output);
+        }
+        return output;
+    }
+    generatePdf() {
+        // get all data
+        const sceneImage = this._createSceneScreenshot();
+        const doc = new jsPDF();
+        const dataList = this.getFloor();
+        const dataListLength = dataList.length;
+        autoTable(doc, {
+            head: [['Header', 'Value']],
+            body: dataList,
+            bodyStyles: { minCellHeight: 10 }
+        });
+        doc.addPage();
+        doc.addImage(sceneImage, 'JPEG', 0, 0, 210, 117); // size is in mm not pixels!
+        if (this._diagramBackground !== '') {
+            doc.addPage();
+            const offsetYImageTwo = 30 + 125 + (dataListLength * 10);
+            doc.addImage(this._diagramBackground, 'JPEG', 0, 0, 210, 117); // size is in mm not pixels!
+        }
+        doc.save('sample.pdf');
+    }
+    setDiagramBackground(input) {
+        this._diagramBackground = input.background.src;
+    }
+    _createSceneScreenshot() {
+        return this._sceneService.createRenderWithOrthographicCamera();
+        // return this._sceneService.getSceneCanvasImage();
+    }
+}
+ExportPdfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfComponent, deps: [{ token: SceneService }, { token: FloorService }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component });
+ExportPdfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ExportPdfComponent, selector: "rp-pdf-export", ngImport: i0, template: `
+    <div>
+      <button (click)="generatePdf()">Generate PDF</button>
+    </div>
+  `, isInline: true, styles: [":host .mat-dialog-content{margin:0;padding:0;overflow:hidden}:host .mat-nav-list{display:flex;flex-direction:column}.mat-dialog-actions{margin-bottom:0}.item-description{white-space:inherit!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rp-pdf-export',
+                    template: `
+    <div>
+      <button (click)="generatePdf()">Generate PDF</button>
+    </div>
+  `,
+                    styleUrls: ['./pdf-export.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: SceneService }, { type: FloorService }, { type: MessageBusService }]; } });
+
+class ExportPdfModule {
+}
+ExportPdfModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExportPdfModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfModule, declarations: [ExportPdfComponent], imports: [CoreModule,
+        CommonModule,
+        MatDialogModule,
+        MatListModule], exports: [ExportPdfComponent] });
+ExportPdfModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfModule, imports: [[
+            CoreModule,
+            CommonModule,
+            MatDialogModule,
+            MatListModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExportPdfModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CoreModule,
+                        CommonModule,
+                        MatDialogModule,
+                        MatListModule
+                    ],
+                    exports: [
+                        ExportPdfComponent
+                    ],
+                    declarations: [
+                        ExportPdfComponent
+                    ]
+                }]
+        }] });
+
 class ToolbarModule {
 }
 ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -44853,7 +45825,8 @@ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         IconModule,
         MatBadgeModule,
         ThreedInPhotoModule,
-        PdfViewerModule], exports: [ToolbarComponent] });
+        PdfViewerModule,
+        ExportPdfModule], exports: [ToolbarComponent] });
 ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarModule, imports: [[
             CoreModule,
             CommonModule,
@@ -44882,7 +45855,8 @@ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             IconModule,
             MatBadgeModule,
             ThreedInPhotoModule,
-            PdfViewerModule
+            PdfViewerModule,
+            ExportPdfModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
@@ -44915,7 +45889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         IconModule,
                         MatBadgeModule,
                         ThreedInPhotoModule,
-                        PdfViewerModule
+                        PdfViewerModule,
+                        ExportPdfModule
                     ],
                     entryComponents: [
                         LoadFromCloudDialogComponent,