Fix center center offset.

Author: treeform

src/fidget.nim

@@ -261,6 +261,13 @@ proc image*(imageName: string) =
   ## Sets image fill.
   current.imageName = imageName
 
+proc orgBox*(x, y, w, h: int|float32|float32) =
+  ## Sets the box dimensions of the original element for constraints.
+  current.orgBox.x = float32 x
+  current.orgBox.y = float32 y
+  current.orgBox.w = float32 w
+  current.orgBox.h = float32 h
+
 proc box*(x, y, w, h: float32) =
   ## Sets the box dimensions.
   current.box.x = x
@@ -275,19 +282,14 @@ proc box*(
   h: int|float32|float64
 ) =
   ## Sets the box dimensions with integers
+  ## Always set box before orgBox when doing constraints.
   box(float32 x, float32 y, float32 w, float32 h)
+  orgBox(float32 x, float32 y, float32 w, float32 h)
 
 proc box*(rect: Rect) =
   ## Sets the box dimensions with integers
   box(rect.x, rect.y, rect.w, rect.h)
 
-proc orgBox*(x, y, w, h: int|float32|float32) =
-  ## Sets the box dimensions of the original element for constraints.
-  current.orgBox.x = float32 x
-  current.orgBox.y = float32 y
-  current.orgBox.w = float32 w
-  current.orgBox.h = float32 h
-
 proc rotation*(rotationInDeg: float32) =
   ## Sets rotation in degrees.
   current.rotation = rotationInDeg

src/fidget/common.nim

@@ -365,12 +365,29 @@ proc consume*(keyboard: Keyboard) =
 proc consume*(mouse: Mouse) =
   ## Reset the mouse state consuming any event information.
   buttonPress[MOUSE_LEFT] = false
-
+import print
 proc computeLayout*(parent, node: Node) =
   ## Computes constraints and auto-layout.
   for n in node.nodes:
     computeLayout(node, n)
 
+  # Typeset text
+  if node.kind == nkText:
+    computeTextLayout(node)
+    print node.textLayoutWidth
+    print node.textLayoutHeight
+    case node.textStyle.autoResize:
+      of tsNone:
+        # Fixed sized text node.
+        discard
+      of tsHeight:
+        # Text will grow down.
+        node.box.h = node.textLayoutHeight
+      of tsWidthAndHeight:
+        # Text will grow down and wide.
+        node.box.w = node.textLayoutWidth
+        node.box.h = node.textLayoutHeight
+
   # Constraints code.
   case node.constraintsVertical:
     of cMin: discard
@@ -385,7 +402,8 @@ proc computeLayout*(parent, node: Node) =
       let xDiff = parent.box.w - parent.orgBox.w
       node.box.w += xDiff
     of cCenter:
-      node.box.x = floor((parent.box.w - node.box.w) / 2.0)
+      let offset = floor((node.orgBox.w - parent.orgBox.w) / 2.0 + node.orgBox.x)
+      node.box.x = floor((parent.box.w - node.box.w) / 2.0) + offset
 
   case node.constraintsHorizontal:
     of cMin: discard
@@ -400,23 +418,8 @@ proc computeLayout*(parent, node: Node) =
       let yDiff = parent.box.h - parent.orgBox.h
       node.box.h += yDiff
     of cCenter:
-      node.box.y = floor((parent.box.h - node.box.h) / 2.0)
-
-  # Typeset text
-  if node.kind == nkText:
-    computeTextLayout(node)
-
-    case node.textStyle.autoResize:
-      of tsNone:
-        # Fixed sized text node.
-        discard
-      of tsHeight:
-        # Text will grow down.
-        node.box.h = node.textLayoutHeight
-      of tsWidthAndHeight:
-        # Text will grow down and wide.
-        node.box.w = node.textLayoutWidth
-        node.box.h = node.textLayoutHeight
+      let offset = floor((node.orgBox.h - parent.orgBox.h) / 2.0 + node.orgBox.y)
+      node.box.y = floor((parent.box.h - node.box.h) / 2.0) + offset
 
   # Auto-layout code.
   if node.layoutMode == lmVertical:

src/fidget/opengl/context.nim

@@ -558,6 +558,45 @@ proc strokeRoundedRect*(
     color
   )
 
+proc line*(
+  ctx: Context, a: Vec2, b: Vec2, color: Color
+) =
+  let hash = hash((
+    2345,
+    a,
+    b
+  ))
+
+  let
+    w = ceil(abs(b.x - a.x)).int
+    h = ceil(abs(a.y - b.y)).int
+    pos = vec2(min(a.x, b.x), min(a.y, b.y))
+
+  if hash notin ctx.entries:
+    var image = newImage(w, h, 4)
+    image.fill(rgba(255, 255, 255, 0))
+    image.line(
+      a-pos, b-pos,
+      rgba(255, 255, 255, 255)
+    )
+    ctx.putImage(hash, image)
+  let
+    uvRect = ctx.entries[hash]
+    wh = vec2(w.float32, h.float32) * ctx.atlasSize.float32
+  ctx.drawUvRect(
+    pos,
+    pos + vec2(w.float32, h.float32),
+    uvRect.xy,
+    uvRect.xy + uvRect.wh,
+    color
+  )
+
+proc linePolygon*(
+  ctx: Context, poly: seq[Vec2], color: Color
+) =
+  for i in 0 ..< poly.len:
+    ctx.line(poly[i], poly[(i+1) mod poly.len], color)
+
 proc clearMask*(ctx: Context) =
   ## Sets mask off (actually fills the mask with white).
   assert ctx.frameBegun == true, "ctx.beginFrame has not been called."

tests/centercentertext/centercentertext.nim

@@ -0,0 +1,30 @@
+## Shows a text pad like program.
+
+import fidget
+
+loadFont("IBM Plex Sans", "IBMPlexSans-Regular.ttf")
+
+setTitle("cCenter and vCenter text")
+
+proc drawMain() =
+
+  frame "phoneLike":
+    box 0, 0, parent.box.w, parent.box.h
+    orgBox 0, 0, 375, 667
+
+    fill "#ffffff"
+
+    text "Some Test X":
+      box 55, 81, 266, 62
+      constraints cCenter, cCenter
+      fill "#000000"
+      font "IBM Plex Sans", 48, 400, 48, hLeft, vCenter
+      characters "Some Test X"
+      textAutoResize tsWidthAndHeight
+
+    rectangle "box":
+      box 55, 81, 266, 62
+      constraints cCenter, cCenter
+      fill "#ff7b7b"
+
+startFidget(drawMain, w = 375, h = 667)

tests/centercentertext/data/IBMPlexSans-Regular.ttf

@@ -0,0 +1,27 @@
+import fidget
+
+setTitle("Constraints Center Offset")
+
+proc drawMain() =
+  frame "constraints":
+    orgBox 0, 0, 500, 500
+    box 0, 0, parent.box.w, parent.box.h
+    fill "#ffffff"
+    rectangle "Rectangle 5":
+      box 300, 100, 100, 100
+      constraints cCenter, cCenter
+      fill "#d8fbbd"
+    rectangle "Rectangle 4":
+      box 300, 300, 100, 100
+      constraints cCenter, cCenter
+      fill "#ff7b7b"
+    rectangle "Rectangle 3":
+      box 100, 300, 100, 100
+      constraints cCenter, cCenter
+      fill "#ffb48a"
+    rectangle "Rectangle 2":
+      box 100, 100, 100, 100
+      constraints cCenter, cCenter
+      fill "#abf1e5"
+
+startFidget(drawMain, w = 500, h = 500)

tests/centercentertext/screenshot.png

@@ -126,6 +126,8 @@ proc main(
   #   runList.add "tests/imagegen"
   #   runList.add "tests/imagestatic"
 
+  runList.add "tests/centercentertext"
+  runList.add "tests/constrantscenteroffset"
   runList.add "tests/autolayouttext"
   runList.add "tests/autolayoutcomplex"
   runList.add "tests/autolayouthorizontal"