codecharta-visualization 1.86.0 → 1.87.0

package/app/codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.component.spec.ts

@@ -0,0 +1,55 @@
+import { render } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+
+import { FocusButtonsComponent } from "./focusButtons.component"
+import { FocusButtonsModule } from "./focusButtons.module"
+import { focusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+
+jest.mock("../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector", () => ({
+	focusedNodePathSelector: jest.fn()
+}))
+const mockedFocusedNodePathSelector = focusedNodePathSelector as jest.Mock
+
+describe("focusButton", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [FocusButtonsModule]
+		})
+	})
+	it("should render only 'focus' button if neither node nor one of its parents is focused", async () => {
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(1)
+		expect(buttons[0].textContent).toMatch(" FOCUS ")
+	})
+
+	it("should render 'focus' and 'unfocus parent' buttons if a parent is focused", async () => {
+		mockedFocusedNodePathSelector.mockImplementation(() => ["/root/foo"])
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo/bar" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(2)
+		expect(buttons[0].textContent).toMatch(" FOCUS ")
+		expect(buttons[1].textContent).toMatch("UNFOCUS PARENT")
+	})
+
+	it("should render 'unfocus' and 'unfocus all' buttons if node is focused and there was node focused before", async () => {
+		mockedFocusedNodePathSelector.mockImplementation(() => ["/root/foo", "/root/bar"])
+		const { container } = await render(FocusButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode: { path: "/root/foo" } }
+		})
+
+		const buttons = container.querySelectorAll("button")
+		expect(buttons.length).toBe(2)
+		expect(buttons[0].textContent).toMatch("UNFOCUS")
+		expect(buttons[1].textContent).toMatch("UNFOCUS ALL")
+	})
+})

package/app/codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject, Input } from "@angular/core"
+import { Observable, map } from "rxjs"
+
+import { CodeMapNode } from "../../../codeCharta.model"
+import { Store } from "../../../state/angular-redux/store"
+import { currentFocusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/currentFocused.selector"
+import { focusNode, unfocusAllNodes, unfocusNode } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
+import { focusedNodePathSelector } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
+
+@Component({
+	selector: "cc-focus-buttons",
+	template: require("./focusButtons.component.html")
+})
+export class FocusButtonsComponent {
+	@Input() codeMapNode: Pick<CodeMapNode, "path">
+
+	currentFocusedNodePath$: Observable<string | undefined>
+	hasPreviousFocusedNodePath$: Observable<boolean>
+
+	constructor(@Inject(Store) private store: Store) {
+		this.currentFocusedNodePath$ = this.store.select(currentFocusedNodePathSelector)
+		this.hasPreviousFocusedNodePath$ = this.store
+			.select(focusedNodePathSelector)
+			.pipe(map(focusedNodePaths => focusedNodePaths.length > 1))
+	}
+
+	handleFocusNodeClicked() {
+		this.store.dispatch(focusNode(this.codeMapNode.path))
+	}
+
+	handleUnfocusNodeClicked() {
+		this.store.dispatch(unfocusNode())
+	}
+
+	handleUnfocusAllNodesClicked() {
+		this.store.dispatch(unfocusAllNodes())
+	}
+}

package/app/codeCharta/ui/nodeContextMenu/focusButtons/focusButtons.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+
+import { MaterialModule } from "../../../../material/material.module"
+import { FocusButtonsComponent } from "./focusButtons.component"
+import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [FocusButtonsComponent, IsNodeFocusedPipe],
+	exports: [FocusButtonsComponent]
+})
+export class FocusButtonsModule {}

package/app/codeCharta/ui/nodeContextMenu/focusButtons/isNodeFocused.pipe.spec.ts

@@ -0,0 +1,31 @@
+import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
+
+describe("isNodeFocused pipe", () => {
+	it("should return not focused if there is no focused node path", () => {
+		expect(new IsNodeFocusedPipe().transform(undefined, { path: "/root" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: false
+		})
+	})
+
+	it("should return not focused if focused node path isn't given node nor a parent", () => {
+		expect(new IsNodeFocusedPipe().transform("root/foo", { path: "/root/bar" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: false
+		})
+	})
+
+	it("should mark node as focused", () => {
+		expect(new IsNodeFocusedPipe().transform("/root/foo", { path: "/root/foo" })).toEqual({
+			isNodeFocused: true,
+			isParentFocused: false
+		})
+	})
+
+	it("should mark parent as focused", () => {
+		expect(new IsNodeFocusedPipe().transform("/root/foo", { path: "/root/foo/bar" })).toEqual({
+			isNodeFocused: false,
+			isParentFocused: true
+		})
+	})
+})

package/app/codeCharta/ui/nodeContextMenu/focusButtons/isNodeFocused.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+import { CodeMapNode } from "../../../codeCharta.model"
+
+type IsNodeFocusedType = {
+	isNodeFocused: boolean
+	isParentFocused: boolean
+}
+
+@Pipe({ name: "isNodeFocused" })
+export class IsNodeFocusedPipe implements PipeTransform {
+	transform(focusedNodePath: string | undefined, node: Pick<CodeMapNode, "path">): IsNodeFocusedType {
+		if (!focusedNodePath)
+			return {
+				isNodeFocused: false,
+				isParentFocused: false
+			}
+
+		const isNodeFocused = focusedNodePath === node.path
+		return {
+			isNodeFocused,
+			isParentFocused: !isNodeFocused && node.path.startsWith(focusedNodePath)
+		}
+	}
+}

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component.html

@@ -1,5 +1,9 @@
-<div class="cc-color-picker-trigger fa fa-paint-brush" [matMenuTriggerFor]="menu" #colorPickerMenuTrigger="matMenuTrigger"></div>
+<cc-color-picker
+	[hexColor]="'#ff0000'"
+	(onColorChange)="markFolder($event)"
+	[triggerTemplate]="colorPickerTriggerTemplate"
+></cc-color-picker>
 
-<mat-menu #menu="matMenu" [hasBackdrop]="false" class="cc-color-picker-menu">
-	<cc-color-picker [hexColor]="'#ff0000'" (onColorChange)="markFolder($event)"></cc-color-picker>
-</mat-menu>
+<ng-template #colorPickerTriggerTemplate>
+	<div class="cc-color-picker-trigger fa fa-paint-brush"></div>
+</ng-template>

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.component.ts

@@ -1,7 +1,5 @@
-import { Component, HostListener, Input, ViewChild } from "@angular/core"
-import { MatMenuTrigger } from "@angular/material/menu"
-
 import "./markFolderColorPicker.component.scss"
+import { Component, Input } from "@angular/core"
 
 @Component({
 	selector: "cc-mark-folder-color-picker",
@@ -9,22 +7,4 @@ import "./markFolderColorPicker.component.scss"
 })
 export class MarkFolderColorPickerComponent {
 	@Input() markFolder: (hexColor: string) => void
-
-	@ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
-
-	private isClickInside = false
-
-	@HostListener("click")
-	onClick() {
-		this.isClickInside = true
-	}
-
-	@HostListener("document:click")
-	handleDocumentClick() {
-		if (!this.isClickInside && this.colorPickerMenuTrigger && this.colorPickerMenuTrigger.menuOpen) {
-			this.colorPickerMenuTrigger.closeMenu()
-		}
-
-		this.isClickInside = false
-	}
 }

package/app/codeCharta/ui/nodeContextMenu/markFolderColorPicker/markFolderColorPicker.module.ts

@@ -1,12 +1,11 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
 
-import { MaterialModule } from "../../../../material/material.module"
 import { ColorPickerModule } from "../../colorPicker/colorPicker.module"
 import { MarkFolderColorPickerComponent } from "./markFolderColorPicker.component"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, ColorPickerModule],
+	imports: [CommonModule, ColorPickerModule],
 	declarations: [MarkFolderColorPickerComponent],
 	exports: [MarkFolderColorPickerComponent]
 })

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

@@ -21,18 +21,8 @@
 		<md-button ng-disabled="true" title="{{ $ctrl._viewModel.nodePath }}">
 			{{ $ctrl._viewModel.lastPartOfNodePath }}
 		</md-button>
-		<md-button
-			ng-show="!$ctrl.isNodeFocused()"
-			ng-click="$ctrl.focusNode()"
-			id="focus-button"
-			title="Only show selected nodes with children-nodes"
-			><i class="fa fa-bullseye"></i> Focus</md-button
-		>
-		<unfocus-button-component
-			is-node-focused="$ctrl._viewModel.isNodeFocused"
-			is-parent-focused="$ctrl._viewModel.isParentFocused"
-			ng-show="$ctrl.isNodeOrParentFocused()"
-		></unfocus-button-component>
+
+		<cc-focus-buttons [code-map-node]="$ctrl._viewModel.codeMapNode"></cc-focus-buttons>
 		<md-button
 			ng-if="!$ctrl._viewModel.codeMapNode.isFlattened"
 			ng-click="$ctrl.flattenNode()"

package/app/codeCharta/ui/nodeContextMenu/nodeContextMenu.component.scss

@@ -20,7 +20,9 @@ node-context-menu-component {
 		background-repeat: no-repeat no-repeat;
 		pointer-events: none;
 	}
-	.md-button:not(.colorButton) {
+	.md-button:not(.colorButton),
+	[mat-button] {
+		width: 100%;
 		text-align: left;
 		margin-top: 0;
 		line-height: 30px;

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

@@ -2,7 +2,6 @@ import "./nodeContextMenu.module"
 
 import { IRootScopeService, IWindowService } from "angular"
 import { instantiateModule, getService } from "../../../../mocks/ng.mockhelper"
-import { CodeMapActionsService } from "../codeMap/codeMap.actions.service"
 import { NodeContextMenuController } from "./nodeContextMenu.component"
 import {
 	CODE_MAP_BUILDING,
@@ -18,9 +17,7 @@ import { StoreService } from "../../state/store.service"
 import { setMarkedPackages } from "../../state/store/fileSettings/markedPackages/markedPackages.actions"
 import { BlacklistType, MarkedPackage, NodeType } from "../../codeCharta.model"
 import { addBlacklistItem } from "../../state/store/fileSettings/blacklist/blacklist.actions"
-import { focusNode, unfocusNode } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
 import { NodeDecorator } from "../../util/nodeDecorator"
-import { CodeMapMouseEventService } from "../codeMap/codeMap.mouseEvent.service"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
 import { CodeMapBuilding } from "../codeMap/rendering/codeMapBuilding"
 import { setIdToBuilding } from "../../state/store/lookUp/idToBuilding/idToBuilding.actions"
@@ -33,7 +30,6 @@ describe("nodeContextMenuController", () => {
 	let $window: IWindowService
 	let $rootScope: IRootScopeService
 	let storeService: StoreService
-	let codeMapActionsService: CodeMapActionsService
 	let codeMapPreRenderService: CodeMapPreRenderService
 	let threeSceneService: ThreeSceneService
 	let dialogService: DialogService
@@ -43,11 +39,9 @@ describe("nodeContextMenuController", () => {
 		restartSystem()
 		mockElement()
 		mockWindow()
-		withMockedCodeMapActionService()
 		withMockedCodeMapPreRenderService()
 		withMockedThreeSceneService()
 		rebuildController()
-		withMockedHideNodeContextMenuMethod()
 
 		NodeDecorator.decorateMapWithPathAttribute(TEST_DELTA_MAP_A)
 	})
@@ -58,7 +52,6 @@ describe("nodeContextMenuController", () => {
 		$window = getService<IWindowService>("$window")
 		$rootScope = getService<IRootScopeService>("$rootScope")
 		storeService = getService<StoreService>("storeService")
-		codeMapActionsService = getService<CodeMapActionsService>("codeMapActionsService")
 		codeMapPreRenderService = getService<CodeMapPreRenderService>("codeMapPreRenderService")
 		threeSceneService = getService<ThreeSceneService>("threeSceneService")
 		dialogService = getService<DialogService>("dialogService")
@@ -80,7 +73,6 @@ describe("nodeContextMenuController", () => {
 			$window,
 			$rootScope,
 			storeService,
-			codeMapActionsService,
 			codeMapPreRenderService,
 			threeSceneService,
 			dialogService,
@@ -88,19 +80,10 @@ describe("nodeContextMenuController", () => {
 		)
 	}
 
-	function withMockedCodeMapActionService() {
-		codeMapActionsService.markFolder = jest.fn()
-		codeMapActionsService.unmarkFolder = jest.fn()
-	}
-
 	function withMockedCodeMapPreRenderService() {
 		codeMapPreRenderService.getRenderMap = jest.fn().mockReturnValue(TEST_DELTA_MAP_A.map)
 	}
 
-	function withMockedHideNodeContextMenuMethod() {
-		nodeContextMenuController.onHideNodeContextMenu = jest.fn()
-	}
-
 	function withMockedThreeSceneService() {
 		threeSceneService = jest.fn().mockReturnValue({
 			addNodeAndChildrenToConstantHighlight: jest.fn(),
@@ -131,28 +114,26 @@ describe("nodeContextMenuController", () => {
 		})
 
 		it("should subscribe to 'on-building-right-clicked' events", () => {
-			NodeContextMenuController.subscribeToShowNodeContextMenu = jest.fn()
-			CodeMapMouseEventService.subscribeToBuildingRightClickedEvents = jest.fn()
-
+			const documentAddEventListenerSpy = jest.spyOn(document, "addEventListener")
 			rebuildController()
 
-			expect(CodeMapMouseEventService.subscribeToBuildingRightClickedEvents).toHaveBeenCalledWith(
-				$rootScope,
-				nodeContextMenuController
+			expect(documentAddEventListenerSpy).toHaveBeenCalledWith(
+				"building-right-clicked",
+				nodeContextMenuController.onBuildingRightClicked
 			)
 		})
 	})
 
 	describe("onShowNodeContextMenu", () => {
-		let elementMock
+		let mockedWheelTargetElement
 		beforeEach(() => {
 			nodeContextMenuController.setPosition = jest.fn()
 			nodeContextMenuController.calculatePosition = jest.fn().mockReturnValue({ x: 1, y: 2 })
 
 			document.body.addEventListener = jest.fn()
-			elementMock = { addEventListener: jest.fn() }
+			mockedWheelTargetElement = { addEventListener: jest.fn(), removeEventListener: jest.fn() }
 			// @ts-ignore
-			jest.spyOn(document, "getElementById").mockImplementation(() => elementMock)
+			jest.spyOn(document, "getElementById").mockImplementation(() => mockedWheelTargetElement)
 		})
 
 		it("should set the correct building after some timeout", () => {
@@ -168,7 +149,7 @@ describe("nodeContextMenuController", () => {
 			expect(document.body.addEventListener).toHaveBeenNthCalledWith(2, "mousedown", expect.anything(), expect.anything())
 
 			expect(document.getElementById).toHaveBeenCalledWith("codeMap")
-			expect(elementMock.addEventListener).toHaveBeenCalledWith("wheel", expect.anything(), expect.anything())
+			expect(mockedWheelTargetElement.addEventListener).toHaveBeenCalledWith("wheel", expect.anything(), expect.anything())
 		})
 
 		it("should not shorten the path if it has no sub paths", () => {
@@ -186,27 +167,26 @@ describe("nodeContextMenuController", () => {
 			expect(nodeContextMenuController["_viewModel"].lastPartOfNodePath).toBe(`...${nodePath.slice(nodePath.lastIndexOf("/"))}`)
 		})
 
-		it("should set if the node is focused or it's parent is focuesd", () => {
-			storeService.dispatch(unfocusNode())
-			storeService.dispatch(focusNode("/root/big leaf"))
-			nodeContextMenuController.onShowNodeContextMenu("/root/big leaf", NodeType.FILE, 521, 588)
-			expect(nodeContextMenuController["_viewModel"].isNodeFocused).toEqual(true)
-			expect(nodeContextMenuController["_viewModel"].isParentFocused).toEqual(false)
-			storeService.dispatch(unfocusNode())
-			storeService.dispatch(focusNode("/root/other big leaf"))
-			nodeContextMenuController.onShowNodeContextMenu("/root/big leaf", NodeType.FILE, 521, 588)
-			expect(nodeContextMenuController["_viewModel"].isNodeFocused).toEqual(false)
-			expect(nodeContextMenuController["_viewModel"].isParentFocused).toEqual(false)
-			storeService.dispatch(unfocusNode())
-			storeService.dispatch(focusNode("/root"))
-			nodeContextMenuController.onShowNodeContextMenu("/root/ParentLeaf/smallLeaf", NodeType.FILE, 521, 588)
-			expect(nodeContextMenuController["_viewModel"].isNodeFocused).toEqual(false)
-			expect(nodeContextMenuController["_viewModel"].isParentFocused).toEqual(true)
-			storeService.dispatch(unfocusNode())
-			storeService.dispatch(focusNode("/root/ParentLeaf"))
-			nodeContextMenuController.onShowNodeContextMenu("/root/ParentLeaf/smallLeaf", NodeType.FOLDER, 521, 588)
-			expect(nodeContextMenuController["_viewModel"].isNodeFocused).toEqual(false)
-			expect(nodeContextMenuController["_viewModel"].isParentFocused).toEqual(true)
+		it("should remove all listener on hide", () => {
+			const documentRemoveEventListenerSpy = jest.spyOn(document.body, "removeEventListener")
+
+			nodeContextMenuController.onHideNodeContextMenu()
+
+			expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith(
+				"click",
+				nodeContextMenuController.onBodyLeftClickHideNodeContextMenu,
+				true
+			)
+			expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith(
+				"mousedown",
+				nodeContextMenuController.onBodyRightClickHideNodeContextMenu,
+				true
+			)
+			expect(mockedWheelTargetElement.removeEventListener).toHaveBeenCalledWith(
+				"wheel",
+				nodeContextMenuController.onMapWheelHideNodeContextMenu,
+				true
+			)
 		})
 	})
 
@@ -387,34 +367,6 @@ describe("nodeContextMenuController", () => {
 		})
 	})
 
-	describe("markFolder", () => {
-		it("should call hide and codeMapActionService.markFolder", () => {
-			nodeContextMenuController.markFolder("color")
-
-			expect(codeMapActionsService.markFolder).toHaveBeenCalledWith(nodeContextMenuController["_viewModel"].codeMapNode, "color")
-		})
-	})
-
-	describe("unmarkFolder", () => {
-		it("should call hide and codeMapActionService.unmarkFolder", () => {
-			nodeContextMenuController.unmarkFolder()
-
-			expect(codeMapActionsService.unmarkFolder).toHaveBeenCalledWith(nodeContextMenuController["_viewModel"].codeMapNode)
-		})
-	})
-
-	describe("focusNode", () => {
-		beforeEach(() => {
-			nodeContextMenuController["_viewModel"].codeMapNode = VALID_NODE_WITH_PATH.children[1]
-		})
-
-		it("should set new focused path", () => {
-			nodeContextMenuController.focusNode()
-
-			expect(storeService.getState().dynamicSettings.focusedNodePath).toEqual(VALID_NODE_WITH_PATH.children[1].path)
-		})
-	})
-
 	describe("excludeNode", () => {
 		beforeEach(() => {
 			nodeContextMenuController["_viewModel"].codeMapNode = VALID_NODE_WITH_PATH.children[1]
@@ -488,55 +440,6 @@ describe("nodeContextMenuController", () => {
 		})
 	})
 
-	describe("isNodeFocused", () => {
-		it("should return true if a node is focused", () => {
-			storeService.dispatch(focusNode("/root/big leaf"))
-			nodeContextMenuController["_viewModel"].codeMapNode = TEST_DELTA_MAP_A.map.children[0]
-
-			const actual = nodeContextMenuController.isNodeFocused()
-
-			expect(actual).toBeTruthy()
-		})
-
-		it("should return false if a node is not focused", () => {
-			storeService.dispatch(unfocusNode())
-			nodeContextMenuController["_viewModel"].codeMapNode = TEST_DELTA_MAP_A.map.children[0]
-
-			const actual = nodeContextMenuController.isNodeFocused()
-
-			expect(actual).toBeFalsy()
-		})
-	})
-
-	describe("isNodeOrParentFocused", () => {
-		it("should return true if a node is focused", () => {
-			storeService.dispatch(focusNode("/root/big leaf"))
-			nodeContextMenuController["_viewModel"].codeMapNode = TEST_DELTA_MAP_A.map.children[0]
-
-			const actual = nodeContextMenuController.isNodeOrParentFocused()
-
-			expect(actual).toBeTruthy()
-		})
-
-		it("should return true if a parent of a node is focused", () => {
-			storeService.dispatch(focusNode("/root/Parent Leaf"))
-			nodeContextMenuController["_viewModel"].codeMapNode = TEST_DELTA_MAP_A.map.children[1].children[0]
-
-			const actual = nodeContextMenuController.isNodeOrParentFocused()
-
-			expect(actual).toBeTruthy()
-		})
-
-		it("should return false if a node is not focused", () => {
-			storeService.dispatch(unfocusNode())
-			nodeContextMenuController["_viewModel"].codeMapNode = TEST_DELTA_MAP_A.map.children[0]
-
-			const actual = nodeContextMenuController.isNodeOrParentFocused()
-
-			expect(actual).toBeFalsy()
-		})
-	})
-
 	describe("onBodyLeftClickHideNodeContextMenu", () => {
 		it("should not hide if a click on color-picker tricker occurs", () => {
 			const broadcastHideEventSpy = jest.spyOn(NodeContextMenuController, "broadcastHideEvent")