clamp saved actions

client/src/components/UndoRedo/UndoRedoStack.vue

@@ -19,6 +19,21 @@ watch(
     () => props.storeId,
     (id) => (currentStore.value = useUndoRedoStore(id))
 );
+
+function onInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    const valueNumber = parseFloat(value);
+    const nonNanValue = isNaN(valueNumber) ? 0 : valueNumber;
+
+    currentStore.value.savedUndoActions = nonNanValue;
+    savedUndoActions.value = nonNanValue;
+}
+
+const savedUndoActions = ref(currentStore.value.savedUndoActions);
+
+function updateSavedUndoActions() {
+    savedUndoActions.value = currentStore.value.savedUndoActions;
+}
 </script>
 
 <template>
@@ -59,7 +74,16 @@ watch(
 
         <label>
             Max saved changes
-            <input v-model.number="currentStore.maxUndoActions" type="number" step="1" min="10" max="10000" />
+            <input
+                :value="savedUndoActions"
+                type="number"
+                step="1"
+                :min="currentStore.minUndoActions"
+                :max="currentStore.maxUndoActions"
+                @input="onInput"
+                @focusin="updateSavedUndoActions"
+                @focusout="updateSavedUndoActions"
+                @keyup.enter="updateSavedUndoActions" />
         </label>
     </section>
 </template>

client/src/composables/math.ts

@@ -0,0 +1,49 @@
+/**
+ * There are similar functions to those in this module in vue-use, but they only work one-way.
+ * Unlike vue-use, these composables return refs which can be set.
+ */
+
+import { type MaybeRefOrGetter, toValue } from "@vueuse/core";
+import { computed, type Ref } from "vue";
+
+/**
+ * Wraps a number ref, restricting it's values to a given range
+ *
+ * @param ref ref containing a number to wrap
+ * @param min lowest possible value of range
+ * @param max highest possible value of range
+ * @returns clamped ref
+ */
+export function useClamp(ref: Ref<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>): Ref<number> {
+    const clamp = (value: number) => {
+        return Math.min(Math.max(value, toValue(min)), toValue(max));
+    };
+
+    const clampedRef = computed({
+        get: () => clamp(ref.value),
+        set: (value) => (ref.value = clamp(value)),
+    });
+
+    return clampedRef;
+}
+
+/**
+ * Wraps a number ref, restricting it's values to align to a given step size
+ *
+ * @param ref ref containing a number to wrap
+ * @param stepSize size of steps to restrict value to
+ * @returns wrapped red
+ */
+export function useStep(ref: Ref<number>, stepSize: MaybeRefOrGetter<number> = 1): Ref<number> {
+    const step = (value: number) => {
+        const stepSizeValue = toValue(stepSize);
+        return Math.round(value / stepSizeValue) * stepSizeValue;
+    };
+
+    const steppedRef = computed({
+        get: () => step(ref.value),
+        set: (value) => (ref.value = step(value)),
+    });
+
+    return steppedRef;
+}

client/src/stores/undoRedoStore/index.ts

@@ -1,5 +1,6 @@
 import { computed, ref } from "vue";
 
+import { useClamp, useStep } from "@/composables/math";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { defineScopedStore } from "@/stores/scopedStore";
 
@@ -22,9 +23,13 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
     const undoActionStack = ref<UndoRedoAction[]>([]);
     const redoActionStack = ref<UndoRedoAction[]>([]);
 
-    const maxUndoActions = useUserLocalStorage(`undoRedoStore-maxUndoActions`, 100);
+    const minUndoActions = ref(10);
+    const maxUndoActions = ref(10000);
 
-    /** names of actions which were deleted due to maxUndoActions being exceeded */
+    const savedUndoActionsValue = useUserLocalStorage(`undoRedoStore-savedUndoActions`, 100);
+    const savedUndoActions = useClamp(useStep(savedUndoActionsValue), minUndoActions, maxUndoActions);
+
+    /** names of actions which were deleted due to savedUndoActions being exceeded */
     const deletedActions = ref<string[]>([]);
 
     function $reset() {
@@ -59,7 +64,7 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
         clearRedoStack();
         undoActionStack.value.push(action);
 
-        while (undoActionStack.value.length > maxUndoActions.value && undoActionStack.value.length > 0) {
+        while (undoActionStack.value.length > savedUndoActions.value && undoActionStack.value.length > 0) {
             const action = undoActionStack.value.shift();
             deletedActions.value.push(action?.name ?? "unnamed action");
             action?.destroy();
@@ -186,7 +191,9 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
     return {
         undoActionStack,
         redoActionStack,
+        minUndoActions,
         maxUndoActions,
+        savedUndoActions,
         deletedActions,
         undo,
         redo,