From 348f8591f7bb6b5e1416f9064b78ac71c5aadbd7 Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Sat, 5 Dec 2020 11:41:11 +0100
Subject: [PATCH 1/6] Bump typography version in dependency list

---
 fidget.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fidget.nimble b/fidget.nimble
index fcc2bc4f..7efa958f 100644
--- a/fidget.nimble
+++ b/fidget.nimble
@@ -10,7 +10,7 @@ srcDir        = "src"
 
 requires "nim >= 1.0.0"
 requires "chroma >= 0.1.3"
-requires "typography >= 0.4.0"
+requires "typography >= 0.6.0"
 requires "pixie >= 0.0.2"
 requires "vmath >= 0.3.1"
 requires "print >= 0.1.0"

From d6dc4c3dcdc09244060062ce32cfa210b7f3ddc7 Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Wed, 2 Dec 2020 22:55:36 +0100
Subject: [PATCH 2/6] Add nimbledeps folder to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 44b9d505..6e52d510 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ package-lock.json
 *.flippy
 wasm
 *.html
+nimbledeps

From 3995baff73af83c7647b3697d7ebd9cdb7c5fe3f Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Wed, 2 Dec 2020 22:59:43 +0100
Subject: [PATCH 3/6] Add scrollable

scrollable, scroll and scrollSpeed attributes addded to Node, and corresponding setters

minimal_scroll.nim added in examples
---
 examples/minimal_scroll/minimal_scroll.nim | 21 +++++++++++++++++++++
 src/fidget.nim                             | 22 ++++++++++++++++++++++
 src/fidget/common.nim                      |  4 ++++
 3 files changed, 47 insertions(+)
 create mode 100644 examples/minimal_scroll/minimal_scroll.nim

diff --git a/examples/minimal_scroll/minimal_scroll.nim b/examples/minimal_scroll/minimal_scroll.nim
new file mode 100644
index 00000000..378daf2b
--- /dev/null
+++ b/examples/minimal_scroll/minimal_scroll.nim
@@ -0,0 +1,21 @@
+## This minimal example shows 5 blue squares in a scroll box
+
+import fidget
+
+proc drawMain() =
+  frame "main":
+    box 0, 0, 620, 140
+    frame "scrollBox":
+      box 5, 5, 610, 130
+      stroke "#000"
+      strokeWeight 1
+      clipContent true
+      scrollable true
+      fill "#FFF"
+      for i in 0 .. 4:
+        group "blockA" & $i:
+          scrollSpeed (i + 1) * 2 - 6
+          box 15 + (float i) * 120, 15, 100, 100
+          fill "#2B9FEA"
+
+startFidget(drawMain, w = 620, h = 140)
diff --git a/src/fidget.nim b/src/fidget.nim
index dad32066..f3652e45 100644
--- a/src/fidget.nim
+++ b/src/fidget.nim
@@ -280,6 +280,11 @@ proc box*(x, y, w, h: float32) =
   current.box.w = w
   current.box.h = h
 
+  ## Apply scrolling
+  if not parent.isNil:
+    if parent.scrollable:
+      current.box.y += parent.scroll.y * current.scrollSpeed
+
 proc box*(
   x: int|float32|float64,
   y: int|float32|float64,
@@ -358,6 +363,23 @@ proc scrollBars*(scrollBars: bool) =
   ## Causes the parent to clip the children and draw scroll bars.
   current.scrollBars = scrollBars
 
+proc scrollable*(scrollable: bool) =
+  ## Causes the parent to let scroll its children.
+  current.scrollable = scrollable
+
+  ## Accumulate scroll value
+  if current.scrollable:
+    onHover:
+      current.scroll.y += mouse.wheelDelta
+
+proc scrollSpeed*(scrollSpeed: float) =
+  ## Sets the speed at which a child is scolled inside its parent's box
+  current.scrollSpeed = scrollSpeed
+
+proc scrollSpeed*(scrollSpeed: int) =
+  ## Sets the speed at which a child is scolled inside its parent's box
+  current.scrollSpeed = float scrollSpeed
+
 proc cursorColor*(color: Color) =
   ## Sets the color of the text cursor.
   current.cursorColor = color
diff --git a/src/fidget/common.nim b/src/fidget/common.nim
index f35cecdc..e1903f09 100644
--- a/src/fidget/common.nim
+++ b/src/fidget/common.nim
@@ -142,6 +142,9 @@ type
     textLayoutWidth*: float32
     ## Can the text be selected.
     selectable*: bool
+    scrollable*: bool
+    scroll*: Vec2
+    scrollSpeed*: float
     scrollBars*: bool ## Should it have scroll bars if children are clipped.
 
   KeyState* = enum
@@ -320,6 +323,7 @@ proc resetToDefault*(node: Node)=
   node.clipContent = false
   node.diffIndex = 0
   node.selectable = false
+  node.scrollSpeed = 1
 
 proc setupRoot*() =
   if root == nil:

From 2da884d031cc9f80d0a6a0c2878f020ece2e559c Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Wed, 2 Dec 2020 23:29:50 +0100
Subject: [PATCH 4/6] Add horizontal scrolling

Several variables are now Vec2 instead of float (eg Mouse.wheelDelta), or tuple of boolean instead of boolean (eg Node.scrollable) to store both horizontal and vertical attributes
---
 examples/minimal_scroll/minimal_scroll.nim |  4 ++-
 src/fidget.nim                             | 40 +++++++++++++++-------
 src/fidget/common.nim                      | 10 +++---
 src/fidget/opengl/base.nim                 |  2 +-
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/examples/minimal_scroll/minimal_scroll.nim b/examples/minimal_scroll/minimal_scroll.nim
index 378daf2b..1b7d9f52 100644
--- a/examples/minimal_scroll/minimal_scroll.nim
+++ b/examples/minimal_scroll/minimal_scroll.nim
@@ -10,12 +10,14 @@ proc drawMain() =
       stroke "#000"
       strokeWeight 1
       clipContent true
-      scrollable true
+      scrollable true, true
       fill "#FFF"
       for i in 0 .. 4:
         group "blockA" & $i:
           scrollSpeed (i + 1) * 2 - 6
           box 15 + (float i) * 120, 15, 100, 100
           fill "#2B9FEA"
+          stroke "#000"
+          strokeWeight 1
 
 startFidget(drawMain, w = 620, h = 140)
diff --git a/src/fidget.nim b/src/fidget.nim
index f3652e45..bdba8ed0 100644
--- a/src/fidget.nim
+++ b/src/fidget.nim
@@ -280,10 +280,12 @@ proc box*(x, y, w, h: float32) =
   current.box.w = w
   current.box.h = h
 
-  ## Apply scrolling
+  ## Apply scroll
   if not parent.isNil:
-    if parent.scrollable:
-      current.box.y += parent.scroll.y * current.scrollSpeed
+    if parent.scrollable.x:
+      current.box.x += parent.scroll.x * current.scrollSpeed.x
+    if parent.scrollable.y:
+      current.box.y += parent.scroll.y * current.scrollSpeed.y
 
 proc box*(
   x: int|float32|float64,
@@ -363,22 +365,34 @@ proc scrollBars*(scrollBars: bool) =
   ## Causes the parent to clip the children and draw scroll bars.
   current.scrollBars = scrollBars
 
-proc scrollable*(scrollable: bool) =
+proc scrollable*(value: tuple[x: bool, y:bool]) =
   ## Causes the parent to let scroll its children.
-  current.scrollable = scrollable
+  current.scrollable = value
 
   ## Accumulate scroll value
-  if current.scrollable:
+  if current.scrollable.x or current.scrollable.y:
     onHover:
-      current.scroll.y += mouse.wheelDelta
+      current.scroll += mouse.wheelDelta
 
-proc scrollSpeed*(scrollSpeed: float) =
-  ## Sets the speed at which a child is scolled inside its parent's box
-  current.scrollSpeed = scrollSpeed
+proc scrollable*(xValue: bool, yValue: bool) = 
+  ## Causes the parent to let scroll its children.
+  scrollable((x: xValue, y: yValue))
+
+proc scrollable*(yValue: bool) = 
+  ## Causes the parent to let scroll its children.
+  scrollable((x: false, y: yValue))
+
+proc scrollSpeed*(value: Vec2) =
+  ## Sets the speed at which a child is scrolled inside its parent's box
+  current.scrollSpeed = value
+
+proc scrollSpeed*(value: int|float32|float64) =
+  ## Sets the speed at which a child is scrolled inside its parent's box
+  scrollSpeed(vec2(float32 value, float32 value))
 
-proc scrollSpeed*(scrollSpeed: int) =
-  ## Sets the speed at which a child is scolled inside its parent's box
-  current.scrollSpeed = float scrollSpeed
+proc scrollSpeed*(xValue, yValue: int|float32|float64) =
+  ## Sets the speed at which a child is scrolled inside its parent's box
+  scrollSpeed(vec2(float32 xValue, float32 yValue))
 
 proc cursorColor*(color: Color) =
   ## Sets the color of the text cursor.
diff --git a/src/fidget/common.nim b/src/fidget/common.nim
index e1903f09..8425527d 100644
--- a/src/fidget/common.nim
+++ b/src/fidget/common.nim
@@ -142,9 +142,9 @@ type
     textLayoutWidth*: float32
     ## Can the text be selected.
     selectable*: bool
-    scrollable*: bool
+    scrollable*: tuple[x: bool, y: bool]
     scroll*: Vec2
-    scrollSpeed*: float
+    scrollSpeed*: Vec2
     scrollBars*: bool ## Should it have scroll bars if children are clipped.
 
   KeyState* = enum
@@ -163,7 +163,7 @@ type
   Mouse* = ref object
     pos*, delta*, prevPos*: Vec2
     pixelScale*: float32
-    wheelDelta*: float32
+    wheelDelta*: Vec2
     cursorStyle*: MouseCursorStyle ## Sets the mouse cursor icon
     prevCursorStyle*: MouseCursorStyle
 
@@ -323,7 +323,7 @@ proc resetToDefault*(node: Node)=
   node.clipContent = false
   node.diffIndex = 0
   node.selectable = false
-  node.scrollSpeed = 1
+  node.scrollSpeed = vec2(1, 1)
 
 proc setupRoot*() =
   if root == nil:
@@ -339,7 +339,7 @@ proc setupRoot*() =
 
 proc clearInputs*() =
 
-  mouse.wheelDelta = 0
+  mouse.wheelDelta = vec2(0, 0)
 
   # Reset key and mouse press to default state
   for i in 0 ..< buttonPress.len:
diff --git a/src/fidget/opengl/base.nim b/src/fidget/opengl/base.nim
index 2ba086c6..1352900c 100644
--- a/src/fidget/opengl/base.nim
+++ b/src/fidget/opengl/base.nim
@@ -274,7 +274,7 @@ proc onScroll(window: staticglfw.Window, xoffset, yoffset: float64) {.cdecl.} =
   if keyboard.focusNode != nil:
     textBox.scrollBy(-yoffset * 50)
   else:
-    mouse.wheelDelta += yoffset
+    mouse.wheelDelta += vec2(xoffset, yoffset)
 
 proc onMouseButton(
   window: staticglfw.Window, button, action, modifiers: cint

From 03fdbaa2b543e425fe0bb69e0555f65d7b2de7a1 Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Thu, 3 Dec 2020 00:06:17 +0100
Subject: [PATCH 5/6] Fix type typo

---
 src/fidget.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fidget.nim b/src/fidget.nim
index bdba8ed0..d0d7f300 100644
--- a/src/fidget.nim
+++ b/src/fidget.nim
@@ -266,7 +266,7 @@ proc image*(imageName: string) =
   ## Sets image fill.
   current.imageName = imageName
 
-proc orgBox*(x, y, w, h: int|float32|float32) =
+proc orgBox*(x, y, w, h: int|float32|float64) =
   ## Sets the box dimensions of the original element for constraints.
   current.orgBox.x = float32 x
   current.orgBox.y = float32 y

From 95a37bf9f31d7e642b59ccccaf19e2ff89a7dc0f Mon Sep 17 00:00:00 2001
From: alt-tosc <75043384+alt-tosc@users.noreply.github.com>
Date: Thu, 3 Dec 2020 01:26:13 +0100
Subject: [PATCH 6/6] Add wheel event support for htmlbackend

---
 src/fidget/dom2.nim        | 7 +++++++
 src/fidget/htmlbackend.nim | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/src/fidget/dom2.nim b/src/fidget/dom2.nim
index 536f566d..45ea1e20 100644
--- a/src/fidget/dom2.nim
+++ b/src/fidget/dom2.nim
@@ -1154,6 +1154,13 @@ type
     screenX*, screenY*: int
     x*, y*: int
 
+  WheelEvent* = ref WheelEventObj ## see `docs<https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent>`
+  WheelEventObj {.importc.} = object of MouseEvent
+    deltaX*: float64
+    deltaY*: float64
+    deltaZ*: float64
+    deltaMode*: uint32
+
   DataTransferItemKind* {.pure.} = enum
     File = "file",
     String = "string"
diff --git a/src/fidget/htmlbackend.nim b/src/fidget/htmlbackend.nim
index cf826fda..b975f939 100644
--- a/src/fidget/htmlbackend.nim
+++ b/src/fidget/htmlbackend.nim
@@ -519,6 +519,12 @@ proc startFidget*(draw: proc(), load: proc() = nil, w = 0, h = 0) =
     ## Scroll does not need to do anything special in HTML mode
     refresh()
 
+  dom.window.addEventListener "wheel", proc(event: Event) =
+    ## When wheel is used
+    let event = cast[WheelEvent](event)
+    mouse.wheelDelta += vec2(event.deltaX, event.deltaY)
+    refresh()
+
   dom.window.addEventListener "mousedown", proc(event: Event) =
     ## When mouse button is pressed
     let event = cast[MouseEvent](event)