codecharta-visualization 1.86.0 → 1.89.0

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

@@ -1,318 +0,0 @@
-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"
-
-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 BuildingRightClickedEventSubscriber, 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
-
-	private _viewModel: {
-		codeMapNode: CodeMapNode
-		showNodeContextMenu: boolean
-		markingColors: string[]
-		nodePath: string
-		lastPartOfNodePath: string
-		isNodeFocused: boolean
-		isParentFocused: boolean
-	} = {
-		codeMapNode: null,
-		showNodeContextMenu: false,
-		markingColors: null,
-		nodePath: "",
-		lastPartOfNodePath: "",
-		isNodeFocused: false,
-		isParentFocused: false
-	}
-
-	constructor(
-		private $element: Element,
-		private $window,
-		public $rootScope: IRootScopeService,
-		private storeService: StoreService,
-		private codeMapActionsService: CodeMapActionsService,
-		private codeMapPreRenderService: CodeMapPreRenderService,
-		private threeSceneService: ThreeSceneService,
-		private dialogService: DialogService,
-		private blacklistService: BlacklistService
-	) {
-		"ngInject"
-		NodeContextMenuController.instance = this
-		MapColorsService.subscribe(this.$rootScope, this)
-		CodeMapMouseEventService.subscribeToBuildingRightClickedEvents(this.$rootScope, this)
-		NodeContextMenuController.subscribeToShowNodeContextMenu(this.$rootScope, this)
-		NodeContextMenuController.subscribeToHideNodeContextMenu(this.$rootScope, this)
-	}
-
-	onMapColorsChanged(mapColors: MapColors) {
-		this._viewModel.markingColors = mapColors.markingColors
-	}
-
-	onBuildingRightClicked(building: CodeMapBuilding, x: number, y: number) {
-		const nodeType = building.node.isLeaf ? NodeType.FILE : NodeType.FOLDER
-		this.onShowNodeContextMenu(building.node.path, nodeType, x, y)
-	}
-
-	onShowNodeContextMenu(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("/"))}`
-
-		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.
-		document.body.addEventListener("click", this.onBodyLeftClickHideNodeContextMenu, true)
-		document.body.addEventListener("mousedown", this.onBodyRightClickHideNodeContextMenu, true)
-		document.getElementById("codeMap").addEventListener("wheel", this.onMapWheelHideNodeContextMenu, true)
-	}
-
-	onBodyLeftClickHideNodeContextMenu = (mouseEvent: MouseEvent) => {
-		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)
-	}
-
-	onBodyRightClickHideNodeContextMenu = event => {
-		// On mouse down (right button), the menu must be hidden immediately.
-		// 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)
-		}
-
-		// 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)
-
-		// 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)
-	}
-
-	onHideNodeContextMenu() {
-		this._viewModel.showNodeContextMenu = false
-	}
-
-	focusNode() {
-		this.storeService.dispatch(focusNode(this._viewModel.codeMapNode.path))
-	}
-
-	flattenNode() {
-		const codeMapNode = this._viewModel.codeMapNode
-		const blacklistItem: BlacklistItem = {
-			path: codeMapNode.path,
-			type: BlacklistType.flatten,
-			nodeType: codeMapNode.type
-		}
-		this.storeService.dispatch(addBlacklistItem(blacklistItem))
-	}
-
-	showFlattenedNode() {
-		const codeMapNode = this._viewModel.codeMapNode
-		const blacklistItem: BlacklistItem = {
-			path: codeMapNode.path,
-			type: BlacklistType.flatten,
-			nodeType: codeMapNode.type
-		}
-		this.storeService.dispatch(removeBlacklistItem(blacklistItem))
-	}
-
-	excludeNode() {
-		const codeMapNode = this._viewModel.codeMapNode
-		const blacklistItem: BlacklistItem = {
-			path: codeMapNode.path,
-			type: BlacklistType.exclude,
-			nodeType: codeMapNode.type
-		}
-
-		if (this.blacklistService.resultsInEmptyMap([blacklistItem])) {
-			this.dialogService.showErrorDialog(ERROR_MESSAGES.blacklistError, "Blacklist Error")
-		} else {
-			this.storeService.dispatch(addBlacklistItem(blacklistItem))
-		}
-	}
-
-	addNodeToConstantHighlight() {
-		this.threeSceneService.addNodeAndChildrenToConstantHighlight(this._viewModel.codeMapNode)
-		this.onHideNodeContextMenu()
-	}
-
-	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.codeMapActionsService.markFolder(this._viewModel.codeMapNode, color)
-	}
-
-	unmarkFolder() {
-		this.codeMapActionsService.unmarkFolder(this._viewModel.codeMapNode)
-	}
-
-	calculatePosition(mouseX: number, mouseY: number) {
-		const width = this.$element[0].children[0].clientWidth
-		const height = this.$element[0].children[0].clientHeight
-		return {
-			x: Math.min(mouseX, this.$window.innerWidth - width),
-			y: Math.min(mouseY, this.$window.innerHeight - height)
-		}
-	}
-
-	setPosition(x: number, y: number) {
-		angular.element(this.$element[0].children[0]).css("top", `${y}px`)
-		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 index = this.codeMapActionsService.getParentMarkedPackageIndex(this._viewModel.codeMapNode.path)
-		if (index === -1) {
-			return false
-		}
-		return this.storeService.getState().fileSettings.markedPackages[index].color === color
-	}
-
-	isNodeConstantlyHighlighted() {
-		if (this._viewModel.codeMapNode) {
-			const { lookUp } = this.storeService.getState()
-			const codeMapBuilding: CodeMapBuilding = lookUp.idToBuilding.get(this._viewModel.codeMapNode.id)
-			if (codeMapBuilding) {
-				return this.threeSceneService.getConstantHighlight().has(codeMapBuilding.id)
-			}
-		}
-		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
-	}
-
-	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 = {
-	selector: "nodeContextMenuComponent",
-	template: require("./nodeContextMenu.component.html"),
-	controller: NodeContextMenuController
-}

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

@@ -1,13 +0,0 @@
-import "../../state/state.module"
-import "../../ui/ui"
-
-import angular from "angular"
-import { downgradeComponent } from "@angular/upgrade/static"
-
-import { nodeContextMenuComponent } from "./nodeContextMenu.component"
-import { MarkFolderColorPickerComponent } from "./markFolderColorPicker/markFolderColorPicker.component"
-
-angular
-	.module("app.codeCharta.ui.nodeContextMenu", ["app.codeCharta.state", "app.codeCharta.ui"])
-	.component(nodeContextMenuComponent.selector, nodeContextMenuComponent)
-	.directive("ccMarkFolderColorPicker", downgradeComponent({ component: MarkFolderColorPickerComponent }))

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

@@ -1,15 +0,0 @@
-<div layout="column">
-	<md-button aria-label="Remove Focus from node" ng-click="$ctrl.removeFocusedNode()" title="Show previous focused node"
-		><i class="fa fa-bullseye"></i>
-		<span ng-show="$ctrl.isParentFocused">Unfocus Parent</span>
-		<span ng-show="$ctrl.isNodeFocused">Unfocus</span>
-	</md-button>
-	<md-button
-		aria-label="Remove Focus from all nodes"
-		ng-click="$ctrl.removeFocusedNode(true)"
-		title="Show complete map"
-		ng-show="$ctrl._viewModel.focusedNodes.length > 1"
-		><i class="fa fa-bullseye"></i>
-		<span>Unfocus All</span>
-	</md-button>
-</div>

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

@@ -1,5 +0,0 @@
-unfocus-button-component {
-	.md-button {
-		margin-bottom: 0;
-	}
-}

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

@@ -1,106 +0,0 @@
-import "./unfocusButton.module"
-import { UnfocusButtonController } from "./unfocusButton.component"
-import { getService, instantiateModule } from "../../../../mocks/ng.mockhelper"
-import { IRootScopeService } from "angular"
-import { StoreService } from "../../state/store.service"
-import { focusNode } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
-import { TEST_DELTA_MAP_A } from "../../util/dataMocks"
-import { setIdToNode } from "../../state/store/lookUp/idToNode/idToNode.actions"
-import { NodeDecorator } from "../../util/nodeDecorator"
-import { FocusedNodePathService } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.service"
-
-describe("UnfocusButtonController", () => {
-	let unfocusButtonController: UnfocusButtonController
-	let $rootScope: IRootScopeService
-	let storeService: StoreService
-
-	beforeEach(() => {
-		restartSystem()
-		rebuildController()
-	})
-
-	function restartSystem() {
-		instantiateModule("app.codeCharta.ui.unfocusButton")
-
-		$rootScope = getService<IRootScopeService>("$rootScope")
-		storeService = getService<StoreService>("storeService")
-
-		NodeDecorator.decorateMapWithPathAttribute(TEST_DELTA_MAP_A)
-		NodeDecorator.decorateMap(
-			TEST_DELTA_MAP_A.map,
-			{
-				nodeMetricData: [],
-				edgeMetricData: []
-			},
-			[]
-		)
-		const map = new Map([
-			[TEST_DELTA_MAP_A.map.children[0].id, TEST_DELTA_MAP_A.map.children[0]],
-			[TEST_DELTA_MAP_A.map.children[1].id, TEST_DELTA_MAP_A.map.children[1]],
-			[TEST_DELTA_MAP_A.map.children[1].children[0].id, TEST_DELTA_MAP_A.map.children[1].children[0]]
-		])
-		storeService.dispatch(setIdToNode(map))
-	}
-
-	function rebuildController() {
-		unfocusButtonController = new UnfocusButtonController($rootScope, storeService)
-	}
-
-	describe("constructor", () => {
-		it("should subscribe to focus node", () => {
-			FocusedNodePathService.subscribeToFocusNode = jest.fn()
-
-			rebuildController()
-
-			expect(FocusedNodePathService.subscribeToFocusNode).toHaveBeenCalledWith($rootScope, unfocusButtonController)
-		})
-	})
-
-	describe("on focus node", () => {
-		it("should add the node to focusedNodes", function () {
-			unfocusButtonController.onFocusNode("/root/app")
-			expect(unfocusButtonController["_viewModel"].focusedNodes.length).toBeGreaterThan(0)
-		})
-		it("should not add the node to focusedNodes", function () {
-			unfocusButtonController.onFocusNode("/root/app")
-			unfocusButtonController.onFocusNode("/root/app")
-			expect(unfocusButtonController["_viewModel"].focusedNodes.length).toBe(1)
-
-			unfocusButtonController.onFocusNode("")
-			expect(unfocusButtonController["_viewModel"].focusedNodes.length).toBe(1)
-		})
-	})
-
-	describe("removeFocusedNode", () => {
-		it("should apply previous focusedNodePath in storeService", () => {
-			unfocusButtonController["_viewModel"].focusedNodes = ["/root", "/root/app"]
-			storeService.dispatch(focusNode("/root/app"))
-
-			unfocusButtonController.removeFocusedNode()
-
-			expect(unfocusButtonController["_viewModel"].focusedNodes.length).toBe(1)
-			expect(unfocusButtonController["_viewModel"].focusedNodes).toEqual(["/root"])
-		})
-
-		it("should clear focusedNodePath in storeService", () => {
-			unfocusButtonController["_viewModel"].focusedNodes = ["/root", "/root/app"]
-			storeService.dispatch(focusNode("/root/app"))
-
-			unfocusButtonController.removeFocusedNode(true)
-
-			expect(unfocusButtonController["_viewModel"].focusedNodes.length).toBe(0)
-			expect(storeService.getState().dynamicSettings.focusedNodePath).toBe("")
-		})
-	})
-
-	describe("onIsLoadingFileChanged", () => {
-		it("should clear focusedNodes", () => {
-			unfocusButtonController["_viewModel"].focusedNodes = ["/root", "/root/app"]
-
-			unfocusButtonController.onIsLoadingFileChanged(true)
-
-			expect(unfocusButtonController["_viewModel"].isLoadingFile).toBe(true)
-			expect(unfocusButtonController["_viewModel"].focusedNodes).toEqual([])
-		})
-	})
-})

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

@@ -1,62 +0,0 @@
-import "./unfocusButton.component.scss"
-import { IRootScopeService } from "angular"
-import { focusNode, unfocusNode } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
-import { StoreService } from "../../state/store.service"
-import { NodeContextMenuController } from "../nodeContextMenu/nodeContextMenu.component"
-import { IsLoadingFileService, IsLoadingFileSubscriber } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.service"
-import { FocusedNodePathService, FocusNodeSubscriber } from "../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.service"
-
-export class UnfocusButtonController implements IsLoadingFileSubscriber, FocusNodeSubscriber {
-	private _viewModel: {
-		isLoadingFile: boolean
-		isNodeFocused: boolean
-		isParentFocused: boolean
-		focusedNodes: string[]
-	} = {
-		isLoadingFile: false,
-		isNodeFocused: false,
-		isParentFocused: false,
-		focusedNodes: []
-	}
-
-	// @ts-ignore
-	private isNodeFocused: boolean
-	// @ts-ignore
-	private isParentFocused: boolean
-
-	constructor(private $rootScope: IRootScopeService, private storeService: StoreService) {
-		"ngInject"
-		IsLoadingFileService.subscribe(this.$rootScope, this)
-		FocusedNodePathService.subscribeToFocusNode(this.$rootScope, this)
-	}
-
-	onFocusNode(focusedNodePath: string) {
-		if (focusedNodePath && !this._viewModel.focusedNodes.includes(focusedNodePath)) {
-			this._viewModel.focusedNodes.push(focusedNodePath)
-		}
-	}
-
-	removeFocusedNode(removeAll = false) {
-		this.storeService.dispatch(unfocusNode())
-		if (!removeAll) {
-			this._viewModel.focusedNodes.pop()
-			const lastFocusedNode = this._viewModel.focusedNodes[this._viewModel.focusedNodes.length - 1]
-			this.storeService.dispatch(focusNode(lastFocusedNode))
-		} else {
-			this._viewModel.focusedNodes = []
-		}
-		NodeContextMenuController.broadcastHideEvent(this.$rootScope)
-	}
-
-	onIsLoadingFileChanged(isLoadingFile: boolean) {
-		this._viewModel.isLoadingFile = isLoadingFile
-		this._viewModel.focusedNodes = []
-	}
-}
-
-export const unfocusButtonComponent = {
-	selector: "unfocusButtonComponent",
-	template: require("./unfocusButton.component.html"),
-	controller: UnfocusButtonController,
-	bindings: { isNodeFocused: "<", isParentFocused: "<" }
-}

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

@@ -1,7 +0,0 @@
-import "../../state/state.module"
-import angular from "angular"
-import { unfocusButtonComponent } from "./unfocusButton.component"
-
-angular
-	.module("app.codeCharta.ui.unfocusButton", ["app.codeCharta.state"])
-	.component(unfocusButtonComponent.selector, unfocusButtonComponent)