feat: auto focus for tree view

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>

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"

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>

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,14 +18,20 @@ 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>
   <template v-if="typeof data === 'object' && data != null">
     <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>

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) {