codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.html

@@ -1,18 +1,7 @@
 <mat-toolbar color="primary">Global Configuration</mat-toolbar>
 
 <div class="cc-global-configuration-dialog-content">
-	<div class="cc-global-configuration-align-right">
-		<cc-reset-settings-button
-			[settingsKeys]="[
-				'appSettings.hideFlatBuildings',
-				'appSettings.isWhiteBackground',
-				'appSettings.resetCameraIfNewFileIsLoaded',
-				'appSettings.layoutAlgorithm',
-				'appSettings.maxTreeMapFiles'
-			]"
-			tooltip="Reset global settings to their defaults"
-		></cc-reset-settings-button>
-	</div>
+	<div class="cc-global-configuration-align-right"></div>
 
 	<cc-map-layout-selection></cc-map-layout-selection>
 	<cc-display-quality-selection></cc-display-quality-selection>
@@ -35,17 +24,31 @@
 		</mat-slide-toggle>
 	</div>
 
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/blob/main/README.md" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Manual
-	</a>
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Github
-	</a>
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/wiki" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Wiki
-	</a>
+	<cc-reset-settings-button
+		[settingsKeys]="[
+			'appSettings.hideFlatBuildings',
+			'appSettings.isWhiteBackground',
+			'appSettings.resetCameraIfNewFileIsLoaded',
+			'appSettings.layoutAlgorithm',
+			'appSettings.maxTreeMapFiles'
+		]"
+		tooltip="Reset global settings to their defaults"
+		label="Reset global settings"
+	></cc-reset-settings-button>
 
-	<div class="cc-global-configuration-align-right">
-		<button class="close-button" mat-button mat-dialog-close>CLOSE</button>
+	<div class="cc-global-configuration-links-list">
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/blob/main/README.md" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>How-to
+		</a>
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>Github
+		</a>
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/wiki" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>Wiki
+		</a>
 	</div>
+
+	<mat-dialog-actions align="end">
+		<button mat-button mat-dialog-close cdkFocusInitial>Close</button>
+	</mat-dialog-actions>
 </div>

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSlideToggleChange } from "@angular/material/slide-toggle"
 import { Store } from "../../../../state/angular-redux/store"
 import { setScreenshotToClipboardEnabled } from "../../../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
@@ -14,7 +14,8 @@ import { resetCameraIfNewFileIsLoadedSelector } from "../../../../state/store/ap
 import { GlobalSettingsHelper } from "../../../../util/globalSettingsHelper"
 
 @Component({
-	template: require("./globalConfigurationDialog.component.html")
+	templateUrl: "./globalConfigurationDialog.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class GlobalConfigurationDialogComponent {
 	screenshotToClipboardEnabled$ = this.store.select(screenshotToClipboardEnabledSelector)
@@ -23,7 +24,7 @@ export class GlobalConfigurationDialogComponent {
 	hideFlatBuildings$ = this.store.select(hideFlatBuildingsSelector)
 	resetCameraIfNewFileIsLoaded$ = this.store.select(resetCameraIfNewFileIsLoadedSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleResetCameraIfNewFileIsLoadedChanged(event: MatSlideToggleChange) {
 		this.store.dispatch(setResetCameraIfNewFileIsLoaded(event.checked))

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
 	<mat-label>Map Layout</mat-label>
 	<mat-select [value]="layoutAlgorithm$ | async" (selectionChange)="handleSelectedLayoutAlgorithmChanged($event)">
 		<mat-option *ngFor="let layoutAlgorithm of layoutAlgorithms" [value]="layoutAlgorithm">

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.spec.ts

@@ -1,50 +1,53 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
+import { ComponentFixture, TestBed } from "@angular/core/testing"
+import { screen } from "@testing-library/angular"
 import { LayoutAlgorithm } from "../../../../../codeCharta.model"
 import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
 import { Store } from "../../../../../state/store/store"
 import { MapLayoutSelectionComponent } from "./mapLayoutSelection.component"
 import { MapLayoutSelectionModule } from "./mapLayoutSelection.module"
+import { HarnessLoader } from "@angular/cdk/testing"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatSelectHarness } from "@angular/material/select/testing"
+import { MatInputHarness } from "@angular/material/input/testing"
+
+let loader: HarnessLoader
+let fixture: ComponentFixture<MapLayoutSelectionComponent>
 
 describe("MapLayoutSelectionComponent", () => {
 	beforeEach(() => {
 		Store["initialize"]()
 		TestBed.configureTestingModule({
-			imports: [MapLayoutSelectionModule]
-		})
+			imports: [MapLayoutSelectionModule],
+			declarations: [MapLayoutSelectionComponent]
+		}).compileComponents()
+		fixture = TestBed.createComponent(MapLayoutSelectionComponent)
+		loader = TestbedHarnessEnvironment.loader(fixture)
 	})
 
 	it("should change map layout selection", async () => {
-		const { detectChanges } = await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
-		detectChanges()
-
-		const initialLayoutSelection = screen.getByText("Squarified TreeMap")
-		expect(initialLayoutSelection).not.toBe(null)
+		const select = await loader.getHarness(MatSelectHarness)
+		expect(await select.getValueText()).toBe("Squarified TreeMap")
 
-		fireEvent.click(initialLayoutSelection)
-		const anotherLayoutOption = screen.getByText("StreetMap")
-		fireEvent.click(anotherLayoutOption)
-		await waitForElementToBeRemoved(() => screen.getByRole("listbox"))
-		expect(screen.getByText("StreetMap")).not.toBe(null)
+		await select.open()
+		await select.clickOptions({ text: "StreetMap" })
+		expect(await select.getValueText()).toBe("StreetMap")
 	})
 
 	it("should not display max tree map files slider when layout selection is NOT 'TreeMapStreet'", async () => {
-		await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
+		await loader.getHarness(MatSelectHarness)
 		expect(screen.queryByText("Maximum TreeMap Files")).toBe(null)
 	})
 
 	it("should display max tree map files slider when layout selection is 'TreeMapStreet'", async () => {
 		Store.dispatch(setLayoutAlgorithm(LayoutAlgorithm.TreeMapStreet))
-		await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
-
+		const select = await loader.getHarness(MatSelectHarness)
+		expect(await select.getValueText()).toBe("TreeMapStreet")
 		expect(screen.queryByText("Maximum TreeMap Files")).not.toBe(null)
-		const maxTreeMapFilesValue = "100"
-		expect(screen.queryByText(maxTreeMapFilesValue)).not.toBe(null)
 
-		const inputField = screen.getByRole("spinbutton") as HTMLInputElement
-		await userEvent.type(inputField, "42", { initialSelectionStart: 0, initialSelectionEnd: 3 })
-		await waitForElementToBeRemoved(() => screen.queryByText(maxTreeMapFilesValue))
-		expect(screen.queryByText("42")).not.toBe(null)
+		const input = await loader.getHarness(MatInputHarness)
+		expect(await input.getValue()).toBe("100")
+
+		await input.setValue("42")
+		expect(await input.getValue()).toBe("42")
 	})
 })

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSelectChange } from "@angular/material/select"
 import { LayoutAlgorithm } from "../../../../../codeCharta.model"
 import { Store } from "../../../../../state/angular-redux/store"
@@ -6,18 +6,19 @@ import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layou
 import { layoutAlgorithmSelector } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
 import { setMaxTreeMapFiles } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.actions"
 import { maxTreeMapFilesSelector } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.selector"
-import debounce from "lodash.debounce"
+import { debounce } from "../../../../../util/debounce"
 
 @Component({
 	selector: "cc-map-layout-selection",
-	template: require("./mapLayoutSelection.component.html")
+	templateUrl: "./mapLayoutSelection.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapLayoutSelectionComponent {
 	layoutAlgorithms = Object.values(LayoutAlgorithm)
 	layoutAlgorithm$ = this.store.select(layoutAlgorithmSelector)
 	maxTreeMapFiles$ = this.store.select(maxTreeMapFilesSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleSelectedLayoutAlgorithmChanged(event: MatSelectChange) {
 		this.store.dispatch(setLayoutAlgorithm(event.value))

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { render } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
 import { HoveredNodePathPanelModule } from "./hoveredNodePathPanel.module"
 import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
@@ -8,7 +7,7 @@ import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.sel
 jest.mock("./hoveredNodePathPanelData.selector", () => ({
 	hoveredNodePathPanelDataSelector: jest.fn()
 }))
-const mockedHoveredNodePathPanelDataSelector = mocked(hoveredNodePathPanelDataSelector)
+const mockedHoveredNodePathPanelDataSelector = jest.mocked(hoveredNodePathPanelDataSelector)
 
 describe("HoveredNodePathPanelComponent", () => {
 	beforeEach(() => {

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.ts

@@ -1,14 +1,15 @@
-import "./hoveredNodePathPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
 
 @Component({
 	selector: "cc-hovered-node-path-panel",
-	template: require("./hoveredNodePathPanel.component.html")
+	templateUrl: "./hoveredNodePathPanel.component.html",
+	styleUrls: ["./hoveredNodePathPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class HoveredNodePathPanelComponent {
 	hoveredNodePathPanelData$ = this.store.select(hoveredNodePathPanelDataSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.ts

@@ -1,17 +1,18 @@
-import "./loadingMapProgressSpinner.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
 import { isLoadingMapSelector } from "../../../state/store/appSettings/isLoadingMap/isLoadingMap.selector"
 
 @Component({
 	selector: "cc-loading-map-progress-spinner",
-	template: require("./loadingMapProgressSpinner.component.html")
+	templateUrl: "./loadingMapProgressSpinner.component.html",
+	styleUrls: ["./loadingMapProgressSpinner.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LoadingMapProgressSpinnerComponent {
 	isLoadingMap$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.isLoadingMap$ = store.select(isLoadingMapSelector)
 	}
 }

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.html

@@ -1,12 +1,9 @@
-<button title="Enabling presentation mode will change the hovering effect so that it simulates a flashlight">
-	<span>Presentation mode</span>
-
+<mat-slide-toggle
+	[checked]="isPresentationModeEnabled$ | async"
+	(change)="setPresentationModeEnabled($event)"
+	[title]="(isPresentationModeEnabled$ | async) ? 'Disable flashlight hover effect' : 'Enable flashlight hover effect'"
+	aria-label="Presentation Mode Toggle"
+>
 	<i class="presentation-mode-icon fa fa-television"></i>
-
-	<mat-slide-toggle
-		[checked]="isPresentationModeEnabled$ | async"
-		(change)="setPresentationModeEnabled($event)"
-		[title]="(isPresentationModeEnabled$ | async) ? 'Disable presentation mode' : 'Enable presentation mode'"
-	>
-	</mat-slide-toggle>
-</button>
+	Presentation Mode
+</mat-slide-toggle>

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.scss

@@ -1,6 +1,7 @@
 cc-presentation-mode-button {
-	.presentation-mode-icon,
-	mat-slide-toggle {
-		margin-left: 8px;
+	mat-slide-toggle.mat-mdc-slide-toggle div.mdc-form-field {
+		font-size: 10pt;
+		flex-direction: row-reverse;
+		gap: 12px;
 	}
 }

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.spec.ts

@@ -13,9 +13,9 @@ describe("presentationModeButtonComponent", () => {
 
 	it("should toggle presentation mode", async () => {
 		const { container } = await render(PresentationModeButtonComponent, { excludeComponentDeclaration: true })
-		expect(screen.getByTitle("Enable presentation mode")).toBeTruthy()
+		expect(screen.getByTitle("Enable flashlight hover effect")).toBeTruthy()
 
 		await userEvent.click(container.querySelector("mat-slide-toggle label"))
-		expect(screen.getByTitle("Disable presentation mode")).toBeTruthy()
+		expect(screen.getByTitle("Disable flashlight hover effect")).toBeTruthy()
 	})
 })

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.ts

@@ -1,18 +1,19 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSlideToggleChange } from "@angular/material/slide-toggle"
 import { Store } from "../../../state/angular-redux/store"
 import { setPresentationMode } from "../../../state/store/appSettings/isPresentationMode/isPresentationMode.actions"
 import { isPresentationModeSelector } from "../../../state/store/appSettings/isPresentationMode/isPresentationMode.selector"
-import "./presentationModeButton.component.scss"
 
 @Component({
 	selector: "cc-presentation-mode-button",
-	template: require("./presentationModeButton.component.html")
+	templateUrl: "./presentationModeButton.component.html",
+	styleUrls: ["./presentationModeButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class PresentationModeButtonComponent {
 	isPresentationModeEnabled$ = this.store.select(isPresentationModeSelector)
 
-	constructor(@Inject(Store) private readonly store: Store) {}
+	constructor(private readonly store: Store) {}
 
 	setPresentationModeEnabled(event: MatSlideToggleChange) {
 		this.store.dispatch(setPresentationMode(event.checked))

package/app/codeCharta/ui/toolBar/toolBar.component.scss

@@ -2,15 +2,13 @@
 
 cc-tool-bar {
 	display: flex;
+	gap: 8px;
+	padding-left: 8px;
 	align-items: center;
 	background-color: #f0f0f0;
 	height: 35px;
 	border-bottom: 1px solid #cdcdcd;
 
-	cc-action-icon {
-		margin-left: 8px;
-	}
-
 	.right-aligned {
 		position: absolute;
 		right: 4px;

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

@@ -1,6 +1,5 @@
 import { TestBed } from "@angular/core/testing"
 import { render } from "@testing-library/angular"
-import { mocked } from "ts-jest/utils"
 import { LoadFileService } from "../../services/loadFile/loadFile.service"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
@@ -12,7 +11,7 @@ import { ToolBarModule } from "./toolBar.module"
 jest.mock("../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector", () => ({
 	hoveredNodeIdSelector: jest.fn()
 }))
-const mockedHoveredNodeIdSelector = mocked(hoveredNodeIdSelector)
+const mockedHoveredNodeIdSelector = jest.mocked(hoveredNodeIdSelector)
 
 describe("ToolBarComponent", () => {
 	beforeEach(() => {

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

@@ -1,17 +1,17 @@
-import "./toolBar.component.scss"
-
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 
 @Component({
 	selector: "cc-tool-bar",
-	template: require("./toolBar.component.html")
+	templateUrl: "./toolBar.component.html",
+	styleUrls: ["./toolBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ToolBarComponent {
 	hoveredNodeId$ = this.store.select(hoveredNodeIdSelector)
 	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/toolBar/toolBar.module.ts

@@ -27,7 +27,6 @@ import { LoadingMapProgressSpinnerModule } from "./loadingMapProgressSpinner/loa
 		GlobalConfigurationButtonModule
 	],
 	declarations: [ToolBarComponent],
-	exports: [ToolBarComponent],
-	entryComponents: [ToolBarComponent]
+	exports: [ToolBarComponent]
 })
 export class ToolBarModule {}

package/app/codeCharta/ui/toolBar/uploadFilesButton/uploadFiles.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { LoadFileService } from "../../../services/loadFile/loadFile.service"
 import { Store } from "../../../state/angular-redux/store"
 import { setIsLoadingFile } from "../../../state/store/appSettings/isLoadingFile/isLoadingFile.actions"
@@ -12,7 +12,7 @@ import { readFiles } from "../../../util/uploadFiles/readFiles"
 export class UploadFilesService {
 	isUploading = false
 
-	constructor(@Inject(Store) private store: Store, @Inject(LoadFileService) private loadFileService: LoadFileService) {}
+	constructor(private store: Store, private loadFileService: LoadFileService) {}
 
 	uploadFiles() {
 		const ccFileInput = createCCFileInput()

package/app/codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component.ts

@@ -1,13 +1,14 @@
-import "./uploadFilesButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { UploadFilesService } from "./uploadFiles.service"
 
 @Component({
 	selector: "cc-upload-files-button",
-	template: require("./uploadFilesButton.component.html")
+	templateUrl: "./uploadFilesButton.component.html",
+	styleUrls: ["./uploadFilesButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class UploadFilesButtonComponent {
-	constructor(@Inject(UploadFilesService) private uploadFilesService: UploadFilesService) {}
+	constructor(private uploadFilesService: UploadFilesService) {}
 
 	uploadFiles() {
 		this.uploadFilesService.uploadFiles()

package/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.ts

@@ -1,13 +1,14 @@
-import "./centerMapButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
 
 @Component({
 	selector: "cc-center-map-button",
-	template: require("./centerMapButton.component.html")
+	templateUrl: "./centerMapButton.component.html",
+	styleUrls: ["./centerMapButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CenterMapButtonComponent {
-	constructor(@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService) {}
+	constructor(private threeOrbitControlsService: ThreeOrbitControlsService) {}
 
 	centerMap() {
 		this.threeOrbitControlsService.autoFitTo()

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

@@ -4,7 +4,7 @@ import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
 import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
 import { Color, Mesh, Vector3, WebGLRenderer } from "three"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ViewCubeComponent } from "./viewCube.component"
 
 describe("ViewCubeComponent", () => {
@@ -17,7 +17,7 @@ describe("ViewCubeComponent", () => {
 		viewCubeMouseEventsService = { init: jest.fn() } as unknown as ViewCubeMouseEventsService
 		threeOrbitControlsService.controls = {
 			target: new Vector3(1, 2, 3)
-		} as OrbitControls
+		} as unknown as OrbitControls
 		ViewCubeComponent.prototype["initRenderer"] = jest.fn()
 		ViewCubeComponent.prototype["onAnimationFrame"] = jest.fn()
 		const elementReference = { nativeElement: {} as HTMLElement }

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

@@ -14,11 +14,12 @@ import {
 import { ViewCubemeshGenerator } from "./viewCube.meshGenerator"
 import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
 import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
-import { Component, ElementRef, Inject, OnInit } from "@angular/core"
+import { Component, ElementRef, OnInit, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-view-cube",
-	template: require("./viewCube.component.html")
+	templateUrl: "./viewCube.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ViewCubeComponent implements OnInit {
 	private lights: Group
@@ -39,9 +40,9 @@ export class ViewCubeComponent implements OnInit {
 	}
 
 	constructor(
-		@Inject(ElementRef) private elementReference: ElementRef,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService,
-		@Inject(ViewCubeMouseEventsService) private viewCubeMouseEvents: ViewCubeMouseEventsService
+		private elementReference: ElementRef,
+		private threeOrbitControlsService: ThreeOrbitControlsService,
+		private viewCubeMouseEvents: ViewCubeMouseEventsService
 	) {}
 
 	ngOnInit() {

package/app/codeCharta/ui/viewCube/viewCube.mouseEvents.service.spec.ts

@@ -4,6 +4,7 @@ import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
 // eslint-disable-next-line no-duplicate-imports
 import * as Three from "three"
 import oc from "three-orbit-controls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { CursorType } from "../codeMap/codeMap.mouseEvent.service"
 
 describe("ViewCubeMouseEventsService", () => {
@@ -67,8 +68,8 @@ describe("ViewCubeMouseEventsService", () => {
 	describe("initOrbitalControl", () => {
 		it("should initialize controls with parameters", () => {
 			const camera = new PerspectiveCamera()
-			const OrbitControls = oc(Three)
-			const expectedControls = new OrbitControls(camera, webGLRenderer.domElement)
+			const orbitControls = oc(Three)
+			const expectedControls = new orbitControls(camera, webGLRenderer.domElement) as unknown as OrbitControls
 			expectedControls.enableZoom = false
 			expectedControls.enableKeys = false
 			expectedControls.enablePan = false

package/app/codeCharta/ui/viewCube/viewCube.mouseEvents.service.ts

@@ -5,10 +5,10 @@ import { isLeaf } from "../../util/codeMapHelper"
 // eslint-disable-next-line no-duplicate-imports
 import * as Three from "three"
 import oc from "three-orbit-controls"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
-import { EventEmitter } from "tsee"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
+import { EventEmitter } from "../../util/EventEmitter"
 
 type ViewCubeEvents = {
 	viewCubeEventPropagation: (data: { event: MouseEvent; type: string }) => void
@@ -28,7 +28,7 @@ export class ViewCubeMouseEventsService {
 	private controls: OrbitControls
 	private isDragging = false
 
-	constructor(@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService) {}
+	constructor(private threeOrbitControlsService: ThreeOrbitControlsService) {}
 
 	init(cubeGroup: Group, camera: PerspectiveCamera, renderer: WebGLRenderer) {
 		this.cubeGroup = cubeGroup
@@ -44,7 +44,7 @@ export class ViewCubeMouseEventsService {
 
 	private initOrbitalControl(camera: PerspectiveCamera, renderer: WebGLRenderer) {
 		const orbitControls = oc(Three)
-		this.controls = new orbitControls(camera, renderer.domElement)
+		this.controls = new orbitControls(camera, renderer.domElement) as unknown as OrbitControls
 		this.controls.enableZoom = false
 		this.controls.enableKeys = false
 		this.controls.enablePan = false
@@ -155,7 +155,7 @@ export class ViewCubeMouseEventsService {
 	private triggerViewCubeUnhoverEvent() {
 		this.currentlyHovered = null
 		CodeMapMouseEventService.changeCursorIndicator(CursorType.Default)
-		this.eventEmitter.emit("viewCubeUnHoveredEvent", undefined)
+		this.eventEmitter.emit("viewCubeUnHoveredEvent")
 	}
 
 	subscribe<Key extends keyof ViewCubeEvents>(key: Key, callback: ViewCubeEvents[Key]) {

package/app/codeCharta/util/EventEmitter.ts

@@ -0,0 +1,22 @@
+type Listener<D = undefined> = (data?: D) => void
+type AbstractEventMap = Record<string, Listener>
+
+export class EventEmitter<EventMap extends AbstractEventMap> {
+	private listeners: Partial<Record<keyof EventMap, Listener[]>> = {}
+
+	on<EventType extends keyof EventMap>(event: EventType, callback: EventMap[EventType]) {
+		this.listeners[event] ??= []
+		this.listeners[event].push(callback)
+	}
+
+	emit<EventType extends keyof EventMap>(event: EventType, data?: Parameters<EventMap[EventType]>[0]) {
+		if (!this.listeners[event]?.length) {
+			return false
+		}
+
+		for (const listener of this.listeners[event]) {
+			listener(data)
+		}
+		return true
+	}
+}