update osc params (#35)

* fix values sent via OSC being evaluated as 0 by VRChat

* implement editing for VRChat parameter drivers

* redesign the title to match other components

* validate the assign value field on assign value type change and user-input

* fix being only able to use the last declared trigger phrase

* modify validation and display

* proofread trigger phrase field for consistency

* draft behaviors

* implement resetting for the osc store

* prevent the add param trigger button from leaving the scroll view

* implement profiles

* remove the attribute persistent from trivial dialogs

* reset the add new profile dialog's input field when opening it

* implement pulse delay (timeout delay) as a setting

* remove item interactivity in the custom params overview

* reset pulse by an opposite value instead of zero/false

* localize

* implement profile renaming

* fix display, handle click-outside, fix states

* replace deprecated element

* refactor

* improve display

* make behaviors per-assign instead of per-trigger

* prevent accidental parameter deletion

* handle click-outside

* localize warning

* improve display for lower resolutions

* collapse all expansion panels when switching profiles

* lint check

---------

Co-authored-by: nae <[email protected]>

src/components/Footer.vue

@@ -209,11 +209,14 @@ export default {
         // use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search
         // to see which assign is the closest to the keyword found
         // unless switch to nlp first.....
-        if (this.oscStore.osc_params.length) {
-          this.oscStore.osc_params.forEach((custom_param) => {
-            let matchesKey = null
+        if (this.oscStore.osc_profiles[this.oscStore.current_profile].length) {
+          this.oscStore.osc_profiles[this.oscStore.current_profile].forEach((custom_param) => {
+            let matchesKey: RegExpExecArray | null = null
 
             custom_param.keywords.forEach((keyword) => {
+              if (matchesKey)
+                return
+
               const key_check = `(^|\\s)(${keyword.text})($|[^a-zA-Z\\d])`
               const reKey = new RegExp(key_check, 'ig')
               matchesKey = reKey.exec(input)
@@ -225,8 +228,54 @@ export default {
                 const reAssign = new RegExp(assign_check, 'ig')
                 const matchesAssign = reAssign.exec(input)
                 if (matchesAssign) {
-                  this.show_snackbar('secondary', `<code>${custom_param.route} = ${assign.set}</code>`)
-                  window.ipcRenderer.send('send-param-event', { ip: custom_param.ip, port: custom_param.port, route: custom_param.route, value: assign.set })
+                  this.show_snackbar('secondary', `<code>${custom_param.route} = ${assign.set1}</code>`)
+
+                  let newValue: number | boolean | null = null
+
+                  switch (assign.type) {
+                    case 'int':
+                    case 'float':
+                      newValue = Number(assign.set1)
+
+                      break
+                    case 'bool':
+                      if (assign.set1 === 'true')
+                        newValue = true
+                      else if (assign.set1 === 'false')
+                        newValue = false
+                      else
+                        newValue = Boolean(assign.set1)
+
+                      break
+                  }
+
+                  window.ipcRenderer.send('send-param-event', { ip: custom_param.ip, port: custom_param.port, route: custom_param.route, value: newValue })
+
+                  if (assign.activation === 'pulse') {
+                    // The value should reset after some time.
+                    setTimeout(() => {
+                      this.show_snackbar('secondary', `<code>${custom_param.route} = ${assign.set2}</code>`)
+
+                      switch (assign.type) {
+                        case 'int':
+                        case 'float':
+                          newValue = Number(assign.set2)
+
+                          break
+                        case 'bool':
+                          if (assign.set2 === 'true')
+                            newValue = true
+                          else if (assign.set2 === 'false')
+                            newValue = false
+                          else
+                            newValue = Boolean(assign.set2)
+
+                          break
+                      }
+
+                      window.ipcRenderer.send('send-param-event', { ip: custom_param.ip, port: custom_param.port, route: custom_param.route, value: newValue })
+                    }, assign.pulse_duration)
+                  }
                 }
               })
             }

src/components/settings/General.vue

@@ -81,6 +81,7 @@ import { useSpeechStore } from '@/stores/speech'
 import { useConnectionStore } from '@/stores/connections'
 import { useLogStore } from '@/stores/logs'
 import { useTranslationStore } from '@/stores/translation'
+import { useOSCStore } from '@/stores/osc'
 
 export default {
   name: 'SettingsGeneral',
@@ -92,6 +93,7 @@ export default {
     const connectionStore = useConnectionStore()
     const logStore = useLogStore()
     const translationStore = useTranslationStore()
+    const oscStore = useOSCStore()
 
     return {
       appearanceStore,
@@ -101,6 +103,7 @@ export default {
       connectionStore,
       logStore,
       translationStore,
+      oscStore,
     }
   },
   data: () => ({
@@ -146,6 +149,8 @@ export default {
         this.connectionStore.$reset()
       if (this.translationStore)
         this.translationStore.$reset()
+      if (this.oscStore)
+        this.oscStore.$reset()
       this.reset_dialog = false
       this.snackbar_text = this.$t('settings.general.reset.snackbar.title')
       this.snackbar = true