Change UI option to max TM files MaibornWolff#904

visualization/app/codeCharta/codeCharta.model.ts

@@ -142,10 +142,6 @@ export enum TreeMapAlgorithm {
 	Strip = "Strip"
 }
 
-export interface TreeMapStartDepth {
-	depth: number
-}
-
 export interface TreeMapSettings {
 	mapSize: number
 }

visualization/app/codeCharta/state/injector.service.ts

@@ -2,7 +2,6 @@
 
 // Plop: Append service import here
 import { MaxTreeMapFilesService } from "./store/appSettings/maxTreeMapFiles/maxTreeMapFiles.service"
-import { TreeMapStartDepthService } from "./store//treeMapStartDepth/treeMapStartDepth.service"
 import { LayoutAlgorithmService } from "./store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
 import { SortingOptionService } from "./store/dynamicSettings/sortingOption/sortingOption.service"
 import { SortingOrderAscendingService } from "./store/appSettings/sortingOrderAscending/sortingOrderAscending.service"
@@ -49,7 +48,6 @@ export class InjectorService {
 		// We have to inject the services somewhere
 		// Plop: Append service injection here
 		private maxTreeMapFilesService: MaxTreeMapFilesService,
-		private treeMapStartDepthService: TreeMapStartDepthService,
 		private layoutAlgorithmService: LayoutAlgorithmService,
 		private sortingOptionService: SortingOptionService,
 		private sortingOrderAscendingService: SortingOrderAscendingService,

visualization/app/codeCharta/state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.reducer.ts

@@ -1,10 +1,9 @@
 import { MaxTreeMapFilesAction, MaxTreeMapFilesActions, setMaxTreeMapFiles } from "./maxTreeMapFiles.actions"
-const clone = require("rfdc")()
 
 export function maxTreeMapFiles(state: number = setMaxTreeMapFiles().payload, action: MaxTreeMapFilesAction): number {
 	switch (action.type) {
 		case MaxTreeMapFilesActions.SET_MAX_TREE_MAP_FILES:
-			return clone(action.payload) //TODO: clone not required for primitives
+			return action.payload
 		default:
 			return state
 	}

visualization/app/codeCharta/ui/dialog/dialog.component.scss

@@ -32,6 +32,20 @@
 .global-settings {
 	min-width: 50%;
 
+	md-slider-container {
+		position: relative;
+		padding-left: 2px;
+
+		span {
+			white-space: nowrap;
+			position: absolute;
+			top: 0;
+			font-size: 10pt;
+			color: grey;
+			left: 5px;
+		}
+	}
+
 	.weblink {
 		display: block;
 		margin: 0 0 10px 0;

visualization/app/codeCharta/ui/dialog/dialog.globalSettings.component.html

@@ -6,7 +6,7 @@ <h2 class="md-toolbar-tools">Global Settings</h2>
 	<md-dialog-content>
 		<div class="md-dialog-content">
 			<layout-selection-component></layout-selection-component>
-			<tree-map-start-depth-component></tree-map-start-depth-component>
+			<max-tree-map-files-component></max-tree-map-files-component>
 			<md-input-container class="input-container md-block">
 				<md-checkbox
 					class="md-primary"

visualization/app/codeCharta/ui/maxTreeMapFiles/maxTreeMapFiles.component.html

@@ -0,0 +1,25 @@
+<md-slider-container class="md-block">
+	<span>Maximum TreeMap Files</span>
+	<md-slider
+		flex
+		step="1"
+		min="1"
+		max="1000"
+		ng-model="$ctrl._viewModel.maxTreeMapFiles"
+		id="maxTreeMapFiles-slider"
+		ng-change="$ctrl.onChangeMaxTreeMapFilesSlider()"
+		class="md-primary"
+	>
+	</md-slider>
+	<md-input-container>
+		<input
+			flex
+			step="1"
+			min="1"
+			max="1000"
+			type="number"
+			ng-model="$ctrl._viewModel.maxTreeMapFiles"
+			ng-change="$ctrl.onChangeMaxTreeMapFilesSlider()"
+		/>
+	</md-input-container>
+</md-slider-container>

visualization/app/codeCharta/ui/maxTreeMapFiles/maxTreeMapFiles.component.scss

@@ -0,0 +1,2 @@
+max-tree-map-files-component {
+}

visualization/app/codeCharta/ui/maxTreeMapFiles/maxTreeMapFiles.component.spec.ts

@@ -0,0 +1,24 @@
+import "./maxTreeMapFiles.module"
+import { MaxTreeMapFilesController } from "./maxTreeMapFiles.component"
+import { instantiateModule } from "../../../../mocks/ng.mockhelper"
+
+describe("MaxTreeMapFilesController", () => {
+	let maxTreeMapFilesController: MaxTreeMapFilesController
+
+	beforeEach(() => {
+		restartSystem()
+		rebuildController()
+	})
+
+	function restartSystem() {
+		instantiateModule("app.codeCharta.ui.maxTreeMapFiles")
+	}
+
+	function rebuildController() {
+		maxTreeMapFilesController = new MaxTreeMapFilesController()
+	}
+
+	describe("someMethodName", () => {
+		it("should do something", () => {})
+	})
+})

visualization/app/codeCharta/ui/maxTreeMapFiles/maxTreeMapFiles.component.ts

@@ -0,0 +1,34 @@
+import "./maxTreeMapFiles.component.scss"
+import { MaxTreeMapFilesSubscriber, MaxTreeMapFilesService } from "../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.service"
+import { IRootScopeService } from "angular"
+import { StoreService } from "../../state/store.service"
+import { setMaxTreeMapFiles } from "../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.actions"
+
+export class MaxTreeMapFilesController implements MaxTreeMapFilesSubscriber {
+	private _viewModel: {
+		maxTreeMapFiles: number
+	} = {
+		maxTreeMapFiles: null
+	}
+
+	constructor(private $rootScope: IRootScopeService, private storeService: StoreService) {
+		MaxTreeMapFilesService.subscribe(this.$rootScope, this)
+		const maxTreeMapFiles = this.storeService.getState().appSettings.maxTreeMapFiles
+		this.onMaxTreeMapFilesChanged(maxTreeMapFiles)
+		this._viewModel.maxTreeMapFiles = maxTreeMapFiles
+	}
+
+	public onMaxTreeMapFilesChanged(maxTreeMapFiles: number) {
+		this._viewModel.maxTreeMapFiles = maxTreeMapFiles
+	}
+
+	public onChangeMaxTreeMapFilesSlider() {
+		this.storeService.dispatch(setMaxTreeMapFiles(this._viewModel.maxTreeMapFiles))
+	}
+}
+
+export const maxTreeMapFilesComponent = {
+	selector: "maxTreeMapFilesComponent",
+	template: require("./maxTreeMapFiles.component.html"),
+	controller: MaxTreeMapFilesController
+}

visualization/app/codeCharta/ui/maxTreeMapFiles/maxTreeMapFiles.module.ts

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