codecharta-visualization 1.88.0 → 1.89.0

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.spec.ts

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+import userEvent from "@testing-library/user-event"
+import { HighlightButtonsModule } from "./highlightButtons.module"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { HighlightButtonsComponent } from "./highlightButtons.component"
+import { VALID_FILE_NODE_WITH_ID as codeMapNode } from "../../../../util/dataMocks"
+import { State } from "../../../angular-redux/state"
+import { CodeMapNode } from "../../../../codeCharta.model"
+
+describe("flattenButtonsComponent", () => {
+	let threeSceneService
+	let state
+
+	beforeEach(() => {
+		threeSceneService = createMockedThreeSceneService()
+		state = createMockedState()
+		TestBed.configureTestingModule({
+			imports: [HighlightButtonsModule],
+			providers: [
+				{ provide: ThreeSceneServiceToken, useValue: threeSceneService },
+				{ provide: State, useValue: state }
+			]
+		})
+	})
+
+	it("should let a user permanently highlight and remove permanently highlight of a node", async () => {
+		state.getValue().lookUp.idToBuilding.set(codeMapNode.id, { id: codeMapNode.id, node: codeMapNode })
+
+		const { rerender } = await render(HighlightButtonsComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: { codeMapNode }
+		})
+
+		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
+		userEvent.click(screen.getByText("KEEP HIGHLIGHT"))
+
+		rerender({ codeMapNode: null })
+		rerender({ codeMapNode })
+
+		expect(screen.queryByText("KEEP HIGHLIGHT")).toBe(null)
+		userEvent.click(screen.getByText("REMOVE HIGHLIGHT"))
+
+		rerender({ codeMapNode: null })
+		rerender({ codeMapNode })
+
+		expect(screen.queryByText("REMOVE HIGHLIGHT")).toBe(null)
+		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)
+	})
+
+	function createMockedThreeSceneService() {
+		const highlighted = new Map()
+		return {
+			addNodeAndChildrenToConstantHighlight: (node: CodeMapNode) => highlighted.set(node.id, node),
+			removeNodeAndChildrenFromConstantHighlight: (node: CodeMapNode) => highlighted.delete(node.id),
+			getConstantHighlight: () => highlighted
+		}
+	}
+
+	function createMockedState() {
+		const idToBuilding = new Map()
+		return { getValue: () => ({ lookUp: { idToBuilding } }) }
+	}
+})

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.component.ts

@@ -0,0 +1,39 @@
+import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core"
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { State } from "../../../angular-redux/state"
+import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
+
+@Component({
+	selector: "cc-highlight-buttons",
+	template: require("./highlightButtons.component.html")
+})
+export class HighlightButtonsComponent implements OnChanges {
+	@Input() codeMapNode: CodeMapNode
+
+	isHighlighted: boolean
+
+	constructor(@Inject(ThreeSceneServiceToken) private threeSceneService: ThreeSceneService, @Inject(State) private state: State) {}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.codeMapNode) this.isHighlighted = this.calculateIsHighlighted()
+	}
+
+	addNodeToConstantHighlight() {
+		this.threeSceneService.addNodeAndChildrenToConstantHighlight(this.codeMapNode)
+	}
+
+	removeNodeFromConstantHighlight() {
+		this.threeSceneService.removeNodeAndChildrenFromConstantHighlight(this.codeMapNode)
+	}
+
+	private calculateIsHighlighted() {
+		if (!this.codeMapNode) return false
+
+		const { lookUp } = this.state.getValue()
+		const codeMapBuilding = lookUp.idToBuilding.get(this.codeMapNode.id)
+		if (!codeMapBuilding) return false
+
+		return this.threeSceneService.getConstantHighlight().has(codeMapBuilding.id)
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/highlightButtons/highlightButtons.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { HighlightButtonsComponent } from "./highlightButtons.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule],
+	declarations: [HighlightButtonsComponent],
+	exports: [HighlightButtonsComponent]
+})
+export class HighlightButtonsModule {}

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/markFolderRow/markFolderRow.component.html

@@ -1,8 +1,8 @@
-<div class="row" *ngIf="node$ | async as node">
+<div class="row" *ngIf="codeMapNode$ | async as codeMapNode">
 	<ng-container *ngFor="let markFolderItem of markFolderItems$ | async">
 		<button
 			[style.background-color]="markFolderItem.color"
-			(click)="markFolderItem.isMarked ? unmarkFolder(node.path) : markFolder(node.path, markFolderItem.color)"
+			(click)="markFolderItem.isMarked ? unmarkFolder(codeMapNode.path) : markFolder(codeMapNode.path, markFolderItem.color)"
 			class="colorButton"
 			title="Colorize folder"
 		>
@@ -12,7 +12,7 @@
 
 	<cc-color-picker
 		[hexColor]="'#ff0000'"
-		(onColorChange)="markFolder(node.path, $event)"
+		(onColorChange)="markFolder(codeMapNode.path, $event)"
 		[triggerTemplate]="colorPickerTriggerTemplate"
 	></cc-color-picker>
 </div>

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/markFolderRow/markFolderRow.component.spec.ts

@@ -3,8 +3,8 @@ import { fireEvent, render } from "@testing-library/angular"
 import { MarkFolderRowComponent } from "./markFolderRow.component"
 import { MarkFolderRowModule } from "./markFolderRow.module"
 
-jest.mock("./selectors/rightClickedNode.selector", () => ({
-	rightClickedNodeSelector: () => ({ path: "/root" })
+jest.mock("../rightClickedCodeMapNode.selector", () => ({
+	rightClickedCodeMapNodeSelector: () => ({ path: "/root" })
 }))
 
 describe("markFolderRow component", () => {

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/markFolderRow/markFolderRow.component.ts

@@ -1,11 +1,11 @@
 import "./markFolderRow.component.scss"
 import { Component, Inject } from "@angular/core"
-import { Store } from "../../../state/angular-redux/store"
-import { markPackages, unmarkPackage } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
+import { Store } from "../../../angular-redux/store"
+import { markPackages, unmarkPackage } from "../../../store/fileSettings/markedPackages/markedPackages.actions"
 import { Observable } from "rxjs"
 import { MarkFolderItem, markFolderItemsSelector } from "./selectors/markFolderItems.selector"
-import { Node } from "../../../codeCharta.model"
-import { rightClickedNodeSelector } from "./selectors/rightClickedNode.selector"
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
 
 @Component({
 	selector: "cc-mark-folder-row",
@@ -13,11 +13,11 @@ import { rightClickedNodeSelector } from "./selectors/rightClickedNode.selector"
 })
 export class MarkFolderRowComponent {
 	markFolderItems$: Observable<MarkFolderItem[]>
-	node$: Observable<Node>
+	codeMapNode$: Observable<CodeMapNode>
 
 	constructor(@Inject(Store) private store: Store) {
 		this.markFolderItems$ = store.select(markFolderItemsSelector)
-		this.node$ = store.select(rightClickedNodeSelector)
+		this.codeMapNode$ = store.select(rightClickedCodeMapNodeSelector)
 	}
 
 	markFolder(path: string, color: string) {

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/markFolderRow/markFolderRow.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common"
 import { NgModule } from "@angular/core"
-import { ColorPickerModule } from "../../colorPicker/colorPicker.module"
+import { ColorPickerModule } from "../../../../ui/colorPicker/colorPicker.module"
 import { MarkFolderRowComponent } from "./markFolderRow.component"
 
 @NgModule({

package/app/codeCharta/state/effects/nodeContextMenu/markFolderRow/selectors/markFolderItems.selector.ts

@@ -0,0 +1,29 @@
+import { MarkedPackage } from "../../../../../codeCharta.model"
+import { createSelector } from "../../../../angular-redux/createSelector"
+import { mapColorsSelector } from "../../../../store/appSettings/mapColors/mapColors.selector"
+import { markedPackagesSelector } from "../../../../store/fileSettings/markedPackages/markedPackages.selector"
+import { findIndexOfMarkedPackageOrParent } from "../../../../store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent"
+import { CcState } from "../../../../store/store"
+import { rightClickedCodeMapNodeSelector } from "../../rightClickedCodeMapNode.selector"
+
+export type MarkFolderItem = {
+	color: string
+	isMarked: boolean
+}
+
+const markingColorsSelector = createSelector([mapColorsSelector], mapColors => mapColors.markingColors)
+
+export const _getMarkFolderItems = (node: { path?: string } | null, markingColors: string[], markedPackages: MarkedPackage[]) => {
+	if (node === null) return markingColors.map(color => ({ color, isMarked: false }))
+
+	const nodeIndexWithinMarkedPackages = findIndexOfMarkedPackageOrParent(markedPackages, node.path)
+	return markingColors.map(color => ({
+		color,
+		isMarked: nodeIndexWithinMarkedPackages !== -1 && color === markedPackages[nodeIndexWithinMarkedPackages].color
+	}))
+}
+
+export const markFolderItemsSelector: (state: CcState) => MarkFolderItem[] = createSelector(
+	[rightClickedCodeMapNodeSelector, markingColorsSelector, markedPackagesSelector],
+	_getMarkFolderItems
+)

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/nodeContextMenu.e2e.ts

@@ -1,36 +1,24 @@
-import { goto } from "../../../puppeteer.helper"
+import { goto } from "../../../../puppeteer.helper"
 import { NodeContextMenuPageObject } from "./nodeContextMenu.po"
-import { SearchPanelModeSelectorPageObject } from "../searchPanelModeSelector/searchPanelModeSelector.po"
-import { MapTreeViewLevelPageObject } from "../mapTreeView/mapTreeView.level.po"
-import { CodeMapPageObject } from "../codeMap/codeMap.po"
-import { ERROR_MESSAGES } from "../../util/fileValidator"
-import { DialogErrorPageObject } from "../dialog/dialog.error.po"
+import { SearchPanelModeSelectorPageObject } from "../../../ui/searchPanelModeSelector/searchPanelModeSelector.po"
+import { MapTreeViewLevelPageObject } from "../../../ui/mapTreeView/mapTreeView.level.po"
+import { CodeMapPageObject } from "../../../ui/codeMap/codeMap.po"
 
 describe("NodeContextMenu", () => {
 	let contextMenu: NodeContextMenuPageObject
 	let searchPanelModeSelector: SearchPanelModeSelectorPageObject
 	let mapTreeViewLevel: MapTreeViewLevelPageObject
 	let codeMap: CodeMapPageObject
-	let dialogError: DialogErrorPageObject
 
 	beforeEach(async () => {
 		contextMenu = new NodeContextMenuPageObject()
 		searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
 		mapTreeViewLevel = new MapTreeViewLevelPageObject()
 		codeMap = new CodeMapPageObject()
-		dialogError = new DialogErrorPageObject()
 
 		await goto()
 	})
 
-	it("should show error message when user excludes all files", async () => {
-		await searchPanelModeSelector.toggleTreeView()
-		await mapTreeViewLevel.openContextMenu("/root")
-		await contextMenu.clickOnExclude()
-
-		expect(await dialogError.getMessage()).toEqual(`${ERROR_MESSAGES.blacklistError}`)
-	})
-
 	it("right clicking a folder should open a context menu with color options", async () => {
 		await searchPanelModeSelector.toggleTreeView()
 		await mapTreeViewLevel.openContextMenu("/root")

package/app/codeCharta/{ui → state/effects}/nodeContextMenu/nodeContextMenu.po.ts

@@ -1,4 +1,4 @@
-import { clickButtonOnPageElement } from "../../../puppeteer.helper"
+import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
 
 export class NodeContextMenuPageObject {
 	async hasColorButtons() {

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenu.service.spec.ts

@@ -0,0 +1,78 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { fireEvent } from "@testing-library/angular"
+import { MaterialModule } from "../../../../material/material.module"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import { NodeContextMenuCardModule } from "./nodeContextMenuCard/nodeContextMenuCard.module"
+import { OpenNodeContextMenuEffect } from "./openNodeContextMenu.effect"
+
+describe("nodeContextMenuService", () => {
+	let mockedWheelTargetElement
+
+	beforeEach(async () => {
+		mockedWheelTargetElement = { addEventListener: jest.fn(), removeEventListener: jest.fn() }
+		// @ts-ignore
+		jest.spyOn(document, "getElementById").mockImplementation(() => mockedWheelTargetElement)
+
+		TestBed.configureTestingModule({
+			imports: [MaterialModule, EffectsModule.forRoot([OpenNodeContextMenuEffect]), NodeContextMenuCardModule],
+			providers: [NodeContextMenuService]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	it("should close on document click", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		document.dispatchEvent(new MouseEvent("click"))
+
+		expect(closeSpy).toHaveBeenCalled()
+	})
+
+	it("should not close when clicking within (its) color picker", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		const mockedMouseEvent = { composedPath: () => [{ nodeName: "COLOR-CHROME" }] } as unknown as MouseEvent
+		nodeContextMenu["onLeftClickHideNodeContextMenu"](mockedMouseEvent)
+
+		expect(closeSpy).not.toHaveBeenCalled()
+	})
+
+	it("should not close when opening its color picker", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		const closeSpy = jest.spyOn(nodeContextMenu, "close")
+		nodeContextMenu.open(10, 10)
+
+		const mockedMouseEvent = { composedPath: () => [{ nodeName: "CC-COLOR-PICKER" }] } as unknown as MouseEvent
+		nodeContextMenu["onLeftClickHideNodeContextMenu"](mockedMouseEvent)
+
+		expect(closeSpy).not.toHaveBeenCalled()
+	})
+
+	it("should remove all listeners when closing", () => {
+		const documentRemoveEventListenerSpy = jest.spyOn(document, "removeEventListener")
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+
+		nodeContextMenu.close()
+
+		expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith("click", nodeContextMenu["onLeftClickHideNodeContextMenu"], true)
+		expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith("mousedown", nodeContextMenu["onRightClickHideNodeContextMenu"], true)
+		expect(mockedWheelTargetElement.removeEventListener).toHaveBeenCalledWith("wheel", nodeContextMenu.close, true)
+	})
+
+	it("should prevent default browser context menu to open", () => {
+		const nodeContextMenu = TestBed.inject(NodeContextMenuService)
+		nodeContextMenu.open(10, 10)
+		let wasDefaultContextMenuPrevented
+		document.addEventListener("contextmenu", event => {
+			wasDefaultContextMenuPrevented = event.defaultPrevented
+		})
+		fireEvent.contextMenu(nodeContextMenu["overlayReference"].overlayElement)
+		expect(wasDefaultContextMenuPrevented).toBe(true)
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenu.service.ts

@@ -0,0 +1,72 @@
+import { Overlay, OverlayRef } from "@angular/cdk/overlay"
+import { ComponentPortal } from "@angular/cdk/portal"
+import { Inject, Injectable } from "@angular/core"
+import { Store } from "../../angular-redux/store"
+import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard/nodeContextMenuCard.component"
+
+@Injectable({ providedIn: "root" })
+export class NodeContextMenuService {
+	private overlayReference: OverlayRef | null = null
+
+	constructor(@Inject(Overlay) private overlay: Overlay, @Inject(Store) private store: Store) {}
+
+	open(x: number, y: number) {
+		const positionStrategy = this.overlay
+			.position()
+			.flexibleConnectedTo({ x, y })
+			.withPositions([
+				{
+					originX: "end",
+					originY: "bottom",
+					overlayX: "start",
+					overlayY: "top"
+				}
+			])
+
+		this.overlayReference = this.overlay.create({
+			positionStrategy,
+			scrollStrategy: this.overlay.scrollStrategies.close()
+		})
+
+		this.overlayReference.attach(new ComponentPortal(NodeContextMenuCardComponent))
+
+		this.overlayReference.overlayElement.addEventListener("contextmenu", event => {
+			event.preventDefault()
+		})
+
+		document.addEventListener("click", this.onLeftClickHideNodeContextMenu, false)
+		document.addEventListener("mousedown", this.onRightClickHideNodeContextMenu, true)
+		document.getElementById("codeMap").addEventListener("wheel", this.close, true)
+	}
+
+	close = () => {
+		document.removeEventListener("click", this.onLeftClickHideNodeContextMenu, true)
+		document.removeEventListener("mousedown", this.onRightClickHideNodeContextMenu, true)
+		document.getElementById("codeMap").removeEventListener("wheel", this.close, true)
+
+		this.store.dispatch(setRightClickedNodeData(null))
+
+		if (this.overlayReference) {
+			this.overlayReference.dispose()
+			this.overlayReference = null
+		}
+	}
+
+	private onLeftClickHideNodeContextMenu = (mouseEvent: MouseEvent) => {
+		if (this.isEventFromColorPicker(mouseEvent)) return
+
+		this.close()
+	}
+
+	private onRightClickHideNodeContextMenu = event => {
+		if (event.button !== 2) return
+		// Close on right click down, to close before the map gets potential moved by right clicked
+		this.close()
+	}
+
+	private isEventFromColorPicker(mouseEvent: MouseEvent) {
+		const elements = mouseEvent.composedPath() as Node[]
+		return elements.some(element => element?.nodeName === "CC-COLOR-PICKER" || element?.nodeName === "COLOR-CHROME")
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/lastPartOfNodePath.pipe.spec.ts

@@ -0,0 +1,11 @@
+import { LastPartOfNodePathPipe } from "./lastPartOfNodePath.pipe"
+
+describe("lastPartOfNodePathPipe", () => {
+	it("should shorten children with '...'-prefix", () => {
+		expect(new LastPartOfNodePathPipe().transform("/root/child.ts")).toBe(".../child.ts")
+	})
+
+	it("should not shorten a top level entry", () => {
+		expect(new LastPartOfNodePathPipe().transform("/root")).toBe("/root")
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/lastPartOfNodePath.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+@Pipe({ name: "lastPartOfNodePath" })
+export class LastPartOfNodePathPipe implements PipeTransform {
+	transform(path: string) {
+		return `${path.lastIndexOf("/") === 0 ? "" : "..."}${path.slice(path.lastIndexOf("/"))}`
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.html

@@ -0,0 +1,17 @@
+<mat-card id="codemap-context-menu" *ngIf="codeMapNode$ | async; let codeMapNode">
+	<div *ngIf="codeMapNode?.children?.length > 0">
+		<cc-mark-folder-row></cc-mark-folder-row>
+		<mat-divider></mat-divider>
+	</div>
+
+	<div class="button-group">
+		<button mat-button disabled="true" title="{{ codeMapNode.path }}">
+			{{ codeMapNode.path | lastPartOfNodePath }}
+		</button>
+
+		<cc-focus-buttons [codeMapNode]="codeMapNode"></cc-focus-buttons>
+		<cc-flatten-buttons [codeMapNode]="codeMapNode"></cc-flatten-buttons>
+		<cc-highlight-buttons [codeMapNode]="codeMapNode"></cc-highlight-buttons>
+		<cc-exclude-button [codeMapNode]="codeMapNode"></cc-exclude-button>
+	</div>
+</mat-card>

package/app/codeCharta/{ui/nodeContextMenu/nodeContextMenu.component.scss → state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.scss}

@@ -1,26 +1,21 @@
-.cdk-overlay-container {
-	/* overwrite z-index of below #codemap-context-menu */
-	z-index: 2000 !important;
-}
-
-node-context-menu-component {
-	#codemap-context-menu {
-		position: absolute;
-		z-index: 2000;
-	}
+#codemap-context-menu {
+	padding: 2px;
 
 	.button-group {
 		display: inline-grid;
+		width: 100%;
 	}
 
 	.png-icon {
+		width: 17px;
+		height: 17px;
 		margin: 5px auto auto;
 		padding: 0;
 		display: inline-block;
 		background-repeat: no-repeat no-repeat;
 		pointer-events: none;
 	}
-	.md-button:not(.colorButton),
+
 	[mat-button] {
 		width: 100%;
 		text-align: left;

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.spec.ts

@@ -0,0 +1,49 @@
+import { TestBed } from "@angular/core/testing"
+import { render, screen } from "@testing-library/angular"
+import { mocked } from "ts-jest/utils"
+import { ThreeSceneServiceToken } from "../../../../services/ajs-upgraded-providers"
+import { VALID_FILE_NODE_WITH_ID, VALID_NODE_WITH_PATH } from "../../../../util/dataMocks"
+import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard.component"
+import { NodeContextMenuCardModule } from "./nodeContextMenuCard.module"
+
+jest.mock("../rightClickedCodeMapNode.selector", () => ({
+	rightClickedCodeMapNodeSelector: jest.fn()
+}))
+const mockedRightClickedCodeMapNodeSelector = mocked(rightClickedCodeMapNodeSelector)
+
+describe("NodeContextMenuCardComponent", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [NodeContextMenuCardModule],
+			providers: [
+				{
+					provide: ThreeSceneServiceToken,
+					useValue: {
+						addNodeAndChildrenToConstantHighlight: jest.fn(),
+						removeNodeAndChildrenFromConstantHighlight: jest.fn(),
+						getConstantHighlight: jest.fn()
+					}
+				}
+			]
+		})
+	})
+
+	it("should not display mark folder option if node is a leaf", async () => {
+		mockedRightClickedCodeMapNodeSelector.mockImplementation(() => VALID_FILE_NODE_WITH_ID)
+		await render(NodeContextMenuCardComponent, { excludeComponentDeclaration: true })
+		expect(screen.queryByTitle("Colorize folder")).toBe(null)
+	})
+
+	it("should display all information", async () => {
+		mockedRightClickedCodeMapNodeSelector.mockImplementation(() => VALID_NODE_WITH_PATH)
+		await render(NodeContextMenuCardComponent, { excludeComponentDeclaration: true })
+
+		expect(screen.queryByText("/root")).not.toBe(null)
+		expect(screen.queryByText("FOCUS")).not.toBe(null)
+		expect(screen.queryByText("FLATTEN")).not.toBe(null)
+		expect(screen.queryByText("KEEP HIGHLIGHT")).not.toBe(null)
+		expect(screen.queryByText("EXCLUDE")).not.toBe(null)
+		expect(screen.queryAllByTitle("Colorize folder").length).toBe(5)
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.component.ts

@@ -0,0 +1,19 @@
+import "./nodeContextMenuCard.component.scss"
+import { Component, Inject, OnInit } from "@angular/core"
+import { Store } from "../../../angular-redux/store"
+import { rightClickedCodeMapNodeSelector } from "../rightClickedCodeMapNode.selector"
+import { Observable } from "rxjs"
+import { CodeMapNode } from "../../../../codeCharta.model"
+
+@Component({
+	template: require("./nodeContextMenuCard.component.html")
+})
+export class NodeContextMenuCardComponent implements OnInit {
+	codeMapNode$: Observable<CodeMapNode>
+
+	constructor(@Inject(Store) private store: Store) {}
+
+	ngOnInit(): void {
+		this.codeMapNode$ = this.store.select(rightClickedCodeMapNodeSelector)
+	}
+}

package/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { ExcludeButtonComponent } from "../excludeButton/excludeButton.component"
+import { FlattenButtonsModule } from "../flattenButtons/flattenButtons.module"
+import { FocusButtonsModule } from "../focusButtons/focusButtons.module"
+import { HighlightButtonsModule } from "../highlightButtons/highlightButtons.module"
+import { MarkFolderRowModule } from "../markFolderRow/markFolderRow.module"
+import { LastPartOfNodePathPipe } from "./lastPartOfNodePath.pipe"
+import { NodeContextMenuCardComponent } from "./nodeContextMenuCard.component"
+
+@NgModule({
+	imports: [CommonModule, MaterialModule, FlattenButtonsModule, FocusButtonsModule, HighlightButtonsModule, MarkFolderRowModule],
+	declarations: [NodeContextMenuCardComponent, LastPartOfNodePathPipe, ExcludeButtonComponent],
+	exports: [NodeContextMenuCardComponent],
+	entryComponents: [NodeContextMenuCardComponent]
+})
+export class NodeContextMenuCardModule {}

package/app/codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect.spec.ts

@@ -0,0 +1,32 @@
+import { ApplicationInitStatus } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { Action } from "redux"
+import { Subject } from "rxjs"
+import { EffectsModule } from "../../angular-redux/effects/effects.module"
+import { setRightClickedNodeData } from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import { OpenNodeContextMenuEffect } from "./openNodeContextMenu.effect"
+
+describe("OpenNodeContextMenuEffect", () => {
+	let openSpy
+	beforeEach(async () => {
+		openSpy = jest.fn()
+		EffectsModule.actions$ = new Subject<Action>()
+		TestBed.configureTestingModule({
+			imports: [EffectsModule.forRoot([OpenNodeContextMenuEffect])],
+			providers: [{ provide: NodeContextMenuService, useValue: { open: openSpy } }]
+		})
+		await TestBed.inject(ApplicationInitStatus).donePromise
+	})
+
+	it("should ignore empty rightClickedNodeData", () => {
+		EffectsModule.actions$.next(setRightClickedNodeData(null))
+		expect(openSpy).not.toHaveBeenCalled()
+	})
+
+	it("should open node context menu", () => {
+		EffectsModule.actions$.next(setRightClickedNodeData({ nodeId: 1, xPositionOfRightClickEvent: 2, yPositionOfRightClickEvent: 3 }))
+		expect(openSpy).toHaveBeenCalledTimes(1)
+		expect(openSpy).toHaveBeenCalledWith(2, 3)
+	})
+})

package/app/codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect.ts

@@ -0,0 +1,33 @@
+import { Inject, Injectable } from "@angular/core"
+import { createEffect } from "../../angular-redux/effects/createEffect"
+import { Actions, ActionsToken } from "../../angular-redux/effects/effects.module"
+import { ofType } from "../../angular-redux/ofType"
+import { NodeContextMenuService } from "./nodeContextMenu.service"
+import {
+	RightClickedNodeDataActions,
+	SetRightClickedNodeDataAction
+} from "../../store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { tap } from "rxjs"
+
+@Injectable()
+export class OpenNodeContextMenuEffect {
+	constructor(
+		@Inject(ActionsToken) private actions$: Actions,
+		@Inject(NodeContextMenuService) private nodeContextMenu: NodeContextMenuService
+	) {}
+
+	openNodeContextMenu$ = createEffect(
+		() =>
+			this.actions$.pipe(
+				ofType<SetRightClickedNodeDataAction>(RightClickedNodeDataActions.SET_RIGHT_CLICKED_NODE_DATA),
+				tap(rightClickedNodeData => {
+					if (rightClickedNodeData.payload)
+						this.nodeContextMenu.open(
+							rightClickedNodeData.payload.xPositionOfRightClickEvent,
+							rightClickedNodeData.payload.yPositionOfRightClickEvent
+						)
+				})
+			),
+		{ dispatch: false }
+	)
+}