front ok back ok just borders

frontend/src/components/Home.vue

@@ -112,10 +112,8 @@ html {
 }
 
 :deep(.imageContainer) {
-	max-width: 60%;
-	width: auto;
-	height: auto;
-	max-height: 60vh;
+	max-width: min(60vh, 60vw);
+	max-height: min(60vh, 60vw);
 	transform: none;
 }
 </style>

frontend/src/components/HomeEditor.vue

@@ -29,11 +29,11 @@ export default defineComponent({
 				for (const arg of filter.parameters) {
 					if (arg.type === FilterType.range) {
 						const range = arg as RangeParameters;
-						range.value = (range.max - Math.abs(range.min)) / 2;
+						range.value = range.min;
 					}
 					else if (arg.type === FilterType.select) {
 						const select = arg as SelectParameters;
-						select.value = 0;
+						select.value = select.options[0];
 					}
 				}
 			}
@@ -94,12 +94,13 @@ export default defineComponent({
 						:step="(parameter as RangeParameters).step" v-model.number="parameter.value" :id="parameter.name" />
 				</div>
 				<input type="range" :min="(parameter as RangeParameters).min" :max="(parameter as RangeParameters).max"
-					:step="(parameter as RangeParameters).step" v-model.number="parameter.value" />
+					:step="(parameter as RangeParameters).step" v-model.number="(parameter as RangeParameters).value" />
 			</div>
 			<div v-else-if="parameter.type === FilterType.select" class="selectParam">
 				<label>{{ parameter.name }}: </label>
-				<CustomSelector :list="(parameter as SelectParameters).options" :selected="parameter.value"
-					@update-selected="parameter.value = $event" />
+				<CustomSelector :list="(parameter as SelectParameters).options"
+					:selected="(parameter as SelectParameters).options.findIndex((o) => o === (parameter as SelectParameters).value)"
+					@update-selected="parameter.value = (parameter as SelectParameters).options[$event]" />
 			</div>
 		</div>
 		<button @mouseenter="error = areInputValid()" @mouseleave="error = areInputValid()" class="button"

frontend/src/components/Image.vue

@@ -73,9 +73,7 @@ export default defineComponent({
 <style>
 .imageContainer img {
 	max-width: 100%;
-	max-height: 100vh;
-	height: auto;
-	width: auto;
+	max-height: 100%;
 	object-fit: contain;
 }
 

frontend/src/filter.ts

@@ -7,13 +7,12 @@ export enum FilterType {
 export abstract class Parameters {
 	name: string
 	displayName: string
-	value: number
 	type: FilterType
+	value: any
 
-	constructor(name: string, displayName: string, value: any = undefined, type: FilterType) {
+	constructor(name: string, displayName: string, type: FilterType) {
 		this.name = name
 		this.displayName = displayName
-		this.value = value
 		this.type = type
 	}
 
@@ -23,9 +22,10 @@ export class RangeParameters extends Parameters {
 	min: number
 	max: number
 	step: number
-	constructor(name: string, displayName: string, min: number, max: number, step: number) {
-		const value = max / 2;
-		super(name, displayName, value, FilterType.range)
+	value: number
+	constructor(name: string, displayName: string, min: number, max: number, step: number, value: number = min) {
+		super(name, displayName, FilterType.range)
+		this.value = value;
 		this.min = min
 		this.max = max
 		this.step = step
@@ -34,8 +34,10 @@ export class RangeParameters extends Parameters {
 
 export class SelectParameters extends Parameters {
 	options: string[]
-	constructor(name: string, displayName: string, options: string[]) {
-		super(name, displayName, 0, FilterType.select)
+	value: string
+	constructor(name: string, displayName: string, options: string[], value = options[0]) {
+		super(name, displayName, FilterType.select)
+		this.value = value;
 		this.options = options
 	}
 }
@@ -73,10 +75,10 @@ export function clone(f: Filter): Filter {
 		switch (param.type) {
 			case FilterType.range:
 				const paramCastRange = param as RangeParameters
-				return new RangeParameters(param.name, param.displayName, paramCastRange.min, paramCastRange.max, paramCastRange.step)
+				return new RangeParameters(param.name, param.displayName, paramCastRange.min, paramCastRange.max, paramCastRange.step, paramCastRange.value)
 			case FilterType.select:
 				const paramCastSelect = param as SelectParameters
-				return new SelectParameters(param.name, param.displayName, paramCastSelect.options)
+				return new SelectParameters(param.name, param.displayName, paramCastSelect.options, paramCastSelect.value)
 		}
 	}))
 }