Enabling/Disabling floor labels in settings (#3175)

Implement feature, Add store entry, Add tests

Co-authored-by: RomanenkoVladimir <vladimir.romanenko@maibornwolff.de>

visualization/app/codeCharta/codeCharta.model.ts

@@ -158,6 +158,7 @@ export interface AppSettings {
 	screenshotToClipboardEnabled: boolean
 	colorLabels: colorLabelOptions
 	isColorMetricLinkedToHeightMetric: boolean
+	enableFloorLabels: boolean
 }
 
 export interface MapColors {

visualization/app/codeCharta/state/effects/renderCodeMapEffect/actionsRequiringRerender.ts

@@ -25,6 +25,7 @@ import { MarginActions } from "../../store/dynamicSettings/margin/margin.actions
 import { SearchPatternActions } from "../../store/dynamicSettings/searchPattern/searchPattern.actions"
 import { MarkedPackagesActions } from "../../store/fileSettings/markedPackages/markedPackages.actions"
 import { StateActions } from "../../store/state.actions"
+import { EnableFloorLabelsActions } from "../../store/appSettings/enableFloorLabels/enableFloorLabels.actions"
 
 export const actionsRequiringRerender = [
 	ColorLabelsActions,
@@ -53,5 +54,6 @@ export const actionsRequiringRerender = [
 	ColorMetricActions,
 	ShowOnlyBuildingsWithEdgesActions,
 	MarkedPackagesActions,
-	StateActions
+	StateActions,
+	EnableFloorLabelsActions
 ]

visualization/app/codeCharta/state/store/appSettings/appSettings.actions.ts

@@ -26,6 +26,7 @@ import { defaultScreenshotToClipboardEnabled } from "./enableClipboard/screensho
 import { defaultInvertArea } from "./invertArea/invertArea.actions"
 import { defaultIsEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.actions"
 import { defaultIsColorMetricLinkedToHeightMetric } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.actions"
+import { defaultEnableFloorLabel } from "./enableFloorLabels/enableFloorLabels.actions"
 
 export enum AppSettingsActions {
 	SET_APP_SETTINGS = "SET_APP_SETTINGS"
@@ -71,5 +72,6 @@ export const defaultAppSettings: AppSettings = {
 	layoutAlgorithm: defaultLayoutAlgorithm,
 	maxTreeMapFiles: defaultMaxTreeMapFiles,
 	sharpnessMode: defaultSharpnessMode,
-	isColorMetricLinkedToHeightMetric: defaultIsColorMetricLinkedToHeightMetric
+	isColorMetricLinkedToHeightMetric: defaultIsColorMetricLinkedToHeightMetric,
+	enableFloorLabels: defaultEnableFloorLabel
 }

visualization/app/codeCharta/state/store/appSettings/appSettings.reducer.ts

@@ -25,6 +25,7 @@ import { screenshotToClipboardEnabled } from "./enableClipboard/screenshotToClip
 import { invertArea } from "./invertArea/invertArea.reducer"
 import { isEdgeMetricVisible } from "./isEdgeMetricVisible/isEdgeMetricVisible.reducer"
 import { isColorMetricLinkedToHeightMetric } from "./isHeightAndColorMetricLinked/isColorMetricLinkedToHeightMetric.reducer"
+import { enableFloorLabels } from "./enableFloorLabels/enableFloorLabels.reducer"
 
 const appSettings = combineReducers({
 	colorLabels,
@@ -52,7 +53,8 @@ const appSettings = combineReducers({
 	layoutAlgorithm,
 	maxTreeMapFiles,
 	sharpnessMode,
-	isColorMetricLinkedToHeightMetric
+	isColorMetricLinkedToHeightMetric,
+	enableFloorLabels
 })
 
 export default appSettings

visualization/app/codeCharta/state/store/appSettings/enableFloorLabels/enableFloorLabels.actions.ts

@@ -0,0 +1,21 @@
+import { CCAction } from "../../../../codeCharta.model"
+
+export enum EnableFloorLabelsActions {
+	SET_ENABLE_FLOOR_LABELS = "SET_ENABLE_FLOOR_LABELS"
+}
+
+export interface SetEnableFloorLabelsAction extends CCAction {
+	type: EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS
+	payload: boolean
+}
+
+export type EnableFloorLabelAction = SetEnableFloorLabelsAction
+
+export function setEnableFloorLabels(enableFloorLabel: boolean = defaultEnableFloorLabel): SetEnableFloorLabelsAction {
+	return {
+		type: EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS,
+		payload: enableFloorLabel
+	}
+}
+
+export const defaultEnableFloorLabel = true

visualization/app/codeCharta/state/store/appSettings/enableFloorLabels/enableFloorLabels.reducer.spec.ts

@@ -0,0 +1,26 @@
+import { enableFloorLabels } from "./enableFloorLabels.reducer"
+import { EnableFloorLabelAction, setEnableFloorLabels } from "./enableFloorLabels.actions"
+
+describe("enableFloorLabel", () => {
+	describe("Default State", () => {
+		it("should initialize the default state", () => {
+			const result = enableFloorLabels(undefined, {} as EnableFloorLabelAction)
+
+			expect(result).toBeTruthy()
+		})
+	})
+
+	describe("Action: SET_ENABLE_FLOOR_LABEL", () => {
+		it("should set new enableFloorLabel", () => {
+			const result = enableFloorLabels(true, setEnableFloorLabels(false))
+
+			expect(result).toBeFalsy()
+		})
+
+		it("should set default colorMetric", () => {
+			const result = enableFloorLabels(false, setEnableFloorLabels())
+
+			expect(result).toBeTruthy()
+		})
+	})
+})

visualization/app/codeCharta/state/store/appSettings/enableFloorLabels/enableFloorLabels.reducer.ts

@@ -0,0 +1,10 @@
+import { EnableFloorLabelAction, EnableFloorLabelsActions, setEnableFloorLabels } from "./enableFloorLabels.actions"
+
+export function enableFloorLabels(state = setEnableFloorLabels().payload, action: EnableFloorLabelAction) {
+	switch (action.type) {
+		case EnableFloorLabelsActions.SET_ENABLE_FLOOR_LABELS:
+			return action.payload
+		default:
+			return state
+	}
+}

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

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

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.spec.ts

@@ -21,6 +21,7 @@ import { TestBed } from "@angular/core/testing"
 import { State } from "../../../state/angular-redux/state"
 import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
 import { Store } from "../../../state/angular-redux/store"
+import { setEnableFloorLabels } from "../../../state/store/appSettings/enableFloorLabels/enableFloorLabels.actions"
 
 jest.mock("../../../state/selectors/accumulatedData/idToNode.selector", () => ({
 	idToNodeSelector: jest.fn()
@@ -453,5 +454,15 @@ describe("ThreeSceneService", () => {
 
 			expect(floorLabelDrawerSpy).not.toHaveBeenCalled()
 		})
+
+		it("should not add floor labels if floor labels are disabled", () => {
+			threeSceneService["notifyMapMeshChanged"] = jest.fn()
+			const floorLabelDrawerSpy = jest.spyOn(FloorLabelDrawer.prototype, "draw").mockReturnValue([])
+
+			store.dispatch(setEnableFloorLabels(false))
+			threeSceneService.setMapMesh([TEST_NODE_LEAF], new CodeMapMesh(TEST_NODES, state.getValue(), false))
+
+			expect(floorLabelDrawerSpy).not.toHaveBeenCalled()
+		})
 	})
 })

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts

@@ -80,8 +80,8 @@ export class ThreeSceneService {
 	private initFloorLabels(nodes: Node[]) {
 		this.floorLabelPlanes.clear()
 
-		const { layoutAlgorithm } = this.state.getValue().appSettings
-		if (layoutAlgorithm !== LayoutAlgorithm.SquarifiedTreeMap) {
+		const { layoutAlgorithm, enableFloorLabels } = this.state.getValue().appSettings
+		if (layoutAlgorithm !== LayoutAlgorithm.SquarifiedTreeMap || !enableFloorLabels) {
 			return
 		}
 
@@ -93,7 +93,7 @@ export class ThreeSceneService {
 		const scalingVector = new Vector3(scaling.x, scaling.y, scaling.z)
 
 		this.floorLabelDrawer = new FloorLabelDrawer(this.mapMesh.getNodes(), rootNode, treeMapSize, scalingVector)
-		const floorLabels = this.floorLabelDrawer.draw()
+		const floorLabels = this.floorLabelDrawer.draw(this.state.getValue())
 
 		if (floorLabels.length > 0) {
 			this.floorLabelPlanes.add(...floorLabels)

visualization/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.component.html

@@ -7,6 +7,8 @@
 	[max]="100"
 ></cc-slider>
 
+<mat-checkbox (change)="setEnableFloorLabel($event)" [checked]="enableFloorLabels$ | async"> Enable Floor Labels </mat-checkbox>
+
 <div class="bottom-row">
 	<mat-checkbox
 		class="default-margin"

visualization/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.component.spec.ts

@@ -24,4 +24,9 @@ describe("AreaSettingsPanelComponent", () => {
 		detectChanges()
 		expect(screen.queryByRole("checkbox", { checked: false, name: "Default margin (50px)" })).not.toBe(null)
 	})
+
+	it("should display enableFloorLabels-checkbox", async () => {
+		await render(AreaSettingsPanelComponent, { excludeComponentDeclaration: true })
+		expect(screen.queryByText("Enable Floor Labels")).not.toBe(null)
+	})
 })

visualization/app/codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.component.ts

@@ -7,6 +7,8 @@ import { setMargin } from "../../../state/store/dynamicSettings/margin/margin.ac
 import { dynamicMarginSelector } from "../../../state/store/appSettings/dynamicMargin/dynamicMargin.selector"
 import { setDynamicMargin } from "../../../state/store/appSettings/dynamicMargin/dynamicMargin.actions"
 import { MatCheckboxChange } from "@angular/material/checkbox"
+import { setEnableFloorLabels } from "../../../state/store/appSettings/enableFloorLabels/enableFloorLabels.actions"
+import { enableFloorLabelsSelector } from "../../../state/store/appSettings/enableFloorLabels/enableFloorLabels.selector"
 
 @Component({
 	selector: "cc-area-settings-panel",
@@ -17,6 +19,7 @@ export class AreaSettingsPanelComponent {
 
 	margin$ = this.store.select(marginSelector)
 	dynamicMargin$ = this.store.select(dynamicMarginSelector)
+	enableFloorLabels$ = this.store.select(enableFloorLabelsSelector)
 
 	applyDebouncedMargin = debounce((margin: number) => {
 		this.store.dispatch(setMargin(margin))
@@ -28,4 +31,8 @@ export class AreaSettingsPanelComponent {
 	setDynamicMargin($event: MatCheckboxChange) {
 		this.store.dispatch(setDynamicMargin($event.checked))
 	}
+
+	setEnableFloorLabel(event: MatCheckboxChange) {
+		this.store.dispatch(setEnableFloorLabels(event.checked))
+	}
 }