fix: blurred font (#485)

Author: starknt

packages/devtools/src/runtime/plugins/view/FrameBox.vue

@@ -161,8 +161,11 @@ useEventListener(window, 'mouseleave', () => {
 
 <style scoped>
 .nuxt-devtools-frame {
+  width: 100%;
+  height: 100%;
   position: fixed;
   z-index: 2147483645;
+  -webkit-font-smoothing: antialiased;
 }
 
 .nuxt-devtools-frame :deep(iframe) {

packages/devtools/src/runtime/plugins/view/Main.vue

@@ -4,7 +4,7 @@ import type { CSSProperties } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
 import { settings } from '../../settings'
 import { state } from './state'
-import { millisecondToHumanreadable, useEventListener, useScreenSafeArea } from './utils'
+import { millisecondToHumanreadable, useElementBounding, useEventListener, useScreenSafeArea } from './utils'
 import FrameBox from './FrameBox.vue'
 
 const props = defineProps<{
@@ -47,7 +47,7 @@ const vars = computed(() => {
   }
 })
 
-const frameBox = ref<InstanceType<typeof FrameBox>>()
+const frameBox = ref<HTMLDivElement>()
 const panelEl = ref<HTMLDivElement>()
 const anchorEl = ref<HTMLDivElement>()
 
@@ -235,6 +235,8 @@ const panelStyle = computed(() => {
   return style
 })
 
+const { width: frameWidth, height: frameHeight } = useElementBounding(frameBox)
+
 const iframeStyle = computed(() => {
   // eslint-disable-next-line no-unused-expressions, no-sequences
   mousePosition.x, mousePosition.y
@@ -255,8 +257,9 @@ const iframeStyle = computed(() => {
   const maxHeight = windowSize.height - marginVertical
 
   const style: CSSProperties = {
+    position: 'fixed',
     zIndex: -1,
-    pointerEvents: isDragging.value ? 'none' : 'auto',
+    pointerEvents: isDragging.value || !state.value.open ? 'none' : 'auto',
     width: `min(${state.value.width}vw, calc(100vw - ${marginHorizontal}px))`,
     height: `min(${state.value.height}vh, calc(100vh - ${marginVertical}px))`,
   }
@@ -271,21 +274,21 @@ const iframeStyle = computed(() => {
   switch (state.value.position) {
     case 'top':
     case 'bottom':
-      style.left = 0
-      style.transform = 'translate(-50%, 0)'
+      style.left = `${-frameWidth.value / 2}px`
+      style.transform = 'translate(0, 0)'
       if ((anchorX - frameMargin.left) < width / 2)
-        style.left = `${width / 2 - anchorX + frameMargin.left}px`
+        style.left = `${width / 2 - anchorX + frameMargin.left - frameWidth.value / 2}px`
       else if ((windowSize.width - anchorX - frameMargin.right) < width / 2)
-        style.left = `${windowSize.width - anchorX - width / 2 - frameMargin.right}px`
+        style.left = `${windowSize.width - anchorX - width / 2 - frameMargin.right - frameWidth.value / 2}px`
       break
     case 'right':
     case 'left':
-      style.top = 0
-      style.transform = 'translate(0, -50%)'
+      style.top = `${-frameHeight.value / 2}px`
+      style.transform = 'translate(0, 0)'
       if ((anchorY - frameMargin.top) < height / 2)
-        style.top = `${height / 2 - anchorY + frameMargin.top}px`
+        style.top = `${height / 2 - anchorY + frameMargin.top - frameHeight.value / 2}px`
       else if ((windowSize.height - anchorY - frameMargin.bottom) < height / 2)
-        style.top = `${windowSize.height - anchorY - height / 2 - frameMargin.bottom}px`
+        style.top = `${windowSize.height - anchorY - height / 2 - frameMargin.bottom - frameHeight.value / 2}px`
       break
   }
 
@@ -398,12 +401,13 @@ onMounted(() => {
         </button>
       </template>
     </div>
-    <FrameBox
-      ref="frameBox"
-      :client="client"
-      :style="iframeStyle"
-      :is-dragging="isDragging"
-    />
+
+    <div ref="frameBox" :style="iframeStyle">
+      <FrameBox
+        :client="client"
+        :is-dragging="isDragging"
+      />
+    </div>
   </div>
 </template>
 

packages/devtools/src/runtime/plugins/view/utils.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { computed, getCurrentScope, onScopeDispose, ref, watch } from 'vue'
+import { computed, getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, ref, toValue, watch } from 'vue'
 
 export function useObjectStorage<T>(key: string, initial: T, listenToStorage = true): Ref<T> {
   const raw = localStorage.getItem(key)
@@ -49,6 +49,89 @@ export function useEventListener(target: EventTarget, type: string, listener: an
   getCurrentScope() && onScopeDispose(() => target.removeEventListener(type, listener, options))
 }
 
+/**
+ * @see https://vueuse.org/useElementBounding
+ */
+export function useElementBounding(target: Ref<HTMLElement | null | undefined>) {
+  const height = ref(0)
+  const bottom = ref(0)
+  const left = ref(0)
+  const right = ref(0)
+  const top = ref(0)
+  const width = ref(0)
+  const x = ref(0)
+  const y = ref(0)
+
+  function update() {
+    const el = toValue(target)
+
+    if (!el) {
+      height.value = 0
+      bottom.value = 0
+      left.value = 0
+      right.value = 0
+      top.value = 0
+      width.value = 0
+      x.value = 0
+      y.value = 0
+      return
+    }
+
+    const rect = el.getBoundingClientRect()
+
+    height.value = rect.height
+    bottom.value = rect.bottom
+    left.value = rect.left
+    right.value = rect.right
+    top.value = rect.top
+    width.value = rect.width
+    x.value = rect.x
+    y.value = rect.y
+  }
+
+  watch(() => toValue(target), update)
+  useEventListener(window, 'resize', update)
+  if (getCurrentInstance())
+    onMounted(() => update())
+
+  // observer resize
+  let observer: ResizeObserver | undefined
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect()
+      observer = undefined
+    }
+  }
+  const stopWatch = watch(
+    () => toValue(target),
+    (el) => {
+      cleanup()
+      if (window) {
+        observer = new ResizeObserver(update)
+        el && observer!.observe(el)
+      }
+    },
+    { immediate: true, flush: 'post', deep: true },
+  )
+
+  getCurrentScope() && onScopeDispose(() => {
+    cleanup()
+    stopWatch()
+  })
+
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update,
+  }
+}
+
 export function millisecondToHumanreadable(ms: number): [number, string] {
   if (ms < 1000)
     return [+ms.toFixed(0), 'ms']