diff --git a/karax.nim b/karax.nim index ce216f0..5858f36 100644 --- a/karax.nim +++ b/karax.nim @@ -27,6 +27,7 @@ proc hasProp(e: Node; prop: cstring): bool {.importcpp: "(#.hasOwnProperty(#))". proc rawkey(e: Node): VKey {.importcpp: "#.karaxKey", nodecl.} proc key*(e: Node): VKey = if e.hasProp"karaxKey": result = e.rawkey + else: result = -1 proc `key=`*(e: Node; x: VKey) {.importcpp: "#.karaxKey = #", nodecl.} type @@ -40,6 +41,12 @@ proc clientHeight(): int {. proc clientWidth(): int {. importcpp: "(window.innerWidth || document.documentElement.clientWidth)@", nodecl} +when false: + proc pageYOffset(): int {. + importcpp: "(window.pageYOffset)@", nodecl} + proc pageXOffset(): int {. + importcpp: "(window.pageXOffset)@", nodecl} + type Timeout* = ref object @@ -61,6 +68,8 @@ proc isElementInViewport(el: Node; h: var int): bool = proc vnodeToDom(n: VNode): Node = if n.kind == VNodeKind.text: result = document.createTextNode(n.text) + elif n.kind == VNodeKind.thunk: + return vnodeToDom(n.callThunk) else: result = document.createElement(toTag[n.kind]) for k in n: @@ -72,7 +81,7 @@ proc vnodeToDom(n: VNode): Node = result.id = n.id if n.class != nil: result.class = n.class - if n.key != 0: + if n.key >= 0: result.key = n.key for k, v in attrs(n): if v != nil: @@ -127,16 +136,15 @@ proc equals(a, b: VNode): bool = if a.key != b.key: return false if a.kind == VNodeKind.text: if a.text != b.text: return false + elif a.kind == VNodeKind.thunk: + if a.thunk != b.thunk: return false + if a.len != b.len: return false + for i in 0.. maybe give nodes a hash? - when false: - # this needs to be done differently in a virtual DOM: - if a.class != b.class: - # style differences are updated in place and we pretend - # it's still the same node - a.class = b.class return true proc updateElement(parent, current: Node, newNode, oldNode: VNode) = @@ -175,7 +183,7 @@ proc dodraw() = else: let olddom = document.getElementById("ROOT") updateElement(nil, olddom, newtree, currentTree) - assert same(newtree, document.getElementById("ROOT")) + #assert same(newtree, document.getElementById("ROOT")) currentTree = newtree # now that it's part of the DOM, give it the focus: if toFocus != nil: @@ -185,7 +193,7 @@ proc visibleKeys(e: Node; a, b: var VKey; h, count: var int) = # we only care about nodes that have a key: var hh = 0 # do not recurse if there is a 'key' field already: - if e.key != 0: + if e.key >= 0: if isElementInViewport(e, hh): inc count inc h, hh @@ -257,7 +265,8 @@ proc setOnscroll*(action: proc(min, max: VKey; diff: int)) = let dir = window.pageYOffset - oldY if dir == 0: return - var a, b: VKey + var a = VKey high(int) + var b = VKey 0 var h, count: int document.visibleKeys(a, b, h, count) let avgh = h / count