Implementing a MouseLeaveHandler.

background-move/src/components/viewport.tsx

@@ -25,7 +25,7 @@ const Viewport: react.FC<{}> = (props: {}) => {
     console.log('mouseState: ' + JSON.stringify(mouseState));
   };
 
-  // TODO: implement resize and focusout or blur events
+  // TODO: implement resize event
   // TODO: check boundaries
 
   const mouseDownHandler = (event: any) => {
@@ -37,6 +37,15 @@ const Viewport: react.FC<{}> = (props: {}) => {
     });
   };
 
+  const mouseLeaveHandler = (event: any) => {
+    genericHandler(event);
+    event.preventDefault();
+    throtteledMouseMoveHandler.cancel();
+    setMouseState(initialMouseState);
+  };
+
+
+
   const mouseUpHandler = (event: any) => {
     genericHandler(event);
     event.preventDefault();
@@ -83,6 +92,7 @@ const Viewport: react.FC<{}> = (props: {}) => {
       onMouseDown={mouseDownHandler}
       onMouseMove={throtteledMouseMoveHandler}
       onMouseUp={mouseUpHandler}
+      onMouseLeave={mouseLeaveHandler}
     >
       <Background shift={shift} />
     </div>