@colijnit/homedecorator 261.20.3 → 261.20.4

package/fesm2022/colijnit-homedecorator.mjs

@@ -4157,6 +4157,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 +4325,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;
@@ -19607,6 +19622,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' }); }
 }
@@ -22997,7 +23015,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)) {
@@ -44489,7 +44509,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 +44585,9 @@ class ThreedselectorComponent {
     getObjects() {
         // return {furniture: this.threeService.model.saveFurniture()};
     }
+    async saveObjects() {
+        return Promise.resolve();
+    }
     objectSelected(object) {
         this._removeCustomButtons();
         this.showCustomizeButtons = true;
@@ -44625,7 +44648,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 +44685,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 +44760,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 +44809,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 +44842,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 +44908,7 @@ class ThreedselectorComponent {
         return configuratorSettingsClone;
     }
     _closeConfigurator() {
+        // this._configuringService.isConfiguring = false;
         this.loadConfigurator = false;
     }
     _clearItems() {
@@ -45302,6 +45353,7 @@ class ThreedselectorComponent {
             }
             this._prepareAddButtons();
         }
+        // this.handleBuildResult(result);
     }
     _resetElementPosition() {
         if (this.selectedElement && !this.standAlone) {
@@ -45511,6 +45563,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 +45605,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 +45657,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 +45783,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 +45803,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) {
@@ -49536,84 +49649,82 @@ class HomedecoratorComponent {
     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.ɵ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: [