made js animations smoother

test2.nim

@@ -393,9 +393,23 @@ var isRenderInProgress = false
 
 var frameIndex = 0
 
-proc doRender(time: float) =
+var start: float = -1
+var previousTimestep: float = 0
+
+proc doRender(timestep: float) =
   # echo "requestAnimationFrame ", time
 
+  if timestep == previousTimestep:
+    # echo "multiple per frame"
+    return
+
+  if start < 0 or builder.animatingNodes.len == 0:
+    start = timestep
+    builder.frameTime = 0
+  else:
+    builder.frameTime = timestep - previousTimestep
+  previousTimestep = timestep
+
   defer:
     if builder.animatingNodes.len > 0:
       requestRender()
@@ -429,7 +443,6 @@ proc doRender(time: float) =
     renderTime = renderTimer.elapsed.ms
 
     frameTime = frameTimer.elapsed.ms
-    builder.frameTime = frameTime
 
   # if frameTime > 20:
   if logFrameTime:
@@ -466,7 +479,7 @@ proc drawNode(builder: UINodeBuilder, platform: BrowserPlatform, element: var El
     css += "overflow: hidden;".cstring
 
   if DrawBorder in node.flags:
-    css += "border: 1px solid ".cstring
+    css += "outline: 1px solid ".cstring
     css += node.borderColor.myToHtmlHex
     css += ";".cstring
 

test_lib.nim

@@ -151,7 +151,7 @@ proc renderLine*(builder: UINodeBuilder, line: string, curs: Option[int], backgr
       result = some (currentNode, "", rect(lastPartXW, 0, builder.charWidth, builder.textHeight))
 
     # Fill rest of line with background
-    builder.panel(&{FillX, FillY, FillBackground}, backgroundColor = backgroundColor * 2)
+    builder.panel(&{FillX, FillY, FillBackground}, backgroundColor = backgroundColor)
 
 proc renderText*(builder: UINodeBuilder, changed: bool, lines: openArray[string], first: int, cursor: (int, int), backgroundColor, textColor: Color, sizeToContentX = false, sizeToContentY = true, id = Id.none) =
   var flags = &{MaskContent, OverlappingChildren}