Refactor frontend input components to use the v-model Vue pattern (#224)

* Use v-model for inputs

* Add opacity to LayerTree

* Fix FloatingMenu typing

Author: FuriouZz

client/web/src/components/panels/Document.vue

@@ -52,7 +52,7 @@
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<RadioInput :initialIndex="0" @changed="viewModeChanged">
+				<RadioInput v-model:index="viewModeIndex">
 					<IconButton :icon="'ViewModeNormal'" :size="24" title="View Mode: Normal" />
 					<IconButton :icon="'ViewModeOutline'" :size="24" title="View Mode: Outline" />
 					<IconButton :icon="'ViewModePixels'" :size="24" title="View Mode: Pixels" />
@@ -236,6 +236,7 @@ export default defineComponent({
 			select_tool(toolName);
 		},
 		async viewModeChanged(toolIndex: number) {
+			console.log(toolIndex);
 			function todo(_: number) {
 				return _;
 			}
@@ -269,6 +270,8 @@ export default defineComponent({
 
 		window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
 		window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
+
+		this.$watch("viewModeIndex", this.viewModeChanged);
 	},
 	data() {
 		return {
@@ -278,6 +281,7 @@ export default defineComponent({
 			SeparatorDirection,
 			SeparatorType,
 			modeMenuEntries,
+			viewModeIndex: 0,
 		};
 	},
 	components: {

client/web/src/components/panels/LayerTree.vue

@@ -5,7 +5,7 @@
 
 			<Separator :type="SeparatorType.Related" />
 
-			<NumberInput :value="100" :unit="`%`" />
+			<NumberInput v-model:value="opacity" :min="0" :max="100" :step="1" :unit="`%`" />
 
 			<Separator :type="SeparatorType.Related" />
 
@@ -222,6 +222,7 @@ export default defineComponent({
 			layers: [] as Array<LayerPanelEntry>,
 			selectionRangeStartLayer: undefined as LayerPanelEntry | undefined,
 			selectionRangeEndLayer: undefined as LayerPanelEntry | undefined,
+			opacity: 100,
 		};
 	},
 	components: {

client/web/src/components/widgets/floating-menus/FloatingMenu.vue

@@ -2,7 +2,7 @@
 	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open" ref="floatingMenu">
 		<div class="tail" v-if="type === MenuType.Popover"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
-			<div class="floating-menu-content" ref="floatingMenuContent" :style="{ minWidth: minWidth > 0 ? `${minWidth}px` : undefined }">
+			<div class="floating-menu-content" ref="floatingMenuContent" :style="floatingMenuContentStyle">
 				<slot></slot>
 			</div>
 		</div>
@@ -350,5 +350,12 @@ export default defineComponent({
 			}
 		},
 	},
+	computed: {
+		floatingMenuContentStyle(): Partial<CSSStyleDeclaration> {
+			return {
+				minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "",
+			};
+		},
+	},
 });
 </script>

client/web/src/components/widgets/floating-menus/MenuList.vue

@@ -6,7 +6,7 @@
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
 				class="row"
-				:class="{ open: isMenuEntryOpen(entry), active: entry === activeEntry }"
+				:class="{ open: isMenuEntryOpen(entry), active: entry === currentEntry }"
 				@click="handleEntryClick(entry)"
 				@mouseenter="handleEntryMouseEnter(entry)"
 				@mouseleave="handleEntryMouseLeave(entry)"
@@ -22,9 +22,8 @@
 					v-if="entry.children"
 					:direction="MenuDirection.TopRight"
 					:menuEntries="entry.children"
-					:activeEntry="activeEntry"
+					v-model:active-entry="currentEntry"
 					:minWidth="minWidth"
-					:defaultAction="defaultAction"
 					:drawIcon="drawIcon"
 					:ref="(ref) => setEntryRefs(entry, ref)"
 				/>
@@ -146,8 +145,6 @@ const MenuList = defineComponent({
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
 		minWidth: { type: Number, default: 0 },
-		defaultAction: { type: Function, required: false },
-		widthChanged: { type: Function, required: false },
 		drawIcon: { type: Boolean, default: false },
 	},
 	methods: {
@@ -157,8 +154,11 @@ const MenuList = defineComponent({
 		handleEntryClick(menuEntry: MenuListEntry) {
 			(this.$refs.floatingMenu as typeof FloatingMenu).setClosed();
 
-			if (menuEntry.action) menuEntry.action();
-			else if (this.defaultAction) this.defaultAction(menuEntry);
+			if (menuEntry.action) {
+				menuEntry.action();
+			} else {
+				this.$emit("update:activeEntry", menuEntry);
+			}
 		},
 		handleEntryMouseEnter(menuEntry: MenuListEntry) {
 			if (!menuEntry.children || !menuEntry.children.length) return;
@@ -193,9 +193,6 @@ const MenuList = defineComponent({
 			return Boolean(floatingMenu && floatingMenu.isOpen());
 		},
 		measureAndReportWidth() {
-			const { widthChanged } = this;
-			if (!widthChanged) return;
-
 			// API is experimental but supported in all browsers - https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			(document as any).fonts.ready.then(() => {
@@ -212,7 +209,7 @@ const MenuList = defineComponent({
 						// Restore open/closed state if it was forced open for measurement
 						if (!initiallyOpen) floatingMenu.setClosed();
 
-						widthChanged(width);
+						this.$emit("width-changed", width);
 					});
 				});
 			});
@@ -246,6 +243,7 @@ const MenuList = defineComponent({
 	},
 	data() {
 		return {
+			currentEntry: this.activeEntry,
 			SeparatorDirection,
 			SeparatorType,
 			MenuDirection,

client/web/src/components/widgets/inputs/DropdownInput.vue

@@ -5,15 +5,7 @@
 			<span>{{ activeEntry.label }}</span>
 			<Icon :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
-		<MenuList
-			:menuEntries="menuEntries"
-			:activeEntry="activeEntry"
-			:defaultAction="setActiveEntry"
-			:direction="MenuDirection.Bottom"
-			:widthChanged="widthChanged"
-			:drawIcon="drawIcon"
-			ref="menuList"
-		/>
+		<MenuList :menuEntries="menuEntries" v-model:active-entry="activeEntry" :direction="MenuDirection.Bottom" @width-changed="onWidthChanged" :drawIcon="drawIcon" ref="menuList" />
 	</div>
 </template>
 
@@ -101,7 +93,7 @@ export default defineComponent({
 		setActiveEntry(newActiveEntry: MenuListEntry) {
 			this.activeEntry = newActiveEntry;
 		},
-		widthChanged(newWidth: number) {
+		onWidthChanged(newWidth: number) {
 			this.minWidth = newWidth;
 		},
 	},

client/web/src/components/widgets/inputs/NumberInput.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="number-input">
-		<button class="arrow left"></button>
-		<button class="arrow right"></button>
-		<input type="text" spellcheck="false" :value="`${value}${unit}`" />
+		<button class="arrow left" @click="onIncrement(-1)"></button>
+		<button class="arrow right" @click="onIncrement(1)"></button>
+		<input type="text" spellcheck="false" :value="displayValue" />
 	</div>
 </template>
 
@@ -99,7 +99,37 @@ export default defineComponent({
 	components: {},
 	props: {
 		value: { type: Number, required: true },
-		unit: { type: String, default: "" },
+		unit: { type: String, default: "", required: false },
+		step: { type: Number, default: 1, required: false },
+		min: { type: Number, required: false },
+		max: { type: Number, required: false },
+	},
+	computed: {
+		displayValue(): string {
+			if (!this.unit) return this.value.toString();
+			return `${this.value}${this.unit}`;
+		},
+	},
+	methods: {
+		onIncrement(direction: number) {
+			const step = this.step * direction;
+			const newValue = this.value + step;
+			this.updateValue(newValue);
+		},
+
+		updateValue(newValue: number) {
+			let value = newValue;
+
+			if (Number.isFinite(this.min) && typeof this.min === "number") {
+				value = Math.max(value, this.min);
+			}
+
+			if (Number.isFinite(this.max) && typeof this.max === "number") {
+				value = Math.min(value, this.max);
+			}
+
+			this.$emit("update:value", value);
+		},
 	},
 });
 </script>

client/web/src/components/widgets/inputs/RadioInput.vue

@@ -51,21 +51,19 @@ import { defineComponent } from "vue";
 export default defineComponent({
 	components: {},
 	props: {
-		initialIndex: { type: Number, required: true },
-		setIndex: { type: Function, required: false },
+		index: { type: Number, required: true },
 	},
 	data() {
 		return {
-			activeIndex: this.initialIndex,
+			activeIndex: this.index,
 		};
 	},
 	mounted() {
 		this.updateActiveIconButton();
 
 		(this.$refs.radioInput as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
 			iconButton.addEventListener("click", () => {
-				this.activeIndex = index;
-				this.$emit("changed", index);
+				this.setActive(index);
 			});
 		});
 	},
@@ -78,6 +76,8 @@ export default defineComponent({
 		// This method may be called by the user of this component by setting a `ref="radioInput"` attribute and calling `(this.$refs.viewModePicker as typeof RadioInput).setActive(...)`
 		setActive(index: number) {
 			this.activeIndex = index;
+			this.$emit("update:index", index);
+			this.$emit("changed", index);
 		},
 		updateActiveIconButton() {
 			const iconButtons = (this.$refs.radioInput as Element).querySelectorAll(".icon-button");