More widgets

figuro/common/nodes/basics.nim

@@ -63,6 +63,8 @@ type
     fsSetGridCols
     fsSetGridRows
     fsGridAutoFlow
+    fsGridAutoRows
+    fsGridAutoColumns
     fsJustifyItems
     fsAlignItems
 

figuro/ui/apis.nim

@@ -463,22 +463,33 @@ template alignItems*(con: ConstraintBehavior) =
 #   ## align items on css grid (vertical)
 #   defaultGridTemplate()
 #   current.gridItem.align = con
-template placeItems*(con: ConstraintBehavior) =
-  ## align items on css grid (vertical)
+template layoutItems*(con: ConstraintBehavior) =
+  ## set justification and alignment on child items
   defaultGridTemplate()
   current.gridTemplate.justifyItems = con
   current.gridTemplate.alignItems = con
+  current.userSetFields.incl {fsGridAutoColumns, fsGridAutoRows}
+
+template layoutItems*(justify, align: ConstraintBehavior) =
+  ## set justification and alignment on child items
+  defaultGridTemplate()
+  current.gridTemplate.justifyItems = justify
+  current.gridTemplate.alignItems = align
+  current.userSetFields.incl {fsGridAutoColumns, fsGridAutoRows}
 
 template gridAutoFlow*(item: GridFlow) =
   defaultGridTemplate()
   current.gridTemplate.autoFlow = item
+  current.userSetFields.incl fsGridAutoFlow
 
 template gridAutoColumns*(item: Constraint) =
   defaultGridTemplate()
   current.gridTemplate.autos[dcol] = item
+  current.userSetFields.incl fsGridAutoColumns
 template gridAutoRows*(item: Constraint) =
   defaultGridTemplate()
   current.gridTemplate.autos[drow] = item
+  current.userSetFields.incl fsGridAutoRows
 
 template gridTemplateDebugLines*(grid: Figuro, color: Color = blueColor) =
   ## helper that draws css grid lines. great for debugging layouts.

figuro/ui/core.nim

@@ -377,16 +377,10 @@ template calcBasicConstraintImpl(
       var res: UICoord
       match val:
         UiAuto(_):
-          if not node.parent.isNil:
-            when astToStr(f) in ["w"]:
-              res = parentBox.f - parentBox.x - node.box.x
-            elif astToStr(f) in ["h"]:
-              res = parentBox.f - parentBox.y - node.box.y
-          else:
-            when astToStr(f) in ["w"]:
-              res = parentBox.f - node.box.x
-            elif astToStr(f) in ["h"]:
-              res = parentBox.f - node.box.y
+          when astToStr(f) in ["w"]:
+            res = parentBox.f -  node.box.x
+          elif astToStr(f) in ["h"]:
+            res = parentBox.f -  node.box.y
         UiFixed(coord):
           res = coord.UICoord
         UiFrac(frac):
@@ -546,9 +540,10 @@ proc computeLayout*(node: Figuro, depth: int) =
     # echo "computeLayout:grid:\n\tnode.box: ", node.box, "\n\tbox: ", box, "\n\tres: ", res, "\n\toverflows: ", node.gridTemplate.overflowSizes
     node.box = res
 
-    # for n in node.children:
-    #   calcBasicConstraint(n, dcol, isXY=false)
-    #   calcBasicConstraint(n, drow, isXY=false)
+    for n in node.children:
+      for c in n.children:
+        calcBasicConstraint(c, dcol, isXY=false)
+        calcBasicConstraint(c, drow, isXY=false)
 
   else:
     for n in node.children:

figuro/ui/utils.nim

@@ -136,7 +136,7 @@ const fieldSetNames = block:
     echo "FSN: ", names
     names
 
-macro optionals*(blk: untyped) =
+macro optionally*(blk: untyped) =
   ## Optionally sets any fields in `SetField` enum such as
   ## `fill` and `cornerRadius`.
   ## 

figuro/widgets/button.nim

@@ -45,13 +45,13 @@ proc draw*[T](self: Button[T]) {.slot.} =
     cornerRadius 10.0
 
     if self.disabled:
-      optionals:
+      optionally:
         fill css"#F0F0F0"
     else:
-      optionals:
+      optionally:
         fill css"#2B9FEA"
       onHover:
-        optionals:
+        optionally:
           fillHover current.fill.lighten(0.14)
           # this changes the color on hover!
 

figuro/widgets/horizontal.nim

@@ -0,0 +1,25 @@
+
+import commons
+import ../ui/utils
+import ../widget
+export widget
+
+type
+  Horizontal* = ref object of Figuro
+
+template itemWidth*(cx: Constraint, gap = -1'ui) =
+  when current isnot Horizontal:
+    {.error: "height template must be used in a vertical widget".}
+  gridAutoColumns cx
+  if gap != -1'ui:
+    columnGap gap
+
+proc draw*(self: Horizontal) {.slot.} =
+  ## button widget!
+  withDraw(self):
+    setGridRows 1'fr
+    gridAutoFlow grColumn
+    justifyItems CxCenter
+    alignItems CxCenter
+
+exportWidget(horizontal, Horizontal)

figuro/widgets/vertical.nim

@@ -7,20 +7,21 @@ export widget
 type
   Vertical* = ref object of Figuro
 
-template itemHeight*(cx: Constraint) =
+template itemHeight*(cx: Constraint, gap = -1'ui) =
   when current isnot Vertical:
     {.error: "height template must be used in a vertical widget".}
   gridAutoRows cx
+  if gap != -1'ui:
+    rowGap gap
 
 proc draw*(self: Vertical) {.slot.} =
   ## button widget!
   withDraw(self):
     setGridCols 1'fr
-    # setGridRows 90'ux
-    # gridAutoRows 1'fr
     gridAutoFlow grRow
     justifyItems CxCenter
     alignItems CxStart
-    # TemplateContents(self)
+    optionally:
+      gridAutoRows 1'fr
 
 exportWidget(vertical, Vertical)

tests/tclick.nim

@@ -1,4 +1,5 @@
-import figuro/widgets/buttonWrap
+import figuro/widgets/button
+import figuro/widgets/horizontal
 import figuro/widget
 import figuro
 
@@ -66,21 +67,24 @@ proc draw*(self: Main) {.slot.} =
       cornerRadius 10.0
       fill whiteColor.darken(self.hoveredAlpha).
                       spin(10*self.hoveredAlpha)
-      for i in 0 .. 4:
-        button("btn", state(int), captures(i)):
-          let btn = current
-          box ux(10 + i*120), 10'ux, 100'ux, 100'ux
+      horizontal "horiz":
+        box 10'ux, 0'ux, 100'pp, 100'pp
+        itemWidth 100'ux, gap = 20'ui
+        layoutItems justify=CxCenter, align=CxCenter
 
-          connect(current, doHover, self, Main.hover)
-          connect(current, doClick, current, btnClicked)
-          if i == 0:
-            connect(self, update, current, btnTick)
+        for i in 0 .. 4:
+          button("btn", state(int), captures(i)):
+            let btn = current
+            size 100'ux, 100'ux
+
+            connect(current, doHover, self, Main.hover)
+            connect(current, doClick, current, btnClicked)
+            if i == 0:
+              connect(self, update, current, btnTick)
 
-          contents "child":
             text "text":
-              box 10'ux, 10'ux, 80'pp, 80'pp
               fill blackColor
-              setText({font: $(btn.state)})
+              setText({font: $(btn.state)}, Center, Middle)
 
 var main = Main.new()
 

tests/texample.nim

@@ -32,13 +32,14 @@ proc draw*(self: Main) {.slot.} =
         rectangle "slider":
           size 200'ux, 45'ux
           fill "#00A0AA"
-          text "val":
+          text "txt1":
             setText({font: "test1"}, Center, Middle)
             fill css"#FFFFFF"
       rectangle "slider":
         size 0.5'fr, 0.5'fr
         fig.fill = css"#A000AA"
-        text "val":
+        text "txt2":
+          # size 100'pp, 100'pp
           setText({font: "test2"}, Center, Middle)
           fill css"#FFFFFF"
     gridTemplateDebugLines Figuro(vert)

tests/tgrid.nim

@@ -58,7 +58,8 @@ proc draw*(self: GridApp) {.slot.} =
 
         button "btn":
           # label fmt"Clicked1: {self.count:4d}"
-          size csAuto(), csAuto()
+          # size 100'ux, 30'ux
+          size 50'pp, 100'pp
           fill "#A00000"
           echo "cssize: ", current.cxSize.repr
 

tests/tlayers.nim

@@ -56,6 +56,7 @@ proc draw*(self: Main) {.slot.} =
       fill "#D0D0D0"
       box 50'pp, 10'pp, 30'pp, 80'pp
       cornerRadius 10.0
+      clipContent true
       text "text":
         box 10'pp, 10'ux, 70'pp, 22'ux
         fill blackColor

tests/tscroll.nim

@@ -23,7 +23,7 @@ proc draw*(self: Main) {.slot.} =
       offset 2'pp, 2'pp
       cornerRadius 7.0'ux
       size 96'pp, 90'pp
-      fig.settings.size.y = 20'ui
+      current.ScrollPane.settings.size.y = 20'ui
       contents "children":
         vertical "":
           # Setup CSS Grid Template