codecharta-visualization 1.114.0 → 1.115.1

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()
 	}

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

@@ -1,9 +1,26 @@
 import { CustomPanel, ThreeStatsService } from "./threeStats.service"
 import { ThreeRendererService } from "./threeRenderer.service"
-import Stats from "three/examples/jsm/libs/stats.module"
 import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"
 import { WebGLInfo } from "three/src/renderers/webgl/WebGLInfo"
-import * as environmentDetector from "../../../util/envDetector"
+
+jest.mock("three/examples/jsm/libs/stats.module", () => {
+	function MockedStats() {
+		return {
+			addPanel: jest.fn(),
+			showPanel: jest.fn(),
+			update: jest.fn(),
+			domElement: {
+				style: {} as CSSStyleDeclaration,
+				remove: jest.fn()
+			} as unknown as HTMLDivElement
+		}
+	}
+	MockedStats.Panel = () => ({})
+	return {
+		__esModule: true,
+		default: MockedStats
+	}
+})
 
 describe("ThreeStatsService", () => {
 	let threeStatsService: ThreeStatsService
@@ -11,15 +28,10 @@ describe("ThreeStatsService", () => {
 	let element: HTMLCanvasElement
 
 	beforeEach(() => {
-		setDevelopmentMode(true)
 		restartSystem()
 	})
 
-	const setDevelopmentMode = (value: boolean) => {
-		jest.spyOn(environmentDetector, "isDevelopment").mockReturnValue(value)
-	}
-
-	const restartSystem = () => {
+	const restartSystem = (simulateDevelopmentMode = true) => {
 		threeRendererService = { getInfo: jest.fn(), getMemoryInfo: jest.fn() } as unknown as ThreeRendererService
 		threeRendererService.renderer = {} as WebGLRenderer
 		threeRendererService.renderer.info = { render: {}, memory: {} } as WebGLInfo
@@ -29,14 +41,8 @@ describe("ThreeStatsService", () => {
 		element = { ...element, append: jest.fn() }
 
 		threeStatsService = new ThreeStatsService(threeRendererService)
-		threeStatsService.stats = {} as Stats
-		threeStatsService.stats.addPanel = jest.fn()
-		threeStatsService.stats.showPanel = jest.fn()
-		threeStatsService.stats.update = jest.fn()
-		threeStatsService.stats.domElement = {
-			style: {} as CSSStyleDeclaration,
-			remove: jest.fn()
-		} as unknown as HTMLDivElement
+		threeStatsService.isDevelopmentMode = simulateDevelopmentMode
+		threeStatsService.init(element)
 	}
 
 	const mockPanels = (keys: string[]) => {
@@ -50,10 +56,8 @@ describe("ThreeStatsService", () => {
 
 	describe("init", () => {
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 			const generateStatPanels = jest.spyOn(threeStatsService, "generateStatPanels" as any)
-
 			threeStatsService.init(element)
 
 			expect(element.append).not.toHaveBeenCalled()
@@ -76,12 +80,6 @@ describe("ThreeStatsService", () => {
 	})
 
 	describe("generateStatPanels", () => {
-		it("should call addPanel", () => {
-			threeStatsService["generateStatPanels"]()
-
-			expect(threeStatsService.stats.addPanel).toHaveBeenCalledTimes(4)
-		})
-
 		it("should show stats", () => {
 			threeStatsService["generateStatPanels"]()
 
@@ -101,8 +99,7 @@ describe("ThreeStatsService", () => {
 		})
 
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 			const processPanel = jest.spyOn(threeStatsService, "processPanel" as any)
 
 			threeStatsService.updateStats()
@@ -142,8 +139,7 @@ describe("ThreeStatsService", () => {
 		})
 
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 
 			threeStatsService.resetPanels()
 
@@ -185,12 +181,11 @@ describe("ThreeStatsService", () => {
 
 	describe("destroy", () => {
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 
 			threeStatsService.destroy()
 
-			expect(threeStatsService.stats.domElement.remove).not.toHaveBeenCalled()
+			expect(threeStatsService.stats).toBe(undefined)
 		})
 
 		it("should remove dom Element", () => {

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

@@ -1,7 +1,6 @@
 import Stats from "three/examples/jsm/libs/stats.module"
 import { ThreeRendererService } from "./threeRenderer.service"
-import { isDevelopment } from "../../../util/envDetector"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, isDevMode } from "@angular/core"
 
 const ONE_SECOND = 1000
 export interface CustomPanel {
@@ -17,9 +16,9 @@ export class ThreeStatsService {
 	geometryMemoryPanel: CustomPanel
 	textureMemoryPanel: CustomPanel
 	prevTime: number
-	isDevelopmentMode = isDevelopment()
+	isDevelopmentMode = isDevMode()
 
-	constructor(@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService) {}
+	constructor(private threeRendererService: ThreeRendererService) {}
 
 	init = (canvasElement: Element) => {
 		if (this.isDevelopmentMode) {

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

@@ -5,7 +5,7 @@ import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
 import { ThreeRendererService } from "./threeRenderer.service"
 import { ThreeViewerService } from "./threeViewer.service"
 import { PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ThreeStatsService } from "./threeStats.service"
 import { CustomComposer } from "../rendering/postprocessor/customComposer"
 
@@ -59,7 +59,7 @@ describe("ThreeViewerService", () => {
 		threeRendererService.composer = { dispose: jest.fn() } as unknown as CustomComposer
 		threeRendererService.renderer.getContext = jest.fn()
 		threeRendererService.renderer.setPixelRatio = jest.fn()
-		threeOrbitControlsService.controls = { enableKeys: null } as OrbitControls
+		threeOrbitControlsService.controls = { enableKeys: null } as unknown as OrbitControls
 		threeOrbitControlsService.controls.update = jest.fn()
 		threeSceneService.scene = { position: new Vector3(1, 2, 3) } as Scene
 		threeSceneService.scene.add = jest.fn()

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

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { ThreeSceneService } from "./threeSceneService"
 import { ThreeCameraService } from "./threeCamera.service"
 import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
@@ -10,11 +10,11 @@ export class ThreeViewerService {
 	private animationFrameId: number
 
 	constructor(
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService,
-		@Inject(ThreeStatsService) private threeStatsService: ThreeStatsService
+		private threeSceneService: ThreeSceneService,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService,
+		private threeRendererService: ThreeRendererService,
+		private threeStatsService: ThreeStatsService
 	) {}
 
 	init(target: Element) {

package/app/codeCharta/ui/colorPicker/colorPicker.component.spec.ts

@@ -41,8 +41,11 @@ describe("colorPicker", () => {
 		expectColorPickerInDom(true)
 		expect(screen.queryByText("isOpen: true")).toBeTruthy()
 
-		// @ts-ignore
-		ng.probe(screen.queryByRole("colorpicker")).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#000000" } })
+		// @ts-expect-error
+		ng.getComponent(screen.queryByRole("colorpicker")).onChangeComplete.emit({
+			$event: {},
+			color: { hex: "#000000" }
+		})
 		expect(await screen.findByText("color: #000000")).toBeTruthy()
 
 		fireEvent.click(document)

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

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from "@angular/core"
+import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"
 import { MatMenuTrigger, MenuPositionX } from "@angular/material/menu"
 
 @Component({
 	selector: "cc-color-picker",
-	template: require("./colorPicker.component.html")
+	templateUrl: "./colorPicker.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorPickerComponent {
 	@Input() hexColor: string

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 import { MapColors } from "../../codeCharta.model"
 import { Store } from "../../state/angular-redux/store"
@@ -9,16 +9,17 @@ import { colorRangeSelector } from "../../state/store/dynamicSettings/colorRange
 
 @Component({
 	selector: "cc-color-picker-for-map-color",
-	template: require("./colorPickerForMapColor.component.html")
+	templateUrl: "./colorPickerForMapColor.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorPickerForMapColorComponent {
-	@Input() mapColorFor: keyof MapColors
+	@Input() mapColorFor: keyof Omit<MapColors, "labelColorAndAlpha" | "markingColors">
 
 	mapColors$ = this.store.select(mapColorsSelector)
 	colorRange$ = this.store.select(colorRangeSelector)
 	nodeMetricRange$ = this.store.select(selectedColorMetricDataSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleColorChange(newHexColor: string) {
 		this.store.dispatch(

package/app/codeCharta/ui/copyToClipboardButton/copyToClipboard.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { State } from "../../state/angular-redux/state"
 import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
 import { buildTextOfFiles } from "./util/clipboardString"
@@ -6,7 +6,7 @@ import { getFilenamesWithHighestMetrics } from "./util/getFilenamesWithHighestMe
 
 @Injectable()
 export class CopyToClipboardService {
-	constructor(@Inject(State) private state: State) {}
+	constructor(private state: State) {}
 
 	private getUnifiedMapNode() {
 		const { unifiedMapNode } = accumulatedDataSelector(this.state.getValue())