seatable-html-page-sdk 0.0.13-beta.5 → 0.0.13-beta.6

package/dist/index.js

@@ -4619,6 +4619,8 @@
       this.mouseEvents = ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'contextmenu'];
       this.hoverTarget = null;
       this.selectedTarget = null;
+      this._scrollRAF = null;
+      this._hoverRAF = null;
     }
     enable() {
       if (this.isActive) return;
@@ -4638,26 +4640,34 @@
       window.removeEventListener('scroll', this._handleScroll, true);
       this.hoverTarget = null;
       this.selectedTarget = null;
+      if (this._scrollRAF) cancelAnimationFrame(this._scrollRAF);
+      if (this._hoverRAF) cancelAnimationFrame(this._hoverRAF);
+      this._scrollRAF = null;
+      this._hoverRAF = null;
       this.removeCommentStyle();
     }
     _handleScroll() {
       if (!this.isActive) return;
-      if (this.selectedTarget && document.body.contains(this.selectedTarget)) {
-        const data = this.buildElementData(this.selectedTarget);
-        window.parent.postMessage({
-          type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
-          data,
-          targetType: 'selected'
-        }, '*');
-      }
-      if (this.hoverTarget && document.body.contains(this.hoverTarget)) {
-        const data = this.buildElementData(this.hoverTarget);
-        window.parent.postMessage({
-          type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
-          data,
-          targetType: 'hover'
-        }, '*');
-      }
+      if (this._scrollRAF) return;
+      this._scrollRAF = requestAnimationFrame(() => {
+        this._scrollRAF = null;
+        if (this.selectedTarget && document.body.contains(this.selectedTarget)) {
+          const data = this.buildElementData(this.selectedTarget);
+          window.parent.postMessage({
+            type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
+            data,
+            targetType: 'selected'
+          }, '*');
+        }
+        if (this.hoverTarget && document.body.contains(this.hoverTarget)) {
+          const data = this.buildElementData(this.hoverTarget);
+          window.parent.postMessage({
+            type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
+            data,
+            targetType: 'hover'
+          }, '*');
+        }
+      });
     }
     addCommentModeStyle() {
       let style = document.getElementById('ai-comment-cursor-style');
@@ -4681,11 +4691,16 @@
       const isBodyOrHtml = target === document.body || target === document.documentElement;
       if (event.type === 'mouseover') {
         this.hoverTarget = isBodyOrHtml ? null : target;
-        const data = isBodyOrHtml ? null : this.buildElementData(target);
-        window.parent.postMessage({
-          type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER,
-          data
-        }, '*');
+        if (this._hoverRAF) return;
+        this._hoverRAF = requestAnimationFrame(() => {
+          this._hoverRAF = null;
+          const currentTarget = this.hoverTarget;
+          const data = currentTarget ? this.buildElementData(currentTarget) : null;
+          window.parent.postMessage({
+            type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER,
+            data
+          }, '*');
+        });
       } else if (event.type === 'click') {
         this.selectedTarget = isBodyOrHtml ? null : target;
         const data = isBodyOrHtml ? null : this.buildElementData(target);