Improvements v12.10 tweaks (#93)

* tweaks on apis
* calculating min/max font content
* adding test for text widget
* alternate text setup
* bump version - lots of changes recently - new baseline build
* updates
* tweak updates
* rename attrs to flags
* remove transparency field
* various fixes

Author: elcritch

examples/hnbrowser.css

@@ -13,14 +13,22 @@ Button:hover {
   box-shadow: 5px 2px 4px rgba(47, 0, 75, 0.119);
 }
 
+#items {
+  background: #5b5b5b;
+}
+
+#scrollbar-vertical {
+  background-color: rgb(57, 51, 1);
+}
+
 #story {
   background: black;
   border-width: 3;
   border-color: rgba(57, 50, 1, 0.45);
   border-radius: 6;
   color: #ddd;
   background: rgb(50, 50, 47);
-  height: 40;
+  /* height: 40; */
 }
 
 #story:hover {

examples/hnbrowser.nim

@@ -44,34 +44,46 @@ proc hover*(self: Main, kind: EventKind) {.slot.} =
 proc draw*(self: Main) {.slot.} =
   withRootWidget(self):
 
-    rectangle "outer":
+    Rectangle.new "outer":
       with this:
-        offset 10'ux, 10'ux
+        size 100'pp, 100'pp
         setGridCols 1'fr
         setGridRows ["top"] 70'ux \
                     ["items"] 1'fr \
-                    ["bottom"] 20'ux
+                    ["bottom"] 40'ux \
+                    ["end"] 0'ux
         setGridCols ["left"]  1'fr \
                     ["right"] 0'ux
-        gridColumn 1 // 1
         gridAutoFlow grRow
-        justifyItems CxCenter
-        alignItems CxStart
-
-      Button.new "Load":
-        with this:
-          size 0.5'fr, 50'ux
-          gridRow "top" // "items"
-          gridColumn "left" // "right"
-        onSignal(doMouseClick) do(self: Main, kind: EventKind, buttons: UiButtonView):
-          echo "Load clicked: ", kind
-          if kind == Done and not self.loading:
-            emit self.htmlLoad()
-            self.loading = true
-            refresh(self)
+        justifyItems CxStretch
+        alignItems CxStretch
+
+      # setPrettyPrintMode(cmTerminal)
+      # printLayout(this, cmTerminal)
+      onSignal(doMouseClick) do(this: Figuro,
+                    kind: EventKind,
+                    buttons: UiButtonView):
+        if kind == Done:
+          printLayout(this.frame[].root, cmTerminal)
+
+      Rectangle.new "top":
+        gridRow "top" // "items"
+        gridColumn "left" // "right"
+
+        Button.new "Load":
+          with this:
+            size 50'pp, 50'ux
+            offset 25'pp, 10'ux
+          onSignal(doMouseClick) do(self: Main, kind: EventKind, buttons: UiButtonView):
+            echo "Load clicked: ", kind
+            if kind == Done and not self.loading:
+              emit self.htmlLoad()
+              self.loading = true
+              refresh(self)
 
         Text.new "text":
           with this:
+            size 100'pp, 100'pp
             foreground blackColor
           case self.loading:
           of false:
@@ -92,38 +104,47 @@ proc draw*(self: Main) {.slot.} =
         with this:
           gridRow "items" // "bottom"
           gridColumn 1 // 2
-          offset 2'pp, 2'pp
           cornerRadius 7.0'ux
-          size 96'pp, 90'pp
+          size cx"auto", cx"none"
 
         ScrollPane.new "scroll":
-          offset 2'pp, 2'pp
+          offset 0'pp, 0'pp
           cornerRadius 7.0'ux
-          size 96'pp, 90'pp
-          echo "\n"
-          printLayout(this, cmTerminal)
+          size 100'pp, 100'pp
 
           Vertical.new "items":
             with this:
-              contentHeight cx"max-content", 3'ui
+              offset 0'ux, 0'ux
+              size 100'pp-10'ux, cx"max-content"
+              contentHeight cx"auto", 3'ui
 
             for idx, story in self.stories:
-              # if idx > 5: break
+              # if idx > 6: break
               capture story, idx:
-                Button.new "story" & $idx:
-                  onSignal(doRightClick) do(this: Button[tuple[]]):
+                Button[Submission].new "story":
+                  this.state = story
+                  # if idx == 0:
+                  #   printLayout(this, cmTerminal)
+                  onSignal(doRightClick) do(this: Button[Submission]):
                     printLayout(this, cmTerminal)
-                  with this:
-                    # size 1'fr, ux(2*lh)
-                    size 1'fr, max(ux(2.0*lh.float), cx"min-content")
-                  # this.cxPadOffset[drow] = 20'ux
-                  # this.cxPadSize[drow] = 20'ux
+                  onSignal(doSingleClick) do(this: Button[Submission]):
+                    echo "HN Story: "
+                    echo this.state
+                  size 1'fr, cx"auto"
+                  this.cxPadOffset[drow] = 10'ux
+                  this.cxPadSize[drow] = 10'ux
+
+                  Text.new "text":
+                    with this:
+                      offset 5'ux, 0'ux
+                      foreground blackColor
+                      justify Left
+                      align Middle
+                      text({font: $story.rank})
 
                   Text.new "text":
                     with this:
-                      size 1'fr, ux(2*lh)
-                      # size 1'fr, max(ux(1.5*lh.float), cx"min-content")
-                      offset 10'ux, 0'ux
+                      offset 40'ux, 0'ux
                       foreground blackColor
                       justify Left
                       align Middle

figuro.nimble

@@ -1,4 +1,4 @@
-version       = "0.12.9"
+version       = "0.12.10"
 author        = "Jaremy Creechley"
 description   = "UI Engine for Nim"
 license       = "MIT"
@@ -9,7 +9,7 @@ srcDir        = "src"
 requires "nim >= 2.0.10"
 requires "sigils >= 0.11.8"
 requires "pixie >= 5.0.1"
-requires "cssgrid >= 0.9.8"
+requires "cssgrid >= 0.10.0"
 requires "chroma >= 0.2.7"
 requires "bumpy"
 requires "pretty"

src/figuro/common/fonttypes.nim

@@ -51,7 +51,9 @@ type
     runes*: seq[Rune] ## The runes of the text.
     positions*: seq[Vec2] ## The positions of the glyphs for each rune.
     selectionRects*: seq[Rect] ## The selection rects for each glyph.
-    maxPosition*: UiSize
+    maxSize*: UiSize
+    minSize*: UiSize
+    bounding*: UiBox
 
   TextSpan* = object
     text*: string

src/figuro/common/fontutils.nim

@@ -13,11 +13,11 @@ import pretty
 
 type GlyphPosition* = ref object ## Represents a glyph position after typesetting.
   fontId*: FontId
-  fontSize*: float32
   rune*: Rune
   pos*: Vec2 # Where to draw the image character.
   rect*: Rect
   descent*: float32
+  lineHeight*: float32
 
 var
   glyphImageChan* = newChan[(Hash, Image)](1000)
@@ -46,9 +46,9 @@ proc getId*(typeface: Typeface): TypefaceId =
 iterator glyphs*(arrangement: GlyphArrangement): GlyphPosition =
   var idx = 0
 
-  var mlh = 0.0 # maximum line height per row (though this does in total?)
-  for f in arrangement.fonts:
-    mlh = max(f.lineHeight, mlh)
+  # var mlh = 0.0 # maximum line height per row (though this does in total?)
+  # for f in arrangement.fonts:
+  #   mlh = max(f.lineHeight, mlh)
 
   block:
     for i, (span, gfont) in zip(arrangement.spans, arrangement.fonts):
@@ -62,11 +62,12 @@ iterator glyphs*(arrangement: GlyphArrangement): GlyphPosition =
 
         yield GlyphPosition(
           fontId: gfont.fontId,
-          fontSize: gfont.size,
+          # fontSize: gfont.size,
           rune: rune,
           pos: pos,
           rect: selection,
           descent: descent,
+          lineHeight: gfont.lineHeight,
         )
 
         # echo "GLYPH: ", rune, " pos: ", pos, " sel: ", selection, " lh: ", gfont.lineHeight, " mlh: ", flh, " : ", flh - gfont.lineHeight
@@ -213,6 +214,64 @@ proc getLineHeightImpl*(font: UiFont): UiScalar =
   let (_, pf) = font.convertFont()
   result = pf.lineHeight.descaled()
 
+proc calcMinMaxContent(textLayout: GlyphArrangement): tuple[maxSize, minSize: UiSize, bounding: UiBox] =
+  ## estimate the maximum and minimum size of a given typesetting 
+
+  var longestWord: Slice[int]
+  var longestWordLen: float
+
+  var words = 0
+  var wordsHeight = 0.0
+  var curr: Slice[int]
+  var currLen: float
+  var maxWidth: float
+  var box: Rect = rect(float32.high, float32.high, 0, 0)
+
+  # find longest word and count the number of words
+  # herein min content width is longest word
+  # herein max content height is a word on each line
+  var idx = 0
+  for glyph in textLayout.glyphs():
+
+    maxWidth += glyph.rect.w
+    box.x = min(box.x, glyph.rect.x)
+    box.y = min(box.y, glyph.rect.y)
+    box.w = max(box.w, glyph.rect.x+glyph.rect.w)
+    box.h = max(box.h, glyph.rect.y+glyph.rect.h)
+
+    if glyph.rune.isWhiteSpace:
+      curr = idx+1..idx
+      currLen = 0.0
+    else:
+      if curr.len() == 1:
+        words.inc
+        wordsHeight += glyph.lineHeight
+      curr.b = idx
+      currLen += glyph.rect.w
+
+    if currLen > longestWordLen:
+      longestWord = curr
+      longestWordLen = currLen
+
+    # echo "RUNE: ", glyph.rune, " alpha: ", isWhiteSpace(glyph.rune), " idx: ", idx, " lw: ", longestWord, " curr: ", curr, "#", curr.len, " currLen: ", currLen, " x:", glyph.rect
+    idx.inc()
+  # echo "LONGEST WORD: ", longestWord, " len: ", longestWordLen, " word cnt: ", words, " height: ", wordsHeight
+
+  # find tallest font
+  var maxLine = 0.0
+  for font in textLayout.fonts:
+    maxLine = max(maxLine, font.lineHeight) 
+
+  # set results
+  result.minSize.w = longestWordLen.descaled()
+  result.minSize.h = maxLine.descaled()
+
+  result.maxSize.w = maxWidth.descaled()
+  result.maxSize.h = wordsHeight.descaled()
+
+  result.bounding = box.descaled()
+
+
 proc getTypesetImpl*(
     box: Box,
     uiSpans: openArray[(UiFont, string)],
@@ -291,15 +350,10 @@ proc getTypesetImpl*(
     selectionRects: selectionRects,
   )
 
-  # echo "arrangement:\n", result.repr
-  # print result
-  var maxPosition = vec2(float32.low, float32.low)
-  for selRect in result.selectionRects:
-    maxPosition.x = max(selRect.x + selRect.w, maxPosition.x)
-    maxPosition.y = max(selRect.y + selRect.h, maxPosition.y)
-
-  result.maxPosition.w = maxPosition.x.descaled() 
-  result.maxPosition.h = maxPosition.y.descaled() 
+  let content = result.calcMinMaxContent()
+  result.minSize = content.minSize
+  result.maxSize = content.maxSize
+  result.bounding = content.bounding
 
   result.generateGlyphImage()
   # echo "font: "

src/figuro/common/nodes/basics.nim

@@ -24,30 +24,24 @@ type
     nkScrollBar
     nkImage
 
+  NodeFlags* = enum
+    NfClipContent
+    NfDisableRender
+    NfScrollPanel
+    NfDead
+    NfPreDrawReady
+    NfPostDrawReady
+    NfContentsDrawReady
+    NfRootWindow
+    NfInitialized
+    # user facing attributes
+
   Attributes* = enum
-    clipContent
-    disableRender
-    scrollPanel
-    inactive
-    preDrawReady
-    postDrawReady
-    contentsDrawReady
-    rxWindowResize
-    rootWindow
-    initialized
-    # style attributes
-    zLevelSet
-    rotationSet
-    fillSet
-    fillHoverSet
-    highlightSet
-    transparencySet
-    strokeSet
-    imageSet
-    shadowSet
-    skipCss
+    SkipCss
+    Disabled
+    Active
+    Highlighted
 
-  FieldSet* = enum
     ## For tracking which fields have been set by the widget user code.
     ## 
     ## An example is setting `fill` in a button's code. We want this
@@ -61,7 +55,6 @@ type
     fsFill
     fsFillHover
     fsHighlight
-    fsTransparency
     fsStroke
     fsImage
     fsShadow

src/figuro/common/nodes/render.nim

@@ -29,13 +29,12 @@ type
     offset*: Vec2
     totalOffset*: Vec2
     scroll*: Vec2
-    attrs*: set[Attributes]
+    flags*: set[NodeFlags]
 
     zlevel*: ZLevel
     rotation*: float32
     fill*: Color
     highlight*: Color
-    transparency*: float32
     stroke*: Stroke
 
     case kind*: NodeKind

src/figuro/common/nodes/transfer.nim

@@ -92,13 +92,12 @@ proc convert*(current: Figuro): render.Node =
   result.offset = current.offset.scaled
   result.totalOffset = current.totalOffset.scaled
   result.scroll = current.scroll.scaled
-  result.attrs = current.attrs
+  result.flags = current.flags
 
   result.zlevel = current.zlevel
   result.rotation = current.rotation
   result.fill = current.fill
   result.highlight = current.highlight
-  result.transparency = current.transparency
   result.stroke = current.stroke
 
   case current.kind