codecharta-visualization 1.119.1 → 1.120.0

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

@@ -1,88 +0,0 @@
-import Stats from "three/examples/jsm/libs/stats.module"
-import { ThreeRendererService } from "./threeRenderer.service"
-import { Injectable, isDevMode } from "@angular/core"
-
-const ONE_SECOND = 1000
-export interface CustomPanel {
-	panel: Stats.Panel
-	maxHeight: number
-}
-
-@Injectable({ providedIn: "root" })
-export class ThreeStatsService {
-	stats: Stats
-	trianglesPanel: CustomPanel
-	glCallsPanel: CustomPanel
-	geometryMemoryPanel: CustomPanel
-	textureMemoryPanel: CustomPanel
-	prevTime: number
-	isDevelopmentMode = isDevMode()
-
-	constructor(private threeRendererService: ThreeRendererService) {}
-
-	init = (canvasElement: Element) => {
-		if (this.isDevelopmentMode) {
-			this.stats = Stats()
-
-			this.stats.domElement.style.position = "absolute"
-			this.stats.domElement.style.left = "0"
-			this.stats.domElement.style.top = "0"
-
-			canvasElement.append(this.stats.dom)
-
-			this.generateStatPanels()
-
-			this.prevTime = this.getTimeFunctor().now()
-		}
-	}
-
-	private getTimeFunctor = () => {
-		return typeof performance === "undefined" ? Date : performance
-	}
-
-	private generateStatPanels = () => {
-		this.trianglesPanel = { panel: this.stats.addPanel(Stats.Panel("triangles", "#ff8", "#221")), maxHeight: 0 }
-		this.glCallsPanel = { panel: this.stats.addPanel(Stats.Panel("calls", "#f8f", "#212")), maxHeight: 0 }
-		this.geometryMemoryPanel = { panel: this.stats.addPanel(Stats.Panel("geo. mem", "#f08", "#221")), maxHeight: 0 }
-		this.textureMemoryPanel = { panel: this.stats.addPanel(Stats.Panel("tex. mem", "#0f8", "#221")), maxHeight: 0 }
-
-		this.stats.showPanel(3)
-	}
-
-	updateStats = () => {
-		if (this.isDevelopmentMode) {
-			const time = this.getTimeFunctor().now()
-			if (time >= this.prevTime + ONE_SECOND) {
-				this.prevTime = time
-				const webGLInfo = this.threeRendererService.getInfo()
-				const threeJsInfo = this.threeRendererService.getMemoryInfo()
-				this.processPanel(this.trianglesPanel, webGLInfo.triangles)
-				this.processPanel(this.glCallsPanel, webGLInfo.calls)
-				this.processPanel(this.geometryMemoryPanel, threeJsInfo.geometries)
-				this.processPanel(this.textureMemoryPanel, threeJsInfo.textures)
-			}
-			this.stats.update()
-		}
-	}
-
-	resetPanels = () => {
-		if (this.isDevelopmentMode) {
-			for (const panel of [this.trianglesPanel, this.glCallsPanel, this.geometryMemoryPanel, this.textureMemoryPanel]) {
-				if (panel !== undefined) {
-					panel.maxHeight = 0
-				}
-			}
-		}
-	}
-
-	private processPanel = (customPanel: CustomPanel, value: number) => {
-		customPanel.maxHeight = Math.max(customPanel.maxHeight, value)
-		customPanel.panel.update(value, customPanel.maxHeight * 1.3)
-	}
-
-	destroy = () => {
-		if (this.isDevelopmentMode) {
-			this.stats.domElement.remove()
-		}
-	}
-}

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

@@ -1,305 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { provideMockStore } from "@ngrx/store/testing"
-import { State } from "@ngrx/store"
-import { ThreeSceneService } from "./threeSceneService"
-import { ThreeCameraService } from "./threeCamera.service"
-import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
-import { ThreeRendererService } from "./threeRenderer.service"
-import { ThreeViewerService } from "./threeViewer.service"
-import { PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three"
-import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
-import { ThreeStatsService } from "./threeStats.service"
-import { CustomComposer } from "../rendering/postprocessor/customComposer"
-
-describe("ThreeViewerService", () => {
-	let threeViewerService: ThreeViewerService
-	let threeSceneService: ThreeSceneService
-	let threeCameraService: ThreeCameraService
-	let threeOrbitControlsService: ThreeOrbitControlsService
-	let threeRendererService: ThreeRendererService
-	let threeStatsService: ThreeStatsService
-
-	let element: Element
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			providers: [provideMockStore(), { provide: State, useValue: {} }]
-		})
-		restartSystem()
-		rebuildService()
-		withMockedElement()
-		withMockedThreeCameraService()
-		withMockedThreeRendererService()
-		withMockedThreeOrbitControlsService()
-		withMockedThreeStatsService()
-	})
-
-	function restartSystem() {
-		threeSceneService = TestBed.inject(ThreeSceneService)
-		threeCameraService = TestBed.inject(ThreeCameraService)
-		threeOrbitControlsService = TestBed.inject(ThreeOrbitControlsService)
-		threeRendererService = TestBed.inject(ThreeRendererService)
-		threeStatsService = TestBed.inject(ThreeStatsService)
-	}
-
-	function rebuildService() {
-		threeViewerService = new ThreeViewerService(
-			threeSceneService,
-			threeCameraService,
-			threeOrbitControlsService,
-			threeRendererService,
-			threeStatsService
-		)
-	}
-
-	function mockThreeJs() {
-		threeCameraService.camera = new PerspectiveCamera()
-		threeCameraService.camera.lookAt = jest.fn()
-		threeCameraService.camera.updateProjectionMatrix = jest.fn()
-		threeRendererService.render = jest.fn()
-		threeRendererService.renderer = { domElement: { height: 1, width: 1 } } as WebGLRenderer
-		threeRendererService.renderer.setSize = jest.fn()
-		threeRendererService.renderer.render = jest.fn()
-		threeRendererService.renderer.dispose = jest.fn()
-		threeRendererService.composer = { dispose: jest.fn() } as unknown as CustomComposer
-		threeRendererService.renderer.getContext = jest.fn()
-		threeRendererService.renderer.setPixelRatio = jest.fn()
-		threeOrbitControlsService.controls = { enableKeys: null } as unknown as OrbitControls
-		threeOrbitControlsService.controls.update = jest.fn()
-		threeSceneService.scene = { position: new Vector3(1, 2, 3) } as Scene
-		threeSceneService.scene.add = jest.fn()
-		threeSceneService.scene.updateMatrixWorld = jest.fn()
-		threeStatsService.updateStats = jest.fn()
-		threeStatsService.destroy = jest.fn()
-		window.addEventListener = jest.fn()
-	}
-
-	function withMockedElement() {
-		element = jest.fn().mockReturnValue({ append: jest.fn() })()
-	}
-
-	function withMockedThreeCameraService() {
-		threeCameraService = threeViewerService["threeCameraService"] = jest.fn().mockReturnValue({ init: jest.fn() })()
-	}
-
-	function withMockedThreeRendererService() {
-		threeRendererService = threeViewerService["threeRendererService"] = jest.fn().mockReturnValue({ init: jest.fn() })()
-	}
-
-	function withMockedThreeOrbitControlsService() {
-		threeOrbitControlsService = threeViewerService["threeOrbitControlsService"] = jest.fn().mockReturnValue({ init: jest.fn() })()
-	}
-
-	function withMockedThreeStatsService() {
-		threeStatsService = threeViewerService["threeStatsService"] = jest.fn().mockReturnValue({ init: jest.fn(), destroy: jest.fn() })()
-	}
-
-	describe("init", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-
-		it("should init threeCameraService", () => {
-			threeViewerService.init(element)
-
-			expect(threeCameraService.init).toHaveBeenCalledWith(1024, 768)
-		})
-
-		it("should call camera.lookAt", () => {
-			threeViewerService.init(element)
-
-			expect(threeCameraService.camera.lookAt).toHaveBeenCalledWith(threeSceneService.scene.position)
-		})
-
-		it("should call scene.add", () => {
-			threeViewerService.init(element)
-
-			expect(threeSceneService.scene.add).toHaveBeenCalledWith(threeCameraService.camera)
-		})
-
-		it("should init threeRendererService", () => {
-			threeViewerService.init(element)
-
-			expect(threeRendererService.init).toHaveBeenCalledWith(1024, 768, threeSceneService.scene, threeCameraService.camera)
-		})
-
-		it("should init threeOrbitControlsService", () => {
-			threeViewerService.init(element)
-
-			expect(threeOrbitControlsService.init).toHaveBeenCalledWith({ height: 1, width: 1 })
-		})
-
-		it("should call append", () => {
-			threeViewerService.init(element)
-
-			expect(element.append).toHaveBeenCalledWith({ height: 1, width: 1 })
-		})
-
-		it("should setup three event listeners", () => {
-			threeViewerService.init(element)
-
-			expect(window.addEventListener).toHaveBeenCalledTimes(3)
-		})
-	})
-
-	describe("onWindowResize", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-
-		it("should call scene.updateMatrixWorld with false", () => {
-			threeViewerService.onWindowResize()
-
-			expect(threeSceneService.scene.updateMatrixWorld).toHaveBeenCalledWith(false)
-		})
-
-		it("should call renderer.setSize", () => {
-			threeViewerService.onWindowResize()
-
-			expect(threeRendererService.renderer.setSize).toHaveBeenCalledWith(1024, 768)
-		})
-
-		it("should set camera.aspect correctly", () => {
-			threeViewerService.onWindowResize()
-
-			expect(threeCameraService.camera.aspect).toBe(1024 / 768)
-		})
-
-		it("should call camera.updateProjectionMatrix", () => {
-			threeViewerService.onWindowResize()
-
-			expect(threeCameraService.camera.updateProjectionMatrix).toHaveBeenCalled()
-		})
-	})
-
-	describe("onFocusIn", () => {
-		beforeEach(() => {
-			mockThreeJs()
-			threeOrbitControlsService.controls.enableKeys = true
-		})
-
-		it("should set controls.enableKeys to true", () => {
-			threeViewerService.onFocusIn({ target: { nodeName: "INPUT" } })
-
-			expect(threeOrbitControlsService.controls.enableKeys).toBeFalsy()
-		})
-
-		it("should not set controls.enableKeys to true", () => {
-			threeViewerService.onFocusIn({ target: { nodeName: "NOT_INPUT" } })
-
-			expect(threeOrbitControlsService.controls.enableKeys).toBeTruthy()
-		})
-	})
-
-	describe("onFocusOut", () => {
-		beforeEach(() => {
-			mockThreeJs()
-			threeOrbitControlsService.controls.enableKeys = false
-		})
-
-		it("should set controls.enableKeys to true", () => {
-			threeViewerService.onFocusOut({ target: { nodeName: "INPUT" } })
-
-			expect(threeOrbitControlsService.controls.enableKeys).toBeTruthy()
-		})
-
-		it("should not set controls.enableKeys to true", () => {
-			threeViewerService.onFocusOut({ target: { nodeName: "NOT_INPUT" } })
-
-			expect(threeOrbitControlsService.controls.enableKeys).toBeFalsy()
-		})
-	})
-
-	describe("animate", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-
-		it("should call controls.update", () => {
-			threeViewerService.animate()
-
-			expect(threeOrbitControlsService.controls.update).toHaveBeenCalled()
-		})
-
-		it("should call update", () => {
-			threeViewerService.animate()
-
-			expect(threeRendererService.render).toHaveBeenCalled()
-		})
-	})
-
-	describe("animateStats", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-		it("should call threeStatsService updateStats", () => {
-			threeViewerService.animateStats()
-
-			expect(threeStatsService.updateStats).toHaveBeenCalled()
-		})
-	})
-
-	describe("getRenderCanvas", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-		it("should return dom element", () => {
-			threeViewerService.getRenderCanvas()
-
-			expect(threeRendererService.renderer.domElement).toEqual({ height: 1, width: 1 })
-		})
-	})
-
-	describe("autoFitTo", () => {
-		beforeEach(() => {
-			mockThreeJs()
-		})
-		it("should call orbital control autoFitTo", () => {
-			threeOrbitControlsService.autoFitTo = jest.fn()
-
-			threeViewerService.autoFitTo()
-
-			expect(threeOrbitControlsService.autoFitTo).toHaveBeenCalled()
-		})
-	})
-
-	describe("restart", () => {
-		it("should restart the system", () => {
-			threeViewerService.stopAnimate = jest.fn()
-			threeViewerService.destroy = jest.fn()
-			threeViewerService.init = jest.fn()
-			threeViewerService.autoFitTo = jest.fn()
-			threeViewerService.animate = jest.fn()
-			threeViewerService.animateStats = jest.fn()
-
-			threeViewerService.restart(element)
-			expect(threeViewerService.stopAnimate).toHaveBeenCalled()
-			expect(threeViewerService.destroy).toHaveBeenCalled()
-			expect(threeViewerService.init).toHaveBeenCalled()
-			expect(threeViewerService.autoFitTo).toHaveBeenCalled()
-			expect(threeViewerService.animate).toHaveBeenCalled()
-			expect(threeViewerService.animateStats).toHaveBeenCalled()
-		})
-	})
-
-	describe("destroy", () => {
-		beforeEach(() => {
-			mockThreeJs()
-
-			threeViewerService.getRenderCanvas = jest.fn().mockReturnValue({ remove: jest.fn() } as unknown as HTMLCanvasElement)
-		})
-		it("should call stats destroy", () => {
-			threeViewerService.destroy()
-
-			expect(threeStatsService.destroy).toHaveBeenCalled()
-		})
-
-		it("should call dispose", () => {
-			threeViewerService.dispose = jest.fn()
-
-			threeViewerService.destroy()
-
-			expect(threeViewerService.dispose).toHaveBeenCalled()
-		})
-	})
-})

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

@@ -1,115 +0,0 @@
-import { Injectable } from "@angular/core"
-import { ThreeSceneService } from "./threeSceneService"
-import { ThreeCameraService } from "./threeCamera.service"
-import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
-import { ThreeRendererService } from "./threeRenderer.service"
-import { ThreeStatsService } from "./threeStats.service"
-
-@Injectable({ providedIn: "root" })
-export class ThreeViewerService {
-	private animationFrameId: number
-
-	constructor(
-		private threeSceneService: ThreeSceneService,
-		private threeCameraService: ThreeCameraService,
-		private threeOrbitControlsService: ThreeOrbitControlsService,
-		private threeRendererService: ThreeRendererService,
-		private threeStatsService: ThreeStatsService
-	) {}
-
-	init(target: Element) {
-		this.threeCameraService.init(window.innerWidth, window.innerHeight)
-
-		const camera = this.threeCameraService.camera
-		const scene = this.threeSceneService.scene
-		camera.lookAt(scene.position)
-		scene.add(camera)
-		this.threeRendererService.init(window.innerWidth, window.innerHeight, scene, camera)
-		this.threeStatsService.init(target)
-		this.threeOrbitControlsService.init(this.threeRendererService.renderer.domElement)
-
-		target.append(this.threeRendererService.renderer.domElement)
-
-		window.addEventListener("resize", this.onWindowResize)
-		window.addEventListener("focusin", this.onFocusIn)
-		window.addEventListener("focusout", this.onFocusOut)
-
-		this.animate()
-		this.animateStats()
-	}
-
-	restart(target: Element) {
-		this.stopAnimate()
-		this.destroy()
-		this.init(target)
-		this.autoFitTo()
-		this.animate()
-		this.animateStats()
-	}
-
-	onWindowResize = () => {
-		this.threeSceneService.scene.updateMatrixWorld(false)
-		this.threeRendererService.renderer.setSize(window.innerWidth, window.innerHeight)
-		this.threeCameraService.camera.aspect = window.innerWidth / window.innerHeight
-		this.threeCameraService.camera.updateProjectionMatrix()
-		this.animate()
-	}
-
-	enableRotation(value: boolean) {
-		this.threeOrbitControlsService.controls.enableRotate = value
-	}
-
-	onFocusIn = event => {
-		if (event.target.nodeName === "INPUT") {
-			this.threeOrbitControlsService.controls.enableKeys = false
-		}
-	}
-
-	onFocusOut = event => {
-		if (event.target.nodeName === "INPUT") {
-			this.threeOrbitControlsService.controls.enableKeys = true
-		}
-	}
-
-	animate() {
-		this.threeOrbitControlsService.controls.update()
-		this.threeRendererService.render()
-	}
-
-	animateStats() {
-		this.animationFrameId = requestAnimationFrame(() => this.animateStats())
-		this.threeStatsService.updateStats()
-	}
-
-	getRenderCanvas() {
-		return this.threeRendererService.renderer.domElement
-	}
-
-	getRenderLoseExtention() {
-		const gl = this.threeRendererService.renderer.getContext()
-		return gl.getExtension("WEBGL_lose_context")
-	}
-
-	autoFitTo() {
-		this.threeOrbitControlsService.autoFitTo()
-	}
-
-	stopAnimate() {
-		cancelAnimationFrame(this.animationFrameId)
-	}
-
-	dispose() {
-		this.threeRendererService?.composer?.dispose()
-		this.threeRendererService?.renderer?.dispose()
-	}
-
-	destroy() {
-		window.removeEventListener("resize", this.onWindowResize)
-		window.removeEventListener("focusin", this.onFocusIn)
-		window.removeEventListener("focusout", this.onFocusOut)
-		this.dispose()
-		this.threeStatsService.destroy()
-		this.getRenderCanvas().remove()
-		this.dispose()
-	}
-}

package/app/codeCharta/ui/colorPicker/colorPicker.component.html

@@ -1,16 +0,0 @@
-<ng-container
-	[ngTemplateOutlet]="triggerTemplate"
-	[ngTemplateOutletContext]="{ isOpen: colorPickerMenuTrigger.menuOpen, isHovered: isHovered }"
->
-</ng-container>
-
-<span [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></span>
-<mat-menu #menu="matMenu" class="cc-color-picker-menu" [xPosition]="openXPosition" [hasBackdrop]="false">
-	<color-chrome
-		role="colorpicker"
-		(click)="$event.stopPropagation()"
-		[disableAlpha]="true"
-		[color]="hexColor"
-		(onChangeComplete)="handleChangeComplete($event.color.hex)"
-	></color-chrome>
-</mat-menu>

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

@@ -1,77 +0,0 @@
-import { Component } from "@angular/core"
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen, waitFor } from "@testing-library/angular"
-
-import { ColorPickerModule } from "./colorPicker.module"
-
-describe("colorPicker", () => {
-	@Component({
-		selector: "test-color-picker",
-		template: `
-			<cc-color-picker
-				[hexColor]="hexColor"
-				(onColorChange)="hexColor = $event"
-				[triggerTemplate]="colorPickerTriggerTemplate"
-			></cc-color-picker>
-			<ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">
-				<div>isOpen: {{ isOpen }}</div>
-				<div>isHovered: {{ isHovered }}</div>
-				<div>color: {{ hexColor }}</div>
-			</ng-template>
-		`
-	})
-	class TestColorPicker {
-		hexColor = "#ffffff"
-	}
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [ColorPickerModule]
-		})
-	})
-
-	it("should let a user change a color within a menu", async () => {
-		const { container } = await render(TestColorPicker)
-
-		expectColorPickerInDom(false)
-		expect(screen.queryByText("isOpen: false")).toBeTruthy()
-		expect(screen.queryByText("color: #ffffff")).toBeTruthy()
-
-		fireEvent.click(container.querySelector("cc-color-picker"))
-		expectColorPickerInDom(true)
-		expect(screen.queryByText("isOpen: true")).toBeTruthy()
-
-		// @ts-expect-error
-		ng.getComponent(screen.queryByRole("colorpicker")).onChangeComplete.emit({
-			$event: {},
-			color: { hex: "#000000" }
-		})
-		expect(await screen.findByText("color: #000000")).toBeTruthy()
-
-		fireEvent.click(document)
-		await waitFor(() => expectColorPickerInDom(false))
-		expect(screen.queryByText("isOpen: false")).toBeTruthy()
-	})
-
-	it("should pass `isHovered` into template", async () => {
-		const { container } = await render(TestColorPicker)
-		const colorPicker = container.querySelector("cc-color-picker")
-
-		expect(screen.queryByText("isHovered: false")).toBeTruthy()
-
-		fireEvent.mouseEnter(colorPicker)
-		expect(screen.queryByText("isHovered: true")).toBeTruthy()
-
-		fireEvent.mouseLeave(colorPicker)
-		expect(screen.queryByText("isHovered: false")).toBeTruthy()
-	})
-
-	function expectColorPickerInDom(isOpen: boolean) {
-		const colorPickerElement = screen.queryByRole("colorpicker")
-		if (isOpen) {
-			expect(colorPickerElement).not.toBe(null)
-		} else {
-			expect(colorPickerElement).toBe(null)
-		}
-	}
-})

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

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"
-import { MatMenuTrigger, MenuPositionX } from "@angular/material/menu"
-
-@Component({
-	selector: "cc-color-picker",
-	templateUrl: "./colorPicker.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class ColorPickerComponent {
-	@Input() hexColor: string
-	@Input() openXPosition: MenuPositionX = "after"
-	@Input() triggerTemplate: TemplateRef<unknown>
-
-	@Output() onColorChange = new EventEmitter<string>()
-
-	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
-
-	isHovered = false
-
-	private isClickInside = false
-
-	handleChangeComplete(hexColor: string) {
-		this.onColorChange.emit(hexColor)
-	}
-
-	@HostListener("mouseenter") onMouseEnter() {
-		this.isHovered = true
-	}
-
-	@HostListener("mouseleave") onMouseLeave() {
-		this.isHovered = false
-	}
-
-	@HostListener("click") onClick() {
-		this.isClickInside = true
-		this.colorPickerMenuTrigger.openMenu()
-	}
-
-	@HostListener("document:click")
-	handleDocumentClick() {
-		if (!this.isClickInside && this.colorPickerMenuTrigger.menuOpen) {
-			this.colorPickerMenuTrigger.closeMenu()
-		}
-
-		this.isClickInside = false
-	}
-}

package/app/codeCharta/ui/colorPicker/colorPicker.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { ColorChromeModule } from "ngx-color/chrome"
-
-import { MaterialModule } from "../../../material/material.module"
-import { ColorPickerComponent } from "./colorPicker.component"
-
-@NgModule({
-	imports: [CommonModule, ColorChromeModule, MaterialModule],
-	declarations: [ColorPickerComponent],
-	exports: [ColorPickerComponent]
-})
-export class ColorPickerModule {}

package/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.html

@@ -1,5 +0,0 @@
-<cc-labelled-color-picker
-	[hexColor]="(mapColors$ | async)[mapColorFor]"
-	[labels]="[mapColorFor | mapColorLabel: (colorRange$ | async):(nodeMetricRange$ | async)]"
-	(onColorChange)="handleColorChange($event)"
-></cc-labelled-color-picker>