@colijnit/homedecorator 261.20.3 → 261.20.5

package/fesm2022/colijnit-homedecorator.mjs

@@ -82,7 +82,7 @@ import { DecoNodeType } from '@colijnit/configuratorapi/build/enum/deco-node-typ
 import JSZip from 'jszip';
 import { Answer } from '@colijnit/configuratorapi/build/model/answer';
 import { SelectorStructure } from '@colijnit/configuratorapi/build/model/selector-structure.bo';
-import { Evaluator, Brush, HOLLOW_SUBTRACTION } from 'three-bvh-csg';
+import { Evaluator, Brush, SUBTRACTION } from 'three-bvh-csg';
 import { Line2 } from 'three/examples/jsm/lines/Line2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
@@ -252,6 +252,7 @@ var MessageType;
     MessageType["ChangeArticleConfigurationType"] = "ChangeArticleConfigurationType";
     MessageType["RenderUploadProgress"] = "RenderUploadProgress";
     MessageType["RenderUploadFinished"] = "RenderUploadFinished";
+    MessageType["RenderFinished"] = "RenderFinished";
     MessageType["RemoveSlowConnectionToast"] = "RemoveSlowConnectionToast";
     MessageType["OpenConfigurator"] = "OpenConfigurator";
 })(MessageType || (MessageType = {}));
@@ -3433,6 +3434,8 @@ const roomColor = '#ffecc147'; // '#f9f9f9';
 const selectedRoomColor = '#f9f9f9'; // same as roomColor for now
 const roomPolygonOffset = -0.3; // negative is offset to the inside
 const cornerTolerance = 0.2;
+// two walls count as collinear when the angle at the shared corner is within this margin of 180°
+const collinearAngleTolerance = Math.PI / 180; // ~1 degree
 const defaultWallColor = 0xffffff;
 const defaultEdgeColor = 0xcccccc;
 // wall config
@@ -4157,6 +4160,17 @@ class HomedecoratorConnectorAdapterService {
         }
         return 'nl'; // just to be safe
     }
+    async getPublicParams(url, upId) {
+        const tempSettings = new HomedecoratorSettings();
+        tempSettings.url = url;
+        tempSettings.schema = upId.toString();
+        // @ts-ignore
+        const tempMainConnector = new MainApi(tempSettings);
+        const response = await tempMainConnector.getPublicParams(upId);
+        if (response) {
+            return response;
+        }
+    }
     async store3DModelCDN(filename, fileContents) {
         try {
             const response = await this.mainApi.uploadModelToCDN(filename, fileContents);
@@ -4314,6 +4328,10 @@ class HomedecoratorConnectorAdapterService {
             }
         }
     }
+    getCatalogDefinition(id) {
+        return this._catalogDefinitions && this._catalogDefinitions.length > 0 ?
+            this._catalogDefinitions.find(c => c.id === id) : null;
+    }
     async getArticleExtended(articleNumber) {
         const requestObject = new ArticleExtendedRequest();
         requestObject.articleNumber = articleNumber;
@@ -6859,7 +6877,7 @@ class HomedecoratorConnectorService {
         });
         this.articleReceived.next(article);
         this._article = article;
-        this._articlePrice = article.price;
+        this._articlePrice = article ? article.price : null;
         // Sometimes the sku is not returned in Article
         this._article.sku = sku;
         return article;
@@ -9805,8 +9823,8 @@ class OutputSettings {
 }
 class SceneSettings {
 }
-let RenderSettings$1 = class RenderSettings {
-};
+class RenderSettings {
+}
 class Camera {
 }
 class CameraDOF {
@@ -10011,7 +10029,7 @@ class ApiServiceModule {
         };
     }
     _setRenderSettings(renderParameters) {
-        const settings = new RenderSettings$1();
+        const settings = new RenderSettings();
         settings.width = renderParameters.width;
         settings.height = renderParameters.height;
         settings.outputType = OutputType.Jpeg;
@@ -10021,7 +10039,7 @@ class ApiServiceModule {
         return settings;
     }
     _setProductRenderSettings(renderParameters) {
-        const settings = new RenderSettings$1();
+        const settings = new RenderSettings();
         settings.width = renderParameters.width;
         settings.height = renderParameters.height;
         settings.outputType = OutputType.Jpeg;
@@ -14765,7 +14783,7 @@ class BaseWall extends Mesh {
         this.remove(item);
         this.onItems = this.onItems.filter(i => i !== item);
         this.itemsChanged = true;
-        this._reCreateWallGeometry();
+        // this._reCreateWallGeometry();
     }
     resetRoom() {
         this.oppositeCache.clear();
@@ -15049,12 +15067,26 @@ class BaseWall extends Mesh {
         this.items
             .filter((item) => item.getMaskedGeometry())
             .forEach((item) => {
-            const geo = item.getMaskedGeometry();
+            // Subtract the opening as a single material group. A multi-group mask (a BoxGeometry has 6
+            // groups) makes SUBTRACTION emit triangles for only the groups that actually cut the wall,
+            // leaving empty groups that crash the evaluator (assignBufferData reads an absent group).
+            // Clone first so the item's own geometry is never mutated or disposed by the wall.
+            const geo = item.getMaskedGeometry().clone();
+            geo.clearGroups();
             const holesBrush = new Brush(geo);
+            holesBrush.material = this.material[this.frontMaterialIndex];
             holesBrush.position.copy(item.position);
             holesBrush.quaternion.copy(item.quaternion);
             holesBrush.updateMatrixWorld();
-            this.brush = this._evaluator.evaluate(this.brush, holesBrush, HOLLOW_SUBTRACTION);
+            try {
+                this.brush = this._evaluator.evaluate(this.brush, holesBrush, SUBTRACTION);
+            }
+            catch (e) {
+                // The mask produced no geometry - it doesn't intersect the wall (e.g. a transient placement
+                // position before the item is positioned on the wall). SUBTRACTION then leaves an empty
+                // material group that the evaluator chokes on. Skip this hole; the cut runs again once the
+                // item is positioned correctly (see InWallItem.placeOnWall). this.brush is left untouched.
+            }
             this._tempHoles.push(holesBrush);
         });
         const newGeometry = this.brush.geometry;
@@ -15092,6 +15124,22 @@ class Wall extends BaseWall {
         this.userData = new Object();
         const cloned = new this.constructor(new Corner(this.start.x, this.start.y), new Corner(this.end.x, this.end.y), this.height, this.thickness, this.frontColor, this.backColor, this.version, this.frontTexture, this.backTexture, false);
         Object3D.prototype.copy.call(cloned, this, recursive);
+        // Object3D.copy does not carry over geometry, so the constructor's plain box (built with an
+        // empty items list, i.e. without window/door openings) would survive. A recursive clone -
+        // such as the scene clone used for GLB export - must preserve the CSG-cut geometry. Use an
+        // owned copy so disposing the export scene cannot free the live wall's geometry. The
+        // non-recursive clone (the intersection wall) intentionally keeps its solid box for raycasting.
+        if (recursive && this.geometry) {
+            const cutGeometry = this.geometry.clone();
+            cloned.geometry = cutGeometry;
+            // The constructor built colour-only materials (createTextures = false), so the live wall's
+            // textures would be missing from the export. Copy the live materials, cloned together with
+            // their textures, so the export scene owns its own copies - disposing that scene must not
+            // free the textures still in use by the live wall.
+            ObjectUtils.DisposeMaterial(cloned.material);
+            const clonedMaterial = ObjectUtils.CloneMaterial(this.material, false);
+            cloned.material = clonedMaterial;
+        }
         cloned.userData = tempUserData;
         this.userData = tempUserData;
         return cloned;
@@ -15254,14 +15302,50 @@ class WallService {
         if (!wall || !corner) {
             return;
         }
-        this.createNewWall(corner, wall.getEnd(), wall.height, wall.thickness);
+        // Capture items + world position before the split: afterwards they must be
+        // distributed across the correct wall segment (otherwise they all stay on the
+        // shortened wall and shift along as its center moves).
+        const itemWorldPositions = [];
+        [...wall.items, ...wall.onItems].forEach((item) => {
+            if (item instanceof WallItem) {
+                const worldPosition = new Vector3();
+                item.getWorldPosition(worldPosition);
+                itemWorldPositions.push({ item, x: worldPosition.x, z: worldPosition.z });
+            }
+        });
+        const newWall = this.createNewWall(corner, wall.getEnd(), wall.height, wall.thickness);
         const prevCorner = wall.getEnd();
         wall.setEnd(corner);
+        // setEnd only swaps the corner reference; rebuild the 3D geometry of the shortened wall
+        wall.cornerMoved();
         corner.removeDuplicateWalls();
         prevCorner.removeDuplicateWalls();
+        // Re-place each item on the wall segment it falls on, at its original world position.
+        itemWorldPositions.forEach(({ item, x, z }) => {
+            const candidates = [wall, newWall].filter((w) => this.walls.indexOf(w) !== -1);
+            if (candidates.length === 0) {
+                return;
+            }
+            const target = candidates.length === 1 ? candidates[0] : this._closestWallForPoint(candidates, x, z);
+            item.moveTo2dPosition(x, z, target);
+        });
         this._updatePrevAndNextWalls();
         this._prepareOrphanWalls();
     }
+    /** Picks the wall whose closest point (clamped to the segment) is nearest to (x, z). */
+    _closestWallForPoint(walls, x, z) {
+        let best = walls[0];
+        let bestDistance = Number.POSITIVE_INFINITY;
+        walls.forEach((w) => {
+            const closest = w.closestPointTo(x, z);
+            const distance = Utils$1.Distance(x, z, closest.x, closest.y);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = w;
+            }
+        });
+        return best;
+    }
     updatePrevWall(wallId, prevWallId) {
         if (wallId && prevWallId) {
             const wall = this.walls.find(w => w.wallId === wallId);
@@ -15343,6 +15427,56 @@ class WallService {
         Utils$1.RemoveValue(this.walls, wall);
         wall.removeWall();
     }
+    /** Merges two collinear walls around a degree-2 corner into a single wall. */
+    joinCollinearWallsAt(corner) {
+        const attached = [...corner.wallStarts, ...corner.wallEnds];
+        if (attached.length !== 2) {
+            return;
+        }
+        const keep = attached[0];
+        const absorb = attached[1];
+        const farKeep = keep.getStart() === corner ? keep.getEnd() : keep.getStart();
+        const farAbsorb = absorb.getStart() === corner ? absorb.getEnd() : absorb.getStart();
+        if (farKeep === farAbsorb) {
+            return; // safety: degenerate case
+        }
+        if (!this._areCollinearThroughCorner(farKeep, corner, farAbsorb)) {
+            return; // not in line with each other -> leave as is
+        }
+        // Capture the world position of all items on BOTH walls before the structural change.
+        // Items already on 'keep' must be re-placed too: extending 'keep' shifts its center, so
+        // their (fixed) local position would otherwise map to a different world position.
+        const itemWorldPositions = [];
+        [...keep.items, ...keep.onItems, ...absorb.items, ...absorb.onItems].forEach((item) => {
+            if (item instanceof WallItem) {
+                const worldPosition = new Vector3();
+                item.getWorldPosition(worldPosition);
+                itemWorldPositions.push({ item, x: worldPosition.x, z: worldPosition.z });
+            }
+        });
+        // extend 'keep' so it spans from farKeep to farAbsorb
+        if (keep.getEnd() === corner) {
+            keep.setEnd(farAbsorb);
+        }
+        else {
+            keep.setStart(farAbsorb);
+        }
+        // setStart/setEnd only swaps the corner reference; rebuild the 3D geometry and
+        // transform for the new span (otherwise the old mesh stays in place).
+        keep.cornerMoved();
+        // Re-place each item on the merged wall at its original world position.
+        // moveTo2dPosition sets currentWall to 'keep', detaches the item from 'absorb' and
+        // bounds the position within the wall (doors/windows get their opening re-cut).
+        itemWorldPositions.forEach(({ item, x, z }) => item.moveTo2dPosition(x, z, keep));
+        this.removeWall(absorb); // also detaches from corner -> corner becomes orphan
+        this._updatePrevAndNextWalls();
+        this._prepareOrphanWalls();
+    }
+    /** True when the two walls are in line through 'corner' (angle ~180°). */
+    _areCollinearThroughCorner(a, corner, b) {
+        const angle = Utils$1.Angle(a.x - corner.x, a.y - corner.y, b.x - corner.x, b.y - corner.y);
+        return Math.abs(Math.abs(angle) - Math.PI) < collinearAngleTolerance;
+    }
     updateWallHeights(newHeight) {
         this.walls.forEach(wall => {
             wall.height = newHeight / 100;
@@ -16933,6 +17067,9 @@ class WallItem extends Item {
         else {
             DistanceUtils.UpdateSideDistances(this.distancesObject, this, this.currentWall, this.worldPosVec.clone(), this.getHalfSize(), this.worldRotation.y);
         }
+        // The arrows are built in the item's x/y plane at z ~= 0 (the item origin). For an in-wall item that
+        // origin is the wall centre, so push the whole group forward to the wall face like the labels.
+        this.distancesObject.position.z = this._measurementZOffset();
         this.add(this.distancesObject);
         return null;
     }
@@ -16974,12 +17111,20 @@ class WallItem extends Item {
         }
         return new Vector3();
     }
+    /**
+     * Local z at which measurement labels/distance arrows are drawn so they sit just in front of the wall.
+     * Surface-mounted items sit on the wall face, so a small offset suffices. In-wall items override this
+     * (they are centred inside the wall, so the offset must clear half the wall thickness).
+     */
+    _measurementZOffset() {
+        return 0.01;
+    }
     _createHeightMeasurement() {
         this.heightMesh = MeasurementUtils.makeHeightTextMesh(this.getHeight(), itemMeasurementsTextColor, itemMeasurementsTextSize, false, true);
         this.heightMesh.geometry.computeBoundingBox();
         const width = this.heightMesh.geometry.boundingBox.max.x - this.heightMesh.geometry.boundingBox.min.x;
         this.heightMesh.name = this.heightMeshName;
-        this.heightMesh.position.set(-this.halfSize.x - width, this.showDistances ? this._measurementYPositionOffset : 0, 0.01);
+        this.heightMesh.position.set(-this.halfSize.x - width, this.showDistances ? this._measurementYPositionOffset : 0, this._measurementZOffset());
         this.add(this.heightMesh);
     }
     _createWidthMeasurement() {
@@ -16987,7 +17132,7 @@ class WallItem extends Item {
         this.widthMesh.geometry.computeBoundingBox();
         const width = this.widthMesh.geometry.boundingBox.max.x - this.widthMesh.geometry.boundingBox.min.x;
         this.widthMesh.name = this.widthMeshName;
-        this.widthMesh.position.set(0 - (width / 2), this.halfSize.y, 0.01);
+        this.widthMesh.position.set(0 - (width / 2), this.halfSize.y, this._measurementZOffset());
         this.add(this.widthMesh);
     }
     _getMaskedGeometry() {
@@ -17075,10 +17220,9 @@ class WallItem extends Item {
                 // if elevation is higher than the wall, use maxY
                 // vec3.y = Math.min(this._getMaxY(wall) / 2, this.halfSize.y + this.elevation);
                 vec3.y = Math.min(maxY, this.halfSize.y + this.elevation);
-            }
-            else if (this.elevationAdjustable && this.onWall) {
-                // if the item is adjustable & is placed on the wall
-                vec3.y = Math.min(this._getMaxY(wall), this.halfSize.y + this.elevation);
+                // } else if (this.elevationAdjustable && this.onWall) { /* no idea why this is done, but it causes problems for positioning items */
+                //   // if the item is adjustable & is placed on the wall
+                //   vec3.y = Math.min(this._getMaxY(wall), this.halfSize.y + this.elevation);
             }
             else {
                 if (vec3.y < minY) {
@@ -17176,6 +17320,8 @@ class InWallItem extends WallItem {
         this._openCloseIndicatorColor = '#606E8C';
         this._frameWidth = 0.07;
         this._frameDepth = 0.1;
+        /** Extra depth added on top of the wall thickness so the dynamically built mask always pierces the wall. */
+        this._maskDepthMargin = 0.1;
         this._isWindow = false;
         this._doorpost = false;
         this._setDefault();
@@ -17199,6 +17345,25 @@ class InWallItem extends WallItem {
         ObjectUtils.DisposeMaterial(this.frameMaterial);
         ObjectUtils.DisposeMaterial(this.doorMaterialFront);
         ObjectUtils.DisposeMaterial(this.windowMaterial);
+        if (this._customMaskGeometry) {
+            this._customMaskGeometry.dispose();
+            this._customMaskGeometry = undefined;
+        }
+    }
+    /**
+     * Custom doors/windows are built at runtime and have no GLB `_mask` mesh, so the base lookup finds
+     * nothing usable. Return the dynamically generated opening mask instead. Build it lazily here so any
+     * instance (incl. clones that never ran createCustomMesh) yields a mask as soon as the wall asks for
+     * one - otherwise the wall is left solid for that item.
+     */
+    getMaskedGeometry() {
+        if (this.isCustom) {
+            if (!this._customMaskGeometry && this.getWidth() > 0 && this.getHeight() > 0) {
+                this._updateCustomMaskGeometry(this.getWidth(), this.getHeight());
+            }
+            return this._customMaskGeometry ? this._customMaskGeometry : null;
+        }
+        return super.getMaskedGeometry();
     }
     updateOpeningObject() {
         if (this.openCloseIndicatorObject) {
@@ -17250,6 +17415,10 @@ class InWallItem extends WallItem {
             this.createCustomMesh(this.getWidth(), this.getHeight());
         }
         super.placeOnWall(wall);
+        // super.placeOnWall positions the item on the wall (_boundMove) only AFTER the initial addItem cut,
+        // and _boundMove itself does not redraw. Re-cut now so the opening is subtracted at the item's final
+        // position (the addItem cut ran at a transient position where the mask may not intersect the wall).
+        this.redrawWall();
     }
     /** */
     getWallOffset() {
@@ -17329,16 +17498,22 @@ class InWallItem extends WallItem {
             return meshes;
         }
         else {
-            const visibleMeshes = [];
-            if (!this.visible) {
-                return [];
-            }
-            this.traverse(c => {
-                if (c.visible && !this.excludedMeshes.includes(c.name) && c instanceof Mesh) {
-                    visibleMeshes.push(c);
-                }
-            });
-            return visibleMeshes;
+            return super.getVisibleMeshes();
+            // const visibleMeshes: (Mesh)[] = [];
+            // if (!this.visible) {
+            //   return [];
+            // }
+            // this.traverse(c => {
+            //   if (c.visible &&
+            //     !this.excludedMeshes.includes(c.name) &&
+            //     !ObjectUtils.ChildOf(c, this.heightMeshName)  &&
+            //     !ObjectUtils.ChildOf(c, this.widthMeshName)  &&
+            //     !ObjectUtils.ChildOf(c, this.distancesObjectName)  &&
+            //     c instanceof Mesh) {
+            //     visibleMeshes.push(c);
+            //   }
+            // });
+            // return visibleMeshes;
         }
     }
     async createTextureMaterial(options) {
@@ -17381,6 +17556,8 @@ class InWallItem extends WallItem {
     createCustomMesh(width, height) {
         const halfWidth = width / 2;
         const halfFrame = (this._frameWidth / 2);
+        // Rebuild the opening mask on every (re)build so it tracks the current size of the custom item.
+        this._updateCustomMaskGeometry(width, height);
         this.leftFrame = this._createFrameSide(this._frameWidth, this._getHeightFrame(height), this._frameDepth);
         this.leftFrame.rotation.set(this._isWindow ? 180 * (Math.PI / 180) : 0, 0, 0);
         this.leftFrame.position.x = -halfWidth + halfFrame;
@@ -17414,7 +17591,9 @@ class InWallItem extends WallItem {
         }
         this.customMesh = new THREE.Mesh(customGeo, this._isWindow ? this.windowMaterial : this.doorMaterialFront);
         this.customMesh.castShadow = this._isWindow ? false : !this.isGlass;
-        this.customMesh.renderOrder = -1;
+        // Windows are transparent glass: let them render in the normal (post-opaque) transparent pass so
+        // you see through the opening. renderOrder -1 (before opaque) is kept for the opaque door panel.
+        this.customMesh.renderOrder = this._isWindow ? 0 : -1;
         this.customMesh.name = 'customMesh';
         if (this._isWindow) {
             this.customMesh.name += 'Window';
@@ -17534,17 +17713,22 @@ class InWallItem extends WallItem {
         this.frameMaterial = new THREE.MeshPhongMaterial({ side: side, name: 'frameMaterial' });
         this.frameMaterial.color = new THREE.Color(this.frameColor);
         if (this._isWindow) {
-            this.windowMaterial = new THREE.MeshPhongMaterial({ side: side, color: this.windowColor, name: 'windowMaterial' });
+            // Name must contain 'glass' so MaterialUtils.ShowHideMaterials keeps it transparent when the wall
+            // is shown - otherwise it forces transparent=false/opacity=1 and the pane looks solid.
+            this.windowMaterial = new THREE.MeshPhongMaterial({ side: side, color: this.windowColor, name: 'windowGlassMaterial' });
             this.windowMaterial.transparent = true;
             this.windowMaterial.alphaTest = 0;
             this.windowMaterial.opacity = 0.2;
             this.windowMaterial.map = undefined;
+            // Glass must not write depth, otherwise it occludes the view through the wall opening and the
+            // pane looks solid instead of see-through.
+            this.windowMaterial.depthWrite = false;
             this.windowMaterial.needsUpdate = true;
-            this.windowMaterial.side = THREE.FrontSide;
+            // this.windowMaterial.side = THREE.FrontSide;
             this.object.material = [this.frameMaterial, this.windowMaterial];
         }
         else {
-            this.doorMaterialFront = new THREE.MeshPhongMaterial({ side: side, name: 'doorMaterialFront' });
+            this.doorMaterialFront = new THREE.MeshPhongMaterial({ side: side, name: 'doorGlassMaterialFront' });
             this.doorMaterialFront.color = new THREE.Color(this.doorColor);
             if (this._doorpost) {
                 this.doorMaterialFront.transparent = true;
@@ -17553,6 +17737,22 @@ class InWallItem extends WallItem {
             this.object.material = [this.frameMaterial, this.doorMaterialFront];
         }
     }
+    /**
+     * Builds the geometry used to subtract the opening from the wall. It spans the full width/height of
+     * the custom item and is made deeper than the wall (plus a margin) so the CSG subtraction always
+     * pierces the wall completely. base-wall positions it via the item's own position/quaternion, so the
+     * box is centred on the item origin (the opening centre on the wall plane).
+     */
+    _updateCustomMaskGeometry(width, height) {
+        const wallThickness = this.currentWall ? this.currentWall.thickness : 0.5;
+        const maskDepth = wallThickness + (2 * this._maskDepthMargin);
+        if (this._customMaskGeometry) {
+            this._customMaskGeometry.dispose();
+        }
+        // The wall (base-wall) subtracts this as a single group, so the BoxGeometry's material groups are
+        // irrelevant here - we only need a box of the right opening size and a depth that pierces the wall.
+        this._customMaskGeometry = new BoxGeometry(width, height, maskDepth);
+    }
     _getHeightFrame(height) {
         return height - (this._isWindow ? 2 * (this._frameWidth - 0.02) : this._frameWidth - 0.02);
     }
@@ -17683,6 +17883,13 @@ class InWallItem extends WallItem {
             this._createDepthMeasurement();
         }
     }
+    /**
+     * In-wall items sit centred inside the wall (getWallOffset() === 0), so the labels/arrows must clear
+     * half the wall thickness to end up in front of the wall face instead of buried inside it.
+     */
+    _measurementZOffset() {
+        return (this.currentWall ? this.currentWall.thickness / 2 : 0) + 0.02;
+    }
     _createDepthMeasurement() {
         const depth = this.opening && this.opening.double ? Math.round((this.getWidth() / 2) * 100) / 100 : this.getWidth();
         this.depthMesh = MeasurementUtils.makeDepthTextMesh(depth, 0xFF00FF, 0.08, false, true);
@@ -18105,6 +18312,15 @@ class ItemService {
     }
     // todo: fix the any
     addItem(obj, addToScene = true) {
+        // Wall-only custom shapes/cylinders live exclusively on their wall (wall.onItems) and are added to
+        // the scene graph by placeOnWall() via Wall.addOnItem(). They must NOT also be tracked here: keeping
+        // them in `items` double-lists them on save (getFurniture/getNonFurniture read items + wall.onItems)
+        // and the scene.add() below would re-parent them off the wall, breaking their world position. They
+        // are disposed together with their wall and surfaced for save/selection through wall.onItems.
+        // (Detected via itemType rather than instanceof to avoid an item.service <-> wall-item-class import cycle.)
+        if (obj && obj.metadata && (isCustomShapeWallType(obj.metadata.itemType) || isCustomCylinderWallType(obj.metadata.itemType))) {
+            return;
+        }
         this.items.push(obj);
         if (addToScene) {
             this._sceneService.addObject(obj);
@@ -18138,7 +18354,7 @@ class ItemService {
     getFurniture() {
         const allItems = this.items.concat(...this.items.map(i => {
             if (i instanceof Wall) {
-                return i.items.filter(wi => !wi.configurable).concat(i.onItems.filter(woi => !woi.configurable));
+                return i.items.concat(i.onItems);
             }
         })).filter(i => i !== undefined);
         return allItems
@@ -19487,7 +19703,11 @@ class BluePrintFloorplanService extends BaseBluePrintService {
         return this.wallService.createWall(start, end, height, thickness);
     }
     removeWall(wall) {
+        const corner1 = wall.getStart();
+        const corner2 = wall.getEnd();
         this.roomService.removeWall(wall);
+        this.wallService.joinCollinearWallsAt(corner1);
+        this.wallService.joinCollinearWallsAt(corner2);
         this.cornerService.removeOrphanCorners();
         this.update();
     }
@@ -19607,6 +19827,9 @@ class BluePrintService extends BluePrintFloorplanService {
         }
         await this.loadTheFloorplan(floorplan);
     }
+    getRoomCenter() {
+        return this.roomService.getRoomCenter();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BluePrintService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BluePrintService, providedIn: 'root' }); }
 }
@@ -22899,7 +23122,25 @@ class SceneEventService {
         }
         this._switchState(SceneEventState.DND);
         this._dragAndDropService.draggedStatus.dragEnter();
-        const vec3 = z ? new Vector3(x, y, z) : this.intersectingVec3(new Vector2(x, y));
+        let screenPoint = new Vector2(x, y);
+        const useViewportCentre = !z && x === 0 && y === 0 && !!this._element;
+        if (useViewportCentre) {
+            // The object library adds items with a (0,0) sentinel (there is no real cursor). Screen (0,0) is
+            // the top-left corner, so the floor raycast lands at an arbitrary, camera-dependent spot. Use the
+            // viewport centre instead.
+            screenPoint = new Vector2(this._element.clientWidth / 2, this._element.clientHeight / 2);
+        }
+        const vec3 = z ? new Vector3(x, y, z) : this.intersectingVec3(screenPoint);
+        if (useViewportCentre && isWallType(draggedData.type)) {
+            // No cursor was used (library add), so there is no hit wall and getClosestWall() on a floor point
+            // picks an arbitrary wall. Target the wall whose front the camera is looking at instead, and seed
+            // it so the existing _changeWall() flow attaches the item to that wall. getClosestWall() itself is
+            // left untouched (project loading via presets.service relies on it).
+            const facingWall = this._wallMostFacingCamera();
+            if (facingWall) {
+                this._dragAndDropService.intersectedWall = { object: facingWall, point: vec3 ? vec3.clone() : new Vector3() };
+            }
+        }
         if (this._dragAndDropService.draggedItem) {
             this._dragAndDropService.draggedStatus.objectLoaded();
             this._dragAndDropService.updateDraggedPosition(vec3);
@@ -22911,6 +23152,35 @@ class SceneEventService {
             this._dragAndDropService.dragFloorDecoration(this._floorIntersection(this._sceneService.positionInSceneToScreen(vec3)));
         }
     }
+    /**
+     * The wall whose front face the camera is looking at most directly. Used to pick a sensible target
+     * wall when an item is added without a cursor (object library). A wall's front normal is its +Z axis
+     * in world space; the wall most facing the camera maximises frontNormal · (cameraPos - wallPos), which
+     * naturally excludes the transparent near wall (its front points away from the camera).
+     */
+    _wallMostFacingCamera() {
+        const walls = this._wallService.walls;
+        if (!walls || !walls.length) {
+            return null;
+        }
+        const cameraPosition = this._cameraService.camera.position;
+        const wallPosition = new Vector3();
+        const frontNormal = new Vector3();
+        const toCamera = new Vector3();
+        let best = null;
+        let bestDot = -Infinity;
+        for (const wall of walls) {
+            wall.getWorldPosition(wallPosition);
+            wall.getWorldDirection(frontNormal).normalize();
+            toCamera.subVectors(cameraPosition, wallPosition).normalize();
+            const dot = frontNormal.dot(toCamera);
+            if (dot > bestDot) {
+                bestDot = dot;
+                best = wall;
+            }
+        }
+        return best;
+    }
     intersectingVec3(vec2, intersection) {
         if (!intersection) {
             const gIntersections = this._groundIntersections(vec2);
@@ -22997,7 +23267,9 @@ class SceneEventService {
         let intersection = null;
         if (isWallType(draggedData.type) || (isWallFloorType(draggedData.type) && this._intersectedWall)) {
             intersection = this._intersectedWall;
-            position = this._intersectedWall.object.localToWorld(this._intersectedWall.point);
+            if (this._intersectedWall.object) {
+                position = this._intersectedWall.object.localToWorld(this._intersectedWall.point);
+            }
             // position = this._intersectedWall && this._intersectedWall.point;
         }
         else if (isFloorType(draggedData.type) || isFloorDecoration(draggedData.type) || (isWallFloorType(draggedData.type) && this._intersectedFloor)) {
@@ -28139,64 +28411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: ThreedInPhotoBuildService }, { type: ThreedInPhotoViewService }, { type: ThreedInPhotoConnectionService }, { type: ThreedInPhotoSceneService }, { type: ThreedInPhotoRenderService }, { type: i1$2.MatDialog }, { type: SceneEventService }, { type: CameraService }, { type: ViewModeService }] });
 
-var ConnectionStatus;
-(function (ConnectionStatus) {
-    ConnectionStatus[ConnectionStatus["IsUndefined"] = 0] = "IsUndefined";
-    ConnectionStatus[ConnectionStatus["IsConnected"] = 1] = "IsConnected";
-    ConnectionStatus[ConnectionStatus["TryingToConnect"] = 2] = "TryingToConnect";
-    ConnectionStatus[ConnectionStatus["IsDisConnected"] = 3] = "IsDisConnected";
-})(ConnectionStatus || (ConnectionStatus = {}));
-
-var RenderStatus;
-(function (RenderStatus) {
-    RenderStatus[RenderStatus["IsUndefined"] = 0] = "IsUndefined";
-    RenderStatus[RenderStatus["IsRunning"] = 1] = "IsRunning";
-    RenderStatus[RenderStatus["IsSuccess"] = 2] = "IsSuccess";
-    RenderStatus[RenderStatus["IsStopped"] = 3] = "IsStopped";
-    RenderStatus[RenderStatus["IsWaiting"] = 4] = "IsWaiting";
-})(RenderStatus || (RenderStatus = {}));
-
-class RenderQueueItem {
-    constructor() {
-        this.startDateTime = new Date();
-        this.rendered = false;
-        this.renderProgress = 0;
-        this.renderIterations = 0;
-        this.renderStatus = RenderStatus.IsUndefined;
-    }
-}
-
-var ToastType;
-(function (ToastType) {
-    ToastType[ToastType["Success"] = 0] = "Success";
-    ToastType[ToastType["Warning"] = 1] = "Warning";
-    ToastType[ToastType["Error"] = 2] = "Error";
-})(ToastType || (ToastType = {}));
-
-class Toast {
-    constructor() {
-        this.type = ToastType.Success;
-    }
-}
-
-class RenderData {
-    constructor() {
-        this.cameraFOV = 45;
-    }
-}
-
-class RenderSettings {
-    constructor() {
-        this.camRotationX = 0.24;
-        this.camRotationY = 0;
-        this.environmentName = '';
-        this.environmentHdr = '';
-        this.environmentRotation = 0;
-        this.environmentIntensity = null;
-        this.extraLights = [];
-    }
-}
-
 class ExportObject {
 }
 
@@ -28288,6 +28502,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorAdapterService }, { type: ThreedselectorService }] });
 
+var RenderStatus;
+(function (RenderStatus) {
+    RenderStatus[RenderStatus["IsUndefined"] = 0] = "IsUndefined";
+    RenderStatus[RenderStatus["IsRunning"] = 1] = "IsRunning";
+    RenderStatus[RenderStatus["IsSuccess"] = 2] = "IsSuccess";
+    RenderStatus[RenderStatus["IsStopped"] = 3] = "IsStopped";
+    RenderStatus[RenderStatus["IsWaiting"] = 4] = "IsWaiting";
+})(RenderStatus || (RenderStatus = {}));
+
+class RenderQueueItem {
+    constructor() {
+        this.startDateTime = new Date();
+        this.rendered = false;
+        this.renderProgress = 0;
+        this.renderIterations = 0;
+        this.renderStatus = RenderStatus.IsUndefined;
+    }
+}
+
 class ToastService {
     constructor(_dictionaryService) {
         this._dictionaryService = _dictionaryService;
@@ -28304,597 +28537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorDictionaryService }] });
 
-class RenderService {
-    static MakeWindowMaterialTransparent(material) {
-        // console.log(material);
-        material.transparent = true;
-        material.opacity = Math.min(material.opacity, 0.4);
-        return material;
-    }
-    constructor(_settingsService, _exportService, _cameraService, _sceneService, _toastService, _messageBusService, _googleTagManager, _roomService, _floorService) {
-        this._settingsService = _settingsService;
-        this._exportService = _exportService;
-        this._cameraService = _cameraService;
-        this._sceneService = _sceneService;
-        this._toastService = _toastService;
-        this._messageBusService = _messageBusService;
-        this._googleTagManager = _googleTagManager;
-        this._roomService = _roomService;
-        this._floorService = _floorService;
-        this.renderModes = RenderModes;
-        this.streaming = {};
-        this.renderedRoomImages = [];
-        this.connectionStatus = ConnectionStatus.IsUndefined;
-        this.renders = [];
-        this.cameraPositions = [];
-        this.imageSizes = [
-            { id: 1, name: ' 720p (HD)', width: 1280, height: 720 },
-            { id: 2, name: '1080P (HD)', width: 1920, height: 1080 },
-            { id: 3, name: '1440p (2K)', width: 2560, height: 1440 },
-            { id: 4, name: '2160p (4K)', width: 4096, height: 2160 }
-        ];
-        this.lightnings = [
-            { id: 1, name: 'Light', settings: [] },
-            { id: 2, name: 'Medium', settings: [] },
-            { id: 3, name: 'Heay', settings: [] }
-        ];
-        this.renderEnvironments = [
-            { id: 1, name: 'None', hdrFile: '', intensity: 1.0 },
-            { id: 2, name: 'Modern city', hdrFile: 'canary_wharf_2k.hdr', intensity: 2.5 },
-            { id: 3, name: 'City park', hdrFile: 'dresden_moat_2k.hdr', intensity: 2.5 },
-            { id: 4, name: 'Night in the city', hdrFile: 'hansaplatz_2k.hdr', intensity: 1.0 },
-            { id: 5, name: 'Night in the countryside', hdrFile: 'kloppenheim_02_2k.hdr', intensity: 1.0 },
-            { id: 6, name: 'Forest', hdrFile: 'nagoya_wall_path_2k.hdr', intensity: 1.0 },
-            { id: 7, name: 'Snow', hdrFile: 'snowy_forest_path_01_2k.hdr', intensity: 1.0 },
-            { id: 8, name: 'Pasture', hdrFile: 'spruit_sunrise_2k.hdr', intensity: 1.0 },
-            { id: 9, name: 'Field', hdrFile: 'sunflowers_2k.hdr', intensity: 1.0 },
-            { id: 10, name: 'Old city and canals', hdrFile: 'tears_of_steel_bridge_2k.hdr', intensity: 1.0 },
-            { id: 11, name: 'Estate', hdrFile: 'tiergarten_2k.hdr', intensity: 1.0 },
-            { id: 12, name: 'Beach', hdrFile: 'umhlanga_sunrise_2k.hdr', intensity: 2.5 },
-            { id: 13, name: 'Residential area with park', hdrFile: 'urban_street_01_2k.hdr', intensity: 1.0 },
-            { id: 14, name: 'Residential area', hdrFile: 'urban_street_03_2k.hdr', intensity: 1.0 },
-        ];
-        this.renderScenes = [
-            { id: 1, name: 'scene_grass_cycles_MRP', sceneAssetId: 'scene_grass_cycles_MRP' },
-            { id: 2, name: 'scene_lake_cycles_MRP', sceneAssetId: 'scene_lake_cycles_MRP' },
-            { id: 3, name: 'scene_sky_cycles_MRP', sceneAssetId: 'scene_sky_cycles_MRP' },
-            { id: 4, name: 'scene_garden_cycles_MRP', sceneAssetId: 'scene_garden_cycles_MRP' },
-            { id: 5, name: 'scene_nature_cycles_MRP', sceneAssetId: 'scene_nature_cycles_MRP' },
-            { id: 5, name: 'scene_01', sceneAssetId: 'scene_01' }
-        ];
-        this._ceilingLightMargin = 0.5;
-        this.selectedImageSize = 2;
-        this.selectedEnvironment = 1;
-        this.selectedRenderScene = this.renderScenes[0].sceneAssetId;
-        this.blendFilesRender = this._settingsService.settings.blendFilesRender;
-        this.positions = 1;
-        this.save = false;
-        this.renderRoomImageChanged = new BehaviorSubject('');
-        this.renderingStarted = new Subject();
-        this.renderImageChanged = new BehaviorSubject('');
-        this.renderQueue = [];
-        this.currentQueueRenderItem = new RenderQueueItem();
-        this.currentProductHash = '';
-        this._subs = [];
-        this.sceneData = {};
-        this._subs.push(this._settingsService.settingsLoaded.subscribe((loaded) => {
-            if (loaded) {
-                this.serverData = this._settingsService.settings.renderParameters;
-                if (this.serverData) {
-                    this.serverData.setup = false;
-                    this.checkConnection();
-                    this._renderServiceHeartBeat();
-                }
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-    }
-    async checkConnection() {
-        //
-        // if (this.service.validate() === false) {
-        //
-        //   try {
-        //
-        //     const url = `${(this.serverData.secure ? 'wss' : 'ws')}://${this.serverData.host}:${this.serverData.port}/service/`;
-        //     await this.service.connect(url).then(() => {
-        //       this.serverData.setup = true;
-        //     }).catch((rej) => {
-        //     });
-        //
-        //     this.service.on('error', async (object) => {
-        //       this.serverData.setup = false;
-        //       if (this.connectionStatus !== ConnectionStatus.TryingToConnect) {
-        //         this.connectionStatus = ConnectionStatus.IsDisConnected;
-        //       }
-        //       await this._onRenderError();
-        //     });
-        //     this.service.on('close', async (object) => {
-        //       this.serverData.setup = false;
-        //       if (this.connectionStatus !== ConnectionStatus.TryingToConnect) {
-        //         this.connectionStatus = ConnectionStatus.IsDisConnected;
-        //       }
-        //       await this._onRenderClose();
-        //     });
-        //
-        //   } catch (err) {
-        //
-        //     this.serverData.setup = false;
-        //   }
-        // }
-    }
-    _renderServiceHeartBeat() {
-        setInterval(() => {
-            if (this.connectionStatus === ConnectionStatus.IsDisConnected) {
-                if (this._settingsService.settings.options.showRenderConnectionInfo) {
-                    const toast = new Toast();
-                    toast.message = 'CONNECTION_WITH_RENDER_SERVICE_LOST';
-                    toast.type = ToastType.Error;
-                    this._toastService.showToast(toast);
-                }
-                this.connectionStatus = ConnectionStatus.TryingToConnect;
-                this.checkConnection();
-            }
-            else if (this.connectionStatus === ConnectionStatus.TryingToConnect) {
-                if (this.serverData.setup === false) {
-                    this._messageBusService.emit(MessageType.RenderServiceTryToConnect);
-                    this.checkConnection();
-                }
-                else {
-                    if (this._settingsService.settings.options.showRenderConnectionInfo) {
-                        const toast = new Toast();
-                        toast.message = 'RE_CONNECTED_WITH_RENDER_SERVICE';
-                        toast.type = ToastType.Success;
-                        this._toastService.showToast(toast);
-                    }
-                    this.connectionStatus = ConnectionStatus.IsConnected;
-                }
-            }
-            else if (this.connectionStatus === ConnectionStatus.IsConnected) {
-                this._messageBusService.emit(MessageType.RenderServiceConnected);
-            }
-        }, 2000);
-    }
-    getRenderParameters(type) {
-        const params = new RenderData();
-        if (type !== RenderModes.RenderIone) {
-            const currentImageSize = this.getImageSizeOnId(this.selectedImageSize);
-            params.imageWidth = Number(currentImageSize.width);
-            params.imageHeight = Number(currentImageSize.height);
-        }
-        params.configuredItem = this._getConfiguredFurnitureItem();
-        params.cameraFOV = this._cameraService.camera.fov;
-        params.type = type;
-        if (type === this.renderModes.RenderShop) {
-            params.cameraFOV = 30;
-            if (this._settingsService.settings.renderParameters.settings !== undefined) {
-                params.settings = this._settingsService.settings.renderParameters.settings;
-            }
-        }
-        else if (type === this.renderModes.RenderRoom) {
-            const renderEnvironment = this.getRenderEnvironmentOnId(this.selectedEnvironment);
-            params.settings = new RenderSettings();
-            params.settings.environmentHdr = renderEnvironment.hdrFile;
-            params.settings.environmentIntensity = renderEnvironment.intensity;
-            const floorPlanHasRooms = this._roomService.rooms[0];
-            const ceilingOrFloor = floorPlanHasRooms ? this._roomService.rooms[0].ceilingPlane : this._floorService.getFloorPlane();
-            const bb = new Box3().setFromObject(ceilingOrFloor);
-            const bbSize = new Vector3();
-            bb.getSize(bbSize);
-            params.settings.extraLights = [
-                {
-                    x1: bb.min.x + this._ceilingLightMargin,
-                    z1: bb.min.z + this._ceilingLightMargin,
-                    x2: bb.max.x - this._ceilingLightMargin,
-                    z2: bb.max.z - this._ceilingLightMargin,
-                    height: floorPlanHasRooms ? ceilingOrFloor.position.y : 2.6,
-                }
-            ];
-        }
-        return params;
-    }
-    // The GLTFExporter needs lights to be configured like this,
-    // otherwise they will all point in the same direction.
-    _fixLight(element) {
-        element.target.parent = element;
-        element.lookAt(element.target.position);
-        element.target.position.x = 0;
-        element.target.position.y = 0;
-        element.target.position.z = -1;
-    }
-    _elementMustBeRemoved(element) {
-        if (element.type === 'PerspectiveCamera') {
-            return true;
-        }
-        if (!element.name) {
-            return false;
-        }
-        const lcName = element.name.toLowerCase();
-        // elements with a name starting with c_ are connectors,
-        // which should not be visible.
-        if (lcName.startsWith('c_')) {
-            return true;
-        }
-        if (element.name.startsWith('snapping-preview-mesh')) {
-            return true;
-        }
-        return false;
-    }
-    async _exportToGlb() {
-        const assetPath = this._settingsService.settings.assetPath;
-        // The ground plane looks odd in renders.
-        // The hud-ring and hud-circle are the walkthrough mode marker,
-        // which is not supposed to be rendered.
-        const elementsToRemove = ['ground-plane', 'hud-ring', 'hud-circle'];
-        let scene;
-        try {
-            scene = this._sceneService.scene.clone();
-            elementsToRemove.forEach(elementName => {
-                const selectedObject = scene.getObjectByName(elementName);
-                scene.remove(selectedObject);
-            });
-            // Using the parents, because scene.remove does not seem to work correctly.
-            const parents = [];
-            scene.traverse(element => {
-                if (element instanceof DirectionalLight || element instanceof SpotLight) {
-                    this._fixLight(element);
-                }
-                if (element.visible === false) {
-                    // console.log("Element " + element.name + " was invisible, making it visible.");
-                    element.visible = true;
-                }
-                if (element instanceof Mesh && element.name && element.name.startsWith('customMeshWindow')) {
-                    let hasCustomTexture = false;
-                    if (element.material instanceof Material$1) {
-                        if (element.material instanceof MeshPhongMaterial && element.material.map) {
-                            hasCustomTexture = true;
-                        }
-                        element.material = RenderService.MakeWindowMaterialTransparent(element.material);
-                    }
-                    else if (Array.isArray(element.material)) {
-                        element.material.forEach(function (material, index) {
-                            if (material instanceof MeshPhongMaterial && material.map) {
-                                hasCustomTexture = true;
-                            }
-                            element.material[index] = RenderService.MakeWindowMaterialTransparent(material);
-                        });
-                    }
-                    if (!hasCustomTexture) {
-                        element.name = 'glass';
-                    }
-                }
-                if (this._elementMustBeRemoved(element)) {
-                    parents.push(element.parent);
-                }
-            });
-            parents.forEach(parent => {
-                for (let i = parent.children.length - 1; i >= 0; i--) {
-                    if (this._elementMustBeRemoved(parent.children[i])) {
-                        parent.remove(parent.children[i]);
-                    }
-                }
-            });
-            scene.add(this._cameraService.camera.clone());
-            const options = {
-                trs: false,
-                onlyVisible: false,
-                truncateDrawRange: true,
-                binary: true,
-                forceIndices: false,
-                forcePowerOfTwoTextures: false,
-                // maxTextureSize: 500,
-                embedImages: true,
-            };
-            const exporter = new GLTFExporter();
-            let filename = '';
-            return new Promise((resolve, reject) => {
-                exporter.parse(scene, async (exportedScene) => {
-                    const blob = new Blob([exportedScene], { type: 'application/octet-stream' });
-                    const result = await FileUtils.SaveGLBFile(blob, assetPath);
-                    if (result !== false) {
-                        filename = result.path;
-                    }
-                    resolve(filename);
-                }, () => {
-                }, options);
-            });
-        }
-        catch (e) {
-            throw (e);
-        }
-    }
-    async startRendering() {
-        if (this.renderQueue.length > 0) {
-            await this.checkConnection();
-            if (this.renderQueue[0].renderProgress === 0 || this.renderQueue[0].renderProgress === undefined) {
-                this.renderQueue[0].renderStatus = RenderStatus.IsRunning;
-                this.currentQueueRenderItem = this.renderQueue[0];
-                this.renderQueue.shift();
-                this.currentQueueRenderItem.params.glbPath = await this._exportToGlb()
-                    .catch((e) => {
-                    return Promise.reject(e);
-                });
-                await this._startRenderLoop();
-            }
-        }
-    }
-    async _colijnRenderScene(params) {
-        return new Promise((resolve, reject) => {
-            const requestParams = [{
-                    id: 1,
-                    jsonrpc: '2.0',
-                    method: 'colijn_render_scene_from_glb',
-                    params: params
-                }];
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', this._getRenderServiceUrl());
-            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-            xhr.onload = () => {
-                if (xhr.status >= 200 && xhr.status < 300) {
-                    resolve(JSON.parse(xhr.responseText));
-                }
-                else {
-                    reject(xhr.statusText);
-                }
-            };
-            xhr.onerror = () => reject(xhr.statusText);
-            xhr.send(JSON.stringify(requestParams));
-        });
-    }
-    async _startRenderLoop() {
-        // temporary solution because large request over websockets are not working because of an error in the software of migenius
-        let [info] = await this._colijnRenderScene(this.currentQueueRenderItem.params);
-        info = info.result;
-        /*
-        const [ info ] = await this.service.queue_commands()
-          .queue(new Command('colijn_render_scene', this.currentQueueRenderItem.params), true)
-          .execute();
-        */
-        this.currentQueueRenderItem.host = this._settingsService.settings.url;
-        this.currentQueueRenderItem.key = info.scene_name;
-        this.currentQueueRenderItem.type = this.currentQueueRenderItem.params.type;
-        this.currentQueueRenderItem.startDateTime = new Date();
-        this.currentQueueRenderItem.imageSize = this.currentQueueRenderItem.params.imageWidth + ' x ' + this.currentQueueRenderItem.params.imageHeight;
-        this._setRenderProgress(RenderStatus.IsRunning, 0, 0);
-        this.sceneData = info;
-        if (!this.sceneData || this.sceneData.error) {
-            return;
-        }
-        if (this.sceneData.image_info && this.sceneData.image_info.needs_render === true) {
-            this.currentQueueRenderItem.rendered = true;
-            await this._startRenderStream();
-        }
-        else {
-            this._afterRendering();
-        }
-    }
-    async _quitRenderLoop() {
-        // if (this.sceneData.loop_name !== undefined && this.service.validate() !== false) {
-        //   const [] = await this.service.queue_commands()
-        //     .queue(new Command('render_loop_quit', {
-        //       render_loop_name: this.sceneData.loop_name
-        //     }))
-        //     .execute();
-        //   this.service.remove_stream(this.sceneData.loop_name);
-        // }
-    }
-    async _startRenderStream() {
-        //
-        // try {
-        //
-        //   this.streaming.stream = this.service.create_stream();
-        //   await this.streaming.stream.start({render_loop_name: this.sceneData.loop_name, image_format: 'jpg', quality: '100'});
-        //
-        //   this.streaming.stream.on('image', async (object) => {
-        //     this._htmlImageDisplay(object, null);
-        //     const [progress] = await this.service.queue_commands()
-        //       .queue(new Command('render_loop_get_render_progress', {
-        //         render_loop_name: this.sceneData.loop_name
-        //       }), true)
-        //       .execute();
-        //
-        //     if (progress.progression !== undefined) {
-        //       this._setRenderProgress(RenderStatus.IsRunning, Math.ceil((progress.progression * 100)), progress.iteration);
-        //     }
-        //
-        //     if (object.result === 1) {
-        //
-        //       await this.service.queue_commands()
-        //         .queue(new Command('render_loop_save_to_disk', {
-        //           render_loop_name: this.sceneData.loop_name,
-        //           format: 'jpg',
-        //           quality: 90,
-        //           path: this.sceneData.image_info.url
-        //         }), true)
-        //         .execute();
-        //
-        //       if (this.streaming.stream !== undefined) {
-        //         this.streaming.stream.stop();
-        //       }
-        //       await this._quitRenderLoop();
-        //       this._afterRendering();
-        //       return;
-        //
-        //     } else if (object.result < 0) {
-        //
-        //       await this._onRenderError();
-        //       return;
-        //     }
-        //   });
-        //
-        // } catch (err) {
-        //
-        //   await this._onRenderError();
-        //   return;
-        // }
-    }
-    _setRenderProgress(status, progress, iterations) {
-        if (!this.serverData) {
-            return;
-        }
-        this.currentQueueRenderItem.endDateTime = new Date();
-        this.currentQueueRenderItem.renderStatus = status;
-        this.currentQueueRenderItem.renderProgress = progress;
-        if (iterations > 0) {
-            this.currentQueueRenderItem.renderIterations = iterations;
-        }
-        if (this.serverData.renderMode === RenderModes.RenderIone) {
-            const render = this.getRenderOnId(this.currentQueueRenderItem.params.render.id);
-            render.status = status;
-            render.progress = progress;
-        }
-    }
-    async _onRenderError() {
-        this._setRenderProgress(RenderStatus.IsStopped, 0, 0);
-        await this._quitRenderLoop();
-    }
-    async _onRenderClose() {
-        this._setRenderProgress(RenderStatus.IsStopped, 0, 0);
-    }
-    _afterRendering() {
-        if (!this.serverData) {
-            return;
-        }
-        this._setRenderProgress(RenderStatus.IsSuccess, 100, 0);
-        const imageUrl = this._settingsService.settings.assetPath.replace('content43/', '') + this.sceneData.image_info.url;
-        if (this.serverData.renderMode === RenderModes.RenderRoom) {
-            this.renderedRoomImages.unshift(imageUrl);
-        }
-        this.renderImageChanged.next(imageUrl);
-        if (this.serverData.renderMode === RenderModes.RenderIone) {
-            const render = this.getRenderOnId(this.currentQueueRenderItem.params.render.id);
-            render.url = imageUrl;
-        }
-        const configuredItem = this.currentQueueRenderItem.params.configuredItem;
-        const isSingleItem = this.serverData.renderMode !== RenderModes.RenderRoom;
-        this._googleTagManager.sendEvent(GoogleTagManagerEvent.Render, {
-            'articleNr': isSingleItem ? configuredItem.sku : 'renderRoom',
-            'product': isSingleItem ? configuredItem.name : 'renderRoom',
-            'dimensions': this.currentQueueRenderItem.imageSize
-        });
-        this.startRendering();
-    }
-    _getRenderServiceUrl() {
-        return `${(this.serverData.secure ? 'https' : 'http')}://${this.serverData.host}:${this.serverData.port}`;
-    }
-    forceRenderImage() {
-        const floorGroup = this._getFirstCustomFloorItemFromScene();
-        if (floorGroup !== null) {
-            this._checkVisibleUpdates(floorGroup, true);
-        }
-    }
-    async _checkVisibleUpdates(furniture, forceRender = false) {
-        if (!this.serverData) {
-            return;
-        }
-        if (!furniture) {
-            return;
-        }
-        if (this.serverData.renderMode === this.renderModes.RenderIone) {
-            const object = this._exportService.getExportObjectFromCustomFloorGroup(furniture);
-            this.currentProductHash = object.defaultRenderPath;
-        }
-        else if (this.serverData.renderMode === this.renderModes.RenderShop) {
-            const object = this._exportService.getExportObjectFromCustomFloorGroup(furniture);
-            if (!(JSON.stringify(this.prevItem) !== JSON.stringify(object) || forceRender)) {
-                return;
-            }
-            this.renderingStarted.next();
-            this.prevItem = object;
-            const queueItem = new RenderQueueItem();
-            queueItem.params = this.getRenderParameters(this.renderModes.RenderShop);
-            queueItem.params.cameraMatrix = this._cameraService.camera.matrixWorldInverse.elements;
-            queueItem.params.forceRender = forceRender;
-            this.renderQueue = [];
-            this.renderQueue.push(queueItem);
-            await this.startRendering();
-        }
-    }
-    _htmlImageDisplay(image, urlCreator) {
-        try {
-            urlCreator = urlCreator || (window ? (window.URL || window.webkitURL) : undefined);
-        }
-        catch (e) {
-        }
-        const blob = new Blob([image.image], { type: image.mime_type });
-        const url = urlCreator.createObjectURL(blob);
-        this.renderRoomImageChanged.next(url);
-    }
-    getRenderOnId(id) {
-        let returnRender = null;
-        this.renders.forEach((x) => {
-            if (x.id === id) {
-                returnRender = x;
-            }
-        });
-        return returnRender;
-    }
-    getImageSizeOnId(id) {
-        let returnSize = null;
-        this.imageSizes.forEach((x) => {
-            if (x.id === id) {
-                returnSize = x;
-            }
-        });
-        return returnSize;
-    }
-    getRenderEnvironmentOnId(id) {
-        let returnEnvironment = null;
-        this.renderEnvironments.forEach((renderEnvironment) => {
-            if (renderEnvironment.id === id) {
-                returnEnvironment = renderEnvironment;
-                return;
-            }
-        });
-        return returnEnvironment;
-    }
-    getLightningOnId(id) {
-        let returnLightning = null;
-        this.lightnings.forEach((x) => {
-            if (x.id === id) {
-                returnLightning = x;
-            }
-        });
-        return returnLightning;
-    }
-    /******************************************** Export functions ********************************************/
-    _getFirstCustomFloorItemFromScene() {
-        const children = this._sceneService.scene.children;
-        if (children.length <= 0) {
-            return null;
-        }
-        for (let a = 0; a < children.length; a++) {
-            if (children[a] instanceof CustomFloorItem) {
-                return children[a];
-            }
-            if (children[a] instanceof ItemGroup) {
-                const itemGroup = children[a];
-                if (itemGroup.items.length > 0) {
-                    itemGroup.items.forEach((item) => {
-                        if (item instanceof CustomFloorItem) {
-                            return item;
-                        }
-                    });
-                }
-            }
-        }
-        return null;
-    }
-    _getConfiguredFurnitureItem() {
-        const floorgroup = this._getFirstCustomFloorItemFromScene();
-        if (floorgroup === null) {
-            return null;
-        }
-        return this._exportService.getExportObjectFromCustomFloorGroup(floorgroup);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, deps: [{ token: HomedecoratorSettingsService }, { token: ExportService }, { token: CameraService }, { token: SceneService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: ExportService }, { type: CameraService }, { type: SceneService }, { type: ToastService }, { type: MessageBusService }, { type: GoogleTagManagerService }, { type: RoomService }, { type: FloorService }] });
-
 class LoadFurnitureWithoutSceneService extends LoadFurnitureBaseService {
     loadFurniture(furnitureData, shouldCopyInstance, looseOriginalConfiguration, standAlone, fromScratch, fromPreset, loadFromProject) {
         throw new Error('Method not implemented.');
@@ -28937,7 +28579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: LoadFurnitureService }, { type: LoadFurnitureWithoutSceneService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorService }] });
 
-class NewRenderService {
+class RenderService {
     constructor(messageService, _settingsService, _buildFurnitureService, _cameraService, _sceneService, _ione, _ioneConnectorAdapter, _threedSelectorService, _toastService, _messageBusService, _googleTagManager, _roomService, _floorService, _wallService, _ceilingService, _loadFurnitureService, _utilsService, _presetService, _apiServiceModule, _appEventService, _dictionaryService) {
         this.messageService = messageService;
         this._settingsService = _settingsService;
@@ -28961,15 +28603,20 @@ class NewRenderService {
         this._appEventService = _appEventService;
         this._dictionaryService = _dictionaryService;
         this.renderImageChanged = new BehaviorSubject('');
-        this.renderImageError = new BehaviorSubject('');
+        this.renderImageError = new Subject();
         this.blenderRenderStarted = new Subject();
         this.renderUpdateImageChanged = new BehaviorSubject(undefined);
         this.renderRoomImageChanged = new BehaviorSubject('');
         this.currentQueueRenderItem = new RenderQueueItem();
         this.renderedRoomImages = [];
+        this.blendFilesRender = false;
         this._overWriteTransparency = false;
         this._subs = [];
-        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderFileReady, (file) => this.procesRenderFile(file)));
+        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderFileReady, (file) => this.procesRenderFile(file)), this._settingsService.settingsLoaded.subscribe((loaded) => {
+            if (loaded) {
+                this.blendFilesRender = this._settingsService.settings.blendFilesRender;
+            }
+        }));
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
@@ -28994,7 +28641,14 @@ class NewRenderService {
         }
     }
     async renderRoom(settings, preview = false) {
-        const sceneData = await this._exportToGlb();
+        let sceneData;
+        try {
+            sceneData = await this._exportToGlb();
+        }
+        catch (e) {
+            this.renderImageError.next(this._dictionaryService.get(e.message));
+            return;
+        }
         const data = this._getDataForRoomRender(settings);
         data.files = {
             glbData: this._arrayBufferToBase64(sceneData)
@@ -29018,6 +28672,21 @@ class NewRenderService {
         let scene;
         try {
             scene = this._sceneService.scene.clone(true);
+            const masksToRemove = new Map();
+            scene.traverse((child) => {
+                if (child.parent && child instanceof Mesh && child.name && child.name.toLowerCase().indexOf('_mask') > -1) {
+                    masksToRemove.set(child.parent.uuid, child.uuid);
+                }
+            });
+            masksToRemove.forEach((maskUuid, parentUuid) => {
+                const parent = scene.getObjectByProperty('uuid', parentUuid);
+                if (parent) {
+                    const mask = parent.getObjectByProperty('uuid', maskUuid);
+                    if (mask) {
+                        parent.remove(mask);
+                    }
+                }
+            });
             const lightsToRemove = scene.children.filter(c => c instanceof Light);
             lightsToRemove.forEach(light => {
                 if ((light instanceof SpotLight || light instanceof DirectionalLight) && light.target) {
@@ -29038,6 +28707,10 @@ class NewRenderService {
                 if (!this._cameraService.isCameraFacingFront(wall) && !wall.orphan && !wall.isInnerWall()) {
                     wall.name = 'CULLING_wall';
                 }
+                wall.userData = {};
+                // for (let i = wall.children.length; i >= 0; i--) {
+                //   wall.remove(wall.children[i]);
+                // }
             });
             const ceilings = scene.children.filter(c => c.name && c.name === this._ceilingService.ceilingName);
             ceilings.forEach(ceiling => {
@@ -29056,7 +28729,9 @@ class NewRenderService {
                 embedImages: true,
             };
             scene.name = 'mrp_room_' + scene.uuid;
-            const glb = await this._getGlbFromObject(scene, options);
+            const glb = await this._getGlbFromObject(scene, options).catch((error) => {
+                throw (error);
+            });
             // this._utilsService.downloadFile(scene.name + '.glb', new Blob([glb], {type: 'model/gltf-binary'}));
             ObjectUtils.DisposeObject(scene);
             scene = null;
@@ -29071,7 +28746,8 @@ class NewRenderService {
         return new Promise((resolve, reject) => {
             exporter.parse(object, async (exportedScene) => {
                 resolve(exportedScene);
-            }, () => {
+            }, (error) => {
+                reject(error);
             }, options);
         });
     }
@@ -29190,7 +28866,19 @@ class NewRenderService {
                 method: 'POST',
                 data: JSON.stringify(data),
                 url: `${host}getRenderFromGlb`,
-                responseType: 'json'
+                responseType: 'json',
+                onUploadProgress: (progressEvent) => {
+                    const total = progressEvent.total ?? 0;
+                    if (total > 0) {
+                        const percent = Math.round((progressEvent.loaded * 100) / total);
+                        this._messageBusService.emit(MessageType.RenderUploadProgress, percent);
+                        if (percent >= 100) {
+                            this._messageBusService.emit(MessageType.RenderUploadFinished, true);
+                        }
+                    }
+                }
+            }).catch((error) => {
+                return error;
             });
             if (result.status === 200) {
                 // const image = `data:${result.data.fileType};base64,${result.data.image}`;
@@ -29211,7 +28899,12 @@ class NewRenderService {
                     this.renderImageError.next(this._dictionaryService.get('BLENDER_PRODUCT_RENDER_ERROR'));
                 }
                 // Remove the loading indicator.
-                this._messageBusService.emit(MessageType.RenderUploadFinished, true);
+                this._messageBusService.emit(MessageType.RenderFinished, true);
+            }
+            else {
+                this.renderImageChanged.next('');
+                this.renderImageError.next(this._dictionaryService.get('BLENDER_PRODUCT_RENDER_ERROR'));
+                this._messageBusService.emit(MessageType.RenderFinished, true);
             }
         }
     }
@@ -29530,10 +29223,10 @@ class NewRenderService {
             this._overWriteTransparency = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: SwitchBuildFurnitureService }, { token: CameraService }, { token: SceneService }, { token: HomedecoratorConnectorService }, { token: HomedecoratorConnectorAdapterService }, { token: ThreedselectorService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }, { token: WallService }, { token: CeilingService }, { token: SwitchLoadFurnitureService }, { token: UtilsService }, { token: PresetsService }, { token: ApiServiceModule }, { token: HomedecoratorAppEventService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, deps: [{ token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: SwitchBuildFurnitureService }, { token: CameraService }, { token: SceneService }, { token: HomedecoratorConnectorService }, { token: HomedecoratorConnectorAdapterService }, { token: ThreedselectorService }, { token: ToastService }, { token: MessageBusService }, { token: GoogleTagManagerService }, { token: RoomService }, { token: FloorService }, { token: WallService }, { token: CeilingService }, { token: SwitchLoadFurnitureService }, { token: UtilsService }, { token: PresetsService }, { token: ApiServiceModule }, { token: HomedecoratorAppEventService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewRenderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: SwitchBuildFurnitureService }, { type: CameraService }, { type: SceneService }, { type: HomedecoratorConnectorService }, { type: HomedecoratorConnectorAdapterService }, { type: ThreedselectorService }, { type: ToastService }, { type: MessageBusService }, { type: GoogleTagManagerService }, { type: RoomService }, { type: FloorService }, { type: WallService }, { type: CeilingService }, { type: SwitchLoadFurnitureService }, { type: UtilsService }, { type: PresetsService }, { type: ApiServiceModule }, { type: HomedecoratorAppEventService }, { type: HomedecoratorDictionaryService }] });
 
@@ -30395,6 +30088,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: HomedecoratorSettingsService }, { type: HomedecoratorConnectorService }] });
 
+var ToastType;
+(function (ToastType) {
+    ToastType[ToastType["Success"] = 0] = "Success";
+    ToastType[ToastType["Warning"] = 1] = "Warning";
+    ToastType[ToastType["Error"] = 2] = "Error";
+})(ToastType || (ToastType = {}));
+
+class Toast {
+    constructor() {
+        this.type = ToastType.Success;
+    }
+}
+
 class ConnectionHeathService {
     constructor(_http, _settingService, _toastService, _messageService) {
         this._http = _http;
@@ -30779,9 +30485,9 @@ class FloorplanRenderService {
         }
         this._clear();
         this._drawGrid();
-        // if (this.diagramBackground && this.showDiagramBackground) {
-        //   this._drawBackground();
-        // }
+        if (this.diagramBackground && this.showDiagramBackground) {
+            this._drawBackground();
+        }
         this._drawRooms();
         this._drawWallsWithNoRoom();
         if (this._state.showWallItemMeasurements && this._state.activeItem) {
@@ -30821,6 +30527,24 @@ class FloorplanRenderService {
             ContextUtils.DrawLine(context, 0, gridSpacing * y + offsetY, canvas.width, gridSpacing * y + offsetY, gridWidth, gridColor);
         }
     }
+    _drawBackground() {
+        const context = this._state.context;
+        if (this.diagramBackgroundActiveZoom) {
+            if (this.diagramBackgroundCurrentScale <= this._coordinatesService.viewScale) {
+                this.diagramBackgroundWidth = this.diagramBackgroundWidth * this._coordinatesService.scalingFactor;
+                this.diagramBackgroundHeight = this.diagramBackgroundHeight * this._coordinatesService.scalingFactor;
+            }
+            else {
+                this.diagramBackgroundWidth = this.diagramBackgroundWidth * (1 / this._coordinatesService.scalingFactor);
+                this.diagramBackgroundHeight = this.diagramBackgroundHeight * (1 / this._coordinatesService.scalingFactor);
+            }
+            this.diagramBackgroundActiveZoom = false;
+        }
+        this.diagramBackgroundCurrentScale = this._coordinatesService.viewScale;
+        context.globalAlpha = this.diagramBackgroundAlpha;
+        context.drawImage(this.diagramBackground, Math.abs(this._coordinatesService.originX) - (this.diagramBackgroundWidth * this.diagramBackgroundScale / 2), Math.abs(this._coordinatesService.originY) - (this.diagramBackgroundHeight * this.diagramBackgroundScale / 2), this.diagramBackgroundWidth * this.diagramBackgroundScale, this.diagramBackgroundHeight * this.diagramBackgroundScale);
+        context.globalAlpha = 1;
+    }
     _drawRooms() {
         const rooms = this._state.rooms;
         rooms.forEach(room => {
@@ -31479,9 +31203,8 @@ const APPLICATION_SERVICES_PROVIDERS = [
     DynamicCameraService,
     ThreedInPhotoInitializerService,
     ThreedInPhotoBuildService,
-    RenderService,
     ExportService,
-    NewRenderService,
+    RenderService,
     AppInitializerService,
     JsonUtilsService,
     RalService,
@@ -33725,108 +33448,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class BlenderRenderSettings {
 }
 
-class RenderProgressComponent {
-    set show(show) {
-        this._show = show;
-        if (show) {
-            this._progressService.progressBarType = ProgressType.Upload;
-            this._progressService.total = 100;
+// A pipe for appending strings to other strings in view templates.
+class AppendPipe {
+    transform(value, append) {
+        if (!value) {
+            return '';
         }
-        else {
-            this._progressService.progressBarType = ProgressType.Download;
-            this._progressService.total = 0;
+        if (!append) {
+            return value;
         }
+        return value + append;
     }
-    get show() {
-        return this._show;
-    }
-    get progressValue() {
-        return this.progress + '/ 100%';
-    }
-    constructor(_messageService, _progressService) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, isStandalone: false, name: "append" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'append',
+                    standalone: false
+                }]
+        }] });
+
+class RenderProgressComponent {
+    constructor(_messageService) {
         this._messageService = _messageService;
-        this._progressService = _progressService;
+        this.title = 'UPLOADING_ROOM';
         this.progress = 0;
+        this.rendering = false;
         this._subs = [];
-        this._show = false;
-        this._subs.push(this._messageService.subscribe(MessageType.RenderUploadProgress, (progress) => this.updateProgress(progress)));
+        this._subs.push(this._messageService.subscribe(MessageType.RenderUploadFinished, (ready) => {
+            if (ready) {
+                this.title = 'RENDERING_ROOM';
+                this.rendering = true;
+            }
+        }), this._messageService.subscribe(MessageType.RenderUploadProgress, (progress) => this.updateProgress(progress)));
     }
     ngOnDestroy() {
         this._subs.forEach(sub => sub.unsubscribe());
     }
     updateProgress(progress) {
-        this.progress = progress;
-        this._progressService.progress = progress;
+        this.progress = Math.max(0, Math.min(100, progress));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, deps: [{ token: MessageBusService }, { token: ProgressService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderProgressComponent, isStandalone: false, selector: "rp-render-progress", inputs: { show: "show", title: "title" }, ngImport: i0, template: `
-    @if (show) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, deps: [{ token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderProgressComponent, isStandalone: false, selector: "rp-render-progress", ngImport: i0, template: `
       <div class="render-progress-model">
         <div class="model">
           <div class="model-header-container">
-            <h3 class="model-header" [textContent]="title"></h3>
-            <div class="close" (click)="show = false">
-              <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-            </div>
+            <h3 class="model-header" [textContent]="title | localize"></h3>
+              <!--
+                          <div class="close" (click)="show = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                          </div>
+              -->
           </div>
           <div class="model-content-container">
-            <span class="progress-text" [textContent]="progressValue"></span>
+              @if (!rendering) {
+                  <div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100">
+                      <div class="progress-bar-fill" [style.width.%]="progress"></div>
+                      <span class="progress-bar-text" [textContent]="progress.toString() | append:'%'"></span>
+                  </div>
+              } @else {
+                  <span class="loading-dots" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+              }
           </div>
         </div>
       </div>
-    }
-    `, isInline: true, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{padding:20px}.render-progress-model .model .model-content-container .progress-text{text-align:center;margin-top:10px;display:block}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-fill{height:100%;background-color:#da9803;transition:width .3s ease-in-out}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    `, isInline: true, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{display:flex;justify-content:center;padding:20px}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-bar{position:relative;width:100%;height:18px;overflow:hidden;border-radius:999px;background-color:#e5e7eb}.render-progress-model .model .model-content-container .progress-bar-text{position:absolute;inset:0;color:#171721;display:flex;align-items:center;justify-content:center}.render-progress-model .model .model-content-container .progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#da9803,#fff);transition:width .3s ease}.render-progress-model .model .model-content-container .loading-dots{display:inline-flex;gap:2px;margin-left:4px}.render-progress-model .model .model-content-container .loading-dots span{width:4px;height:4px;border-radius:50%;background-color:#171721;opacity:.25;animation:loading-dot 1.2s infinite ease-in-out}.render-progress-model .model .model-content-container .loading-dots span:nth-child(2){animation-delay:.2s}.render-progress-model .model .model-content-container .loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loading-dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: AppendPipe, name: "append" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rp-render-progress', template: `
-    @if (show) {
       <div class="render-progress-model">
         <div class="model">
           <div class="model-header-container">
-            <h3 class="model-header" [textContent]="title"></h3>
-            <div class="close" (click)="show = false">
-              <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-            </div>
+            <h3 class="model-header" [textContent]="title | localize"></h3>
+              <!--
+                          <div class="close" (click)="show = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                          </div>
+              -->
           </div>
           <div class="model-content-container">
-            <span class="progress-text" [textContent]="progressValue"></span>
+              @if (!rendering) {
+                  <div class="progress-bar" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100">
+                      <div class="progress-bar-fill" [style.width.%]="progress"></div>
+                      <span class="progress-bar-text" [textContent]="progress.toString() | append:'%'"></span>
+                  </div>
+              } @else {
+                  <span class="loading-dots" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+              }
           </div>
         </div>
       </div>
-    }
-    `, standalone: false, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{padding:20px}.render-progress-model .model .model-content-container .progress-text{text-align:center;margin-top:10px;display:block}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-fill{height:100%;background-color:#da9803;transition:width .3s ease-in-out}\n"] }]
-        }], ctorParameters: () => [{ type: MessageBusService }, { type: ProgressService }], propDecorators: { show: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
+    `, standalone: false, styles: [".render-progress-model{position:fixed;inset:0;z-index:100;background-color:#0003}.render-progress-model .model{width:400px;position:relative;top:20%;left:50%;margin-left:-200px;background:#fff;border-radius:10px;box-sizing:border-box;box-shadow:1px 0 20px #0000001f}.render-progress-model .model .model-header-container{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-progress-model .model .model-header-container .close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-progress-model .model .model-header-container .close:hover mat-icon{fill:#46494c;color:#46494c}.render-progress-model .model .model-content-container{display:flex;justify-content:center;padding:20px}.render-progress-model .model .model-content-container .progress-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.render-progress-model .model .model-content-container .progress-bar{position:relative;width:100%;height:18px;overflow:hidden;border-radius:999px;background-color:#e5e7eb}.render-progress-model .model .model-content-container .progress-bar-text{position:absolute;inset:0;color:#171721;display:flex;align-items:center;justify-content:center}.render-progress-model .model .model-content-container .progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#da9803,#fff);transition:width .3s ease}.render-progress-model .model .model-content-container .loading-dots{display:inline-flex;gap:2px;margin-left:4px}.render-progress-model .model .model-content-container .loading-dots span{width:4px;height:4px;border-radius:50%;background-color:#171721;opacity:.25;animation:loading-dot 1.2s infinite ease-in-out}.render-progress-model .model .model-content-container .loading-dots span:nth-child(2){animation-delay:.2s}.render-progress-model .model .model-content-container .loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loading-dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"] }]
+        }], ctorParameters: () => [{ type: MessageBusService }] });
 
 class RenderControlsComponent {
     get disablePictureButton() {
-        return this._newRenderService.currentQueueRenderItem.renderStatus === this.renderStatus.IsRunning;
+        return this.renderService.currentQueueRenderItem.renderStatus === this.renderStatus.IsRunning;
     }
-    constructor(renderService, messageService, viewModeService, settingsService, iconService, _dialog, _sceneService, _cameraService, _configurationService, _settingsService, _newRenderService, _utilsService, _roomService, _wallMeasurementsService, _connectionHealthService, _dictionaryService) {
-        this.renderService = renderService;
+    constructor(messageService, viewModeService, settingsService, iconService, renderService, _dialog, _sceneService, _cameraService, _configurationService, _settingsService, _utilsService, _roomService, _wallMeasurementsService, _connectionHealthService, _dictionaryService, _dialogService) {
         this.messageService = messageService;
         this.viewModeService = viewModeService;
         this.settingsService = settingsService;
         this.iconService = iconService;
+        this.renderService = renderService;
         this._dialog = _dialog;
         this._sceneService = _sceneService;
         this._cameraService = _cameraService;
         this._configurationService = _configurationService;
         this._settingsService = _settingsService;
-        this._newRenderService = _newRenderService;
         this._utilsService = _utilsService;
         this._roomService = _roomService;
         this._wallMeasurementsService = _wallMeasurementsService;
         this._connectionHealthService = _connectionHealthService;
         this._dictionaryService = _dictionaryService;
+        this._dialogService = _dialogService;
         this.viewModes = ViewMode;
         this.renderStatus = RenderStatus;
         this.icons = IconEnum;
         this.renderModes = RenderModes;
+        this.imageSizes = [
+            { id: 1, name: ' 720p (HD)', width: 1280, height: 720 },
+            { id: 2, name: '1080P (HD)', width: 1920, height: 1080 },
+            { id: 3, name: '1440p (2K)', width: 2560, height: 1440 },
+            { id: 4, name: '2160p (4K)', width: 4096, height: 2160 }
+        ];
+        this.selectedImageSize = this.imageSizes[1];
         this.hdriIntensity = 1;
         this.hdriRotation = 0;
         this.lightingExposure = 1;
@@ -33839,14 +33596,22 @@ class RenderControlsComponent {
         this.showCullingErrorDialog = false;
         this.startUploading = false;
         this._subs = [];
-        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderPreviewReady, (file) => this.showPreview(file)), this.messageService.subscribe(MessageType.RenderUploadFinished, (ready) => this.hideUploadDialog(ready)), this.messageService.subscribe(MessageType.RenderError, () => this.hideUploadDialog(true)), this._cameraService.cameraMovementChanged.subscribe(() => {
+        this._subs.push(this.messageService.subscribe(MessageType.BlenderRenderPreviewReady, (file) => this.showPreview(file)), this.messageService.subscribe(MessageType.RenderFinished, (ready) => this.hideUploadDialog(ready)), this.messageService.subscribe(MessageType.RenderError, () => this.hideUploadDialog(true)), this._cameraService.cameraMovementChanged.subscribe(() => {
             this._validateRenderPosition();
             // Make sure when the camera moves, we recheck the position and if we still need to show the render warning.
+        }), this.renderService.renderImageError.subscribe((error) => {
+            if (error) {
+                this.hideUploadDialog(true);
+                this._dialogService.showDialog({ data: { title: 'Error', messages: [{ message: error }], type: 'error' } });
+            }
         }));
     }
     ngOnInit() {
         this.getRenderScenesFromSettings();
     }
+    ngOnDestroy() {
+        this._subs.forEach((sub) => sub.unsubscribe());
+    }
     showRenderForm(event) {
         this.inPictureMode = !this.inPictureMode;
         this._validateRenderPosition();
@@ -33860,16 +33625,14 @@ class RenderControlsComponent {
             this.startUploading = false;
         }
     }
-    createBlenderRender() {
+    createBlenderRender(preview = false) {
         if (!this.showCullingErrorDialog) {
             if (this.viewModeService.isTopViewActive()) {
                 this._wallMeasurementsService.prepMeasurementsForRender();
             }
-            this.messageService.emit(MessageType.ShowLoadingIndicator, { title: this._dictionaryService.get('PREPARE_TO_RENDER') });
             this.startUploading = true;
             // only render when the showCullingErrorDialog is false
             // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Uploading...'});
-            const renderSize = this.renderService.getImageSizeOnId(this.renderService.selectedImageSize);
             const renderSceneAssetId = this.selectedRenderScene;
             if (this.lightingExposure < 1) {
                 this.lightingExposure = 1;
@@ -33877,15 +33640,15 @@ class RenderControlsComponent {
             this._validateRenderPosition(); // Check the camera position
             const allowCulling = this._allowCulling(this.hasError);
             const renderInput = new BlenderRenderSettings();
-            renderInput.height = renderSize.height;
-            renderInput.width = renderSize.width;
+            renderInput.height = preview ? 150 : this.selectedImageSize.height;
+            renderInput.width = preview ? 275 : this.selectedImageSize.width;
             renderInput.sceneAsset = renderSceneAssetId;
             renderInput.hdriIntensity = this.hdriIntensity;
             renderInput.hdriRotation = this.hdriRotation;
             renderInput.lightingExposure = this.lightingExposure;
             renderInput.allowCulling = allowCulling;
             // this._utilsService.prepRoomForRender(false, renderInput);
-            this._newRenderService.renderRoom(renderInput);
+            this.renderService.renderRoom(renderInput, preview);
             if (this.viewModeService.isTopViewActive()) {
                 this._wallMeasurementsService.restoreMeasurementsAfterRender();
             }
@@ -33913,35 +33676,6 @@ class RenderControlsComponent {
         this._cameraService.camera.position.set(movingPosition.x, movingPosition.y, movingPosition.z);
         this._cameraService.cameraMovementChanged.next();
     }
-    createPreviewRender() {
-        if (!this.showCullingErrorDialog) {
-            if (this.viewModeService.isTopViewActive()) {
-                this._wallMeasurementsService.prepMeasurementsForRender();
-            }
-            const renderSceneAssetId = this.selectedRenderScene;
-            // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: 'Uploading...'});
-            // this.messageService.emit(MessageType.ShowLoadingIndicator, {title: this._dictionaryService.get('PREPARE_TO_RENDER')});
-            this.startUploading = true;
-            if (this.lightingExposure < 1) {
-                this.lightingExposure = 1;
-            }
-            this._validateRenderPosition(); // Check the camera position
-            const allowCulling = this._allowCulling(this.hasError);
-            const renderInput = new BlenderRenderSettings();
-            renderInput.height = 150;
-            renderInput.width = 275;
-            renderInput.sceneAsset = renderSceneAssetId;
-            renderInput.hdriIntensity = this.hdriIntensity;
-            renderInput.hdriRotation = this.hdriRotation;
-            renderInput.lightingExposure = this.lightingExposure;
-            renderInput.allowCulling = allowCulling;
-            // this._utilsService.prepRoomForRender(false, renderInput, true);
-            this._newRenderService.renderRoom(renderInput, true);
-            if (this.viewModeService.isTopViewActive()) {
-                this._wallMeasurementsService.restoreMeasurementsAfterRender();
-            }
-        }
-    }
     showPreview(image) {
         this.blenderPreviewRender = image;
     }
@@ -34026,465 +33760,413 @@ class RenderControlsComponent {
         // }
         // return allowCulling;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, deps: [{ token: RenderService }, { token: MessageBusService }, { token: ViewModeService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: i1$2.MatDialog }, { token: SceneService }, { token: CameraService }, { token: ConfigurationService }, { token: HomedecoratorSettingsService }, { token: NewRenderService }, { token: UtilsService }, { token: RoomService }, { token: WallMeasurementsService }, { token: ConnectionHeathService }, { token: HomedecoratorDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, deps: [{ token: MessageBusService }, { token: ViewModeService }, { token: HomedecoratorSettingsService }, { token: HomedecoratorIconCacheService }, { token: RenderService }, { token: i1$2.MatDialog }, { token: SceneService }, { token: CameraService }, { token: ConfigurationService }, { token: HomedecoratorSettingsService }, { token: UtilsService }, { token: RoomService }, { token: WallMeasurementsService }, { token: ConnectionHeathService }, { token: HomedecoratorDictionaryService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RenderControlsComponent, isStandalone: false, selector: "rp-render-controls", viewQueries: [{ propertyName: "renderButton", first: true, predicate: ["renderButton"], descendants: true }], ngImport: i0, template: `
-      @if (renderService.serverData &&  renderService.serverData.renderMode !== renderService.renderModes.RenderShop) {
-        <div class="render-container"
-          >
-          @if (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning || renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess) {
-            <div class="render-progress"
-              >
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress === 100 ? "RENDER_READY" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress !== 100 ? "RENDER_STOPPED" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning) ? renderService.currentQueueRenderItem.renderProgress + "%" : "" }}
-            </div>
-          }
-          <!-- the Yellow render indicators -->
-          @if (inPictureMode) {
-            <div class="render-indicators">
-              <div class="render-indicator-top-left"></div>
-              <div class="render-indicator-top-right"></div>
-              <div class="render-indicator-bottom-left"></div>
-              <div class="render-indicator-bottom-right"></div>
-            </div>
-          }
-          @if (inPictureMode) {
-            <div class="render-popup-container">
-              <div class="render-popup-header">
-                <h3>
-                  <span>{{ 'PICTURE_MODE' | localize }}</span>
-                  @if (hasError) {
-                    <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
-                    [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
-                  }
-                </h3>
-                <button
-                  class="close-popup-container"
-                  (click)="resetBlenderRenderScene()">
-                  <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-                </button>
-              </div>
-              <div class="render-popup-preview">
-                @if (blenderPreviewRender) {
-                  <img [src]="blenderPreviewRender" alt="">
-                }
-                @if (!blenderPreviewRender) {
-                  <div class="render-popup-preview-placeholder">
-                    <span>{{ 'PREVIEW' | localize }}</span>
-                  </div>
-                }
-                <button
-                  class="render-popup-refresh-preview"
-                  (click)="createPreviewRender()"
-                  >
-                  <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
-                </button>
-              </div>
-              @if (renderService.blendFilesRender) {
-                <div class="render-popup-dropdown">
-                  <div class="toggleable" (click)="toggleRenderSettings()">
-                    <p>
-                      @if (!showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
-                      }
-                      @if (showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
-                      }
-                    </p>
-                    <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
-                    [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
-                  </div>
-                  @if (showRenderSettings) {
-                    <div class="advanced-render-settings">
-                      <div class="setting-part-container">
-                        @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                          <mat-form-field
-                            class="face-select-form"
-                            >
-                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
-                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
-                              @for (scene of sceneList; track scene) {
-                                <mat-option
-                                  [value]="scene">{{ scene.name }}
-                                </mat-option>
-                              }
-                            </mat-select>
-                          </mat-form-field>
+        <div class="render-container">
+            @if (startUploading) {
+                <rp-render-progress></rp-render-progress>
+            }
+            <!-- the Yellow render indicators -->
+            @if (inPictureMode) {
+                <div class="render-indicators">
+                    <div class="render-indicator-top-left"></div>
+                    <div class="render-indicator-top-right"></div>
+                    <div class="render-indicator-bottom-left"></div>
+                    <div class="render-indicator-bottom-right"></div>
+                </div>
+                <div class="render-popup-container">
+                    <div class="render-popup-header">
+                        <h3>
+                            <span>{{ 'PICTURE_MODE' | localize }}</span>
+                            @if (hasError) {
+                                <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
+                                         [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
+                            }
+                        </h3>
+                        <button
+                                class="close-popup-container"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+                        </button>
+                    </div>
+                    <div class="render-popup-preview">
+                        @if (blenderPreviewRender) {
+                            <img [src]="blenderPreviewRender" alt="">
                         }
-                      </div>
-                      <div class="setting-part-container">
-                        <mat-form-field class="third-width">
-                          <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
-                          <input
-                            [type]="'number'"
-                            matInput
-                            [(ngModel)]="hdriIntensity"
-                            (ngModelChange)="hdriIntensity = +$event">
-                          </mat-form-field>
-                          <div class="setting-part-buttons">
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                            </button>
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                            </button>
-                          </div>
-                          <div class="setting-part-slider">
-                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
-                          </div>
-                        </div>
-                        <div class="setting-part-container">
-                          <mat-form-field class="third-width">
-                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
-                            <input
-                              [type]="'number'"
-                              matInput
-                              [(ngModel)]="hdriRotation"
-                              (ngModelChange)="hdriRotation = +$event">
-                            </mat-form-field>
-                            <div class="setting-part-buttons">
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                              </button>
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                              </button>
+                        @if (!blenderPreviewRender) {
+                            <div class="render-popup-preview-placeholder">
+                                <span>{{ 'PREVIEW' | localize }}</span>
                             </div>
-                            <div class="setting-part-slider">
-                              <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
-                            </div>
-                          </div>
-                          <div class="setting-part-container">
-                            <mat-form-field class="third-width">
-                              <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
-                              <input
-                                [type]="'number'"
-                                matInput
-                                [(ngModel)]="lightingExposure"
-                                (ngModelChange)="lightingExposure = +$event">
-                              </mat-form-field>
-                              <div class="setting-part-buttons">
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                                </button>
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                                </button>
-                              </div>
-                              <div class="setting-part-slider">
-                                <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
-                              </div>
-                            </div>
-                          </div>
                         }
-                      </div>
+                        <button class="render-popup-refresh-preview" (click)="createBlenderRender(true)">
+                            <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
+                        </button>
+                    </div>
+                    @if (renderService.blendFilesRender) {
+                        <div class="render-popup-dropdown">
+                            <div class="toggleable" (click)="toggleRenderSettings()">
+                                <p>
+                                    @if (!showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
+                                    }
+                                    @if (showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
+                                    }
+                                </p>
+                                <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
+                                         [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                            </div>
+                            @if (showRenderSettings) {
+                                <div class="advanced-render-settings">
+                                    <div class="setting-part-container">
+                                        <mat-form-field
+                                                class="face-select-form"
+                                        >
+                                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
+                                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
+                                                @for (scene of sceneList; track scene) {
+                                                    <mat-option
+                                                            [value]="scene">{{ scene.name }}
+                                                    </mat-option>
+                                                }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriIntensity"
+                                                    (ngModelChange)="hdriIntensity = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriRotation"
+                                                    (ngModelChange)="hdriRotation = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="lightingExposure"
+                                                    (ngModelChange)="lightingExposure = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
                     }
-                    @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                      <div class="render-popup-dropdown">
+                    <div class="render-popup-dropdown">
                         <mat-form-field class="face-select-form">
-                          <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
-                          <mat-select [(ngModel)]="renderService.selectedImageSize">
-                            @for (size of renderService.imageSizes; track size) {
-                              <mat-option [value]="size.id">{{ size.name }} {{ size.width }}
-                                x{{ size.height }}
-                              </mat-option>
-                            }
-                          </mat-select>
+                            <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
+                            <mat-select [(value)]="selectedImageSize">
+                                @for (size of imageSizes; track size) {
+                                    <mat-option [value]="size">{{ size.name }} {{ size.width }}
+                                        x{{ size.height }}
+                                    </mat-option>
+                                }
+                            </mat-select>
                         </mat-form-field>
-                      </div>
-                    }
+                    </div>
                     <div class="render-popup-button-container">
-                      <button class="render-popup-button photo-button"
-                        (click)="createBlenderRender()"
-                        title="{{'MAKE_A_PICTURE' | localize}}"
-                        [disabled]="disablePictureButton">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
-                        {{ 'MAKE_A_PICTURE' | localize }}
-                      </button>
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="resetBlenderRenderScene()">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE_PHOTO_MODE' | localize }}
-                      </button>
+                        <button class="render-popup-button photo-button"
+                                (click)="createBlenderRender()"
+                                title="{{'MAKE_A_PICTURE' | localize}}"
+                                [disabled]="disablePictureButton">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
+                            {{ 'MAKE_A_PICTURE' | localize }}
+                        </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE_PHOTO_MODE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                @if (showCullingErrorDialog) {
-                  <div class="render-warning">
+                </div>
+            }
+            @if (showCullingErrorDialog) {
+                <div class="render-warning">
                     <div class="render-warming-header">
-                      <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
-                      <div class="render-warning-close" (click)="showCullingErrorDialog = false">
-                        <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-                      </div>
+                        <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
+                        <div class="render-warning-close" (click)="showCullingErrorDialog = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                        </div>
                     </div>
                     <div class="render-warning-body">
-                      <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
+                        <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
                     </div>
                     <div class="render-warning-footer">
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="showCullingErrorDialog = false">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE' | localize }}
-                      </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="showCullingErrorDialog = false">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                <rp-render-progress
-                  [title]="'PREPARE_TO_RENDER' | localize"
-                  [show]="startUploading"
-                  >
-                </rp-render-progress>
-                <button
-                  #renderButton
-                  mat-raised-button
-                  matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
-                  [id]="'standalone_render_picture'"
-                  [class.active]="(
-        (renderService.serverData.renderMode === renderService.renderModes.RenderRoom && viewModeService.viewMode === viewModes.WalkThrough) ||
-        (renderService.serverData.renderMode === renderService.renderModes.RenderIone))"
-                  (click)="showRenderForm($event)"
-                  >
-                  <mat-icon class="icon homedecorator-material-icons"
-                    aria-hidden="true">{{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning ? 'open_in_browser' : 'photo_camera') }}
-                  </mat-icon>
-                </button>
-              </div>
+                </div>
             }
-      
-      `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i4$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress", inputs: ["show", "title"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+            <button
+                    #renderButton
+                    mat-raised-button
+                    matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
+                    [id]="'standalone_render_picture'"
+                    [class.active]="viewModeService.viewMode === viewModes.WalkThrough"
+                    (click)="showRenderForm($event)">
+                <mat-icon class="icon homedecorator-material-icons"
+                          aria-hidden="true">{{ 'photo_camera' }}
+                </mat-icon>
+            </button>
+        </div>
+    `, isInline: true, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i4$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: RenderProgressComponent, selector: "rp-render-progress" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RenderControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rp-render-controls', template: `
-      @if (renderService.serverData &&  renderService.serverData.renderMode !== renderService.renderModes.RenderShop) {
-        <div class="render-container"
-          >
-          @if (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning || renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess) {
-            <div class="render-progress"
-              >
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress === 100 ? "RENDER_READY" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsSuccess && renderService.currentQueueRenderItem.renderProgress !== 100 ? "RENDER_STOPPED" : "") | localize }}
-              {{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning) ? renderService.currentQueueRenderItem.renderProgress + "%" : "" }}
-            </div>
-          }
-          <!-- the Yellow render indicators -->
-          @if (inPictureMode) {
-            <div class="render-indicators">
-              <div class="render-indicator-top-left"></div>
-              <div class="render-indicator-top-right"></div>
-              <div class="render-indicator-bottom-left"></div>
-              <div class="render-indicator-bottom-right"></div>
-            </div>
-          }
-          @if (inPictureMode) {
-            <div class="render-popup-container">
-              <div class="render-popup-header">
-                <h3>
-                  <span>{{ 'PICTURE_MODE' | localize }}</span>
-                  @if (hasError) {
-                    <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
-                    [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
-                  }
-                </h3>
-                <button
-                  class="close-popup-container"
-                  (click)="resetBlenderRenderScene()">
-                  <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-                </button>
-              </div>
-              <div class="render-popup-preview">
-                @if (blenderPreviewRender) {
-                  <img [src]="blenderPreviewRender" alt="">
-                }
-                @if (!blenderPreviewRender) {
-                  <div class="render-popup-preview-placeholder">
-                    <span>{{ 'PREVIEW' | localize }}</span>
-                  </div>
-                }
-                <button
-                  class="render-popup-refresh-preview"
-                  (click)="createPreviewRender()"
-                  >
-                  <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
-                </button>
-              </div>
-              @if (renderService.blendFilesRender) {
-                <div class="render-popup-dropdown">
-                  <div class="toggleable" (click)="toggleRenderSettings()">
-                    <p>
-                      @if (!showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
-                      }
-                      @if (showRenderSettings) {
-                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
-                      }
-                    </p>
-                    <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
-                    [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
-                  </div>
-                  @if (showRenderSettings) {
-                    <div class="advanced-render-settings">
-                      <div class="setting-part-container">
-                        @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                          <mat-form-field
-                            class="face-select-form"
-                            >
-                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
-                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
-                              @for (scene of sceneList; track scene) {
-                                <mat-option
-                                  [value]="scene">{{ scene.name }}
-                                </mat-option>
-                              }
-                            </mat-select>
-                          </mat-form-field>
+        <div class="render-container">
+            @if (startUploading) {
+                <rp-render-progress></rp-render-progress>
+            }
+            <!-- the Yellow render indicators -->
+            @if (inPictureMode) {
+                <div class="render-indicators">
+                    <div class="render-indicator-top-left"></div>
+                    <div class="render-indicator-top-right"></div>
+                    <div class="render-indicator-bottom-left"></div>
+                    <div class="render-indicator-bottom-right"></div>
+                </div>
+                <div class="render-popup-container">
+                    <div class="render-popup-header">
+                        <h3>
+                            <span>{{ 'PICTURE_MODE' | localize }}</span>
+                            @if (hasError) {
+                                <co-icon class="renderErrorIcon" [iconData]="iconService.getIcon(icons.TriangleExclamation)"
+                                         [matTooltip]="'BLENDER_RENDER_ERROR' | localize"></co-icon>
+                            }
+                        </h3>
+                        <button
+                                class="close-popup-container"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+                        </button>
+                    </div>
+                    <div class="render-popup-preview">
+                        @if (blenderPreviewRender) {
+                            <img [src]="blenderPreviewRender" alt="">
                         }
-                      </div>
-                      <div class="setting-part-container">
-                        <mat-form-field class="third-width">
-                          <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
-                          <input
-                            [type]="'number'"
-                            matInput
-                            [(ngModel)]="hdriIntensity"
-                            (ngModelChange)="hdriIntensity = +$event">
-                          </mat-form-field>
-                          <div class="setting-part-buttons">
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                            </button>
-                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
-                              <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                            </button>
-                          </div>
-                          <div class="setting-part-slider">
-                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
-                          </div>
-                        </div>
-                        <div class="setting-part-container">
-                          <mat-form-field class="third-width">
-                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
-                            <input
-                              [type]="'number'"
-                              matInput
-                              [(ngModel)]="hdriRotation"
-                              (ngModelChange)="hdriRotation = +$event">
-                            </mat-form-field>
-                            <div class="setting-part-buttons">
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                              </button>
-                              <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
-                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                              </button>
-                            </div>
-                            <div class="setting-part-slider">
-                              <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
-                            </div>
-                          </div>
-                          <div class="setting-part-container">
-                            <mat-form-field class="third-width">
-                              <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
-                              <input
-                                [type]="'number'"
-                                matInput
-                                [(ngModel)]="lightingExposure"
-                                (ngModelChange)="lightingExposure = +$event">
-                              </mat-form-field>
-                              <div class="setting-part-buttons">
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
-                                </button>
-                                <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
-                                  <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
-                                </button>
-                              </div>
-                              <div class="setting-part-slider">
-                                <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
-                              </div>
+                        @if (!blenderPreviewRender) {
+                            <div class="render-popup-preview-placeholder">
+                                <span>{{ 'PREVIEW' | localize }}</span>
                             </div>
-                          </div>
                         }
-                      </div>
+                        <button class="render-popup-refresh-preview" (click)="createBlenderRender(true)">
+                            <co-icon [iconData]="iconService.getIcon(icons.RetryButton)"></co-icon>
+                        </button>
+                    </div>
+                    @if (renderService.blendFilesRender) {
+                        <div class="render-popup-dropdown">
+                            <div class="toggleable" (click)="toggleRenderSettings()">
+                                <p>
+                                    @if (!showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_SHOW' | localize"></span>
+                                    }
+                                    @if (showRenderSettings) {
+                                        <span [textContent]="'RENDER_ADVANCED_SETTINGS_HIDE' | localize"></span>
+                                    }
+                                </p>
+                                <co-icon [ngClass]="{'icon-rotate': showRenderSettings}"
+                                         [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                            </div>
+                            @if (showRenderSettings) {
+                                <div class="advanced-render-settings">
+                                    <div class="setting-part-container">
+                                        <mat-form-field
+                                                class="face-select-form"
+                                        >
+                                            <mat-label>{{ "ENVIRONMENT" | localize }}</mat-label>
+                                            <mat-select [(ngModel)]="selectedRenderScene" (selectionChange)="updateBlenderSceneSettings($event)">
+                                                @for (scene of sceneList; track scene) {
+                                                    <mat-option
+                                                            [value]="scene">{{ scene.name }}
+                                                    </mat-option>
+                                                }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ENVIRONMENT_LIGHT' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriIntensity"
+                                                    (ngModelChange)="hdriIntensity = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriIntensity = +hdriIntensity + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="20" step="1" [(ngModel)]="hdriIntensity"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'ROTATION' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="hdriRotation"
+                                                    (ngModelChange)="hdriRotation = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="hdriRotation = +hdriRotation + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="0" max="360" step="1" [(ngModel)]="hdriRotation"></mat-slider>
+                                        </div>
+                                    </div>
+                                    <div class="setting-part-container">
+                                        <mat-form-field class="third-width">
+                                            <mat-label [textContent]="'LIGHTS' | localize"></mat-label>
+                                            <input
+                                                    [type]="'number'"
+                                                    matInput
+                                                    [(ngModel)]="lightingExposure"
+                                                    (ngModelChange)="lightingExposure = +$event">
+                                        </mat-form-field>
+                                        <div class="setting-part-buttons">
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure - 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CircleMinusLight)"></co-icon>
+                                            </button>
+                                            <button class="amount-button" (click)="lightingExposure = +lightingExposure + 1">
+                                                <co-icon [iconData]="iconService.getIcon(icons.CirclePlusLight)"></co-icon>
+                                            </button>
+                                        </div>
+                                        <div class="setting-part-slider">
+                                            <mat-slider class="value" min="1" max="10" step="1" [(ngModel)]="lightingExposure"></mat-slider>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
                     }
-                    @if (renderService.serverData.renderMode === renderModes.RenderRoom) {
-                      <div class="render-popup-dropdown">
+                    <div class="render-popup-dropdown">
                         <mat-form-field class="face-select-form">
-                          <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
-                          <mat-select [(ngModel)]="renderService.selectedImageSize">
-                            @for (size of renderService.imageSizes; track size) {
-                              <mat-option [value]="size.id">{{ size.name }} {{ size.width }}
-                                x{{ size.height }}
-                              </mat-option>
-                            }
-                          </mat-select>
+                            <mat-label>{{ "IMAGE_SIZE" | localize }}</mat-label>
+                            <mat-select [(value)]="selectedImageSize">
+                                @for (size of imageSizes; track size) {
+                                    <mat-option [value]="size">{{ size.name }} {{ size.width }}
+                                        x{{ size.height }}
+                                    </mat-option>
+                                }
+                            </mat-select>
                         </mat-form-field>
-                      </div>
-                    }
+                    </div>
                     <div class="render-popup-button-container">
-                      <button class="render-popup-button photo-button"
-                        (click)="createBlenderRender()"
-                        title="{{'MAKE_A_PICTURE' | localize}}"
-                        [disabled]="disablePictureButton">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
-                        {{ 'MAKE_A_PICTURE' | localize }}
-                      </button>
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="resetBlenderRenderScene()">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE_PHOTO_MODE' | localize }}
-                      </button>
+                        <button class="render-popup-button photo-button"
+                                (click)="createBlenderRender()"
+                                title="{{'MAKE_A_PICTURE' | localize}}"
+                                [disabled]="disablePictureButton">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleCheck)"></co-icon>
+                            {{ 'MAKE_A_PICTURE' | localize }}
+                        </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="resetBlenderRenderScene()">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE_PHOTO_MODE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                @if (showCullingErrorDialog) {
-                  <div class="render-warning">
+                </div>
+            }
+            @if (showCullingErrorDialog) {
+                <div class="render-warning">
                     <div class="render-warming-header">
-                      <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
-                      <div class="render-warning-close" (click)="showCullingErrorDialog = false">
-                        <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
-                      </div>
+                        <h2>{{ 'BLENDER_RENDER_ERROR_TITLE' | localize }}</h2>
+                        <div class="render-warning-close" (click)="showCullingErrorDialog = false">
+                            <mat-icon class="homedecorator-material-icons">cancel</mat-icon>
+                        </div>
                     </div>
                     <div class="render-warning-body">
-                      <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
+                        <p>{{ 'BLENDER_RENDER_WARNING_CULLING' | localize }}</p>
                     </div>
                     <div class="render-warning-footer">
-                      <button
-                        class="render-popup-button cancel-button"
-                        (click)="showCullingErrorDialog = false">
-                        <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
-                        {{ 'CLOSE' | localize }}
-                      </button>
+                        <button
+                                class="render-popup-button cancel-button"
+                                (click)="showCullingErrorDialog = false">
+                            <co-icon [iconData]="iconService.getIcon(icons.CircleXmark)"></co-icon>
+                            {{ 'CLOSE' | localize }}
+                        </button>
                     </div>
-                  </div>
-                }
-                <rp-render-progress
-                  [title]="'PREPARE_TO_RENDER' | localize"
-                  [show]="startUploading"
-                  >
-                </rp-render-progress>
-                <button
-                  #renderButton
-                  mat-raised-button
-                  matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
-                  [id]="'standalone_render_picture'"
-                  [class.active]="(
-        (renderService.serverData.renderMode === renderService.renderModes.RenderRoom && viewModeService.viewMode === viewModes.WalkThrough) ||
-        (renderService.serverData.renderMode === renderService.renderModes.RenderIone))"
-                  (click)="showRenderForm($event)"
-                  >
-                  <mat-icon class="icon homedecorator-material-icons"
-                    aria-hidden="true">{{ (renderService.currentQueueRenderItem.renderStatus === renderStatus.IsRunning ? 'open_in_browser' : 'photo_camera') }}
-                  </mat-icon>
-                </button>
-              </div>
+                </div>
             }
-      
-      `, standalone: false, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: RenderService }, { type: MessageBusService }, { type: ViewModeService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: i1$2.MatDialog }, { type: SceneService }, { type: CameraService }, { type: ConfigurationService }, { type: HomedecoratorSettingsService }, { type: NewRenderService }, { type: UtilsService }, { type: RoomService }, { type: WallMeasurementsService }, { type: ConnectionHeathService }, { type: HomedecoratorDictionaryService }], propDecorators: { renderButton: [{
+            <button
+                    #renderButton
+                    mat-raised-button
+                    matTooltip="{{'RENDER_TAKE_A_PICTURE' | localize}}"
+                    [id]="'standalone_render_picture'"
+                    [class.active]="viewModeService.viewMode === viewModes.WalkThrough"
+                    (click)="showRenderForm($event)">
+                <mat-icon class="icon homedecorator-material-icons"
+                          aria-hidden="true">{{ 'photo_camera' }}
+                </mat-icon>
+            </button>
+        </div>
+    `, standalone: false, styles: [".render-container{position:relative}.render-container .render-popup-container{background:#ffffffb3;padding:10px 25px 25px;border-radius:5px;box-shadow:0 1px 5px #0000001f}.render-container .render-popup-container .render-popup-header{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-header h3{display:flex;justify-content:space-between}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon{width:20px;height:20px;margin-left:20px}.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg,.render-container .render-popup-container .render-popup-header h3 ::ng-deep .renderErrorIcon svg polygon{fill:#dc143c}.render-container .render-popup-container .render-popup-header .close-popup-container{cursor:pointer;border:none;background:none;float:none;height:auto;width:auto}.render-container .render-popup-container .render-popup-button-container{display:flex;justify-content:space-between;font-family:inherit}.render-container .render-popup-container .render-popup-button-container .render-popup-button{float:none;width:100%;max-width:130px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-container .render-popup-container .render-popup-button-container .render-popup-button ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-button-container .photo-button{color:#fff;background-color:#dda73f}.render-container .render-popup-container .render-popup-button-container .cancel-button{color:#fff;background-color:#5b6875}.render-container .render-popup-container .render-popup-preview{background-color:#fff;min-height:150px;min-width:275px;margin:5px 0;position:relative;width:275px;height:150px}.render-container .render-popup-container .render-popup-preview .render-popup-preview-placeholder{background-color:#fff;display:flex;justify-content:space-around;align-items:center;vertical-align:middle;min-height:150px;border:1px solid #ddd;color:#ddd;font-size:14px}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview{position:absolute;bottom:0;right:0;cursor:pointer;border-radius:0;border:none;height:30px;width:30px;background-color:#dda73f;color:#fff;margin:0}.render-container .render-popup-container .render-popup-preview .render-popup-refresh-preview ::ng-deep co-icon svg path{fill:#fff}.render-container .render-popup-container .render-popup-dropdown{margin:5px 0;width:100%}.render-container .render-popup-container .render-popup-dropdown .toggleable{cursor:pointer;display:flex;justify-content:right;align-content:center}.render-container .render-popup-container .render-popup-dropdown .toggleable p{padding:0;margin:0;font-size:12px;line-height:30px}.render-container .render-popup-container .render-popup-dropdown .toggleable .icon-rotate{transform:rotate(180deg)}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field{width:100%;font-size:14px}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-flex{background-color:#fff;color:#000;padding:3px 6px;border:1px solid #ddd}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-underline{display:none}.render-container .render-popup-container .render-popup-dropdown .mat-mdc-form-field ::ng-deep .mat-mdc-form-field-wrapper{padding-bottom:0}.render-container .render-popup-container .render-popup-dropdown .setting-part-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .third-width{width:32%}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button{float:none;box-sizing:border-box;padding:2px;background:none;cursor:pointer;border:none;width:25px;height:25px;margin:0 5px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon{display:block;width:25px;height:25px}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-buttons .amount-button co-icon ::ng-deep svg{fill:#5b6875}.render-container .render-popup-container .render-popup-dropdown .setting-part-container .setting-part-slider .mat-slider-horizontal{min-width:110px;height:28px}.render-container .render-progress{float:left;min-width:50px;border-radius:25px;line-height:50px;text-align:center;padding:0 60px 0 20px;background:#fff;color:#74b77f;font-weight:700;margin:0 -50px 0 0}.render-container .render-input-container{float:right}.render-container .render-input-container input{width:100px;height:24px;margin:5px 0;padding:0 10px;font-size:14px}.render-container button{pointer-events:all;width:50px;height:50px;float:right;border-radius:100%;position:relative;z-index:2;margin-bottom:10px}.render-container button.active{background:#74b77f;color:#fff}.render-container button>*{pointer-events:none}.render-indicators div{position:fixed;width:100px;height:100px}.render-indicators .render-indicator-top-left{left:5vw;top:10vh;border-left:10px solid #dda73f;border-top:10px solid #dda73f;border-top-left-radius:20px}.render-indicators .render-indicator-top-right{right:5vw;top:10vh;border-right:10px solid #dda73f;border-top:10px solid #dda73f;border-top-right-radius:20px}.render-indicators .render-indicator-bottom-left{left:5vw;bottom:5vh;border-left:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-left-radius:20px}.render-indicators .render-indicator-bottom-right{right:5vw;bottom:5vh;border-right:10px solid #dda73f;border-bottom:10px solid #dda73f;border-bottom-right-radius:20px}.render-warning{width:500px;position:fixed;top:20%;left:calc(50% - 250px);border-radius:15px;box-sizing:border-box;background-color:#fff;box-shadow:1px 0 20px #0000001f}.render-warning .render-warming-header{display:flex;justify-content:space-between;border-bottom:1px solid #c5c3c6;padding:20px 20px 10px;align-items:center}.render-warning .render-warming-header h2{padding:0;margin:0}.render-warning .render-warming-header .render-warning-close mat-icon{fill:#c5c3c6;color:#c5c3c6;cursor:pointer;transition:all .2s ease}.render-warning .render-warming-header .render-warning-close:hover mat-icon{fill:#46494c;color:#46494c}.render-warning .render-warning-body{padding:10px 20px}.render-warning .render-warning-footer{display:flex;justify-content:center;padding:0 20px 10px}.render-warning .render-warning-footer .render-popup-button{float:none;width:110px;border-radius:3px;cursor:pointer;border:none;display:flex;height:40px;align-items:center;justify-content:space-evenly;color:#fff;background-color:#5b6875}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon{display:inline-block;height:18px;width:18px}.render-warning .render-warning-footer .render-popup-button ::ng-deep co-icon svg path{fill:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: MessageBusService }, { type: ViewModeService }, { type: HomedecoratorSettingsService }, { type: HomedecoratorIconCacheService }, { type: RenderService }, { type: i1$2.MatDialog }, { type: SceneService }, { type: CameraService }, { type: ConfigurationService }, { type: HomedecoratorSettingsService }, { type: UtilsService }, { type: RoomService }, { type: WallMeasurementsService }, { type: ConnectionHeathService }, { type: HomedecoratorDictionaryService }, { type: DialogService }], propDecorators: { renderButton: [{
                 type: ViewChild,
                 args: ['renderButton']
             }] } });
@@ -36452,11 +36134,6 @@ class FloorplannerComponent {
         this._lastNode = null;
         this._subs = [];
         this._selectedFloor = null;
-        this._diagramBackgroundScale = 1;
-        this._diagramBackgroundCurrentScale = 100;
-        this._diagramBackgroundActiveZoom = false;
-        this._diagramBackgroundAlpha = 0.5;
-        this._showDiagramBackground = true;
         this._readyToDraw = false;
         this._needsRedraw = false;
         Object.keys(this._configToSync).forEach((key) => {
@@ -36489,7 +36166,7 @@ class FloorplannerComponent {
                 const dataUrl = this._canvas.toDataURL('image/jpeg');
                 FileUtils.DownloadFromDataUri(dataUrl, `MyRoomplan${new Date().toISOString()}.jpeg`);
             }
-        }), this._messageBusService.subscribe(MessageType.StartWithEmptyRoom, () => this.showStartMessage()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, (input) => this.setDiagramSettings(input)), this._messageBusService.subscribe(MessageType.ToggleDiagram, () => this.toggleDiagram()));
+        }), this._messageBusService.subscribe(MessageType.StartWithPreset, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadRoomFromPreset, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadRoomFromCloud, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.NewRoom, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.ResetRoomplan, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, () => this._clearBackground()), this._messageBusService.subscribe(MessageType.StartWithEmptyRoom, () => this.showStartMessage()), this._messageBusService.subscribe(MessageType.LoadScaledDiagram, (input) => this.setDiagramSettings(input)), this._messageBusService.subscribe(MessageType.ToggleDiagram, () => this.toggleDiagram()));
         this.touchMode = this._configurationService.getValue(ConfigurationKey.EnableTouch);
         this.currentDimensioning = this._configurationService.getValue(ConfigurationKey.DimensioningUnit);
         this.currentRoundingDecimals = this._configurationService.getValue(ConfigurationKey.RoundingDecimals);
@@ -36553,10 +36230,13 @@ class FloorplannerComponent {
             this._draw();
         });
     }
-    showStartMessage() {
-        if (this._diagramBackground) {
-            this._diagramBackground.src = '';
+    _clearBackground() {
+        if (this._renderService.diagramBackground) {
+            this._renderService.diagramBackground = undefined;
         }
+    }
+    showStartMessage() {
+        this._clearBackground();
         this._bluePrintService.reset();
         this.showStartingMessages = true;
         this._requestDraw();
@@ -36582,10 +36262,9 @@ class FloorplannerComponent {
         if (!this._coordinatesService.canZoomIn) {
             return;
         }
-        this._clear();
         this._coordinatesService.zoomIn();
-        this._diagramBackgroundScale *= this._coordinatesService.scalingFactor;
-        this._diagramBackgroundActiveZoom = true;
+        this._renderService.diagramBackgroundScale *= this._coordinatesService.scalingFactor;
+        this._renderService.diagramBackgroundActiveZoom = true;
         this._scale(this._coordinatesService.scalingFactor, this._coordinatesService.scalingFactor);
         this.resizeView();
         this._requestDraw();
@@ -36594,16 +36273,14 @@ class FloorplannerComponent {
         if (!this._coordinatesService.canZoomOut) {
             return;
         }
-        this._clear();
         this._coordinatesService.zoomOut();
-        this._diagramBackgroundScale *= (1 / this._coordinatesService.scalingFactor);
-        this._diagramBackgroundActiveZoom = true;
+        this._renderService.diagramBackgroundScale *= (1 / this._coordinatesService.scalingFactor);
+        this._renderService.diagramBackgroundActiveZoom = true;
         this._scale(1 / this._coordinatesService.scalingFactor, 1 / this._coordinatesService.scalingFactor);
         this.resizeView();
         this._requestDraw();
     }
     zoomReset() {
-        this._clear();
         this._scale(1 / this._viewScale, 1 / this._viewScale);
         this.reset();
     }
@@ -36948,15 +36625,15 @@ class FloorplannerComponent {
         this._coordinatesService.resetOrigin();
         this._viewScale = 100;
         this._bluePrintService.reset();
-        this._diagramBackground = input.background;
-        this._diagramBackgroundHeight = input.backgroundHeight;
-        this._diagramBackgroundWidth = input.backgroundWidth;
-        this._diagramScale = input.scale;
+        this._renderService.diagramBackground = input.background;
+        this._renderService.diagramBackgroundHeight = input.backgroundHeight;
+        this._renderService.diagramBackgroundWidth = input.backgroundWidth;
+        this._renderService.diagramBackgroundScale = input.scale;
         this._cameraZoom = input.cameraZoom;
         this._requestDraw();
     }
     toggleDiagram() {
-        this._showDiagramBackground = !this._showDiagramBackground;
+        this._renderService.showDiagramBackground = !this._renderService.showDiagramBackground;
         this._requestDraw();
     }
     _removeWall() {
@@ -37030,23 +36707,6 @@ class FloorplannerComponent {
         await this._bluePrintService.update();
         this._requestDraw();
     }
-    _drawBackground() {
-        if (this._diagramBackgroundActiveZoom) {
-            if (this._diagramBackgroundCurrentScale <= this._viewScale) {
-                this._diagramBackgroundWidth = this._diagramBackgroundWidth * this._coordinatesService.scalingFactor;
-                this._diagramBackgroundHeight = this._diagramBackgroundHeight * this._coordinatesService.scalingFactor;
-            }
-            else {
-                this._diagramBackgroundWidth = this._diagramBackgroundWidth * (1 / this._coordinatesService.scalingFactor);
-                this._diagramBackgroundHeight = this._diagramBackgroundHeight * (1 / this._coordinatesService.scalingFactor);
-            }
-            this._diagramBackgroundActiveZoom = false;
-        }
-        this._diagramBackgroundCurrentScale = this._viewScale;
-        this._context.globalAlpha = this._diagramBackgroundAlpha;
-        this._context.drawImage(this._diagramBackground, Math.abs(this._coordinatesService.originX) - (this._diagramBackgroundWidth * this._diagramScale / 2), Math.abs(this._coordinatesService.originY) - (this._diagramBackgroundHeight * this._diagramScale / 2), this._diagramBackgroundWidth * this._diagramScale, this._diagramBackgroundHeight * this._diagramScale);
-        this._context.globalAlpha = 1;
-    }
     _handleWindowResize() {
         if (this._canvas) {
             const parent = this._canvas.parentElement;
@@ -37059,11 +36719,6 @@ class FloorplannerComponent {
             this._requestDraw();
         }
     }
-    _clear() {
-        if (this._context && this._canvas) {
-            this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
-        }
-    }
     _updateWallPosition() {
         if (this._wallLength) {
             const startPoint = this._lastNode;
@@ -44489,7 +44144,7 @@ class ThreedselectorComponent {
             this.handleBuildResult(result);
         }), this._buildFurnitureService.currentActiveService.configureModeChanged.subscribe(configuringModeChange => this._handleConfigureModeChange(configuringModeChange)), this._buildFurnitureService.currentActiveService.toggleSelectedElement.subscribe((element) => this._selectedElementToggle(element)), this._buildFurnitureService.currentActiveService.buildFinished.subscribe((result) => this._handleBuildFinished(result)), this._buildFurnitureService.currentActiveService.answerSelected.subscribe((result) => this._answerSelected(result)), this._sceneService.onAfterRender.subscribe(() => this._handleRender()), 
         // this._appService.skuSet.subscribe(sku => this._handleSkuSet(sku)),
-        this._appService.materialPreviewSet.subscribe(material => this._handleMaterialSet(material)), this._appService.materialPreviewUpdate.subscribe(material => this._updateMaterialPreview(material)), this._appEventService.articleInfoReceived.subscribe(info => this._handleInfoClick(info)), this._messageService.subscribe(MessageType.UndefinedErrorOccured, () => this._handleUndefinedErrorOccured()), this._presetsService.afterLoad.subscribe(() => this._afterLoadFromPreset()), this._messageBus.subscribe(MessageType.Undo, () => this._clearItems()), this._messageBus.subscribe(MessageType.Redo, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithEmptyRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromCloud, () => this._clearItems()), this._messageBus.subscribe(MessageType.NewRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.ResetRoomplan, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadScaledDiagram, () => this._clearItems()), this._presetsService.beforeLoad.subscribe(() => this._clearItems()), this._messageService.subscribe(MessageType.ItemSelected, (item) => this.objectSelected(item)), this._messageService.subscribe(MessageType.ItemUnselected, () => this._removeButtons()), this.screenSizeService.screenSizeChanged.subscribe((info) => {
+        this._appService.materialPreviewSet.subscribe(material => this._handleMaterialSet(material)), this._appService.materialPreviewUpdate.subscribe(material => this._updateMaterialPreview(material)), this._appEventService.articleInfoReceived.subscribe(info => this._handleInfoClick(info)), this._messageService.subscribe(MessageType.UndefinedErrorOccured, () => this._handleUndefinedErrorOccured()), this._presetsService.afterLoad.subscribe(() => this._afterLoadFromPreset()), this._messageBus.subscribe(MessageType.Undo, () => this._clearItems()), this._messageBus.subscribe(MessageType.Redo, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithEmptyRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.StartWithPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromPreset, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadRoomFromCloud, () => this._clearItems()), this._messageBus.subscribe(MessageType.NewRoom, () => this._clearItems()), this._messageBus.subscribe(MessageType.ResetRoomplan, () => this._clearItems()), this._messageBus.subscribe(MessageType.LoadScaledDiagram, () => this._clearItems()), this._presetsService.beforeLoad.subscribe(() => this._clearItems()), this._messageService.subscribe(MessageType.ItemSelected, (item) => this.objectSelected(item)), this._messageService.subscribe(MessageType.ItemUnselected, () => this._removeButtons()), this._messageService.subscribe(MessageType.UserModelUploaded, (data) => this._addUploadedItem(data)), this.screenSizeService.screenSizeChanged.subscribe((info) => {
             this.shouldShowLabel = info.isPhoneSize;
         }), this._messageService.subscribe(MessageType.ChangeArticleConfigurationType, (showFullConfig) => this._setTemplateType(showFullConfig)), this._settingsService.settingsLoaded.subscribe((loaded) => {
             if (loaded) {
@@ -44565,6 +44220,9 @@ class ThreedselectorComponent {
     getObjects() {
         // return {furniture: this.threeService.model.saveFurniture()};
     }
+    async saveObjects() {
+        return Promise.resolve();
+    }
     objectSelected(object) {
         this._removeCustomButtons();
         this.showCustomizeButtons = true;
@@ -44625,7 +44283,7 @@ class ThreedselectorComponent {
     }
     // NEW CONFIGURATOR
     async handleBuildResult(result) {
-        if (!result || this.firstBuild) {
+        if (!result || this.firstBuild || !this._sceneService.scene) {
             return;
         }
         const customFloorGroupResult = new CustomFloorGroupResult();
@@ -44662,10 +44320,12 @@ class ThreedselectorComponent {
                     if (customFloorGroupResult.furniture) {
                         const closestWall = this._wallService.getClosestWall(customFloorGroupResult.furniture.position.x, customFloorGroupResult.furniture.position.z);
                         if (customFloorGroupResult.furniture instanceof CustomWallFloorItem && customFloorGroupResult.furniture.onWall) {
+                            this._itemService.removeItem(customFloorGroupResult.furniture, false, false);
                             customFloorGroupResult.furniture.placeOnWall(closestWall);
                             customFloorGroupResult.furniture.moveFromFloorToWall();
                         }
                         else if (customFloorGroupResult.furniture instanceof WallItem && !(customFloorGroupResult.furniture instanceof CustomWallFloorItem)) {
+                            this._itemService.removeItem(customFloorGroupResult.furniture, false, false);
                             customFloorGroupResult.furniture.placeOnWall(closestWall);
                         }
                         if (customFloorGroupResult.metaData.configurable) {
@@ -44735,7 +44395,7 @@ class ThreedselectorComponent {
         this._messageBus.emit(MessageType.FinishedIOneFurnitureBuild);
     }
     setMetadateFromObject(result) {
-        if (result.originalMetadata) {
+        if (result && result.originalMetadata) {
             const metadata = Object.assign({}, result.originalMetadata);
             metadata.decos = result.decos;
             metadata.selections = result.selections;
@@ -44784,21 +44444,29 @@ class ThreedselectorComponent {
         if (configuratorExternalSourceId) {
             if (settings.hasOwnProperty('settings')) {
                 const settingsInterface = settings['settings'];
+                configuratorSettingsClone.externalSourceId = configuratorExternalSourceId;
                 configuratorSettingsClone.username = settingsInterface.username;
-                configuratorSettingsClone.password = settingsInterface.password;
                 configuratorSettingsClone.url = settingsInterface.url;
                 configuratorSettingsClone.version = settingsInterface.version;
                 configuratorSettingsClone.schema = settingsInterface.schema;
+                configuratorSettingsClone.mainUrl = settings.mainUrl;
+                configuratorSettingsClone.mainSchema = settings.mainSchema;
+                configuratorSettingsClone.mainVersion = settings.mainVersion;
                 // Set here to just save it, when it comes back from the configurator, we need to add it to the metadata.
                 this._externalSourceData = settings;
             }
         }
         this._configuringService.scene = this._sceneService.scene;
-        this._initConfigurator(configuratorSettingsClone, sku);
+        this._initConfigurator(configuratorSettingsClone, sku, !!configuratorExternalSourceId);
+        // await this._configuringService.init(configuratorSettingsClone);
+        // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
+        // furnitureData.sku = sku;
+        // this._configuringService.isConfiguring = false;
+        // await this._configuringService.configure(furnitureData);
         this._startPosition = position;
         this.loadConfigurator = true;
         this._changeDetector.detectChanges();
-        return this._waitForBuildToFinish();
+        return this._waitForBuildToFinish(); // handleBuildResult(this._configuringService.buildResult);
     }
     async configureFurniture(object) {
         if (object instanceof Item) {
@@ -44809,16 +44477,33 @@ class ThreedselectorComponent {
             if (configuratorExternalSourceId) {
                 this._externalSourceData = object.metadata.externalSettings; // set it so we can restore them with the new config.
             }
-            this._initConfigurator(configuratorSettingsClone, object.metadata.itemIdentifier, object.metadata.itemId);
+            // make sure that if the object contains metadata, we set from project true
+            // await this._configuringService.init(configuratorSettingsClone);
+            this._initConfigurator(configuratorSettingsClone, object.metadata.itemIdentifier, !!configuratorExternalSourceId, object.metadata.itemId);
+            // const furnitureData: ConfigurationResultObject = new ConfigurationResultObject();
+            // furnitureData.sku = object.metadata.itemIdentifier;
+            // furnitureData.instanceId = object.metadata.itemId;
+            // this._configuringService.isConfiguring = true;
+            // await this._configuringService.configure(furnitureData);
             this._loadFurnitureService.currentActiveService.configurationDirty = true;
             this.loadConfigurator = true;
         }
     }
-    _initConfigurator(settings, sku, instanceId) {
-        this.configuratorSettings = settings;
+    _initConfigurator(settings, sku, external, instanceId) {
+        this.configuratorSettings = this._prepareSettings(settings, external);
         this.configuratorSku = sku;
         this.configuratorInstanceId = instanceId;
     }
+    _prepareSettings(settings, external = false) {
+        if (external) {
+            // no pre-defined stuff for external sources
+            settings.password = undefined;
+            settings.dataSessionId = undefined;
+            settings.sessionId = undefined;
+            settings.getAccessTokenFunction = undefined;
+        }
+        return settings;
+    }
     _resetConfigurator() {
         this.configuratorSettings = undefined;
         this.configuratorSku = undefined;
@@ -44858,6 +44543,7 @@ class ThreedselectorComponent {
         return configuratorSettingsClone;
     }
     _closeConfigurator() {
+        // this._configuringService.isConfiguring = false;
         this.loadConfigurator = false;
     }
     _clearItems() {
@@ -45302,6 +44988,7 @@ class ThreedselectorComponent {
             }
             this._prepareAddButtons();
         }
+        // this.handleBuildResult(result);
     }
     _resetElementPosition() {
         if (this.selectedElement && !this.standAlone) {
@@ -45511,6 +45198,38 @@ class ThreedselectorComponent {
           }
         }*/
     }
+    _addUploadedItem(data) {
+        if (!data) {
+            return;
+        }
+        const result = new ConfigurationResultObject();
+        result.object = data.object;
+        result.placement = data.placement;
+        result.resultType = ResultType.Loaded;
+        const type = itemTypeFromPlacement(result.placement);
+        result.position = isFloorType(type) ? this._bluePrintService.getRoomCenter() : new Vector3();
+        result.originalMetadata = {
+            itemName: data.object.name,
+            itemType: type,
+            configurable: false,
+            ione: false,
+            // rotation?: number | Euler;
+            // scale?: Vector3;
+            // centerPivot?: boolean;
+            thirdPartyModel: true,
+            // canElevate?: boolean;
+            // modelUrl?: string;
+            // scalable?: boolean;
+            // elevation?: number;
+            // elevationFixed?: boolean;
+            // elevationAdjustable?: boolean;
+            canScaleX: true,
+            canScaleY: true,
+            canScaleZ: true,
+            colorable: true
+        };
+        this.handleBuildResult(result);
+    }
     async _handleLoadIOneFurnitureIntoSceneBySKU(sku, settings, position) {
         const toast = new Toast();
         toast.message = 'MODEL_LOADING';
@@ -45521,6 +45240,32 @@ class ThreedselectorComponent {
         if (article.placement === HdecoPlacement.FloorDecoration) {
             this._floorService.selectedFloorArticle = article;
         }
+        if (article.externalCatalogId && article.externalSourceKey) {
+            try {
+                sku = article.externalSourceKey;
+                const catalogDefinition = this._connectorAdapterService.getCatalogDefinition(article.externalCatalogId);
+                const externalSource = this._connectorAdapterService.getExternalSourceFromId(catalogDefinition.externalSourceId);
+                const params = await this._connectorAdapterService.getPublicParams(externalSource.url, parseInt(externalSource.schema));
+                const homeDecoSettings = Object.assign(JSON.parse(params.homeDecoSettings ? params.homeDecoSettings : params.catalogSettings), new HomedecoratorSettings());
+                settings = {
+                    name: catalogDefinition.name,
+                    settings: homeDecoSettings,
+                    externalSourceId: externalSource.sourceId,
+                    catalogDefinition: catalogDefinition,
+                    schema: externalSource.schema,
+                    mainUrl: this._settingsService.settings.url,
+                    mainSchema: this._settingsService.settings.schema,
+                    mainVersion: this._settingsService.settings.version
+                };
+                settings.settings.password = '';
+                settings.settings.username = 'external';
+            }
+            catch (e) {
+                console.error(e);
+                this._messageBus.emit(MessageType.UndefinedErrorOccured);
+                return;
+            }
+        }
         const draggedData = {
             name: sku,
             constructFn: async (pos) => this.loadFurnitureFromSku(pos, sku, settings),
@@ -45547,7 +45292,8 @@ class ThreedselectorComponent {
     async _loadIOneFurnitureFromOriginal(md, pos, rot) {
         const newMetaData = { ...md };
         newMetaData.rotation = new Euler().copy(rot);
-        return this._handleLoadAndBuildFurniture(newMetaData, true, false, false, false, false);
+        await this._handleLoadAndBuildFurniture(newMetaData, true, false, false, false, false);
+        return this.handleBuildResult(this._configuringService.buildResult);
     }
     _loadIOneFurnitureFromSku(pos, sku, settings, standAlone = false) {
         const md = {
@@ -45672,6 +45418,7 @@ class ThreedselectorComponent {
             this._externalSourceData = furnitureData.externalSettings; // set it so we can restore them with the new config.
         }
         this._configuringService.scene = this._sceneService.scene;
+        // await this._configuringService.init(configuratorSettingsClone);
         const data = new ConfigurationResultObject();
         data.sku = furnitureData.itemIdentifier;
         data.articleName = furnitureData.itemName;
@@ -45691,6 +45438,7 @@ class ThreedselectorComponent {
         data.rotation = furnitureData.rotation;
         data.originalMetadata = furnitureData;
         await this._configuringService.configure(data, shouldCopyInstance, looseOriginalConfiguration, standAlone, fromScratch, fromPreset, loadFromProject);
+        // this._configuringService.isConfiguring = false;
         this.loadConfigurator = true;
     }
     _answerSelected(result) {
@@ -46415,7 +46163,7 @@ class DrawDialogComponent {
         this.customerInputLenght = this.inputLength.nativeElement.value;
     }
     handleMouseDown(event) {
-        if (this.draftingMode === 'movement') {
+        if (event.button === 2) { // right mouse button -> drag
             this.isDragging = true;
             this.dragStart.x = this.getEventLocation(event).x / this.cameraZoom - this.cameraOffset.x;
             this.dragStart.y = this.getEventLocation(event).y / this.cameraZoom - this.cameraOffset.y;
@@ -46428,11 +46176,9 @@ class DrawDialogComponent {
         }
     }
     handleMouseMove(event) {
-        if (this.draftingMode === 'movement') {
-            if (this.isDragging) {
-                this.cameraOffset.x = this.getEventLocation(event).x / this.cameraZoom - this.dragStart.x;
-                this.cameraOffset.y = this.getEventLocation(event).y / this.cameraZoom - this.dragStart.y;
-            }
+        if (this.isDragging) {
+            this.cameraOffset.x = this.getEventLocation(event).x / this.cameraZoom - this.dragStart.x;
+            this.cameraOffset.y = this.getEventLocation(event).y / this.cameraZoom - this.dragStart.y;
         }
     }
     handleMouseUp(event) {
@@ -46442,22 +46188,6 @@ class DrawDialogComponent {
     }
     handleMouseLeave(event) {
     }
-    clickingZoom(option) {
-        const zoomIn = -0.5;
-        const zoomOut = 0.5;
-        const zoomReset = 1;
-        if (option === 'in') {
-            this.cameraZoom -= zoomIn;
-        }
-        else if (option === 'out') {
-            this.cameraZoom -= zoomOut;
-        }
-        else if (option === 'reset') {
-            this.cameraZoom = zoomReset;
-        }
-        this.cameraZoom = Math.min(this.cameraZoom, this.maxZoom);
-        this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
-    }
     handleMouseWheel(event) {
         const zoomAmount = event.deltaY * this.scrollSensitivity;
         if (!this.isDragging) {
@@ -46468,6 +46198,9 @@ class DrawDialogComponent {
             this.cameraZoom = Math.max(this.cameraZoom, this.minZoom);
         }
     }
+    handleContextMenu(event) {
+        return false;
+    }
     getEventLocation(e) {
         if (e.touches && e.touches.length === 1) {
             return { x: e.touches[0].clientX, y: e.touches[0].clientY };
@@ -46551,11 +46284,11 @@ class DrawDialogComponent {
         return new Vector2(canvasX, canvasY);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: i1$2.MatDialog }, { token: MessageBusService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"top-bar-container\">\r\n  @if (draftingMode === 'movement') {\r\n    <div class=\"zoom-button-containers\">\r\n      <button (click)=\"clickingZoom('in')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('reset')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('out')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawDialogComponent, isStandalone: false, selector: "rp-draw-dialog", viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["drawCanvas"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputLength", first: true, predicate: ["inputLength"], descendants: true }, { propertyName: "hiddenImage", first: true, predicate: ["hiddenImage"], descendants: true }], ngImport: i0, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n    (contextmenu)=\"handleContextMenu($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rp-draw-dialog', standalone: false, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"top-bar-container\">\r\n  @if (draftingMode === 'movement') {\r\n    <div class=\"zoom-button-containers\">\r\n      <button (click)=\"clickingZoom('in')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_in</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('reset')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">all_out</mat-icon>\r\n      </button>\r\n      <button (click)=\"clickingZoom('out')\">\r\n        <mat-icon class=\"homedecorator-material-icons\">zoom_out</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n<div class=\"main-button-container\">\r\n  <mat-button-toggle-group\r\n    class=\"mode-toggle\"\r\n    (change)=\"setModus($event.value)\"\r\n    [value]=\"draftingMode\">\r\n    <mat-button-toggle [value]=\"'movement'\" [matTooltip]=\"'Zoom / verplaats modus'\">\r\n      <mat-icon svgIcon=\"hand-pointer\"></mat-icon>\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'scaling'\" [matTooltip]=\"'Maak referentie meting'\">\r\n      <mat-icon svgIcon=\"pen-ruler\"></mat-icon>\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"] }]
+            args: [{ selector: 'rp-draw-dialog', standalone: false, template: "<div class=\"model-header\">\r\n  <h1 mat-dialog-title>{{ 'OPEN_A_DIAGRAM' | localize }}</h1>\r\n  <button (click)=\"cancelAndReset()\" class=\"close-button\">\r\n    <mat-icon class=\"homedecorator-material-icons\">close</mat-icon>\r\n  </button>\r\n</div>\r\n<div class=\"canvas-wrapper\">\r\n  <canvas\r\n    #drawCanvas\r\n    (mousedown)=\"handleMouseDown($event)\"\r\n    (mousemove)=\"handleMouseMove($event)\"\r\n    (mouseup)=\"handleMouseUp($event)\"\r\n    (mouseleave)=\"handleMouseLeave($event)\"\r\n    (wheel)=\"handleMouseWheel($event)\"\r\n    (contextmenu)=\"handleContextMenu($event)\"\r\n  ></canvas>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  @if (draftingMode === 'scaling') {\r\n    <div class=\"reference-input-container\">\r\n      <div class=\"input-button-container\">\r\n        <input\r\n          (change)=\"updateUserValue()\"\r\n          [value]=\"customerInputLenght\"\r\n          #inputLength\r\n          type=\"number\"\r\n          placeholder=\"{{ 'PDF_REFERENCE_PLACEHOLDER' | localize}}\"\r\n          [attr.disabled]=\"this.measurePoints.length === 0 ? '' : null\"\r\n          >\r\n          <button (click)=\"resetPoints()\" title=\"Reset referentie meting\">\r\n            <mat-icon class=\"homedecorator-material-icons\">refresh</mat-icon>\r\n          </button>\r\n        </div>\r\n        <p class=\"helper-text\">{{ 'PDF_REFERENCE_HELPER' | localize }}</p>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"save-cancel-button-container\">\r\n      @if (draftingMode === 'scaling') {\r\n        <button (click)=\"submitLength()\" title=\"Opslaan\">\r\n          <mat-icon class=\"homedecorator-material-icons\">check_circle</mat-icon>\r\n          <span>{{'NEXT' | localize}}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <img #hiddenImage src=\"\" style=\"display: none;\">\r\n", styles: ["canvas{position:relative}button{cursor:pointer;color:#fff;background:#da9803;border:1px solid #da9803;border-radius:3px;box-sizing:border-box;padding:5px;display:flex;align-items:center}button:hover{background:#da9803;color:#fff}.main-button-container{display:flex;justify-content:center;margin-bottom:15px}.main-button-container .mat-button-toggle-checked{background:#da9803;color:#fff}.model-header{display:flex;justify-content:space-between;align-items:start}.model-header .close-button{background:none;color:#333;border:none;padding:0}.modal-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:30px}.reference-input-container .input-button-container{display:flex;align-items:center}.reference-input-container .input-button-container input{min-width:285px;border:1px solid #f7f7f9;border-radius:3px;height:35px;line-height:35px;box-sizing:border-box;padding:10px}.reference-input-container .input-button-container input:disabled{background:#f7f7f9;cursor:default}.reference-input-container .input-button-container button{border:none;display:inline-block}.reference-input-container .helper-text{font-size:13px;font-style:italic;margin:0;padding:0;display:block}.zoom-button-containers{display:flex;justify-items:center;justify-content:right}.zoom-button-containers button{margin:0 5px}.save-cancel-button-container{display:flex;justify-content:center;justify-items:center}.save-cancel-button-container button{margin:3px 10px;padding:8px 15px}.save-cancel-button-container button .homedecorator-material-icons{font-size:18px}.save-cancel-button-container button span{line-height:18px;font-size:15px}.canvas-wrapper{overflow:hidden;max-height:60vh;max-width:80vw}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -48160,7 +47893,7 @@ class ToolbarComponent {
             this.leftSidebar.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ItemService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: NewRenderService }, { token: ThirdPartyModelService }, { token: LightPresetsService }, { token: HomedecoratorConnectorAdapterService }, { token: ConnectionHeathService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: AppStateService }, { token: PresetsService }, { token: MessageBusService }, { token: HomedecoratorSettingsService }, { token: LocalStorageService }, { token: HomedecoratorIconCacheService }, { token: ScreenSizeAnalysisService }, { token: i1$2.MatDialog }, { token: ToastService }, { token: HomedecoratorAppService }, { token: PermanentStoreService }, { token: UtilsService }, { token: ItemService }, { token: FloorService }, { token: AnimationService }, { token: DevelopmentService }, { token: RenderService }, { token: ThirdPartyModelService }, { token: LightPresetsService }, { token: HomedecoratorConnectorAdapterService }, { token: ConnectionHeathService }, { token: HomedecoratorAppEventService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToolbarComponent, isStandalone: false, selector: "rp-toolbar", outputs: { externalSave: "externalSave" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, viewQueries: [{ propertyName: "leftSidebar", first: true, predicate: ["leftSidebar"], descendants: true, static: true }], ngImport: i0, template: `
       <!--
       <div class="layer layer&#45;&#45;toolbar">
@@ -48690,7 +48423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ])
                     ] /*,
                     changeDetection: ChangeDetectionStrategy.OnPush*/, standalone: false, styles: [":host{display:flex;flex-direction:column;position:absolute;top:0;z-index:100;height:100%;width:100%;pointer-events:none}:host h2{font-weight:600}:host h3{font-weight:600}:host .mat-toolbar.mat-primary{box-shadow:none;padding:0;background:transparent;height:40px;justify-content:space-between}:host .mat-toolbar .mat-icon{height:20px;width:20px;font-size:20px;line-height:20px}:host .hd-toolbar-spacer{display:flex;flex-basis:100%}:host .toast-wrapper{height:auto;position:absolute;top:0;left:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background:#74b77f;padding:30px;border-radius:0 0 10px 10px;min-width:150px;max-width:90%;color:#fff;text-align:center;transform:translate(-50%,-100%)}:host .toast-wrapper.warning{background:#f17300}:host .toast-wrapper.error{background:#cc2936}:host ::ng-deep .drawer__header{display:flex;align-items:center;min-height:40px;margin-bottom:16px}:host ::ng-deep .drawer__header h2{margin:0 auto 0 0;font-weight:600}:host ::ng-deep .mat-headline-6{font-weight:600}:host ::ng-deep .mat-subtitle-1{font-weight:600}:host ::ng-deep mat-tab-header,:host ::ng-deep .FileDrop{margin-bottom:16px}:host ::ng-deep .tab--skin ::ng-deep .mat-tab-label{height:52px;min-width:auto}:host ::ng-deep .drawer p{white-space:pre-wrap}:host ::ng-deep .mat-divider{margin:16px 0 24px}:host ::ng-deep .mat-drawer-backdrop{display:none}.storage-error{min-width:30px;height:30px;display:flex;align-items:center;align-self:center;border-radius:50%;justify-content:center;background:#fff;color:#c00;font-size:25px;font-weight:700}.layer--toolbar{display:flex;flex-direction:column}.toolbar{display:flex;z-index:101;flex-wrap:nowrap}.toolbar .menu-icon{min-width:50px;display:flex;justify-content:center;margin-left:-16px}.toolbar .left-toolbar,.toolbar .right-toolbar{display:flex;align-items:center;background:#da9803;border-radius:0 0 10px;padding:0 20px 0 10px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;height:100%;gap:12px}.toolbar .right-toolbar{border-radius:0 0 0 10px;padding:0 5px 0 10px}.toolbar .toolbar-icon-list{display:flex;align-items:center;justify-content:center}.toolbar .toolbar-icon-sub{display:flex;align-items:center;justify-content:center;padding:0 10px;gap:5px;border-right:1px solid rgba(255,255,255,.3803921569)}.toolbar .toolbar-icon-sub:last-child{border-right:none}.toolbar .toolbar-icon-sub:first-child{border-left:1px solid rgba(255,255,255,.3803921569);margin-left:10px}.toolbar .toolbar-icon{height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbar .toolbar-icon co-icon ::ng-deep{width:20px;height:20px}.toolbar .toolbar-icon co-icon ::ng-deep svg,.toolbar .toolbar-icon co-icon ::ng-deep path{fill:#fff}.toolbar .toolbar-icon co-icon.loading-green ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-green ::ng-deep path{fill:#74b77f}.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-orange ::ng-deep path{fill:#f17300}.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-yellow ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon co-icon.loading-red ::ng-deep svg,.toolbar .toolbar-icon co-icon.loading-red ::ng-deep path{fill:#cc2936}.toolbar .toolbar-icon.search co-icon{height:30px;width:30px}.toolbar .toolbar-icon.disabled{cursor:default}.toolbar .toolbar-icon.disabled co-icon ::ng-deep svg{fill:#00000042}.toolbar-logo{height:20px}.secondary-logo{margin-left:20px}.toolbar__nav{display:flex;flex-direction:row;padding-top:0}.toolbar__nav .mat-mdc-list-item{color:#fff;height:40px}.toolbar-row{flex:auto;display:flex;flex-direction:column;padding:0;pointer-events:none;position:relative;align-items:baseline;height:100%}::ng-deep mat-toolbar-row .toolbar--secondary{width:50px;padding:15px 0;flex-direction:column;background:#17253391;height:100%;gap:5px}::ng-deep mat-toolbar-row .toolbar--secondary button ::ng-deep{width:30px;height:30px;line-height:30px;color:#fff;display:flex;justify-content:center}::ng-deep mat-toolbar-row .toolbar--secondary .add-to-cart-button button ::ng-deep{color:#da9803}.toolbar--secondary .drawer{flex:auto;pointer-events:none;background:transparent}.wip-card{margin-left:5px;padding:0 10px;color:#fff;background-color:#7a828a}.wip-card .mat-mdc-card-content{font-size:12px}.drawer-container{position:static;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.drawer{width:420px;padding:16px;display:flex;flex-direction:column;left:50px}::ng-deep rp-category-library .mat-mdc-list-item ::ng-deep{border-color:#747c84}::ng-deep rp-category-library .mdc-list-item__primary-text{color:#000}::ng-deep rp-category-library .mdc-list-item:hover .mdc-list-item__primary-text{color:#000}.toolbar,.toolbar--secondary>*,.drawer-container>*,.drawer>*{pointer-events:all}.drawer__button{min-width:initial;padding:0;border:none;position:absolute;top:0;right:0;border-radius:50%}.blinker{animation:blinker 1s linear infinite}.badge-tooltip{position:relative}.badge-tooltip .mat-badge{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;right:-2px;bottom:13px}.badge-tooltip .mat-badge .mat-badge-content{background-color:transparent;color:#b71c1c;border:1px solid #b71c1c;animation:bounce 2s ease-out;animation-iteration-count:infinite;right:initial;left:initial;position:relative;height:12px;width:12px;line-height:12px;font-size:10px;bottom:initial}::ng-deep .tooltip-red{background:#b71c1c}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-20px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes blinker{50%{opacity:0}}::ng-deep .mat-mdc-menu-panel{width:256px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{display:flex;flex-direction:column;padding-left:10px;padding-right:10px}::ng-deep mat-drawer-content.mat-drawer-content{display:flex;height:100%;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: PresetsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: LocalStorageService }, { type: HomedecoratorIconCacheService }, { type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: ToastService }, { type: HomedecoratorAppService }, { type: PermanentStoreService }, { type: UtilsService }, { type: ItemService }, { type: FloorService }, { type: AnimationService }, { type: DevelopmentService }, { type: NewRenderService }, { type: ThirdPartyModelService }, { type: LightPresetsService }, { type: HomedecoratorConnectorAdapterService }, { type: ConnectionHeathService }, { type: HomedecoratorAppEventService }], propDecorators: { externalSave: [{
+        }], ctorParameters: () => [{ type: AppStateService }, { type: PresetsService }, { type: MessageBusService }, { type: HomedecoratorSettingsService }, { type: LocalStorageService }, { type: HomedecoratorIconCacheService }, { type: ScreenSizeAnalysisService }, { type: i1$2.MatDialog }, { type: ToastService }, { type: HomedecoratorAppService }, { type: PermanentStoreService }, { type: UtilsService }, { type: ItemService }, { type: FloorService }, { type: AnimationService }, { type: DevelopmentService }, { type: RenderService }, { type: ThirdPartyModelService }, { type: LightPresetsService }, { type: HomedecoratorConnectorAdapterService }, { type: ConnectionHeathService }, { type: HomedecoratorAppEventService }], propDecorators: { externalSave: [{
                 type: Output
             }], leftSidebar: [{
                 type: ViewChild,
@@ -48871,28 +48604,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['fileUpload']
             }] } });
 
-// A pipe for appending strings to other strings in view templates.
-class AppendPipe {
-    transform(value, append) {
-        if (!value) {
-            return '';
-        }
-        if (!append) {
-            return value;
-        }
-        return value + append;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, isStandalone: false, name: "append" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppendPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'append',
-                    standalone: false
-                }]
-        }] });
-
 class ProductCatalogComponent {
     get shown() {
         return this._showCatalog;
@@ -49315,7 +49026,7 @@ class HomedecoratorComponent {
         return this._settings;
     }
     constructor(appService, // don't remove this, needs to be created on a high level
-    controllerService, appState, presetsService, screenAnalysis, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _parentEventService, _ownEventService, _integrationService, _sceneService, _webWorkerService) {
+    controllerService, appState, presetsService, screenAnalysis, _iconRegistry, _domSanitizer, _messageService, _homedecoratorService, _parentEventService, _ownEventService, _integrationService, _sceneService, _webWorkerService, _injector) {
         this.appService = appService;
         this.controllerService = controllerService;
         this.appState = appState;
@@ -49330,6 +49041,7 @@ class HomedecoratorComponent {
         this._integrationService = _integrationService;
         this._sceneService = _sceneService;
         this._webWorkerService = _webWorkerService;
+        this._injector = _injector;
         this.generalFilterOrders = [
             { name: 'CATEGORY', order: 1 },
             { name: 'TURNOVER_GROUP', order: 2 },
@@ -49415,6 +49127,7 @@ class HomedecoratorComponent {
         // };
         this._subs = [];
         this._initCommunication = false;
+        ServiceLocator.injector = this._injector;
         this._eventService = _parentEventService || _ownEventService;
         this._webWorkerService.initWorkers();
     }
@@ -49533,87 +49246,85 @@ class HomedecoratorComponent {
     _initConnection() {
         this._homedecoratorService.init(this._settings);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i4.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, deps: [{ token: HomedecoratorAppService }, { token: HomedecoratorConnectorService }, { token: AppStateService }, { token: PresetsService }, { token: ScreenSizeAnalysisService }, { token: i4.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: MessageBusService }, { token: HomedecoratorService }, { token: HomedecoratorAppEventService, optional: true, skipSelf: true }, { token: HomedecoratorAppEventService, optional: true, self: true }, { token: IntegrationService }, { token: SceneService }, { token: WebWorkerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HomedecoratorComponent, isStandalone: false, selector: "co-homedecorator", inputs: { generalFilterOrders: "generalFilterOrders", purchaseFilterOrders: "purchaseFilterOrders", logisticsFilterOrders: "logisticsFilterOrders", initCommunication: "initCommunication", projectToLoad: "projectToLoad", settings: "settings" }, host: { listeners: { "document:keyup": "keyup($event)" }, properties: { "class.co-homedecorator": "this.showClass" } }, providers: [
             APPLICATION_SERVICES_PROVIDERS
-        ], ngImport: i0, template: `
-      @if (loaded) {
-        @if (loaded) {
-          <div class="viewport">
-            <progress-bar></progress-bar>
-            <rp-loading-overlay>
-              <rp-core3d></rp-core3d>
-              <rp-room-planner></rp-room-planner>
-              <rp-furniture-manager></rp-furniture-manager>
-              <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
-              <rp-threedselector></rp-threedselector>
-              <rp-toolbar (externalSave)="handleExternalSave()"></rp-toolbar>
-              <rp-product-catalog
-                [generalFilterOrders]="generalFilterOrders"
-                [purchaseFilterOrders]="purchaseFilterOrders"
-                [logisticsFilterOrders]="logisticsFilterOrders"
-              ></rp-product-catalog>
-              <co-lite-selector></co-lite-selector>
-              <rp-help></rp-help>
-            </rp-loading-overlay>
-          </div>
-        }
-        <rp-loader [show]="controllerService.shouldShowLoader"></rp-loader>
-        @if (shouldShowLandscapeMessage) {
-          <div class="mobile-portrait-overlay">
-            <!--
-            <mat-icon svgIcon="tilt-phone" class="tilt-phone-icon"></mat-icon>
-            -->
-            <div>
-              <!--
-              {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}
-              -->
-            </div>
-          </div>
-        }
-      }
-      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", outputs: ["externalSave"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }, { kind: "component", type: i27.LiteSelectorComponent, selector: "co-lite-selector", inputs: ["show", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: `
+      @if (loaded) {
+        @if (loaded) {
+          <div class="viewport">
+            <progress-bar></progress-bar>
+            <rp-loading-overlay>
+              <rp-core3d></rp-core3d>
+              <rp-room-planner></rp-room-planner>
+              <rp-furniture-manager></rp-furniture-manager>
+              <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
+              <rp-threedselector></rp-threedselector>
+              <rp-toolbar (externalSave)="handleExternalSave()"></rp-toolbar>
+              <rp-product-catalog
+                [generalFilterOrders]="generalFilterOrders"
+                [purchaseFilterOrders]="purchaseFilterOrders"
+                [logisticsFilterOrders]="logisticsFilterOrders"
+              ></rp-product-catalog>
+              <rp-help></rp-help>
+            </rp-loading-overlay>
+          </div>
+        }
+        <rp-loader [show]="controllerService.shouldShowLoader"></rp-loader>
+        @if (shouldShowLandscapeMessage) {
+          <div class="mobile-portrait-overlay">
+            <!--
+            <mat-icon svgIcon="tilt-phone" class="tilt-phone-icon"></mat-icon>
+            -->
+            <div>
+              <!--
+              {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}
+              -->
+            </div>
+          </div>
+        }
+      }
+      `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "progress-bar" }, { kind: "component", type: LoadingOverlayComponent, selector: "rp-loading-overlay" }, { kind: "component", type: HdLoaderComponent, selector: "rp-loader", inputs: ["show"] }, { kind: "component", type: Core3dComponent, selector: "rp-core3d" }, { kind: "component", type: RoomPlannerComponent, selector: "rp-room-planner", inputs: ["isLoading"], outputs: ["done", "showPlugin", "focusControls"] }, { kind: "component", type: FurnitureManagerComponent, selector: "rp-furniture-manager" }, { kind: "component", type: PresetsComponent, selector: "rp-presets", inputs: ["openNewRoomDialog"] }, { kind: "component", type: ThreedselectorComponent, selector: "rp-threedselector", inputs: ["selections"], outputs: ["customizeButtonClicked"] }, { kind: "component", type: ToolbarComponent, selector: "rp-toolbar", outputs: ["externalSave"] }, { kind: "component", type: ProductCatalogComponent, selector: "rp-product-catalog", inputs: ["generalFilterOrders", "purchaseFilterOrders", "logisticsFilterOrders"] }, { kind: "component", type: HelpComponent, selector: "rp-help" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-homedecorator',
-                    template: `
-      @if (loaded) {
-        @if (loaded) {
-          <div class="viewport">
-            <progress-bar></progress-bar>
-            <rp-loading-overlay>
-              <rp-core3d></rp-core3d>
-              <rp-room-planner></rp-room-planner>
-              <rp-furniture-manager></rp-furniture-manager>
-              <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
-              <rp-threedselector></rp-threedselector>
-              <rp-toolbar (externalSave)="handleExternalSave()"></rp-toolbar>
-              <rp-product-catalog
-                [generalFilterOrders]="generalFilterOrders"
-                [purchaseFilterOrders]="purchaseFilterOrders"
-                [logisticsFilterOrders]="logisticsFilterOrders"
-              ></rp-product-catalog>
-              <co-lite-selector></co-lite-selector>
-              <rp-help></rp-help>
-            </rp-loading-overlay>
-          </div>
-        }
-        <rp-loader [show]="controllerService.shouldShowLoader"></rp-loader>
-        @if (shouldShowLandscapeMessage) {
-          <div class="mobile-portrait-overlay">
-            <!--
-            <mat-icon svgIcon="tilt-phone" class="tilt-phone-icon"></mat-icon>
-            -->
-            <div>
-              <!--
-              {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}
-              -->
-            </div>
-          </div>
-        }
-      }
+                    template: `
+      @if (loaded) {
+        @if (loaded) {
+          <div class="viewport">
+            <progress-bar></progress-bar>
+            <rp-loading-overlay>
+              <rp-core3d></rp-core3d>
+              <rp-room-planner></rp-room-planner>
+              <rp-furniture-manager></rp-furniture-manager>
+              <rp-presets [openNewRoomDialog]="!projectToLoad"></rp-presets>
+              <rp-threedselector></rp-threedselector>
+              <rp-toolbar (externalSave)="handleExternalSave()"></rp-toolbar>
+              <rp-product-catalog
+                [generalFilterOrders]="generalFilterOrders"
+                [purchaseFilterOrders]="purchaseFilterOrders"
+                [logisticsFilterOrders]="logisticsFilterOrders"
+              ></rp-product-catalog>
+              <rp-help></rp-help>
+            </rp-loading-overlay>
+          </div>
+        }
+        <rp-loader [show]="controllerService.shouldShowLoader"></rp-loader>
+        @if (shouldShowLandscapeMessage) {
+          <div class="mobile-portrait-overlay">
+            <!--
+            <mat-icon svgIcon="tilt-phone" class="tilt-phone-icon"></mat-icon>
+            -->
+            <div>
+              <!--
+              {{'PLEASE_USE_PHONE_IN_LANDSCAPE_MODE' | localize}}
+              -->
+            </div>
+          </div>
+        }
+      }
       `,
                     encapsulation: ViewEncapsulation.None,
                     providers: [
@@ -49629,7 +49340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: IntegrationService }, { type: SceneService }, { type: WebWorkerService }], propDecorators: { generalFilterOrders: [{
+                }] }, { type: IntegrationService }, { type: SceneService }, { type: WebWorkerService }, { type: i0.Injector }], propDecorators: { generalFilterOrders: [{
                 type: Input
             }], purchaseFilterOrders: [{
                 type: Input
@@ -52447,11 +52158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 class HomedecoratorModule {
-    constructor(_injector) {
-        this._injector = _injector;
-        ServiceLocator.injector = this._injector;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorModule, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: HomedecoratorModule, bootstrap: [HomedecoratorComponent], declarations: [HomedecoratorComponent], imports: [CommonModule,
             ProgressBarModule,
             LoadingOverlayModule,
@@ -52500,7 +52207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ],
                     bootstrap: [HomedecoratorComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }] });
 
 class MaterialBuilderComponent {
     set settings(value) {