codecharta-visualization 1.119.1 → 1.120.0

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

@@ -1,114 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { StoreModule } from "@ngrx/store"
-import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
-import { ThreeCameraService } from "./threeCamera.service"
-import { ThreeSceneService } from "./threeSceneService"
-import { BoxGeometry, Group, Mesh, PerspectiveCamera, Vector3 } from "three"
-import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
-import { ThreeRendererService } from "./threeRenderer.service"
-import { wait } from "../../../util/testUtils/wait"
-import { appReducers, setStateMiddleware } from "../../../state/store/state.manager"
-
-describe("ThreeOrbitControlsService", () => {
-	let threeOrbitControlsService: ThreeOrbitControlsService
-	let threeCameraService: ThreeCameraService
-	let threeSceneService: ThreeSceneService
-	let threeRendererService: ThreeRendererService
-
-	let vector: Vector3
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })]
-		})
-		restartSystem()
-		rebuildService()
-		withMockedThreeCameraService()
-		withMockedThreeSceneService()
-		withMockedControlService()
-	})
-
-	function restartSystem() {
-		threeCameraService = TestBed.inject(ThreeCameraService)
-		threeSceneService = TestBed.inject(ThreeSceneService)
-		threeRendererService = TestBed.inject(ThreeRendererService)
-
-		vector = new Vector3(5.711_079_128_159_569, 5.711_079_128_159_569, 0)
-	}
-
-	function withMockedThreeCameraService() {
-		const camera = new PerspectiveCamera(100, 0, 0, 0)
-		camera.position.set(vector.x, vector.y, vector.z)
-		threeCameraService.camera = camera
-	}
-
-	function withMockedThreeSceneService() {
-		threeSceneService.scene.add = jest.fn()
-		threeSceneService.scene.remove = jest.fn()
-		threeSceneService.mapGeometry = new Group().add(new Mesh(new BoxGeometry(10, 10, 10)))
-	}
-
-	function withMockedControlService() {
-		threeOrbitControlsService.controls = {
-			target: new Vector3(1, 1, 1)
-		} as unknown as OrbitControls
-		threeOrbitControlsService.controls.update = jest.fn()
-	}
-
-	function rebuildService() {
-		threeOrbitControlsService = new ThreeOrbitControlsService(threeCameraService, threeSceneService, threeRendererService)
-	}
-
-	it("rotateCameraInVectorDirection ", () => {
-		threeOrbitControlsService.controls = {
-			target: new Vector3(0, 0, 0)
-		} as unknown as OrbitControls
-		const vector = { x: 0, y: 1, z: 0 }
-
-		threeOrbitControlsService.rotateCameraInVectorDirection(vector.x, vector.y, vector.z)
-
-		expect(threeSceneService.scene.add).toBeCalled()
-		expect(threeSceneService.scene.remove).toBeCalled()
-
-		expect(threeCameraService.camera.position).toMatchSnapshot()
-	})
-
-	describe("setControlTarget", () => {
-		it("should set the controlTarget to the store cameraTarget", () => {
-			const result: Vector3 = new Vector3(1, 1, 1)
-			threeOrbitControlsService.setControlTarget(new Vector3(1, 1, 1))
-
-			expect(threeOrbitControlsService.controls.target).toEqual(result)
-		})
-	})
-
-	describe("autoFitTo", () => {
-		it("should auto fit map to its origin value ", async () => {
-			threeCameraService.camera.position.set(0, 0, 0)
-
-			threeOrbitControlsService.autoFitTo()
-			await wait(0)
-
-			expect(threeCameraService.camera.position).toEqual(vector)
-		})
-
-		it("should call an control update", async () => {
-			threeCameraService.camera.lookAt = jest.fn()
-
-			threeOrbitControlsService.autoFitTo()
-			await wait(0)
-
-			expect(threeCameraService.camera.lookAt).toBeCalledWith(threeOrbitControlsService.controls.target)
-		})
-
-		it("should auto fit map to its original value ", async () => {
-			threeCameraService.camera.updateProjectionMatrix = jest.fn()
-
-			threeOrbitControlsService.autoFitTo()
-			await wait(0)
-
-			expect(threeOrbitControlsService.controls.update).toBeCalled()
-			expect(threeCameraService.camera.updateProjectionMatrix).toBeCalled()
-		})
-	})
-})

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

@@ -1,131 +0,0 @@
-import { ThreeCameraService } from "./threeCamera.service"
-import { Injectable } from "@angular/core"
-import { Box3, Mesh, MeshNormalMaterial, PerspectiveCamera, Vector3, Sphere, BoxGeometry } from "three"
-import { ThreeSceneService } from "./threeSceneService"
-
-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 { ThreeRendererService } from "./threeRenderer.service"
-import { EventEmitter } from "../../../util/EventEmitter"
-
-type CameraChangeEvents = {
-	onCameraChanged: (data: { camera: PerspectiveCamera }) => void
-}
-
-@Injectable({ providedIn: "root" })
-export class ThreeOrbitControlsService {
-	static CAMERA_CHANGED_EVENT_NAME = "camera-changed"
-
-	controls: OrbitControlsType
-	private eventEmitter = new EventEmitter<CameraChangeEvents>()
-
-	constructor(
-		private threeCameraService: ThreeCameraService,
-		private threeSceneService: ThreeSceneService,
-		private threeRendererService: ThreeRendererService
-	) {}
-
-	setControlTarget(cameraTarget: Vector3) {
-		this.controls.target.set(cameraTarget.x, cameraTarget.y, cameraTarget.z)
-	}
-
-	rotateCameraInVectorDirection(x: number, y: number, z: number) {
-		const zoom = this.getZoom()
-		this.lookAtDirectionFromTarget(x, y, z)
-		this.applyOldZoom(zoom)
-
-		this.threeRendererService.render()
-		this.onInput(this.threeCameraService.camera)
-	}
-
-	autoFitTo() {
-		setTimeout(() => {
-			const boundingSphere = this.getBoundingSphere()
-
-			const length = this.cameraPerspectiveLengthCalculation(boundingSphere)
-			const cameraReference = this.threeCameraService.camera
-
-			cameraReference.position.set(length, length, boundingSphere.center.z)
-
-			this.controls.update()
-
-			this.focusCameraViewToCenter(boundingSphere)
-			this.threeRendererService.render()
-			this.onInput(this.threeCameraService.camera)
-		})
-	}
-
-	private cameraPerspectiveLengthCalculation(boundingSphere: Sphere) {
-		const cameraReference = this.threeCameraService.camera
-
-		//TODO: Scale Factor for object to camera ratio
-		const scale = 1.3 // object size / display size
-		const objectAngularSize = ((cameraReference.fov * Math.PI) / 180) * scale
-
-		const distanceToCamera = boundingSphere.radius / Math.tan(objectAngularSize / 2)
-		return Math.sqrt(Math.pow(distanceToCamera, 2) + Math.pow(distanceToCamera, 2))
-	}
-
-	private focusCameraViewToCenter(boundingSphere: Sphere) {
-		const boundingSphereCenter: Vector3 = boundingSphere.center.clone()
-
-		boundingSphereCenter.setY(0)
-
-		this.controls.target.set(boundingSphereCenter.x, boundingSphereCenter.y, boundingSphereCenter.z)
-
-		this.threeCameraService.camera.lookAt(boundingSphereCenter)
-
-		this.threeCameraService.camera.updateProjectionMatrix()
-	}
-
-	private getBoundingSphere() {
-		return new Box3().setFromObject(this.threeSceneService.mapGeometry).getBoundingSphere(new Sphere())
-	}
-
-	private lookAtDirectionFromTarget(x: number, y: number, z: number) {
-		this.threeCameraService.camera.position.set(this.controls.target.x, this.controls.target.y, this.controls.target.z)
-
-		const alignmentCube = new Mesh(new BoxGeometry(20, 20, 20), new MeshNormalMaterial())
-
-		this.threeSceneService.scene.add(alignmentCube)
-
-		alignmentCube.position.set(this.controls.target.x, this.controls.target.y, this.controls.target.z)
-
-		alignmentCube.translateX(x)
-		alignmentCube.translateY(y)
-		alignmentCube.translateZ(z)
-
-		this.threeCameraService.camera.lookAt(alignmentCube.getWorldPosition(alignmentCube.position))
-		this.threeSceneService.scene.remove(alignmentCube)
-	}
-
-	private getZoom() {
-		return this.threeCameraService.camera.position.distanceTo(this.controls.target)
-	}
-
-	private applyOldZoom(oldZoom: number) {
-		this.threeCameraService.camera.translateZ(oldZoom)
-	}
-
-	init(domElement: HTMLCanvasElement) {
-		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)
-		})
-	}
-
-	onInput(camera: PerspectiveCamera) {
-		this.setControlTarget(this.controls.target)
-		this.eventEmitter.emit("onCameraChanged", { camera })
-	}
-
-	subscribe<Key extends keyof CameraChangeEvents>(key: Key, callback: CameraChangeEvents[Key]) {
-		this.eventEmitter.on(key, data => {
-			callback(data)
-		})
-	}
-}

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

@@ -1,341 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { Camera, Scene, Vector2, WebGLRenderer } from "three"
-import { Store, StoreModule } from "@ngrx/store"
-// eslint-disable-next-line no-duplicate-imports
-import * as three from "three"
-import { WEBGL } from "three/examples/jsm/WebGL"
-import { SharpnessMode } from "../../../codeCharta.model"
-import { setSharpnessMode } from "../../../state/store/appSettings/sharpnessMode/sharpnessMode.actions"
-import { CustomComposer } from "../rendering/postprocessor/customComposer"
-import { ThreeRendererService } from "./threeRenderer.service"
-import * as composer from "../rendering/postprocessor/customComposer"
-import { setIsWhiteBackground } from "../../../state/store/appSettings/isWhiteBackground/isWhiteBackground.actions"
-import { appReducers, setStateMiddleware } from "../../../state/store/state.manager"
-
-describe("threeRendererService", () => {
-	let threeRendererService: ThreeRendererService
-	let store: Store
-
-	const setFXAA = (value: boolean) => {
-		ThreeRendererService.enableFXAA = value
-		store.dispatch(setSharpnessMode({ value: value ? SharpnessMode.PixelRatioFXAA : SharpnessMode.Standard }))
-	}
-
-	const setPixelRatio = (value: boolean) => {
-		ThreeRendererService.setPixelRatio = value
-		store.dispatch(setSharpnessMode({ value: value ? SharpnessMode.PixelRatioFXAA : SharpnessMode.Standard }))
-	}
-
-	const setWebGl2 = value => {
-		jest.spyOn(WEBGL, "isWebGL2Available").mockImplementationOnce(() => {
-			return value
-		})
-	}
-
-	const spyOnComposer = () => {
-		return jest.spyOn(composer, "CustomComposer").mockReturnValue({
-			setSize: jest.fn(),
-			addPass: jest.fn()
-		} as unknown as CustomComposer)
-	}
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })],
-			providers: [ThreeRendererService]
-		})
-		store = TestBed.inject(Store)
-
-		const mockedWebGLRenderer = () => {
-			const eventMap = {}
-			const webGLRenderer = {
-				context: {
-					getParameter: jest.fn().mockReturnValue(["WebGL 2"]),
-					getExtension: jest.fn().mockReturnValue({
-						EXT_blend_minmax: null
-					}),
-					createTexture: jest.fn(),
-					bindTexture: jest.fn(),
-					texParameteri: jest.fn(),
-					texImage2D: jest.fn(),
-					clearColor: jest.fn(),
-					clearDepth: jest.fn(),
-					clearStencil: jest.fn(),
-					enable: jest.fn(),
-					disable: jest.fn(),
-					depthFunc: jest.fn(),
-					frontFace: jest.fn(),
-					cullFace: jest.fn(),
-					initGLContext: jest.fn(),
-					scissor: jest.fn(),
-					viewport: jest.fn()
-				} as unknown as WebGLRenderingContext
-			} as WebGLRenderer
-
-			webGLRenderer.domElement = {
-				addEventListener: jest.fn((event, callback) => {
-					eventMap[event] = callback
-				}),
-				getBoundingClientRect: jest.fn().mockReturnValue({ left: 20, top: 20 }),
-				width: 100,
-				height: 100
-			} as unknown as HTMLCanvasElement
-
-			webGLRenderer.getPixelRatio = jest.fn().mockReturnValue(2)
-			webGLRenderer.setClearColor = jest.fn()
-			webGLRenderer.render = jest.fn()
-			webGLRenderer.setPixelRatio = jest.fn()
-			webGLRenderer.getDrawingBufferSize = jest.fn().mockReturnValue({
-				size: {
-					width: 1,
-					height: 1
-				}
-			})
-			webGLRenderer.setSize = jest.fn()
-
-			return webGLRenderer
-		}
-
-		jest.spyOn(three, "WebGLRenderer").mockImplementation(() => {
-			return mockedWebGLRenderer()
-		})
-
-		threeRendererService = TestBed.inject(ThreeRendererService)
-		threeRendererService.composer = {
-			render: jest.fn(),
-			setSize: jest.fn(),
-			addPass: jest.fn(),
-			getInfo: jest.fn().mockReturnValue({
-				triangles: 0
-			}),
-			getMemoryInfo: jest.fn().mockReturnValue({
-				geom: 0
-			})
-		} as unknown as CustomComposer
-		threeRendererService.renderer = {
-			...mockedWebGLRenderer(),
-			info: {
-				render: { triangles: 1 },
-				memory: { geom: 1 }
-			}
-		} as unknown as WebGLRenderer
-		threeRendererService["setBackgroundColorToState"] = jest.fn()
-	})
-
-	describe("init", () => {
-		it("should call initGL", () => {
-			threeRendererService["initGL"] = jest.fn()
-			threeRendererService.init(10, 20, new Scene(), new Camera())
-			expect(threeRendererService["initGL"]).toHaveBeenCalledWith(10, 20)
-		})
-
-		it("should ignore background updates before it was initialized", () => {
-			store.dispatch(setIsWhiteBackground({ value: true }))
-			expect(threeRendererService["setBackgroundColorToState"]).not.toHaveBeenCalled()
-		})
-
-		it("should set its background color within init and subscribe to updates", () => {
-			threeRendererService.init(10, 20, new Scene(), new Camera())
-			expect(threeRendererService["setBackgroundColorToState"]).toHaveBeenCalledTimes(1)
-			store.dispatch(setIsWhiteBackground({ value: true }))
-			expect(threeRendererService["setBackgroundColorToState"]).toHaveBeenCalledTimes(2)
-		})
-	})
-
-	describe("initGL", () => {
-		it("should call setGLOptions", () => {
-			threeRendererService["setGLOptions"] = jest.fn()
-			threeRendererService["initGL"](10, 20)
-			expect(threeRendererService["setGLOptions"]).toHaveBeenCalled()
-		})
-
-		it("should call getDrawingBufferSize when webgl2 is available and FXAA is true", () => {
-			setFXAA(true)
-			setWebGl2(true)
-
-			threeRendererService["initGL"](1, 1)
-			expect(threeRendererService.renderer["getDrawingBufferSize"]).toHaveBeenCalledWith(expect.any(Vector2))
-		})
-
-		it("should generate custom composer with render target when webgl2 is available and FXAA is true", () => {
-			setFXAA(true)
-			setWebGl2(true)
-
-			const customComposer = spyOnComposer()
-			threeRendererService["initGL"](1, 1)
-			expect(customComposer).toHaveBeenCalled()
-		})
-
-		it("should generate customcomposer with no render target when webgl2 is not available and FXAA is true", () => {
-			setFXAA(true)
-			setWebGl2(false)
-
-			const customComposer = spyOnComposer()
-			threeRendererService["initGL"](1, 1)
-			expect(customComposer).toHaveBeenCalled()
-		})
-
-		it("should call renderer setPixelRatio when pixelRatio is true", () => {
-			setPixelRatio(true)
-			threeRendererService["initGL"](1, 1)
-			expect(threeRendererService.renderer["setPixelRatio"]).toHaveBeenCalled()
-		})
-
-		it("should not call renderer setPixelRatio when pixelRatio is true", () => {
-			setPixelRatio(false)
-			threeRendererService["initGL"](1, 1)
-			expect(threeRendererService.renderer["setPixelRatio"]).not.toHaveBeenCalled()
-		})
-
-		it("should call renderer setSize", () => {
-			threeRendererService["initGL"](1, 2)
-			expect(threeRendererService.renderer.setSize).toHaveBeenCalledWith(1, 2)
-		})
-
-		it("should call initComposer when enableFXAA is true", () => {
-			threeRendererService["initComposer"] = jest.fn()
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.PixelRatioFXAA }))
-
-			threeRendererService["initGL"](1, 1)
-			expect(threeRendererService["initComposer"]).toHaveBeenCalled()
-		})
-
-		it("should not call initComposer when enableFXAA is false", () => {
-			threeRendererService["initComposer"] = jest.fn()
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.Standard }))
-
-			threeRendererService["initGL"](1, 1)
-			expect(threeRendererService["initComposer"]).not.toHaveBeenCalled()
-		})
-	})
-
-	describe("setGLOptions", () => {
-		it("should call and set the standard options", () => {
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.Standard }))
-
-			threeRendererService["setGLOptions"]()
-
-			expect(ThreeRendererService.RENDER_OPTIONS.antialias).toBe(true)
-			expect(ThreeRendererService.enableFXAA).toBe(false)
-			expect(ThreeRendererService.setPixelRatio).toBe(false)
-		})
-
-		it("should call and set the pixel ration with no AA options", () => {
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.PixelRatioNoAA }))
-
-			threeRendererService["setGLOptions"]()
-
-			expect(ThreeRendererService.RENDER_OPTIONS.antialias).toBe(false)
-			expect(ThreeRendererService.enableFXAA).toBe(false)
-			expect(ThreeRendererService.setPixelRatio).toBe(true)
-		})
-
-		it("should call and set the pixel ration with FXAA options", () => {
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.PixelRatioFXAA }))
-
-			threeRendererService["setGLOptions"]()
-
-			expect(ThreeRendererService.RENDER_OPTIONS.antialias).toBe(false)
-			expect(ThreeRendererService.enableFXAA).toBe(true)
-			expect(ThreeRendererService.setPixelRatio).toBe(true)
-		})
-
-		it("should call and set the pixel ration with AA options", () => {
-			store.dispatch(setSharpnessMode({ value: SharpnessMode.PixelRatioAA }))
-
-			threeRendererService["setGLOptions"]()
-
-			expect(ThreeRendererService.RENDER_OPTIONS.antialias).toBe(true)
-			expect(ThreeRendererService.enableFXAA).toBe(false)
-			expect(ThreeRendererService.setPixelRatio).toBe(true)
-		})
-	})
-
-	describe("initComposer", () => {
-		it("should call renderer getPixelRatio", () => {
-			threeRendererService["initComposer"]()
-
-			expect(threeRendererService.renderer.getPixelRatio).toBeCalled()
-		})
-
-		it("should call composer setSize", () => {
-			threeRendererService["initComposer"]()
-
-			expect(threeRendererService.composer.setSize).toBeCalled()
-		})
-
-		it("should call composer addPass", () => {
-			threeRendererService["initComposer"]()
-
-			expect(threeRendererService.composer.addPass).toBeCalled()
-		})
-	})
-
-	describe("getInfo", () => {
-		it("should call composer getInfo when FXAA enabled", () => {
-			setFXAA(true)
-
-			const info = threeRendererService.getInfo()
-			expect(threeRendererService.composer.getInfo).toBeCalled()
-			expect(info).toStrictEqual({ triangles: 0 })
-		})
-
-		it("should return renderer.info when FXAA disabled", () => {
-			setFXAA(false)
-
-			const info = threeRendererService.getInfo()
-			expect(info).toStrictEqual({ triangles: 1 })
-		})
-	})
-
-	describe("getMemoryInfo", () => {
-		it("should call composer getMemoryInfo when FXAA enabled", () => {
-			setFXAA(true)
-
-			const info = threeRendererService.getMemoryInfo()
-			expect(threeRendererService.composer.getMemoryInfo).toBeCalled()
-			expect(info).toStrictEqual({ geom: 0 })
-		})
-
-		it("should return renderer.info when FXAA disabled", () => {
-			setFXAA(false)
-
-			const info = threeRendererService.getMemoryInfo()
-			expect(info).toStrictEqual({ geom: 1 })
-		})
-	})
-
-	describe("render", () => {
-		it("should not call renderer render when renderer is undefined and FXAA is disabled", () => {
-			setFXAA(false)
-			const render = jest.spyOn(threeRendererService.renderer, "render")
-			threeRendererService.renderer = undefined
-
-			threeRendererService.render()
-			expect(render).not.toHaveBeenCalled()
-		})
-
-		it("should not call composer render when renderer is undefined and FXAA is disabled", () => {
-			setFXAA(true)
-			const render = jest.spyOn(threeRendererService.composer, "render")
-			threeRendererService.composer = undefined
-
-			threeRendererService.render()
-			expect(render).not.toHaveBeenCalled()
-		})
-
-		it("should call composer when FXAA is enabled", () => {
-			setFXAA(true)
-
-			threeRendererService.render()
-			expect(threeRendererService.composer.render).toHaveBeenCalled()
-		})
-
-		it("should call normal renderer when FXAA is disabled", () => {
-			setFXAA(false)
-
-			threeRendererService.render()
-			expect(threeRendererService.renderer.render).toHaveBeenCalledWith(threeRendererService.scene, threeRendererService.camera)
-		})
-	})
-})