Merge branch 'master' of github.com:treeform/fidget

Author: treeform

fidget.nimble

@@ -10,7 +10,7 @@ srcDir        = "src"
 
 requires "nim >= 1.0.0"
 requires "chroma >= 0.1.3"
-requires "typography >= 0.3.3"
+requires "typography >= 0.4.0"
 requires "flippy >= 0.4.4"
 requires "vmath >= 0.3.1"
 requires "print >= 0.1.0"

src/fidget.nim

@@ -266,6 +266,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
@@ -280,19 +287,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

@@ -385,7 +385,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,12 +401,12 @@ 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)
+      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
 
   # Typeset text
   if node.kind == nkText:
     computeTextLayout(node)
-
     case node.textStyle.autoResize:
       of tsNone:
         # Fixed sized text node.

src/fidget/opengl/context.nim

@@ -335,9 +335,35 @@ proc setVertColor(buf: var seq[uint8], i: int, color: ColorRGBA) =
   buf[i * 4 + 2] = color.b
   buf[i * 4 + 3] = color.a
 
-func `*`(m: Mat4, v: Vec2): Vec2 =
+func `*`*(m: Mat4, v: Vec2): Vec2 =
   (m * vec3(v, 0.0)).xy
 
+proc drawQuad*(
+  ctx: Context,
+  verts: array[4, Vec2],
+  uvs: array[4, Vec2],
+  colors: array[4, ColorRGBA],
+) =
+  ctx.checkBatch()
+
+  let offset = ctx.quadCount * 4
+  ctx.positions.data.setVert2(offset + 0, verts[0])
+  ctx.positions.data.setVert2(offset + 1, verts[1])
+  ctx.positions.data.setVert2(offset + 2, verts[2])
+  ctx.positions.data.setVert2(offset + 3, verts[3])
+
+  ctx.uvs.data.setVert2(offset + 0, uvs[0])
+  ctx.uvs.data.setVert2(offset + 1, uvs[1])
+  ctx.uvs.data.setVert2(offset + 2, uvs[2])
+  ctx.uvs.data.setVert2(offset + 3, uvs[3])
+
+  ctx.colors.data.setVertColor(offset + 0, colors[0])
+  ctx.colors.data.setVertColor(offset + 1, colors[1])
+  ctx.colors.data.setVertColor(offset + 2, colors[2])
+  ctx.colors.data.setVertColor(offset + 3, colors[3])
+
+  inc ctx.quadCount
+
 proc drawUvRect(ctx: Context, at, to: Vec2, uvAt, uvTo: Vec2, color: Color) =
   ## Adds an image rect with a path to an ctx
   ctx.checkBatch()
@@ -558,6 +584,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."

src/fidget/openglbackend.nim

@@ -27,7 +27,7 @@ computeTextLayout = proc(node: Node) =
     boundsMax: Vec2
     size = node.box.wh
   if node.textStyle.autoResize == tsWidthAndHeight:
-    size = vec2(0, 0)
+    size.x = 0
   node.textLayout = font.typeset(
     node.text.toRunes(),
     pos = vec2(0, 0),
@@ -51,9 +51,12 @@ proc focus*(keyboard: Keyboard, node: Node) =
     keyboard.onFocusNode = node
     keyboard.focusNode = node
 
+    var font = fonts[node.textStyle.fontFamily]
+    font.size = node.textStyle.fontSize
+    font.lineHeight = node.textStyle.lineHeight
     keyboard.input = node.text
     textBox = newTextBox(
-      fonts[node.textStyle.fontFamily],
+      font,
       int node.screenBox.w,
       int node.screenBox.h,
       node.text,
@@ -116,8 +119,8 @@ proc drawText(node: Node) =
   let editing = keyboard.focusNode == node
 
   if editing:
-    if textBox.size != node.box.wh:
-      textBox.resize(node.box.wh)
+    if textBox.size != node.screenBox.wh:
+      textBox.resize(node.screenBox.wh)
     node.textLayout = textBox.layout
     ctx.saveTransform()
     ctx.translate(-textBox.scroll)
@@ -128,7 +131,7 @@ proc drawText(node: Node) =
 
   # draw characters
   for glyphIdx, pos in node.textLayout:
-    if pos.character notin font.glyphs:
+    if pos.character notin font.typeface.glyphs:
       continue
     if pos.rune == Rune(32):
       # Don't draw space, even if font has a char for it.
@@ -162,7 +165,7 @@ proc drawText(node: Node) =
 
     if hashFill notin ctx.entries:
       var
-        glyph = font.glyphs[pos.character]
+        glyph = font.typeface.glyphs[pos.character]
         glyphOffset: Vec2
       let glyphFill = font.getGlyphImage(
         glyph,
@@ -174,7 +177,7 @@ proc drawText(node: Node) =
 
     if node.strokeWeight > 0 and hashStroke notin ctx.entries:
       var
-        glyph = font.glyphs[pos.character]
+        glyph = font.typeface.glyphs[pos.character]
         glyphOffset: Vec2
       let glyphFill = font.getGlyphImage(
         glyph,
@@ -323,6 +326,8 @@ proc setupFidget(
 
     drawMain()
 
+    root.removeExtraChildren()
+
     computeLayout(nil, root)
     computeScreenBox(nil, root)
 

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)