From e016f4b4ed72f88b43559ba27d9886c4b2fcbe0b Mon Sep 17 00:00:00 2001
From: mkosir <kosir.mar@gmail.com>
Date: Sat, 23 Nov 2019 11:28:26 +0100
Subject: [PATCH] add/update stories

---
 stories/Buttons/Buttons.tsx            |   2 +
 stories/Buttons/_StorybookTabs.tsx     |   2 +
 stories/MouseCheese/MouseCheese.scss   |  84 +++++++++++++++-
 stories/MouseCheese/MouseCheese.tsx    |  45 +++++++--
 stories/MouseCheese/_StorybookTabs.tsx | 129 ++++++++++++++++++++++---
 5 files changed, 236 insertions(+), 26 deletions(-)

diff --git a/stories/Buttons/Buttons.tsx b/stories/Buttons/Buttons.tsx
index 0a8ece6..9f31440 100644
--- 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
index 7a90506..71e3b1d 100644
--- 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
index 0d9bc22..213f235 100644
--- 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
index aa03414..983fb32 100644
--- 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>
diff --git a/stories/MouseCheese/_StorybookTabs.tsx b/stories/MouseCheese/_StorybookTabs.tsx
index e90c8f7..1d53a6f 100644
--- a/stories/MouseCheese/_StorybookTabs.tsx
+++ b/stories/MouseCheese/_StorybookTabs.tsx
@@ -14,11 +14,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" />
@@ -46,25 +48,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>
@@ -134,6 +163,65 @@ const scss = `.mouse-cheese {
     }
   }
 
+  .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;
@@ -179,17 +267,32 @@ const scss = `.mouse-cheese {
         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;
       }
     }
   }