Setup frame 3

README.md

@@ -3,6 +3,8 @@
 
 A GUI toolkit for Nim that is event driven while being small and fast. It tries to incorporate the best elements of both imperitive and object oriented GUI toolkits. Originally based on Fidget it now has a multi-threaded core and improved event system. All widgets are typed and can contain their own state.
 
+*Warning*: Figuro is still in an *alpha* stage and code and apis will be in flux. Some pieces still aren't completed.
+
 ## Example
 
 Example drawing buttons with a fading background when any of them are hovered (see below for how it works):
@@ -32,7 +34,7 @@ proc btnClicked*(self: Button[int],
   ## which we can use to check if it's a mouse click
   if buttons == {MouseLeft} or buttons == {DoubleClick}:
     if kind == Enter:
-      self.state.inc
+      self.state.inc()
       refresh(self)
 
 proc btnHover*(self: Main, evtKind: EventKind) {.slot.} =
@@ -43,52 +45,53 @@ proc btnHover*(self: Main, evtKind: EventKind) {.slot.} =
 proc draw*(self: Main) {.slot.} =
   ## draw slot for Main widget called whenever an event
   ## triggers a node or it's parents to be refreshed
-  nodes(self):
-    node.setName "main"
 
-    # Calls the widget template `rectangle`.
-    # This creates a new basic widget node. Generally used to draw generic rectangles.
-    rectangle "body":
+  node.setName "main"
+
+  # Calls the widget template `rectangle` which creates a new basic widget node.
+  # Generally used to draw generic boxes.
+  # Here we need to pass the `parent` argument since there's no current `node` set
+  rectangle "body", parent=self:
+    with node:
+      # sets the bounding box of this node
+      box 10'ux, 10'ux, 600'ux, 120'ux
+      cornerRadius 10.0
+      # `fill` sets the background color. Color apis use the `chroma` library
+      fill whiteColor.darken(self.bkgFade.amount)
+
+    # sets up horizontal widget node with alternate syntax
+    horizontal "horiz":
       with node:
-        # sets the bounding box of this node
-        box 10'ux, 10'ux, 600'ux, 120'ux
-        cornerRadius 10.0
-        # `fill` sets the background color. Color apis use the `chroma` library
-        fill whiteColor.darken(self.bkgFade.amount)
-
-      # sets up horizontal widget node with alternate syntax
-      Horizontal.new "horiz": # same as `horizontal "horiz":`
-        with node:
-          box 10'ux, 0'ux, 100'pp, 100'pp
-          # `itemWidth` is needed to set the width of items
-          # in the horizontal widget
-          itemWidth 100'ux, gap = 20'ui
-          layoutItems justify=CxCenter, align=CxCenter
-
-        for i in 0 .. 4:
-          Button[int].new("btn", captures(i)):
-            let btn = node
+        box 10'ux, 0'ux, 100'pp, 100'pp
+        # `itemWidth` is needed to set the width of items
+        # in the horizontal widget
+        itemWidth 100'ux, gap = 20'ui
+        layoutItems justify=CxCenter, align=CxCenter
+
+      for i in 0 .. 4:
+        buttonOf[int] "btn", captures=[i]:
+          # widgets with generic type like Button can use `<name>Of[T]` to set the generic type, otherwise void is used
+          let btn = node
+          with node:
+            size 100'ux, 100'ux
+            connect(doHover, self, btnHover)
+            connect(doClick, node, btnClicked)
+          if i == 0:
+            connect(self, update, node, btnTick)
+
+          text "text":
             with node:
-              size 100'ux, 100'ux
-              connect(doHover, self, btnHover)
-              connect(doClick, node, btnClicked)
-            if i == 0:
-              connect(self, update, node, btnTick)
-
-            text "text":
-              with node:
-                fill blackColor
-                setText({font: $(btn.state)}, Center, Middle)
+              fill blackColor
+              setText({font: $(btn.state)}, Center, Middle)
 
 proc tick*(self: Main, tick: int, time: MonoTime) {.slot.} =
   ## handles background "fade" when buttons are hovered
   self.bkgFade.tick(self)
   emit self.update()
 
 var main = Main.new()
-app.width = 720
-app.height = 140
-startFiguro(main)
+let frame = newAppFrame(main, size=(400'ui, 140'ui))
+startFiguro(frame)
 ```
 
 ![Click Example](tests/tclick-screenshot.png)
@@ -116,33 +119,44 @@ type
   Main* = ref object of Figuro
 
 proc draw*(self: Main) {.slot.} =
-  nodes(self):
-    rectangle "body":
-      # each widget template injects a new `node` variable
-      # that references the current widget
+  rectangle "body", parent=self:
+    # each widget template injects a new `node` variable
+    # that references the current widget
 
-      # sets the bounding box of this node
-      box node, 10'ux, 10'ux, 600'ux, 120'ux
+    # sets the bounding box of this node
+    box node, 10'ux, 10'ux, 600'ux, 120'ux
 
-      # set the fill color
-      fill node, css"00001F"
+    # set the fill color
+    fill node, css"00001F"
 
 var main = Main.new()
-app.width = 720
-app.height = 140
-startFiguro(main)
+let frame = newAppFrame(main, size=(400'ui, 140'ui))
+frame.startFiguro()
 ```
 
-The `nodes` template sets up the needed vars for creating nodes. The `rectangle` widget template sets up a basic widget. Widget templates create a new node, adds it as a child to the current node, and sets up the callbacks needed for a node. 
+The `rectangle` widget template sets up a basic widget. Widget templates create a new node, adds it as a child to the current node, and sets up the callbacks needed for a node. 
+
+### Exporting a Widget Instance
 
-It's possible to manually create nodes, but it's not encouraged. Although it can be handy to understand the how it works. The blue rectangle example roughly expands to:
+If the last line is `result = node` then the widget template will return the widget. Due to limitations in how the templates work, only `result = node` will work and it must be the last line of the widget: 
 
 ```nim
 proc draw*(self: Main) {.slot.} =
-  var node {.inject.} = self
+  let vert = vertical "vert", parent=self:
+    size node, 400'ux, 120'ux
+    result = node
 
-  block:
-    # rectangle "body":
+  echo "vertical node created: ", vert
+```
+
+### Manual Nodes
+
+It's possible to manually create nodes, but it's not encouraged. Although it can be handy to understand the how it works. The blue rectangle example above expands to:
+
+```nim
+proc draw*(self: Main) {.slot.} =
+  var node = self
+  block: # rectangle
     let parent {.inject.}: Figuro = node
     var node {.inject.}: `widgetType` = nil
     preNode(BasicFiguro, "body", node, parent)
@@ -161,21 +175,20 @@ There's an alternative syntax that builds on a specialized `new` template. It wo
 
 ```nim
 proc draw*(self: Main) {.slot.} =
-  nodes(self):
-    BasicFiguro.new "body":
-      with node:
-        box 10'ux, 10'ux, 600'ux, 120'ux
-        cornerRadius 10.0
-        fill whiteColor.darken(self.hoveredAlpha)
-      horizontal "horiz":
-        offset node, 10'ux, 0'ux
-        itemWidth node, cx"min-content", gap = 20'ui
-        for i in 0 .. 4:
-          Button[int].new "btn", captures(i):
-            with node:
-              size 100'ux, 100'ux
-              # we need to connect the nodes onHover event
-              connect(doHover, self, buttonHover)
+  BasicFiguro.new "body", parent=self:
+    with node:
+      box 10'ux, 10'ux, 600'ux, 120'ux
+      cornerRadius 10.0
+      fill whiteColor.darken(self.hoveredAlpha)
+    Horizontal.new "horiz":
+      offset node, 10'ux, 0'ux
+      itemWidth node, cx"min-content", gap = 20'ui
+      for i in 0 .. 4:
+        Button[int].new "btn", captures(i):
+          with node:
+            size 100'ux, 100'ux
+            # we need to connect the nodes onHover event
+            connect(doHover, self, buttonHover)
 ```
 
 Currently both syntaxes are supported and can be mixed and matched.

figuro/common/nodes/ui.nim

@@ -1,5 +1,6 @@
 import std/unicode
 import std/monotimes
+import std/hashes
 import basics
 import ../../meta
 import ../../inputs
@@ -26,7 +27,17 @@ type
   Theme* = ref object
     font*: UiFont
 
+  AppFrame* = ref object
+    redrawNodes*: OrderedSet[Figuro]
+    root*: Figuro
+    uxInputList*: Chan[AppInputs]
+    running*, focused*, minimized*, fullscreen*: bool
+
+    windowSize*: Box ## Screen size in logical coordinates.
+    windowRawSize*: Vec2    ## Screen coordinates
+
   Figuro* = ref object of Agent
+    frame*: AppFrame
     parent*: Figuro
     uid*: NodeID
     name*: StackString[16]
@@ -80,6 +91,9 @@ type
   Property*[T] = ref object of Agent
     value*: T
 
+proc hash*(a: AppFrame): Hash =
+  a.root.hash()
+
 proc new*[T: Figuro](tp: typedesc[T]): T =
   result = T()
   result.agentId = nextAgentId()

figuro/exec.nim

@@ -10,7 +10,8 @@ else:
   export opengl
 
 import std/os
-import std/sets
+import std/sharedtables
+
 import shared, internal
 import ui/[core, events]
 import common/nodes/ui
@@ -28,17 +29,15 @@ when not defined(gcArc) and not defined(gcOrc) and not defined(nimdoc):
   {.error: "Figuro requires --gc:arc or --gc:orc".}
 
 var
-  mainApp*: MainCallback
-  tickMain*: MainCallback
-  eventMain*: MainCallback
-  loadMain*: MainCallback
-  sendRoot*: proc (nodes: sink RenderNodes) {.closure.}
+  runFrame*: proc(frame: AppFrame) {.nimcall.}
+  appFrames*: Table[AppFrame, Renderer]
+
 
 const renderPeriodMs {.intdefine.} = 16
 const appPeriodMs {.intdefine.} = 16
 
 var frameTickThread, appTickThread: Thread[void]
-var appThread, : Thread[MainCallback]
+var appThread, : Thread[AppFrame]
 
 proc renderTicker() {.thread.} =
   while true:
@@ -48,39 +47,39 @@ proc renderTicker() {.thread.} =
     if app.tickCount == app.tickCount.typeof.high:
       app.tickCount = 0
 
-proc runRenderer(renderer: Renderer) =
-  while app.running:
-    wait(uiRenderEvent)
-    timeIt(renderAvgTime):
-      renderer.render(true)
-
 proc appTicker() {.thread.} =
   while app.running:
     uiAppEvent.trigger()
     os.sleep(renderPeriodMs - 2)
 
-proc runApplication(mainApp: MainCallback) {.thread.} =
+proc runApplication(frame: AppFrame) {.thread.} =
   {.gcsafe.}:
     while app.running:
       wait(uiAppEvent)
       timeIt(appAvgTime):
-        tickMain()
-        eventMain()
-        mainApp()
+        runFrame(frame)
         app.frameCount.inc()
 
-proc run*(renderer: Renderer) =
+proc runRenderer(renderer: Renderer) =
+  while app.running and renderer.frame.running:
+    wait(uiRenderEvent)
+    timeIt(renderAvgTime):
+      renderer.render(true)
+
+proc setupFrame*(frame: AppFrame): Renderer =
+  let renderer = setupRenderer(frame)
+  appFrames[frame] = renderer
+  result = renderer
 
-  sendRoot = proc (nodes: sink RenderNodes) =
-      renderer.updated = true
-      renderer.nodes = nodes
+proc run*(frame: AppFrame) =
+  let renderer = setupFrame(frame)
 
   uiRenderEvent = initUiEvent()
   uiAppEvent = initUiEvent()
 
   createThread(frameTickThread, renderTicker)
   createThread(appTickThread, appTicker)
-  createThread(appThread, runApplication, mainApp)
+  createThread(appThread, runApplication, frame)
 
   proc ctrlc() {.noconv.} =
     echo "Got Ctrl+C exiting!"