ADD: Allow creating new values

src/renderer/src/components/config/values/ValueGroup.vue

@@ -18,7 +18,7 @@
     <button
       class="flex flex-1 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900/50 p-2 text-sm text-muted-foreground hover:bg-zinc-800 hover:text-zinc-200"
     >
-      <Plus class="mr-2" /> Add a value
+      <Plus class="mr-2" @click="deviceStore.addKnobValue" /> Add a value
     </button>
   </div>
 </template>
@@ -28,6 +28,10 @@ import { Plus } from 'lucide-vue-next'
 import ValueCard from '@renderer/components/config/values/ValueCard.vue'
 import draggable from 'vuedraggable'
 import { ref } from 'vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+
+const deviceStore = useDeviceStore()
+
 defineProps({
   values: {
     type: Array,

src/renderer/src/deviceStore.ts

@@ -125,7 +125,26 @@ export const useDeviceStore = defineStore('device', {
     turns: 0 as number, // number of turns of the knob
     velocity: 0 as number, // velocity of the knob
     keyLabels: ['a', 'b', 'c', 'd'] as string[], // labels for the keys
-    keyStates: {} as Record<string, boolean> // state of the keys (true if pressed)
+    keyStates: {} as Record<string, boolean>, // state of the keys (true if pressed)
+    defaultKnobValue: {
+      keyState: 0,
+      angleMin: 0,
+      angleMax: 360,
+      valueMin: 0,
+      valueMax: 127,
+      step: 1,
+      wrap: true,
+      type: 'cc',
+      channel: 1,
+      cc: 1,
+      haptic: {
+        mode: 0,
+        startPos: 0,
+        endPos: Math.PI * 2,
+        detentCount: 10,
+        vernier: 10
+      }
+    } as Value
   }),
   getters: {
     connected: (state) => state.currentDeviceId !== null,
@@ -415,6 +434,22 @@ export const useDeviceStore = defineStore('device', {
         )
         this.setDirtyState(true)
       }
+    },
+    addKnobValue(value: Value | null = null, updateDevice: boolean = true) {
+      if (!value) {
+        value = JSON.parse(JSON.stringify(this.defaultKnobValue)) as Value
+      }
+      this.currentProfile!.knob.push(value)
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { knob: this.currentProfile!.knob }
+          })
+        )
+        this.setDirtyState(true)
+      }
     }
   }
 })