Improvements v12.8 (#90)

* fix css apply for text
* fix css rules
* refactor css engine apply

Author: elcritch

README.md

@@ -262,3 +262,10 @@ type
     UiEnd ## marks end track of a CSS Grid layout
 ```
 
+### CSS Grid Layout Examples
+
+Example layouts using CSS Grid:
+- https://css-irl.info/solving-a-tricky-layout-problem/
+- https://apiumhub.com/tech-blog-barcelona/css-grid/
+
+

examples/hnbrowser.css

@@ -2,7 +2,7 @@
 Button {
   background: rgb(246, 246, 239);
   border-width: 5;
-  border-color: #ebc39a;
+  border-color: #000000;
   border-radius: 10;
   /* color: #000000; */
   box-shadow: none;
@@ -14,15 +14,29 @@ Button:hover {
 }
 
 #story {
-  background: #f5c480;
-  border-width: 5;
-  border-color: rgba(95, 84, 0, 0.45);
-  border-radius: 10;
-  color: #bdc0a0;
+  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;
 }
 
+#story:hover {
+  background: rgba(255, 170, 50, 0.57);
+  box-shadow: 5px 2px 4px rgba(47, 0, 75, 0.119);
+}
+
+/* .subtext, .subtext * {
+  color: #888;
+} */
+
+#scroll {
+  background-color: black;
+}
+
 #main {
-  background: #141414;
+  background-color: black;
+  color: #ddd;
 }

examples/hnbrowser.nim

@@ -43,8 +43,6 @@ proc hover*(self: Main, kind: EventKind) {.slot.} =
 
 proc draw*(self: Main) {.slot.} =
   withRootWidget(self):
-    # with this:
-    #   fill css"#0000AA"
 
     rectangle "outer":
       with this:
@@ -65,15 +63,12 @@ proc draw*(self: Main) {.slot.} =
           size 0.5'fr, 50'ux
           gridRow "top" // "items"
           gridColumn "left" // "right"
-        proc clickLoad(self: Main,
-                        kind: EventKind,
-                        buttons: UiButtonView) {.slot.} =
-          echo "Load clicked"
-          if kind == Init and not self.loading:
+        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)
-        this.connect(doMouseClick, self, clickLoad)
+            self.loading = true
+            refresh(self)
 
         Text.new "text":
           with this:
@@ -105,7 +100,6 @@ proc draw*(self: Main) {.slot.} =
           offset 2'pp, 2'pp
           cornerRadius 7.0'ux
           size 96'pp, 90'pp
-          # fill css"white"
 
           Vertical.new "items":
             with this:
@@ -115,22 +109,17 @@ proc draw*(self: Main) {.slot.} =
               capture story:
                 Button.new "story":
                   with this:
-                    size 1'fr, max(ux(2*lh), cx"min-content")
-                    # size 1'fr, cx"min-content"
-                    # fill blueColor.lighten(0.2)
-                  # if this.children.len() > 0:
-                  #   this.cxMin = this.children[0].cxMin
+                    size 1'fr, ux(2*lh)
                   Text.new "text":
                     with this:
-                      size 1'fr, max(ux(1.5*lh.float), cx"min-content")
+                      size 1'fr, ux(2*lh)
+                      # size 1'fr, max(ux(1.5*lh.float), cx"min-content")
                       offset 10'ux, 0'ux
                       foreground blackColor
                       justify Left
                       align Middle
                       text({font: $story.link.title})
-
-
-          printLayout(this, cmTerminal)
+          # printLayout(this, cmTerminal)
 
 var main = Main(name: "main")
 var frame = newAppFrame(main, size=(600'ui, 280'ui))

figuro.nimble

@@ -1,4 +1,4 @@
-version       = "0.12.7"
+version       = "0.12.8"
 author        = "Jaremy Creechley"
 description   = "UI Engine for Nim"
 license       = "MIT"

src/figuro/common/nodes/basiccss.nim

@@ -27,7 +27,7 @@ type
   CssTheme* = ref object
     rules*: seq[CssBlock]
 
-  CssBlock* = ref object
+  CssBlock* = object
     selectors*: seq[CssSelector]
     properties*: seq[CssProperty]
 
@@ -38,29 +38,29 @@ type
     skPseudo
     skSelectorList
 
-  CssSelector* = ref object
+  CssSelector* = object
     cssType*: string
     class*: string
     id*: string
     combinator*: CssSelectorKind
 
-  CssProperty* = ref object
+  CssProperty* = object
     name*: string
     value*: CssValue
 
-proc `==`*(a, b: CssSelector): bool =
-  if a.isNil and b.isNil:
-    return true
-  if a.isNil or b.isNil:
-    return false
-  a[] == b[]
-
-proc `==`*(a, b: CssProperty): bool =
-  if a.isNil and b.isNil:
-    return true
-  if a.isNil or b.isNil:
-    return false
-  a[] == b[]
+# proc `==`*(a, b: CssSelector): bool =
+#   if a.isNil and b.isNil:
+#     return true
+#   if a.isNil or b.isNil:
+#     return false
+#   a[] == b[]
+
+# proc `==`*(a, b: CssProperty): bool =
+#   if a.isNil and b.isNil:
+#     return true
+#   if a.isNil or b.isNil:
+#     return false
+#   a[] == b[]
 
 proc `$`*(val: CssValue): string =
   match val:

src/figuro/common/nodes/uinodes.nim

@@ -27,7 +27,7 @@ type
     events*: EventFlags
     signals*: EventFlags
 
-  Theme* = ref object
+  Theme* = object
     font*: UiFont
     css*: CssTheme
 
@@ -122,17 +122,10 @@ type
     font*: UiFont
     color*: Color = parseHtmlColor("black")
 
-# proc `=destroy`*(obj: type(Figuro()[])) =
-#   ## destroy
-#   let objPtr = unsafeWeakRef(cast[Figuro](addr(obj)))
-#   for child in obj.children:
-#     assert objPtr == child.parent
-#     child.parent.pt = nil
-
-# proc `box=`*[F](fig: F, box: Box) =
-#   fig.box = box
-# proc box*[F](fig: F): var Box =
-#   fig.box
+# proc changed*(f: Figuro): Hash =
+#   var h = Hash(0)
+#   h = h !& hash tp.filePath
+#   result = !$h
 
 proc children*(fig: WeakRef[Figuro]): seq[Figuro] =
   fig[].children
@@ -267,3 +260,14 @@ proc printFiguros*(n: Figuro, depth = 0) =
     $n.zlevel
   for ci in n.children:
     printFiguros(ci, depth + 1)
+
+proc refresh*(node: Figuro) {.slot.} =
+  ## Request that the node and it's children be redrawn
+  # echo "refresh: ", node.name, " :: ", getStackTrace()
+  if node == nil:
+    return
+  # app.requestedFrame.inc
+  assert not node.frame.isNil
+  node.frame[].redrawNodes.incl(node)
+  when defined(figuroDebugRefresh):
+    echo "REFRESH: ", getStackTrace()

src/figuro/ui/apisImpl.nim

@@ -231,12 +231,11 @@ proc setInnerText*(
 ) =
   ## Set the text on an item.
   if hasInnerTextChanged(node, spans, hAlign, vAlign):
-    trace "setText: ", nodeName = node.name
+    trace "setInnertText: ", name = node.name, uid= node.uid
     node.textLayout = system.getTypeset(node.box, spans, hAlign, vAlign)
     let maxPos = node.textLayout.maxPosition
     node.cxMin = [csFixed(maxPos.w), csFixed(maxPos.h)]
-    debug "innertText:", node= node.name, cxMin= node.cxMin
-    refresh(node)
+    refresh(node.parent[])
 
 
 ## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

src/figuro/ui/core.nim

@@ -104,16 +104,16 @@ proc removeExtraChildren*(node: Figuro) =
   echo nd(), "Disable:setlen: ", node.getId, " diff: ", node.diffIndex
   node.children.setLen(node.diffIndex)
 
-proc refresh*(node: Figuro) {.slot.} =
-  ## Request that the node and it's children be redrawn
-  # echo "refresh: ", node.name, " :: ", getStackTrace()
-  if node == nil:
-    return
-  # app.requestedFrame.inc
-  assert not node.frame.isNil
-  node.frame[].redrawNodes.incl(node)
-  when defined(figuroDebugRefresh):
-    echo "REFRESH: ", getStackTrace()
+# proc refresh*(node: Figuro) {.slot.} =
+#   ## Request that the node and it's children be redrawn
+#   # echo "refresh: ", node.name, " :: ", getStackTrace()
+#   if node == nil:
+#     return
+#   # app.requestedFrame.inc
+#   assert not node.frame.isNil
+#   node.frame[].redrawNodes.incl(node)
+#   when defined(figuroDebugRefresh):
+#     echo "REFRESH: ", getStackTrace()
 
 proc changed*(self: Figuro) {.slot.} =
   refresh(self)
@@ -248,8 +248,7 @@ proc newAppFrame*[T](root: T, size: (UiScalar, UiScalar), style = DecoratedResiz
   root.diffIndex = 0
   let frame = AppFrame(root: root)
   root.frame = frame.unsafeWeakRef()
-  if frame.theme.isNil:
-    frame.theme = Theme(font: defaultFont)
+  frame.theme = Theme(font: defaultFont)
   frame.setSize(size)
   frame.windowStyle = style
   refresh(root)
@@ -296,7 +295,7 @@ proc preNode*[T: Figuro](kind: NodeKind, nid: string, node: var T, parent: Figur
     trace "preNode:create:", nd = nd(),
       name= node.name, widget= node.widgetName,
       new = fmt"{$node.getId}/{node.parent.getId()}", n= node.name, parent= parent.uid
-    # refresh(node)
+    refresh(node)
   elif not (parent.children[parent.diffIndex] of T):
     # mismatched types, replace node
     createNewNode(T, node)