codecharta-visualization 1.86.0 → 1.89.0

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

@@ -1,108 +1,26 @@
-<section layout="row" layout-align="center center" class="mode-chooser">
-	<md-button
-		class="state-selector-button mode-selector left"
-		ng-class="{ current: $ctrl._viewModel.isSingleState }"
-		ng-click="$ctrl.onSingleStateSelected()"
-		><span class="text">Single</span></md-button
-	>
-	<md-button
-		class="state-selector-button mode-selector middle"
-		ng-class="{ current: $ctrl._viewModel.isPartialState }"
-		ng-click="$ctrl.onPartialStateSelected()"
-		><span class="text">Multiple</span></md-button
-	>
-	<md-button
-		class="state-selector-button mode-selector right"
-		ng-class="{ current: $ctrl._viewModel.isDeltaState }"
-		ng-click="$ctrl.onDeltaStateSelected()"
-		><span class="text">Delta</span></md-button
-	>
-</section>
+<cc-file-panel-state-buttons
+	[is-delta-state]="$ctrl._viewModel.isDeltaState"
+	[handle-standard-button-clicked]="$ctrl.selectRecentPartialFiles"
+	[handle-delta-button-clicked]="$ctrl.onDeltaStateSelected"
+></cc-file-panel-state-buttons>
 
-<md-input-container class="input-container" ng-show="$ctrl._viewModel.isSingleState" title="Select a file">
-	<md-select
-		class="md-select-menu"
-		ng-model="$ctrl._viewModel.selectedFileNames.single"
-		ng-change="$ctrl.onSingleFileChange($ctrl._viewModel.selectedFileNames.single)"
-	>
-		<md-option
-			ng-repeat="fileState in $ctrl._viewModel.files track by fileState.file.fileMeta.fileName"
-			value="{{::fileState.file.fileMeta.fileName}}"
-		>
-			<md-truncate>{{::fileState.file.fileMeta.fileName}}</md-truncate>
-			<remove-file-button-component
-				on-remove-file="$ctrl.onRemoveFile(filename, state, event)"
-				ng-if="$ctrl._viewModel.files.length > 1"
-				filename="{{::fileState.file.fileMeta.fileName}}"
-				state="Single"
-			>
-			</remove-file-button-component>
-		</md-option>
-	</md-select>
-</md-input-container>
+<cc-file-panel-file-selector
+	style="display: inline-block; width: 200px"
+	ng-show="!$ctrl._viewModel.isDeltaState"
+	[selected-file-names]="$ctrl._viewModel.selectedFileNames.partial"
+	[handle-selected-files-changed]="$ctrl.onPartialFilesChange"
+	[handle-select-all-partial-files]="$ctrl.selectAllPartialFiles"
+	[handle-select-zero-partial-files]="$ctrl.selectZeroPartialFiles"
+	[handle-invert-selected-partial-files]="$ctrl.invertPartialFileSelection"
+	[handle-on-selection-closed]="$ctrl.onPartialSelectionClosed"
+	[files]="$ctrl._viewModel.files"
+></cc-file-panel-file-selector>
 
-<md-input-container class="input-container" ng-show="$ctrl._viewModel.isPartialState" title="Select files">
-	<md-select
-		class="md-select-menu"
-		ng-model="$ctrl._viewModel.selectedFileNames.partial"
-		multiple="{{ true }}"
-		ng-change="$ctrl.onPartialFilesChange($ctrl._viewModel.selectedFileNames.partial)"
-		md-on-close="$ctrl.onPartialSelectionClosed()"
-	>
-		<md-button ng-click="$ctrl.selectAllPartialFiles()">All</md-button>
-		<md-button ng-click="$ctrl.selectZeroPartialFiles()">None</md-button>
-		<md-button ng-click="$ctrl.invertPartialFileSelection()">Invert</md-button>
-
-		<md-option
-			ng-repeat="fileState in $ctrl._viewModel.files track by fileState.file.fileMeta.fileName"
-			value="{{::fileState.file.fileMeta.fileName}}"
-		>
-			<md-truncate>{{::fileState.file.fileMeta.fileName}}</md-truncate>
-			<remove-file-button-component
-				on-remove-file="$ctrl.onRemoveFile(filename, state, event)"
-				ng-if="$ctrl._viewModel.files.length > 1"
-				filename="{{::fileState.file.fileMeta.fileName}}"
-				state="Partial"
-			>
-			</remove-file-button-component>
-		</md-option>
-	</md-select>
-</md-input-container>
-
-<div class="input-container delta-chooser" ng-show="$ctrl._viewModel.isDeltaState">
-	<div class="pictogram" ng-style="{ background: $ctrl._viewModel.pictogramFirstFileColor }"></div>
-	<md-input-container class="delta-select input-container" title="Select reference file">
-		<md-select
-			ng-model="$ctrl._viewModel.selectedFileNames.delta.reference"
-			ng-change="$ctrl.onDeltaReferenceFileChange($ctrl._viewModel.selectedFileNames.delta.reference)"
-		>
-			<md-option
-				ng-repeat="fileState in $ctrl._viewModel.files track by fileState.file.fileMeta.fileName"
-				value="{{::fileState.file.fileMeta.fileName}}"
-			>
-				<md-truncate>{{::fileState.file.fileMeta.fileName}}</md-truncate>
-			</md-option>
-		</md-select>
-	</md-input-container>
-
-	<div
-		class="pictogram"
-		ng-style="{
-			background:
-				'linear-gradient(' + $ctrl._viewModel.pictogramUpperColor + ' 50%, ' + $ctrl._viewModel.pictogramLowerColor + ' 50%)'
-		}"
-	></div>
-	<md-input-container class="input-container delta-select" title="Select comparison file">
-		<md-select
-			ng-model="$ctrl._viewModel.selectedFileNames.delta.comparison"
-			ng-change="$ctrl.onDeltaComparisonFileChange($ctrl._viewModel.selectedFileNames.delta.comparison)"
-		>
-			<md-option
-				ng-repeat="fileState in $ctrl._viewModel.files track by fileState.file.fileMeta.fileName"
-				value="{{::fileState.file.fileMeta.fileName}}"
-			>
-				<md-truncate>{{::fileState.file.fileMeta.fileName}}</md-truncate>
-			</md-option>
-		</md-select>
-	</md-input-container>
-</div>
+<cc-file-panel-delta-selector
+	ng-show="$ctrl._viewModel.isDeltaState"
+	[pictogram-upper-color]="$ctrl._viewModel.pictogramUpperColor"
+	[pictogram-lower-color]="$ctrl._viewModel.pictogramLowerColor"
+	[handle-delta-reference-file-change]="$ctrl.onDeltaReferenceFileChange"
+	[handle-delta-comparison-file-change]="$ctrl.onDeltaComparisonFileChange"
+	[files]="$ctrl._viewModel.files"
+></cc-file-panel-delta-selector>

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

@@ -1,12 +1,10 @@
-file-panel-component {
+cc-file-panel {
 	width: calc(100% - 150px);
 	min-width: 400px;
 	display: inline-block;
 
-	.delta-chooser {
-		position: absolute;
-		display: inline-flex;
-		min-width: 70%;
+	&.hidden {
+		display: none;
 	}
 
 	.mode-chooser {
@@ -15,18 +13,10 @@ file-panel-component {
 		margin-left: 10px;
 	}
 
-	.small-action-button.transparent {
-		.md-fab.md-button.md-ink-ripple {
-			&:hover {
-				background-color: transparent !important;
-			}
-		}
-	}
-
 	.state-selector-button {
 		&.mode-selector {
 			height: 24px;
-			width: 55px;
+			width: 66px;
 			background-color: #ffffff;
 
 			&.middle {
@@ -62,51 +52,16 @@ file-panel-component {
 		height: 22px;
 		border-radius: 2px;
 		align-self: center;
+		vertical-align: bottom;
 	}
 
-	md-input-container {
-		display: inline-block;
-		text-align: left;
-		font-size: 11pt;
-		width: calc(100% - 250px);
-		max-width: 300px;
-		min-width: 150px;
-
-		&.delta-select {
-			width: calc((100% - 300px) / 2);
-		}
-
-		md-select {
-			display: block;
-
-			.md-select-value {
-				background: white;
-				margin-right: 5px;
-				border-radius: 5px;
-				padding-left: 5px;
-				min-height: 22px;
-
-				span {
-					margin-top: -3px;
-				}
-			}
-		}
-
-		> * {
-			display: inline-block;
-		}
-
-		i.fa {
-			color: rgb(0, 150, 136);
-			margin-top: 4px;
-			margin-left: 5px;
-			margin-right: 3px;
-			min-width: 16px;
+	.delta-select {
+		width: 200px;
+		margin: 0 10px 0 10px;
+		vertical-align: bottom;
+	}
 
-			&:hover {
-				color: black;
-				cursor: pointer;
-			}
-		}
+	.standard-select {
+		margin: 0 10px 0 10px;
 	}
 }

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

@@ -6,9 +6,10 @@ import { TEST_DELTA_MAP_A, TEST_DELTA_MAP_B, TEST_DELTA_MAP_C, TEST_DELTA_MAP_D
 import { StoreService } from "../../state/store.service"
 import { addFile, resetFiles, resetSelection, setDelta, setMultiple, setSingle } from "../../state/store/files/files.actions"
 import { FilesService } from "../../state/store/files/files.service"
-import { getVisibleFileStates, isDeltaState, isPartialState, isSingleState } from "../../model/files/files.helper"
+import { getVisibleFileStates, isDeltaState, isPartialState } from "../../model/files/files.helper"
 import { FileSelectionState } from "../../model/files/files"
 import { CodeChartaService } from "../../codeCharta.service"
+import { MapColorsService } from "../../state/store/appSettings/mapColors/mapColors.service"
 
 describe("filePanelController", () => {
 	let filePanelController: FilePanelController
@@ -38,7 +39,6 @@ describe("filePanelController", () => {
 		storeService.dispatch(addFile(TEST_DELTA_MAP_B))
 		storeService.dispatch(addFile(TEST_DELTA_MAP_C))
 		storeService.dispatch(addFile(TEST_DELTA_MAP_D))
-		storeService.dispatch(setSingle(TEST_DELTA_MAP_A))
 	}
 
 	describe("constructor", () => {
@@ -49,6 +49,14 @@ describe("filePanelController", () => {
 
 			expect(FilesService.subscribe).toHaveBeenCalledWith($rootScope, filePanelController)
 		})
+
+		it("should subscribe to MapColorService", () => {
+			MapColorsService.subscribe = jest.fn()
+
+			buildController()
+
+			expect(MapColorsService.subscribe).toHaveBeenCalledWith($rootScope, filePanelController)
+		})
 	})
 
 	describe("onFilesSelectionChanged", () => {
@@ -63,19 +71,18 @@ describe("filePanelController", () => {
 
 			filePanelController.onFilesSelectionChanged(storeService.getState().files)
 
-			expect(filePanelController["_viewModel"].isSingleState).toBeFalsy()
 			expect(filePanelController["_viewModel"].isPartialState).toBeFalsy()
 			expect(filePanelController["_viewModel"].isDeltaState).toBeTruthy()
 			expect(filePanelController["lastRenderState"]).toEqual(filePanelController["_viewModel"].renderState)
 		})
 
-		it("should update selected filenames in viewModel correctly if single mode is active", () => {
-			storeService.dispatch(setSingle(TEST_DELTA_MAP_A))
+		it("should update selected filenames in viewModel correctly if multiple mode is active", () => {
+			storeService.dispatch(setMultiple([TEST_DELTA_MAP_A]))
 
 			filePanelController.onFilesSelectionChanged(storeService.getState().files)
 
-			expect(filePanelController["_viewModel"].renderState).toEqual(FileSelectionState.Single)
-			expect(filePanelController["_viewModel"].selectedFileNames.single).toEqual(TEST_DELTA_MAP_A.fileMeta.fileName)
+			expect(filePanelController["_viewModel"].renderState).toEqual(FileSelectionState.Partial)
+			expect(filePanelController["_viewModel"].selectedFileNames.partial).toEqual([TEST_DELTA_MAP_A.fileMeta.fileName])
 		})
 
 		it("should update selected filenames in viewModel correctly if partial mode is active", () => {
@@ -121,16 +128,27 @@ describe("filePanelController", () => {
 			expect(filePanelController["_viewModel"].selectedFileNames.delta.reference).toBeNull()
 			expect(filePanelController["_viewModel"].selectedFileNames.delta.comparison).toBeNull()
 			expect(filePanelController["_viewModel"].selectedFileNames.partial).toEqual([])
-			expect(filePanelController["_viewModel"].selectedFileNames.single).toBeNull()
 		})
+	})
 
-		it("should set the pictogram colors in view model", () => {
-			filePanelController.onFilesSelectionChanged(storeService.getState().files)
+	describe("onMapColorsChanged", () => {
+		it("should set default colors of delta mode in view model for pictogram", () => {
+			filePanelController.onMapColorsChanged(storeService.getState().appSettings.mapColors)
 
-			expect(filePanelController["_viewModel"].pictogramFirstFileColor).toBe("#808080")
 			expect(filePanelController["_viewModel"].pictogramLowerColor).toBe(storeService.getState().appSettings.mapColors.negativeDelta)
 			expect(filePanelController["_viewModel"].pictogramUpperColor).toBe(storeService.getState().appSettings.mapColors.positiveDelta)
 		})
+
+		it("should update colors of delta mode in view model for pictogram when colors had changed", () => {
+			filePanelController["_viewModel"].pictogramLowerColor = storeService.getState().appSettings.mapColors.negativeDelta
+			filePanelController["_viewModel"].pictogramUpperColor = storeService.getState().appSettings.mapColors.positiveDelta
+			const testMapColors = { ...storeService.getState().appSettings.mapColors, negativeDelta: "#FFFFFF", positiveDelta: "#000000" }
+
+			filePanelController.onMapColorsChanged(testMapColors)
+
+			expect(filePanelController["_viewModel"].pictogramLowerColor).toBe(testMapColors.negativeDelta)
+			expect(filePanelController["_viewModel"].pictogramUpperColor).toBe(testMapColors.positiveDelta)
+		})
 	})
 
 	describe("onPartialSelectionClosed", () => {
@@ -148,28 +166,6 @@ describe("filePanelController", () => {
 		})
 	})
 
-	describe("onSingleFileChange", () => {
-		it("should set a single file in state und update root data", () => {
-			filePanelController["_viewModel"].files = [
-				{
-					file: TEST_DELTA_MAP_A,
-					selectedAs: FileSelectionState.None
-				},
-				{
-					file: TEST_DELTA_MAP_B,
-					selectedAs: FileSelectionState.Single
-				}
-			]
-			filePanelController.onSingleFileChange(TEST_DELTA_MAP_B.fileMeta.fileName)
-
-			expect(isSingleState(storeService.getState().files)).toBeTruthy()
-			expect(getVisibleFileStates(storeService.getState().files)[0].selectedAs).toEqual(FileSelectionState.Single)
-
-			expect(CodeChartaService.ROOT_NAME).toEqual(TEST_DELTA_MAP_B.map.name)
-			expect(CodeChartaService.ROOT_PATH).toEqual(`/${TEST_DELTA_MAP_B.map.name}`)
-		})
-	})
-
 	describe("onDeltaReferenceFileChange", () => {
 		it("should set referenceFile in delta mode and update root data", () => {
 			filePanelController["_viewModel"].files = [
@@ -229,26 +225,6 @@ describe("filePanelController", () => {
 	})
 
 	describe("onRenderStateChange", () => {
-		it("should update the viewModel with the last visible filename and call onSingleFileChange if single mode is active", () => {
-			filePanelController.onSingleFileChange = jest.fn()
-
-			filePanelController["lastRenderState"] = FileSelectionState.Single
-			filePanelController["_viewModel"].selectedFileNames.single = "fileA"
-
-			filePanelController.onSingleStateSelected()
-
-			expect(filePanelController["_viewModel"].selectedFileNames.single).toEqual("fileA")
-			expect(filePanelController.onSingleFileChange).toHaveBeenCalledWith("fileA")
-		})
-
-		it("should update the viewModel with the first recently loaded filename and call Files if partial mode is active", () => {
-			filePanelController.selectRecentPartialFiles = jest.fn()
-
-			filePanelController.onPartialStateSelected()
-
-			expect(filePanelController.selectRecentPartialFiles).toHaveBeenCalled()
-		})
-
 		it("should update the viewModel with the last visible filename and call onDeltaComparisonFileChange with null if comparison mode is active", () => {
 			filePanelController.onDeltaComparisonFileChange = jest.fn()
 
@@ -284,40 +260,32 @@ describe("filePanelController", () => {
 			]
 		})
 
-		it("should call onSingleFileChange when single state", () => {
-			filePanelController.singleStateFileRemove = jest.fn()
-
-			filePanelController.onRemoveFile("fileA", FileSelectionState.Single, new Event("mouseEvent"))
-
-			expect(filePanelController.singleStateFileRemove).toHaveBeenCalled()
-		})
-
-		it("should call onPartialFilesChange when not in single state", () => {
+		it("should call onPartialFilesChange when partial state", () => {
 			filePanelController.onPartialFilesChange = jest.fn()
 
-			filePanelController.onRemoveFile("fileA", FileSelectionState.None, new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileA", new Event("mouseEvent"))
 
 			expect(filePanelController.onPartialFilesChange).toHaveBeenCalled()
 		})
 
 		it("should keep selection when a non-selected file is removed", () => {
-			storeService.dispatch(setSingle(TEST_DELTA_MAP_B))
-			filePanelController.onRemoveFile("fileA", FileSelectionState.Single, new Event("mouseEvent"))
+			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B]))
+			filePanelController.onRemoveFile("fileA", new Event("mouseEvent"))
 
 			const remainingFiles = storeService.getState().files
-			expect(remainingFiles[0].selectedAs).toEqual(FileSelectionState.Single)
+			expect(remainingFiles[0].selectedAs).toEqual(FileSelectionState.Partial)
 			expect(remainingFiles[1].selectedAs).toEqual(FileSelectionState.None)
 		})
 
 		it("should select most recent file when a selected file is removed", () => {
 			storeService.dispatch(setSingle(TEST_DELTA_MAP_B))
-			filePanelController.onRemoveFile("fileB", FileSelectionState.Single, new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileB", new Event("mouseEvent"))
 
 			const remainingFiles = storeService.getState().files
 			const fileA = remainingFiles[0]
 			const fileD = remainingFiles[2]
 			expect(fileA.selectedAs).toEqual(FileSelectionState.None)
-			expect(fileD.selectedAs).toEqual(FileSelectionState.Single)
+			expect(fileD.selectedAs).toEqual(FileSelectionState.Partial)
 		})
 	})
 
@@ -346,7 +314,7 @@ describe("filePanelController", () => {
 		it("should not change selection when partially selected files still exist", () => {
 			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B, TEST_DELTA_MAP_C]))
 
-			filePanelController.onRemoveFile("fileB", FileSelectionState.Partial, new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileB", new Event("mouseEvent"))
 
 			const remainingFiles = storeService.getState().files
 			const fileA = remainingFiles[0]
@@ -360,8 +328,8 @@ describe("filePanelController", () => {
 		it("should select most recent file when no partially selected file exists", () => {
 			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B, TEST_DELTA_MAP_C]))
 
-			filePanelController.onRemoveFile("fileB", FileSelectionState.Partial, new Event("mouseEvent"))
-			filePanelController.onRemoveFile("fileC", FileSelectionState.Partial, new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileB", new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileC", new Event("mouseEvent"))
 
 			const remainingFiles = storeService.getState().files
 			const fileA = remainingFiles[0]
@@ -373,7 +341,7 @@ describe("filePanelController", () => {
 		it("should not change selection when non-selected file is removed", () => {
 			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B, TEST_DELTA_MAP_C]))
 
-			filePanelController.onRemoveFile("fileA", FileSelectionState.Partial, new Event("mouseEvent"))
+			filePanelController.onRemoveFile("fileA", new Event("mouseEvent"))
 
 			const remainingFiles = storeService.getState().files
 			const fileB = remainingFiles[0]