add knob throttle feature

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "compress-json": "^2.1.2",
     "genmdm-parser": "1.0.2",
+    "lodash": "^4.17.21",
     "vue": "^2.6.11",
     "vue-flexible-link": "^1.0.2",
     "vue-svg-loader": "^0.12.0",

src/App.vue

@@ -226,6 +226,16 @@
                   v-model="mdmiCompatibility"
                 />
               </c>
+
+              <c span="6" class="control-group__label">Knob Throttle (in ms)</c>
+              <c span="2" class="control-group__control">
+                <DraggableSelect
+                  :values="[0, 25, 50, 75, 100, 125, 150, 175, 200]"
+                  :default="0"
+                  :emitArrayValue="true"
+                  v-model.number="knobThrottle"
+                />
+              </c>
             </template>
           </MDMControlGroup>
         </div>
@@ -445,6 +455,16 @@ export default {
       }
     },
 
+    knobThrottle: {
+      get() {
+        return this.$store.state.knobThrottle;
+      },
+
+      set(value) {
+        this.$store.commit("SET_KNOBTHROTTLE", value);
+      }
+    },
+
     friends() {
       // expression using this.showAboutDialog makes Vue run the shuffle
       // function each time this.showAboutDialog updates :)

src/components/MDMDial.vue

@@ -18,6 +18,7 @@
 <script>
 import genmdmMapping from "../genmdm-mapping";
 import redrawOnColorschemeChange from "./mixins/redraw-on-colorscheme-change";
+import _ from "lodash";
 
 export default {
   mixins: [redrawOnColorschemeChange],
@@ -61,7 +62,6 @@ export default {
 
   created() {
     this.updateFromStore();
-
     this.storeUnsubscribe = this.$store.subscribe(mutation => {
       if (mutation.type === "SET_CC_VALUE") {
         const { cc, value, channel } = mutation.payload;
@@ -77,7 +77,6 @@ export default {
       }
     });
   },
-
   mounted() {
     const { canvas } = this.$refs;
 
@@ -119,6 +118,10 @@ export default {
 
     title() {
       return genmdmMapping[this.cc].label;
+    },
+
+    mouseMoveThrottled() {
+      return _.throttle(this.mouseMove, this.$store.state.knobThrottle)
     }
   },
 
@@ -165,24 +168,23 @@ export default {
       } = this;
 
       if (document.pointerLockElement === canvas) {
-        document.addEventListener("pointermove", this.mouseMove, false);
+        document.addEventListener("pointermove", this.mouseMoveThrottled, false);
         document.addEventListener("pointerup", this.mouseUp);
       } else {
-        document.removeEventListener("pointermove", this.mouseMove, false);
+        document.removeEventListener("pointermove", this.mouseMoveThrottled, false);
         this.mouseUp();
       }
     },
 
     mouseUp() {
-      document.removeEventListener("pointermove", this.mouseMove, false);
+      document.removeEventListener("pointermove", this.mouseMoveThrottled, false);
       document.removeEventListener("pointerup", this.mouseUp);
       document.body.style.cursor =
         this.lastCursor === "ew-resize" ? "default" : this.lastCursor;
       this.mouseButtonDown = false;
       this.draw();
       this.lastPointerPosition = { x: -1, y: -1 };
     },
-
     mouseMove(e) {
       // first touch
       // I feel I've overengineered this somewhat

src/store/index.js

@@ -22,7 +22,8 @@ function createDefaultState() {
     maxPolyphonicChannels: 6,
     channel: 1,
     instrumentIndex: 0,
-    mdmiCompatibility: false
+    mdmiCompatibility: false,
+    knobThrottle: 0
   };
 
   const mappedCCNumbers = Object.keys(genmdmMapping);
@@ -256,6 +257,10 @@ const store = new Vuex.Store({
 
     SET_MDMICOMPATIBILITY(state, value) {
       state.mdmiCompatibility = value;
+    },
+
+    SET_KNOBTHROTTLE(state, value) {
+      state.knobThrottle = value;
     }
   }
 });

yarn.lock

@@ -6145,7 +6145,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==