Merge pull request #2 from mkosir/feature/add-zoom

Feature/add zoom
mkosir · Nov 23, 2019 · d228c64 · d228c64
2 parents 5c31dd1 + e016f4b
commit d228c64
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-hook-mighty-mouse",
-  "version": "1.4.24",
+  "version": "1.4.25",
   "description": "React mouse hook",
   "main": "./dist/react-hook-mighty-mouse.umd.js",
   "module": "./dist/react-hook-mighty-mouse.es5.js",

diff --git a/src/react-hook-mighty-mouse/types.ts b/src/react-hook-mighty-mouse/types.ts
@@ -23,6 +23,8 @@ export type Mouse = {
     left: boolean | null;
     middle: boolean | null;
     right: boolean | null;
+    wheelDown: boolean | null;
+    wheelUp: boolean | null;
   };
   /*
    * Pressed keys
@@ -60,4 +62,10 @@ type SelectedElement = {
   isHover: boolean;
 };
 
-export type EventType = 'mousemove' | 'mousedown' | 'mouseup' | 'touchmove' | 'touchstart';
+export type EventType =
+  | 'mousemove'
+  | 'mousedown'
+  | 'mouseup'
+  | 'touchmove'
+  | 'touchstart'
+  | 'wheel';
diff --git a/src/react-hook-mighty-mouse/useMightyMouse.tsx b/src/react-hook-mighty-mouse/useMightyMouse.tsx
@@ -11,6 +11,8 @@ const initMouse: Mouse = {
     left: null,
     middle: null,
     right: null,
+    wheelDown: null,
+    wheelUp: null,
   },
   keyboard: {
     ctrl: null,
@@ -55,6 +57,7 @@ const useMightyMouse = (
       case 'mousemove':
       case 'mousedown':
       case 'mouseup':
+      case 'wheel':
         const mouseEvent = event as MouseEvent;
         clientX = mouseEvent.clientX;
         clientY = mouseEvent.clientY;
@@ -65,6 +68,8 @@ const useMightyMouse = (
         buttons.left = [1, 3, 5, 7].indexOf(mouseEvent.buttons) > -1;
         buttons.right = [2, 3, 6, 7].indexOf(mouseEvent.buttons) > -1;
         buttons.middle = [4, 5, 6, 7].indexOf(mouseEvent.buttons) > -1;
+        buttons.wheelDown = (event as WheelEvent).deltaY > 0;
+        buttons.wheelUp = (event as WheelEvent).deltaY < 0;
         break;
       case 'touchmove':
       case 'touchstart':
@@ -160,6 +165,7 @@ const useMightyMouse = (
     document.addEventListener('mousemove', onMouseTouchEvent);
     document.addEventListener('mousedown', onMouseTouchEvent);
     document.addEventListener('mouseup', onMouseTouchEvent);
+    document.addEventListener('wheel', onMouseTouchEvent);
     document.addEventListener('mouseleave', onLeave);
     document.addEventListener('keydown', onKeyEvent);
     document.addEventListener('keyup', onKeyEvent);
@@ -173,6 +179,7 @@ const useMightyMouse = (
       document.removeEventListener('mousemove', onMouseTouchEvent);
       document.removeEventListener('mousedown', onMouseTouchEvent);
       document.removeEventListener('mouseup', onMouseTouchEvent);
+      document.removeEventListener('wheel', onMouseTouchEvent);
       document.removeEventListener('mouseleave', onLeave);
       document.removeEventListener('keydown', onKeyEvent);
       document.removeEventListener('keyup', onKeyEvent);

diff --git a/stories/Buttons/Buttons.tsx b/stories/Buttons/Buttons.tsx
@@ -13,6 +13,8 @@ const Buttons = () => {
         <div className="key">{buttons.left ? <b>Left 👇</b> : 'Left'}</div>
         <div className="key">{buttons.middle ? <b>Middle 👇</b> : 'Middle'}</div>
         <div className="key">{buttons.right ? <b>Right 👇</b> : 'Right'}</div>
+        <div className="key">{buttons.wheelDown ? <b>Wheel Down 👇</b> : 'Wheel Down'}</div>
+        <div className="key">{buttons.wheelUp ? <b>Wheel Up 👆</b> : 'Wheel Up'}</div>
       </div>
     </div>
   );

diff --git a/stories/Buttons/_StorybookTabs.tsx b/stories/Buttons/_StorybookTabs.tsx
@@ -18,6 +18,8 @@ const Buttons = () => {
         <div className="key">{buttons.left ? <b>Left 👇</b> : 'Left'}</div>
         <div className="key">{buttons.middle ? <b>Middle 👇</b> : 'Middle'}</div>
         <div className="key">{buttons.right ? <b>Right 👇</b> : 'Right'}</div>
+        <div className="key">{buttons.wheelDown ? <b>Wheel Down 👇</b> : 'Wheel Down'}</div>
+        <div className="key">{buttons.wheelUp ? <b>Wheel Up 👆</b> : 'Wheel Up'}</div>
       </div>
     </div>
   );

diff --git a/stories/MouseCheese/MouseCheese.scss b/stories/MouseCheese/MouseCheese.scss
@@ -58,6 +58,65 @@
     }
   }
 
+  .size {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid black;
+    border-radius: 8px;
+    padding: 5px;
+    width: 180px;
+    margin-top: 5px;
+
+    .header {
+      font-size: 1em;
+      text-decoration: underline;
+    }
+
+    .columns {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+
+      .col-size-1 {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-right: 5px;
+
+        .row {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 0.85em;
+          margin-top: 5px;
+          min-width: 78px;
+        }
+      }
+
+      .col-size-2 {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .row {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 0.85em;
+          margin-top: 5px;
+          min-width: 60px;
+        }
+      }
+    }
+  }
+
   .mouse-hover {
     display: flex;
     flex-direction: column;
@@ -103,18 +162,33 @@
         text-decoration: underline;
       }
 
-      .keys {
+      .buttons {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: space-between;
         align-items: center;
         margin-top: 5px;
+        font-size: 0.85em;
+        line-height: 20px;
+        padding-left: 20px;
 
-        .key {
-          font-size: 0.85em;
-          line-height: 20px;
+        .btn-row1 {
+          min-width: 80px;
+        }
+        .btn-row2 {
+          min-width: 120px;
         }
       }
+
+      .keys {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 5px;
+        font-size: 0.85em;
+        line-height: 20px;
+      }
     }
   }
 }
diff --git a/stories/MouseCheese/MouseCheese.tsx b/stories/MouseCheese/MouseCheese.tsx
@@ -9,11 +9,13 @@ const MouseCheese = () => {
     position: { client },
     selectedElement: {
       position: { x, y, angle },
+      boundingRect,
       isHover,
     },
     buttons,
     keyboard,
   } = useMightyMouse(true, 'cheese', { x: 125, y: 70 });
+
   return (
     <div className="mouse-cheese">
       <img src={imgCheese} id="cheese" alt="pic" />
@@ -41,25 +43,52 @@ const MouseCheese = () => {
           <div className="row">angle: {angle && <div>{angle.toFixed(0)}°</div>}</div>
         </div>
       </div>
+      <div className="size">
+        <div className="header">Cheese</div>
+        <div className="columns">
+          <div className="col-size-1">
+            <div className="row">
+              Width: <div>{boundingRect.width && boundingRect.width.toFixed(0)}</div>
+            </div>
+            <div className="row">
+              Height: <div>{boundingRect.height && boundingRect.height.toFixed(0)}</div>
+            </div>
+          </div>
+          <div className="col-size-2">
+            <div className="row">
+              Left: <div>{boundingRect.left && boundingRect.left.toFixed(0)}</div>
+            </div>
+            <div className="row">
+              Top: <div>{boundingRect.top && boundingRect.top.toFixed(0)}</div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="mouse-hover">
         <div className="header">Hovering Over Cheese</div>
         <div className="row">{isHover ? <b>Yes 🧀</b> : 'No'}</div>
       </div>
       <div className="main-row-2">
         <div className="col">
-          <div className="header">Pressed mouse buttons 🖱️</div>
-          <div className="keys">
-            <div className="key">{buttons.left ? <b>Left 👇</b> : 'Left'}</div>
-            <div className="key">{buttons.middle ? <b>Middle 👇</b> : 'Middle'}</div>
-            <div className="key">{buttons.right ? <b>Right 👇</b> : 'Right'}</div>
+          <div className="header">Mouse buttons 🖱️</div>
+          <div className="buttons">
+            <div className="btn-row1">
+              <div>{buttons.left ? <b>Left 👇</b> : 'Left'}</div>
+              <div>{buttons.middle ? <b>Middle 👇</b> : 'Middle'}</div>
+              <div>{buttons.right ? <b>Right 👇</b> : 'Right'}</div>
+            </div>
+            <div className="btn-row2">
+              <div>{buttons.wheelDown ? <b>Wheel Down 👇</b> : 'Wheel Down'}</div>
+              <div>{buttons.wheelUp ? <b>Wheel Up 👆</b> : 'Wheel Up'}</div>
+            </div>
           </div>
         </div>
         <div className="col">
           <div className="header">Pressed keys ⌨️</div>
           <div className="keys">
-            <div className="key">{keyboard.ctrl ? <b>Ctrl 👇</b> : 'Ctrl'}</div>
-            <div className="key">{keyboard.shift ? <b>Shift 👇</b> : 'Shift'}</div>
-            <div className="key">{keyboard.alt ? <b>Alt 👇</b> : 'Alt'}</div>
+            <div>{keyboard.ctrl ? <b>Ctrl 👇</b> : 'Ctrl'}</div>
+            <div>{keyboard.shift ? <b>Shift 👇</b> : 'Shift'}</div>
+            <div>{keyboard.alt ? <b>Alt 👇</b> : 'Alt'}</div>
           </div>
         </div>
       </div>