fix(input-links): fixes input links functionality (#454)

@2xAA broke everything when updating the UI, this fixes that

src/application/worker/store/modules/inputs.js

@@ -30,11 +30,26 @@ const actions = {
 
   createInputLink(
     { commit },
-    { inputId, location, type = "state", args, min = 0, max = 1, writeToSwap }
+    {
+      inputId,
+      location,
+      type = "state",
+      args,
+      min = 0,
+      max = 1,
+      source,
+      writeToSwap
+    }
   ) {
     const writeTo = writeToSwap ? swap : state;
 
-    const inputLink = { id: inputId, location, type, args, min, max };
+    if (!source) {
+      console.warn("Did not create inputLink. Require source", inputId);
+
+      return false;
+    }
+
+    const inputLink = { id: inputId, location, type, args, min, max, source };
     if (!writeTo.inputs[inputId]) {
       console.warn(
         "Did not create inputLink. Could not find input with id",

src/components/CollapsibleRow.vue

@@ -1,6 +1,6 @@
 <template>
   <fragment>
-    <c span="1.." class="label-row" v-if="hasLabelSlot">
+    <c span="1.." class="label-row" :class="{ disabled }" v-if="hasLabelSlot">
       <grid columns="4">
         <c span="1"><slot name="label"/></c>
         <c span="3">
@@ -14,12 +14,19 @@
       </grid>
     </c>
 
-    <slot name="body" v-if="open" />
+    <slot name="body" v-if="!disabled && open" />
   </fragment>
 </template>
 
 <script>
 export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   data() {
     return {
       open: false
@@ -39,6 +46,11 @@ export default {
   border-bottom: 1px solid #9a9a9a;
 }
 
+.label-row.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
 .flip {
   transform: scaleY(-1);
 }

src/components/Controls/TweenControl.vue

@@ -12,6 +12,7 @@
         :class="color"
         v-model.number="modelEasing"
         :disabled="!!modelSteps"
+        @input="updateValue"
       >
         <option
           v-for="easing in easings"
@@ -24,15 +25,24 @@
 
     <c span="1+1">Duration</c>
     <c span="2">
-      <Number :class="color" v-model="modelDuration" :disabled="modelUseBpm" />
+      <Number
+        :class="color"
+        v-model="modelDuration"
+        :disabled="modelUseBpm"
+        @input="updateValue"
+      />
     </c>
 
     <c span="1+1">Use BPM</c>
-    <c><Checkbox :class="color" v-model="modelUseBpm"/></c>
+    <c><Checkbox :class="color" v-model="modelUseBpm" @input="updateValue"/></c>
 
     <c span="1+1"><label :for="`${111}-bpmDivision`">BPM Division</label></c>
     <c span="2">
-      <Select :class="color" v-model.number="modelBpmDivision">
+      <Select
+        :class="color"
+        v-model.number="modelBpmDivision"
+        @input="updateValue"
+      >
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="4">4</option>
@@ -52,7 +62,11 @@
       >
     </c>
     <c span="2">
-      <Checkbox :class="color" v-model="modelDurationAsTotalTime" />
+      <Checkbox
+        :class="color"
+        v-model="modelDurationAsTotalTime"
+        @input="updateValue"
+      />
     </c>
 
     <c span="1+1">
@@ -63,14 +77,15 @@
       </label>
     </c>
     <c span="2">
-      <Number :class="color" v-model.number="modelSteps" />
+      <Number :class="color" v-model.number="modelSteps" @input="updateValue" />
     </c>
   </grid>
 </template>
 
 <script>
 export default {
   props: ["value", "color"],
+
   data() {
     return {
       modelData: "",
@@ -97,7 +112,7 @@ export default {
 
   methods: {
     updateValue() {
-      const data = JSON.parse(this.modelData);
+      const data = this.modelData.length ? JSON.parse(this.modelData) : [];
       const duration = this.modelDuration;
       const easing = this.modelEasing;
       const useBpm = this.useBpm;

src/components/InputConfig.vue

@@ -30,7 +30,7 @@
           </grid>
         </c>
 
-        <CollapsibleRow>
+        <CollapsibleRow :disabled="source && source !== 'meyda'">
           <template v-slot:label>
             Audio
           </template>
@@ -42,7 +42,7 @@
           </template>
         </CollapsibleRow>
 
-        <CollapsibleRow>
+        <CollapsibleRow :disabled="source && source !== 'midi'">
           <template v-slot:label>
             MIDI
           </template>
@@ -54,7 +54,7 @@
           </template>
         </CollapsibleRow>
 
-        <CollapsibleRow>
+        <CollapsibleRow :disabled="source && source !== 'tween'">
           <template v-slot:label>
             Tween
           </template>
@@ -106,6 +106,19 @@ export default {
       );
     },
 
+    inputLink() {
+      const { $modV } = this;
+      return (
+        $modV.store.state.inputs.inputLinks[
+          $modV.store.state.inputs.focusedInput.id
+        ] || false
+      );
+    },
+
+    source() {
+      return (this.inputLink && this.inputLink.source) || false;
+    },
+
     isProp() {
       return "prop" in this.inputConfig;
     },
@@ -114,10 +127,6 @@ export default {
       return this.$modV.store.state.inputs.focusedInput.title;
     },
 
-    inputLink() {
-      return this.$modV.store.state.inputs.inputLinks[this.inputConfig.id];
-    },
-
     min: {
       get() {
         return this.inputLink ? this.inputLink.min : 0;

src/components/InputLinkComponents/AudioFeatures.vue

@@ -6,7 +6,7 @@
           Audio Feature
         </c>
         <c span="3">
-          <Select v-model="feature" class="light">
+          <Select v-model="feature" class="light" @input="checkFeature">
             <option
               v-for="featureValue in features"
               :key="featureValue"
@@ -37,12 +37,9 @@
 </template>
 
 <script>
-import hasLink from "../mixins/has-input-link";
 import RangeControl from "../Controls/RangeControl";
 
 export default {
-  mixins: [hasLink],
-
   props: {
     inputId: {
       type: String,
@@ -85,6 +82,10 @@ export default {
     };
   },
 
+  created() {
+    this.restoreLinkValues();
+  },
+
   computed: {
     MAX_SMOOTHING() {
       return this.$modV.store.state.meyda.MAX_SMOOTHING;
@@ -100,11 +101,22 @@ export default {
   },
 
   methods: {
+    restoreLinkValues() {
+      if (this.inputLink && this.inputLink.source === "meyda") {
+        if (this.inputLink.args.length > 2) {
+          this.smoothingValue = this.inputLink.args[2];
+        }
+
+        this.feature = this.inputLink.args[0];
+      }
+    },
+
     makeLink() {
       this.$modV.store.dispatch("inputs/createInputLink", {
         inputId: this.inputId,
         type: "getter",
         location: "meyda/getFeature",
+        source: "meyda",
         args: [this.feature]
       });
     },
@@ -136,18 +148,22 @@ export default {
         key: "args",
         value: value
       });
-    }
-  },
+    },
 
-  watch: {
-    feature(value) {
-      if (value === "none") {
+    checkFeature() {
+      if (
+        this.feature === "none" &&
+        this.inputLink &&
+        this.inputLink.source === "meyda"
+      ) {
         this.removeLink();
       } else {
         this.makeLink();
       }
-    },
+    }
+  },
 
+  watch: {
     async smoothingValue(value) {
       if (value && !this.smoothingId) {
         this.smoothingId = await this.$modV.store.dispatch(
@@ -167,16 +183,15 @@ export default {
     },
 
     inputId() {
-      if (this.inputLink) {
-        if (this.inputLink.args.length > 2) {
-          this.smoothingValue = this.inputLink.args[2];
-        }
+      this.restoreLinkValues();
 
-        this.feature = this.inputLink.args[0];
+      if (!this.inputLink || this.inputLink.source !== "meyda") {
+        this.feature = "none";
+        this.smoothingId = null;
+        this.smoothingValue = 0;
+        this.useSmoothing = false;
       }
     }
   }
 };
 </script>
-
-<style scoped></style>

src/components/InputLinkComponents/MIDI.vue

@@ -1,40 +1,49 @@
 <template>
   <grid columns="4">
     <c span="2+3">
-      <Button class="light" @click="learn">Learn</Button>
+      <Button class="light" @click="manageLink">{{
+        hasLink ? "Forget" : "Learn"
+      }}</Button>
     </c>
   </grid>
 </template>
 
 <script>
-import hasLink from "../mixins/has-input-link";
-
 export default {
-  mixins: [hasLink],
-
   props: {
     inputId: {
       type: String,
       required: true
     }
   },
 
-  data() {
-    return {};
-  },
-
   computed: {
     inputConfig() {
-      const { $modV } = this;
-      return $modV.store.state.inputs.inputLinks[this.inputId] || {};
+      return this.$modV.store.state.inputs.inputLinks[this.inputId] || {};
+    },
+
+    hasLink() {
+      const link = this.$modV.store.state.inputs.inputLinks[this.inputId];
+
+      return link && link.source === "midi";
     }
   },
 
   methods: {
+    manageLink() {
+      if (this.hasLink) {
+        this.removeLink();
+      } else {
+        this.learn();
+      }
+    },
+
     removeLink() {
       this.$modV.store.dispatch("inputs/removeInputLink", {
         inputId: this.inputId
       });
+
+      this.hasLink = false;
     },
 
     async learn() {
@@ -45,9 +54,10 @@ export default {
         currentTarget: { id, name, manufacturer }
       } = message;
 
-      this.$modV.store.dispatch("inputs/createInputLink", {
+      this.hasLink = await this.$modV.store.dispatch("inputs/createInputLink", {
         inputId: this.inputId,
         type: "state",
+        source: "midi",
         location: `midi.devices['${id}-${name}-${manufacturer}'].channelData['${channel}']['${type}']`,
         min: 0,
         max: 1
@@ -56,5 +66,3 @@ export default {
   }
 };
 </script>
-
-<style scoped></style>