codecharta-visualization 1.119.0 → 1.120.0

package/app/codeCharta/ui/codeMap/rendering/shaders/glsl/fxaaVertexShader.glsl

@@ -1,6 +0,0 @@
-varying vec2 vUv;
-
-void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-}

package/app/codeCharta/ui/codeMap/rendering/shaders/loaders/codeMapShaderStrings.ts

@@ -1,9 +0,0 @@
-export class CodeMapShaderStrings {
-	vertexShaderCode: string
-	fragmentShaderCode: string
-
-	constructor() {
-		this.vertexShaderCode = require("../glsl/codeMapVertexShader.glsl")
-		this.fragmentShaderCode = require("../glsl/codeMapFragmentShader.glsl")
-	}
-}

package/app/codeCharta/ui/codeMap/rendering/shaders/loaders/fxaaShaderStrings.ts

@@ -1,25 +0,0 @@
-import { Texture, Vector2 } from "three"
-
-interface uniforms {
-	tDiffuse: {
-		value: Texture
-	}
-	resolution: {
-		value: Vector2
-	}
-}
-
-export class fxaaShaderStrings {
-	vertexShader: string
-	fragmentShader: string
-	uniforms: uniforms
-
-	constructor() {
-		this.vertexShader = require("../glsl/fxaaVertexShader.glsl")
-		this.fragmentShader = require("../glsl/fxaaFragmentShader.glsl")
-		this.uniforms = {
-			tDiffuse: { value: null },
-			resolution: { value: new Vector2(1 / 1024, 1 / 512) }
-		}
-	}
-}

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

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ThreeOrbitControlsService rotateCameraInVectorDirection  1`] = `
-Vector3 {
-  "x": 0,
-  "y": -8.076685518445746,
-  "z": 0.0008076685518441267,
-}
-`;

package/app/codeCharta/ui/codeMap/threeViewer/floorLabels/floorLabelDrawer.spec.ts

@@ -1,176 +0,0 @@
-import { Node } from "../../../../codeCharta.model"
-import { FloorLabelDrawer } from "./floorLabelDrawer"
-import { Vector3 } from "three"
-
-describe("FloorLabelDrawer", () => {
-	let createElementOrigin
-	afterEach(() => {
-		document.createElement = createElementOrigin
-	})
-
-	function createFakeNode(name: string, width: number, length: number, isLeaf: boolean, mapNodeDepth?: number): Node {
-		return {
-			attributes: undefined,
-			color: "",
-			depth: 0,
-			edgeAttributes: {},
-			flat: false,
-			height: 0,
-			heightDelta: 0,
-			id: 0,
-			incomingEdgePoint: undefined,
-			isLeaf,
-			length,
-			link: "",
-			mapNodeDepth,
-			markingColor: undefined,
-			name,
-			outgoingEdgePoint: undefined,
-			path: "",
-			visible: false,
-			width,
-			x0: 0,
-			y0: 0,
-			z0: 0
-		}
-	}
-
-	function initMapCanvas() {
-		const mapCanvas = document.createElement("canvas")
-		mapCanvas.id = "codeMapScene"
-		document.body.appendChild(mapCanvas)
-	}
-
-	function createCanvasMock() {
-		const canvasContextMock = {
-			font: "",
-			measureText: jest.fn((labelText: string) => {
-				return labelText === "text_to_be_shortened_to_fit_onto_the_floor"
-					? ({ width: 500 } as TextMetrics)
-					: ({ width: 40 } as TextMetrics)
-			}),
-			fillText: jest.fn(),
-			fillStyle: undefined,
-			beginPath: jest.fn(),
-			moveTo: jest.fn(),
-			arcTo: jest.fn(),
-			closePath: jest.fn(),
-			fill: jest.fn()
-		}
-
-		createElementOrigin = document.createElement
-
-		document.createElement = jest.fn().mockReturnValue({
-			getContext: () => {
-				return canvasContextMock
-			}
-		})
-
-		return canvasContextMock
-	}
-
-	const mapSize = 500
-	const scaling: Vector3 = { x: 1, y: 1, z: 1 } as Vector3
-
-	describe("draw", () => {
-		it("should draw simple and shortened labels on three levels", () => {
-			initMapCanvas()
-
-			const rootNode = createFakeNode("root", 500, 500, false, 0)
-			const nodes = [
-				rootNode,
-				createFakeNode("simpleLabelNode1", 400, 400, false, 1),
-				createFakeNode("simpleLabelNode2", 200, 200, false, 2),
-				createFakeNode("simpleLabelNode3", 150, 150, false, 2),
-				createFakeNode("text_to_be_shortened_to_fit_onto_the_floor", 50, 50, false, 2)
-			]
-
-			const canvasContextMock = createCanvasMock()
-
-			const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling)
-			const floorLabelPlanes = floorLabelDrawer.draw()
-
-			expect(canvasContextMock.fillText).toHaveBeenCalledTimes(5)
-			expect(canvasContextMock.fillText).toHaveBeenNthCalledWith(1, "root", expect.any(Number), expect.any(Number))
-			expect(canvasContextMock.fillText).toHaveBeenNthCalledWith(2, "simpleLabelNode1", expect.any(Number), expect.any(Number))
-			expect(canvasContextMock.fillText).toHaveBeenNthCalledWith(3, "simpleLabelNode2", expect.any(Number), expect.any(Number))
-			expect(canvasContextMock.fillText).toHaveBeenNthCalledWith(4, "simpleLabelNode3", expect.any(Number), expect.any(Number))
-			expect(canvasContextMock.fillText).toHaveBeenNthCalledWith(5, "text…", expect.any(Number), expect.any(Number))
-
-			expect(floorLabelPlanes.length).toBe(3)
-		})
-
-		it("should not draw on more than three levels'", () => {
-			initMapCanvas()
-
-			const rootNode = createFakeNode("root", 500, 500, false, 0)
-			const nodes = [
-				rootNode,
-				createFakeNode("simpleLabelNode1", 400, 400, false, 1),
-				createFakeNode("simpleLabelNode2", 200, 200, false, 2),
-				createFakeNode("simpleLabelNode3", 150, 150, false, 2),
-				createFakeNode("simpleLabelNode4", 50, 50, false, 3),
-				createFakeNode("simpleLabelNode5", 25, 25, false, 4)
-			]
-
-			const canvasContextMock = createCanvasMock()
-
-			const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling)
-			const floorLabelPlanes = floorLabelDrawer.draw()
-
-			expect(canvasContextMock.fillText).toHaveBeenCalledTimes(4)
-			expect(floorLabelPlanes.length).toBe(3)
-		})
-
-		it("should not draw on more levels than needed'", () => {
-			initMapCanvas()
-
-			const rootNode = createFakeNode("root", 500, 500, false, 0)
-			const nodes = [
-				rootNode,
-				createFakeNode("simpleLabelNode1", 400, 400, false, 1),
-				createFakeNode("unlabeledNode", 100, 100, true, 1)
-			]
-
-			const canvasContextMock = createCanvasMock()
-
-			const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling)
-			const floorLabelPlanes = floorLabelDrawer.draw()
-
-			expect(canvasContextMock.fillText).toHaveBeenCalledTimes(2)
-			expect(floorLabelPlanes.length).toBe(2)
-		})
-	})
-
-	describe("translatePlaneCanvases", () => {
-		it("should translate floor label of root on multiple scaleHeight", () => {
-			initMapCanvas()
-
-			const rootNode = createFakeNode("root", 500, 500, false, 0)
-			const nodes = [
-				rootNode,
-				createFakeNode("simpleLabelNode1", 400, 400, false, 1),
-				createFakeNode("unlabeledNode", 100, 100, true, 1)
-			]
-
-			const floorLabelDrawer = new FloorLabelDrawer(nodes, rootNode, mapSize, scaling)
-			const floorLabelPlanes = floorLabelDrawer.draw()
-
-			const geometryPositions = floorLabelPlanes[0].geometry.attributes.position.array
-
-			assertFloorLabelTranslation(floorLabelDrawer, geometryPositions[2], 1, 1.5)
-			assertFloorLabelTranslation(floorLabelDrawer, geometryPositions[2], 1.5, 1.6)
-			assertFloorLabelTranslation(floorLabelDrawer, geometryPositions[2], 1.6, 1.4)
-		})
-
-		function assertFloorLabelTranslation(floorLabelDrawer, startPosition, lastScaling, translateY) {
-			floorLabelDrawer.translatePlaneCanvases(new Vector3(1, translateY, 1))
-
-			const expectedDifference = lastScaling - translateY
-			const additivePositionDelta = 2.01 * expectedDifference
-
-			const translatedPostion = floorLabelDrawer["floorLabelPlanes"][0].geometry.attributes.position.array[2]
-			expect(translatedPostion).toBeCloseTo(startPosition + additivePositionDelta, 5)
-		}
-	})
-})

package/app/codeCharta/ui/codeMap/threeViewer/floorLabels/floorLabelDrawer.ts

@@ -1,189 +0,0 @@
-"use strict"
-
-import { Node } from "../../../../codeCharta.model"
-import { CanvasTexture, BackSide, Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, Vector3 } from "three"
-import { FloorLabelHelper } from "./floorLabelHelper"
-
-export class FloorLabelDrawer {
-	private floorLabelPlanes: Mesh[] = []
-	private readonly rootNode: Node
-	private readonly mapSize: number
-	private readonly scaling: Vector3
-	private readonly folderGeometryHeight: number = 2.01
-	private lastScaling: Vector3 = new Vector3(1, 1, 1)
-	private floorLabelPlaneLevel: Map<Mesh, number> = new Map<Mesh, number>()
-
-	private floorLabelsPerLevel = new Map()
-
-	constructor(nodes: Node[], rootNode: Node, mapSize: number, scaling: Vector3) {
-		this.collectLabelsPerLevel(nodes)
-		this.rootNode = rootNode
-		this.mapSize = mapSize
-		this.scaling = scaling
-	}
-
-	private collectLabelsPerLevel(nodes: Node[]) {
-		for (const node of nodes) {
-			if (FloorLabelHelper.isLabelNode(node)) {
-				if (!this.floorLabelsPerLevel.has(node.mapNodeDepth)) {
-					this.floorLabelsPerLevel.set(node.mapNodeDepth, [])
-				}
-				this.floorLabelsPerLevel.get(node.mapNodeDepth).push(node)
-			}
-		}
-	}
-
-	draw() {
-		const { width: rootNodeWidth, length: rootNodeHeight } = this.rootNode
-		const mapResolutionScaling = FloorLabelHelper.getMapResolutionScaling(rootNodeWidth)
-
-		const scaledMapWidth = rootNodeWidth * mapResolutionScaling
-		const scaledMapHeight = rootNodeHeight * mapResolutionScaling
-
-		for (const [floorLevel, floorNodesPerLevel] of this.floorLabelsPerLevel) {
-			const { textCanvas, context } = FloorLabelDrawer.createLabelPlaneCanvas(scaledMapWidth, scaledMapHeight)
-			this.writeLabelsOnCanvas(context, floorNodesPerLevel, mapResolutionScaling)
-			this.drawLevelPlaneGeometry(textCanvas, scaledMapWidth, scaledMapHeight, floorLevel, mapResolutionScaling)
-		}
-
-		return this.floorLabelPlanes
-	}
-
-	translatePlaneCanvases(scale: Vector3) {
-		for (const plane of this.floorLabelPlanes) {
-			const level = this.floorLabelPlaneLevel.get(plane) + 1
-			const difference = level * this.lastScaling.y - level * scale.y
-			plane.geometry.translate(0, 0, this.folderGeometryHeight * difference)
-		}
-		this.lastScaling = scale
-	}
-
-	private static createLabelPlaneCanvas(scaledMapWidth: number, scaledMapHeight: number) {
-		const textCanvas = document.createElement("canvas")
-
-		// Flip map width and height to support non squarified maps (e.g. if a rectangular subfolder is focused)
-		let textCanvasWidth = scaledMapWidth
-		let textCanvasHeight = scaledMapHeight
-
-		if (scaledMapWidth > scaledMapHeight) {
-			textCanvasWidth = scaledMapHeight
-			textCanvasHeight = scaledMapWidth
-		}
-
-		textCanvas.width = textCanvasWidth
-		textCanvas.height = textCanvasHeight
-
-		const context = textCanvas.getContext("2d")
-
-		context.fillStyle = "white"
-		context.textAlign = "center"
-		context.textBaseline = "middle"
-
-		return { textCanvas, context }
-	}
-
-	private writeLabelsOnCanvas(context: CanvasRenderingContext2D, floorNodesOfCurrentLevel: Node[], mapResolutionScaling: number) {
-		const { width: rootNodeWidth, length: rootNodeHeight } = this.rootNode
-
-		for (const floorNode of floorNodesOfCurrentLevel) {
-			let fontSize =
-				floorNode.depth === 0 ? Math.max(Math.floor(rootNodeWidth * 0.03), 120) : Math.max(Math.floor(rootNodeWidth * 0.023), 95)
-			fontSize = fontSize * mapResolutionScaling
-
-			context.font = `${fontSize}px Arial`
-
-			const textToFill = FloorLabelDrawer.getLabelAndSetContextFont(floorNode, context, mapResolutionScaling, fontSize)
-
-			context.fillText(
-				textToFill.labelText,
-				(rootNodeHeight - floorNode.y0 - floorNode.length / 2) * mapResolutionScaling,
-				(floorNode.x0 + floorNode.width) * mapResolutionScaling - textToFill.fontSize / 2
-			)
-		}
-	}
-
-	private drawLevelPlaneGeometry(textCanvas, scaledMapWidth, scaledMapHeight, floorLevel, mapResolutionScaling) {
-		const labelTexture = new CanvasTexture(textCanvas)
-		labelTexture.wrapS = RepeatWrapping
-		labelTexture.wrapT = RepeatWrapping
-		labelTexture.repeat.x = -1
-		labelTexture.needsUpdate = true
-		labelTexture.rotation = (90 * Math.PI) / 180
-
-		const plane = new PlaneGeometry(scaledMapWidth, scaledMapHeight)
-		const material = new MeshBasicMaterial({
-			side: BackSide,
-			map: labelTexture,
-			transparent: true
-		})
-
-		const planeMesh = new Mesh(plane, material)
-
-		// Rotate plane to be horizontally
-		planeMesh.rotateX((90 * Math.PI) / 180)
-
-		// Position plane over the map
-		const liftToPreventZFighting = 2
-		plane.translate(
-			scaledMapWidth / 2,
-			scaledMapHeight / 2,
-			-this.folderGeometryHeight * this.scaling.y * (floorLevel + 1) - liftToPreventZFighting
-		)
-
-		// Move and scale plane mesh exactly like the squarified map
-		planeMesh.scale.set(this.scaling.x / mapResolutionScaling, this.scaling.z / mapResolutionScaling, 1)
-		planeMesh.position.set(-this.mapSize * this.scaling.x, 0, -this.mapSize * this.scaling.z)
-
-		this.floorLabelPlanes.push(planeMesh)
-		this.floorLabelPlaneLevel.set(planeMesh, floorLevel)
-	}
-
-	private static getLabelAndSetContextFont(
-		labelNode: Node,
-		context: CanvasRenderingContext2D,
-		mapResolutionScaling: number,
-		fontSize: number
-	) {
-		const labelText = labelNode.name
-		const floorWidth = labelNode.length * mapResolutionScaling
-
-		context.font = `${fontSize}px Arial`
-
-		const textMetrics = context.measureText(labelText)
-		const fontScaleFactor = FloorLabelDrawer.getFontScaleFactor(floorWidth, textMetrics.width)
-		if (fontScaleFactor <= 0.5) {
-			// Font will be to small.
-			// So scale text not smaller than 0.5 and shorten it as well
-			fontSize = fontSize * 0.5
-			fontSize = Math.floor(Math.min(fontSize, labelNode.width * mapResolutionScaling))
-			context.font = `${fontSize}px Arial`
-			return {
-				labelText: FloorLabelDrawer.getFittingLabelText(context, floorWidth, labelText),
-				fontSize
-			}
-		}
-		fontSize = Math.floor(Math.min(fontSize * fontScaleFactor, labelNode.width * mapResolutionScaling))
-		context.font = `${fontSize}px Arial`
-		return { labelText, fontSize }
-	}
-
-	private static getFontScaleFactor(canvasWidth: number, widthOfText: number) {
-		return widthOfText < canvasWidth ? 1 : canvasWidth / widthOfText
-	}
-
-	private static getFittingLabelText(context: CanvasRenderingContext2D, canvasWidth: number, labelText: string) {
-		const { width } = context.measureText(labelText)
-		let textSplitIndex = Math.floor((labelText.length * canvasWidth) / width)
-		let abbreviatedText = `${labelText.slice(0, textSplitIndex)}…`
-
-		// TODO: Check if this is expensive. If it is, let's use a logarithmic algorithm instead.
-		// This is needed for non monospaced fonts, imagine the following example in a non monospaced font: "WWWIII"
-		while (context.measureText(abbreviatedText).width >= canvasWidth && textSplitIndex > 1) {
-			// textSplitIndex > 1 to ensure it contains at least one char
-			textSplitIndex -= 1
-			abbreviatedText = `${labelText.slice(0, textSplitIndex)}…`
-		}
-
-		return abbreviatedText
-	}
-}

package/app/codeCharta/ui/codeMap/threeViewer/floorLabels/floorLabelHelper.spec.ts

@@ -1,88 +0,0 @@
-import { FloorLabelHelper } from "./floorLabelHelper"
-import { Node } from "../../../../codeCharta.model"
-
-describe("FloorLabelHelper", () => {
-	describe("getMapResolutionScaling", () => {
-		function appendMapCanvas(mapCanvasWidth) {
-			const fakeMapCanvas = document.createElement("canvas")
-			fakeMapCanvas.width = fakeMapCanvas.height = mapCanvasWidth
-			document.getElementById = jest.fn().mockReturnValue(fakeMapCanvas)
-		}
-
-		it("should not scale since map width is smaller than scaling threshold (four times the display width)", () => {
-			appendMapCanvas(500)
-
-			expect(FloorLabelHelper.getMapResolutionScaling(400)).toBe(1)
-		})
-
-		it("should scale since map width is greater than scaling threshold (four times the display width)", () => {
-			appendMapCanvas(1000)
-
-			expect(FloorLabelHelper.getMapResolutionScaling(5000)).toBeLessThan(1)
-		})
-
-		it("should not scale since map width is smaller than scaling threshold (four times the width of 2560px=FullHD+)", () => {
-			appendMapCanvas(1000)
-
-			expect(FloorLabelHelper.getMapResolutionScaling(400)).toBe(1)
-		})
-
-		it("should scale since map width is greater than scaling threshold (four times the width of 2560px=FullHD+)", () => {
-			const fullHdPlusWidth = 2560
-			appendMapCanvas(fullHdPlusWidth * 5)
-
-			expect(FloorLabelHelper.getMapResolutionScaling(fullHdPlusWidth * 6)).toBeLessThan(1)
-		})
-	})
-
-	describe("isLabelNode", () => {
-		function createNode(isLeaf: boolean, mapNodeDepth?: number): Node {
-			return {
-				attributes: undefined,
-				color: "",
-				depth: 0,
-				edgeAttributes: {},
-				flat: false,
-				height: 0,
-				heightDelta: 0,
-				id: 0,
-				incomingEdgePoint: undefined,
-				isLeaf,
-				length: 0,
-				link: "",
-				mapNodeDepth,
-				markingColor: undefined,
-				name: "",
-				outgoingEdgePoint: undefined,
-				path: "",
-				visible: false,
-				width: 0,
-				x0: 0,
-				y0: 0,
-				z0: 0
-			}
-		}
-
-		it("should return true for floor label nodes)", () => {
-			const nodeLevel0 = createNode(false, 0)
-			expect(FloorLabelHelper.isLabelNode(nodeLevel0)).toBe(true)
-
-			const nodeLevel1 = createNode(false, 1)
-			expect(FloorLabelHelper.isLabelNode(nodeLevel1)).toBe(true)
-
-			const nodeLevel2 = createNode(false, 2)
-			expect(FloorLabelHelper.isLabelNode(nodeLevel2)).toBe(true)
-		})
-
-		it("should return false for other nodes)", () => {
-			const node1 = createNode(true, 0)
-			expect(FloorLabelHelper.isLabelNode(node1)).toBe(false)
-
-			const node2 = createNode(false, 3)
-			expect(FloorLabelHelper.isLabelNode(node2)).toBe(false)
-
-			const node3 = createNode(true)
-			expect(FloorLabelHelper.isLabelNode(node3)).toBe(false)
-		})
-	})
-})

package/app/codeCharta/ui/codeMap/threeViewer/floorLabels/floorLabelHelper.ts

@@ -1,22 +0,0 @@
-"use strict"
-
-import { Node } from "../../../../codeCharta.model"
-
-export class FloorLabelHelper {
-	static getMapResolutionScaling(mapWidth: number) {
-		const { width: displayWidth } = <HTMLCanvasElement>document.getElementById("codeMapScene")
-
-		const scalingThreshold = FloorLabelHelper.getScalingThreshold(displayWidth)
-
-		return mapWidth > scalingThreshold ? scalingThreshold / mapWidth : 1
-	}
-
-	private static getScalingThreshold(displayWidth: number) {
-		const fullHdPlusWidth = 2560
-		return Math.min(displayWidth * 4, fullHdPlusWidth * 4)
-	}
-
-	static isLabelNode(node: Node) {
-		return !node.isLeaf && node.mapNodeDepth < 3
-	}
-}

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

@@ -1,30 +0,0 @@
-import { PerspectiveCamera, Vector3 } from "three"
-import { ThreeCameraService } from "./threeCamera.service"
-
-describe("ThreeCameraService", () => {
-	let threeCameraService: ThreeCameraService
-
-	beforeEach(() => {
-		threeCameraService = new ThreeCameraService()
-		threeCameraService.camera = new PerspectiveCamera()
-	})
-	describe("init", () => {
-		it("should set camera with a new aspect", () => {
-			threeCameraService.init(400, 200)
-			expect(threeCameraService.camera.aspect).toBe(2)
-		})
-
-		it("should call setPosition with x, y and z", () => {
-			threeCameraService.setPosition = jest.fn()
-			threeCameraService.init(400, 200)
-			expect(threeCameraService.setPosition).toHaveBeenCalled()
-		})
-	})
-
-	describe("setPosition", () => {
-		it("should set camera position correctly", () => {
-			threeCameraService.setPosition(new Vector3(1, 2, 3))
-			expect(threeCameraService.camera.position).toEqual({ x: 1, y: 2, z: 3 })
-		})
-	})
-})

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

@@ -1,21 +0,0 @@
-import { Injectable } from "@angular/core"
-import { PerspectiveCamera, Vector3 } from "three"
-
-@Injectable({ providedIn: "root" })
-export class ThreeCameraService {
-	static VIEW_ANGLE = 45
-	static NEAR = 50
-	static FAR = 200_000 //TODO optimize renderer for far objects
-	camera: PerspectiveCamera
-
-	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))
-	}
-
-	setPosition(position: Vector3) {
-		this.camera.position.set(position.x, position.y, position.z)
-		this.camera.lookAt(0, 0, 0)
-	}
-}