codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/codeMap/codeMap.component.ts

@@ -1,5 +1,4 @@
-import "./codeMap.component.scss"
-import { Component, Inject, AfterViewInit, ElementRef, OnDestroy } from "@angular/core"
+import { Component, AfterViewInit, ElementRef, OnDestroy, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
 import { ThreeViewerService } from "./threeViewer/threeViewer.service"
@@ -10,7 +9,9 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-code-map",
-	template: require("./codeMap.component.html")
+	templateUrl: "./codeMap.component.html",
+	styleUrls: ["./codeMap.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CodeMapComponent implements AfterViewInit, OnDestroy {
 	isLoadingFile$ = this.store.select(isLoadingFileSelector)
@@ -26,11 +27,11 @@ export class CodeMapComponent implements AfterViewInit, OnDestroy {
 		.subscribe()
 
 	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store,
-		@Inject(ThreeViewerService) private threeViewerService: ThreeViewerService,
-		@Inject(CodeMapMouseEventService) private codeMapMouseEventService: CodeMapMouseEventService,
-		@Inject(ElementRef) private elementReference: ElementRef
+		public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
+		private store: Store,
+		private threeViewerService: ThreeViewerService,
+		private codeMapMouseEventService: CodeMapMouseEventService,
+		private elementReference: ElementRef
 	) {}
 
 	ngAfterViewInit(): void {

package/app/codeCharta/ui/codeMap/codeMap.label.service.ts

@@ -5,7 +5,7 @@ import { ThreeCameraService } from "./threeViewer/threeCamera.service"
 import { ThreeSceneService } from "./threeViewer/threeSceneService"
 import { ColorConverter } from "../../util/color/colorConverter"
 import { State } from "../../state/angular-redux/state"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { treeMapSize } from "../../util/algorithm/treeMapLayout/treeMapHelper"
 
 interface InternalLabel {
@@ -33,10 +33,10 @@ export class CodeMapLabelService {
 	private nodeHeight = 0
 
 	constructor(
-		@Inject(State) private state: State,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private state: State,
+		private threeCameraService: ThreeCameraService,
+		private threeSceneService: ThreeSceneService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {
 		this.labels = new Array<InternalLabel>()
 		this.threeOrbitControlsService.subscribe("onCameraChanged", () => this.onCameraChanged())

package/app/codeCharta/ui/codeMap/codeMap.mouseEvent.service.spec.ts

@@ -6,7 +6,7 @@ import { ThreeRendererService } from "./threeViewer/threeRenderer.service"
 import { ViewCubeMouseEventsService } from "../viewCube/viewCube.mouseEvents.service"
 import { CodeMapBuilding } from "./rendering/codeMapBuilding"
 import { CODE_MAP_BUILDING, CONSTANT_HIGHLIGHT, TEST_FILE_WITH_PATHS, TEST_NODES } from "../../util/dataMocks"
-import { BlacklistType, CodeMapNode, Node } from "../../codeCharta.model"
+import { BlacklistItem, CodeMapNode, Node } from "../../codeCharta.model"
 import { NodeDecorator } from "../../util/nodeDecorator"
 import { klona } from "klona"
 import { CodeMapLabelService } from "./codeMap.label.service"
@@ -15,7 +15,6 @@ import { BufferGeometry, Material, Object3D, Raycaster, Vector3 } from "three"
 import { ThreeViewerService } from "./threeViewer/threeViewer.service"
 import { setShowMetricLabelNameValue } from "../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.actions"
 import { setShowMetricLabelNodeName } from "../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.actions"
-import { mocked } from "ts-jest/utils"
 import { idToNodeSelector } from "../../state/selectors/accumulatedData/idToNode.selector"
 import { IdToBuildingService } from "../../services/idToBuilding/idToBuilding.service"
 import { Store } from "../../state/angular-redux/store"
@@ -28,7 +27,7 @@ import {
 jest.mock("../../state/selectors/accumulatedData/idToNode.selector", () => ({
 	idToNodeSelector: jest.fn()
 }))
-const mockedIdToNodeSelector = mocked(idToNodeSelector)
+const mockedIdToNodeSelector = jest.mocked(idToNodeSelector)
 
 describe("codeMapMouseEventService", () => {
 	let codeMapMouseEventService: CodeMapMouseEventService
@@ -231,7 +230,7 @@ describe("codeMapMouseEventService", () => {
 
 	describe("onBlacklistChanged", () => {
 		it("should deselect the building when the selected building is excluded", () => {
-			const blacklist = [{ path: CODE_MAP_BUILDING.node.path, type: BlacklistType.exclude }]
+			const blacklist: BlacklistItem[] = [{ path: CODE_MAP_BUILDING.node.path, type: "exclude" }]
 
 			codeMapMouseEventService.onBlacklistChanged(blacklist)
 
@@ -239,7 +238,7 @@ describe("codeMapMouseEventService", () => {
 		})
 
 		it("should deselect the building when the selected building is hidden", () => {
-			const blacklist = [{ path: CODE_MAP_BUILDING.node.path, type: BlacklistType.flatten }]
+			const blacklist: BlacklistItem[] = [{ path: CODE_MAP_BUILDING.node.path, type: "flatten" }]
 
 			codeMapMouseEventService.onBlacklistChanged(blacklist)
 
@@ -502,6 +501,7 @@ describe("codeMapMouseEventService", () => {
 		describe("on left click", () => {
 			beforeEach(() => {
 				event = { button: ClickType.LeftClick, clientX: 10, clientY: 20 }
+				codeMapMouseEventService["intersectedBuilding"] = undefined
 			})
 			it("should change the cursor to default when the left click is triggered", () => {
 				document.body.style.cursor = CursorType.Pointer
@@ -538,7 +538,7 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.selectBuilding).toHaveBeenCalledWith(codeMapBuilding)
 			})
 
-			it("should call clearselection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
+			it("should call clearSelection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)
 				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
@@ -548,6 +548,18 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.clearSelection).toHaveBeenCalled()
 			})
 
+			it("should not call clearSelection, when the mouse has moved less or exact 3 pixels but a building is currently being clicked upon", () => {
+				codeMapMouseEventService.onDocumentMouseMove(event)
+				codeMapMouseEventService.onDocumentMouseDown(event)
+				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
+				codeMapMouseEventService["intersectedBuilding"] = CODE_MAP_BUILDING
+
+				codeMapMouseEventService.onDocumentMouseUp(event)
+
+				expect(threeSceneService.clearSelection).toHaveBeenCalledTimes(0)
+				expect(threeSceneService.selectBuilding).toHaveBeenLastCalledWith(CODE_MAP_BUILDING)
+			})
+
 			it("should not call clear selection, when mouse has moved more than 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)

package/app/codeCharta/ui/codeMap/codeMap.mouseEvent.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { ThreeCameraService } from "./threeViewer/threeCamera.service"
 import { CodeMapBuilding } from "./rendering/codeMapBuilding"
 import { ViewCubeMouseEventsService } from "../viewCube/viewCube.mouseEvents.service"
@@ -15,12 +15,12 @@ import { setRightClickedNodeData } from "../../state/store/appStatus/rightClicke
 import { idToNodeSelector } from "../../state/selectors/accumulatedData/idToNode.selector"
 import { IdToBuildingService } from "../../services/idToBuilding/idToBuilding.service"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
-import { debounce } from "lodash"
 import { tap, distinctUntilChanged } from "rxjs"
 import { Store } from "../../state/angular-redux/store"
 import { visibleFileStatesSelector } from "../../state/selectors/visibleFileStates.selector"
 import { blacklistSelector } from "../../state/store/fileSettings/blacklist/blacklist.selector"
 import { State } from "../../state/angular-redux/state"
+import { debounce } from "../../util/debounce"
 
 interface Coordinates {
 	x: number
@@ -40,7 +40,7 @@ export enum CursorType {
 }
 
 @Injectable({ providedIn: "root" })
-export class CodeMapMouseEventService {
+export class CodeMapMouseEventService implements OnDestroy {
 	private readonly THRESHOLD_FOR_MOUSE_MOVEMENT_TRACKING = 3
 
 	private intersectedBuilding: CodeMapBuilding
@@ -52,26 +52,15 @@ export class CodeMapMouseEventService {
 	private isMoving = false
 	private raycaster = new Raycaster()
 	private temporaryLabelForBuilding = null
-
-	constructor(
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(CodeMapLabelService) private codeMapLabelService: CodeMapLabelService,
-		@Inject(ViewCubeMouseEventsService) private viewCubeMouseEvents: ViewCubeMouseEventsService,
-		@Inject(ThreeViewerService) private threeViewerService: ThreeViewerService,
-		@Inject(IdToBuildingService) private idToBuilding: IdToBuildingService
-	) {
+	private subscriptions = [
 		this.store
 			.select(visibleFileStatesSelector)
 			.pipe(tap(() => this.onFilesSelectionChanged()))
-			.subscribe()
+			.subscribe(),
 		this.store
 			.select(blacklistSelector)
 			.pipe(tap(blacklist => this.onBlacklistChanged(blacklist)))
-			.subscribe()
+			.subscribe(),
 		this.store
 			.select(hoveredNodeIdSelector)
 			.pipe(
@@ -85,6 +74,24 @@ export class CodeMapMouseEventService {
 				})
 			)
 			.subscribe()
+	]
+
+	constructor(
+		private threeCameraService: ThreeCameraService,
+		private threeRendererService: ThreeRendererService,
+		private threeSceneService: ThreeSceneService,
+		private store: Store,
+		private state: State,
+		private codeMapLabelService: CodeMapLabelService,
+		private viewCubeMouseEvents: ViewCubeMouseEventsService,
+		private threeViewerService: ThreeViewerService,
+		private idToBuilding: IdToBuildingService
+	) {}
+
+	ngOnDestroy(): void {
+		for (const subscription of this.subscriptions) {
+			subscription.unsubscribe()
+		}
 	}
 
 	static changeCursorIndicator(cursorIcon: CursorType) {
@@ -92,10 +99,7 @@ export class CodeMapMouseEventService {
 	}
 
 	start() {
-		this.threeRendererService.renderer.domElement.addEventListener(
-			"mousemove",
-			debounce(event => this.onDocumentMouseMove(event), 60)
-		)
+		this.threeRendererService.renderer.domElement.addEventListener("mousemove", debounce(this.onDocumentMouseMove, 1))
 		this.threeRendererService.renderer.domElement.addEventListener("mouseup", event => this.onDocumentMouseUp(event))
 		this.threeRendererService.renderer.domElement.addEventListener("mousedown", event => this.onDocumentMouseDown(event))
 		this.threeRendererService.renderer.domElement.addEventListener("dblclick", () => this.onDocumentDoubleClick())
@@ -103,7 +107,7 @@ export class CodeMapMouseEventService {
 		this.threeRendererService.renderer.domElement.addEventListener("mouseenter", () => this.onDocumentMouseEnter())
 		this.threeRendererService.renderer.domElement.addEventListener(
 			"wheel",
-			debounce(() => this.threeRendererService.render(), 60)
+			debounce(() => this.threeRendererService.render(), 1)
 		)
 		this.viewCubeMouseEvents.subscribe("viewCubeEventPropagation", this.onViewCubeEventPropagation)
 	}
@@ -260,7 +264,7 @@ export class CodeMapMouseEventService {
 		}
 	}
 
-	onDocumentMouseMove(event: MouseEvent) {
+	onDocumentMouseMove = (event: MouseEvent) => {
 		this.mouse.x = event.clientX
 		this.mouse.y = event.clientY
 		this.updateHovering()
@@ -349,11 +353,12 @@ export class CodeMapMouseEventService {
 	private onLeftClick() {
 		this.isGrabbing = false
 		if (!this.hasMouseMovedMoreThanThreePixels(this.mouseOnLastClick)) {
-			this.threeSceneService.clearSelection()
-			this.threeSceneService.clearConstantHighlight()
 			if (this.intersectedBuilding) {
 				this.threeSceneService.selectBuilding(this.intersectedBuilding)
+			} else {
+				this.threeSceneService.clearSelection()
 			}
+			this.threeSceneService.clearConstantHighlight()
 		}
 		this.threeRendererService.render()
 	}

package/app/codeCharta/ui/codeMap/codeMap.render.service.spec.ts

@@ -26,15 +26,14 @@ import { setShowMetricLabelNameValue } from "../../state/store/appSettings/showM
 import { klona } from "klona"
 import { ThreeStatsService } from "./threeViewer/threeStats.service"
 import { setColorLabels } from "../../state/store/appSettings/colorLabels/colorLabels.actions"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
 import { CodeMapMouseEventService } from "./codeMap.mouseEvent.service"
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
-const mockedNodeMetricDataSelector = nodeMetricDataSelector as unknown as jest.Mock
-jest.mock("../../state/selectors/accumulatedData/metricData/nodeMetricData.selector", () => ({
-	nodeMetricDataSelector: jest.fn(),
-	UNARY_METRIC: "unary"
+const mockedMetricDataSelector = metricDataSelector as unknown as jest.Mock
+jest.mock("../../state/selectors/accumulatedData/metricData/metricData.selector", () => ({
+	metricDataSelector: jest.fn()
 }))
 
 describe("codeMapRenderService", () => {
@@ -74,7 +73,10 @@ describe("codeMapRenderService", () => {
 		NodeDecorator.decorateParentNodesWithAggregatedAttributes(map, false, DEFAULT_STATE.fileSettings.attributeTypes)
 		store.dispatch(setState(STATE))
 		store.dispatch(unfocusNode())
-		mockedNodeMetricDataSelector.mockImplementation(() => METRIC_DATA)
+		mockedMetricDataSelector.mockImplementation(() => ({
+			nodeMetricData: METRIC_DATA,
+			edgeMetricData: []
+		}))
 	}
 
 	function rebuildService() {

package/app/codeCharta/ui/codeMap/codeMap.render.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { CodeMapMesh } from "./rendering/codeMapMesh"
 import { createTreemapNodes } from "../../util/algorithm/treeMapLayout/treeMapGenerator"
 import { CodeMapLabelService } from "./codeMap.label.service"
@@ -8,32 +8,37 @@ import { CodeMapNode, LayoutAlgorithm, Node } from "../../codeCharta.model"
 import { isDeltaState } from "../../model/files/files.helper"
 import { StreetLayoutGenerator } from "../../util/algorithm/streetLayout/streetLayoutGenerator"
 import { ThreeStatsService } from "./threeViewer/threeStats.service"
-import { nodeMetricDataSelector } from "../../state/selectors/accumulatedData/metricData/nodeMetricData.selector"
 import { CodeMapMouseEventService } from "./codeMap.mouseEvent.service"
 import { Store } from "../../state/angular-redux/store"
 import { isLoadingFileSelector } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.selector"
-import { tap } from "rxjs"
+import { Subscription, tap } from "rxjs"
 import { State } from "../../state/angular-redux/state"
+import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 
 @Injectable({ providedIn: "root" })
-export class CodeMapRenderService {
+export class CodeMapRenderService implements OnDestroy {
 	private nodesByColor = {
 		positive: [],
 		neutral: [],
 		negative: []
 	}
 	private unflattenedNodes
+	private subscription: Subscription
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(CodeMapLabelService) private codeMapLabelService: CodeMapLabelService,
-		@Inject(CodeMapArrowService) private codeMapArrowService: CodeMapArrowService,
-		@Inject(ThreeStatsService) private threeStatsService: ThreeStatsService,
-		@Inject(CodeMapMouseEventService) private codeMapMouseEventService: CodeMapMouseEventService
+		private store: Store,
+		private state: State,
+		private threeSceneService: ThreeSceneService,
+		private codeMapLabelService: CodeMapLabelService,
+		private codeMapArrowService: CodeMapArrowService,
+		private threeStatsService: ThreeStatsService,
+		private codeMapMouseEventService: CodeMapMouseEventService
 	) {
-		this.store.select(isLoadingFileSelector).pipe(tap(this.onIsLoadingFileChanged)).subscribe()
+		this.subscription = this.store.select(isLoadingFileSelector).pipe(tap(this.onIsLoadingFileChanged)).subscribe()
+	}
+
+	ngOnDestroy(): void {
+		this.subscription.unsubscribe()
 	}
 
 	onIsLoadingFileChanged = (isLoadingFile: boolean) => {
@@ -75,7 +80,7 @@ export class CodeMapRenderService {
 
 	private getNodes(map: CodeMapNode) {
 		const state = this.state.getValue()
-		const nodeMetricData = nodeMetricDataSelector(state)
+		const nodeMetricData = metricDataSelector(state).nodeMetricData
 		const {
 			appSettings: { layoutAlgorithm },
 			files

package/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControls.service.spec.ts

@@ -3,7 +3,7 @@ import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
 import { ThreeCameraService } from "./threeCamera.service"
 import { ThreeSceneService } from "./threeSceneService"
 import { BoxGeometry, Group, Mesh, PerspectiveCamera, Vector3 } from "three"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ThreeRendererService } from "./threeRenderer.service"
 import { wait } from "../../../util/testUtils/wait"
 
@@ -46,7 +46,7 @@ describe("ThreeOrbitControlsService", () => {
 	function withMockedControlService() {
 		threeOrbitControlsService.controls = {
 			target: new Vector3(1, 1, 1)
-		} as OrbitControls
+		} as unknown as OrbitControls
 		threeOrbitControlsService.controls.update = jest.fn()
 	}
 
@@ -57,7 +57,7 @@ describe("ThreeOrbitControlsService", () => {
 	it("rotateCameraInVectorDirection ", () => {
 		threeOrbitControlsService.controls = {
 			target: new Vector3(0, 0, 0)
-		} as OrbitControls
+		} as unknown as OrbitControls
 		const vector = { x: 0, y: 1, z: 0 }
 
 		threeOrbitControlsService.rotateCameraInVectorDirection(vector.x, vector.y, vector.z)

package/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControls.service.ts

@@ -1,15 +1,15 @@
 import { ThreeCameraService } from "./threeCamera.service"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Box3, Mesh, MeshNormalMaterial, PerspectiveCamera, Vector3, Sphere, BoxGeometry } from "three"
 import { ThreeSceneService } from "./threeSceneService"
 
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls as OrbitControlsType } from "three/examples/jsm/controls/OrbitControls"
 // TODO remove this old orbital control and use the jsm examples oneW
 // eslint-disable-next-line no-duplicate-imports
 import * as Three from "three"
 import oc from "three-orbit-controls"
-import { EventEmitter } from "tsee"
 import { ThreeRendererService } from "./threeRenderer.service"
+import { EventEmitter } from "../../../util/EventEmitter"
 
 type CameraChangeEvents = {
 	onCameraChanged: (data: { camera: PerspectiveCamera }) => void
@@ -19,13 +19,13 @@ type CameraChangeEvents = {
 export class ThreeOrbitControlsService {
 	static CAMERA_CHANGED_EVENT_NAME = "camera-changed"
 
-	controls: OrbitControls
+	controls: OrbitControlsType
 	private eventEmitter = new EventEmitter<CameraChangeEvents>()
 
 	constructor(
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService
+		private threeCameraService: ThreeCameraService,
+		private threeSceneService: ThreeSceneService,
+		private threeRendererService: ThreeRendererService
 	) {}
 
 	setControlTarget(cameraTarget: Vector3) {
@@ -111,8 +111,8 @@ export class ThreeOrbitControlsService {
 	}
 
 	init(domElement: HTMLCanvasElement) {
-		const orbitControls = oc(Three)
-		this.controls = new orbitControls(this.threeCameraService.camera, domElement)
+		const OrbitControls = oc(Three)
+		this.controls = new OrbitControls(this.threeCameraService.camera, domElement) as unknown as OrbitControlsType
 		this.controls.addEventListener("change", () => {
 			this.onInput(this.threeCameraService.camera)
 		})

package/app/codeCharta/ui/codeMap/threeViewer/threeRenderer.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Camera, RGBAFormat, Scene, Vector2, WebGLInfo, WebGLRenderer, WebGLRenderTarget } from "three"
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass"
 import { WEBGL } from "three/examples/jsm/WebGL"
@@ -14,7 +14,7 @@ import { fxaaShaderStrings } from "../rendering/shaders/loaders/fxaaShaderString
 export class ThreeRendererService {
 	static BACKGROUND_COLOR = {
 		white: 0xff_ff_ff,
-		normal: 0xee_ee_dd
+		normal: 0xf4_f4_eb
 	}
 
 	static CLEAR_COLOR = ThreeRendererService.BACKGROUND_COLOR.normal
@@ -37,7 +37,7 @@ export class ThreeRendererService {
 	scene: Scene
 	camera: Camera
 
-	constructor(@Inject(Store) private store: Store, @Inject(State) private state: State) {}
+	constructor(private store: Store, private state: State) {}
 
 	init(containerWidth: number, containerHeight: number, scene: Scene, camera: Camera) {
 		this.scene = scene

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

@@ -16,16 +16,16 @@ import { Box3, BufferGeometry, Group, Material, Matrix4, Object3D, Raycaster, Ve
 import { setLayoutAlgorithm } from "../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
 import { FloorLabelDrawer } from "./floorLabels/floorLabelDrawer"
 import { idToNodeSelector } from "../../../state/selectors/accumulatedData/idToNode.selector"
-import { mocked } from "ts-jest/utils"
 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()
 }))
-const mockedIdToNodeSelector = mocked(idToNodeSelector)
+const mockedIdToNodeSelector = jest.mocked(idToNodeSelector)
 
 describe("ThreeSceneService", () => {
 	let threeSceneService: ThreeSceneService
@@ -453,5 +453,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()
+		})
 	})
 })

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

@@ -10,12 +10,12 @@ import { idToNodeSelector } from "../../../state/selectors/accumulatedData/idToN
 import { IdToBuildingService } from "../../../services/idToBuilding/idToBuilding.service"
 import { mapColorsSelector } from "../../../state/store/appSettings/mapColors/mapColors.selector"
 import { ThreeRendererService } from "./threeRenderer.service"
-import { EventEmitter } from "tsee"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { defaultMapColors } from "../../../state/store/appSettings/mapColors/mapColors.actions"
 import { State } from "../../../state/angular-redux/state"
 import { treeMapSize } from "../../../util/algorithm/treeMapLayout/treeMapHelper"
+import { EventEmitter } from "../../../util/EventEmitter"
 
 type BuildingSelectedEvents = {
 	onBuildingSelected: (data: { building: CodeMapBuilding }) => void
@@ -23,7 +23,7 @@ type BuildingSelectedEvents = {
 }
 
 @Injectable({ providedIn: "root" })
-export class ThreeSceneService {
+export class ThreeSceneService implements OnDestroy {
 	scene: Scene
 	labels: Group
 	floorLabelPlanes: Group
@@ -49,18 +49,17 @@ export class ThreeSceneService {
 	private highlightedLabel = null
 	private highlightedLineIndex = -1
 	private highlightedLine = null
+	private subscription = this.store.select(mapColorsSelector).subscribe(mapColors => {
+		this.folderLabelColorSelected = mapColors.selected
+		this.numberSelectionColor = ColorConverter.convertHexToNumber(this.folderLabelColorSelected)
+	})
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(IdToBuildingService) private idToBuilding: IdToBuildingService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService
+		private store: Store,
+		private state: State,
+		private idToBuilding: IdToBuildingService,
+		private threeRendererService: ThreeRendererService
 	) {
-		this.store.select(mapColorsSelector).subscribe(mapColors => {
-			this.folderLabelColorSelected = mapColors.selected
-			this.numberSelectionColor = ColorConverter.convertHexToNumber(this.folderLabelColorSelected)
-		})
-
 		this.scene = new Scene()
 		this.mapGeometry = new Group()
 		this.lights = new Group()
@@ -77,11 +76,15 @@ export class ThreeSceneService {
 		this.scene.add(this.floorLabelPlanes)
 	}
 
+	ngOnDestroy(): void {
+		this.subscription.unsubscribe()
+	}
+
 	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 +96,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)
@@ -368,6 +371,7 @@ export class ThreeSceneService {
 			this.store.dispatch(setSelectedBuildingId(null))
 			this.eventEmitter.emit("onBuildingDeselected")
 		}
+
 		if (this.highlighted.length > 0) {
 			this.highlightBuildings()
 		}
@@ -419,13 +423,6 @@ export class ThreeSceneService {
 		return this.highlighted[0]
 	}
 
-	getHighlightedNode() {
-		if (this.getHighlightedBuilding()) {
-			return this.getHighlightedBuilding().node
-		}
-		return null
-	}
-
 	dispose() {
 		this.mapMesh?.dispose()
 	}