Refactor/2318/migrate area settings panel

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 -   Track not only changes to color metric options by slider but also by related input field [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
 -   Migrate center-map-button-component to Angular [#2809](https://github.com/MaibornWolff/codecharta/pull/2809)
 -   Migrate the following components to Angular: globalSettingsButton.component, dialog.globalSettings.component, layoutSelection.component, sharpnessModeSelector.component, maxTreeMapFiles.component, maxTreeMapFiles.service, hideFlatBuildings.service, resetCameraIfNewFileIsLoaded.service [#2815](https://github.com/MaibornWolff/codecharta/pull/2815)
+-   Migrate area-settings-panel-component to Angular [#2821](https://github.com/MaibornWolff/codecharta/pull/2821)
 
 ## [1.96.0] - 2022-05-17
 

visualization/app/app.module.ts

@@ -28,7 +28,6 @@ import {
 } from "./codeCharta/services/ajs-upgraded-providers"
 import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module"
 import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
-import { InvertAreaOptionComponent } from "./codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component"
 import { FocusButtonsComponent } from "./codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component"
 import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuilding.service"
 import { LoadingFileProgressSpinnerModule } from "./codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.module"
@@ -44,14 +43,15 @@ import { UploadFilesButtonComponent } from "./codeCharta/ui/toolBar/uploadFilesB
 import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooser/metricTypeHovered/metricTypeHovered.module"
 import { SliderModule } from "./codeCharta/ui/slider/slider.module"
 import { HeightSettingsPanelModule } from "./codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.module"
-import { ResetSettingsButtonModule } from "./codeCharta/ui/resetSettingsButton/resetSettingsButton.module"
 import { MetricColorRangeSliderModule } from "./codeCharta/ui/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.module"
 import { FilePanelModule } from "./codeCharta/ui/filePanel/filePanel.module"
 import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs.module"
 import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
 import { CenterMapButtonModule } from "./codeCharta/ui/viewCube/centerMapButton/centerMapButton.module"
 import { GlobalConfigurationButtonModule } from "./codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module"
 import { SyncGlobalSettingsInLocalStorageEffect } from "./codeCharta/state/effects/syncGlobalSettingsInLocalStorage/syncGlobalSettingsInLocalStorage.effect"
+import { AreaSettingsPanelModule } from "./codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.module"
+import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect"
 
 @NgModule({
 	imports: [
@@ -64,7 +64,8 @@ import { SyncGlobalSettingsInLocalStorageEffect } from "./codeCharta/state/effec
 			TrackEventUsageDataEffect,
 			BlacklistSearchPatternEffect,
 			ResetColorRangeEffect,
-			SyncGlobalSettingsInLocalStorageEffect
+			SyncGlobalSettingsInLocalStorageEffect,
+			ResetDynamicMarginEffect
 		]),
 		SliderModule,
 		AttributeSideBarModule,
@@ -83,10 +84,10 @@ import { SyncGlobalSettingsInLocalStorageEffect } from "./codeCharta/state/effec
 		CustomConfigsModule,
 		FilePanelModule,
 		HeightSettingsPanelModule,
-		ResetSettingsButtonModule,
 		MetricColorRangeSliderModule,
 		CenterMapButtonModule,
-		GlobalConfigurationButtonModule
+		GlobalConfigurationButtonModule,
+		AreaSettingsPanelModule
 	],
 	providers: [
 		threeSceneServiceProvider,
@@ -95,14 +96,13 @@ import { SyncGlobalSettingsInLocalStorageEffect } from "./codeCharta/state/effec
 		threeCameraServiceProvider,
 		threeOrbitControlsServiceProvider
 	],
-	declarations: [InvertAreaOptionComponent, EdgeMetricToggleComponent, UploadFilesButtonComponent, ...dialogs],
+	declarations: [EdgeMetricToggleComponent, UploadFilesButtonComponent, ...dialogs],
 	entryComponents: [
 		AttributeSideBarComponent,
 		Export3DMapButtonComponent,
 		LegendPanelComponent,
 		LabelledColorPickerComponent,
 		ColorPickerForMapColorComponent,
-		InvertAreaOptionComponent,
 		FocusButtonsComponent,
 		LoadingFileProgressSpinnerComponent,
 		LoadingMapProgressSpinnerComponent,

visualization/app/codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect.spec.ts

@@ -0,0 +1,42 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { Action } from "redux"
+import { Subject } from "rxjs"
+import { mocked } from "ts-jest/utils"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { setDynamicMargin } from "../../store/appSettings/dynamicMargin/dynamicMargin.actions"
+import { resetSelection } from "../../store/files/files.actions"
+import { Store } from "../../store/store"
+import { ResetDynamicMarginEffect } from "./resetDynamicMargin.effect"
+
+jest.mock("../../store/store", () => ({
+	Store: {}
+}))
+
+describe("resetDynamicMarginEffect", () => {
+	const MockedStore = mocked(Store)
+
+	beforeEach(async () => {
+		MockedStore.dispatch = jest.fn()
+
+		EffectsModule.actions$ = new Subject<Action>()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([ResetDynamicMarginEffect])]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	afterEach(() => {
+		EffectsModule.actions$.complete()
+	})
+
+	it("should ignore a not relevant action", () => {
+		EffectsModule.actions$.next({ type: "whatever" })
+		expect(MockedStore.dispatch).not.toHaveBeenCalled()
+	})
+
+	it("should reset default margin to true on file selection actions", () => {
+		EffectsModule.actions$.next(resetSelection())
+		expect(MockedStore.dispatch).toHaveBeenLastCalledWith(setDynamicMargin(true))
+	})
+})

visualization/app/codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect.ts

@@ -0,0 +1,19 @@
+import { Inject, Injectable } from "@angular/core"
+import { filter, map } from "rxjs"
+import { isActionOfType } from "../../../util/reduxHelper"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { Actions, ActionsToken } from "../../angular-redux/effects/effects.module"
+import { setDynamicMargin } from "../../store/appSettings/dynamicMargin/dynamicMargin.actions"
+import { FilesSelectionActions } from "../../store/files/files.actions"
+
+@Injectable()
+export class ResetDynamicMarginEffect {
+	constructor(@Inject(ActionsToken) private actions$: Actions) {}
+
+	resetDynamicMargin$ = createEffect(() =>
+		this.actions$.pipe(
+			filter(action => isActionOfType(action.type, FilesSelectionActions)),
+			map(() => setDynamicMargin(true))
+		)
+	)
+}

visualization/app/codeCharta/state/store/appSettings/dynamicMargin/dynamicMargin.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/store"
+import { appSettingsSelector } from "../appSettings.selector"
+
+export const dynamicMarginSelector = createSelector([appSettingsSelector], appSettings => appSettings.dynamicMargin)

visualization/app/codeCharta/state/store/dynamicSettings/margin/margin.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/store"
+import { dynamicSettingsSelector } from "../dynamicSettings.selector"
+
+export const marginSelector = createSelector([dynamicSettingsSelector], dynamicSettings => dynamicSettings.margin)

visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.module.ts

@@ -6,13 +6,14 @@ import { ResetSettingsButtonComponent } from "./resetSettingsButton.component"
 import { downgradeComponent } from "@angular/upgrade/static"
 import { NgModule } from "@angular/core"
 import { CommonModule } from "@angular/common"
+import { MaterialModule } from "../../../material/material.module"
 
 angular
 	.module("app.codeCharta.ui.resetSettingsButton", ["app.codeCharta.state"])
 	.directive("ccResetSettingsButton", downgradeComponent({ component: ResetSettingsButtonComponent }))
 
 @NgModule({
-	imports: [CommonModule],
+	imports: [CommonModule, MaterialModule],
 	declarations: [ResetSettingsButtonComponent],
 	exports: [ResetSettingsButtonComponent],
 	entryComponents: [ResetSettingsButtonComponent]