codecharta-visualization 1.86.0 → 1.87.0

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

@@ -1,19 +1,19 @@
 import "./nodeContextMenu.component.scss"
 import angular, { IRootScopeService } from "angular"
-import { CodeMapActionsService } from "../codeMap/codeMap.actions.service"
 import { BlacklistItem, BlacklistType, CodeMapNode, MapColors, 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 { focusNode } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
 import { CodeMapBuilding } from "../codeMap/rendering/codeMapBuilding"
-import { BuildingRightClickedEventSubscriber, CodeMapMouseEventService } from "../codeMap/codeMap.mouseEvent.service"
 import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service"
 import { getCodeMapNodeFromPath } 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"
 
 export enum ClickType {
 	RightClick = 2
@@ -27,9 +27,7 @@ export interface HideNodeContextMenuSubscriber {
 	onHideNodeContextMenu()
 }
 
-export class NodeContextMenuController
-	implements BuildingRightClickedEventSubscriber, ShowNodeContextMenuSubscriber, HideNodeContextMenuSubscriber, MapColorsSubscriber
-{
+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
@@ -40,16 +38,12 @@ export class NodeContextMenuController
 		markingColors: string[]
 		nodePath: string
 		lastPartOfNodePath: string
-		isNodeFocused: boolean
-		isParentFocused: boolean
 	} = {
 		codeMapNode: null,
 		showNodeContextMenu: false,
 		markingColors: null,
 		nodePath: "",
-		lastPartOfNodePath: "",
-		isNodeFocused: false,
-		isParentFocused: false
+		lastPartOfNodePath: ""
 	}
 
 	constructor(
@@ -57,7 +51,6 @@ export class NodeContextMenuController
 		private $window,
 		public $rootScope: IRootScopeService,
 		private storeService: StoreService,
-		private codeMapActionsService: CodeMapActionsService,
 		private codeMapPreRenderService: CodeMapPreRenderService,
 		private threeSceneService: ThreeSceneService,
 		private dialogService: DialogService,
@@ -66,7 +59,7 @@ export class NodeContextMenuController
 		"ngInject"
 		NodeContextMenuController.instance = this
 		MapColorsService.subscribe(this.$rootScope, this)
-		CodeMapMouseEventService.subscribeToBuildingRightClickedEvents(this.$rootScope, this)
+		document.addEventListener("building-right-clicked", this.onBuildingRightClicked)
 		NodeContextMenuController.subscribeToShowNodeContextMenu(this.$rootScope, this)
 		NodeContextMenuController.subscribeToHideNodeContextMenu(this.$rootScope, this)
 	}
@@ -75,7 +68,7 @@ export class NodeContextMenuController
 		this._viewModel.markingColors = mapColors.markingColors
 	}
 
-	onBuildingRightClicked(building: CodeMapBuilding, x: number, y: number) {
+	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)
 	}
@@ -85,18 +78,13 @@ export class NodeContextMenuController
 		this._viewModel.nodePath = path
 		this._viewModel.lastPartOfNodePath = `${path.lastIndexOf("/") === 0 ? "" : "..."}${path.slice(path.lastIndexOf("/"))}`
 
-		const focusedNodePath = this.storeService.getState().dynamicSettings.focusedNodePath
-		this._viewModel.isNodeFocused = path === focusedNodePath
-		this._viewModel.isParentFocused = path.startsWith(focusedNodePath) && path !== focusedNodePath
-
 		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.
+		// 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("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
 		document.getElementById("codeMap").addEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
@@ -106,12 +94,7 @@ export class NodeContextMenuController
 		if (this.isEventFromColorPicker(mouseEvent)) return
 
 		// Just close node context menu, if you click anywhere on the map.
-		NodeContextMenuController.broadcastHideEvent(this.$rootScope)
-
-		// The listener is added when showing the node context menu.
-		// Thus, remove the listener when clicking the body element with the left or right button
-		// to fire hide events only (once) when it is really necessary.
-		document.body.removeEventListener("click", this.onBodyLeftClickHideNodeContextMenu, true)
+		this.hideContextMenu()
 	}
 
 	onBodyRightClickHideNodeContextMenu = event => {
@@ -119,31 +102,26 @@ export class NodeContextMenuController
 		// 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) {
-			NodeContextMenuController.broadcastHideEvent(this.$rootScope)
+			this.hideContextMenu()
 		}
-
-		// The listener is added when showing the node context menu.
-		// Thus, remove the listener when clicking the body element with the left or right button
-		// to fire hide events only (once) when it is really necessary.
-		document.body.removeEventListener("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
 	}
 
 	onMapWheelHideNodeContextMenu = () => {
 		// If you zoom in and out the map, the node context menu should be closed.
-		NodeContextMenuController.broadcastHideEvent(this.$rootScope)
+		this.hideContextMenu()
+	}
 
-		// The listener is added when showing the node context menu.
-		// Thus, remove the listener when using the mouse wheel on the body element
-		// to fire hide events only (once) when it is really necessary.
-		document.getElementById("codeMap").removeEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
+	hideContextMenu = () => {
+		NodeContextMenuController.broadcastHideEvent(this.$rootScope)
 	}
 
 	onHideNodeContextMenu() {
 		this._viewModel.showNodeContextMenu = false
-	}
 
-	focusNode() {
-		this.storeService.dispatch(focusNode(this._viewModel.codeMapNode.path))
+		// remove event listeners registered in onShowNodeContextMenu
+		document.body.removeEventListener("click", this.onBodyLeftClickHideNodeContextMenu, true)
+		document.body.removeEventListener("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
+		document.getElementById("codeMap").removeEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
 	}
 
 	flattenNode() {
@@ -200,11 +178,18 @@ export class NodeContextMenuController
 	}
 
 	markFolder = (color: string) => {
-		this.codeMapActionsService.markFolder(this._viewModel.codeMapNode, color)
+		this.storeService.dispatch(
+			markPackages([
+				{
+					path: this._viewModel.codeMapNode.path,
+					color
+				}
+			])
+		)
 	}
 
 	unmarkFolder() {
-		this.codeMapActionsService.unmarkFolder(this._viewModel.codeMapNode)
+		this.storeService.dispatch(unmarkPackage(this._viewModel.codeMapNode))
 	}
 
 	calculatePosition(mouseX: number, mouseY: number) {
@@ -248,7 +233,8 @@ export class NodeContextMenuController
 	}
 
 	private packageMatchesColorOfParentMP(color: string) {
-		const index = this.codeMapActionsService.getParentMarkedPackageIndex(this._viewModel.codeMapNode.path)
+		const { markedPackages } = this.storeService.getState().fileSettings
+		const index = findIndexOfMarkedPackageOrParent(markedPackages, this._viewModel.codeMapNode.path)
 		if (index === -1) {
 			return false
 		}
@@ -266,18 +252,6 @@ export class NodeContextMenuController
 		return false
 	}
 
-	isNodeOrParentFocused() {
-		const { focusedNodePath } = this.storeService.getState().dynamicSettings
-		return Boolean(focusedNodePath && this._viewModel.codeMapNode?.path.startsWith(focusedNodePath))
-	}
-
-	isNodeFocused() {
-		if (this._viewModel.codeMapNode) {
-			return this._viewModel.codeMapNode.path === this.storeService.getState().dynamicSettings.focusedNodePath
-		}
-		return false
-	}
-
 	nodeIsFolder() {
 		return this._viewModel.codeMapNode?.children?.length > 0
 	}

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

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

package/app/codeCharta/ui/ui.ts

@@ -3,7 +3,6 @@ import { downgradeComponent } from "@angular/upgrade/static"
 
 import "./artificialIntelligence/artificialIntelligence.module"
 import "./customConfigs/customConfigs.module"
-import "./unfocusButton/unfocusButton.module"
 import "./metricValueHovered/metricValueHovered.module"
 import "./downloadButton/downloadButton.module"
 import "./screenshotButton/screenshotButton.module"
@@ -51,7 +50,6 @@ angular
 	.module("app.codeCharta.ui", [
 		"app.codeCharta.ui.artificialIntelligence",
 		"app.codeCharta.ui.customConfigs",
-		"app.codeCharta.ui.unfocusButton",
 		"app.codeCharta.ui.metricValueHovered",
 		"app.codeCharta.ui.downloadButton",
 		"app.codeCharta.ui.screenshotButton",

package/app/codeCharta/util/algorithm/streetLayout/strip/strip.ts

@@ -10,7 +10,7 @@ export default abstract class Strip {
 		this.nodes = nodes
 	}
 
-	public abstract layout(
+	abstract layout(
 		rect: Rectangle,
 		rootSize: number,
 		metricName: string,
@@ -19,7 +19,7 @@ export default abstract class Strip {
 		order?: number
 	): CodeMapNode[]
 
-	public abstract worstAspectRatio(nodes: CodeMapNode[], rect: Rectangle, rootSize: number, metricName: string): number
+	protected abstract worstAspectRatio(nodes: CodeMapNode[], rect: Rectangle, rootSize: number, metricName: string): number
 
 	totalScaledSize(nodes: CodeMapNode[], metricName: string, rootSize: number, rootArea: number): number {
 		return nodes.reduce((total, n) => total + this.scaledSize(n, rootSize, rootArea, metricName), 0)

package/app/codeCharta/util/algorithm/streetLayout/treeMap.ts

@@ -11,7 +11,7 @@ export default abstract class Treemap extends BoundingBox {
 		super(rootNode)
 	}
 
-	public abstract layout(margin: number, origin: Vector2): CodeMapNode[]
+	abstract layout(margin: number, origin: Vector2): CodeMapNode[]
 
 	calculateDimension(metricName: string): void {
 		this.metricName = metricName

package/app/codeCharta/util/algorithm/treeMapLayout/treeMapGenerator.spec.ts

@@ -34,7 +34,7 @@ describe("treeMapGenerator", () => {
 		codeMapNode = klona(VALID_NODE_WITH_PATH)
 		metricData = klona(METRIC_DATA)
 		isDeltaState = false
-		state.dynamicSettings.focusedNodePath = ""
+		state.dynamicSettings.focusedNodePath = []
 	}
 
 	describe("create Treemap nodes", () => {

package/app/codeCharta/util/algorithm/treeMapLayout/treeMapHelper.spec.ts

@@ -48,7 +48,7 @@ describe("TreeMapHelper", () => {
 			state.dynamicSettings.margin = 15
 			state.dynamicSettings.heightMetric = "theHeight"
 			state.appSettings.invertHeight = false
-			state.dynamicSettings.focusedNodePath = ""
+			state.dynamicSettings.focusedNodePath = []
 		})
 
 		function buildNode() {
@@ -117,7 +117,7 @@ describe("TreeMapHelper", () => {
 		})
 
 		it("should be visible if it's a children of the focused node path", () => {
-			state.dynamicSettings.focusedNodePath = "/root"
+			state.dynamicSettings.focusedNodePath = ["/root"]
 			expect(buildNode().visible).toBeTruthy()
 		})
 

package/app/codeCharta/util/algorithm/treeMapLayout/treeMapHelper.ts

@@ -144,7 +144,7 @@ export function isVisible(squaredNode: CodeMapNode, isNodeLeaf: boolean, state:
 	}
 
 	if (state.dynamicSettings.focusedNodePath.length > 0) {
-		return squaredNode.path.startsWith(state.dynamicSettings.focusedNodePath)
+		return squaredNode.path.startsWith(state.dynamicSettings.focusedNodePath[0])
 	}
 
 	return true

package/app/codeCharta/util/customConfigBuilder.ts

@@ -99,7 +99,7 @@ function initializeDynamicSettings(target: CustomConfig) {
 		colorMetric: "",
 		distributionMetric: "",
 		edgeMetric: "",
-		focusedNodePath: undefined,
+		focusedNodePath: [],
 		heightMetric: "",
 		margin: 0,
 		searchPattern: "",

package/app/codeCharta/util/dataMocks.ts

@@ -1745,7 +1745,7 @@ export const STATE: State = {
 		colorMetric: "mcc",
 		distributionMetric: "mcc",
 		edgeMetric: "pairingRate",
-		focusedNodePath: "/root/ParentLeaf",
+		focusedNodePath: ["/root/ParentLeaf"],
 		searchPattern: "",
 		margin: 48,
 		colorRange: {
@@ -1876,7 +1876,7 @@ export const DEFAULT_STATE: State = {
 	dynamicSettings: {
 		areaMetric: null,
 		colorMetric: null,
-		focusedNodePath: "",
+		focusedNodePath: [],
 		heightMetric: null,
 		distributionMetric: null,
 		edgeMetric: null,

package/app/codeCharta/util/fileExtensionCalculator.ts

@@ -97,7 +97,7 @@ export class FileExtensionCalculator {
 	static hashCode(fileExtension: string) {
 		let hash = 0
 		for (let index = 0; index < fileExtension.length; index++) {
-			hash = fileExtension.charCodeAt(index) + ((hash << 5) - hash)
+			hash = fileExtension.codePointAt(index) + ((hash << 5) - hash)
 		}
 		return hash
 	}