codecharta-visualization 1.119.1 → 1.120.1

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

@@ -1,292 +0,0 @@
-import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
-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 type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
-import { ViewCubeComponent } from "./viewCube.component"
-
-describe("ViewCubeComponent", () => {
-	let viewCubeComponent: ViewCubeComponent
-	let threeOrbitControlsService: ThreeOrbitControlsService
-	let viewCubeMouseEventsService: ViewCubeMouseEventsService
-
-	beforeEach(() => {
-		threeOrbitControlsService = {} as ThreeOrbitControlsService
-		viewCubeMouseEventsService = { init: jest.fn() } as unknown as ViewCubeMouseEventsService
-		threeOrbitControlsService.controls = {
-			target: new Vector3(1, 2, 3)
-		} as unknown as OrbitControls
-		ViewCubeComponent.prototype["initRenderer"] = jest.fn()
-		ViewCubeComponent.prototype["onAnimationFrame"] = jest.fn()
-		const elementReference = { nativeElement: {} as HTMLElement }
-		viewCubeComponent = new ViewCubeComponent(elementReference, threeOrbitControlsService, viewCubeMouseEventsService)
-	})
-
-	describe("onCameraChanged", () => {
-		it("should call setCameraPosition", () => {
-			viewCubeComponent["setCameraPosition"] = jest.fn()
-			viewCubeComponent["renderer"] = {
-				render: jest.fn()
-			} as unknown as WebGLRenderer
-			const perspectiveCamera = new PerspectiveCamera(
-				ThreeCameraService.VIEW_ANGLE,
-				1,
-				ThreeCameraService.NEAR,
-				ThreeCameraService.FAR
-			)
-
-			viewCubeComponent.onCameraChanged({ camera: perspectiveCamera })
-
-			expect(viewCubeComponent["setCameraPosition"]).toHaveBeenCalledWith({
-				x: -0.801_783_725_737_273_2,
-				y: -1.603_567_451_474_546_4,
-				z: -2.405_351_177_211_819_5
-			})
-		})
-	})
-
-	describe("onCubeHovered", () => {
-		it("should set hover info cube emmisive color to white", () => {
-			viewCubeComponent["renderer"] = {
-				render: jest.fn()
-			} as unknown as WebGLRenderer
-			viewCubeComponent.onCubeHovered({ cube: new Mesh() })
-
-			expect(viewCubeComponent["hoverInfo"].cube.material.emissive).toStrictEqual(new Color(0xff_ff_ff))
-		})
-	})
-
-	describe("onCubeUnHovered", () => {
-		it("should set cube to null", () => {
-			viewCubeComponent["hoverInfo"].cube = {
-				material: {
-					emissive: new Color(0xff_ff_ff)
-				}
-			}
-			viewCubeComponent["renderer"] = {
-				render: jest.fn()
-			} as unknown as WebGLRenderer
-			viewCubeComponent.onCubeUnhovered()
-
-			expect(viewCubeComponent["hoverInfo"].cube).toBe(null)
-		})
-	})
-
-	describe("onCubeClicked", () => {
-		const generateHorizontalMesh = () => {
-			return {
-				middle: new Mesh(),
-				left: new Mesh(),
-				right: new Mesh()
-			}
-		}
-
-		const generateFaceMesh = () => {
-			return {
-				top: generateHorizontalMesh(),
-				middle: generateHorizontalMesh(),
-				bottom: generateHorizontalMesh()
-			}
-		}
-
-		const cubeDefinition = {
-			front: generateFaceMesh(),
-			middle: generateFaceMesh(),
-			back: generateFaceMesh()
-		}
-
-		const generateFrontTests = () => {
-			return [
-				{
-					expectedString: "(0, -1, -1)",
-					whenObject: "front.top.middle",
-					eventValue: cubeDefinition.front.top.middle,
-					expected: { x: 0, y: -1, z: -1 }
-				},
-				{
-					expectedString: "(1, -1, -1)",
-					whenObject: "front.top.left",
-					eventValue: cubeDefinition.front.top.left,
-					expected: { x: 1, y: -1, z: -1 }
-				},
-				{
-					expectedString: "(-1, -1, -1)",
-					whenObject: "front.top.right",
-					eventValue: cubeDefinition.front.top.right,
-					expected: { x: -1, y: -1, z: -1 }
-				},
-
-				{
-					expectedString: "(0, 0, 0)",
-					whenObject: "front.middle.middle",
-					eventValue: cubeDefinition.front.middle.middle,
-					expected: { x: 0, y: 0, z: 0 }
-				},
-				{
-					expectedString: "(1, 0, -1)",
-					whenObject: "front.middle.left",
-					eventValue: cubeDefinition.front.middle.left,
-					expected: { x: 1, y: 0, z: -1 }
-				},
-				{
-					expectedString: "(-1, 0, -1)",
-					whenObject: "front.middle.right",
-					eventValue: cubeDefinition.front.middle.right,
-					expected: { x: -1, y: 0, z: -1 }
-				},
-
-				{
-					expectedString: "(0, 1, -1)",
-					whenObject: "front.bottom.middle",
-					eventValue: cubeDefinition.front.bottom.middle,
-					expected: { x: 0, y: 1, z: -1 }
-				},
-				{
-					expectedString: "(1, 1, -1)",
-					whenObject: "front.bottom.left",
-					eventValue: cubeDefinition.front.bottom.left,
-					expected: { x: 1, y: 1, z: -1 }
-				},
-				{
-					expectedString: "(-1, 1, -1)",
-					whenObject: "front.bottom.right",
-					eventValue: cubeDefinition.front.bottom.right,
-					expected: { x: -1, y: 1, z: -1 }
-				}
-			]
-		}
-
-		const generateMiddleTests = () => {
-			return [
-				{
-					expectedString: "(0, -1, 0)",
-					whenObject: "middle.top.middle",
-					eventValue: cubeDefinition.middle.top.middle,
-					expected: { x: 0, y: -1, z: 0 }
-				},
-				{
-					expectedString: "(1, -1, 0)",
-					whenObject: "middle.top.left",
-					eventValue: cubeDefinition.middle.top.left,
-					expected: { x: 1, y: -1, z: 0 }
-				},
-				{
-					expectedString: "(-1, -1, 0)",
-					whenObject: "middle.top.right",
-					eventValue: cubeDefinition.middle.top.right,
-					expected: { x: -1, y: -1, z: 0 }
-				},
-
-				{
-					expectedString: "(1, 0, 0)",
-					whenObject: "middle.middle.left",
-					eventValue: cubeDefinition.middle.middle.left,
-					expected: { x: 1, y: 0, z: 0 }
-				},
-				{
-					expectedString: "(-1, 0, 0)",
-					whenObject: "middle.middle.right",
-					eventValue: cubeDefinition.middle.middle.right,
-					expected: { x: -1, y: 0, z: 0 }
-				},
-
-				{
-					expectedString: "(0, 1, 0)",
-					whenObject: "middle.bottom.middle",
-					eventValue: cubeDefinition.middle.bottom.middle,
-					expected: { x: 0, y: 1, z: 0 }
-				},
-				{
-					expectedString: "(1, 1, 0)",
-					whenObject: "middle.bottom.left",
-					eventValue: cubeDefinition.middle.bottom.left,
-					expected: { x: 1, y: 1, z: 0 }
-				},
-				{
-					expectedString: "(-1, 1, 0)",
-					whenObject: "middle.bottom.right",
-					eventValue: cubeDefinition.middle.bottom.right,
-					expected: { x: -1, y: 1, z: 0 }
-				}
-			]
-		}
-
-		const generateBackTests = () => {
-			return [
-				{
-					expectedString: "(0, -1, 1)",
-					whenObject: "back.top.middle",
-					eventValue: cubeDefinition.back.top.middle,
-					expected: { x: 0, y: -1, z: 1 }
-				},
-				{
-					expectedString: "(1, -1, 1)",
-					whenObject: "back.top.left",
-					eventValue: cubeDefinition.back.top.left,
-					expected: { x: 1, y: -1, z: 1 }
-				},
-				{
-					expectedString: "(-1, -1, 1)",
-					whenObject: "back.top.right",
-					eventValue: cubeDefinition.back.top.right,
-					expected: { x: -1, y: -1, z: 1 }
-				},
-
-				{
-					expectedString: "(0, 0, 1)",
-					whenObject: "back.middle.middle",
-					eventValue: cubeDefinition.back.middle.middle,
-					expected: { x: 0, y: 0, z: 1 }
-				},
-				{
-					expectedString: "(-1, 0, 1)",
-					whenObject: "back.middle.left",
-					eventValue: cubeDefinition.back.middle.left,
-					expected: { x: -1, y: 0, z: 1 }
-				},
-				{
-					expectedString: "(-1, 0, -1)",
-					whenObject: "back.middle.right",
-					eventValue: cubeDefinition.front.middle.right,
-					expected: { x: -1, y: 0, z: -1 }
-				},
-
-				{
-					expectedString: "(0, 1, 1)",
-					whenObject: "back.bottom.middle",
-					eventValue: cubeDefinition.back.bottom.middle,
-					expected: { x: 0, y: 1, z: 1 }
-				},
-				{
-					expectedString: "(-1, 1, 1)",
-					whenObject: "back.bottom.left",
-					eventValue: cubeDefinition.back.bottom.left,
-					expected: { x: -1, y: 1, z: 1 }
-				},
-				{
-					expectedString: "(1, 1, 1)",
-					whenObject: "back.bottom.right",
-					eventValue: cubeDefinition.back.bottom.right,
-					expected: { x: 1, y: 1, z: 1 }
-				}
-			]
-		}
-
-		const loopTests = [...generateFrontTests(), ...generateMiddleTests(), ...generateBackTests()]
-
-		beforeEach(() => {
-			threeOrbitControlsService.rotateCameraInVectorDirection = jest.fn()
-			viewCubeComponent["cubeDefinition"] = cubeDefinition
-		})
-
-		for (const test of loopTests) {
-			it(`should rotateCameraInVectorDirection with ${test.expectedString} when mesh is ${test.whenObject}`, () => {
-				viewCubeComponent.onCubeClicked({ cube: test.eventValue })
-
-				const expected = test.expected
-				expect(threeOrbitControlsService.rotateCameraInVectorDirection).toHaveBeenCalledWith(expected.x, expected.y, expected.z)
-			})
-		}
-	})
-})

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

@@ -1,245 +0,0 @@
-import {
-	AmbientLight,
-	AxesHelper,
-	BoxHelper,
-	Color,
-	DirectionalLight,
-	Group,
-	Mesh,
-	PerspectiveCamera,
-	Scene,
-	Vector3,
-	WebGLRenderer
-} from "three"
-import { ViewCubemeshGenerator } from "./viewCube.meshGenerator"
-import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
-import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
-import { Component, ElementRef, OnInit, ViewEncapsulation } from "@angular/core"
-
-@Component({
-	selector: "cc-view-cube",
-	templateUrl: "./viewCube.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class ViewCubeComponent implements OnInit {
-	private lights: Group
-	private cubeGroup: Group
-	private camera: PerspectiveCamera
-	private renderer: WebGLRenderer
-	private scene: Scene
-	private WIDTH = 200
-	private HEIGHT = 200
-	private LENGTH_VIEWCUBE = 1
-
-	private hoverInfo = { cube: null, originalMaterial: null }
-
-	private cubeDefinition = {
-		front: null,
-		middle: null,
-		back: null
-	}
-
-	constructor(
-		private elementReference: ElementRef,
-		private threeOrbitControlsService: ThreeOrbitControlsService,
-		private viewCubeMouseEvents: ViewCubeMouseEventsService
-	) {}
-
-	ngOnInit() {
-		this.initScene()
-		this.initLights()
-		this.initRenderer(this.elementReference.nativeElement)
-		this.initCube()
-		this.initAxesHelper()
-		this.initCamera()
-		this.viewCubeMouseEvents.init(this.cubeGroup, this.camera, this.renderer)
-
-		this.threeOrbitControlsService.subscribe("onCameraChanged", this.onCameraChanged)
-		this.viewCubeMouseEvents.subscribe("viewCubeHoveredEvent", this.onCubeHovered)
-		this.viewCubeMouseEvents.subscribe("viewCubeUnHoveredEvent", this.onCubeUnhovered)
-		this.viewCubeMouseEvents.subscribe("viewCubeClicked", this.onCubeClicked)
-	}
-
-	private initAxesHelper() {
-		const axesHelper = new AxesHelper(1.3)
-		const centerOffset = -(this.LENGTH_VIEWCUBE / 2) + 0.01
-		axesHelper.position.x += centerOffset
-		axesHelper.position.y += centerOffset
-		axesHelper.position.z += centerOffset
-
-		this.scene.add(axesHelper)
-	}
-
-	private initCube() {
-		const { group, front, middle, back } = ViewCubemeshGenerator.buildCube(1.6)
-
-		this.cubeGroup = group
-		this.cubeDefinition.front = front
-		this.cubeDefinition.middle = middle
-		this.cubeDefinition.back = back
-
-		const cubeBoundingBox = new BoxHelper(this.cubeGroup, new Color(0x00_00_00))
-
-		this.scene.add(this.cubeGroup)
-		this.scene.add(cubeBoundingBox)
-	}
-
-	onCameraChanged = (data: { camera: PerspectiveCamera }) => {
-		const newCameraPosition = this.calculateCameraPosition(data.camera)
-		this.setCameraPosition(newCameraPosition)
-		this.renderer.render(this.scene, this.camera)
-	}
-
-	private setCameraPosition(cameraPosition: Vector3) {
-		this.camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z)
-		this.camera.lookAt(0, 0, 0)
-		this.camera.updateProjectionMatrix()
-	}
-
-	private calculateCameraPosition(camera: PerspectiveCamera) {
-		const codeMapTargetVector = this.threeOrbitControlsService.controls.target.clone()
-		const codeMapCameraPosition = camera.position.clone()
-		return codeMapCameraPosition.sub(codeMapTargetVector).normalize().multiplyScalar(3)
-	}
-
-	private initScene() {
-		this.scene = new Scene()
-	}
-
-	private initRenderer(element: HTMLElement) {
-		this.renderer = new WebGLRenderer({
-			alpha: true,
-			antialias: true
-		})
-		this.renderer.setSize(this.WIDTH, this.HEIGHT)
-		this.renderer.setPixelRatio(window.devicePixelRatio) // geometry is low poly, no noticeable performance hit even with higher device pixel ratio
-		element.appendChild(this.renderer.domElement)
-	}
-
-	private initCamera() {
-		this.camera = new PerspectiveCamera(45, this.WIDTH / this.HEIGHT, 0.1, 1000)
-		this.camera.position.z = 4
-	}
-
-	onCubeHovered = (data: { cube: Mesh }) => {
-		this.hoverInfo = {
-			cube: data.cube,
-			originalMaterial: data.cube.material
-		}
-		this.hoverInfo.cube.material.emissive = new Color(0xff_ff_ff)
-		this.renderer.render(this.scene, this.camera)
-	}
-
-	onCubeUnhovered = () => {
-		this.hoverInfo.cube.material.emissive = new Color(0x00_00_00) //? NOTE why is this needed
-		this.hoverInfo.cube = null
-		this.renderer.render(this.scene, this.camera)
-	}
-
-	onCubeClicked = (data: { cube: Mesh }) => {
-		switch (data.cube) {
-			case this.cubeDefinition.front.top.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, -1, -1)
-				break
-			case this.cubeDefinition.front.top.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, -1, -1)
-				break
-			case this.cubeDefinition.front.top.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, -1, -1)
-				break
-
-			case this.cubeDefinition.front.middle.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, 0, 0)
-				break
-			case this.cubeDefinition.front.middle.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 0, -1)
-				break
-			case this.cubeDefinition.front.middle.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 0, -1)
-				break
-
-			case this.cubeDefinition.front.bottom.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, 1, -1)
-				break
-			case this.cubeDefinition.front.bottom.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 1, -1)
-				break
-			case this.cubeDefinition.front.bottom.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 1, -1)
-				break
-
-			case this.cubeDefinition.middle.middle.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 0, 0)
-				break
-			case this.cubeDefinition.middle.top.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, -1, 0)
-				break
-			case this.cubeDefinition.middle.bottom.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 1, 0)
-				break
-
-			case this.cubeDefinition.middle.middle.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 0, 0)
-				break
-			case this.cubeDefinition.middle.top.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, -1, 0)
-				break
-			case this.cubeDefinition.middle.bottom.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 1, 0)
-				break
-
-			case this.cubeDefinition.middle.top.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, -1, 0)
-				break
-			case this.cubeDefinition.middle.bottom.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, 1, 0)
-				break
-
-			case this.cubeDefinition.back.top.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, -1, 1)
-				break
-			case this.cubeDefinition.back.top.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, -1, 1)
-				break
-			case this.cubeDefinition.back.top.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, -1, 1)
-				break
-
-			case this.cubeDefinition.back.middle.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, 0, 1)
-				break
-			case this.cubeDefinition.back.middle.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 0, 1)
-				break
-			case this.cubeDefinition.back.middle.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 0, 1)
-				break
-
-			case this.cubeDefinition.back.bottom.middle:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(0, 1, 1)
-				break
-			case this.cubeDefinition.back.bottom.left:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(-1, 1, 1)
-				break
-			case this.cubeDefinition.back.bottom.right:
-				this.threeOrbitControlsService.rotateCameraInVectorDirection(1, 1, 1)
-				break
-		}
-	}
-
-	private initLights() {
-		this.lights = new Group()
-		const ambilight = new AmbientLight(0x70_70_70, 1.2) // soft white light
-		const light1 = new DirectionalLight(0xe0_e0_e0, 0.4)
-		light1.position.set(50, 10, 8).normalize()
-
-		const light2 = new DirectionalLight(0xe0_e0_e0, 0.4)
-		light2.position.set(-50, 10, -8).normalize()
-
-		this.lights.add(ambilight)
-		this.lights.add(light1)
-		this.lights.add(light2)
-
-		this.scene.add(this.lights)
-	}
-}

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

@@ -1,5 +0,0 @@
-import { MeshLambertMaterial } from "three"
-
-export const getBaseMaterialEdge = () => new MeshLambertMaterial({ color: 0xfc_fd_ff })
-export const getBaseMaterialFace = () => new MeshLambertMaterial({ color: 0xfc_fd_ff })
-export const getBaseMaterialVertices = () => new MeshLambertMaterial({ color: 0xfc_fd_ff })