refactor: migrate center-map-button

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Chore 👨‍💻 👩‍💻
 
 -   Track not only changes to color metric options by slider but also by related input field [#2797](https://github.com/MaibornWolff/codecharta/pull/2797)
+-   Migrate center-map-button-component to Angular [#2809](https://github.com/MaibornWolff/codecharta/pull/2809)
 
 ## [1.96.0] - 2022-05-17
 

visualization/app/app.module.ts

@@ -49,6 +49,7 @@ import { MetricColorRangeSliderModule } from "./codeCharta/ui/colorSettingsPanel
 import { FilePanelModule } from "./codeCharta/ui/filePanel/filePanel.module"
 import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs.module"
 import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
+import { CenterMapButtonModule } from "./codeCharta/ui/viewCube/centerMapButton/centerMapButton.module"
 
 @NgModule({
 	imports: [
@@ -80,7 +81,8 @@ import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/
 		FilePanelModule,
 		HeightSettingsPanelModule,
 		ResetSettingsButtonModule,
-		MetricColorRangeSliderModule
+		MetricColorRangeSliderModule,
+		CenterMapButtonModule
 	],
 	providers: [
 		threeSceneServiceProvider,

visualization/app/codeCharta/ui/ui.ts

@@ -9,7 +9,6 @@ import "./nodePathPanel/nodePathPanel.module"
 import "./edgeSettingsPanel/edgeSettingsPanel.module"
 import "./edgeChooser/edgeChooser.module"
 import "./presentationModeButton/presentationModeButton.module"
-import "./centerMapButton/centerMapButton.module"
 import "./areaSettingsPanel/areaSettingsPanel.module"
 import "./codeMap/codeMap.module"
 import "./colorSettingsPanel/colorSettingsPanel.module"
@@ -39,7 +38,6 @@ angular
 		"app.codeCharta.ui.edgeSettingsPanel",
 		"app.codeCharta.ui.edgeChooser",
 		"app.codeCharta.ui.presentationModeButton",
-		"app.codeCharta.ui.centerMapButton",
 		"app.codeCharta.ui.areaSettingsPanel",
 		"app.codeCharta.ui.codeMap",
 		"app.codeCharta.ui.colorSettingsPanel",

visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.html

@@ -0,0 +1,3 @@
+<button class="cc-shadow" aria-label="Center map in View" (click)="centerMap()" title="Center map">
+	<i class="fa fa-compass"></i>
+</button>

visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.scss

@@ -0,0 +1,23 @@
+@use "../../../../material/theme";
+
+cc-center-map-button {
+	button {
+		position: absolute;
+		right: 15px;
+		width: 36px;
+		height: 36px;
+		font-size: 28px;
+		border-radius: 100%;
+		color: white;
+		background-color: theme.$cc-primary-color;
+
+		i {
+			margin-top: 2px;
+		}
+
+		&:hover {
+			cursor: pointer;
+			color: #eee;
+		}
+	}
+}

visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.spec.ts

@@ -0,0 +1,24 @@
+import { TestBed } from "@angular/core/testing"
+import { render, screen } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
+import { ThreeOrbitControlsServiceToken } from "../../../services/ajs-upgraded-providers"
+import { CenterMapButtonComponent } from "./centerMapButton.component"
+
+describe("CenterMapButtonComponent", () => {
+	const threeOrbitControlsService = { autoFitTo: jest.fn() }
+
+	beforeEach(() => {
+		threeOrbitControlsService.autoFitTo = jest.fn()
+		TestBed.configureTestingModule({
+			providers: [{ provide: ThreeOrbitControlsServiceToken, useValue: threeOrbitControlsService }]
+		})
+	})
+
+	it("should call autoFitTo of threeOrbitControlsService on click", async () => {
+		await render(CenterMapButtonComponent)
+
+		userEvent.click(screen.getByTitle("Center map"))
+
+		expect(threeOrbitControlsService.autoFitTo).toHaveBeenCalled()
+	})
+})

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

@@ -0,0 +1,16 @@
+import "./centerMapButton.component.scss"
+import { Component, Inject } from "@angular/core"
+import { ThreeOrbitControlsServiceToken } from "../../../services/ajs-upgraded-providers"
+import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControlsService"
+
+@Component({
+	selector: "cc-center-map-button",
+	template: require("./centerMapButton.component.html")
+})
+export class CenterMapButtonComponent {
+	constructor(@Inject(ThreeOrbitControlsServiceToken) private threeOrbitControlsService: ThreeOrbitControlsService) {}
+
+	centerMap() {
+		this.threeOrbitControlsService.autoFitTo()
+	}
+}

visualization/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core"
+import { CenterMapButtonComponent } from "./centerMapButton.component"
+
+@NgModule({
+	declarations: [CenterMapButtonComponent],
+	exports: [CenterMapButtonComponent],
+	entryComponents: [CenterMapButtonComponent]
+})
+export class CenterMapButtonModule {}

visualization/app/codeCharta/ui/viewCube/viewCube.component.html

@@ -1 +1 @@
-<center-map-button-component></center-map-button-component>
+<cc-center-map-button></cc-center-map-button>

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

@@ -1,4 +1,3 @@
-import "./viewCube.component.scss"
 import {
 	AmbientLight,
 	AxesHelper,

visualization/app/codeCharta/ui/viewCube/viewCube.module.ts

@@ -3,8 +3,11 @@ import "../codeMap/threeViewer/threeViewer.module"
 import { viewCubeComponent } from "./viewCube.component"
 import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
 import camelCase from "lodash.camelcase"
+import { downgradeComponent } from "@angular/upgrade/static"
+import { CenterMapButtonComponent } from "./centerMapButton/centerMapButton.component"
 
 angular
 	.module("app.codeCharta.ui.viewCube", ["app.codeCharta.ui.codeMap.threeViewer"])
 	.component(viewCubeComponent.selector, viewCubeComponent)
 	.service(camelCase(ViewCubeMouseEventsService.name), ViewCubeMouseEventsService)
+	.directive("ccCenterMapButton", downgradeComponent({ component: CenterMapButtonComponent }))