Bug/3876/reset camera

visualization/CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 - Fix applying Custom Views [#3898](https://github.com/MaibornWolff/codecharta/pull/3898)
+- The camera is now only reset when the area or the height of the map is changed [#3896](https://github.com/MaibornWolff/codecharta/pull/3896)
 
 ## [1.131.2] - 2024-12-04
 

visualization/app/codeCharta/state/effects/autoFitCodeMapChange/autoFitCodeMap.effect.spec.ts

@@ -12,6 +12,8 @@ import { Action } from "@ngrx/store"
 import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { provideMockActions } from "@ngrx/effects/testing"
 import { LayoutAlgorithm } from "../../../codeCharta.model"
+import { selectorsTriggeringAutoFit } from "./selectorsTriggeringAutoFit"
+import { colorRangeSelector } from "../../store/dynamicSettings/colorRange/colorRange.selector"
 
 describe("autoFitCodeMapOnFileSelectionChangeEffect", () => {
     let mockedRenderCodeMap$: Subject<unknown>
@@ -23,16 +25,18 @@ describe("autoFitCodeMapOnFileSelectionChangeEffect", () => {
         actions$ = new BehaviorSubject({ type: "" })
         mockedRenderCodeMap$ = new Subject()
         mockedAutoFitTo = jest.fn()
+        const mockedSelectorsTriggeringAutoFit = selectorsTriggeringAutoFit.map(selector => {
+            return { selector, value: [] }
+        })
         TestBed.configureTestingModule({
             imports: [EffectsModule.forRoot([AutoFitCodeMapEffect])],
             providers: [
                 { provide: RenderCodeMapEffect, useValue: { renderCodeMap$: mockedRenderCodeMap$ } },
                 provideMockStore({
                     selectors: [
-                        { selector: visibleFileStatesSelector, value: [] },
-                        { selector: focusedNodePathSelector, value: [] },
-                        { selector: layoutAlgorithmSelector, value: LayoutAlgorithm.StreetMap },
-                        { selector: resetCameraIfNewFileIsLoadedSelector, value: true }
+                        ...mockedSelectorsTriggeringAutoFit,
+                        { selector: resetCameraIfNewFileIsLoadedSelector, value: true },
+                        { selector: colorRangeSelector, value: { from: 0, to: 0 } }
                     ]
                 }),
                 provideMockActions(() => actions$),
@@ -71,6 +75,13 @@ describe("autoFitCodeMapOnFileSelectionChangeEffect", () => {
         expect(mockedAutoFitTo).not.toHaveBeenCalled()
     })
 
+    it("should do nothing when color range has changed", () => {
+        store.overrideSelector(colorRangeSelector, { from: 1, to: 2 })
+        store.refreshState()
+        mockedRenderCodeMap$.next(undefined)
+        expect(mockedAutoFitTo).not.toHaveBeenCalled()
+    })
+
     it("should auto fit map when focused node paths has changed", () => {
         store.overrideSelector(focusedNodePathSelector, [])
         store.refreshState()

visualization/app/codeCharta/state/effects/autoFitCodeMapChange/autoFitCodeMap.effect.ts

@@ -1,14 +1,12 @@
 import { Injectable } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { Actions, createEffect, ofType } from "@ngrx/effects"
-import { switchMap, filter, skip, take, tap, combineLatest, withLatestFrom, first } from "rxjs"
+import { combineLatest, filter, first, skip, switchMap, take, tap, withLatestFrom } from "rxjs"
 import { CcState } from "../../../codeCharta.model"
 import { ThreeMapControlsService } from "../../../ui/codeMap/threeViewer/threeMapControls.service"
-import { visibleFileStatesSelector } from "../../selectors/visibleFileStates/visibleFileStates.selector"
-import { layoutAlgorithmSelector } from "../../store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
 import { resetCameraIfNewFileIsLoadedSelector } from "../../store/appSettings/resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.selector"
-import { focusedNodePathSelector } from "../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
 import { RenderCodeMapEffect } from "../renderCodeMapEffect/renderCodeMap.effect"
+import { selectorsTriggeringAutoFit } from "./selectorsTriggeringAutoFit"
 
 @Injectable()
 export class AutoFitCodeMapEffect {
@@ -21,11 +19,7 @@ export class AutoFitCodeMapEffect {
 
     autoFitTo$ = createEffect(
         () =>
-            combineLatest([
-                this.store.select(visibleFileStatesSelector),
-                this.store.select(focusedNodePathSelector),
-                this.store.select(layoutAlgorithmSelector)
-            ]).pipe(
+            combineLatest(selectorsTriggeringAutoFit.map(selector => this.store.select(selector))).pipe(
                 skip(1), // initial map load is already fitted
                 withLatestFrom(this.store.select(resetCameraIfNewFileIsLoadedSelector)),
                 filter(([, resetCameraIfNewFileIsLoaded]) => resetCameraIfNewFileIsLoaded),

visualization/app/codeCharta/state/effects/autoFitCodeMapChange/selectorsTriggeringAutoFit.ts

@@ -0,0 +1,20 @@
+import { visibleFileStatesSelector } from "../../selectors/visibleFileStates/visibleFileStates.selector"
+import { focusedNodePathSelector } from "../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+import { layoutAlgorithmSelector } from "../../store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
+import { invertAreaSelector } from "../../store/appSettings/invertArea/invertArea.selector"
+import { marginSelector } from "../../store/dynamicSettings/margin/margin.selector"
+import { DefaultProjectorFn, MemoizedSelector } from "@ngrx/store"
+import { enableFloorLabelsSelector } from "../../store/appSettings/enableFloorLabels/enableFloorLabels.selector"
+import { areaMetricSelector } from "../../store/dynamicSettings/areaMetric/areaMetric.selector"
+import { isDeltaStateSelector } from "../../selectors/isDeltaState.selector"
+
+export const selectorsTriggeringAutoFit: MemoizedSelector<any, any, DefaultProjectorFn<any>>[] = [
+    visibleFileStatesSelector,
+    focusedNodePathSelector,
+    layoutAlgorithmSelector,
+    invertAreaSelector,
+    marginSelector,
+    enableFloorLabelsSelector,
+    areaMetricSelector,
+    isDeltaStateSelector
+]

visualization/app/codeCharta/state/store/state.manager.ts

@@ -6,7 +6,6 @@ import { appStatus, defaultAppStatus } from "./appStatus/appStatus.reducer"
 import { ActionReducer } from "@ngrx/store"
 import { CcState } from "../../codeCharta.model"
 import { isSetStateAction } from "./state.actions"
-import { clone } from "../../util/clone"
 
 export const appReducers = {
     fileSettings,
@@ -26,11 +25,8 @@ export const defaultState: CcState = {
 export const setStateMiddleware =
     (reducer: ActionReducer<CcState>): ActionReducer<CcState> =>
     (state, action) => {
-        if (isSetStateAction(action)) {
-            const newState = clone(state)
-            return _applyPartialState(newState, action.value)
-        }
-        return reducer(state, action)
+        const newState = isSetStateAction(action) ? _applyPartialState({ ...state }, action.value) : state
+        return reducer(newState, action)
     }
 
 const objectWithDynamicKeysInStore = new Set([
@@ -59,7 +55,7 @@ export function _applyPartialState<T>(applyTo: T, toBeApplied: unknown, composed
         applyTo[key] =
             typeof value !== "object" || objectWithDynamicKeysInStore.has(composedJoinedPath)
                 ? value
-                : _applyPartialState(applyTo[key], value, newComposedPath)
+                : _applyPartialState({ ...applyTo[key] }, value, newComposedPath)
     }
 
     return applyTo