codecharta-visualization 1.114.0 → 1.115.0

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

@@ -107,8 +107,7 @@ describe("CodeMapArrowService", () => {
 			expect(threeSceneService["selected"]).toMatchSnapshot()
 		})
 		it("should debounce the edge reset of buildings to improve performance", async () => {
-			codeMapArrowService["resetEdgesOfBuildings"] = () => {}
-			const resetEdgesOfBuildingMock = jest.fn().mockImplementation()
+			const resetEdgesOfBuildingMock = jest.fn()
 			codeMapArrowService["resetEdgesOfBuildings"] = resetEdgesOfBuildingMock
 			codeMapArrowService.onBuildingHovered(CODE_MAP_BUILDING_WITH_OUTGOING_EDGE_NODE)
 
@@ -123,6 +122,7 @@ describe("CodeMapArrowService", () => {
 	describe("SelectionMethods", () => {
 		beforeEach(() => {
 			codeMapArrowService.clearArrows = jest.fn()
+			codeMapArrowService.addArrow = jest.fn()
 			codeMapArrowService["showEdgesOfBuildings"] = jest.fn()
 			codeMapArrowService.addEdgePreview = jest.fn()
 			threeSceneService.clearHighlight = jest.fn()
@@ -178,9 +178,10 @@ describe("CodeMapArrowService", () => {
 			codeMapArrowService.onBuildingDeselected()
 
 			expect(codeMapArrowService.clearArrows).toHaveBeenCalled()
-			expect(threeSceneService.clearHighlight).toHaveBeenCalled()
-			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 			expect(codeMapArrowService.addEdgePreview).toHaveBeenCalled()
+			expect(codeMapArrowService.addArrow).toHaveBeenCalledTimes(0)
+			expect(threeSceneService.clearHighlight).toHaveBeenCalledTimes(0)
+			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 		})
 	})
 

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

@@ -1,50 +1,55 @@
-import { Injectable, Inject } from "@angular/core"
+import { Injectable, OnDestroy } from "@angular/core"
 import { ThreeSceneService } from "./threeViewer/threeSceneService"
 import { Node, EdgeVisibility } from "../../codeCharta.model"
 import { ArrowHelper, BufferGeometry, CubicBezierCurve3, Line, LineBasicMaterial, Object3D, Vector3 } from "three"
 import { ColorConverter } from "../../util/color/colorConverter"
 import { CodeMapBuilding } from "./rendering/codeMapBuilding"
-import debounce from "lodash.debounce"
 import { IdToBuildingService } from "../../services/idToBuilding/idToBuilding.service"
 import { tap } from "rxjs"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 import { Store } from "../../state/angular-redux/store"
 import { State } from "../../state/angular-redux/state"
+import { debounce } from "../../util/debounce"
 
 @Injectable({ providedIn: "root" })
-export class CodeMapArrowService {
-	private VERTICES_PER_LINE = 5
+export class CodeMapArrowService implements OnDestroy {
 	private map: Map<string, Node>
-	private arrows: Object3D[]
-	private debounceCalculation: (hoveredBuilding: CodeMapBuilding) => void
-	private HIGHLIGHT_BUILDING_DELAY = 15
+	private VERTICES_PER_LINE = 5
+	private arrows: Object3D[] = new Array<Object3D>()
+	private HIGHLIGHT_BUILDING_DELAY = 1
+	private debounceCalculation: (hoveredBuilding: CodeMapBuilding) => void = debounce(
+		(hoveredBuilding: CodeMapBuilding) => this.resetEdgesOfBuildings(hoveredBuilding),
+		this.HIGHLIGHT_BUILDING_DELAY
+	)
+	private subscription = this.store
+		.select(hoveredNodeIdSelector)
+		.pipe(
+			tap(hoveredNodeId => {
+				if (hoveredNodeId !== null) {
+					const hoveredBuilding = this.idToBuildingService.get(hoveredNodeId)
+					this.onBuildingHovered(hoveredBuilding)
+				} else {
+					this.onBuildingUnhovered()
+				}
+			})
+		)
+		.subscribe()
 
 	constructor(
-		@Inject(Store) private store: Store,
-		@Inject(State) private state: State,
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(IdToBuildingService) private idToBuildingService: IdToBuildingService
+		private store: Store,
+		private state: State,
+		private threeSceneService: ThreeSceneService,
+		private idToBuildingService: IdToBuildingService
 	) {
-		this.arrows = new Array<Object3D>()
-		this.store
-			.select(hoveredNodeIdSelector)
-			.pipe(
-				tap(hoveredNodeId => {
-					if (hoveredNodeId !== null) {
-						const hoveredBuilding = this.idToBuildingService.get(hoveredNodeId)
-						this.onBuildingHovered(hoveredBuilding)
-					} else {
-						this.onBuildingUnhovered()
-					}
-				})
-			)
-			.subscribe()
 		this.threeSceneService.subscribe("onBuildingSelected", this.onBuildingSelected)
 		this.threeSceneService.subscribe("onBuildingDeselected", this.onBuildingDeselected)
-		this.debounceCalculation = debounce(hoveredBuildings => this.resetEdgesOfBuildings(hoveredBuildings), this.HIGHLIGHT_BUILDING_DELAY)
 	}
 
-	private resetEdgesOfBuildings = hoveredBuilding => {
+	ngOnDestroy(): void {
+		this.subscription.unsubscribe()
+	}
+
+	private resetEdgesOfBuildings = (hoveredBuilding: CodeMapBuilding) => {
 		if (this.isEdgeApplicableForBuilding(hoveredBuilding)) {
 			this.clearArrows()
 			this.showEdgesOfBuildings(hoveredBuilding)
@@ -62,7 +67,6 @@ export class CodeMapArrowService {
 
 	onBuildingDeselected = () => {
 		this.clearArrows()
-		this.threeSceneService.clearHighlight()
 		this.addEdgePreview()
 	}
 
@@ -170,14 +174,15 @@ export class CodeMapArrowService {
 			}
 			if (node.has(originNode.path)) {
 				this.addArrow(targetNode, originNode, true)
+				this.threeSceneService.highlightBuildings()
 				// TODO: Check if the second if case is actually necessary. Edges should
 				// always have valid origin and target paths. The test data is likely
 				// faulty and should be improved.
 			} else if (node.has(targetNode.path)) {
 				this.addArrow(targetNode, originNode, false)
+				this.threeSceneService.highlightBuildings()
 			}
 		}
-		this.threeSceneService.highlightBuildings()
 	}
 
 	private createCurve(arrowOriginNode: Node, arrowTargetNode: Node, curveScale) {

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

@@ -501,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
@@ -537,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)
@@ -547,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.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,6 +76,10 @@ export class ThreeSceneService {
 		this.scene.add(this.floorLabelPlanes)
 	}
 
+	ngOnDestroy(): void {
+		this.subscription.unsubscribe()
+	}
+
 	private initFloorLabels(nodes: Node[]) {
 		this.floorLabelPlanes.clear()
 
@@ -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()
 	}