more work in new UI

src/ui/node.nim

@@ -154,22 +154,23 @@ proc `contentDirty=`*(node: UINode, value: bool) {.inline.} =
 
 when defined(js):
   func id*(node: UINode): lent Id {.importjs: "#.mId".}
-  func lastChange*(node: UINode): int {.inline.} = max(node.mLastContentChange, max(node.mLastPositionChange, max(node.mLastSizeChange, max(node.mLastClearInvalidation, node.mLastDrawInvalidation))))
   func text*(node: UINode): lent string {.importjs: "#.mText".}
   func backgroundColor*(node: UINode): Color {.importjs: "#.mBackgroundColor".}
   func borderColor*(node: UINode): Color {.importjs: "#.mBorderColor".}
   func textColor*(node: UINode): Color {.importjs: "#.mTextColor".}
   func flags*(node: UINode): UINodeFlags {.importjs: "#.flags".}
 else:
   func id*(node: UINode): lent Id {.inline.} = node.mId
-  func lastChange*(node: UINode): int {.inline.} = max(node.mLastContentChange, max(node.mLastPositionChange, max(node.mLastSizeChange, max(node.mLastClearInvalidation, node.mLastDrawInvalidation))))
   func text*(node: UINode): lent string {.inline.} = node.mText
   func backgroundColor*(node: UINode): Color {.inline.} = node.mBackgroundColor
   func borderColor*(node: UINode): Color {.inline.} = node.mBorderColor
   func textColor*(node: UINode): Color {.inline.} = node.mTextColor
 
   func flags*(node: UINode): UINodeFlags {.inline.} = node.flags
 
+func lastChange*(node: UINode): int {.inline.} = max(node.mLastContentChange, max(node.mLastPositionChange, max(node.mLastSizeChange, max(node.mLastClearInvalidation, node.mLastDrawInvalidation))))
+func lastSizeChange*(node: UINode): int {.inline.} = node.mLastSizeChange
+
 proc `text=`*(node: UINode, value: string)           {.inline.} = (let changed = (value != node.mText);            node.contentDirty = node.contentDirty or changed; if changed: node.mText            = value else: discard)
 proc `backgroundColor=`*(node: UINode, value: Color) {.inline.} = (let changed = (value != node.mBackgroundColor); node.contentDirty = node.contentDirty or changed; if changed: node.mBackgroundColor = value else: discard)
 proc `borderColor=`*(node: UINode, value: Color)     {.inline.} = (let changed = (value != node.mBorderColor);     node.contentDirty = node.contentDirty or changed; if changed: node.mBorderColor     = value else: discard)

test.nim

@@ -24,13 +24,7 @@ proc getFont*(font: string, fontSize: float32): Font =
 var builder = newNodeBuilder()
 builder.useInvalidation = true
 
-var image = newImage(1000, 1000)
-var ctx = newContext(image)
-ctx.strokeStyle = rgb(255, 0, 0)
-ctx.font = "fonts/FiraCode-Regular.ttf"
-ctx.fontSize = 17
-
-let font = getFont(ctx.font, ctx.fontSize)
+let font = getFont("fonts/FiraCode-Regular.ttf", 17)
 let bounds = font.typeset(repeat("#", 100)).layoutBounds()
 
 builder.charWidth = bounds.x / 100.0
@@ -40,17 +34,16 @@ builder.lineGap = 6
 var framebufferId: GLuint
 var framebuffer: Texture
 
-var window = newWindow("", ivec2(image.width.int32 * 2, image.height.int32), WindowStyle.Decorated, vsync=false)
+var window = newWindow("", ivec2(1680, 1080), WindowStyle.DecoratedResizable, vsync=false)
 makeContextCurrent(window)
 loadExtensions()
 enableAutoGLerrorCheck(false)
 
 var bxy = newBoxy()
-bxy.addImage("image", image)
 
 framebuffer = Texture()
-framebuffer.width = image.width.int32 * 2
-framebuffer.height = image.height.int32
+framebuffer.width = window.size.x
+framebuffer.height = window.size.y
 framebuffer.componentType = GL_UNSIGNED_BYTE
 framebuffer.format = GL_RGBA
 framebuffer.internalFormat = GL_RGBA8
@@ -121,8 +114,6 @@ proc drawNode(builder: UINodeBuilder, node: UINode, offset: Vec2 = vec2(0, 0), f
       imageId = $newId()
       cachedImages[key] = imageId
 
-      # let font = renderer.getFont(renderer.ctx.fontSize * (1 + self.fontSizeIncreasePercent), self.style.fontStyle)
-
       const wrap = false
       let wrapBounds = if wrap: vec2(node.boundsActual.w, node.boundsActual.h) else: vec2(0, 0)
       let arrangement = font.typeset(node.text, bounds=wrapBounds)
@@ -152,12 +143,16 @@ proc randomColor(node: UINode, a: float32): Color =
   result.b = (((h shr 16) and 0xff).float32 / 255.0).sqrt
   result.a = a
 
-proc renderNewFrame(builder: UINodeBuilder): bool =
+proc renderNewFrame(builder: UINodeBuilder, force: bool): bool =
   # let buildTime = startTimer()
   result = false
 
+  var force = force
+
+  let size = if showDrawnNodes: window.size.vec2 * vec2(0.5, 1) else: window.size.vec2
+
   if advanceFrame:
-    builder.beginFrame(vec2(image.width.float32, image.height.float32))
+    builder.beginFrame(size)
     builder.buildUINodes()
     builder.endFrame()
     result = true
@@ -166,6 +161,9 @@ proc renderNewFrame(builder: UINodeBuilder): bool =
     builder.postProcessNodes()
     result = true
 
+  if builder.root.lastSizeChange == builder.frameIndex:
+    force = true
+
   # echo "[build] ", buildTime.elapsed.ms, "ms"
 
   drawnNodes.setLen 0
@@ -176,25 +174,25 @@ proc renderNewFrame(builder: UINodeBuilder): bool =
       echo "frame ", builder.frameIndex
       echo builder.root.dump(true)
 
-    builder.drawNode(builder.root)
+    builder.drawNode(builder.root, force = force)
   # echo "[draw] ", drawTime.elapsed.ms, "ms (", drawnNodes.len, " nodes)"
 
   if showDrawnNodes and result:
     bxy.pushLayer()
     defer:
       bxy.pushLayer()
-      bxy.drawRect(rect(image.width.float32, 0, image.width.float32, image.height.float32), color(1, 0, 0, 1))
+      bxy.drawRect(rect(size.x, 0, size.x, size.y), color(1, 0, 0, 1))
       bxy.popLayer(blendMode = MaskBlend)
       bxy.popLayer()
 
-    bxy.drawRect(rect(image.width.float32, 0, image.width.float32, image.height.float32), color(0, 0, 0))
+    bxy.drawRect(rect(size.x, 0, size.x, size.y), color(0, 0, 0))
 
     for node in drawnNodes:
       let c = node.randomColor(0.3)
-      bxy.drawRect(rect(node.lx + image.width.float32, node.ly, node.lw, node.lh), c)
+      bxy.drawRect(rect(node.lx + size.x, node.ly, node.lw, node.lh), c)
 
       if DrawBorder in node.flags:
-        bxy.strokeRect(rect(node.lx + image.width.float32, node.ly, node.lw, node.lh), color(c.r, c.g, c.b, 0.5), 5, offset = 0.5)
+        bxy.strokeRect(rect(node.lx + size.x, node.ly, node.lw, node.lh), color(c.r, c.g, c.b, 0.5), 5, offset = 0.5)
 
 proc toMouseButton(button: Button): MouseButton =
   result = case button:
@@ -302,6 +300,15 @@ while not window.closeRequested:
 
   pollEvents()
 
+  var force = false
+
+  if framebuffer.width != window.size.x.int32 or framebuffer.height != window.size.y.int32:
+    framebuffer.width = window.size.x.int32
+    framebuffer.height = window.size.y.int32
+    bindTextureData(framebuffer, nil)
+    advanceFrame = true
+    force = true
+
   bxy.beginFrame(window.size, clearFrame=false)
 
   for image in cachedImages.removedKeys:
@@ -311,7 +318,7 @@ while not window.closeRequested:
   builder.frameTime = delta
 
   let tAdvanceFrame = startTimer()
-  let drewSomething = builder.renderNewFrame()
+  let drewSomething = builder.renderNewFrame(force)
   let msAdvanceFrame = tAdvanceFrame.elapsed.ms
 
   bxy.endFrame()

test2.nim

@@ -412,7 +412,7 @@ proc doRender(time: float) =
 
     let updateTimer = startTimer()
     if advanceFrame:
-      builder.beginFrame(vec2(1000, 1000))
+      builder.beginFrame(rend.size)
       builder.buildUINodes()
       builder.endFrame()
     elif builder.animatingNodes.len > 0:
@@ -492,12 +492,6 @@ proc drawNode(builder: UINodeBuilder, platform: BrowserPlatform, element: var El
   var childrenToRemove: seq[Element] = @[]
 
   platform.domUpdates.add proc() =
-    let elementLen = element.children.len
-    # echo element.children.len, " -> ", node.len
-    # for i in node.len..<elementLen:
-      # echo "remove child ", i
-      # element.removeChild(element.lastChild)
-
     for (c, rel, other) in newChildren:
       if rel == "":
         element.appendChild c
@@ -543,7 +537,6 @@ proc drawNode(builder: UINodeBuilder, platform: BrowserPlatform, element: var El
         # echo "found different id, delete"
         childrenToRemove.add element
 
-    let insertNew = childElement == nil
     builder.drawNode(platform, childElement, c, force)
     if not childElement.isNil:
       if childElement.parentElement != element:
@@ -749,7 +742,7 @@ overrideFunction(hashWangYi1(1.int64), "hashWangYi1_override")
 overrideFunction(hashWangYi1(2.uint64), "hashWangYi1_override")
 overrideFunction(hashWangYi1(3.Hash), "hashWangYi1_override")
 
-overrideFunction("nimCopy", "nimCopyOverride")
+# overrideFunction("nimCopy", "nimCopyOverride")
 
 proc getTextStyle(x, y, width, height: int, color, backgroundColor: cstring, italic, bold: bool, wrap: bool): cstring =
   {.emit: [result, " = `left: ${", x, "}px; top: ${", y, "}px; width: ${", width, "}px; height: ${", height, "}px; overflow: visible; color: ${", color, "}; ${", backgroundColor, "}`"].} #"""