codecharta-visualization 1.86.0 → 1.89.0

package/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.ts

@@ -1,10 +1,12 @@
 import { BlacklistAction, BlacklistActions, setBlacklist } from "./blacklist.actions"
-import { addItemToArray, removeItemFromArray } from "../../../../util/reduxHelper"
+import { addItemsToArray, addItemToArray, removeItemFromArray } from "../../../../util/reduxHelper"
 
 export function blacklist(state = setBlacklist().payload, action: BlacklistAction) {
 	switch (action.type) {
 		case BlacklistActions.ADD_BLACKLIST_ITEM:
 			return addItemToArray(state, action.payload)
+		case BlacklistActions.ADD_BLACKLIST_ITEMS:
+			return addItemsToArray(state, action.payload)
 		case BlacklistActions.REMOVE_BLACKLIST_ITEM:
 			return removeItemFromArray(state, action.payload)
 		case BlacklistActions.SET_BLACKLIST:

package/app/codeCharta/state/store/fileSettings/blacklist/blacklist.service.spec.ts

@@ -2,12 +2,11 @@ import "../../../state.module"
 import { IRootScopeService } from "angular"
 import { StoreService } from "../../../store.service"
 import { getService, instantiateModule } from "../../../../../../mocks/ng.mockhelper"
-import * as FilesHelper from "../../../../model/files/files.helper"
 import { BlacklistService } from "./blacklist.service"
 import { BlacklistAction, BlacklistActions } from "./blacklist.actions"
 import { BlacklistItem, BlacklistType } from "../../../../codeCharta.model"
 import { PresentationModeActions } from "../../appSettings/isPresentationMode/isPresentationMode.actions"
-import { FILE_STATES, withMockedEventMethods } from "../../../../util/dataMocks"
+import { withMockedEventMethods } from "../../../../util/dataMocks"
 import { FilesService } from "../../files/files.service"
 
 describe("BlacklistService", () => {
@@ -67,21 +66,4 @@ describe("BlacklistService", () => {
 			expect($rootScope.$broadcast).not.toHaveBeenCalled()
 		})
 	})
-
-	describe("resultsInEmptyMap", () => {
-		it("should return true when all files are empty", () => {
-			jest.spyOn(FilesHelper, "getVisibleFileStates").mockReturnValue(FILE_STATES)
-			const blacklistItem: BlacklistItem[] = [{ path: "/root", type: BlacklistType.exclude }]
-
-			expect(blacklistService.resultsInEmptyMap(blacklistItem)).toBe(true)
-		})
-
-		it("should return false when files are left", () => {
-			blacklistService.isIncludedNode = jest.fn(() => true)
-			jest.spyOn(FilesHelper, "getVisibleFileStates").mockReturnValue(FILE_STATES)
-			const blacklistItem: BlacklistItem[] = [{ path: "/root/Parent Leaf", type: BlacklistType.exclude }]
-
-			expect(blacklistService.resultsInEmptyMap(blacklistItem)).toBe(false)
-		})
-	})
 })

package/app/codeCharta/state/store/fileSettings/blacklist/blacklist.service.ts

@@ -1,14 +1,13 @@
 import { StoreService, StoreSubscriber } from "../../../store.service"
 import { IRootScopeService } from "angular"
-import { BlacklistItem, BlacklistType } from "../../../../codeCharta.model"
+import { BlacklistItem } from "../../../../codeCharta.model"
 import { BlacklistActions, setBlacklist } from "./blacklist.actions"
 import { getMergedBlacklist } from "./blacklist.merger"
 import { FilesService, FilesSelectionSubscriber } from "../../files/files.service"
 import { isActionOfType } from "../../../../util/reduxHelper"
 import { getVisibleFiles, getVisibleFileStates, isPartialState } from "../../../../model/files/files.helper"
 import { FileState } from "../../../../model/files/files"
-import { hierarchy } from "d3-hierarchy"
-import { isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
+import { resultsInEmptyMap } from "../../../effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap"
 
 export interface BlacklistSubscriber {
 	onBlacklistChanged(blacklist: BlacklistItem[])
@@ -34,31 +33,9 @@ export class BlacklistService implements StoreSubscriber, FilesSelectionSubscrib
 	}
 
 	resultsInEmptyMap(blacklistItems: BlacklistItem[]) {
-		const fileStates = getVisibleFileStates(this.storeService.getState().files)
-		for (const { file } of fileStates) {
-			if (!this.isEmptyFile(file, blacklistItems)) {
-				return false
-			}
-		}
-		return true
-	}
-
-	isIncludedNode(node, blacklist: Array<BlacklistItem>) {
-		return isLeaf(node) && node.data.path && !isPathBlacklisted(node.data.path, blacklist, BlacklistType.exclude)
-	}
-
-	private isEmptyFile(file, blacklistItems: BlacklistItem[]) {
-		const blacklist = [...this.storeService.getState().fileSettings.blacklist]
-		for (const blacklistItem of blacklistItems) {
-			blacklist.push(blacklistItem)
-		}
-
-		for (const node of hierarchy(file.map)) {
-			if (this.isIncludedNode(node, blacklist)) {
-				return false
-			}
-		}
-		return true
+		const visibleFiles = getVisibleFileStates(this.storeService.getState().files)
+		const blacklist = this.storeService.getState().fileSettings.blacklist
+		return resultsInEmptyMap(visibleFiles, blacklist, blacklistItems)
 	}
 
 	private merge(files: FileState[]) {

package/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.actions.ts

@@ -1,14 +1,13 @@
-import { CCAction, MarkedPackage } from "../../../../codeCharta.model"
+import { CCAction, CodeMapNode, MarkedPackage } from "../../../../codeCharta.model"
 
 export enum MarkedPackagesActions {
 	SET_MARKED_PACKAGES = "SET_MARKED_PACKAGES",
-	CALCULATE_MARKED_PACKAGES_FOR_PATHS = "CALCULATE_MARKED_PACKAGES",
 	MARK_PACKAGE = "MARK_PACKAGE",
 	UNMARK_PACKAGE = "UNMARK_PACKAGE"
 }
 
-export interface CalculateMarkedPackagesAction extends CCAction {
-	type: MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS
+export interface MarkPackagesAction extends CCAction {
+	type: MarkedPackagesActions.MARK_PACKAGE
 	payload: MarkedPackage[]
 }
 
@@ -19,14 +18,14 @@ export interface SetMarkedPackagesAction extends CCAction {
 
 export interface UnmarkPackageAction extends CCAction {
 	type: MarkedPackagesActions.UNMARK_PACKAGE
-	payload: number
+	payload: CodeMapNode["path"]
 }
 
-export type MarkedPackagesAction = SetMarkedPackagesAction | UnmarkPackageAction | CalculateMarkedPackagesAction
+export type MarkedPackagesAction = SetMarkedPackagesAction | UnmarkPackageAction | MarkPackagesAction
 
-export function calculateMarkedPackages(packagesToBeMarked: MarkedPackage[]): CalculateMarkedPackagesAction {
+export function markPackages(packagesToBeMarked: MarkedPackage[]): MarkPackagesAction {
 	return {
-		type: MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS,
+		type: MarkedPackagesActions.MARK_PACKAGE,
 		payload: packagesToBeMarked
 	}
 }
@@ -38,10 +37,10 @@ export function setMarkedPackages(markedPackages: MarkedPackage[] = defaultMarke
 	}
 }
 
-export function unmarkPackage(index: number): UnmarkPackageAction {
+export function unmarkPackage(node: Pick<CodeMapNode, "path">): UnmarkPackageAction {
 	return {
 		type: MarkedPackagesActions.UNMARK_PACKAGE,
-		payload: index
+		payload: node.path
 	}
 }
 

package/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.spec.ts

@@ -1,5 +1,5 @@
 import { markedPackages } from "./markedPackages.reducer"
-import { MarkedPackagesAction, setMarkedPackages, calculateMarkedPackages, unmarkPackage } from "./markedPackages.actions"
+import { MarkedPackagesAction, setMarkedPackages, markPackages, unmarkPackage } from "./markedPackages.actions"
 import { MARKED_PACKAGES } from "../../../../util/dataMocks"
 
 describe("markedPackages", () => {
@@ -26,17 +26,47 @@ describe("markedPackages", () => {
 	})
 
 	describe("Action: UNMARK_PACKAGE", () => {
-		it("should remove a marked package from array", () => {
-			const result = markedPackages([MARKED_PACKAGES[0]], unmarkPackage(0))
-
+		it("should remove a marked package", () => {
+			const result = markedPackages([{ path: "/root", color: "#000000" }], unmarkPackage({ path: "/root" }))
 			expect(result).toEqual([])
 		})
+
+		it("should remove nothing, if a parent of a marked node is unmarked", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], unmarkPackage({ path: "/root" }))
+			expect(result).toEqual([{ path: "/root/child", color: "#000000" }])
+		})
 	})
 
-	describe("Action: CALCULATE_MARKED_PACKAGES", () => {
-		it("should add all packages", () => {
-			const result = markedPackages([MARKED_PACKAGES[0]], calculateMarkedPackages(MARKED_PACKAGES.slice(1)))
+	describe("Action: MARK_PACKAGES", () => {
+		it("should add a package", () => {
+			const result = markedPackages([MARKED_PACKAGES[0]], markPackages(MARKED_PACKAGES.slice(1)))
 			expect(result).toEqual(MARKED_PACKAGES)
 		})
+
+		it("should remove the children of a marked package if children marked color is the same", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], markPackages([{ path: "/root", color: "#000000" }]))
+			expect(result.length).toBe(1)
+			expect(result[0]).toEqual({ path: "/root", color: "#000000" })
+		})
+
+		it("should not remove the children of a marked package if color is different", () => {
+			const result = markedPackages([{ path: "/root/child", color: "#000000" }], markPackages([{ path: "/root", color: "#ffffff" }]))
+			expect(result.length).toBe(2)
+			expect(result[0]).toEqual({ path: "/root/child", color: "#000000" })
+			expect(result[1]).toEqual({ path: "/root", color: "#ffffff" })
+		})
+
+		it("should replace package if it was already marked", () => {
+			const result = markedPackages(
+				[
+					{ path: "/root", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				markPackages([{ path: "/root", color: "#333333" }])
+			)
+			expect(result.length).toBe(2)
+			expect(result[0]).toEqual({ path: "/root", color: "#333333" })
+			expect(result[1]).toEqual({ path: "/root/child", color: "#000000" })
+		})
 	})
 })

package/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts

@@ -1,14 +1,18 @@
 import { MarkedPackagesAction, MarkedPackagesActions, setMarkedPackages } from "./markedPackages.actions"
 import { removeEntryAtIndexFromArray } from "../../../../util/reduxHelper"
 import { addMarkedPackage } from "./util/addMarkedPackage"
+import { findIndexOfMarkedPackageOrParent } from "./util/findIndexOfMarkedPackageOrParent"
 
 export function markedPackages(state = setMarkedPackages().payload, action: MarkedPackagesAction) {
 	switch (action.type) {
 		case MarkedPackagesActions.SET_MARKED_PACKAGES:
 			return action.payload
-		case MarkedPackagesActions.UNMARK_PACKAGE:
-			return removeEntryAtIndexFromArray(state, action.payload)
-		case MarkedPackagesActions.CALCULATE_MARKED_PACKAGES_FOR_PATHS: {
+		case MarkedPackagesActions.UNMARK_PACKAGE: {
+			const indexOfPackageToBeUnmarked = findIndexOfMarkedPackageOrParent(state, action.payload)
+			if (indexOfPackageToBeUnmarked !== -1) return removeEntryAtIndexFromArray(state, indexOfPackageToBeUnmarked)
+			return state
+		}
+		case MarkedPackagesActions.MARK_PACKAGE: {
 			const markedPackagesMap = new Map(state.map(entry => [entry.path, entry]))
 
 			for (const markedPackage of action.payload) {

package/app/codeCharta/state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent.spec.ts

@@ -0,0 +1,39 @@
+import { findIndexOfMarkedPackageOrParent } from "./findIndexOfMarkedPackageOrParent"
+
+describe("findIndexOfMarkedPackageOrParent", () => {
+	it("should return -1 if given path is neither marked nor a child of a marked package", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child/grandchild", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				"/root/wolf"
+			)
+		).toBe(-1)
+	})
+
+	it("should find exact package even if a children was marked previously", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child/grandchild", color: "#ffffff" },
+					{ path: "/root/child", color: "#000000" }
+				],
+				"/root/child"
+			)
+		).toBe(1)
+	})
+
+	it("should find closest parent if given path is not marked", () => {
+		expect(
+			findIndexOfMarkedPackageOrParent(
+				[
+					{ path: "/root/child", color: "#000000" },
+					{ path: "/root/child/grandchild", color: "#ffffff" }
+				],
+				"/root/child/grandchild/grandgrandchild"
+			)
+		).toBe(1)
+	})
+})

package/app/codeCharta/state/store/fileSettings/markedPackages/util/findIndexOfMarkedPackageOrParent.ts

@@ -0,0 +1,19 @@
+import { MarkedPackage } from "../../../../../codeCharta.model"
+
+/** @return index of exact match if there is an exact match. Otherwise return index of parent or -1  */
+export const findIndexOfMarkedPackageOrParent = (markedPackages: MarkedPackage[], nodePath: string) => {
+	const indexOfNodePath = markedPackages.findIndex(mp => mp.path === nodePath)
+	if (indexOfNodePath !== -1) return indexOfNodePath
+
+	let indexOfNearestParent = -1
+	for (let loopIndex = 0; loopIndex < markedPackages.length; loopIndex++) {
+		const markedPackage = markedPackages[loopIndex]
+		if (
+			nodePath.startsWith(markedPackage.path) &&
+			(indexOfNearestParent === -1 || markedPackages[indexOfNearestParent].path.length < markedPackage.path.length)
+		)
+			indexOfNearestParent = loopIndex
+	}
+
+	return indexOfNearestParent
+}

package/app/codeCharta/state/store/lookUp/idToNode/idToNode.selector.ts

@@ -0,0 +1,4 @@
+import { createSelector } from "../../../angular-redux/createSelector"
+import { lookUpSelector } from "../lookUp.selector"
+
+export const idToNodeSelector = createSelector([lookUpSelector], lookUp => lookUp.idToNode)

package/app/codeCharta/state/store/lookUp/lookUp.selector.ts

@@ -0,0 +1,3 @@
+import { CcState } from "../store"
+
+export const lookUpSelector = (state: CcState) => state.lookUp

package/app/codeCharta/state/store/metricData/nodeMetricData/nodeMetricData.service.ts

@@ -40,10 +40,6 @@ export class NodeMetricDataService implements FilesSelectionSubscriber, Blacklis
 		return this.nodeMetricData.map(x => x.name)
 	}
 
-	isMetricAvailable(metricName: string) {
-		return this.nodeMetricData.some(x => x.name === metricName)
-	}
-
 	getMaxValueOfMetric(metricName: string) {
 		const metric = this.nodeMetricData.find(x => x.name === metricName)
 		return metric?.maxValue

package/app/codeCharta/state/store/state.actions.ts

@@ -8,6 +8,7 @@ import { defaultTreeMapSettings } from "./treeMap/treeMap.actions"
 import { defaultFiles } from "./files/files.actions"
 import { defaultHoveredBuildingPath } from "./appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
 import { defaultSelectedBuildingId } from "./appStatus/selectedBuildingId/selectedBuildingId.actions"
+import { defaultRightClickedNodeData } from "./appStatus/rightClickedNodeData/rightClickedNodeData.actions"
 
 export enum StateActions {
 	SET_STATE = "SET_STATE"
@@ -36,6 +37,7 @@ export const defaultState: State = {
 	files: defaultFiles,
 	appStatus: {
 		hoveredBuildingPath: defaultHoveredBuildingPath,
-		selectedBuildingId: defaultSelectedBuildingId
+		selectedBuildingId: defaultSelectedBuildingId,
+		rightClickedNodeData: defaultRightClickedNodeData
 	}
 }

package/app/codeCharta/state/store/state.splitter.spec.ts

@@ -40,7 +40,7 @@ describe("state.splitter", () => {
 		it("should return 1 FOCUS_NODE action", () => {
 			const partialState: RecursivePartial<State> = {
 				dynamicSettings: {
-					focusedNodePath: "/some/path"
+					focusedNodePath: ["/some/path"]
 				}
 			}
 
@@ -48,7 +48,7 @@ describe("state.splitter", () => {
 
 			expect(result.length).toEqual(1)
 
-			expect(result[0].type).toEqual(FocusedNodePathActions.FOCUS_NODE)
+			expect(result[0].type).toEqual(FocusedNodePathActions.SET_ALL_FOCUSED_NODES)
 		})
 
 		it("should return 3 atomic actions from different parts of the state", () => {
@@ -80,13 +80,13 @@ describe("state.splitter", () => {
 	describe("setDynamicSettings", () => {
 		it("should return 1 FOCUS_NODE action", () => {
 			const partialDynamicSettings: RecursivePartial<DynamicSettings> = {
-				focusedNodePath: "/some/path"
+				focusedNodePath: ["/some/path"]
 			}
 
 			const result: CCAction[] = splitStateActions(setDynamicSettings(partialDynamicSettings))
 
 			expect(result.length).toEqual(1)
-			expect(result[0].type).toEqual(FocusedNodePathActions.FOCUS_NODE)
+			expect(result[0].type).toEqual(FocusedNodePathActions.SET_ALL_FOCUSED_NODES)
 			expect(result[0].payload).toEqual(partialDynamicSettings.focusedNodePath)
 		})
 	})

package/app/codeCharta/state/store/store.ts

@@ -1,4 +1,4 @@
-import { createStore } from "redux"
+import { Action, createStore } from "redux"
 
 import rootReducer from "./state.reducer"
 
@@ -20,4 +20,8 @@ export class Store {
 		if (!Store._store) Store.initialize()
 		return Store._store
 	}
+
+	static dispatch(action: Action) {
+		Store.store.dispatch(action)
+	}
 }

package/app/codeCharta/state/store.service.spec.ts

@@ -10,7 +10,9 @@ import { setDynamicSettings } from "./store/dynamicSettings/dynamicSettings.acti
 import { setMargin } from "./store/dynamicSettings/margin/margin.actions"
 import { setCamera } from "./store/appSettings/camera/camera.actions"
 import { setIsLoadingMap } from "./store/appSettings/isLoadingMap/isLoadingMap.actions"
-import { setIsLoadingFile } from "./store/appSettings/isLoadingFile/isLoadingFile.actions"
+import { toggleSortingOrderAscending } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
+import { EffectsModule } from "./angular-redux/effects/effects.module"
+import { Subject } from "rxjs"
 
 describe("StoreService", () => {
 	let storeService: StoreService
@@ -110,19 +112,30 @@ describe("StoreService", () => {
 			expect($rootScope.$broadcast).not.toHaveBeenCalled()
 		})
 
-		it("should dispatch an action silently and not show the loading-gif", () => {
+		it("should show not the loading-gif when an action is triggered, that doesn't change the loading-gif state", () => {
 			storeService.dispatch(setIsLoadingMap(false))
-
-			storeService.dispatch(setCamera(), { silent: true })
+			storeService.dispatch(toggleSortingOrderAscending())
 
 			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
 		})
 
-		it("should show not the loading-gif when an action is triggered, that changes the loading-gif state", () => {
-			storeService.dispatch(setIsLoadingMap(false))
-			storeService.dispatch(setIsLoadingFile(false))
+		describe("connection to action subject", () => {
+			beforeEach(() => {
+				EffectsModule.actions$ = new Subject()
+			})
 
-			expect(storeService.getState().appSettings.isLoadingMap).toBeFalsy()
+			afterEach(() => {
+				EffectsModule.actions$.complete()
+			})
+
+			it("should trigger a new action value on dispatch", () => {
+				const subscription = jest.fn()
+				EffectsModule.actions$.subscribe(subscription)
+
+				storeService.dispatch({ type: "something" })
+
+				expect(subscription).toHaveBeenCalledWith({ type: "something" })
+			})
 		})
 	})
 })

package/app/codeCharta/state/store.service.ts

@@ -1,19 +1,8 @@
 import { IRootScopeService } from "angular"
 import { splitStateActions } from "./store/state.splitter"
-import { IsLoadingMapActions, setIsLoadingMap } from "./store/appSettings/isLoadingMap/isLoadingMap.actions"
-import { IsLoadingFileActions } from "./store/appSettings/isLoadingFile/isLoadingFile.actions"
 import { CCAction, State } from "../codeCharta.model"
-import { SearchPanelModeActions } from "./store/appSettings/searchPanelMode/searchPanelMode.actions"
-import { isActionOfType } from "../util/reduxHelper"
-import { SortingOrderAscendingActions } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
-import { SortingOptionActions } from "./store/dynamicSettings/sortingOption/sortingOption.actions"
-import { IsAttributeSideBarVisibleActions } from "./store/appSettings/isAttributeSideBarVisible/isAttributeSideBarVisible.actions"
-import { PanelSelectionActions } from "./store/appSettings/panelSelection/panelSelection.actions"
-import { PresentationModeActions } from "./store/appSettings/isPresentationMode/isPresentationMode.actions"
-import { ExperimentalFeaturesEnabledActions } from "./store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.actions"
 import { Store } from "./store/store"
-import { ScreenshotToClipboardEnabledActions } from "./store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
-import { HoveredBuildingPathActions } from "./store/appStatus/hoveredBuildingPath/hoveredBuildingPath.actions"
+import { EffectsModule } from "./angular-redux/effects/effects.module"
 
 export interface StoreSubscriber {
 	onStoreChanged(actionType: string)
@@ -46,25 +35,6 @@ export class StoreService {
 	}
 
 	dispatch(action: CCAction, options: DispatchOptions = { silent: false }) {
-		if (
-			!(
-				isActionOfType(action.type, IsLoadingMapActions) ||
-				isActionOfType(action.type, IsLoadingFileActions) ||
-				isActionOfType(action.type, SortingOrderAscendingActions) ||
-				isActionOfType(action.type, SearchPanelModeActions) ||
-				isActionOfType(action.type, SortingOptionActions) ||
-				isActionOfType(action.type, IsAttributeSideBarVisibleActions) ||
-				isActionOfType(action.type, PanelSelectionActions) ||
-				isActionOfType(action.type, PresentationModeActions) ||
-				isActionOfType(action.type, ExperimentalFeaturesEnabledActions) ||
-				isActionOfType(action.type, ScreenshotToClipboardEnabledActions) ||
-				isActionOfType(action.type, HoveredBuildingPathActions) ||
-				options.silent
-			)
-		) {
-			this.dispatch(setIsLoadingMap(true))
-		}
-
 		for (const atomicAction of splitStateActions(action)) {
 			this.originalDispatch(atomicAction)
 			if (!options.silent) {
@@ -72,6 +42,8 @@ export class StoreService {
 				this.notifyExtended(atomicAction.type, atomicAction.payload)
 			}
 		}
+
+		EffectsModule.actions$.next(action)
 	}
 
 	getState(): State {

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

@@ -33,7 +33,7 @@
 			ng-change="$ctrl.applyDynamicMargin()"
 			title="Set margin to default (50px)."
 		>
-			Default margin (50px)
+			<span class="default-margin-text">Default margin (50px)</span>
 		</md-checkbox>
 	</md-input-container>
 
@@ -42,3 +42,5 @@
 		tooltip="Reset area metric settings to their defaults"
 	></reset-settings-button-component>
 </div>
+
+<cc-invert-area-option></cc-invert-area-option>

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

@@ -1,4 +1,4 @@
-area-settings-panel-component {
+cc-area-settings-panel {
 	background: white;
 	border: 1px solid #b5b5b5;
 	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
@@ -16,6 +16,10 @@ area-settings-panel-component {
 	top: 45px;
 	right: 0;
 
+	.md-primary .md-label {
+		padding-top: 3px;
+	}
+
 	md-slider-container {
 		position: relative;
 		.slider-title {
@@ -37,7 +41,7 @@ area-settings-panel-component {
 	}
 }
 
-area-settings-panel-component.hidden {
+cc-area-settings-panel.hidden {
 	max-height: 0;
 	opacity: 0;
 	transition: max-height 200ms ease-in-out, opacity 0ms 200ms;

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

@@ -55,7 +55,7 @@ export class AreaSettingsPanelController implements FilesSelectionSubscriber, Dy
 }
 
 export const areaSettingsPanelComponent = {
-	selector: "areaSettingsPanelComponent",
+	selector: "ccAreaSettingsPanel",
 	template: require("./areaSettingsPanel.component.html"),
 	controller: AreaSettingsPanelController
 }

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

@@ -1,7 +1,10 @@
 import "../../state/state.module"
 import angular from "angular"
 import { areaSettingsPanelComponent } from "./areaSettingsPanel.component"
+import { downgradeComponent } from "@angular/upgrade/static"
+import { InvertAreaOptionComponent } from "./invertAreaOption/invertAreaOption.component"
 
 angular
 	.module("app.codeCharta.ui.areaSettingsPanel", ["app.codeCharta.state", "app.codeCharta.ui.codeMap"])
 	.component(areaSettingsPanelComponent.selector, areaSettingsPanelComponent)
+	.directive("ccInvertAreaOption", downgradeComponent({ component: InvertAreaOptionComponent }))

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

@@ -2,21 +2,21 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export const AreaSettingsPanelPageObject = {
 	async toggleDefaultMargin() {
-		await clickButtonOnPageElement("area-settings-panel-component md-checkbox")
+		await clickButtonOnPageElement("cc-area-settings-panel md-checkbox")
 		return this.isDefaultMarginEnabled()
 	},
 
 	async isDefaultMarginEnabled() {
-		return page.$eval("area-settings-panel-component md-checkbox", element => element.className.includes("md-checked"))
+		return page.$eval("cc-area-settings-panel md-checkbox", element => element.className.includes("md-checked"))
 	},
 
 	async toggleMarginBoundingBox() {
-		const marginToggleBoxHandle = await page.$("area-settings-panel-component md-checkbox .md-container")
+		const marginToggleBoxHandle = await page.$("cc-area-settings-panel md-checkbox .md-container")
 		return marginToggleBoxHandle.boundingBox()
 	},
 
 	async resetButtonBoundingBox() {
-		const resetBoxHandle = await page.$("area-settings-panel-component reset-settings-button-component")
+		const resetBoxHandle = await page.$("cc-area-settings-panel reset-settings-button-component")
 		return resetBoxHandle.boundingBox()
 	}
 }

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.html

@@ -0,0 +1 @@
+<mat-checkbox class="invertAreaCheckbox" [checked]="isInvertedArea$ | async" (change)="toggleInvertingArea()">Invert Area</mat-checkbox>

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.scss

@@ -0,0 +1,26 @@
+cc-invert-area-option {
+	.mat-checkbox-layout {
+		padding-left: 4px;
+
+		.mat-checkbox-inner-container {
+			margin-right: 15px;
+		}
+	}
+
+	.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+	.mat-checkbox-checked.mat-accent .mat-checkbox-background,
+	.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
+	.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
+		background-color: rgb(0, 150, 136);
+	}
+
+	.mat-checkbox-frame,
+	.mat-checkbox-background,
+	.mat-checkbox-anim-unchecked-checked .mat-checkbox-anim-checked-unchecked {
+		transform: scale(1.1);
+	}
+
+	mat-checkbox.invertAreaCheckbox .mat-checkbox-checkmark-path {
+		stroke: black !important;
+	}
+}

package/app/codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component.spec.ts

@@ -0,0 +1,29 @@
+import { Store } from "../../../state/store/store"
+import { InvertAreaOptionComponent } from "./invertAreaOption.component"
+import { fireEvent, render } from "@testing-library/angular"
+import { TestBed } from "@angular/core/testing"
+import { MaterialModule } from "../../../../material/material.module"
+import { invertAreaSelector } from "../../../state/store/appSettings/invertArea/invertArea.selector"
+
+describe("InvertAreaOptionComponent", () => {
+	beforeEach(() => {
+		Store["initialize"]()
+		TestBed.configureTestingModule({
+			imports: [MaterialModule]
+		})
+	})
+
+	it("should toggle inverting the area of buildings on click", async () => {
+		const { container } = await render(InvertAreaOptionComponent)
+		const isInvertedArea = invertAreaSelector(Store.store.getState())
+		const checkbox = container.querySelector("input")
+
+		expect(checkbox.checked).toBeFalsy()
+
+		fireEvent.click(checkbox)
+
+		expect(checkbox.checked).toBeTruthy()
+
+		expect(invertAreaSelector(Store.store.getState())).toBe(!isInvertedArea)
+	})
+})