codecharta-visualization 1.87.1 → 1.88.0

package/app/codeCharta/ui/filePanel/filePanel.component.ts

@@ -1,22 +1,16 @@
 import "./filePanel.component.scss"
 import { IRootScopeService } from "angular"
 import { StoreService } from "../../state/store.service"
-import { removeFile, setDeltaByNames, setMultipleByNames, setSingleByName } from "../../state/store/files/files.actions"
+import { removeFile, setDeltaByNames, setMultipleByNames } from "../../state/store/files/files.actions"
 import { FilesSelectionSubscriber, FilesService } from "../../state/store/files/files.service"
-import {
-	fileStatesAvailable,
-	getFileNameOf,
-	getVisibleFileStates,
-	isDeltaState,
-	isPartialState,
-	isSingleState
-} from "../../model/files/files.helper"
+import { fileStatesAvailable, getFileNameOf, getVisibleFileStates, isDeltaState, isPartialState } from "../../model/files/files.helper"
 import { FileSelectionState, FileState } from "../../model/files/files"
 import { CodeChartaService } from "../../codeCharta.service"
 import { removeRecentFile } from "../../state/store/dynamicSettings/recentFiles/recentFiles.actions"
+import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service"
+import { MapColors } from "../../codeCharta.model"
 
 interface SelectedFileNames {
-	single: string
 	delta: {
 		reference: string
 		comparison: string
@@ -24,34 +18,29 @@ interface SelectedFileNames {
 	partial: string[]
 }
 
-export class FilePanelController implements FilesSelectionSubscriber {
+export class FilePanelController implements FilesSelectionSubscriber, MapColorsSubscriber {
 	private lastRenderState: FileSelectionState
 
 	private _viewModel: {
-		isSingleState: boolean
 		isPartialState: boolean
 		isDeltaState: boolean
 		files: FileState[]
 		renderState: FileSelectionState
 		selectedFileNames: SelectedFileNames
-		pictogramFirstFileColor: string
 		pictogramUpperColor: string
 		pictogramLowerColor: string
 	} = {
-		isSingleState: null,
 		isPartialState: null,
 		isDeltaState: null,
 		files: null,
 		renderState: null,
 		selectedFileNames: {
-			single: null,
 			delta: {
 				reference: null,
 				comparison: null
 			},
 			partial: []
 		},
-		pictogramFirstFileColor: null,
 		pictogramUpperColor: null,
 		pictogramLowerColor: null
 	}
@@ -59,41 +48,25 @@ export class FilePanelController implements FilesSelectionSubscriber {
 	constructor(private $rootScope: IRootScopeService, private storeService: StoreService) {
 		"ngInject"
 		FilesService.subscribe(this.$rootScope, this)
+		MapColorsService.subscribe(this.$rootScope, this)
 	}
 
-	onRemoveFile(filename, state, $event): void {
+	onMapColorsChanged(mapColors: MapColors) {
+		this._viewModel.pictogramUpperColor = mapColors.positiveDelta
+		this._viewModel.pictogramLowerColor = mapColors.negativeDelta
+	}
+
+	onRemoveFile(filename, $event): void {
 		this.storeService.dispatch(removeFile(filename))
 		this.storeService.dispatch(removeRecentFile(filename))
 
 		const files = this.storeService.getState().files
-		if (state === FileSelectionState.Single) {
-			this.singleStateFileRemove(files)
-		} else {
-			this.partialStateFileRemove(files)
-		}
+		this.partialStateFileRemove(files)
 
 		$event.stopPropagation()
 		$event.preventDefault()
 	}
 
-	singleStateFileRemove(files: FileState[]) {
-		if (!isSingleState(files)) {
-			this.selectRemainingFile(files)
-		} else {
-			this.keepSelection()
-		}
-	}
-
-	private keepSelection() {
-		const selectedFile = this.storeService.getState().files.find(fileState => fileState.selectedAs === FileSelectionState.Single)
-		this.onSingleFileChange(getFileNameOf(selectedFile))
-	}
-
-	private selectRemainingFile(files: FileState[]) {
-		const remainingFile = files[files.length - 1]
-		this.onSingleFileChange(getFileNameOf(remainingFile))
-	}
-
 	private partialStateFileRemove(files: FileState[]) {
 		const selectedFiles = files.filter(x => x.selectedAs === FileSelectionState.Partial).map(fileState => getFileNameOf(fileState))
 
@@ -106,31 +79,20 @@ export class FilePanelController implements FilesSelectionSubscriber {
 
 	onFilesSelectionChanged(files: FileState[]) {
 		this._viewModel.files = files
-		this._viewModel.isSingleState = isSingleState(files)
 		this._viewModel.isPartialState = isPartialState(files)
 		this._viewModel.isDeltaState = isDeltaState(files)
-		this.setPictogramColor()
 		this.updateSelectedFileNamesInViewModel()
 		this.lastRenderState = this._viewModel.renderState
 	}
 
-	onPartialSelectionClosed() {
+	onPartialSelectionClosed = () => {
 		this.updateSelectedFileNamesInViewModel()
 	}
 
-	private setPictogramColor() {
-		this._viewModel.pictogramFirstFileColor = "#808080"
-		this._viewModel.pictogramUpperColor = this.storeService.getState().appSettings.mapColors.positiveDelta
-		this._viewModel.pictogramLowerColor = this.storeService.getState().appSettings.mapColors.negativeDelta
-	}
-
 	private updateSelectedFileNamesInViewModel() {
 		const visibleFileStates = getVisibleFileStates(this._viewModel.files)
 
-		if (this._viewModel.isSingleState) {
-			this._viewModel.renderState = FileSelectionState.Single
-			this._viewModel.selectedFileNames.single = visibleFileStates[0].file.fileMeta.fileName
-		} else if (this._viewModel.isDeltaState) {
+		if (this._viewModel.isDeltaState) {
 			this._viewModel.renderState = FileSelectionState.Comparison
 
 			let reference = visibleFileStates[0].file.fileMeta.fileName
@@ -148,26 +110,24 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	onSingleFileChange(singleFileName: string) {
-		this.storeService.dispatch(setSingleByName(singleFileName))
-		const rootName = this._viewModel.files.find(x => x.selectedAs === FileSelectionState.Single).file.map.name
-		CodeChartaService.updateRootData(rootName)
-	}
-
-	onDeltaReferenceFileChange(referenceFileName: string) {
-		const rootName = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName).file.map.name
+	onDeltaReferenceFileChange = (referenceFileName: string) => {
+		const rootFile = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName)
+		if (!rootFile) {
+			return
+		}
+		const rootName = rootFile.file.map.name
 		CodeChartaService.updateRootData(rootName)
 		this.storeService.dispatch(setDeltaByNames(referenceFileName, this._viewModel.selectedFileNames.delta.comparison))
 	}
 
-	onDeltaComparisonFileChange(comparisonFileName: string) {
+	onDeltaComparisonFileChange = (comparisonFileName: string) => {
 		const referenceFileName = this._viewModel.selectedFileNames.delta.reference
 		const rootName = this._viewModel.files.find(x => x.file.fileMeta.fileName === referenceFileName).file.map.name
 		CodeChartaService.updateRootData(rootName)
 		this.storeService.dispatch(setDeltaByNames(referenceFileName, comparisonFileName))
 	}
 
-	onPartialFilesChange(partialFileNames: string[]) {
+	onPartialFilesChange = (partialFileNames: string[]) => {
 		if (partialFileNames.length > 0) {
 			this.storeService.dispatch(setMultipleByNames(partialFileNames))
 		} else {
@@ -175,26 +135,17 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	onSingleStateSelected() {
-		this._viewModel.selectedFileNames.single = this.getLastVisibleFileName()
-		this.onSingleFileChange(this._viewModel.selectedFileNames.single)
-	}
-
-	onPartialStateSelected() {
-		this.selectRecentPartialFiles()
-	}
-
-	onDeltaStateSelected() {
+	onDeltaStateSelected = () => {
 		this._viewModel.selectedFileNames.delta.reference = this.getLastVisibleFileName()
 		this.onDeltaComparisonFileChange(null)
 	}
 
-	selectAllPartialFiles() {
+	selectAllPartialFiles = () => {
 		const allFileNames = this._viewModel.files.map(x => x.file.fileMeta.fileName)
 		this.onPartialFilesChange(allFileNames)
 	}
 
-	selectRecentPartialFiles() {
+	selectRecentPartialFiles = () => {
 		const recentFileNames = this.storeService.getState().dynamicSettings.recentFiles
 		if (recentFileNames.length > 0) {
 			this.onPartialFilesChange(recentFileNames)
@@ -203,11 +154,11 @@ export class FilePanelController implements FilesSelectionSubscriber {
 		}
 	}
 
-	selectZeroPartialFiles() {
+	selectZeroPartialFiles = () => {
 		this.onPartialFilesChange([])
 	}
 
-	invertPartialFileSelection() {
+	invertPartialFileSelection = () => {
 		const invertedFileNames: string[] = []
 		const partialFileNames = new Set(this._viewModel.selectedFileNames.partial)
 
@@ -225,9 +176,6 @@ export class FilePanelController implements FilesSelectionSubscriber {
 	}
 
 	private getLastVisibleFileName() {
-		if (this.lastRenderState === FileSelectionState.Single) {
-			return this._viewModel.selectedFileNames.single
-		}
 		if (this.lastRenderState === FileSelectionState.Partial) {
 			const visibleFileStates = getVisibleFileStates(this._viewModel.files)
 			if (fileStatesAvailable(this._viewModel.files)) {
@@ -242,7 +190,7 @@ export class FilePanelController implements FilesSelectionSubscriber {
 }
 
 export const filePanelComponent = {
-	selector: "filePanelComponent",
+	selector: "ccFilePanel",
 	template: require("./filePanel.component.html"),
 	controller: FilePanelController
 }

package/app/codeCharta/ui/filePanel/filePanel.module.ts

@@ -1,6 +1,18 @@
 import angular from "angular"
+
 import "../../state/state.module"
+
 import "../dialog/dialog.module"
+
 import { filePanelComponent } from "./filePanel.component"
+import { downgradeComponent } from "@angular/upgrade/static"
+import { FilePanelFileSelectorComponent } from "./filePanelFileSelector/filePanelFileSelector.component"
+import { FilePanelStateButtonsComponent } from "./filePanelStateButtons/filePanelStateButtons.component"
+import { FilePanelDeltaSelectorComponent } from "./filePanelDeltaSelector/filePanelDeltaSelector.component"
 
-angular.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"]).component(filePanelComponent.selector, filePanelComponent)
+angular
+	.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"])
+	.component(filePanelComponent.selector, filePanelComponent)
+	.directive("ccFilePanelFileSelector", downgradeComponent({ component: FilePanelFileSelectorComponent }))
+	.directive("ccFilePanelStateButtons", downgradeComponent({ component: FilePanelStateButtonsComponent }))
+	.directive("ccFilePanelDeltaSelector", downgradeComponent({ component: FilePanelDeltaSelectorComponent }))

package/app/codeCharta/ui/filePanel/filePanel.po.ts

@@ -2,32 +2,14 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export class FilePanelPageObject {
 	async getSelectedName() {
-		await page.waitForSelector("file-panel-component md-select .md-text")
-		return page.$eval("file-panel-component md-select .md-text", element => element["innerText"])
-	}
-
-	async getSelectedChangedName(oldName: string) {
-		await page.waitForSelector("file-panel-component md-select .md-text")
-		await this.waitUntilNameChange(oldName)
-		return page.$eval("file-panel-component md-select .md-text", element => element["innerText"])
-	}
-
-	private async waitUntilNameChange(oldName: string) {
-		await page.waitForFunction(
-			names => {
-				return document.querySelector(`file-panel-component md-select .md-text md-truncate`).textContent !== names
-			},
-			{},
-			oldName
-		)
+		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span")
+		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span", element => element["innerText"])
 	}
 
 	async getAllNames() {
-		await clickButtonOnPageElement("file-panel-component md-select")
-		await page.waitForSelector(".md-select-menu-container.md-active > md-select-menu")
-
-		const content = await page.$eval(".md-select-menu-container.md-active > md-select-menu", element => element["innerText"])
-
-		return content.split("\n")
+		await clickButtonOnPageElement("cc-file-panel cc-file-panel-file-selector mat-select")
+		await page.waitForSelector(".mat-select-panel")
+		const content = await page.$$eval(".mat-select-panel .mat-option-text", element => element.map(item => item["innerText"]))
+		return content
 	}
 }

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.html

@@ -0,0 +1,23 @@
+<mat-select
+	class="delta-select"
+	placeholder="select reference file"
+	[(ngModel)]="selectedDeltaReferenceFile"
+	(selectionChange)="handleDeltaReferenceFileChange(selectedDeltaReferenceFile)"
+>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>
+
+<div class="pictogram" [style.background]="'linear-gradient(' + pictogramUpperColor + ' 50%, ' + pictogramLowerColor + ' 50%)'"></div>
+
+<mat-select
+	class="delta-select"
+	placeholder="select comparison file"
+	[(ngModel)]="selectedDeltaComparisonFile"
+	(selectionChange)="handleDeltaComparisonFileChange(selectedDeltaComparisonFile)"
+>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>

package/app/codeCharta/ui/filePanel/filePanelDeltaSelector/filePanelDeltaSelector.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core"
+import { FileState } from "../../../model/files/files"
+
+@Component({
+	selector: "cc-file-panel-delta-selector",
+	template: require("./filePanelDeltaSelector.component.html")
+})
+export class FilePanelDeltaSelectorComponent {
+	@Input() files: FileState[]
+	@Input() pictogramFirstColor: string
+	@Input() pictogramUpperColor: string
+	@Input() pictogramLowerColor: string
+	@Input() handleDeltaReferenceFileChange: (referenceFileName: string) => void
+	@Input() handleDeltaComparisonFileChange: (comparisonFileName: string) => void
+
+	selectedDeltaReferenceFile: string
+	selectedDeltaComparisonFile: string
+}

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -0,0 +1,18 @@
+<mat-select
+	class="standard-select"
+	[(ngModel)]="selectedFileNames"
+	(selectionChange)="handleSelectedFilesChanged(selectedFileNames)"
+	name="recentFiles"
+	[placeholder]="selectedFileNames"
+	multiple
+	(closed)="handleOnSelectionClosed()"
+>
+	<div class="actions">
+		<button mat-button (click)="handleSelectAllPartialFiles()">All</button>
+		<button mat-button (click)="handleSelectZeroPartialFiles()">None</button>
+		<button mat-button (click)="handleInvertSelectedPartialFiles()">Invert</button>
+	</div>
+	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+		{{ file.file.fileMeta.fileName }}
+	</mat-option>
+</mat-select>

package/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core"
+import { FileState } from "../../../model/files/files"
+
+@Component({
+	selector: "cc-file-panel-file-selector",
+	template: require("./filePanelFileSelector.component.html")
+})
+export class FilePanelFileSelectorComponent {
+	@Input() files: FileState[]
+	@Input() selectedFileNames: string[]
+	@Input() handleSelectedFilesChanged: (selectedFileNames: string[]) => void
+	@Input() handleSelectAllPartialFiles: () => void
+	@Input() handleSelectZeroPartialFiles: () => void
+	@Input() handleInvertSelectedPartialFiles: () => void
+	@Input() handleOnSelectionClosed: () => void
+}

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.html

@@ -0,0 +1,18 @@
+<div class="mode-chooser">
+	<button
+		mat-button
+		class="state-selector-button mode-selector left"
+		(click)="handleStandardButtonClicked()"
+		[class.current]="!isDeltaState"
+	>
+		<span class="text">Standard</span>
+	</button>
+	<button
+		mat-button
+		class="state-selector-button mode-selector right"
+		(click)="handleDeltaButtonClicked()"
+		[class.current]="isDeltaState"
+	>
+		<span class="text">Delta</span>
+	</button>
+</div>

package/app/codeCharta/ui/filePanel/filePanelStateButtons/filePanelStateButtons.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core"
+
+@Component({
+	selector: "cc-file-panel-state-buttons",
+	template: require("./filePanelStateButtons.component.html")
+})
+export class FilePanelStateButtonsComponent {
+	@Input() isDeltaState: boolean
+	@Input() handleStandardButtonClicked: () => void
+	@Input() handleDeltaButtonClicked: () => void
+}

package/app/codeCharta/ui/mapTreeView/mapTreeView.level.e2e.ts

@@ -18,10 +18,11 @@ describe("MapTreeViewLevel", () => {
 
 	describe("Blacklist", () => {
 		it("excluding a building should exclude it from the tree-view as well", async () => {
-			const filePath = "/root/ParentLeaf/smallLeaf.html"
+			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
 			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/ParentLeaf")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
 			await mapTreeViewLevel.openContextMenu(filePath)
 			await nodeContextMenu.exclude()
 
@@ -31,12 +32,13 @@ describe("MapTreeViewLevel", () => {
 
 	describe("NodeContextMenu", () => {
 		it("NodeContextMenu path should remain marked when hovering over another mapTreeView Element", async () => {
-			const filePath = "/root/ParentLeaf/smallLeaf.html"
+			const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
 			await searchPanelModeSelector.toggleTreeView()
-			await mapTreeViewLevel.openFolder("/root/ParentLeaf")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
+			await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
 			await mapTreeViewLevel.openContextMenu(filePath)
-			await mapTreeViewLevel.hoverNode("/root/sample1OnlyLeaf.scss")
+			await mapTreeViewLevel.hoverNode("/root/sample1.cc.json/sample1OnlyLeaf.scss")
 
 			expect(await mapTreeViewLevel.isNodeMarked(filePath)).toBeTruthy()
 		})

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.html

@@ -3,7 +3,7 @@
 		id="{{ node.path }}"
 		class="tree-element-label-{{ depth }} tree-element-label"
 		[class.hovered]="(hoveredBuildingPath$ | async) === node.path"
-		[class.marked]="isContextMenuOpenForNode"
+		[class.marked]="(rightClickedNodeData$ | async)?.nodeId === node.id"
 		(mouseenter)="onMouseEnter()"
 		(mouseleave)="onMouseLeave()"
 		(click)="toggleOpen()"

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.spec.ts

@@ -4,17 +4,10 @@ import userEvent from "@testing-library/user-event"
 
 import { searchedNodePathsSelector } from "../../../state/selectors/searchedNodes/searchedNodePaths.selector"
 import { Store } from "../../../state/store/store"
-import { NodeContextMenuController } from "../../nodeContextMenu/nodeContextMenu.component"
 import { MapTreeViewModule } from "../mapTreeView.module"
 import { MapTreeViewLevelComponent } from "./mapTreeViewLevel.component"
 import { rootNode } from "./mocks"
 
-jest.mock("../../nodeContextMenu/nodeContextMenu.component", () => ({
-	NodeContextMenuController: {
-		subscribeToHideNodeContextMenu: () => {},
-		broadcastShowEvent: jest.fn()
-	}
-}))
 jest.mock("../../../state/selectors/searchedNodes/searchedNodePaths.selector", () => ({
 	searchedNodePathsSelector: jest.fn(
 		jest.requireActual("../../../state/selectors/searchedNodes/searchedNodePaths.selector").searchedNodePathsSelector
@@ -76,21 +69,18 @@ describe("mapTreeViewLevel", () => {
 		expect(firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")).toBeTruthy()
 	})
 
-	it("should open nodeContextMenu when options button clicked and be marked afterwards", async () => {
-		const nodeContextMenuSpy = jest.spyOn(NodeContextMenuController, "broadcastShowEvent")
-
+	it("should show option button on hover and be marked after context menu was opened", async () => {
 		const { container } = await render(MapTreeViewLevelComponent, { componentProperties, excludeComponentDeclaration: true })
+
 		const firstLevelFolder = container.querySelector("#\\/root\\/ParentLeaf")
+		let optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		expect(optionsButton).toBe(null)
 
 		userEvent.hover(firstLevelFolder)
-		const optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		optionsButton = firstLevelFolder.querySelector("cc-map-tree-view-item-option-buttons")
+		expect(optionsButton).not.toBe(null)
 		fireEvent.click(optionsButton.querySelector("[title='Open Node-Context-Menu']"))
 
-		expect(nodeContextMenuSpy).toHaveBeenCalled()
-		const argumentsToNodeContextMenu = nodeContextMenuSpy.mock.calls[0]
-		expect(argumentsToNodeContextMenu[1]).toBe("/root/ParentLeaf")
-		expect(argumentsToNodeContextMenu[2]).toBe("Folder")
-
 		const isMarked = container.querySelector("#\\/root\\/ParentLeaf.marked")
 		expect(isMarked).toBeTruthy()
 	})

package/app/codeCharta/ui/mapTreeView/mapTreeViewLevel/mapTreeViewLevel.component.ts

@@ -5,7 +5,11 @@ import { Store } from "../../../state/angular-redux/store"
 import { CodeMapNode } from "../../../codeCharta.model"
 import { hoveredBuildingPathSelector } from "../../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.selector"
 import { setHoveredBuildingPath } from "../../../state/store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
-import { NodeContextMenuController } from "../../nodeContextMenu/nodeContextMenu.component"
+import {
+	RightClickedNodeData,
+	setRightClickedNodeData
+} from "../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
+import { rightClickedNodeDataSelector } from "../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
 
 @Component({
 	selector: "cc-map-tree-view-level",
@@ -16,14 +20,13 @@ export class MapTreeViewLevelComponent implements OnInit {
 	@Input() depth: number
 
 	hoveredBuildingPath$: Observable<string | null>
+	rightClickedNodeData$: Observable<RightClickedNodeData>
 
 	isOpen = false
-	isContextMenuOpenForNode = false
 
 	constructor(@Inject(Store) private store: Store) {
 		this.hoveredBuildingPath$ = this.store.select(hoveredBuildingPathSelector)
-
-		NodeContextMenuController.subscribeToHideNodeContextMenu(undefined, this)
+		this.rightClickedNodeData$ = this.store.select(rightClickedNodeDataSelector)
 	}
 
 	ngOnInit(): void {
@@ -33,10 +36,6 @@ export class MapTreeViewLevelComponent implements OnInit {
 		}
 	}
 
-	onHideNodeContextMenu() {
-		this.isContextMenuOpenForNode = false
-	}
-
 	onMouseEnter() {
 		this.store.dispatch(setHoveredBuildingPath(this.node.path))
 	}
@@ -49,8 +48,13 @@ export class MapTreeViewLevelComponent implements OnInit {
 		$event.stopPropagation()
 		$event.preventDefault()
 
-		this.isContextMenuOpenForNode = true
-		NodeContextMenuController.broadcastShowEvent(undefined, this.node.path, this.node.type, $event.clientX, $event.clientY)
+		this.store.dispatch(
+			setRightClickedNodeData({
+				nodeId: this.node.id,
+				xPositionOfRightClickEvent: $event.clientX,
+				yPositionOfRightClickEvent: $event.clientY
+			})
+		)
 
 		document.querySelector(".tree-element-0").addEventListener("scroll", this.scrollFunction)
 	}
@@ -60,7 +64,7 @@ export class MapTreeViewLevelComponent implements OnInit {
 	}
 
 	private scrollFunction = () => {
-		NodeContextMenuController.broadcastHideEvent()
+		this.store.dispatch(setRightClickedNodeData(null))
 		document.querySelector(".tree-element-0").removeEventListener("scroll", this.scrollFunction)
 	}
 }

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

@@ -0,0 +1,22 @@
+<div class="row" *ngIf="node$ | async as node">
+	<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)"
+			class="colorButton"
+			title="Colorize folder"
+		>
+			<i class="fa fa-times" *ngIf="markFolderItem.isMarked"></i>
+		</button>
+	</ng-container>
+
+	<cc-color-picker
+		[hexColor]="'#ff0000'"
+		(onColorChange)="markFolder(node.path, $event)"
+		[triggerTemplate]="colorPickerTriggerTemplate"
+	></cc-color-picker>
+</div>
+
+<ng-template #colorPickerTriggerTemplate>
+	<div class="cc-color-picker-trigger fa fa-paint-brush"></div>
+</ng-template>

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

@@ -0,0 +1,31 @@
+cc-mark-folder-row {
+	.row {
+		display: flex;
+	}
+
+	:hover {
+		cursor: pointer;
+	}
+
+	.colorButton {
+		width: 32px;
+		height: 32px;
+
+		i {
+			font-size: 25px;
+			display: block;
+			color: red;
+			text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+		}
+	}
+
+	cc-color-picker {
+		width: 32px;
+		height: 32px;
+
+		.cc-color-picker-trigger {
+			font-size: 25px;
+			margin-top: 8px;
+		}
+	}
+}

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

@@ -0,0 +1,35 @@
+import { TestBed } from "@angular/core/testing"
+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" })
+}))
+
+describe("markFolderRow component", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [MarkFolderRowModule]
+		})
+	})
+
+	it("should let a user mark and unmark a node", async () => {
+		const { container } = await render(MarkFolderRowComponent, { excludeComponentDeclaration: true })
+
+		expect(container.querySelectorAll("button").length).toBe(5)
+		expect(container.querySelectorAll("cc-color-picker").length).toBe(1)
+		expect(container.querySelectorAll(".fa-times").length).toBe(0)
+
+		fireEvent.click(getFirstColorButton(container))
+		expect(container.querySelectorAll(".fa-times").length).toBe(1)
+		expect(getFirstColorButton(container).querySelector(".fa-times")).not.toBe(null)
+
+		fireEvent.click(getFirstColorButton(container))
+		expect(container.querySelectorAll(".fa-times").length).toBe(0)
+
+		function getFirstColorButton(container: Element) {
+			return container.querySelectorAll("button[title='Colorize folder']")[0]
+		}
+	})
+})