Skip to content

Commit

Permalink
Revert "Refactor map zoom function to use Three.js #3147 (#3665)"
Browse files Browse the repository at this point in the history
This reverts commit 89bd8bb
  • Loading branch information
phanlezz committed Aug 12, 2024
1 parent bc7ce1c commit fac0946
Show file tree
Hide file tree
Showing 8 changed files with 13 additions and 129 deletions.
8 changes: 6 additions & 2 deletions visualization/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 🚀
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -138,9 +137,7 @@ describe("codeMapMouseEventService", () => {
threeCameraService = codeMapMouseEventService["threeCameraService"] = jest.fn().mockReturnValue({
camera: {
updateMatrixWorld: jest.fn()
},
zoomIn: jest.fn(),
zoomOut: jest.fn()
}
})()
}

Expand Down Expand Up @@ -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()
})
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down Expand Up @@ -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()
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { PerspectiveCamera, Vector3 } from "three"
import { ThreeCameraService } from "./threeCamera.service"
import { expect } from "@jest/globals"

describe("ThreeCameraService", () => {
let threeCameraService: ThreeCameraService
Expand Down Expand Up @@ -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)
})
})
})
Original file line number Diff line number Diff line change
@@ -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)
})
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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)
}
}

0 comments on commit fac0946

Please sign in to comment.