Add label for hovered node #1529

visualization/app/codeCharta/ui/codeMap/codeMap.label.service.ts

@@ -12,6 +12,7 @@ interface InternalLabel {
 	line: Line | null
 	heightValue: number
 	lineCount: number
+	node: Node
 }
 
 export class CodeMapLabelService implements CameraChangeSubscriber {
@@ -26,6 +27,7 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 	private currentScale: Vector3 = new Vector3(1, 1, 1)
 	private resetScale = false
 	private lineCount = 1
+	private nodeHeight = 0
 
 	constructor(
 		private $rootScope: IRootScopeService,
@@ -39,6 +41,7 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 
 	//labels need to be scaled according to map or it will clip + looks bad
 	addLabel(node: Node, options: { showNodeName: boolean; showNodeMetric: boolean }, highestNode: number) {
+		this.nodeHeight = this.nodeHeight > highestNode ? this.nodeHeight : highestNode
 		// todo: tk rename to addLeafLabel
 
 		const state = this.storeService.getState()
@@ -47,7 +50,7 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 		const z = node.y0 - state.treeMap.mapSize
 
 		const labelX = x + node.width / 2
-		const labelY = y + highestNode
+		const labelY = y + this.nodeHeight
 		const labelYOrigin = y + node.height
 		const labelZ = z + node.length / 2
 
@@ -64,7 +67,7 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 				labelText += `${node.attributes[state.dynamicSettings.heightMetric]} ${state.dynamicSettings.heightMetric}`
 			}
 
-			const label = this.makeText(labelText, 30)
+			const label = this.makeText(labelText, 30, node)
 
 			label.sprite.position.set(labelX, labelY + this.LABEL_HEIGHT_POSITION + label.heightValue / 2, labelZ) //label_height
 			label.line = this.makeLine(labelX, labelY, labelYOrigin, labelZ)
@@ -86,6 +89,14 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 		this.threeSceneService.labels.children.length = 0
 	}
 
+	clearTemporaryLabel(hoveredNode: Node) {
+		const index = this.labels.map(({ node }) => node).indexOf(hoveredNode)
+		if (index > -1) {
+			this.labels.splice(index, 1)
+			this.threeSceneService.labels.children.length -= 2
+		}
+	}
+
 	scale() {
 		const { scaling } = this.storeService.getState().appSettings
 		if (this.resetScale) {
@@ -115,7 +126,7 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 		}
 	}
 
-	private makeText(message: string, fontsize: number): InternalLabel {
+	private makeText(message: string, fontsize: number, node: Node): InternalLabel {
 		const canvas = document.createElement("canvas")
 		const context = canvas.getContext("2d")
 
@@ -165,7 +176,8 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 			sprite,
 			heightValue: canvas.height,
 			line: null,
-			lineCount: multiLineContext.length
+			lineCount: multiLineContext.length,
+			node
 		}
 	}
 

visualization/app/codeCharta/ui/codeMap/codeMap.mouseEvent.service.ts

@@ -14,6 +14,7 @@ import { FilesService, FilesSelectionSubscriber } from "../../state/store/files/
 import { StoreService } from "../../state/store.service"
 import { hierarchy } from "d3-hierarchy"
 import { Object3D, Raycaster } from "three"
+import { CodeMapLabelService } from "./codeMap.label.service"
 
 interface Coordinates {
 	x: number
@@ -60,6 +61,7 @@ export class CodeMapMouseEventService
 	private isGrabbing = false
 	private isMoving = false
 	private raycaster = new Raycaster()
+	private temporaryLabelForBuilding = null
 
 	/* @ngInject */
 	constructor(
@@ -69,7 +71,8 @@ export class CodeMapMouseEventService
 		private threeRendererService: ThreeRendererService,
 		private threeSceneService: ThreeSceneService,
 		private threeUpdateCycleService: ThreeUpdateCycleService,
-		private storeService: StoreService
+		private storeService: StoreService,
+		private codeMapLabelService: CodeMapLabelService
 	) {
 		this.threeUpdateCycleService.register(() => this.updateHovering())
 		MapTreeViewLevelController.subscribeToHoverEvents(this.$rootScope, this)
@@ -190,11 +193,17 @@ export class CodeMapMouseEventService
 				const to = this.intersectedBuilding ? this.intersectedBuilding : this.highlightedInTreeView
 
 				if (from !== to) {
+					if (this.temporaryLabelForBuilding !== null) {
+						this.codeMapLabelService.clearTemporaryLabel(this.temporaryLabelForBuilding)
+						this.temporaryLabelForBuilding = null
+					}
+
 					this.threeSceneService.resetLabel()
 					this.unhoverBuilding()
 					if (to) {
-						const labelForBuilding = this.threeSceneService.checkLabelIsDrawnForHoveredNode(to, labels)
-						if (labelForBuilding !== null) {
+						if (to.node.isLeaf) {
+							let labelForBuilding = this.threeSceneService.getLabelForHoveredNode(to, labels)
+							labelForBuilding = labelForBuilding !== null ? labelForBuilding : this.drawTemporaryLabel(to, labels)
 							this.threeSceneService.hoverLabel(labelForBuilding, this.raycaster, labels)
 						}
 						this.hoverBuilding(to)
@@ -204,6 +213,27 @@ export class CodeMapMouseEventService
 		}
 	}
 
+	private drawTemporaryLabel(to: CodeMapBuilding, labels: Object3D[]) {
+		const appSettings = this.storeService.getState().appSettings
+		const showLabelNodeName = appSettings.showMetricLabelNodeName
+		const showLabelNodeMetric = appSettings.showMetricLabelNameValue
+
+		this.codeMapLabelService.addLabel(
+			to.node,
+			{
+				showNodeName: showLabelNodeName,
+				showNodeMetric: showLabelNodeMetric
+			},
+			0
+		)
+
+		labels = this.threeSceneService.labels ? this.threeSceneService.labels.children : null
+		const labelForBuilding = this.threeSceneService.getLabelForHoveredNode(to, labels)
+		this.temporaryLabelForBuilding = to.node
+
+		return labelForBuilding
+	}
+
 	onDocumentMouseMove(event: MouseEvent) {
 		this.mouse.x = event.clientX
 		this.mouse.y = event.clientY

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts

@@ -156,23 +156,25 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber {
 	}
 
 	hoverLabel(hoveredLabel: Object3D, raycaster: Raycaster, labels: Object3D[]) {
-		this.resetLabel()
+		if (hoveredLabel !== null) {
+			this.resetLabel()
 
-		hoveredLabel["material"].opacity = 1
+			hoveredLabel["material"].opacity = 1
 
-		this.rayPoint = new Vector3()
-		this.rayPoint.subVectors(raycaster.ray.origin, hoveredLabel.position)
+			this.rayPoint = new Vector3()
+			this.rayPoint.subVectors(raycaster.ray.origin, hoveredLabel.position)
 
-		const norm = Math.sqrt(Math.pow(this.rayPoint.x, 2) + Math.pow(this.rayPoint.y, 2) + Math.pow(this.rayPoint.z, 2))
-		const cameraPoint = raycaster.ray.origin
-		const maxDistance = this.calculateMaxDistance(hoveredLabel, labels, cameraPoint, norm)
+			const norm = Math.sqrt(Math.pow(this.rayPoint.x, 2) + Math.pow(this.rayPoint.y, 2) + Math.pow(this.rayPoint.z, 2))
+			const cameraPoint = raycaster.ray.origin
+			const maxDistance = this.calculateMaxDistance(hoveredLabel, labels, cameraPoint, norm)
 
-		this.normedTransformVector = new Vector3(this.rayPoint.x / norm, this.rayPoint.y / norm, this.rayPoint.z / norm)
-		this.normedTransformVector.multiplyScalar(maxDistance)
+			this.normedTransformVector = new Vector3(this.rayPoint.x / norm, this.rayPoint.y / norm, this.rayPoint.z / norm)
+			this.normedTransformVector.multiplyScalar(maxDistance)
 
-		hoveredLabel.position.add(this.normedTransformVector)
+			hoveredLabel.position.add(this.normedTransformVector)
 
-		this.modifiedLabel = hoveredLabel
+			this.modifiedLabel = hoveredLabel
+		}
 	}
 
 	resetLabel() {
@@ -182,7 +184,7 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber {
 			this.modifiedLabel = null
 		}
 	}
-	checkLabelIsDrawnForHoveredNode(hoveredBuilding: CodeMapBuilding, labels: Object3D[]) {
+	getLabelForHoveredNode(hoveredBuilding: CodeMapBuilding, labels: Object3D[]) {
 		if (labels === null) {
 			return null
 		}