🐛 fix(vscode): 跳到定义时对准名字并闪

vscode/webview-ui/src/codeReader/useReveal.ts

@@ -24,25 +24,41 @@ export function flash(el: HTMLElement): void {
   el.setAttribute('data-flash', '')
 }
 
-/** 把 el 滚进钉住的筛选栏下面的视口，规则见 scrollTopToShow：已经整个看得见就不滚。 */
-/** 把 el 滚进钉住的筛选栏下面的视口，规则见 scrollTopToShow：已经整个看得见就不滚。beforeScroll 在真正滚动前拿到将要落到的位置。 */
+/** 把 el 滚进钉住的筛选栏下面的视口。已经整个看得见就不滚。beforeScroll 在真正滚动前拿到将要落到的位置。 */
 export function showInViewport(el: HTMLElement, beforeScroll?: (position: ScrollPosition) => void): void {
   const rect = el.getBoundingClientRect()
   const pinned = pinnedHeight()
-  const top = scrollTopToShow({ top: rect.top + window.scrollY, bottom: rect.bottom + window.scrollY }, window.scrollY + pinned, window.innerHeight - pinned)
+  const top = scrollTopToShow(
+    { top: rect.top + window.scrollY, bottom: rect.bottom + window.scrollY },
+    window.scrollY,
+    window.innerHeight,
+    pinned,
+  )
   if (top === undefined)
     return
-  const position = { x: 0, y: top - pinned }
+  const position = { x: 0, y: top }
   beforeScroll?.(position)
   window.scrollTo(position.x, position.y)
 }
 
+/** 这块自己显示着的、下标就是定义处的那个名字。子块里的同名下标不算，免得闪到旁边那张卡片。 */
+function nameAt(block: HTMLElement, offset: number): HTMLElement | null {
+  for (const el of block.querySelectorAll<HTMLElement>('[data-offset]')) {
+    if (Number(el.dataset.offset) !== offset)
+      continue
+    if (el.closest('.cr-block') === block)
+      return el
+  }
+  return null
+}
+
 /**
  * 滚到 reveal 指的位置，处理完调 done：
  * ① 从文本编辑器切过来（没有 definition）：包含那一行的块顶到视口顶部（筛选栏下面），折叠着的、被筛掉的不展开；
  * ② 跳到定义：目标或它的祖先块被筛掉了，先临时露出这条路径（show）；再展开把目标折叠住的块、属性行和子行（expand）——
- *    每一步之后重新渲染、再进来一次；最后把目标（整块，或就是这处定义的属性行 / 子行）滚进视口、闪几下。
- *    目标被正在编辑的祖先盖住时闪那个祖先（uncoveredPlan）。
+ *    每一步之后重新渲染、再进来一次；最后把目标滚进筛选栏下面并闪几下。
+ *    属性行 / 子行是这处定义时闪那一行；这块里显示着这个名字（下标盖住定义处）就闪这个名字，不闪整张卡片；
+ *    名字不在页面上才闪整块。目标被正在编辑的祖先盖住时闪那个祖先（uncoveredPlan）。
  */
 export function useReveal(
   doc: DocumentMessage | null,
@@ -77,8 +93,10 @@ export function useReveal(
       return
     }
     // 块正在编辑时页面上没有属性表，就闪整块
+    const block = plan ? document.querySelector<HTMLElement>(`.cr-block[data-id="${plan.id}"]`) : null
     const row = plan?.row === undefined ? null : document.querySelector<HTMLElement>(`:is(.cr-prop-row, .cr-prop-item, .cr-table-row)[data-id="${plan.row}"]`)
-    const el = row ?? (plan && document.querySelector<HTMLElement>(`.cr-block[data-id="${plan.id}"]`))
+    const name = row || !block ? null : nameAt(block, reveal.definition)
+    const el = row ?? name ?? block
     if (el) {
       showInViewport(el)
       flash(el)