ADD: Midi value adjustments

far from perfect :/

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

@@ -1,16 +1,35 @@
 <template>
-  <div>midi value settings</div>
+  <div class="p-4">
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">CC:</span>
+        <Input v-model="ccModel" class="my-2" type="number" />
+      </div>
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">Channel:</span>
+        <Input v-model="channelModel" class="my-2" type="number" />
+      </div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import ConfigSection from '@renderer/components/common/ConfigSection.vue'
+import { Input } from '@renderer/components/ui/input'
-import ActionGroup from '@renderer/components/config/actions/ActionGroup.vue'
+import { computed } from 'vue'
-import { RotateCw, RotateCcw, CircleDashed } from 'lucide-vue-next'
+const props = defineProps({
-import { ref } from 'vue'
-
-defineProps({
   value: {
     type: Object,
     required: true
   }
 })
+const emit = defineEmits(['update'])
+//TODO: These inputs are limited to 0-127 and 1-16, but once the value is at min/max the change events don't propagate and the field can contain invalid values
+const ccModel = computed({
+  get: () => props.value.cc,
+  set: (cc) => emit('update', { cc: Math.max(0, Math.min(Number(cc), 127)) })
+})
+
+const channelModel = computed({
+  get: () => props.value.channel,
+  set: (channel) => emit('update', { channel: Math.max(1, Math.min(Number(channel), 16)) })
+})
 </script>

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

@@ -102,6 +102,7 @@
           : WIP
       "
       :value="value"
+      @update="(updates) => deviceStore.updateKnobValueParameter(valueIndex - 1, updates)"
     />
   </div>
 </template>
@@ -135,6 +136,9 @@ import {
 import { useElementSize } from '@vueuse/core'
 import TriggerActionsValue from '@renderer/components/config/values/TriggerActionsValue.vue'
 import MidiValue from './MidiValue.vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+
+const deviceStore = useDeviceStore()
 
 defineEmits(['delete'])
 
@@ -145,7 +149,7 @@ const props = defineProps({
   },
   valueIndex: {
     type: Number,
-    required: false
+    required: true
   }
 })
 
@@ -180,6 +184,6 @@ const comboboxButton = ref(null)
 const { width } = useElementSize(comboboxButton)
 
 const open = ref(false)
-const inputValue = ref(props.value.value.type || null)
+const inputValue = ref(props.value.type || null)
 const confirmDelete = ref(false)
 </script>

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

@@ -12,7 +12,7 @@
       <template #item="dragValue">
         <div :key="dragValue.element.id">
           <ValueCard
-            :value="dragValue.element"
+            :value="dragValue.element.value"
             :value-index="dragValue.index + 1"
             @delete="deviceStore.removeKnobValue(dragValue.index)"
           />

src/renderer/src/deviceStore.ts

@@ -496,6 +496,20 @@ export const useDeviceStore = defineStore('device', {
         )
         this.setDirtyState(true)
       }
+    },
+    updateKnobValueParameter(index: number, updates: object, updateDevice: boolean = true) {
+      Object.assign(this.currentProfile!.knob[index], updates)
+      console.log(updates)
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { knob: this.currentProfile!.knob }
+          })
+        )
+        this.setDirtyState(true)
+      }
     }
   }
 })