Bug/3194/camera perspective of custom view

visualization/CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 - Revert [#3655](https://github.com/MaibornWolff/codecharta/pull/3665) as we implement new navigation methods
+- Camera perspective is correctly adopted from the custom configuration[#3194](https://github.com/MaibornWolff/codecharta/pull/3194)
 
 ## [1.127.0] - 2024-08-12
 

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.ts

@@ -4,6 +4,7 @@ import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
 import { ThreeCameraService } from "../../../../codeMap/threeViewer/threeCamera.service"
 import { ThreeMapControlsService } from "../../../../codeMap/threeViewer/threeMapControls.service"
 import { Store } from "@ngrx/store"
+import { ThreeRendererService } from "../../../../codeMap/threeViewer/threeRenderer.service"
 
 @Component({
     selector: "cc-apply-custom-config-button",
@@ -17,10 +18,17 @@ export class ApplyCustomConfigButtonComponent {
     constructor(
         private store: Store,
         private threeCameraService: ThreeCameraService,
-        private threeOrbitControlsService: ThreeMapControlsService
+        private threeOrbitControlsService: ThreeMapControlsService,
+        private threeRendererService: ThreeRendererService
     ) {}
 
     applyCustomConfig() {
-        CustomConfigHelper.applyCustomConfig(this.customConfigItem.id, this.store, this.threeCameraService, this.threeOrbitControlsService)
+        CustomConfigHelper.applyCustomConfig(
+            this.customConfigItem.id,
+            this.store,
+            this.threeCameraService,
+            this.threeOrbitControlsService,
+            this.threeRendererService
+        )
     }
 }

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.ts

@@ -5,6 +5,7 @@ import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.ser
 import { ThreeMapControlsService } from "../../../codeMap/threeViewer/threeMapControls.service"
 import { Store } from "@ngrx/store"
 import { MatExpansionPanel } from "@angular/material/expansion"
+import { ThreeRendererService } from "../../../codeMap/threeViewer/threeRenderer.service"
 
 @Component({
     selector: "cc-custom-config-item-group",
@@ -22,7 +23,8 @@ export class CustomConfigItemGroupComponent implements OnChanges {
     constructor(
         private store: Store,
         private threeCameraService: ThreeCameraService,
-        private threeOrbitControlsService: ThreeMapControlsService
+        private threeOrbitControlsService: ThreeMapControlsService,
+        private threeRendererService: ThreeRendererService
     ) {}
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -57,6 +59,12 @@ export class CustomConfigItemGroupComponent implements OnChanges {
     }
 
     applyCustomConfig(configId: string) {
-        CustomConfigHelper.applyCustomConfig(configId, this.store, this.threeCameraService, this.threeOrbitControlsService)
+        CustomConfigHelper.applyCustomConfig(
+            configId,
+            this.store,
+            this.threeCameraService,
+            this.threeOrbitControlsService,
+            this.threeRendererService
+        )
     }
 }

visualization/app/codeCharta/util/customConfigHelper.ts

@@ -14,7 +14,7 @@ import { ThreeMapControlsService } from "../ui/codeMap/threeViewer/threeMapContr
 import { BehaviorSubject } from "rxjs"
 import { VisibleFilesBySelectionMode } from "../ui/customConfigs/visibleFilesBySelectionMode.selector"
 import { Store } from "@ngrx/store"
-import { setState } from "../state/store/state.actions"
+import { ThreeRendererService } from "../ui/codeMap/threeViewer/threeRenderer.service"
 
 export const CUSTOM_CONFIG_FILE_EXTENSION = ".cc.config.json"
 const CUSTOM_CONFIGS_LOCAL_STORAGE_VERSION = "1.0.1"
@@ -193,18 +193,14 @@ export class CustomConfigHelper {
         configId: string,
         store: Store,
         threeCameraService: ThreeCameraService,
-        threeOrbitControlsService: ThreeMapControlsService
+        threeOrbitControlsService: ThreeMapControlsService,
+        threeRendererService: ThreeRendererService
     ) {
         const customConfig = this.getCustomConfigSettings(configId)
-        store.dispatch(setState({ value: customConfig.stateSettings }))
-
-        // TODO: remove this dirty timeout and set camera settings properly
-        // This timeout is a chance that CustomConfigs for a small map can be restored and applied completely (even the camera positions)
         if (customConfig.camera) {
-            setTimeout(() => {
-                threeOrbitControlsService.setControlTarget(customConfig.camera.cameraTarget)
-                threeCameraService.setPosition(customConfig.camera.camera)
-            }, 100)
+            threeCameraService.setPosition(customConfig.camera.camera)
+            threeOrbitControlsService.setControlTarget(customConfig.camera.cameraTarget)
         }
+        threeRendererService.render()
     }
 }