codecharta-visualization 1.87.1 → 1.88.0

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

@@ -0,0 +1,30 @@
+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 { Observable } from "rxjs"
+import { MarkFolderItem, markFolderItemsSelector } from "./selectors/markFolderItems.selector"
+import { Node } from "../../../codeCharta.model"
+import { rightClickedNodeSelector } from "./selectors/rightClickedNode.selector"
+
+@Component({
+	selector: "cc-mark-folder-row",
+	template: require("./markFolderRow.component.html")
+})
+export class MarkFolderRowComponent {
+	markFolderItems$: Observable<MarkFolderItem[]>
+	node$: Observable<Node>
+
+	constructor(@Inject(Store) private store: Store) {
+		this.markFolderItems$ = store.select(markFolderItemsSelector)
+		this.node$ = store.select(rightClickedNodeSelector)
+	}
+
+	markFolder(path: string, color: string) {
+		this.store.dispatch(markPackages([{ path, color }]))
+	}
+
+	unmarkFolder(path: string) {
+		this.store.dispatch(unmarkPackage({ path }))
+	}
+}

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

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

package/app/codeCharta/ui/nodeContextMenu/markFolderRow/selectors/markFolderItems.selector.spec.ts

@@ -0,0 +1,17 @@
+import { _getMarkFolderItems } from "./markFolderItems.selector"
+
+describe("markFolderItemsSelector's _getMarkFolderItems", () => {
+	it("should return all colors as unmarked if no node is given", () => {
+		expect(_getMarkFolderItems(null, ["#000000", "#ffffff"], [])).toEqual([
+			{ color: "#000000", isMarked: false },
+			{ color: "#ffffff", isMarked: false }
+		])
+	})
+
+	it("should recognized a marked folder", () => {
+		expect(_getMarkFolderItems({ path: "/root" }, ["#000000", "#ffffff"], [{ color: "#000000", path: "/root" }])).toEqual([
+			{ color: "#000000", isMarked: true },
+			{ color: "#ffffff", isMarked: false }
+		])
+	})
+})

package/app/codeCharta/ui/nodeContextMenu/markFolderRow/selectors/markFolderItems.selector.ts

@@ -0,0 +1,29 @@
+import { MarkedPackage, Node } from "../../../../codeCharta.model"
+import { createSelector } from "../../../../state/angular-redux/createSelector"
+import { mapColorsSelector } from "../../../../state/store/appSettings/mapColors/mapColors.selector"
+import { markedPackagesSelector } from "../../../../state/store/fileSettings/markedPackages/markedPackages.selector"
+import { findIndexOfMarkedPackageOrParent } from "../../../../state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent"
+import { CcState } from "../../../../state/store/store"
+import { rightClickedNodeSelector } from "./rightClickedNode.selector"
+
+export type MarkFolderItem = {
+	color: string
+	isMarked: boolean
+}
+
+const markingColorsSelector = createSelector([mapColorsSelector], mapColors => mapColors.markingColors)
+
+export const _getMarkFolderItems = (node: Pick<Node, "path">, 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(
+	[rightClickedNodeSelector, markingColorsSelector, markedPackagesSelector],
+	_getMarkFolderItems
+)

package/app/codeCharta/ui/nodeContextMenu/markFolderRow/selectors/rightClickedNode.selector.spec.ts

@@ -0,0 +1,15 @@
+import { CodeMapBuilding } from "../../../codeMap/rendering/codeMapBuilding"
+import { _getNode } from "./rightClickedNode.selector"
+
+describe("rightClickedNodeSelector's _getNode", () => {
+	it("should return null when no building was right clicked on", () => {
+		expect(_getNode(new Map(), null)).toBe(null)
+	})
+
+	it("should return node", () => {
+		const node = { id: 1 }
+		const codeMapBuilding = { node } as CodeMapBuilding
+		const idToBuilding = new Map([[1, codeMapBuilding]])
+		expect(_getNode(idToBuilding, { nodeId: 1 })).toBe(node)
+	})
+})

package/app/codeCharta/ui/nodeContextMenu/markFolderRow/selectors/rightClickedNode.selector.ts

@@ -0,0 +1,9 @@
+import { createSelector } from "../../../../state/angular-redux/createSelector"
+import { rightClickedNodeDataSelector } from "../../../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
+import { idToBuildingSelector } from "../../../../state/store/lookUp/idToBuilding/idToBuilding.selector"
+import { CodeMapBuilding } from "../../../codeMap/rendering/codeMapBuilding"
+
+export const _getNode = (idToBuilding: Map<number, CodeMapBuilding>, rightClickedNodeData: { nodeId: number }) =>
+	rightClickedNodeData !== null ? idToBuilding.get(rightClickedNodeData.nodeId).node : null
+
+export const rightClickedNodeSelector = createSelector([idToBuildingSelector, rightClickedNodeDataSelector], _getNode)

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

@@ -1,19 +1,6 @@
-<md-card id="codemap-context-menu" ng-show="$ctrl._viewModel.showNodeContextMenu">
+<md-card id="codemap-context-menu" ng-show="$ctrl.rightClickedNodeData !== null">
 	<div ng-if="$ctrl.nodeIsFolder()">
-		<div layout="row" layout-align="center center">
-			<md-button
-				ng-repeat="color in $ctrl._viewModel.markingColors track by $index"
-				ng-style="{ 'background-color': '{{ color }}' }"
-				ng-disabled="primary === color && !isPrimary"
-				ng-click="$ctrl.clickColor(color)"
-				class="colorButton"
-				title="Colorize folder"
-			>
-				<i class="fa fa-times" ng-if="$ctrl.isNodeOrParentMarked(color)"></i>
-			</md-button>
-
-			<cc-mark-folder-color-picker [mark-folder]="$ctrl.markFolder"></cc-mark-folder-color-picker>
-		</div>
+		<cc-mark-folder-row></cc-mark-folder-row>
 		<md-divider></md-divider>
 	</div>
 

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

@@ -36,19 +36,4 @@ node-context-menu-component {
 			margin-bottom: 0;
 		}
 	}
-
-	.colorButton {
-		width: 32px !important;
-		height: 32px !important;
-		min-width: 32px !important;
-		min-height: 32px !important;
-
-		i {
-			font-size: 25px;
-			margin-left: 0;
-			margin-top: 3px;
-			color: red;
-			text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
-		}
-	}
 }

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

@@ -9,13 +9,11 @@ import {
 	CONSTANT_HIGHLIGHT,
 	TEST_DELTA_MAP_A,
 	VALID_FILE_NODE_WITH_ID,
-	VALID_NODE_WITH_PATH,
-	withMockedEventMethods
+	VALID_NODE_WITH_PATH
 } from "../../util/dataMocks"
 import { CodeMapPreRenderService } from "../codeMap/codeMap.preRender.service"
 import { StoreService } from "../../state/store.service"
-import { setMarkedPackages } from "../../state/store/fileSettings/markedPackages/markedPackages.actions"
-import { BlacklistType, MarkedPackage, NodeType } from "../../codeCharta.model"
+import { BlacklistType, NodeType } from "../../codeCharta.model"
 import { addBlacklistItem } from "../../state/store/fileSettings/blacklist/blacklist.actions"
 import { NodeDecorator } from "../../util/nodeDecorator"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
@@ -92,38 +90,6 @@ describe("nodeContextMenuController", () => {
 		})()
 	}
 
-	describe("constructor", () => {
-		it("should subscribe to 'show-node-context-menu' events", () => {
-			NodeContextMenuController.subscribeToShowNodeContextMenu = jest.fn()
-
-			rebuildController()
-
-			expect(NodeContextMenuController.subscribeToShowNodeContextMenu).toHaveBeenCalledWith($rootScope, nodeContextMenuController)
-		})
-
-		it("should broadcast 'show-node-context-menu' when 'show' method is called", () => {
-			withMockedEventMethods($rootScope)
-			NodeContextMenuController.broadcastShowEvent($rootScope, "somepath", "sometype", 42, 24)
-
-			expect($rootScope.$broadcast).toHaveBeenCalledWith("show-node-context-menu", {
-				path: "somepath",
-				type: "sometype",
-				x: 42,
-				y: 24
-			})
-		})
-
-		it("should subscribe to 'on-building-right-clicked' events", () => {
-			const documentAddEventListenerSpy = jest.spyOn(document, "addEventListener")
-			rebuildController()
-
-			expect(documentAddEventListenerSpy).toHaveBeenCalledWith(
-				"building-right-clicked",
-				nodeContextMenuController.onBuildingRightClicked
-			)
-		})
-	})
-
 	describe("onShowNodeContextMenu", () => {
 		let mockedWheelTargetElement
 		beforeEach(() => {
@@ -137,10 +103,9 @@ describe("nodeContextMenuController", () => {
 		})
 
 		it("should set the correct building after some timeout", () => {
-			nodeContextMenuController.onShowNodeContextMenu("/root", NodeType.FOLDER, 42, 24)
+			nodeContextMenuController.showNodeContextMenu("/root", NodeType.FOLDER, 42, 24)
 
 			expect(nodeContextMenuController["_viewModel"].codeMapNode).toEqual(TEST_DELTA_MAP_A.map)
-			expect(nodeContextMenuController["_viewModel"].showNodeContextMenu).toBe(true)
 			expect(nodeContextMenuController.calculatePosition).toHaveBeenCalledWith(42, 24)
 			expect(nodeContextMenuController.setPosition).toHaveBeenCalledTimes(1)
 			expect(nodeContextMenuController.setPosition).toBeCalledWith(1, 2)
@@ -153,14 +118,14 @@ describe("nodeContextMenuController", () => {
 		})
 
 		it("should not shorten the path if it has no sub paths", () => {
-			nodeContextMenuController.onShowNodeContextMenu("/root", NodeType.FOLDER, 42, 24)
+			nodeContextMenuController.showNodeContextMenu("/root", NodeType.FOLDER, 42, 24)
 
 			expect(nodeContextMenuController["_viewModel"].nodePath).toEqual(TEST_DELTA_MAP_A.map.path)
 			expect(nodeContextMenuController["_viewModel"].lastPartOfNodePath).toBe(TEST_DELTA_MAP_A.map.path)
 		})
 
 		it("should set the complete and shortened node path", () => {
-			nodeContextMenuController.onShowNodeContextMenu("/root/big leaf", NodeType.FILE, 521, 588)
+			nodeContextMenuController.showNodeContextMenu("/root/big leaf", NodeType.FILE, 521, 588)
 			const nodePath = TEST_DELTA_MAP_A.map.children[0].path
 
 			expect(nodeContextMenuController["_viewModel"].nodePath).toEqual(nodePath)
@@ -170,7 +135,7 @@ describe("nodeContextMenuController", () => {
 		it("should remove all listener on hide", () => {
 			const documentRemoveEventListenerSpy = jest.spyOn(document.body, "removeEventListener")
 
-			nodeContextMenuController.onHideNodeContextMenu()
+			nodeContextMenuController.hideNodeContextMenu()
 
 			expect(documentRemoveEventListenerSpy).toHaveBeenCalledWith(
 				"click",
@@ -293,80 +258,6 @@ describe("nodeContextMenuController", () => {
 		})
 	})
 
-	describe("clickColor", () => {
-		it("should call unmarkFolder, if current folder is marked with color ", () => {
-			nodeContextMenuController.isNodeOrParentMarked = jest.fn().mockReturnValue(true)
-			nodeContextMenuController.unmarkFolder = jest.fn()
-
-			nodeContextMenuController.clickColor("color")
-
-			expect(nodeContextMenuController.isNodeOrParentMarked).toHaveBeenCalledWith("color")
-			expect(nodeContextMenuController.unmarkFolder).toHaveBeenCalled()
-		})
-
-		it("should call markFolder, if current folder is not marked with color ", () => {
-			nodeContextMenuController.isNodeOrParentMarked = jest.fn().mockReturnValue(false)
-			nodeContextMenuController.markFolder = jest.fn()
-
-			nodeContextMenuController.clickColor("color")
-
-			expect(nodeContextMenuController.isNodeOrParentMarked).toHaveBeenCalledWith("color")
-			expect(nodeContextMenuController.markFolder).toHaveBeenCalled()
-		})
-	})
-
-	describe("currentFolderIsMarkedWithColor", () => {
-		it("should return false, if color is undefined", () => {
-			const result = nodeContextMenuController.isNodeOrParentMarked()
-
-			expect(result).toBeFalsy()
-		})
-
-		it("should return false, if color is null", () => {
-			const result = nodeContextMenuController.isNodeOrParentMarked(null)
-
-			expect(result).toBeFalsy()
-		})
-
-		it("should return false, if _viewModel.contextMenuBuilding is undefined", () => {
-			nodeContextMenuController["_viewModel"].codeMapNode = undefined
-
-			const result = nodeContextMenuController.isNodeOrParentMarked("color")
-
-			expect(result).toBeFalsy()
-		})
-
-		it("should return false, if _viewModel.contextMenuBuilding is null", () => {
-			nodeContextMenuController["_viewModel"].codeMapNode = null
-
-			const result = nodeContextMenuController.isNodeOrParentMarked("color")
-
-			expect(result).toBeFalsy()
-		})
-
-		it("should return true, if package is marked and matches the color", () => {
-			const markedPackages: MarkedPackage[] = [{ path: "/root", color: "color" }]
-			storeService.dispatch(setMarkedPackages(markedPackages))
-
-			nodeContextMenuController["_viewModel"].codeMapNode = VALID_NODE_WITH_PATH
-
-			const result = nodeContextMenuController.isNodeOrParentMarked("color")
-
-			expect(result).toBeTruthy()
-		})
-
-		it("should return false, if package is not marked and doesn't match the color of parent folder", () => {
-			const markedPackages: MarkedPackage[] = [{ path: "/root", color: "color" }]
-			storeService.dispatch(setMarkedPackages(markedPackages))
-
-			nodeContextMenuController["_viewModel"].codeMapNode = VALID_NODE_WITH_PATH
-
-			const result = nodeContextMenuController.isNodeOrParentMarked("another color")
-
-			expect(result).toBeFalsy()
-		})
-	})
-
 	describe("excludeNode", () => {
 		beforeEach(() => {
 			nodeContextMenuController["_viewModel"].codeMapNode = VALID_NODE_WITH_PATH.children[1]
@@ -442,9 +333,9 @@ describe("nodeContextMenuController", () => {
 
 	describe("onBodyLeftClickHideNodeContextMenu", () => {
 		it("should not hide if a click on color-picker tricker occurs", () => {
-			const broadcastHideEventSpy = jest.spyOn(NodeContextMenuController, "broadcastHideEvent")
+			const broadcastHideEventSpy = jest.spyOn(nodeContextMenuController, "hideNodeContextMenu")
 			const mockedMouseEvent: any = {
-				composedPath: () => [{ nodeName: "CC-MARK-FOLDER-COLOR-PICKER" }]
+				composedPath: () => [{ nodeName: "CC-COLOR-PICKER" }]
 			}
 			nodeContextMenuController.onBodyLeftClickHideNodeContextMenu(mockedMouseEvent)
 
@@ -452,7 +343,7 @@ describe("nodeContextMenuController", () => {
 		})
 
 		it("should not hide if a click within color-picker occurs", () => {
-			const broadcastHideEventSpy = jest.spyOn(NodeContextMenuController, "broadcastHideEvent")
+			const broadcastHideEventSpy = jest.spyOn(nodeContextMenuController, "hideNodeContextMenu")
 			const mockedMouseEvent: any = {
 				composedPath: () => [{ nodeName: "COLOR-CHROME" }]
 			}
@@ -462,7 +353,7 @@ describe("nodeContextMenuController", () => {
 		})
 
 		it("should hide if clicked somewhere but not within the color-picker", () => {
-			const broadcastHideEventSpy = jest.spyOn(NodeContextMenuController, "broadcastHideEvent")
+			const broadcastHideEventSpy = jest.spyOn(nodeContextMenuController, "hideNodeContextMenu")
 			const mockedMouseEvent: any = {
 				composedPath: () => [{ nodeName: "DIV" }]
 			}

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

@@ -1,47 +1,35 @@
 import "./nodeContextMenu.component.scss"
 import angular, { IRootScopeService } from "angular"
-import { BlacklistItem, BlacklistType, CodeMapNode, MapColors, NodeType } from "../../codeCharta.model"
+import { BlacklistItem, BlacklistType, CodeMapNode, NodeType } from "../../codeCharta.model"
 import { CodeMapPreRenderService } from "../codeMap/codeMap.preRender.service"
 import { StoreService } from "../../state/store.service"
 import { addBlacklistItem, removeBlacklistItem } from "../../state/store/fileSettings/blacklist/blacklist.actions"
 import { CodeMapBuilding } from "../codeMap/rendering/codeMapBuilding"
-import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service"
-import { getCodeMapNodeFromPath } from "../../util/codeMapHelper"
+import { getCodeMapNodeFromPath, isLeaf } from "../../util/codeMapHelper"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
 import { DialogService } from "../dialog/dialog.service"
 import { BlacklistService } from "../../state/store/fileSettings/blacklist/blacklist.service"
 import { ERROR_MESSAGES } from "../../util/fileValidator"
-import type { BUILDING_RIGHT_CLICKED_EVENT_TYPE } from "../../../../src/globals"
-import { findIndexOfMarkedPackageOrParent } from "../../state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent"
-import { markPackages, unmarkPackage } from "../../state/store/fileSettings/markedPackages/markedPackages.actions"
+import { Store } from "../../state/store/store"
+import { rightClickedNodeDataSelector } from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.selector"
+import {
+	RightClickedNodeData,
+	setRightClickedNodeData
+} from "../../state/store/appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export enum ClickType {
 	RightClick = 2
 }
 
-export interface ShowNodeContextMenuSubscriber {
-	onShowNodeContextMenu(path: string, type: string, x: number, y: number)
-}
-
-export interface HideNodeContextMenuSubscriber {
-	onHideNodeContextMenu()
-}
-
-export class NodeContextMenuController implements ShowNodeContextMenuSubscriber, HideNodeContextMenuSubscriber, MapColorsSubscriber {
-	private static SHOW_NODE_CONTEXT_MENU_EVENT = "show-node-context-menu"
-	private static HIDE_NODE_CONTEXT_MENU_EVENT = "hide-node-context-menu"
-	private static instance: NodeContextMenuController
+export class NodeContextMenuController {
+	private rightClickedNodeData: RightClickedNodeData
 
 	private _viewModel: {
 		codeMapNode: CodeMapNode
-		showNodeContextMenu: boolean
-		markingColors: string[]
 		nodePath: string
 		lastPartOfNodePath: string
 	} = {
 		codeMapNode: null,
-		showNodeContextMenu: false,
-		markingColors: null,
 		nodePath: "",
 		lastPartOfNodePath: ""
 	}
@@ -57,35 +45,38 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 		private blacklistService: BlacklistService
 	) {
 		"ngInject"
-		NodeContextMenuController.instance = this
-		MapColorsService.subscribe(this.$rootScope, this)
-		document.addEventListener("building-right-clicked", this.onBuildingRightClicked)
-		NodeContextMenuController.subscribeToShowNodeContextMenu(this.$rootScope, this)
-		NodeContextMenuController.subscribeToHideNodeContextMenu(this.$rootScope, this)
-	}
-
-	onMapColorsChanged(mapColors: MapColors) {
-		this._viewModel.markingColors = mapColors.markingColors
-	}
-
-	onBuildingRightClicked = ({ detail: { building, x, y } }: CustomEvent<BUILDING_RIGHT_CLICKED_EVENT_TYPE>) => {
-		const nodeType = building.node.isLeaf ? NodeType.FILE : NodeType.FOLDER
-		this.onShowNodeContextMenu(building.node.path, nodeType, x, y)
+		Store.store.subscribe(() => {
+			const state = Store.store.getState()
+			const rightClickedNodeData = rightClickedNodeDataSelector(state)
+			if (this.rightClickedNodeData === rightClickedNodeData) return
+
+			this.rightClickedNodeData = rightClickedNodeData
+			if (rightClickedNodeData === null) {
+				this.hideNodeContextMenu()
+			} else {
+				const rightClickedNode = state.lookUp.idToNode.get(rightClickedNodeData.nodeId)
+				const nodeType = isLeaf(rightClickedNode) ? NodeType.FILE : NodeType.FOLDER
+				this.showNodeContextMenu(
+					rightClickedNode.path,
+					nodeType,
+					rightClickedNodeData.xPositionOfRightClickEvent,
+					rightClickedNodeData.yPositionOfRightClickEvent
+				)
+			}
+		})
 	}
 
-	onShowNodeContextMenu(path: string, nodeType: string, mouseX: number, mouseY: number) {
+	showNodeContextMenu(path: string, nodeType: string, mouseX: number, mouseY: number) {
 		this._viewModel.codeMapNode = getCodeMapNodeFromPath(path, nodeType, this.codeMapPreRenderService.getRenderMap())
 		this._viewModel.nodePath = path
 		this._viewModel.lastPartOfNodePath = `${path.lastIndexOf("/") === 0 ? "" : "..."}${path.slice(path.lastIndexOf("/"))}`
 
-		this._viewModel.showNodeContextMenu = true
-
 		const { x, y } = this.calculatePosition(mouseX, mouseY)
 		this.setPosition(x, y)
 
 		// Add event listeners, so that opened node context menu can be closed again later
 		// when clicking (left or right button) or using the mouse wheel on the body element.
-		document.body.addEventListener("click", this.onBodyLeftClickHideNodeContextMenu, true)
+		document.body.addEventListener("click", this.onBodyLeftClickHideNodeContextMenu, false)
 		document.body.addEventListener("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
 		document.getElementById("codeMap").addEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
 	}
@@ -94,7 +85,7 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 		if (this.isEventFromColorPicker(mouseEvent)) return
 
 		// Just close node context menu, if you click anywhere on the map.
-		this.hideContextMenu()
+		this.hideNodeContextMenu()
 	}
 
 	onBodyRightClickHideNodeContextMenu = event => {
@@ -102,23 +93,19 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 		// Otherwise, if mouseup would be used and you would move the map with keeping the right button pressed,
 		// the menu would not be closed.
 		if (event.button === ClickType.RightClick) {
-			this.hideContextMenu()
+			this.hideNodeContextMenu()
 		}
 	}
 
 	onMapWheelHideNodeContextMenu = () => {
 		// If you zoom in and out the map, the node context menu should be closed.
-		this.hideContextMenu()
+		this.hideNodeContextMenu()
 	}
 
-	hideContextMenu = () => {
-		NodeContextMenuController.broadcastHideEvent(this.$rootScope)
-	}
-
-	onHideNodeContextMenu() {
-		this._viewModel.showNodeContextMenu = false
+	hideNodeContextMenu = () => {
+		this.storeService.dispatch(setRightClickedNodeData(null))
 
-		// remove event listeners registered in onShowNodeContextMenu
+		// remove event listeners registered in showNodeContextMenu
 		document.body.removeEventListener("click", this.onBodyLeftClickHideNodeContextMenu, true)
 		document.body.removeEventListener("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
 		document.getElementById("codeMap").removeEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
@@ -161,35 +148,12 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 
 	addNodeToConstantHighlight() {
 		this.threeSceneService.addNodeAndChildrenToConstantHighlight(this._viewModel.codeMapNode)
-		this.onHideNodeContextMenu()
+		this.hideNodeContextMenu()
 	}
 
 	removeNodeFromConstantHighlight() {
 		this.threeSceneService.removeNodeAndChildrenFromConstantHighlight(this._viewModel.codeMapNode)
-		this.onHideNodeContextMenu()
-	}
-
-	clickColor(color: string) {
-		if (this.isNodeOrParentMarked(color)) {
-			this.unmarkFolder()
-		} else {
-			this.markFolder(color)
-		}
-	}
-
-	markFolder = (color: string) => {
-		this.storeService.dispatch(
-			markPackages([
-				{
-					path: this._viewModel.codeMapNode.path,
-					color
-				}
-			])
-		)
-	}
-
-	unmarkFolder() {
-		this.storeService.dispatch(unmarkPackage(this._viewModel.codeMapNode))
+		this.hideNodeContextMenu()
 	}
 
 	calculatePosition(mouseX: number, mouseY: number) {
@@ -206,39 +170,9 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 		angular.element(this.$element[0].children[0]).css("left", `${x}px`)
 	}
 
-	isNodeOrParentMarked(color?: string) {
-		if (!color || !this._viewModel.codeMapNode) {
-			return false
-		}
-
-		if (this.isNodeMarked()) {
-			return this.packageMatchesColor(color)
-		}
-		return this.packageMatchesColorOfParentMP(color)
-	}
-
 	private isEventFromColorPicker(mouseEvent: MouseEvent) {
 		const elements = mouseEvent.composedPath() as Node[]
-		return elements.some(element => element?.nodeName === "CC-MARK-FOLDER-COLOR-PICKER" || element?.nodeName === "COLOR-CHROME")
-	}
-
-	private isNodeMarked() {
-		return this.storeService.getState().fileSettings.markedPackages.some(mp => mp.path === this._viewModel.codeMapNode.path)
-	}
-
-	private packageMatchesColor(color: string) {
-		return this.storeService
-			.getState()
-			.fileSettings.markedPackages.some(mp => mp.path === this._viewModel.codeMapNode.path && mp.color === color)
-	}
-
-	private packageMatchesColorOfParentMP(color: string) {
-		const { markedPackages } = this.storeService.getState().fileSettings
-		const index = findIndexOfMarkedPackageOrParent(markedPackages, this._viewModel.codeMapNode.path)
-		if (index === -1) {
-			return false
-		}
-		return this.storeService.getState().fileSettings.markedPackages[index].color === color
+		return elements.some(element => element?.nodeName === "CC-COLOR-PICKER" || element?.nodeName === "COLOR-CHROME")
 	}
 
 	isNodeConstantlyHighlighted() {
@@ -255,34 +189,6 @@ export class NodeContextMenuController implements ShowNodeContextMenuSubscriber,
 	nodeIsFolder() {
 		return this._viewModel.codeMapNode?.children?.length > 0
 	}
-
-	static broadcastShowEvent($rootScope, path: string, type: string, x, y) {
-		const rootScope = $rootScope || NodeContextMenuController.instance.$rootScope
-		rootScope.$broadcast(NodeContextMenuController.SHOW_NODE_CONTEXT_MENU_EVENT, {
-			path,
-			type,
-			x,
-			y
-		})
-	}
-
-	static broadcastHideEvent($rootScope?: IRootScopeService) {
-		const rootScope = $rootScope || NodeContextMenuController.instance.$rootScope
-		rootScope.$broadcast(NodeContextMenuController.HIDE_NODE_CONTEXT_MENU_EVENT)
-	}
-
-	static subscribeToShowNodeContextMenu($rootScope: IRootScopeService, subscriber: ShowNodeContextMenuSubscriber) {
-		$rootScope.$on(NodeContextMenuController.SHOW_NODE_CONTEXT_MENU_EVENT, (_event, data) => {
-			subscriber.onShowNodeContextMenu(data.path, data.type, data.x, data.y)
-		})
-	}
-
-	static subscribeToHideNodeContextMenu($rootScope: IRootScopeService, subscriber: HideNodeContextMenuSubscriber) {
-		const rootScope = $rootScope || NodeContextMenuController.instance.$rootScope
-		rootScope.$on(NodeContextMenuController.HIDE_NODE_CONTEXT_MENU_EVENT, () => {
-			subscriber.onHideNodeContextMenu()
-		})
-	}
 }
 
 export const nodeContextMenuComponent = {

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

@@ -5,11 +5,11 @@ import angular from "angular"
 import { downgradeComponent } from "@angular/upgrade/static"
 
 import { nodeContextMenuComponent } from "./nodeContextMenu.component"
-import { MarkFolderColorPickerComponent } from "./markFolderColorPicker/markFolderColorPicker.component"
 import { FocusButtonsComponent } from "./focusButtons/focusButtons.component"
+import { MarkFolderRowComponent } from "./markFolderRow/markFolderRow.component"
 
 angular
 	.module("app.codeCharta.ui.nodeContextMenu", ["app.codeCharta.state", "app.codeCharta.ui"])
 	.component(nodeContextMenuComponent.selector, nodeContextMenuComponent)
-	.directive("ccMarkFolderColorPicker", downgradeComponent({ component: MarkFolderColorPickerComponent }))
+	.directive("ccMarkFolderRow", downgradeComponent({ component: MarkFolderRowComponent }))
 	.directive("ccFocusButtons", downgradeComponent({ component: FocusButtonsComponent }))

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

@@ -14,7 +14,7 @@
 		<div class="section-header">
 			<custom-configs-component></custom-configs-component>
 		</div>
-		<span class="section-title no-hover">Map Configurations</span>
+		<span class="section-title no-hover">Custom Views</span>
 	</div>
 </md-card>