feat(highlighter): auto update position/size (30fps)

Akryum · Akryum · commit b140aa765e60 · 2021-05-30T19:28:20.000+02:00
diff --git a/packages/app-backend-core/src/highlighter.ts b/packages/app-backend-core/src/highlighter.ts
@@ -1,9 +1,11 @@
 import { isBrowser } from '@vue-devtools/shared-utils'
 import { BackendContext } from '@vue-devtools/app-backend-api'
+import { ComponentBounds } from '@vue/devtools-api'
 import { JobQueue } from './util/queue'
 
 let overlay: HTMLDivElement
 let overlayContent: HTMLDivElement
+let currentInstance
 
 function createOverlay () {
   if (overlay || !isBrowser) return
@@ -64,31 +66,46 @@ export async function highlight (instance, ctx: BackendContext) {
       size.appendChild(multiply)
       size.appendChild(document.createTextNode((Math.round(bounds.height * 100) / 100).toString()))
 
+      currentInstance = instance
+
       await showOverlay(bounds, [pre, text, post, size])
     }
+
+    startUpdateTimer(ctx)
   })
 }
 
 export async function unHighlight () {
   await jobQueue.queue(async () => {
     overlay?.parentNode?.removeChild(overlay)
     overlayContent?.parentNode?.removeChild(overlayContent)
+    currentInstance = null
+
+    stopUpdateTimer()
   })
 }
 
-function showOverlay ({ width = 0, height = 0, top = 0, left = 0 }, children: Node[] = []) {
+function showOverlay (bounds: ComponentBounds, children: Node[] = null) {
   if (!isBrowser || !children.length) return
 
-  overlay.style.width = Math.round(width) + 'px'
-  overlay.style.height = Math.round(height) + 'px'
-  overlay.style.left = Math.round(left) + 'px'
-  overlay.style.top = Math.round(top) + 'px'
+  positionOverlay(bounds)
   document.body.appendChild(overlay)
 
   overlayContent.innerHTML = ''
   children.forEach(child => overlayContent.appendChild(child))
   document.body.appendChild(overlayContent)
 
+  positionOverlayContent(bounds)
+}
+
+function positionOverlay ({ width = 0, height = 0, top = 0, left = 0 }) {
+  overlay.style.width = Math.round(width) + 'px'
+  overlay.style.height = Math.round(height) + 'px'
+  overlay.style.left = Math.round(left) + 'px'
+  overlay.style.top = Math.round(top) + 'px'
+}
+
+function positionOverlayContent ({ wifth = 0, height = 0, top = 0, left = 0 }) {
   // Content position (prevents overflow)
   const contentWidth = overlayContent.offsetWidth
   const contentHeight = overlayContent.offsetHeight
@@ -110,3 +127,35 @@ function showOverlay ({ width = 0, height = 0, top = 0, left = 0 }, children: No
   overlayContent.style.left = ~~contentLeft + 'px'
   overlayContent.style.top = ~~contentTop + 'px'
 }
+
+async function updateOverlay (ctx: BackendContext) {
+  if (currentInstance) {
+    const bounds = await ctx.api.getComponentBounds(currentInstance)
+    if (bounds) {
+      const sizeEl = overlayContent.children.item(3)
+      console.log(sizeEl)
+      const widthEl = sizeEl.childNodes[0] as unknown as Text
+      widthEl.textContent = (Math.round(bounds.width * 100) / 100).toString()
+      const heightEl = sizeEl.childNodes[2] as unknown as Text
+      heightEl.textContent = (Math.round(bounds.height * 100) / 100).toString()
+
+      positionOverlay(bounds)
+      positionOverlayContent(bounds)
+    }
+  }
+}
+
+let updateTimer
+
+function startUpdateTimer (ctx: BackendContext) {
+  stopUpdateTimer()
+  updateTimer = setInterval(() => {
+    jobQueue.queue(async () => {
+      await updateOverlay(ctx)
+    })
+  }, 1000 / 30) // 30fps
+}
+
+function stopUpdateTimer () {
+  clearInterval(updateTimer)
+}
diff --git a/packages/app-backend-core/src/index.ts b/packages/app-backend-core/src/index.ts
@@ -217,9 +217,7 @@ async function connect () {
           block: 'center',
           inline: 'center'
         })
-        setTimeout(() => {
-          highlight(instance, ctx)
-        }, 500)
+        highlight(instance, ctx)
         setTimeout(() => {
           unHighlight()
         }, 2000)
diff --git a/packages/shell-dev-vue3/src/Animation.vue b/packages/shell-dev-vue3/src/Animation.vue
@@ -0,0 +1,47 @@
+<script>
+import { onUnmounted, reactive, ref } from 'vue'
+
+export default {
+  setup () {
+    const animate = ref(false)
+
+    const size = reactive({
+      width: 10,
+      height: 10
+    })
+
+    const timer = setInterval(() => {
+      if (!animate.value) return
+      size.width = Math.round(Math.random() * 100)
+      size.height = Math.round(Math.random() * 100)
+    }, 1000)
+
+    onUnmounted(() => {
+      clearInterval(timer)
+    })
+
+    return {
+      size,
+      animate
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    class="animation"
+    :style="{
+      width: `${size.width * 10}px`,
+      height: `${size.height * 10}px`,
+    }"
+    @click="animate = !animate"
+  />
+</template>
+
+<style lang="postcss" scoped>
+.animation {
+  transition: all 1s linear;
+  background: #42B983;
+}
+</style>
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue
@@ -15,6 +15,7 @@ import SetupRender from './SetupRender.js'
 import Form from './Form.vue'
 import Heavy from './Heavy.vue'
 import Mixins from './Mixins.vue'
+import Animation from './Animation.vue'
 
 import { h } from 'vue'
 
@@ -38,6 +39,7 @@ export default {
     Form,
     Heavy,
     Mixins,
+    Animation,
     inline: {
       render: () => h('h3', 'Inline component definition')
     }
@@ -78,6 +80,7 @@ export default {
   <AsyncComponent />
   <SuspenseExample />
   <Provide />
+  <Animation />
   <Condition />
   <VModelExample />
   <Ghost />
