openkraken / kraken

A web standards-compliant, high-performance rendering engine based on Flutter.
https://openkraken.com
Apache License 2.0
4.93k stars 304 forks source link

refactor: render style setter #1402

Closed temper357 closed 2 years ago

temper357 commented 2 years ago

Closes https://github.com/openkraken/kraken/issues/1394

该 PR 解决 element 对应的 renderBoxModel detach 再 attach 后状态(包含 scroll listener 和某些 style)丢失的问题,对应的场景如 sliver 的 item 重新创建和 element remove 再 append 的场景。具体修复了在 renderer 销毁与重新创建后的以下一些问题:

  1. overflow scroll/auto 的 element 对应的 scroll listener 丢失导致无法滚动,同时 renderer 未创建两层 repaint boundary。
  2. opacity 失效。
  3. position 不为 relative/static 的 renderer 未移动到 containing block 下。

改动点:

  1. 对于 renderStyle 改动时有除了 markNeedsPaint 与 markNeedsLayout 外的副作用的 style(如 overflow 改动会生成 scrollable , position 改动会移动 renderBoxModel),在 renderBoxModel detach 时将这些 style 对应的 pendingProperties 重置,保证下次 renderBoxModel 重新 attach 进行 styles 的 flush 时会重新触发这些副作用。当 position absolute 的 element 在 remove 再 append 时其对应 renderBoxModel 需要重新 attach 到 containing block 下。
  2. renderBox 上不保存与 renderStyle 有关联的属性,将其移到 renderStyle 或者 element 上否则在 renderBox detach 时这些属性会丢失,导致下次 attach 时属性失效。overflow 滚动与 opacity 失效均是此类问题,scrollable 与 scrollableListener 移到 element 上,opacity 生成的 alpha 值移到 renderStyle 上。
  3. Web 在 overflow scroll/auto 的 element remove 与 append 时其 scrollOffset 信息会丢失,因此在 Kraken 在 element removeChild 的场景下需要销毁 scrollOffset 与 scrollListener,在 sliver 的场景下不用销毁可以保留 scroll 信息。
  4. 调整代码结构,将 overflow 的 Element mixin 移动到 dom 目录下。