From 4145010d68ed14371c065a906f244bf95c048dd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 10 Aug 2024 06:37:29 +0800
Subject: [PATCH] feat: auto focus for tree view

---
 components/CodeEditor.vue      |  8 +------
 components/OutputContainer.vue |  3 +--
 components/ast/Property.vue    | 42 ++++++++++++++++++++++++++++++----
 components/ast/Value.vue       | 12 +++++++++-
 styles/global.css              |  4 ++++
 5 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/components/CodeEditor.vue b/components/CodeEditor.vue
index 0911b7b..51ea0dd 100644
--- a/components/CodeEditor.vue
+++ b/components/CodeEditor.vue
@@ -55,7 +55,7 @@ if (props.input) {
           range: monaco.Range.fromPositions(start, end),
           options: {
             isWholeLine: false,
-            className: 'input-editor-highlight',
+            className: 'ast-highlight',
           },
         },
       ])
@@ -79,9 +79,3 @@ if (props.input) {
     </div>
   </MonacoEditor>
 </template>
-
-<style>
-.input-editor-highlight {
-  --at-apply: 'bg-yellow-400/30 dark:bg-yellow-600/30';
-}
-</style>
diff --git a/components/OutputContainer.vue b/components/OutputContainer.vue
index da2c737..90774c3 100644
--- a/components/OutputContainer.vue
+++ b/components/OutputContainer.vue
@@ -89,8 +89,7 @@ watch(outputView, (view) => {
           JSON
         </button>
       </div>
-      <!-- TODO implement auto-focus on tree view -->
-      <label v-if="outputView === 'json'">
+      <label>
         <input
           :checked="autoFocus"
           type="checkbox"
diff --git a/components/ast/Property.vue b/components/ast/Property.vue
index 19365d5..707cc69 100644
--- a/components/ast/Property.vue
+++ b/components/ast/Property.vue
@@ -28,7 +28,7 @@ const openable = computed(
     Object.keys(props.value).length > 0,
 )
 
-const isHover = computed(() => {
+const isHovering = computed(() => {
   if (Array.isArray(props.value)) {
     return props.value.some((v) => checkRange(getRange(v)))
   }
@@ -41,15 +41,20 @@ const isHover = computed(() => {
 })
 const openManual = ref<boolean>()
 const open = computed(
-  () => openable.value && (openManual.value ?? (props.open || isHover.value)),
+  () =>
+    openable.value &&
+    (openManual.value ?? (props.open || (autoFocus.value && isHovering.value))),
 )
 
+const valueCreated = ref(false)
+watch(open, () => (valueCreated.value ||= open.value), { immediate: true })
+
 function toggleOpen() {
   if (!openable.value) return
 
   if (
     openManual.value !== undefined &&
-    openManual.value !== (props.open || isHover.value)
+    openManual.value !== (props.open || isHovering.value)
   ) {
     openManual.value = undefined
   } else {
@@ -81,12 +86,33 @@ function handleMouseLeave() {
     outputHoverRange.value = undefined
   }
 }
+
+const container = ref<HTMLDivElement>()
+const exactHover = ref(false)
+
+function handleSubHoverChange(subHovering: boolean) {
+  exactHover.value = isHovering.value && !subHovering
+}
+
+watch(
+  [autoFocus, exactHover, isHovering, container],
+  ([autoFocus, exactHover, isHovering, container]) => {
+    if (autoFocus && exactHover && isHovering && container) {
+      requestAnimationFrame(() => container.scrollIntoView({ block: 'center' }))
+    }
+  },
+  { immediate: true },
+)
+
+defineExpose({ isHovering })
 </script>
 
 <template>
   <div
     v-if="show"
+    ref="container"
     relative
+    :class="isHovering && exactHover && 'ast-highlight'"
     @mouseover="handleMouseOver"
     @mouseleave="handleMouseLeave"
   >
@@ -117,7 +143,13 @@ function handleMouseLeave() {
         v-text="title"
       />&nbsp;</span
     >
-    <AstValue v-if="!openable || open" :data="value" />
-    <AstSummaryValue v-else :data="value" @toggle="toggleOpen" />
+    <span v-if="!openable || valueCreated" v-show="!openable || open">
+      <AstValue :data="value" @update:hover="handleSubHoverChange" />
+    </span>
+    <AstSummaryValue
+      v-if="openable && !open"
+      :data="value"
+      @toggle="toggleOpen"
+    />
   </div>
 </template>
diff --git a/components/ast/Value.vue b/components/ast/Value.vue
index 21cd1a1..e39934c 100644
--- a/components/ast/Value.vue
+++ b/components/ast/Value.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import type { AstProperty } from '#components'
 const props = defineProps<{ data: any }>()
+const emit = defineEmits<{
+  'update:hover': [value: boolean]
+}>()
 
 const hasChildren = computed(
   () =>
@@ -14,6 +18,12 @@ const value = computed<string | undefined>(() => {
   return props.data == null ? String(props.data) : JSON.stringify(props.data)
 })
 const valueColor = useHighlightColor(value)
+
+const properties = useTemplateRefsList<InstanceType<typeof AstProperty>>()
+watchEffect(() => {
+  const hovering = properties.value.some((p) => p.isHovering)
+  emit('update:hover', hovering)
+})
 </script>
 
 <template>
@@ -21,7 +31,7 @@ const valueColor = useHighlightColor(value)
     <AstBrackets :data>
       <div v-if="hasChildren" ml6>
         <template v-for="(item, key) of data" :key="key">
-          <AstProperty :id="key" :value="item" />
+          <AstProperty :id="key" :ref="properties.set" :value="item" />
         </template>
       </div>
     </AstBrackets>
diff --git a/styles/global.css b/styles/global.css
index 1708d3a..bb85282 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -21,6 +21,10 @@ option {
   background-color: transparent !important;
 }
 
+.ast-highlight {
+  --at-apply: 'bg-yellow-400/30 dark:bg-yellow-400/20';
+}
+
 /* Color Mode transition */
 ::view-transition-old(root),
 ::view-transition-new(root) {