rename: some layout properties

Author: levovix0

src/sigui/layouts.nim

@@ -13,11 +13,17 @@ type
 
   Layout* = ref object of Uiobj
     orientation*: Property[LayoutOrientation]
-    spacing*, wrapSpacing*: Property[float32]
-    fillWithSpaces*, wrapFillWithSpaces*: Property[bool]
-    hugContent*: Property[bool]
+
+    hugContent*: Property[bool] = true.property
     wrapHugContent*: Property[bool] = true.property
-    alignment*, wrapAlignment*: Property[LayoutAlignment]
+    
+    align*: Property[LayoutAlignment]
+    fillContainer*: Property[bool]
+
+    alignContent*, wrapAlignContent*: Property[LayoutAlignment]
+
+    gap*, wrapGap*: Property[float32]
+    fillWithSpaces*, wrapFillWithSpaces*: Property[bool]
     consistentSpacing*: Property[bool]
 
     wrap*: Property[bool]
@@ -28,7 +34,7 @@ type
     inRepositionProcess: bool
 
   InLayout* = ref object of Uiobj
-    alignment*: Property[LayoutAlignment]
+    align*: Property[LayoutAlignment]
     fillContainer*: Property[bool]
 
     isChangingW, isChangingH: bool
@@ -69,8 +75,8 @@ proc reposition(this: Layout) =
     for child in this.childs:
       if child.visibility == collapsed: continue
       if x != 0:
-        x += this.spacing[]
-        rows[^1].freeSpace -= this.spacing[]
+        x += this.gap[]
+        rows[^1].freeSpace -= this.gap[]
       x += child.get_w
       inc i
 
@@ -81,7 +87,7 @@ proc reposition(this: Layout) =
           (this.lengthBeforeWrap[] > 0 and x > this.lengthBeforeWrap[])
         )
       ):
-        rows[^1].freeSpace += this.spacing[]
+        rows[^1].freeSpace += this.gap[]
         rows[^1].h = h
         i = 1
         x = child.get_w
@@ -104,13 +110,13 @@ proc reposition(this: Layout) =
 
   block:
     let freeYSpace =
-      if this.wrapFillWithSpaces[]: rows.mapit(it.h).foldl(a + this.wrapSpacing[] + b)
+      if this.wrapFillWithSpaces[]: rows.mapit(it.h).foldl(a + this.wrapGap[] + b)
       else: 0'f32
 
     var y =
       if this.wrapfillWithSpaces[]: 0'f32
       else:
-        case this.wrapAlignment[]
+        case this.wrapAlignContent[]
         of start: 0'f32
         of center: freeYSpace / 2
         of `end`: freeYSpace
@@ -120,7 +126,7 @@ proc reposition(this: Layout) =
         x =
           if this.fillWithSpaces[]: 0'f32
           else:
-            case this.alignment[]
+            case this.alignContent[]
             of start: 0'f32
             of center: freeSpace / 2
             of `end`: freeSpace
@@ -132,39 +138,57 @@ proc reposition(this: Layout) =
       for child in row:
         child.set_x(x)
 
-        if child of InLayout:
-          if child.InLayout.fillContainer[]:
+        let fillContainer =
+          if child of InLayout: child.InLayout.fillContainer[]
+          else: this.fillWithSpaces[]
+        
+        let align =
+          if child of InLayout: child.InLayout.align[]
+          else: this.align[]
+        
+        if fillContainer:
+          if child of InLayout:
             for child in child.childs:
               child.set_h(this.get_h)
-            child.set_y(0)
           else:
-            case child.InLayout.alignment[]
-            of start:
-              child.set_y(y)
-            of center:
-              child.set_y(y + h / 2 - child.get_h / 2)
-            of `end`:
-              child.set_y(y + h - child.get_h)
-        
+            child.set_h(this.get_h)
+
+          child.set_y(0)
+
         else:
-          child.set_y(y)
+          case align
+          of start:
+            child.set_y(y)
+          of center:
+            child.set_y(y + h / 2 - child.get_h / 2)
+          of `end`:
+            child.set_y(y + h - child.get_h)
 
-        x += child.get_w + this.spacing[] + spaceBetween
+        x += child.get_w + this.gap[] + spaceBetween
 
-      y += h + this.wrapSpacing[] + (if rows.len > 1: freeYSpace / (rows.len.float32 - 1) else: 0)
+      y += h + this.wrapGap[] + (if rows.len > 1: freeYSpace / (rows.len.float32 - 1) else: 0)
 
   if this.hugContent[]:
     if this.childs.len > 0:
       this.set_w(rows.mapit(it.childs[^1].get_x + it.childs[^1].get_w).foldl(max(a, b), 0'f32))
     else:
       this.set_w(0)
+
   if this.wrapHugContent[]:
     if this.childs.len > 0:
       this.set_h(rows[^1].childs.mapit(it.get_y + it.get_h).foldl(max(a, b), 0'f32))
     else:
       this.set_w(0)
 
 
+template spacing*(this: Layout): Property[float32] = this.gap
+template wrapSpacing*(this: Layout): Property[float32] = this.wrapGap
+template alignment*(this: Layout): Property[float32] = this.alignContent
+template wrapAlignment*(this: Layout): Property[float32] = this.wrapAlignContent
+
+template alignment*(this: InLayout): Property[float32] = this.align
+
+
 method addChild*(this: Layout, child: Uiobj) =
   if this.newChildsObject != nil:
     this.newChildsObject.addChild(child)
@@ -177,7 +201,7 @@ method addChild*(this: Layout, child: Uiobj) =
   # todo: disconnect if child is no loger child
 
   if child of InLayout:
-    child.InLayout.alignment.changed.connectTo this: reposition(this)
+    child.InLayout.align.changed.connectTo this: reposition(this)
     child.InLayout.fillContainer.changed.connectTo this: reposition(this)
 
   reposition(this)
@@ -214,15 +238,22 @@ method init*(this: Layout) =
 
   doRepositionWhenChanged w
   doRepositionWhenChanged h
-  doRepositionWhenChanged spacing
-  doRepositionWhenChanged wrapSpacing
-  doRepositionWhenChanged fillWithSpaces
-  doRepositionWhenChanged wrapFillWithSpaces
+  
   doRepositionWhenChanged hugContent
   doRepositionWhenChanged wrapHugContent
-  doRepositionWhenChanged alignment
-  doRepositionWhenChanged wrapAlignment
+  
+  doRepositionWhenChanged align
+  doRepositionWhenChanged fillContainer
+
+  doRepositionWhenChanged alignContent
+  doRepositionWhenChanged wrapAlignContent
+
+  doRepositionWhenChanged gap
+  doRepositionWhenChanged wrapGap
+  doRepositionWhenChanged fillWithSpaces
+  doRepositionWhenChanged wrapFillWithSpaces
   doRepositionWhenChanged consistentSpacing
+  
   doRepositionWhenChanged wrap
   doRepositionWhenChanged elementsBeforeWrap
   doRepositionWhenChanged lengthBeforeWrap

tests/t_todoapp.nim

@@ -44,16 +44,20 @@ test "todo app":
         right = addTask.left - 10
         text = "sample task"
         this.textObj[].font[] = typeface.withSize(32)
+
+        this.onKeyDown enter:
+          mouse.mouseDownAndUpInside.emit()
 
       - UiRect() as addTask:
         right = parent.right - 5
         this.fillVertical(parent, 4)
-        this.binding w: this.h[]
-        this.binding color:
+        w := this.h[]
+        
+        radius = 5
+        color = binding:
           if mouse.pressed[]: color(0.43, 0.15, 0.76).lighten(0.1)
           elif mouse.hovered[]: color(0.43, 0.15, 0.76).lighten(0.2)
           else: color(0.43, 0.15, 0.76)
-        radius = 5
 
         - this.color.transition(0.4's):
           easing = outCubicEasing
@@ -66,9 +70,13 @@ test "todo app":
 
         - MouseArea() as mouse:
           this.fill parent
+
           this.mouseDownAndUpInside.connectTo this:
+            if taskName.text[] == "": return
             app.tasks.add((name: taskName.text[], complete: false.property))
             app.tasksChanged.emit()
+            taskName.pushState()
+            taskName.text[] = ""
 
     - ClipRect():
       this.fillHorizontal(parent, 20)
@@ -79,7 +87,7 @@ test "todo app":
         this.fill parent
 
         - Uiobj():
-          this.binding w: parent.w[]
+          w := parent.w[]
 
           - this.y.transition(0.2's):
             easing = outSquareEasing
@@ -94,37 +102,38 @@ test "todo app":
             this.binding w: parent.w[]
 
             orientation = vertical
-            spacing = 0
-            hugContent = true
+            gap = 10
 
             for i in 0..app.tasks.high:
               template task: auto = app.tasks[i]
 
-              - UiText():
-                this.text[] = task.name
-                
-                this.binding font:
-                  let it = typeface.withSize(24)
-                  it.strikethrough = task.complete[]
-                  it
-                
-                this.binding color:
-                  if mouse.pressed[]: color(0.2, 0.2, 0.2)
-                  elif mouse.hovered[]: color(0.4, 0.4, 0.4)
-                  else: color(0, 0, 0)
-
-                - MouseArea() as mouse:
-                  this.fill parent
-                  this.mouseDownAndUpInside.connectTo this:
-                    task.complete[] = not task.complete[]
+              - Layout():
+                gap = 10
+                align = center
 
                 - Switch(isOn: task.complete[].property):
-                  left = parent.right + 10
-                  centerY = parent.center
                   color = color(0.43, 0.15, 0.76)
 
-                  this.binding isOn: task.complete[]
+                  isOn := task.complete[]
                   this.bindingValue task.complete[]: this.isOn[]
+
+                - UiText():
+                  text = task.name
+                  
+                  this.binding font:
+                    let it = typeface.withSize(24)
+                    it.strikethrough = task.complete[]
+                    it
+                  
+                  this.binding color:
+                    if mouse.pressed[]: color(0.2, 0.2, 0.2)
+                    elif mouse.hovered[]: color(0.4, 0.4, 0.4)
+                    else: color(0, 0, 0)
+
+                  - MouseArea() as mouse:
+                    this.fill parent
+                    this.mouseDownAndUpInside.connectTo this:
+                      task.complete[] = not task.complete[]
 
     app.tasksChanged.connectTo app:
       app.layout[] = Layout()