Revert "Refactor map zoom function to use Three.js #3147 (#3665)"

This reverts commit 89bd8bb

visualization/CHANGELOG.md

@@ -7,12 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Fixed 🐞
+
+- Revert [#3655](https://github.com/MaibornWolff/codecharta/pull/3665) as we implement new navigation methods
+
 ## [1.127.0] - 2024-08-12
 
 ### Fixed 🐞
 
-- Zooming doesn't affect the camera position [#3147](https://github.com/MaibornWolff/codecharta/pull/3665)
-- Fix the issue where the map disappears after excessive zooming out.[#3147](https://github.com/MaibornWolff/codecharta/pull/3665)
+- Zooming doesn't affect the camera position [#3655](https://github.com/MaibornWolff/codecharta/pull/3665)
+- Fix the issue where the map disappears after excessive zooming out.[#3655](https://github.com/MaibornWolff/codecharta/pull/3665)
 - Fix visualization standalone electron build by bumping the version to 29 [#3681](https://github.com/MaibornWolff/codecharta/pull/3681)
 
 ### Added 🚀

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

@@ -41,7 +41,6 @@ export class CodeMapLabelService {
     ) {
         this.labels = new Array<InternalLabel>()
         this.threeOrbitControlsService.subscribe("onCameraChanged", () => this.onCameraChanged())
-        this.threeCameraService.subscribe("onCameraZoomChanged", () => this.onCameraChanged())
     }
 
     // Labels need to be scaled according to map or it will clip + looks bad
@@ -285,7 +284,7 @@ export class CodeMapLabelService {
     private setLabelSize(sprite: Sprite, label: InternalLabel, labelWidth: number = sprite.material.map.image.width) {
         const mapCenter = new Box3().setFromObject(this.threeSceneService.mapGeometry).getBoundingSphere(new Sphere()).center
         if (this.threeCameraService.camera) {
-            const distance = this.threeCameraService.camera.position.distanceTo(mapCenter) / this.threeCameraService.camera.zoom
+            const distance = this.threeCameraService.camera.position.distanceTo(mapCenter)
             if (label !== null) {
                 this.lineCount = label.lineCount
             }

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

@@ -19,7 +19,6 @@ import { State, Store } from "@ngrx/store"
 import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { defaultState } from "../../state/store/state.manager"
 import { CODE_MAP_BUILDING, CODE_MAP_BUILDING_TS_NODE, CONSTANT_HIGHLIGHT, TEST_FILE_WITH_PATHS, TEST_NODES } from "../../util/dataMocks"
-import { expect } from "@jest/globals"
 
 jest.mock("../../state/selectors/accumulatedData/idToNode.selector", () => ({
     idToNodeSelector: jest.fn()
@@ -138,9 +137,7 @@ describe("codeMapMouseEventService", () => {
         threeCameraService = codeMapMouseEventService["threeCameraService"] = jest.fn().mockReturnValue({
             camera: {
                 updateMatrixWorld: jest.fn()
-            },
-            zoomIn: jest.fn(),
-            zoomOut: jest.fn()
+            }
         })()
     }
 
@@ -913,22 +910,4 @@ describe("codeMapMouseEventService", () => {
             expect(codeMapMouseEventService["labelSelectedBuilding"]).toEqual(referenceLabel)
         })
     })
-
-    describe("handleWheelEvent", () => {
-        it("should zoom in", () => {
-            const wheelEvent = new WheelEvent("wheel", { deltaY: -100, clientX: 50, clientY: 50 })
-            codeMapMouseEventService.handleWheelEvent(wheelEvent)
-
-            expect(threeCameraService.zoomIn).toHaveBeenCalled()
-            expect(threeRendererService.render).toHaveBeenCalled()
-        })
-
-        it("should zoom out", () => {
-            const wheelEvent = new WheelEvent("wheel", { deltaY: 100, clientX: 50, clientY: 50 })
-            codeMapMouseEventService.handleWheelEvent(wheelEvent)
-
-            expect(threeCameraService.zoomOut).toHaveBeenCalled()
-            expect(threeRendererService.render).toHaveBeenCalled()
-        })
-    })
 })

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

@@ -104,8 +104,10 @@ export class CodeMapMouseEventService implements OnDestroy {
         this.threeRendererService.renderer.domElement.addEventListener("dblclick", () => this.onDocumentDoubleClick())
         this.threeRendererService.renderer.domElement.addEventListener("mouseleave", event => this.onDocumentMouseLeave(event))
         this.threeRendererService.renderer.domElement.addEventListener("mouseenter", () => this.onDocumentMouseEnter())
-        const debouncedHandleWheelEvent = debounce(this.handleWheelEvent.bind(this), 1)
-        this.threeRendererService.renderer.domElement.addEventListener("wheel", debouncedHandleWheelEvent)
+        this.threeRendererService.renderer.domElement.addEventListener(
+            "wheel",
+            debounce(() => this.threeRendererService.render(), 1)
+        )
         this.viewCubeMouseEvents.subscribe("viewCubeEventPropagation", this.onViewCubeEventPropagation)
     }
 
@@ -451,13 +453,4 @@ export class CodeMapMouseEventService implements OnDestroy {
             this.store.dispatch(setHoveredNodeId({ value: null }))
         }
     }
-
-    handleWheelEvent(event: WheelEvent) {
-        if (event.deltaY < 0) {
-            this.threeCameraService.zoomIn()
-        } else {
-            this.threeCameraService.zoomOut()
-        }
-        this.threeRendererService.render()
-    }
 }

visualization/app/codeCharta/ui/codeMap/threeViewer/threeCamera.service.spec.ts

@@ -1,6 +1,5 @@
 import { PerspectiveCamera, Vector3 } from "three"
 import { ThreeCameraService } from "./threeCamera.service"
-import { expect } from "@jest/globals"
 
 describe("ThreeCameraService", () => {
     let threeCameraService: ThreeCameraService
@@ -28,55 +27,4 @@ describe("ThreeCameraService", () => {
             expect(threeCameraService.camera.position).toEqual({ x: 1, y: 2, z: 3 })
         })
     })
-
-    describe("setZoomFactor", () => {
-        it("should set zoomFactor correctly", () => {
-            threeCameraService.setZoomFactor(2)
-            expect(threeCameraService.camera.zoom).toEqual(2)
-        })
-    })
-
-    describe("zoomIn", () => {
-        beforeEach(() => {
-            threeCameraService.init(400, 200)
-            threeCameraService.setZoomFactor(1)
-        })
-
-        it("should change zoomFactor correctly", () => {
-            jest.spyOn(threeCameraService, "setZoomFactor")
-            threeCameraService.zoomIn()
-            expect(threeCameraService.camera.zoom).toEqual(1.25)
-            expect(threeCameraService.setZoomFactor).toHaveBeenCalledWith(1.25)
-        })
-
-        it("should not exceed MAX_ZOOM_FACTOR", () => {
-            threeCameraService.setZoomFactor(ThreeCameraService.MAX_ZOOM_Factor)
-            jest.spyOn(threeCameraService, "setZoomFactor")
-            threeCameraService.zoomIn()
-            expect(threeCameraService.camera.zoom).toEqual(ThreeCameraService.MAX_ZOOM_Factor)
-            expect(threeCameraService.setZoomFactor).toHaveBeenCalledWith(ThreeCameraService.MAX_ZOOM_Factor)
-        })
-    })
-
-    describe("zoomOut", () => {
-        beforeEach(() => {
-            threeCameraService.init(400, 200)
-            threeCameraService.setZoomFactor(1)
-        })
-
-        it("should change zoomFactor correctly", () => {
-            jest.spyOn(threeCameraService, "setZoomFactor")
-            threeCameraService.zoomOut()
-            expect(threeCameraService.camera.zoom).toEqual(0.75)
-            expect(threeCameraService.setZoomFactor).toHaveBeenCalledWith(0.75)
-        })
-
-        it("should not fall behind MIN_ZOOM_FACTOR", () => {
-            threeCameraService.setZoomFactor(ThreeCameraService.MIN_ZOOM_Factor)
-            jest.spyOn(threeCameraService, "setZoomFactor")
-            threeCameraService.zoomOut()
-            expect(threeCameraService.camera.zoom).toEqual(ThreeCameraService.MIN_ZOOM_Factor)
-            expect(threeCameraService.setZoomFactor).toHaveBeenCalledWith(ThreeCameraService.MIN_ZOOM_Factor)
-        })
-    })
 })

visualization/app/codeCharta/ui/codeMap/threeViewer/threeCamera.service.ts

@@ -1,53 +1,21 @@
 import { Injectable } from "@angular/core"
 import { PerspectiveCamera, Vector3 } from "three"
-import { EventEmitter } from "../../../util/EventEmitter"
-
-type CameraChangeEvents = {
-    onCameraZoomChanged: (data: { camera: PerspectiveCamera }) => void
-}
 
 @Injectable({ providedIn: "root" })
 export class ThreeCameraService {
     static VIEW_ANGLE = 45
     static NEAR = 50
     static FAR = 200_000 //TODO optimize renderer for far objects
-    static readonly MAX_ZOOM_Factor = 50
-    static readonly MIN_ZOOM_Factor = 0.1
-    static readonly ZOOM_STEP = 0.25
-    private eventEmitter = new EventEmitter<CameraChangeEvents>()
     camera: PerspectiveCamera
-    zoomFactor: number
 
     init(containerWidth: number, containerHeight: number) {
         const aspect = containerWidth / containerHeight
         this.camera = new PerspectiveCamera(ThreeCameraService.VIEW_ANGLE, aspect, ThreeCameraService.NEAR, ThreeCameraService.FAR)
         this.setPosition(new Vector3(0, 300, 1000))
-        this.zoomFactor = this.camera.zoom
     }
 
     setPosition(position: Vector3) {
         this.camera.position.set(position.x, position.y, position.z)
         this.camera.lookAt(0, 0, 0)
     }
-
-    setZoomFactor(zoomFactor: number) {
-        this.camera.zoom = zoomFactor
-        this.zoomFactor = zoomFactor
-        this.eventEmitter.emit("onCameraZoomChanged", { camera: this.camera })
-        this.camera.updateProjectionMatrix()
-    }
-
-    zoomIn() {
-        this.setZoomFactor(Math.min(this.zoomFactor + ThreeCameraService.ZOOM_STEP, ThreeCameraService.MAX_ZOOM_Factor))
-    }
-
-    zoomOut() {
-        this.setZoomFactor(Math.max(this.zoomFactor - ThreeCameraService.ZOOM_STEP, ThreeCameraService.MIN_ZOOM_Factor))
-    }
-
-    subscribe<Key extends keyof CameraChangeEvents>(key: Key, callback: CameraChangeEvents[Key]) {
-        this.eventEmitter.on(key, data => {
-            callback(data)
-        })
-    }
 }

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

@@ -113,10 +113,8 @@ export class ThreeOrbitControlsService {
     init(domElement: HTMLCanvasElement) {
         const OrbitControls = oc(Three)
         this.controls = new OrbitControls(this.threeCameraService.camera, domElement) as unknown as OrbitControlsType
-        this.controls.enableZoom = false
         this.controls.addEventListener("change", () => {
             this.onInput(this.threeCameraService.camera)
-            this.threeRendererService.render()
         })
     }
 

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

@@ -1,6 +1,5 @@
 import { Component, ViewEncapsulation } from "@angular/core"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
-import { ThreeCameraService } from "../../codeMap/threeViewer/threeCamera.service"
 
 @Component({
     selector: "cc-center-map-button",
@@ -9,13 +8,9 @@ import { ThreeCameraService } from "../../codeMap/threeViewer/threeCamera.servic
     encapsulation: ViewEncapsulation.None
 })
 export class CenterMapButtonComponent {
-    constructor(
-        private threeOrbitControlsService: ThreeOrbitControlsService,
-        private threeCameraService: ThreeCameraService
-    ) {}
+    constructor(private threeOrbitControlsService: ThreeOrbitControlsService) {}
 
     centerMap() {
         this.threeOrbitControlsService.autoFitTo()
-        this.threeCameraService.setZoomFactor(1)
     }
 }