codecharta-visualization 1.119.1 → 1.120.0

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

@@ -1,87 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/angular"
-import { FileSelectionState } from "../../../model/files/files"
-import { addFile, invertStandard, setStandard } from "../../../state/store/files/files.actions"
-import { TEST_FILE_DATA } from "../../../util/dataMocks"
-import { FilePanelModule } from "../filePanel.module"
-import { FilePanelFileSelectorComponent } from "./filePanelFileSelector.component"
-import { appReducers, setStateMiddleware } from "../../../state/store/state.manager"
-import { Store, StoreModule } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-
-describe("filePanelFileSelectorComponent", () => {
-	it("should reset selected files to selected in store when closing with zero selections", async () => {
-		const { detectChanges, fixture } = await render(FilePanelFileSelectorComponent, {
-			imports: [FilePanelModule, StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })],
-			excludeComponentDeclaration: true
-		})
-		const store = TestBed.inject(Store)
-		store.dispatch(addFile({ file: TEST_FILE_DATA }))
-		store.dispatch(setStandard({ files: [TEST_FILE_DATA] }))
-		detectChanges()
-		expect(fixture.componentInstance["selectedFilesInUI"].length).toBe(1)
-		expect(fixture.componentInstance["selectedFilesInUI"][0]).toEqual(TEST_FILE_DATA)
-
-		const selectFilesElement = screen.getByRole("combobox").querySelector(".mat-mdc-select-trigger")
-		fireEvent.click(selectFilesElement)
-		const deselectAllButton = screen.getByText("None")
-		fireEvent.click(deselectAllButton)
-		expect(fixture.componentInstance["selectedFilesInUI"].length).toBe(0)
-
-		fireEvent.click(document.querySelector(".cdk-overlay-backdrop"))
-		await waitForElementToBeRemoved(() => screen.getByRole("listbox"))
-		expect(fixture.componentInstance["selectedFilesInUI"].length).toBe(1)
-		expect(fixture.componentInstance["selectedFilesInUI"][0]).toEqual(TEST_FILE_DATA)
-	})
-
-	describe("handleSelectedFilesChanged", () => {
-		it("should not dispatch selection to store, when new selection is empty", () => {
-			const mockedStore = createMockedStore()
-			const component = new FilePanelFileSelectorComponent(mockedStore)
-			component.handleSelectedFilesChanged([])
-			expect(mockedStore.dispatch).not.toHaveBeenCalled()
-		})
-
-		it("should dispatch selection to store, when new selection is not empty", () => {
-			const mockedStore = createMockedStore()
-			const component = new FilePanelFileSelectorComponent(mockedStore)
-			component.handleSelectedFilesChanged([TEST_FILE_DATA])
-			expect(mockedStore.dispatch).toHaveBeenCalledWith(setStandard({ files: [TEST_FILE_DATA] }))
-		})
-	})
-
-	describe("handleInvertSelectedFiles", () => {
-		it("should invert selection", () => {
-			const mockedStore = createMockedStore()
-			const component = new FilePanelFileSelectorComponent(mockedStore)
-			component.fileStates = [
-				{ selectedAs: FileSelectionState.Partial, file: TEST_FILE_DATA },
-				{ selectedAs: FileSelectionState.None, file: TEST_FILE_DATA }
-			]
-			component.selectedFilesInUI = [TEST_FILE_DATA]
-
-			component.handleInvertSelectedFiles()
-
-			expect(mockedStore.dispatch).toHaveBeenCalledWith(invertStandard())
-		})
-
-		it("should not invert selection in store, when new selection would be empty", () => {
-			const mockedStore = createMockedStore()
-			const component = new FilePanelFileSelectorComponent(mockedStore)
-			component.fileStates = [{ selectedAs: FileSelectionState.Partial, file: TEST_FILE_DATA }]
-			component.selectedFilesInUI = [TEST_FILE_DATA]
-
-			component.handleInvertSelectedFiles()
-
-			expect(mockedStore.dispatch).not.toHaveBeenCalled()
-			expect(component.selectedFilesInUI).toEqual([])
-		})
-	})
-
-	function createMockedStore() {
-		return {
-			dispatch: jest.fn(),
-			select: () => ({ subscribe: jest.fn() })
-		} as unknown as Store<CcState>
-	}
-})

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

@@ -1,58 +0,0 @@
-import { Component, OnDestroy, ViewEncapsulation } from "@angular/core"
-import { filesSelector } from "../../../state/store/files/files.selector"
-import { invertStandard, setAll, setStandard } from "../../../state/store/files/files.actions"
-import { CCFile, CcState } from "../../../codeCharta.model"
-import { FileSelectionState, FileState } from "../../../model/files/files"
-import { Store } from "@ngrx/store"
-
-@Component({
-	selector: "cc-file-panel-file-selector",
-	templateUrl: "./filePanelFileSelector.component.html",
-	styleUrls: ["./filePanelFileSelector.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class FilePanelFileSelectorComponent implements OnDestroy {
-	fileStates: FileState[] = []
-	selectedFilesInUI: CCFile[] = []
-	selectedFilesInStore: CCFile[] = []
-	private filesSubscription = this.store.select(filesSelector).subscribe(files => {
-		this.fileStates = files
-		this.selectedFilesInStore = files.filter(file => file.selectedAs === FileSelectionState.Partial).map(file => file.file)
-		this.selectedFilesInUI = this.selectedFilesInStore
-	})
-
-	constructor(private store: Store<CcState>) {}
-
-	ngOnDestroy(): void {
-		this.filesSubscription.unsubscribe()
-	}
-
-	handleSelectedFilesChanged(selectedFiles: CCFile[]) {
-		this.selectedFilesInUI = selectedFiles
-		if (selectedFiles.length > 0) {
-			this.store.dispatch(setStandard({ files: selectedFiles }))
-		}
-	}
-
-	handleOpenedChanged(isOpen: boolean) {
-		if (!isOpen) {
-			this.selectedFilesInUI = this.selectedFilesInStore
-		}
-	}
-
-	handleSelectZeroFiles() {
-		this.selectedFilesInUI = []
-	}
-
-	handleInvertSelectedFiles() {
-		if (this.selectedFilesInUI.length === this.fileStates.length) {
-			this.selectedFilesInUI = []
-		} else {
-			this.store.dispatch(invertStandard())
-		}
-	}
-
-	handleSelectAllFiles() {
-		this.store.dispatch(setAll())
-	}
-}

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

@@ -1,3 +0,0 @@
-<button class="remove-button" (click)="onRemoveFile(filename, $event)" title="Remove map">
-	<i class="fa fa-trash delete-symbol"></i>
-</button>

package/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { removeFile } from "../../../../state/store/files/files.actions"
-
-@Component({
-	selector: "cc-remove-file-button",
-	templateUrl: "./removeFileButton.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class RemoveFileButtonComponent {
-	@Input() filename: string
-
-	constructor(private store: Store) {}
-
-	onRemoveFile(fileName: string, $event: MouseEvent) {
-		this.store.dispatch(removeFile({ fileName }))
-
-		$event.stopPropagation()
-		$event.preventDefault()
-	}
-}

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

@@ -1,20 +0,0 @@
-<div>
-	<button
-		mat-button
-		class="state-selector-button mode-selector left"
-		(click)="fileSelectionModeService.toggle()"
-		[class.current]="!(isDeltaState$ | async)"
-		[disabled]="!(isDeltaState$ | async)"
-	>
-		<span class="text">Standard</span>
-	</button>
-	<button
-		mat-button
-		class="state-selector-button mode-selector right"
-		(click)="fileSelectionModeService.toggle()"
-		[class.current]="isDeltaState$ | async"
-		[disabled]="isDeltaState$ | async"
-	>
-		<span class="text">Delta</span>
-	</button>
-</div>

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

@@ -1,16 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
-import { FileSelectionModeService } from "../fileSelectionMode.service"
-
-@Component({
-	selector: "cc-file-panel-state-buttons",
-	templateUrl: "./filePanelStateButtons.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class FilePanelStateButtonsComponent {
-	isDeltaState$ = this.store.select(isDeltaStateSelector)
-
-	constructor(private store: Store<CcState>, public fileSelectionModeService: FileSelectionModeService) {}
-}

package/app/codeCharta/ui/filePanel/fileSelectionMode.service.spec.ts

@@ -1,56 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { FileSelectionState } from "../../model/files/files"
-import { referenceFileSelector } from "../../state/selectors/referenceFile/referenceFile.selector"
-import { addFile, removeFile, setDelta, setStandard } from "../../state/store/files/files.actions"
-import { TEST_FILE_DATA, TEST_FILE_DATA_JAVA } from "../../util/dataMocks"
-import { FileSelectionModeService } from "./fileSelectionMode.service"
-import { State, Store, StoreModule } from "@ngrx/store"
-import { appReducers, setStateMiddleware } from "../../state/store/state.manager"
-import { CcState } from "../../codeCharta.model"
-
-describe("FileSelectionModeService", () => {
-	let fileSelectionModeService: FileSelectionModeService
-	let store: Store<CcState>
-	let state: State<CcState>
-
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })]
-		})
-		store = TestBed.inject(Store)
-		state = TestBed.inject(State)
-		store.dispatch(addFile({ file: TEST_FILE_DATA }))
-		store.dispatch(addFile({ file: TEST_FILE_DATA_JAVA }))
-		store.dispatch(setStandard({ files: [TEST_FILE_DATA] }))
-
-		fileSelectionModeService = new FileSelectionModeService(store, state)
-	})
-
-	it("should set first selected file as reference, when there was no reference file before", () => {
-		fileSelectionModeService.toggle()
-		expect(referenceFileSelector(state.getValue())).toBe(TEST_FILE_DATA)
-	})
-
-	it("should restore previous files on toggle", () => {
-		let fileStates = state.getValue().files
-		expect(fileStates[0].selectedAs).toBe(FileSelectionState.Partial)
-		expect(fileStates[1].selectedAs).toBe(FileSelectionState.None)
-
-		fileSelectionModeService.toggle()
-		store.dispatch(setDelta({ referenceFile: TEST_FILE_DATA_JAVA, comparisonFile: TEST_FILE_DATA }))
-
-		fileSelectionModeService.toggle()
-		fileStates = state.getValue().files
-		expect(fileStates[0].selectedAs).toBe(FileSelectionState.Partial)
-		expect(fileStates[1].selectedAs).toBe(FileSelectionState.None)
-	})
-
-	it("should not restore a removed file when toggling back to delta mode", () => {
-		fileSelectionModeService.toggle()
-		store.dispatch(setDelta({ referenceFile: TEST_FILE_DATA_JAVA, comparisonFile: TEST_FILE_DATA }))
-		fileSelectionModeService.toggle()
-		store.dispatch(removeFile({ fileName: TEST_FILE_DATA_JAVA.fileMeta.fileName }))
-		fileSelectionModeService.toggle()
-		expect(referenceFileSelector(state.getValue())).toBe(TEST_FILE_DATA)
-	})
-})

package/app/codeCharta/ui/filePanel/fileSelectionMode.service.ts

@@ -1,55 +0,0 @@
-import { Injectable, OnDestroy } from "@angular/core"
-import { Store, State } from "@ngrx/store"
-import { pairwise, tap, filter } from "rxjs"
-import { CcState } from "../../codeCharta.model"
-import { FileSelectionState, FileState } from "../../model/files/files"
-import { isDeltaState, isEqual } from "../../model/files/files.helper"
-import { setDelta, setFiles } from "../../state/store/files/files.actions"
-import { filesSelector } from "../../state/store/files/files.selector"
-
-@Injectable()
-export class FileSelectionModeService implements OnDestroy {
-	lastSetFilesOfPreviousMode: FileState[] = []
-
-	private subscription = this.store
-		.select(filesSelector)
-		.pipe(
-			pairwise(),
-			filter(([oldFiles, newFiles]) => isDeltaState(oldFiles) !== isDeltaState(newFiles)),
-			tap(([oldFiles]) => {
-				this.lastSetFilesOfPreviousMode = oldFiles
-			})
-		)
-		.subscribe()
-
-	constructor(private store: Store<CcState>, private state: State<CcState>) {}
-
-	ngOnDestroy(): void {
-		this.subscription.unsubscribe()
-	}
-
-	/** Toggles selection mode between "Standard" and "Delta".
-	 * If available it restores the last set selected files of new mode.
-	 * When it switches to delta mode and there is no reference
-	 * file selected, it sets the first selected file as reference as there
-	 * must be a reference file for anything being rendered at all.
-	 */
-	toggle() {
-		const isCurrentlyStandardMode = this.lastSetFilesOfPreviousMode.length === 0 || isDeltaState(this.lastSetFilesOfPreviousMode)
-		if (isCurrentlyStandardMode) {
-			const existingFiles = filesSelector(this.state.getValue())
-			this.lastSetFilesOfPreviousMode = this.filterNoneExisting(existingFiles, this.lastSetFilesOfPreviousMode)
-			const referenceFile =
-				this.lastSetFilesOfPreviousMode.find(file => file.selectedAs === FileSelectionState.Reference) ??
-				existingFiles.find(file => file.selectedAs === FileSelectionState.Partial)
-			const comparisonFile = this.lastSetFilesOfPreviousMode.find(file => file.selectedAs === FileSelectionState.Comparison)
-			this.store.dispatch(setDelta({ referenceFile: referenceFile.file, comparisonFile: comparisonFile?.file }))
-		} else {
-			this.store.dispatch(setFiles({ value: this.lastSetFilesOfPreviousMode }))
-		}
-	}
-
-	private filterNoneExisting(existingFileStates: FileState[], fileStates: FileState[]) {
-		return fileStates.filter(fileState => existingFileStates.find(existingFileState => isEqual(existingFileState.file, fileState.file)))
-	}
-}

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

@@ -1,23 +0,0 @@
-<cc-color-picker
-	[hexColor]="hexColor"
-	(onColorChange)="handleColorChange($event)"
-	[openXPosition]="'before'"
-	[triggerTemplate]="colorPickerTriggerTemplate"
-></cc-color-picker>
-
-<ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">
-	<div class="cc-labelled-color-picker-container">
-		<div class="cc-color-swatch-container">
-			<span class="cc-color-swatch" [style.background-color]="hexColor"></span>
-			<span
-				class="cc-color-brush fa fa-paint-brush"
-				[style.color]="hexColor | readableColorForBackground"
-				[style.opacity]="isHovered || isOpen ? '1' : '0'"
-			>
-			</span>
-		</div>
-		<div class="cc-labelled-color-picker-label">
-			<span *ngFor="let label of labels; let last = last"> {{ label }} <br *ngIf="!last" /></span>
-		</div>
-	</div>
-</ng-template>

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

@@ -1,41 +0,0 @@
-cc-labelled-color-picker {
-	.cc-labelled-color-picker-container {
-		display: flex;
-		height: 40px;
-		align-items: center;
-
-		&:hover {
-			cursor: pointer;
-		}
-
-		.cc-color-swatch-container {
-			position: relative;
-			margin: 0px 11px; // Exactly 11px to match the mat-checkbox margin
-			width: 18px;
-			height: 18px;
-
-			.cc-color-swatch {
-				display: inline-block;
-				width: inherit;
-				height: inherit;
-				border-radius: 2px;
-			}
-
-			.cc-color-brush {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%, -50%);
-				opacity: 0; // handled by component
-			}
-		}
-	}
-}
-
-.mat-mdc-menu-panel.cc-color-picker-menu .mat-mdc-menu-content {
-	padding: 0;
-}
-
-color-chrome .chrome-hue {
-	margin-top: 10px;
-}

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

@@ -1,55 +0,0 @@
-import { EventEmitter } from "@angular/core"
-import { TestBed } from "@angular/core/testing"
-import { expect } from "@jest/globals"
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/angular"
-
-import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
-import { LabelledColorPickerModule } from "./labelledColorPicker.module"
-
-describe("labelledColorPicker", () => {
-	const handleColorChange = jest.fn()
-
-	beforeEach(() => {
-		handleColorChange.mockReset()
-		TestBed.configureTestingModule({
-			imports: [LabelledColorPickerModule]
-		})
-	})
-
-	it("should display label and handle brush visibility", async () => {
-		const { container } = await render(LabelledColorPickerComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				hexColor: "#000000",
-				labels: ["pretty color"],
-				onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
-			}
-		})
-		const colorPickerTrigger = container.querySelector("cc-color-picker")
-
-		expect(container.textContent).toMatch("pretty color")
-
-		fireEvent.mouseEnter(colorPickerTrigger)
-		expectBrushVisibility(container, true)
-
-		fireEvent.click(colorPickerTrigger)
-		const colorPicker = screen.getByRole("colorpicker")
-		expectBrushVisibility(container, true)
-
-		// @ts-expect-error
-		ng.getComponent(colorPicker).onChangeComplete.emit({ $event: {}, color: { hex: "#ffffff" } })
-		expect(handleColorChange).toHaveBeenCalledWith("#ffffff")
-
-		fireEvent.mouseLeave(colorPickerTrigger)
-		expectBrushVisibility(container, true) // still true as color picker is still open
-
-		fireEvent.click(document)
-		await waitForElementToBeRemoved(screen.getByRole("colorpicker"))
-		expectBrushVisibility(container, false)
-	})
-})
-
-function expectBrushVisibility(container: Element, isVisible: boolean) {
-	const isBrushVisible = (container.querySelector(".cc-color-brush") as HTMLElement)?.style.opacity === "1"
-	expect(isBrushVisible).toBe(isVisible)
-}

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

@@ -1,18 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core"
-
-@Component({
-	selector: "cc-labelled-color-picker",
-	templateUrl: "./labelledColorPicker.component.html",
-	styleUrls: ["./labelledColorPicker.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class LabelledColorPickerComponent {
-	@Input() hexColor: string
-	@Input() labels: string[]
-
-	@Output() onColorChange = new EventEmitter<string>()
-
-	handleColorChange(hexColor: string) {
-		this.onColorChange.emit(hexColor)
-	}
-}

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

@@ -1,13 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-
-import { ColorPickerModule } from "../colorPicker/colorPicker.module"
-import { LabelledColorPickerComponent } from "./labelledColorPicker.component"
-import { ReadableColorForBackgroundPipe } from "./readableColorForBackground.pipe"
-
-@NgModule({
-	imports: [CommonModule, ColorPickerModule],
-	declarations: [LabelledColorPickerComponent, ReadableColorForBackgroundPipe],
-	exports: [LabelledColorPickerComponent]
-})
-export class LabelledColorPickerModule {}

package/app/codeCharta/ui/labelledColorPicker/readableColorForBackground.pipe.ts

@@ -1,9 +0,0 @@
-import { Pipe } from "@angular/core"
-import { getReadableColorForBackground } from "../../util/color/getReadableColorForBackground"
-
-@Pipe({ name: "readableColorForBackground" })
-export class ReadableColorForBackgroundPipe {
-	transform(hexColor: string) {
-		return getReadableColorForBackground(hexColor)
-	}
-}

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.html

@@ -1,24 +0,0 @@
-<ng-container *ngIf="attributeDescriptors$ | async as attributeDescriptors">
-	<ng-container *ngIf="attributeDescriptors[metricName]?.title as descriptorTitle; else metricTitleFallback" class="legend-block">
-		<div [title]="attributeDescriptors[metricName] | attributeDescriptorTooltip: metricName">
-			{{ metricSpecification }} metric:
-			<a [href]="link" target="_blank" *ngIf="attributeDescriptors[metricName].link as link; else metricNoLink">
-				<span class="bold">{{ descriptorTitle }}</span> ({{ metricName }}) <i class="fa fa-external-link"></i>
-			</a>
-			<ng-template #metricNoLink>
-				<span class="bold">{{ descriptorTitle }}</span> ({{ metricName }})
-			</ng-template>
-		</div>
-	</ng-container>
-	<ng-template #metricTitleFallback>
-		<div>
-			{{ metricSpecification }} metric:
-			<ng-container *ngIf="fallbackTitles.get(metricName) as metricTitle; else noFallback">
-				<span class="bold">{{ metricTitle }}</span> ({{ metricName }})
-			</ng-container>
-			<ng-template #noFallback>
-				<span class="bold"> {{ metricName }} </span>
-			</ng-template>
-		</div>
-	</ng-template>
-</ng-container>

package/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.ts

@@ -1,19 +0,0 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
-import { CcState } from "../../../codeCharta.model"
-import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
-import { Store } from "@ngrx/store"
-import { metricTitles } from "../../../util/metric/metricTitles"
-
-@Component({
-	selector: "cc-legend-block",
-	templateUrl: "./legendBlock.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class LegendBlockComponent {
-	@Input() metricName: string
-	@Input() metricSpecification: string
-	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
-	fallbackTitles: Map<string, string> = metricTitles
-
-	constructor(private store: Store<CcState>) {}
-}

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.html

@@ -1,11 +0,0 @@
-<ng-container *ngIf="hasMarkedPackages$ | async">
-	<hr />
-
-	<ng-container *ngFor="let markedPackage of markedPackagesMap$ | async | keyvalue: sortMarkedPackagesMap; trackBy: trackMarkedPackage">
-		<cc-labelled-color-picker
-			[hexColor]="markedPackage.key"
-			[labels]="markedPackage.value"
-			(onColorChange)="handleColorChange($event, markedPackage.value)"
-		></cc-labelled-color-picker>
-	</ng-container>
-</ng-container>

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.scss

@@ -1,5 +0,0 @@
-cc-legend-marked-packages {
-	cc-labelled-color-picker {
-		display: block;
-	}
-}

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.spec.ts

@@ -1,37 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render } from "@testing-library/angular"
-import { expect } from "@jest/globals"
-import { LegendMarkedPackagesComponent } from "./legendMarkedPackages.component"
-import { LegendMarkedPackagesModule } from "./legendMarkedPackages.module"
-import { legendMarkedPackagesSelector } from "./legendMarkedPackages.selector"
-import { MockStore, provideMockStore } from "@ngrx/store/testing"
-
-describe("LegendMarkedPackages", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [LegendMarkedPackagesModule],
-			providers: [provideMockStore({ selectors: [{ selector: legendMarkedPackagesSelector, value: {} }] })]
-		})
-	})
-
-	it("shouldn't display anything if there are no marked packages", async () => {
-		const { container } = await render(LegendMarkedPackagesComponent, { excludeComponentDeclaration: true })
-
-		expect(container.textContent).toBe("")
-	})
-
-	it("should display color pickers for each marked package, sorted by first marked path", async () => {
-		const { container, detectChanges } = await render(LegendMarkedPackagesComponent, { excludeComponentDeclaration: true })
-		const store = TestBed.inject(MockStore)
-		store.overrideSelector(legendMarkedPackagesSelector, {
-			"#ffffff": ["/blackMarked/whiteMarked"],
-			"#000000": ["/blackMarked"]
-		})
-		store.refreshState()
-		detectChanges()
-
-		expect(container.querySelectorAll("cc-labelled-color-picker").length).toBe(2)
-		expect(container.querySelectorAll("cc-labelled-color-picker")[0].textContent).toMatch("/blackMarked")
-		expect(container.querySelectorAll("cc-labelled-color-picker")[1].textContent).toMatch("/blackMarked/whiteMarked")
-	})
-})

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts

@@ -1,41 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Observable, map } from "rxjs"
-import { KeyValue } from "@angular/common"
-import { legendMarkedPackagesSelector, MarkedPackagesMap } from "./legendMarkedPackages.selector"
-import { markPackages } from "../../../state/store/fileSettings/markedPackages/markedPackages.actions"
-import { Store } from "@ngrx/store"
-import { CcState } from "../../../codeCharta.model"
-
-type MarkedPackagesMapKeyValue = KeyValue<keyof MarkedPackagesMap, MarkedPackagesMap[keyof MarkedPackagesMap]>
-
-@Component({
-	selector: "cc-legend-marked-packages",
-	templateUrl: "./legendMarkedPackages.component.html",
-	styleUrls: ["./legendMarkedPackages.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class LegendMarkedPackagesComponent {
-	markedPackagesMap$: Observable<MarkedPackagesMap>
-	hasMarkedPackages$: Observable<boolean>
-
-	constructor(private store: Store<CcState>) {
-		this.markedPackagesMap$ = store.select(legendMarkedPackagesSelector)
-		this.hasMarkedPackages$ = this.markedPackagesMap$.pipe(map(markedPackagesMap => Object.keys(markedPackagesMap).length > 0))
-	}
-
-	handleColorChange(newHexColor: string, paths: string[]) {
-		this.store.dispatch(
-			markPackages({
-				packages: paths.map(path => ({ color: newHexColor, path }))
-			})
-		)
-	}
-
-	trackMarkedPackage(_: number, { value }: { value: string[] }) {
-		return value.join(",")
-	}
-
-	sortMarkedPackagesMap(kv1: MarkedPackagesMapKeyValue, kv2: MarkedPackagesMapKeyValue) {
-		return kv1.value[0].localeCompare(kv2.value[0])
-	}
-}

package/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-
-import { LabelledColorPickerModule } from "../../labelledColorPicker/labelledColorPicker.module"
-import { LegendMarkedPackagesComponent } from "./legendMarkedPackages.component"
-
-@NgModule({
-	imports: [CommonModule, LabelledColorPickerModule],
-	declarations: [LegendMarkedPackagesComponent],
-	exports: [LegendMarkedPackagesComponent]
-})
-export class LegendMarkedPackagesModule {}