Fix 3209 Unselecting a folder in Presentation Mode leads to console e…

…rror (#3215)

* Fix console error for presentation mode, change highlighting behaviour, add tests

* Update Changelog

---------

Co-authored-by: RomanenkoVladimir <vladimir.romanenko@maibornwolff.de>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Fixed 🐞
+
+-   Unselecting a folder in Presentation Mode leads to console error [#3215](https://github.com/MaibornWolff/codecharta/pull/3215)
+
 ## [1.114.0] - 2023-01-13
 
 ### Added 🚀

visualization/app/codeCharta/ui/codeMap/codeMap.arrow.service.spec.ts

@@ -123,6 +123,7 @@ describe("CodeMapArrowService", () => {
 	describe("SelectionMethods", () => {
 		beforeEach(() => {
 			codeMapArrowService.clearArrows = jest.fn()
+			codeMapArrowService.addArrow = jest.fn()
 			codeMapArrowService["showEdgesOfBuildings"] = jest.fn()
 			codeMapArrowService.addEdgePreview = jest.fn()
 			threeSceneService.clearHighlight = jest.fn()
@@ -178,9 +179,10 @@ describe("CodeMapArrowService", () => {
 			codeMapArrowService.onBuildingDeselected()
 
 			expect(codeMapArrowService.clearArrows).toHaveBeenCalled()
-			expect(threeSceneService.clearHighlight).toHaveBeenCalled()
-			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 			expect(codeMapArrowService.addEdgePreview).toHaveBeenCalled()
+			expect(codeMapArrowService.addArrow).toHaveBeenCalledTimes(0)
+			expect(threeSceneService.clearHighlight).toHaveBeenCalledTimes(0)
+			expect(codeMapArrowService["showEdgesOfBuildings"]).toHaveBeenCalledTimes(0)
 		})
 	})
 

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

@@ -62,7 +62,6 @@ export class CodeMapArrowService {
 
 	onBuildingDeselected = () => {
 		this.clearArrows()
-		this.threeSceneService.clearHighlight()
 		this.addEdgePreview()
 	}
 
@@ -170,14 +169,15 @@ export class CodeMapArrowService {
 			}
 			if (node.has(originNode.path)) {
 				this.addArrow(targetNode, originNode, true)
+				this.threeSceneService.highlightBuildings()
 				// TODO: Check if the second if case is actually necessary. Edges should
 				// always have valid origin and target paths. The test data is likely
 				// faulty and should be improved.
 			} else if (node.has(targetNode.path)) {
 				this.addArrow(targetNode, originNode, false)
+				this.threeSceneService.highlightBuildings()
 			}
 		}
-		this.threeSceneService.highlightBuildings()
 	}
 
 	private createCurve(arrowOriginNode: Node, arrowTargetNode: Node, curveScale) {

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

@@ -501,6 +501,7 @@ describe("codeMapMouseEventService", () => {
 		describe("on left click", () => {
 			beforeEach(() => {
 				event = { button: ClickType.LeftClick, clientX: 10, clientY: 20 }
+				codeMapMouseEventService["intersectedBuilding"] = undefined
 			})
 			it("should change the cursor to default when the left click is triggered", () => {
 				document.body.style.cursor = CursorType.Pointer
@@ -537,7 +538,7 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.selectBuilding).toHaveBeenCalledWith(codeMapBuilding)
 			})
 
-			it("should call clearselection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
+			it("should call clearSelection, when the mouse has moved less or exact 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)
 				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
@@ -547,6 +548,18 @@ describe("codeMapMouseEventService", () => {
 				expect(threeSceneService.clearSelection).toHaveBeenCalled()
 			})
 
+			it("should not call clearSelection, when the mouse has moved less or exact 3 pixels but a building is currently being clicked upon", () => {
+				codeMapMouseEventService.onDocumentMouseMove(event)
+				codeMapMouseEventService.onDocumentMouseDown(event)
+				codeMapMouseEventService.onDocumentMouseMove({ clientX: 10, clientY: 17 } as MouseEvent)
+				codeMapMouseEventService["intersectedBuilding"] = CODE_MAP_BUILDING
+
+				codeMapMouseEventService.onDocumentMouseUp(event)
+
+				expect(threeSceneService.clearSelection).toHaveBeenCalledTimes(0)
+				expect(threeSceneService.selectBuilding).toHaveBeenLastCalledWith(CODE_MAP_BUILDING)
+			})
+
 			it("should not call clear selection, when mouse has moved more than 3 pixels while left button was pressed", () => {
 				codeMapMouseEventService.onDocumentMouseMove(event)
 				codeMapMouseEventService.onDocumentMouseDown(event)

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

@@ -349,11 +349,12 @@ export class CodeMapMouseEventService {
 	private onLeftClick() {
 		this.isGrabbing = false
 		if (!this.hasMouseMovedMoreThanThreePixels(this.mouseOnLastClick)) {
-			this.threeSceneService.clearSelection()
-			this.threeSceneService.clearConstantHighlight()
 			if (this.intersectedBuilding) {
 				this.threeSceneService.selectBuilding(this.intersectedBuilding)
+			} else {
+				this.threeSceneService.clearSelection()
 			}
+			this.threeSceneService.clearConstantHighlight()
 		}
 		this.threeRendererService.render()
 	}

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

@@ -368,6 +368,7 @@ export class ThreeSceneService {
 			this.store.dispatch(setSelectedBuildingId(null))
 			this.eventEmitter.emit("onBuildingDeselected")
 		}
+
 		if (this.highlighted.length > 0) {
 			this.highlightBuildings()
 		}
@@ -419,13 +420,6 @@ export class ThreeSceneService {
 		return this.highlighted[0]
 	}
 
-	getHighlightedNode() {
-		if (this.getHighlightedBuilding()) {
-			return this.getHighlightedBuilding().node
-		}
-		return null
-	}
-
 	dispose() {
 		this.mapMesh?.dispose()
 	}