Skip to content

feat: 调试面板悬浮高亮——hover 对象标识描边系统上的对应元素 - #4

Merged
ShiningRay merged 1 commit into
mainfrom
feat/devtools-hover-highlight
Sep 15, 2026
Merged

ShiningRay merged 1 commit into
mainfrom
feat/devtools-hover-highlight

Conversation

@ShiningRay

Copy link
Copy Markdown
Owner

功能

鼠标悬浮在面板的任意对象标识上(元素树的 #id、事件的 Component#id、写入的 sig、flush 的触发集),桌面上对应的 DOM 元素立即出现描边高亮 + 类型角标,移开消失。

实现

  • 行内标签带 data-hl-kind / data-hl-ids(Citrine 透传属性自动 kebab 化)
  • #devtools 事件委托一次绑定;行每 400ms 重建不影响
  • node/component → poll 时建的 object_id→DOM 索引;signal/flush → 订阅者 effect 反查渲染节点

验证

无头合成事件:77/77 行带载荷;node hover 描边出现(tag 正确);signal hover 出 2 个订阅者节点;mouseout 清零。

- 行内标签带 data-hl-kind/data-hl-ids 透传属性(node/component/signal/flush
  四类:元素树行、事件组件、写入信号、flush 触发集)
- #devtools 事件委托一次绑定(行每 400ms 重建不受影响)
- node/component → object_id→DOM 索引(poll 随树快照重建,含 owner 归属);
  signal/flush → 订阅者 effect 反查渲染节点(owned/props/block effect 交集)
- 高亮 = fixed 定位描边 + 标签角标,mouseout 清除

无头验证:77/77 行带载荷;node hover 出 1 描边(tag node #564);signal hover
出 2 个订阅者节点描边;mouseout 清零
@ShiningRay
ShiningRay merged commit f388f07 into main Sep 15, 2026
5 checks passed
@ShiningRay
ShiningRay deleted the feat/devtools-hover-highlight branch September 15, 2026 15:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant