Merge pull request #1748 from Hypnosphi/free-the-mouse-3

Free the mouse take 3

Author: boygirl

packages/victory-brush-container/src/brush-helpers.js

@@ -151,6 +151,14 @@ const Helpers = {
     };
   },
 
+  constrainPoint(point, fullDomainBox) {
+    const { x1, y1, x2, y2 } = mapValues(fullDomainBox, Number);
+    return {
+      x: Math.min(Math.max(point.x, x1), x2),
+      y: Math.min(Math.max(point.y, y1), y2)
+    };
+  },
+
   hasMoved(props) {
     const { x1, x2, y1, y2, mouseMoveThreshold } = props;
     const brushDimension = this.getDimension(props);
@@ -262,11 +270,7 @@ const Helpers = {
   },
 
   // eslint-disable-next-line max-statements, complexity
-  onMouseMove(evt, targetProps) {
-    // if a panning or selection has not been started, ignore the event
-    if (!targetProps.isPanning && !targetProps.isSelecting) {
-      return {};
-    }
+  onGlobalMouseMove(evt, targetProps) {
     const {
       scale,
       isPanning,
@@ -276,15 +280,13 @@ const Helpers = {
       allowResize,
       allowDrag,
       horizontal,
-      mouseMoveThreshold
+      mouseMoveThreshold,
+      parentSVG
     } = targetProps;
     const brushDimension = this.getDimension(targetProps);
-    const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
     const { x, y } = Selection.getSVGEventCoordinates(evt, parentSVG);
-    // Ignore events that occur outside of the maximum domain region
     if (
       (!allowResize && !allowDrag) ||
-      !this.withinBounds({ x, y }, fullDomainBox) ||
       (mouseMoveThreshold > 0 && !this.hasMoved({ ...targetProps, x2: x, y2: y }))
     ) {
       return {};
@@ -312,8 +314,13 @@ const Helpers = {
         }
       ];
     } else if (allowResize && isSelecting) {
-      const x2 = brushDimension !== "y" ? x : targetProps.x2;
-      const y2 = brushDimension !== "x" ? y : targetProps.y2;
+      const { x: x2, y: y2 } = this.constrainPoint(
+        {
+          x: brushDimension !== "y" ? x : targetProps.x2,
+          y: brushDimension !== "x" ? y : targetProps.y2
+        },
+        fullDomainBox
+      );
       const currentDomain = Selection.getBounds({
         x2,
         y2,
@@ -337,7 +344,12 @@ const Helpers = {
     return {};
   },
 
-  onMouseUp(evt, targetProps) {
+  // eslint-disable-next-line complexity
+  onGlobalMouseUp(evt, targetProps) {
+    // if a panning or selection has not been started, ignore the event
+    if (!targetProps.isPanning && !targetProps.isSelecting) {
+      return {};
+    }
     // eslint-disable-line max-statements, complexity
     const {
       x1,
@@ -384,25 +396,15 @@ const Helpers = {
         mutation: () => mutatedProps
       }
     ];
-  },
-
-  onMouseLeave() {
-    return [
-      {
-        target: "parent",
-        mutation: () => ({ isPanning: false, isSelecting: false })
-      }
-    ];
   }
 };
 
 export default {
   ...Helpers,
   onMouseDown: Helpers.onMouseDown.bind(Helpers),
-  onMouseUp: Helpers.onMouseUp.bind(Helpers),
-  onMouseLeave: Helpers.onMouseLeave.bind(Helpers),
-  onMouseMove: throttle(
-    Helpers.onMouseMove.bind(Helpers),
+  onGlobalMouseUp: Helpers.onGlobalMouseUp.bind(Helpers),
+  onGlobalMouseMove: throttle(
+    Helpers.onGlobalMouseMove.bind(Helpers),
     16, // eslint-disable-line no-magic-numbers
     { leading: true, trailing: false }
   )

packages/victory-brush-container/src/victory-brush-container.js

@@ -60,23 +60,24 @@ export const brushContainerMixin = (base) =>
             onTouchStart: (evt, targetProps) => {
               return props.disable ? {} : BrushHelpers.onMouseDown(evt, targetProps);
             },
-            onMouseMove: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseMove(evt, targetProps);
+            onGlobalMouseMove: (evt, targetProps) => {
+              return props.disable || (!targetProps.isPanning && !targetProps.isSelecting)
+                ? {}
+                : BrushHelpers.onGlobalMouseMove(evt, targetProps);
             },
-            onTouchMove: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseMove(evt, targetProps);
+            onGlobalTouchMove: (evt, targetProps) => {
+              return props.disable || (!targetProps.isPanning && !targetProps.isSelecting)
+                ? {}
+                : BrushHelpers.onGlobalMouseMove(evt, targetProps);
             },
-            onMouseUp: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseUp(evt, targetProps);
+            onGlobalMouseUp: (evt, targetProps) => {
+              return props.disable ? {} : BrushHelpers.onGlobalMouseUp(evt, targetProps);
             },
-            onTouchEnd: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseUp(evt, targetProps);
+            onGlobalTouchEnd: (evt, targetProps) => {
+              return props.disable ? {} : BrushHelpers.onGlobalMouseUp(evt, targetProps);
             },
-            onMouseLeave: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseLeave(evt, targetProps);
-            },
-            onTouchCancel: (evt, targetProps) => {
-              return props.disable ? {} : BrushHelpers.onMouseLeave(evt, targetProps);
+            onGlobalTouchCancel: (evt, targetProps) => {
+              return props.disable ? {} : BrushHelpers.onGlobalMouseUp(evt, targetProps);
             }
           }
         }

packages/victory-core/src/victory-util/add-events.js

@@ -1,5 +1,16 @@
+/*global window:false */
 import React from "react";
-import { defaults, assign, keys, isFunction, pick, without, isEmpty, isNil } from "lodash";
+import {
+  defaults,
+  assign,
+  keys,
+  isFunction,
+  pick,
+  without,
+  isEmpty,
+  isNil,
+  difference
+} from "lodash";
 import Events from "./events";
 import isEqual from "react-fast-compare";
 import VictoryTransition from "../victory-transition/victory-transition";
@@ -30,6 +41,9 @@ export default (WrappedComponent, options) => {
       this.cacheValues(calculatedValues);
       this.externalMutations = this.getExternalMutations(props);
       this.calculatedState = this.getStateChanges(props);
+      this.globalEvents = {};
+      this.prevGlobalEventKeys = [];
+      this.boundGlobalEvents = {};
     }
 
     shouldComponentUpdate(nextProps) {
@@ -54,9 +68,41 @@ export default (WrappedComponent, options) => {
       return false;
     }
 
+    componentDidMount() {
+      const globalEventKeys = keys(this.globalEvents);
+      globalEventKeys.forEach((key) => this.addGlobalListener(key));
+      this.prevGlobalEventKeys = globalEventKeys;
+    }
+
     componentDidUpdate(prevProps) {
       const calculatedState = this.getStateChanges(prevProps);
       this.calculatedState = calculatedState;
+      const globalEventKeys = keys(this.globalEvents);
+      const removedGlobalEventKeys = difference(this.prevGlobalEventKeys, globalEventKeys);
+      removedGlobalEventKeys.forEach((key) => this.removeGlobalListener(key));
+      const addedGlobalEventKeys = difference(globalEventKeys, this.prevGlobalEventKeys);
+      addedGlobalEventKeys.forEach((key) => this.addGlobalListener(key));
+      this.prevGlobalEventKeys = globalEventKeys;
+    }
+
+    componentWillUnmount() {
+      this.prevGlobalEventKeys.forEach((key) => this.removeGlobalListener(key));
+    }
+
+    addGlobalListener(key) {
+      const boundListener = (event) => {
+        const listener = this.globalEvents[key];
+        return listener && listener(Events.emulateReactEvent(event));
+      };
+      this.boundGlobalEvents[key] = boundListener;
+      window.addEventListener(Events.getGlobalEventNameFromKey(key), boundListener);
+    }
+
+    removeGlobalListener(key) {
+      window.removeEventListener(
+        Events.getGlobalEventNameFromKey(key),
+        this.boundGlobalEvents[key]
+      );
     }
 
     // compile all state changes from own and parent state. Order doesn't matter, as any state
@@ -202,6 +248,10 @@ export default (WrappedComponent, options) => {
     renderContainer(component, children) {
       const isContainer = component.type && component.type.role === "container";
       const parentProps = isContainer ? this.getComponentProps(component, "parent", "parent") : {};
+      if (parentProps.events) {
+        this.globalEvents = Events.getGlobalEvents(parentProps.events);
+        parentProps.events = Events.omitGlobalEvents(parentProps.events);
+      }
       return React.cloneElement(component, parentProps, children);
     }
 

packages/victory-core/src/victory-util/events.js

@@ -1,4 +1,6 @@
-import { assign, isEmpty, isFunction, without, pickBy, uniq, includes, keys } from "lodash";
+import { assign, isEmpty, isFunction, without, pickBy, omitBy, uniq, includes, keys } from "lodash";
+
+const GLOBAL_EVENT_REGEX = /^onGlobal(.*)$/;
 
 export default {
   /* Returns all own and shared events that should be attached to a single target element,
@@ -372,5 +374,15 @@ export default {
         return memo;
       }, []);
     return events && events.length ? events : undefined;
-  }
+  },
+
+  getGlobalEventNameFromKey(key) {
+    const match = key.match(GLOBAL_EVENT_REGEX);
+    return match && match[1] && match[1].toLowerCase();
+  },
+
+  getGlobalEvents: (events) => pickBy(events, (_, key) => GLOBAL_EVENT_REGEX.test(key)),
+  omitGlobalEvents: (events) => omitBy(events, (_, key) => GLOBAL_EVENT_REGEX.test(key)),
+
+  emulateReactEvent: (event) => assign(event, { nativeEvent: event })
 };

packages/victory-shared-events/src/victory-shared-events.js

@@ -1,4 +1,5 @@
-import { assign, isFunction, defaults, isEmpty, fromPairs, keys } from "lodash";
+/*global window:false */
+import { assign, isFunction, defaults, isEmpty, fromPairs, keys, difference } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import { PropTypes as CustomPropTypes, Events, Helpers, TimerContext } from "victory-core";
@@ -61,6 +62,9 @@ export default class VictorySharedEvents extends React.Component {
     this.getEventState = Events.getEventState.bind(this);
     this.baseProps = this.getBaseProps(props);
     this.sharedEventsCache = {};
+    this.globalEvents = {};
+    this.prevGlobalEventKeys = [];
+    this.boundGlobalEvents = {};
   }
 
   shouldComponentUpdate(nextProps) {
@@ -72,6 +76,38 @@ export default class VictorySharedEvents extends React.Component {
     return true;
   }
 
+  componentDidMount() {
+    const globalEventKeys = keys(this.globalEvents);
+    globalEventKeys.forEach((key) => this.addGlobalListener(key));
+    this.prevGlobalEventKeys = globalEventKeys;
+  }
+
+  componentDidUpdate() {
+    const globalEventKeys = keys(this.globalEvents);
+    const removedGlobalEventKeys = difference(this.prevGlobalEventKeys, globalEventKeys);
+    removedGlobalEventKeys.forEach((key) => this.removeGlobalListener(key));
+    const addedGlobalEventKeys = difference(globalEventKeys, this.prevGlobalEventKeys);
+    addedGlobalEventKeys.forEach((key) => this.addGlobalListener(key));
+    this.prevGlobalEventKeys = globalEventKeys;
+  }
+
+  componentWillUnmount() {
+    this.prevGlobalEventKeys.forEach((key) => this.removeGlobalListener(key));
+  }
+
+  addGlobalListener(key) {
+    const boundListener = (event) => {
+      const listener = this.globalEvents[key];
+      return listener && listener(Events.emulateReactEvent(event));
+    };
+    this.boundGlobalEvents[key] = boundListener;
+    window.addEventListener(Events.getGlobalEventNameFromKey(key), boundListener);
+  }
+
+  removeGlobalListener(key) {
+    window.removeEventListener(Events.getGlobalEventNameFromKey(key), this.boundGlobalEvents[key]);
+  }
+
   getAllEvents(props) {
     const components = ["container", "groupComponent"];
     const componentEvents = Events.getComponentEvents(props, components);
@@ -231,9 +267,11 @@ export default class VictorySharedEvents extends React.Component {
       Events.getPartialEvents(parentEvents, "parent", parentProps),
       containerProps.events
     );
+    this.globalEvents = Events.getGlobalEvents(containerEvents);
+    const localEvents = Events.omitGlobalEvents(containerEvents);
     return role === "container"
-      ? React.cloneElement(container, assign({}, parentProps, { events: containerEvents }))
-      : React.cloneElement(container, containerEvents, children);
+      ? React.cloneElement(container, assign({}, parentProps, { events: localEvents }))
+      : React.cloneElement(container, localEvents, children);
   }
 
   render() {