Fix Throttle In Containers

src/components/containers/brush-helpers.js

@@ -1,6 +1,6 @@
 import { Selection} from "victory-core";
 import { assign, throttle, isFunction, isEqual, defaults } from "lodash";
-
+import { attachId } from "../../helpers/event-handlers.js";
 
 const Helpers = {
   withinBounds(point, bounds, padding) {
@@ -260,5 +260,9 @@ export default {
   onMouseDown: Helpers.onMouseDown.bind(Helpers),
   onMouseUp: Helpers.onMouseUp.bind(Helpers),
   onMouseLeave: Helpers.onMouseLeave.bind(Helpers),
-  onMouseMove: throttle(Helpers.onMouseMove.bind(Helpers), 16, {leading: true})
+  onMouseMove: throttle(
+    attachId(Helpers.onMouseMove.bind(Helpers)),
+    16,
+    {leading: true, trailing: false}
+  )
 };

src/components/containers/selection-helpers.js

@@ -1,6 +1,7 @@
 import { Selection, Data, Helpers } from "victory-core";
 import { assign, throttle, isFunction } from "lodash";
 import React from "react";
+import { attachId } from "../../helpers/event-handlers.js";
 
 const SelectionHelpers = {
   getDatasets(props) {
@@ -144,5 +145,8 @@ const SelectionHelpers = {
 export default {
   onMouseDown: SelectionHelpers.onMouseDown.bind(SelectionHelpers),
   onMouseUp: SelectionHelpers.onMouseUp.bind(SelectionHelpers),
-  onMouseMove: throttle(SelectionHelpers.onMouseMove.bind(SelectionHelpers), 16, {leading: true})
+  onMouseMove: throttle(
+    attachId(SelectionHelpers.onMouseMove.bind(SelectionHelpers)),
+    16,
+    {leading: true, trailing: false})
 };

src/components/containers/victory-brush-container.js

@@ -40,19 +40,20 @@ export default class VictoryBrushContainer extends VictoryContainer {
     target: "parent",
     eventHandlers: {
       onMouseDown: (evt, targetProps) => {
-        BrushHelpers.onMouseMove.cancel();
         return BrushHelpers.onMouseDown(evt, targetProps);
       },
       onMouseMove: (evt, targetProps) => {
-        evt.persist();
-        return BrushHelpers.onMouseMove(evt, targetProps);
+        const mutations = BrushHelpers.onMouseMove(evt, targetProps);
+
+        if (mutations.id !== this.mouseMoveMutationId) { // eslint-disable-line
+          this.mouseMoveMutationId = mutations.id; // eslint-disable-line
+          return mutations.mutations;
+        }
       },
       onMouseUp: (evt, targetProps) => {
-        BrushHelpers.onMouseMove.cancel();
         return BrushHelpers.onMouseUp(evt, targetProps);
       },
       onMouseLeave: (evt, targetProps) => {
-        BrushHelpers.onMouseMove.cancel();
         return BrushHelpers.onMouseLeave(evt, targetProps);
       }
     }

src/components/containers/victory-selection-container.js

@@ -28,15 +28,17 @@ export default class VictorySelectionContainer extends VictoryContainer {
     target: "parent",
     eventHandlers: {
       onMouseDown: (evt, targetProps) => {
-        SelectionHelpers.onMouseMove.cancel();
         return SelectionHelpers.onMouseDown(evt, targetProps);
       },
       onMouseMove: (evt, targetProps) => {
-        evt.persist();
-        return SelectionHelpers.onMouseMove(evt, targetProps);
+        const mutations = SelectionHelpers.onMouseMove(evt, targetProps);
+
+        if (mutations.id !== this.mouseMoveMutationId) { // eslint-disable-line
+          this.mouseMoveMutationId = mutations.id; // eslint-disable-line
+          return mutations.mutations;
+        }
       },
       onMouseUp: (evt, targetProps) => {
-        SelectionHelpers.onMouseMove.cancel();
         return SelectionHelpers.onMouseUp(evt, targetProps);
       }
     }

src/components/containers/victory-voronoi-container.js

@@ -30,15 +30,13 @@ export default class VictoryVoronoiContainer extends VictoryContainer {
     target: "parent",
     eventHandlers: {
       onMouseLeave: (evt, targetProps) => {
-        VoronoiHelpers.onMouseMove.cancel();
         return VoronoiHelpers.onMouseLeave(evt, targetProps);
       },
       onMouseMove: (evt, targetProps) => {
-        evt.persist();
         const mutations = VoronoiHelpers.onMouseMove(evt, targetProps);
 
-        if (mutations.id !== this.mutationId) { // eslint-disable-line
-          this.mutationId = mutations.id; // eslint-disable-line
+        if (mutations.id !== this.mouseMoveMutationId) { // eslint-disable-line
+          this.mouseMoveMutationId = mutations.id; // eslint-disable-line
           return mutations.mutations;
         }
       }

src/components/containers/victory-zoom-container.js

@@ -30,31 +30,31 @@ export default class VictoryZoomContainer extends VictoryContainer {
     target: "parent",
     eventHandlers: {
       onMouseDown: (evt, targetProps) => {
-        ZoomHelpers.onMouseMove.cancel();
-        ZoomHelpers.onWheel.cancel();
         return ZoomHelpers.onMouseDown(evt, targetProps);
       },
       onMouseUp: (evt, targetProps) => {
-        ZoomHelpers.onMouseMove.cancel();
-        ZoomHelpers.onWheel.cancel();
         return ZoomHelpers.onMouseUp(evt, targetProps);
       },
       onMouseLeave: (evt, targetProps) => {
-        ZoomHelpers.onMouseMove.cancel();
-        ZoomHelpers.onWheel.cancel();
         return ZoomHelpers.onMouseLeave(evt, targetProps);
       },
       onMouseMove: (evt, targetProps, eventKey, ctx) => { // eslint-disable-line max-params
         evt.preventDefault();
-        evt.persist();
-        ZoomHelpers.onWheel.cancel();
-        return ZoomHelpers.onMouseMove(evt, targetProps, eventKey, ctx);
+        const mutations = ZoomHelpers.onMouseMove(evt, targetProps, eventKey, ctx);
+
+        if (mutations.id !== this.mouseMoveMutationId) { // eslint-disable-line
+          this.mouseMoveMutationId = mutations.id; // eslint-disable-line
+          return mutations.mutations;
+        }
       },
       onWheel: (evt, targetProps, eventKey, ctx) => { // eslint-disable-line max-params
         evt.preventDefault();
-        evt.persist();
-        ZoomHelpers.onMouseMove.cancel();
-        return ZoomHelpers.onWheel(evt, targetProps, eventKey, ctx);
+        const mutations = ZoomHelpers.onWheel(evt, targetProps, eventKey, ctx);
+
+        if (mutations.id !== this.wheelMutationId) { // eslint-disable-line
+          this.wheelMutationId = mutations.id; // eslint-disable-line
+          return mutations.mutations;
+        }
       }
     }
   }];

src/components/containers/voronoi-helpers.js

@@ -1,7 +1,8 @@
 import { Selection, Data, Helpers } from "victory-core";
-import { assign, throttle, isFunction, groupBy, keys, isEqual, uniqueId } from "lodash";
+import { assign, throttle, isFunction, groupBy, keys, isEqual } from "lodash";
 import { voronoi as d3Voronoi } from "d3-voronoi";
 import React from "react";
+import { attachId } from "../../helpers/event-handlers.js";
 
 const VoronoiHelpers = {
   withinBounds(props, point) {
@@ -153,15 +154,15 @@ const VoronoiHelpers = {
         points.map((point) => this.getActiveMutations(targetProps, point)) : [];
       const inactiveMutations = activePoints.length ?
         activePoints.map((point) => this.getInactiveMutations(targetProps, point)) : [];
-      return {
-        mutations: parentMutations.concat(...inactiveMutations, ...activeMutations),
-        id: uniqueId("mutationId")
-      };
+      return parentMutations.concat(...inactiveMutations, ...activeMutations);
     }
   }
 };
 
 export default {
   onMouseLeave: VoronoiHelpers.onMouseLeave.bind(VoronoiHelpers),
-  onMouseMove: throttle(VoronoiHelpers.onMouseMove.bind(VoronoiHelpers), 32, {leading: true})
+  onMouseMove: throttle(
+    attachId(VoronoiHelpers.onMouseMove.bind(VoronoiHelpers)),
+    32,
+    {leading: true, trailing: false})
 };

src/components/containers/zoom-helpers.js

@@ -1,5 +1,6 @@
 import { Selection, Collection } from "victory-core";
 import { throttle, isFunction, defaults } from "lodash";
+import { attachId } from "../../helpers/event-handlers.js";
 
 const Helpers = {
 
@@ -235,6 +236,14 @@ export default {
   onMouseDown: Helpers.onMouseDown.bind(Helpers),
   onMouseUp: Helpers.onMouseUp.bind(Helpers),
   onMouseLeave: Helpers.onMouseLeave.bind(Helpers),
-  onMouseMove: throttle(Helpers.onMouseMove.bind(Helpers), 16, {leading: true}),
-  onWheel: throttle(Helpers.onWheel.bind(Helpers), 16, {leading: true})
+  onMouseMove: throttle(
+    attachId(Helpers.onMouseMove.bind(Helpers)),
+    16,
+    {leading: true, trailing: false}
+  ),
+  onWheel: throttle(
+    attachId(Helpers.onWheel.bind(Helpers)),
+    16,
+    {leading: true, trailing: false}
+  )
 };

src/helpers/event-handlers.js

@@ -0,0 +1,8 @@
+import { uniqueId } from "lodash";
+
+export const attachId = (func) => {
+  return (...args) => ({
+    mutations: func(...args),
+    id: uniqueId("throttledEvent")
+  });
+};