Fix missing labels due to wrong font size retrival #1491

visualization/app/codeCharta/codeCharta.model.ts

@@ -260,6 +260,7 @@ export interface Node {
 	height: number
 	length: number
 	depth: number
+	mapNodeDepth: number
 	x0: number
 	z0: number
 	y0: number

visualization/app/codeCharta/ui/codeMap/rendering/boxGeometryGenerationHelper.ts

@@ -183,7 +183,7 @@ export class BoxGeometryGenerationHelper {
 				if (
 					addingFloor &&
 					side === sides.top &&
-					node.depth > 0 && node.depth < 4
+					node.mapNodeDepth > 0 && node.mapNodeDepth < 4
 				) {
 					// Collect floors from a depth of 1 until a depth of 3
 					data.saveFloorSurfaceInformation(node, minPos, maxPos)

visualization/app/codeCharta/ui/codeMap/rendering/geometryGenerator.ts

@@ -48,7 +48,7 @@ export class GeometryGenerator {
 		// that are later on converted to typed arrays. Thus, no
 		// `IntermediateVertexData` should be created.
 		for (const [index, node] of nodes.entries()) {
-			if (!node.isLeaf) {
+			if (!node.isLeaf && node.mapNodeDepth < 4) {
 				this.addFloor(data, node, index, desc)
 			} else {
 				this.addBuilding(data, node, index, desc, state, isDeltaState)
@@ -202,60 +202,6 @@ export class GeometryGenerator {
 
 		geometry.setIndex(new BufferAttribute(indices, 1))
 
-		// TODO: Find Top Face Vertices indexes dynamically
-		//  Apply Geometry Group for these
-		//  Calculate width and length of label plane texture from corresponding positions
-		//geometry.addGroup(0, 18, 0)
-	//geometry.addGroup(0, 54, 0)
-		// 18-24 = top
-		//geometry.addGroup(48, 12, 1)
-		// floor surface root
-		//geometry.addGroup(18, 6, 1)
-
-		//geometry.addGroup(24, 30, 0)
-
-		// floor surface ParentLeaf
-	// geometry.addGroup(54, 6, 1)
-
-	// geometry.addGroup(60, Infinity, 0)
-
-		// const vertex1x = positions[(indices[18] - 1) * 3]
-		// const vertex1y = positions[(indices[18] - 1) * 3 + 1]
-		// const vertex1z = positions[(indices[18] - 1) * 3 + 2]
-		// const vertex2x = positions[(indices[19] - 1) * 3]
-		// const vertex2y = positions[(indices[19] - 1) * 3 + 1]
-		// const vertex2z = positions[(indices[19] - 1) * 3 + 2]
-		// const vertex3x = positions[(indices[20] - 1) * 3]
-		// const vertex3y = positions[(indices[20] - 1) * 3 + 1]
-		// const vertex3z = positions[(indices[20] - 1) * 3 + 2]
-		// const vertex4x = positions[(indices[21] - 1) * 3]
-		// const vertex4y = positions[(indices[21] - 1) * 3 + 1]
-		// const vertex4z = positions[(indices[21] - 1) * 3 + 2]
-
-		// console.log(vertex1x, vertex1y, vertex1z)
-		// console.log(vertex2x, vertex2y, vertex2z)
-		// console.log(vertex3x, vertex3y, vertex3z)
-		// console.log(vertex4x, vertex4y, vertex4z)
-
-		// const vertex5x = positions[(indices[54]) * 3 - 3]
-		// const vertex5y = positions[(indices[54]) * 3 - 2]
-		// const vertex5z = positions[(indices[54]) * 3 - 1]
-		// const vertex6x = positions[(indices[55]) * 3 - 3]
-		// const vertex6y = positions[(indices[55]) * 3 - 2]
-		// const vertex6z = positions[(indices[55]) * 3 - 1]
-		// const vertex7x = positions[(indices[56]) * 3 - 3]
-		// const vertex7y = positions[(indices[56]) * 3 - 2]
-		// const vertex7z = positions[(indices[56]) * 3 - 1]
-		// const vertex8x = positions[(indices[57]) * 3 - 3]
-		// const vertex8y = positions[(indices[57]) * 3 - 2]
-		// const vertex8z = positions[(indices[57]) * 3 - 1]
-		// console.log(vertex5x, vertex5y, vertex5z)
-		// console.log(vertex6x, vertex6y, vertex6z)
-		// console.log(vertex7x, vertex7y, vertex7z)
-		// console.log(vertex8x, vertex8y, vertex8z)
-		//
-		// console.log(geometry)
-
 		const topSurfaceInfos = data.floorSurfaceInformation
 
 		geometry.addGroup(0, topSurfaceInfos[0].surfaceStartIndex, 0)
@@ -288,10 +234,8 @@ export class GeometryGenerator {
 
 		const context = textCanvas.getContext("2d")
 
-		const fontSizeForDepth = this.floorSurfaceLabelFontSizes[surfaceInfo.node.depth - 1]
+		const fontSizeForDepth = this.floorSurfaceLabelFontSizes[surfaceInfo.node.mapNodeDepth - 1] //* state.dynamicSettings.margin / 100
 		context.font = `${fontSizeForDepth}px Arial`
-
-		//context.fillStyle = surfaceIndex % 2 === 1 ? "orange" : "blue"
 		context.fillStyle = this.getMarkingColorWithGradient(surfaceInfo.node)
 		context.fillRect(0, 0, textCanvas.width, textCanvas.height)
 		context.fillStyle = "white"

visualization/app/codeCharta/util/dataMocks.ts

@@ -1750,6 +1750,7 @@ export const TEST_NODE_ROOT: Node = {
 	height: 2,
 	length: 3,
 	depth: 4,
+	mapNodeDepth: 2,
 	x0: 5,
 	z0: 6,
 	y0: 7,
@@ -2021,6 +2022,7 @@ export const TEST_NODE_LEAF: Node = {
 	height: 2,
 	length: 3,
 	depth: 4,
+	mapNodeDepth: 2,
 	x0: 5,
 	z0: 6,
 	y0: 7,
@@ -2048,6 +2050,7 @@ export const INCOMING_NODE: Node = {
 	height: 2,
 	length: 3,
 	depth: 4,
+	mapNodeDepth: 2,
 	x0: 5,
 	z0: 6,
 	y0: 7,
@@ -2073,6 +2076,7 @@ export const OUTGOING_NODE: Node = {
 	height: 2,
 	length: 3,
 	depth: 4,
+	mapNodeDepth: 2,
 	x0: 5,
 	z0: 6,
 	y0: 7,
@@ -2098,6 +2102,7 @@ export const DIFFERENT_NODE: Node = {
 	height: 2,
 	length: 3,
 	depth: 4,
+	mapNodeDepth: 2,
 	x0: 5,
 	z0: 6,
 	y0: 7,

visualization/app/codeCharta/util/treeMapGenerator.ts

@@ -149,6 +149,18 @@ function getSquarifiedTreeMap(map: CodeMapNode, state: State): SquarifiedTreeMap
 	let mapWidth
 	let mapHeight
 
+	let addedLabelSpace = 0
+	hierarchyNode.eachAfter((node) => {
+		if (!isLeaf(node)) {
+			if (node.depth === 1) {
+				addedLabelSpace += 150
+			}
+			if (node.depth > 1 && node.depth < 4) {
+				addedLabelSpace += 120
+			}
+		}
+	})
+
 	if (map.fixedPosition !== undefined) {
 		mapWidth = map.fixedPosition.width
 		mapHeight = map.fixedPosition.height
@@ -161,8 +173,8 @@ function getSquarifiedTreeMap(map: CodeMapNode, state: State): SquarifiedTreeMap
 	// We do not know the exact amount,
 	// because the treemap algorithm is/must be executed with an initial width and height afterwards.
 	// TODO If it is wrong some buildings might be cut off.
-	const width = mapWidth + nodesPerSide * state.dynamicSettings.margin + nodesPerSide * 120
-	const height = mapHeight + nodesPerSide * state.dynamicSettings.margin + nodesPerSide * 120
+	const width = mapWidth + nodesPerSide * state.dynamicSettings.margin + addedLabelSpace
+	const height = mapHeight + nodesPerSide * state.dynamicSettings.margin + addedLabelSpace
 
 	const treeMap = treemap<CodeMapNode>().size([width, height]).paddingOuter(padding).paddingInner(padding).paddingRight((node) => {
 		if (node.depth === 1) {

visualization/app/codeCharta/util/treeMapHelper.ts

@@ -84,6 +84,7 @@ function buildNodeFrom(
 		height,
 		length,
 		depth,
+		mapNodeDepth: squaredNode.depth,
 		x0,
 		z0,
 		y0,