feat: hide the SectionHighlighter component when scrolling the preview iframe

Author: did

app/frontend/editor/components/section-highlighter/index.vue

@@ -7,32 +7,31 @@
     <div
       class="w-full h-full relative mx-auto border-solid border-0 border-t-4 border-b-4"
       :class="{
-        'border-transparent': !hoveredSection,
-        'border-editor-primary': hoveredSection,
+        'border-transparent': !mustBeDisplayed,
+        'border-editor-primary': mustBeDisplayed,
       }"
     >
       <transition
         name="slide-fade"
         mode="out-in"
-        v-on:after-leave="afterAnimationDone"
       >
         <top-left-actions
           :hovered-section="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
 
       <transition name="reverse-slide-fade" mode="out-in">
         <top-right-actions
           :hoveredSection="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
 
       <transition name="slide-up-fade" mode="out-in">
         <bottom-actions
           :hovered-section="hoveredSection"
-          v-if="hoveredSection"
+          v-if="mustBeDisplayed"
         />
       </transition>
     </div>
@@ -44,6 +43,7 @@ import TransformationMixin from '@/mixins/preview-transformation'
 import TopLeftActions from './top-left-actions.vue'
 import TopRightActions from './top-right-actions.vue'
 import BottomActions from './bottom-actions.vue'
+import { debounce } from '@/misc/utils'
 
 export default {
   name: 'SectionHighlighter',
@@ -53,11 +53,11 @@ export default {
     hoveredSection: { type: Object },
   },
   data() {
-    return { shadow: null, style: {} }
+    return { style: {}, isScrolling: false, boundingRect: null }
   },
   mounted() {
-    // NOTE: optimized version to update the highlighter when scrolling the iframe
     window.addEventListener('maglev:preview:scroll', this.onPreviewScroll)
+    this.waitUntilScrollingDone = debounce(this.onEndPreviewScrolling.bind(this), 800)
   },
   beforeDestroy() {
     window.removeEventListener('maglev:preview:scroll', this.onPreviewScroll)
@@ -66,21 +66,28 @@ export default {
     minTop() {
       return this.hoveredSection?.sectionOffsetTop || 0
     },
+    mustBeDisplayed() {
+      return !!this.hoveredSection && !this.isScrolling
+    }
   },
   methods: {
-    afterAnimationDone() {
-      this.shadow = null
+    onPreviewScroll(event) {      
+      this.isScrolling = true
+      this.boundingRect = event.detail.boundingRect      
+      this.waitUntilScrollingDone()
     },
-    onPreviewScroll(event) {
-      let self = this
-      window.requestAnimationFrame(() => {
-        const newStyle = this.performStyle(event.detail.boundingRect)
-        Object.entries(newStyle).forEach(
-          ([key, value]) => (self.$el.style[key] = value),
-        )
-      })
+    onEndPreviewScrolling() {
+      this.isScrolling = false 
+      this.applyStyle(this.boundingRect)
     },
-    performStyle(boundingRect) {
+    applyStyle(boundingRect) {
+      const self = this
+      const newStyle = this.calculateStyle(boundingRect)
+      Object.entries(newStyle).forEach(
+        ([key, value]) => (self.$el.style[key] = value),
+      )
+    },
+    calculateStyle(boundingRect) {
       const isSticky = boundingRect.top < this.minTop
       const top = isSticky ? this.minTop : boundingRect.top
       const height = isSticky
@@ -102,17 +109,16 @@ export default {
     }, 
   },
   watch: {
-    hoveredSection(value, oldValue) {
-      if (!value) this.shadow = { ...oldValue }
-      
-      if (!this.hoveredSection && !this.shadow) {
-        this.style = {}
-        return
-      }
+    hoveredSection: {
+      handler(value) {
+        if (!value) return
 
-      const { sectionRect } = value || this.shadow
-      this.style = this.performStyle(sectionRect)
-    },
+        this.isScrolling = false
+        this.boundingRect = value.sectionRect
+        this.applyStyle(value.sectionRect)
+      }, 
+      immediate: true
+    }
   },
 }
 </script>

app/frontend/live-preview-client/iframe-decorator.js

@@ -53,6 +53,20 @@ export const start = (config) => {
 
   // click on links
   disableLinks(previewDocument)
+
+  // Only works on Google Chrome
+  selectHoveredSectionAtStartup(previewDocument, config.stickySectionIds)
+}
+
+const selectHoveredSectionAtStartup = (previewDocument, stickySectionIds) => {
+  setTimeout(() => {
+    const section = previewDocument.querySelector('[data-maglev-section-id]:hover')
+
+    console.log('selectHoveredSectionAtStartup', section)
+
+    if (section)
+      onSectionHovered(previewDocument, section, stickySectionIds)    
+  }, 200)
 }
 
 const listen = (previewDocument, eventType, handler) => {
@@ -96,27 +110,23 @@ const listen = (previewDocument, eventType, handler) => {
 }
 
 const listenScrolling = (previewDocument) => {
-  let mouseX = 0
-  let mouseY = 0
-
-  addEventListener(previewDocument, 'mousemove', (e) => {
-    mouseX = e.clientX
-    mouseY = e.clientY
-  })
-
-  const debouncedScrollNotifier = debounce(() => {
-    const el = previewDocument
-      .elementFromPoint(mouseX, mouseY)
-      ?.closest('[data-maglev-section-id]')
-
+  // NOTE: to be used if too slow on old computers
+  // const debouncedScrollNotifier = debounce(() => {
+  //   const el = previewDocument.querySelector('[data-maglev-section-id]:hover')
+  //   if (el) postMessage('scroll', { boundingRect: el.getBoundingClientRect() })
+  // }, 10)
+
+  const scrollNotifier = () => {
+    const el = previewDocument.querySelector('[data-maglev-section-id]:hover')
     if (el) postMessage('scroll', { boundingRect: el.getBoundingClientRect() })
-  }, 10)
+  }
 
-  addEventListener(previewDocument, 'scroll', debouncedScrollNotifier)
+  addEventListener(previewDocument, 'scroll', scrollNotifier)
 }
 
 const onSectionHovered = (previewDocument, el, stickySectionIds) => {
   const sectionId = el.dataset.maglevSectionId
+
   if (hoveredSectionId !== sectionId) {
     postMessage('section:hover', {
       sectionId,