codecharta-visualization 1.119.1 → 1.120.0

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.spec.ts

@@ -1,120 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
-import { setColorLabels } from "../../../state/store/appSettings/colorLabels/colorLabels.actions"
-import { invertColorRange, invertDeltaColors, setMapColors } from "../../../state/store/appSettings/mapColors/mapColors.actions"
-import { ColorSettingsPanelComponent } from "./colorSettingsPanel.component"
-import { ColorSettingsPanelModule } from "./colorSettingsPanel.module"
-import { appReducers, setStateMiddleware } from "../../../state/store/state.manager"
-import { State, Store, StoreModule } from "@ngrx/store"
-import { defaultMapColors } from "../../../state/store/appSettings/mapColors/mapColors.reducer"
-
-jest.mock("../../../state/selectors/isDeltaState.selector", () => ({
-	isDeltaStateSelector: jest.fn()
-}))
-jest.mock("../../../state/store/dynamicSettings/colorRange/colorRange.selector", () => ({
-	colorRangeSelector: () => ({ from: 33, to: 66 })
-}))
-
-const mockedIsDeltaStateSelector = jest.mocked(isDeltaStateSelector)
-
-describe("colorSettingsPanelComponent", () => {
-	mockedIsDeltaStateSelector.mockImplementation(() => false)
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [ColorSettingsPanelModule, StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] })]
-		})
-	})
-
-	describe("standard mode", () => {
-		beforeEach(() => {
-			mockedIsDeltaStateSelector.mockImplementation(() => false)
-		})
-
-		it("should show relevant elements for standard mode", async () => {
-			const { container } = await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			expect(container.querySelector("cc-metric-color-range-slider")).not.toBe(null)
-			expect(screen.queryAllByText("Show labels").length).toBe(3)
-			expect(screen.queryByText("+Δ positive delta")).toBe(null)
-			expect(screen.queryByText("–Δ negative delta")).toBe(null)
-		})
-
-		it("should invert color range", async () => {
-			await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			const dispatchSpy = jest.spyOn(TestBed.inject(Store), "dispatch")
-
-			const invertColors = screen.getByText("Invert Colors")
-			await userEvent.click(invertColors)
-
-			expect(dispatchSpy).toHaveBeenLastCalledWith(invertColorRange())
-		})
-
-		it("should allow to show labels for negative color", async () => {
-			await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			const dispatchSpy = jest.spyOn(TestBed.inject(Store), "dispatch")
-
-			const showNegativeLabels = screen.queryAllByText("Show labels")[2]
-			await userEvent.click(showNegativeLabels)
-
-			expect(dispatchSpy).toHaveBeenCalledWith(setColorLabels({ value: { negative: true } }))
-		})
-
-		it("should reset invert colors checkbox on resetting colors", async () => {
-			const { fixture } = await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-
-			await userEvent.click(screen.getByText("Invert Colors"))
-			expect(fixture.componentInstance.isColorRangeInverted).toBe(true)
-
-			await userEvent.click(screen.getByText("Reset colors"))
-			expect(fixture.componentInstance.isColorRangeInverted).toBe(false)
-		})
-	})
-
-	describe("delta mode", () => {
-		beforeEach(() => {
-			mockedIsDeltaStateSelector.mockImplementation(() => true)
-		})
-
-		it("should show relevant elements for delta mode", async () => {
-			const { container } = await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			expect(container.querySelector("cc-metric-color-range-slider")).toBe(null)
-			expect(screen.queryByText("Show labels")).toBe(null)
-			expect(screen.getByText("+Δ positive delta")).not.toBe(null)
-			expect(screen.getByText("–Δ negative delta")).not.toBe(null)
-		})
-
-		it("should invert delta colors", async () => {
-			await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			const dispatchSpy = jest.spyOn(TestBed.inject(Store), "dispatch")
-
-			const invertColors = screen.getByText("Invert Colors")
-			await userEvent.click(invertColors)
-
-			expect(dispatchSpy).toHaveBeenLastCalledWith(invertDeltaColors())
-		})
-
-		it("should reset delta colors", async () => {
-			await render(ColorSettingsPanelComponent, { excludeComponentDeclaration: true })
-			const store = TestBed.inject(Store)
-			store.dispatch(
-				setMapColors({
-					value: {
-						positiveDelta: "#000000",
-						negativeDelta: "#000000",
-						selected: "#000000"
-					}
-				})
-			)
-
-			const resetColors = screen.getByText("Reset colors")
-			await userEvent.click(resetColors)
-
-			const state = TestBed.inject(State)
-			const mapColors = state.getValue().appSettings.mapColors
-			expect(mapColors.positiveDelta).toBe(defaultMapColors.positiveDelta)
-			expect(mapColors.negativeDelta).toBe(defaultMapColors.negativeDelta)
-			expect(mapColors.selected).toBe(defaultMapColors.selected)
-		})
-	})
-})

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.ts

@@ -1,57 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { ColorLabelOptions, ColorMode, CcState } from "../../../codeCharta.model"
-import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
-import { setColorMode } from "../../../state/store/dynamicSettings/colorMode/colorMode.actions"
-import { colorModeSelector } from "../../../state/store/dynamicSettings/colorMode/colorMode.selector"
-import { colorLabelsSelector } from "../../../state/store/appSettings/colorLabels/colorLabels.selector"
-import { MatCheckboxChange } from "@angular/material/checkbox"
-import { setColorLabels } from "../../../state/store/appSettings/colorLabels/colorLabels.actions"
-import { invertColorRange, invertDeltaColors } from "../../../state/store/appSettings/mapColors/mapColors.actions"
-import { Store, State } from "@ngrx/store"
-import { selectedColorMetricDataSelector } from "../../../state/selectors/accumulatedData/metricData/selectedColorMetricData.selector"
-import { setColorRange } from "../../../state/store/dynamicSettings/colorRange/colorRange.actions"
-import { calculateInitialColorRange } from "../../../state/store/dynamicSettings/colorRange/calculateInitialColorRange"
-
-@Component({
-	selector: "cc-color-settings-panel",
-	templateUrl: "./colorSettingsPanel.component.html",
-	styleUrls: ["./colorSettingsPanel.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class ColorSettingsPanelComponent {
-	isDeltaState$ = this.store.select(isDeltaStateSelector)
-	colorMode$ = this.store.select(colorModeSelector)
-	colorLabels$ = this.store.select(colorLabelsSelector)
-	isColorRangeInverted = false
-	areDeltaColorsInverted = false
-
-	constructor(private store: Store<CcState>, private State: State<CcState>) {}
-
-	handleColorModeChange(gradient: ColorMode) {
-		this.store.dispatch(setColorMode({ value: gradient }))
-	}
-
-	toggleColorLabel(change: MatCheckboxChange, colorLabelToToggle: keyof ColorLabelOptions) {
-		this.store.dispatch(setColorLabels({ value: { [colorLabelToToggle]: change.checked } }))
-	}
-
-	handleIsColorRangeInvertedChange(isColorRangeInverted: boolean) {
-		this.isColorRangeInverted = isColorRangeInverted
-		this.store.dispatch(invertColorRange())
-	}
-
-	handleAreDeltaColorsInverted(areDeltaColorsInverted: boolean) {
-		this.areDeltaColorsInverted = areDeltaColorsInverted
-		this.store.dispatch(invertDeltaColors())
-	}
-
-	resetInvertColorCheckboxes = () => {
-		this.isColorRangeInverted = false
-		this.areDeltaColorsInverted = false
-	}
-
-	resetColorRange = () => {
-		const selectedColorMetricData = selectedColorMetricDataSelector(this.State.getValue())
-		this.store.dispatch(setColorRange({ value: calculateInitialColorRange(selectedColorMetricData) }))
-	}
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MaterialModule } from "../../../../material/material.module"
-import { ColorPickerForMapColorModule } from "../../colorPickerForMapColor/colorPickerForMapColor.module"
-import { ResetSettingsButtonModule } from "../../resetSettingsButton/resetSettingsButton.module"
-import { ColorSettingsPanelComponent } from "./colorSettingsPanel.component"
-import { MetricColorRangeSliderModule } from "./metricColorRangeSlider/metricColorRangeSlider.module"
-
-@NgModule({
-	imports: [CommonModule, ColorPickerForMapColorModule, MetricColorRangeSliderModule, ResetSettingsButtonModule, MaterialModule],
-	declarations: [ColorSettingsPanelComponent],
-	exports: [ColorSettingsPanelComponent]
-})
-export class ColorSettingsPanelModule {}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.component.html

@@ -1,10 +0,0 @@
-<cc-range-slider
-	[minValue]="(sliderValues$ | async).min"
-	[maxValue]="(sliderValues$ | async).max"
-	[currentLeftValue]="(sliderValues$ | async).from"
-	[currentRightValue]="(sliderValues$ | async).to"
-	[leftColor]="(sliderColors$ | async).leftColor"
-	[middleColor]="(sliderColors$ | async).middleColor"
-	[rightColor]="(sliderColors$ | async).rightColor"
-	[handleValueChange]="handleValueChange"
-></cc-range-slider>

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.component.spec.ts

@@ -1,40 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render } from "@testing-library/angular"
-import { setColorRange } from "../../../../state/store/dynamicSettings/colorRange/colorRange.actions"
-import { wait } from "../../../../util/testUtils/wait"
-import { MetricColorRangeSliderComponent } from "./metricColorRangeSlider.component"
-import { MetricColorRangeSliderModule } from "./metricColorRangeSlider.module"
-import { MockStore, provideMockStore } from "@ngrx/store/testing"
-import { metricColorRangeSliderValuesSelector } from "./selectors/metricColorRangeSliderValues.selector"
-import { metricColorRangeSliderColorsSelector } from "./selectors/metricColorRangeSliderColors.selector"
-import { getLastAction } from "../../../../util/testUtils/store.utils"
-
-describe("MetricColorRangeSliderComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [MetricColorRangeSliderModule],
-			providers: [
-				provideMockStore({
-					selectors: [
-						{ selector: metricColorRangeSliderValuesSelector, value: { min: 0, max: 100, from: 0, to: 100 } },
-						{
-							selector: metricColorRangeSliderColorsSelector,
-							value: { leftColor: "red", middleColor: "orange", rightColor: "green" }
-						}
-					]
-				})
-			]
-		})
-	})
-
-	it("should update store debounced without loosing an update and track it", async () => {
-		const { fixture } = await render(MetricColorRangeSliderComponent, { excludeComponentDeclaration: true })
-		fixture.componentInstance.handleValueChange({ newLeftValue: 10 })
-		fixture.componentInstance.handleValueChange({ newRightValue: 20 })
-		const store = TestBed.inject(MockStore)
-		expect(await getLastAction(store)).toEqual({ type: "@ngrx/store/init" })
-
-		await wait(400)
-		expect(await getLastAction(store)).toEqual(setColorRange({ value: { from: 10, to: 20 } }))
-	})
-})

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.component.ts

@@ -1,47 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { HandleValueChange } from "./rangeSlider/rangeSlider.component"
-import { setColorRange } from "../../../../state/store/dynamicSettings/colorRange/colorRange.actions"
-import { metricColorRangeSliderColorsSelector } from "./selectors/metricColorRangeSliderColors.selector"
-import { metricColorRangeSliderValuesSelector } from "./selectors/metricColorRangeSliderValues.selector"
-import { ColorRange, CcState } from "../../../../codeCharta.model"
-import { debounce } from "../../../../util/debounce"
-import { Store } from "@ngrx/store"
-
-@Component({
-	selector: "cc-metric-color-range-slider",
-	templateUrl: "./metricColorRangeSlider.component.html",
-	encapsulation: ViewEncapsulation.None
-})
-export class MetricColorRangeSliderComponent {
-	sliderValues$ = this.store.select(metricColorRangeSliderValuesSelector)
-	sliderColors$ = this.store.select(metricColorRangeSliderColorsSelector)
-
-	private newLeftValue: null | number = null
-	private newRightValue: null | number = null
-
-	constructor(private store: Store<CcState>) {}
-
-	handleValueChange: HandleValueChange = ({ newLeftValue, newRightValue }) => {
-		if (newLeftValue !== undefined) {
-			this.newLeftValue = newLeftValue
-		}
-		if (newRightValue !== undefined) {
-			this.newRightValue = newRightValue
-		}
-		this.updateColorRangeDebounced()
-	}
-
-	private updateColorRangeDebounced = debounce(() => {
-		const newColorRange: Partial<ColorRange> = {}
-		if (this.newLeftValue !== null) {
-			newColorRange.from = this.newLeftValue
-		}
-		if (this.newRightValue !== null) {
-			newColorRange.to = this.newRightValue
-		}
-		this.store.dispatch(setColorRange({ value: newColorRange }))
-
-		this.newLeftValue = null
-		this.newRightValue = null
-	}, 400)
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.module.ts

@@ -1,11 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-import { MetricColorRangeSliderComponent } from "./metricColorRangeSlider.component"
-import { RangeSliderModule } from "./rangeSlider/rangeSlider.module"
-
-@NgModule({
-	imports: [CommonModule, RangeSliderModule],
-	declarations: [MetricColorRangeSliderComponent],
-	exports: [MetricColorRangeSliderComponent]
-})
-export class MetricColorRangeSliderModule {}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.html

@@ -1,58 +0,0 @@
-<div class="cc-range-slider-container">
-	<mat-form-field appearance="outline">
-		<input
-			matInput
-			type="number"
-			[value]="currentLeftValue"
-			(input)="this.handleCurrentLeftInputChanged($event)"
-			[min]="minValue"
-			[max]="upcomingRightValue"
-		/>
-	</mat-form-field>
-
-	<div #rangeSliderContainer class="cc-range-slider-slider">
-		<span [style.width.px]="sliderRangePosition.leftEnd" [style.border-bottom-color]="leftColor" class="cc-range-slider-bar"></span>
-		<span
-			[style.width.px]="sliderRangePosition.rightStart - sliderRangePosition.leftEnd"
-			[style.border-bottom-color]="middleColor"
-			class="cc-range-slider-bar"
-		></span>
-		<span
-			[style.width.px]="sliderWidth - sliderRangePosition.rightStart"
-			[style.border-bottom-color]="rightColor"
-			class="cc-range-slider-bar"
-		></span>
-
-		<div
-			#leftThumb
-			class="cc-range-slider-slider-thumb"
-			[style.left.px]="sliderRangePosition.leftEnd - thumbRadius"
-			(mousedown)="setCurrentlySliding('leftThumb')"
-		></div>
-		<div
-			#rightThumb
-			class="cc-range-slider-slider-thumb"
-			[style.left.px]="sliderRangePosition.rightStart - thumbRadius"
-			(mousedown)="setCurrentlySliding('rightThumb')"
-		></div>
-		<cc-range-slider-labels
-			[minValue]="minValue"
-			[maxValue]="maxValue"
-			[leftValueLabel]="upcomingLeftValue"
-			[rightValueLabel]="upcomingRightValue"
-			[sliderRangePosition]="sliderRangePosition"
-			[sliderWidth]="sliderWidth"
-		></cc-range-slider-labels>
-	</div>
-
-	<mat-form-field appearance="outline">
-		<input
-			matInput
-			type="number"
-			[value]="this.currentRightValue"
-			(input)="this.handleCurrentRightInputChanged($event)"
-			[min]="upcomingLeftValue"
-			[max]="maxValue"
-		/>
-	</mat-form-field>
-</div>

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.scss

@@ -1,53 +0,0 @@
-@use "../../../../../../material/theme";
-
-cc-range-slider {
-	.cc-range-slider-container {
-		display: flex;
-		align-items: center;
-		mat-form-field {
-			height: 32px;
-
-			.mat-mdc-text-field-wrapper {
-				padding: 0px 4px;
-
-				.mat-mdc-form-field-flex {
-					align-self: center;
-
-					.mat-mdc-form-field-infix {
-						padding: 0px 0px;
-						min-height: 28px;
-
-						.mat-mdc-input-element {
-							min-height: inherit;
-						}
-					}
-				}
-			}
-
-			.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
-				display: none;
-			}
-		}
-
-		.cc-range-slider-slider {
-			flex: 1;
-			margin: 0 8px;
-			position: relative;
-			line-height: 48px;
-
-			.cc-range-slider-bar {
-				display: inline-block;
-				border-bottom-width: 4px;
-				border-bottom-style: solid;
-			}
-
-			.cc-range-slider-slider-thumb {
-				cursor: pointer;
-				position: absolute;
-				top: 20px;
-				border-radius: 100%;
-				border: 7px solid theme.$cc-primary-color;
-			}
-		}
-	}
-}

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.spec.ts

@@ -1,117 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render } from "@testing-library/angular"
-import { RangeSliderComponent } from "./rangeSlider.component"
-import { RangeSliderModule } from "./rangeSlider.module"
-
-describe("RangeSliderComponent", () => {
-	beforeEach(async () => {
-		TestBed.configureTestingModule({
-			imports: [RangeSliderModule]
-		})
-	})
-
-	const renderComponent = async (handleValueChange = jest.fn()) => {
-		return render(RangeSliderComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				minValue: 0,
-				maxValue: 100,
-				currentLeftValue: 20,
-				currentRightValue: 70,
-				sliderWidth: 100,
-				leftColor: "green",
-				middleColor: "orange",
-				rightColor: "red",
-				handleValueChange
-			}
-		})
-	}
-
-	it("should display bars correctly", async () => {
-		const { container } = await renderComponent()
-		const bars = container.querySelectorAll(".cc-range-slider-bar") as NodeListOf<HTMLSpanElement>
-		expect(bars[0].style.width).toBe("20px")
-		expect(bars[0].style.borderBottomColor).toBe("green")
-		expect(bars[1].style.width).toBe("50px")
-		expect(bars[1].style.borderBottomColor).toBe("orange")
-		expect(bars[2].style.width).toBe("30px")
-		expect(bars[2].style.borderBottomColor).toBe("red")
-	})
-
-	it("should prevent left value input from submitting values lower than min value", async () => {
-		const handleValueChange = jest.fn()
-		const { container } = await renderComponent(handleValueChange)
-		const leftInput = container.querySelectorAll("input")[0]
-		fireEvent.input(leftInput, { target: { value: "-10" } })
-		expect(handleValueChange).toHaveBeenCalledWith({ newLeftValue: 0 })
-	})
-
-	it("should prevent left value input from submitting values bigger than right value", async () => {
-		const handleValueChange = jest.fn()
-		const { container } = await renderComponent(handleValueChange)
-		const leftInput = container.querySelectorAll("input")[0]
-		fireEvent.input(leftInput, { target: { value: "75" } })
-		expect(handleValueChange).toHaveBeenCalledWith({ newLeftValue: 70 })
-	})
-
-	it("should prevent right value input from submitting values lower than left value", async () => {
-		const handleValueChange = jest.fn()
-		const { container } = await renderComponent(handleValueChange)
-		const rightInput = container.querySelectorAll("input")[1]
-		fireEvent.input(rightInput, { target: { value: "10" } })
-		expect(handleValueChange).toHaveBeenCalledWith({ newRightValue: 20 })
-	})
-
-	it("should prevent right value input from submitting values bigger than max value", async () => {
-		const handleValueChange = jest.fn()
-		const { container } = await renderComponent(handleValueChange)
-		const rightInput = container.querySelectorAll("input")[1]
-		fireEvent.input(rightInput, { target: { value: "101" } })
-		expect(handleValueChange).toHaveBeenCalledWith({ newRightValue: 100 })
-	})
-
-	it("should enable sliding of left thumb on mouse down and disabling it again on mouse up", async () => {
-		const { container, fixture } = await renderComponent()
-		fixture.componentInstance.handleLeftThumbMoved = jest.fn()
-		const leftThumb = container.querySelectorAll(".cc-range-slider-slider-thumb")[0] as HTMLDivElement
-
-		fireEvent.mouseDown(leftThumb)
-		fireEvent.mouseMove(document)
-		expect(fixture.componentInstance.handleLeftThumbMoved).toHaveBeenCalledTimes(1)
-
-		fireEvent.mouseUp(document)
-		fireEvent.mouseMove(document)
-		expect(fixture.componentInstance.handleLeftThumbMoved).toHaveBeenCalledTimes(1)
-	})
-
-	it("should enable sliding of right thumb on mouse down and disabling it again on mouse up", async () => {
-		const { container, fixture } = await renderComponent()
-		fixture.componentInstance.handleRightThumbMoved = jest.fn()
-		const rightThumb = container.querySelectorAll(".cc-range-slider-slider-thumb")[1] as HTMLDivElement
-
-		fireEvent.mouseDown(rightThumb)
-		fireEvent.mouseMove(document)
-		expect(fixture.componentInstance.handleRightThumbMoved).toHaveBeenCalledTimes(1)
-
-		fireEvent.mouseUp(document)
-		fireEvent.mouseMove(document)
-		expect(fixture.componentInstance.handleRightThumbMoved).toHaveBeenCalledTimes(1)
-	})
-
-	it("should put last moved thumb on top, so an user can drag it again in case of overlapping thumbs", async () => {
-		const { container, fixture } = await renderComponent()
-		fixture.componentInstance.handleRightThumbMoved = jest.fn()
-		const leftThumb = container.querySelectorAll(".cc-range-slider-slider-thumb")[0] as HTMLDivElement
-		const rightThumb = container.querySelectorAll(".cc-range-slider-slider-thumb")[1] as HTMLDivElement
-
-		fireEvent.mouseDown(leftThumb)
-		fireEvent.mouseUp(leftThumb)
-		expect(leftThumb.style.zIndex).toBe("1")
-		expect(rightThumb.style.zIndex).toBe("0")
-
-		fireEvent.mouseDown(rightThumb)
-		fireEvent.mouseUp(rightThumb)
-		expect(leftThumb.style.zIndex).toBe("0")
-		expect(rightThumb.style.zIndex).toBe("1")
-	})
-})

package/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSlider/rangeSlider.component.ts

@@ -1,133 +0,0 @@
-import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from "@angular/core"
-import { calculateSliderRangePosition, SliderRangePosition, updateLeftThumb, updateRightThumb } from "./utils/SliderRangePosition"
-import { parseNumberInput } from "../../../../../util/parseNumberInput"
-
-export type HandleValueChange = (changedValue: { newLeftValue?: number; newRightValue?: number }) => void
-export type CurrentlySliding = undefined | "leftThumb" | "rightThumb"
-
-@Component({
-	selector: "cc-range-slider",
-	templateUrl: "./rangeSlider.component.html",
-	styleUrls: ["./rangeSlider.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class RangeSliderComponent implements OnChanges {
-	@Input() minValue: number
-	@Input() maxValue: number
-	@Input() currentLeftValue: number
-	@Input() currentRightValue: number
-	@Input() leftColor: string
-	@Input() middleColor: string
-	@Input() rightColor: string
-	@Input() handleValueChange: HandleValueChange
-	@Input() sliderWidth = 150
-
-	@ViewChild("rangeSliderContainer") sliderContainer: ElementRef<HTMLDivElement>
-	@ViewChild("leftThumb") leftThumb: ElementRef<HTMLDivElement>
-	@ViewChild("rightThumb") rightThumb: ElementRef<HTMLDivElement>
-
-	sliderRangePosition: SliderRangePosition = { leftEnd: 0, rightStart: 0 }
-	thumbRadius = 7
-	upcomingLeftValue: number
-	upcomingRightValue: number
-
-	private currentlySliding: CurrentlySliding = undefined
-
-	ngOnChanges(changes: SimpleChanges) {
-		if (!this.currentlySliding) {
-			this.sliderRangePosition = calculateSliderRangePosition({
-				minValue: this.minValue,
-				maxValue: this.maxValue,
-				currentLeftValue: this.currentLeftValue,
-				currentRightValue: this.currentRightValue,
-				sliderWidth: this.sliderWidth
-			})
-			if (changes.currentLeftValue) {
-				this.upcomingLeftValue = this.currentLeftValue
-			}
-			if (changes.currentRightValue) {
-				this.upcomingRightValue = this.currentRightValue
-			}
-		}
-	}
-
-	setCurrentlySliding(currentlySliding: CurrentlySliding) {
-		this.currentlySliding = currentlySliding
-		switch (this.currentlySliding) {
-			case "leftThumb":
-				document.addEventListener("mousemove", this.handleLeftThumbMoved)
-				this.rightThumb.nativeElement.style.zIndex = "0"
-				this.leftThumb.nativeElement.style.zIndex = "1"
-				this.resetCurrentlySlidingOnNextMouseUp(this.handleLeftThumbMoved)
-				break
-
-			case "rightThumb":
-				document.addEventListener("mousemove", this.handleRightThumbMoved)
-				this.leftThumb.nativeElement.style.zIndex = "0"
-				this.rightThumb.nativeElement.style.zIndex = "1"
-				this.resetCurrentlySlidingOnNextMouseUp(this.handleRightThumbMoved)
-				break
-		}
-	}
-
-	resetCurrentlySlidingOnNextMouseUp = (handler: (event: MouseEvent) => void) => {
-		const mouseUpHandler = () => {
-			this.currentlySliding = undefined
-			document.removeEventListener("mouseup", mouseUpHandler)
-			document.removeEventListener("mousemove", handler)
-		}
-		document.addEventListener("mouseup", mouseUpHandler)
-	}
-
-	handleLeftThumbMoved = (event: MouseEvent) => {
-		const updates = updateLeftThumb({
-			deltaX: event.movementX,
-			thumbScreenX: this.leftThumb.nativeElement.getBoundingClientRect().x,
-			thumbRadius: this.thumbRadius,
-			otherThumbScreenX: this.rightThumb.nativeElement.getBoundingClientRect().x,
-			sliderBoundingClientRectX: this.sliderContainer.nativeElement.getBoundingClientRect().x,
-			sliderWidth: this.sliderWidth,
-			minValue: this.minValue,
-			maxValue: this.maxValue
-		})
-		this.sliderRangePosition = {
-			leftEnd: updates.updatedThumbX,
-			rightStart: this.sliderRangePosition.rightStart
-		}
-		this.upcomingLeftValue = updates.upcomingValue
-		this.handleValueChange({ newLeftValue: updates.upcomingValue })
-	}
-
-	handleRightThumbMoved = (event: MouseEvent) => {
-		const updates = updateRightThumb({
-			deltaX: event.movementX,
-			thumbScreenX: this.rightThumb.nativeElement.getBoundingClientRect().x,
-			thumbRadius: this.thumbRadius,
-			otherThumbScreenX: this.leftThumb.nativeElement.getBoundingClientRect().x,
-			sliderBoundingClientRectX: this.sliderContainer.nativeElement.getBoundingClientRect().x,
-			sliderWidth: this.sliderWidth,
-			minValue: this.minValue,
-			maxValue: this.maxValue
-		})
-		this.sliderRangePosition = {
-			leftEnd: this.sliderRangePosition.leftEnd,
-			rightStart: updates.updatedThumbX
-		}
-		this.upcomingRightValue = updates.upcomingValue
-		this.handleValueChange({ newRightValue: updates.upcomingValue })
-	}
-
-	handleCurrentLeftInputChanged($event: Event) {
-		const newLeftValue = parseNumberInput($event, this.minValue, this.currentRightValue)
-		if (newLeftValue !== this.currentLeftValue) {
-			this.handleValueChange({ newLeftValue })
-		}
-	}
-
-	handleCurrentRightInputChanged($event: Event) {
-		const newRightValue = parseNumberInput($event, this.currentLeftValue, this.maxValue)
-		if (newRightValue !== this.currentRightValue) {
-			this.handleValueChange({ newRightValue })
-		}
-	}
-}