customer-chat-sdk 1.1.10 → 1.1.12

package/dist/customer-sdk.esm.js

@@ -18,6 +18,22 @@ class IconManager {
         this.lastTouchPosition = { x: 0, y: 0 }; // 最后触摸位置
         this.touchStartTime = 0; // 触摸开始时间
         this.clickThreshold = 15; // 点击阈值（像素）
+        // 性能优化：缓存容器信息，避免频繁查询 DOM
+        this.cachedContainer = null;
+        this.cachedContainerRect = null;
+        this.cachedIconSize = { width: 0, height: 0 };
+        this.lastContainerUpdateTime = 0;
+        this.containerUpdateInterval = 100; // 每 100ms 更新一次容器信息（避免频繁重排）
+        // 性能优化：缓存所有 iframe 的位置信息（用于检测鼠标是否在 iframe 上）
+        this.cachedIframes = [];
+        this.lastIframeUpdateTime = 0;
+        this.iframeUpdateInterval = 16; // 每 16ms 更新一次 iframe 位置信息（约一帧，更频繁，因为 iframe 可能移动）
+        // 性能优化：使用 requestAnimationFrame 节流位置更新
+        this.rafId = null;
+        this.pendingPosition = { x: 0, y: 0, needsUpdate: false };
+        // 主动检测机制：使用 requestAnimationFrame 定期检查鼠标位置（即使没有 mousemove 事件）
+        this.activeDetectionRafId = null;
+        this.lastMousePosition = { x: 0, y: 0, timestamp: 0 }; // 最后记录的鼠标位置和时间戳
         // 事件处理器引用（用于清理）
         this.onDragHandler = null;
         this.stopDragHandler = null;
@@ -317,6 +333,26 @@ class IconManager {
             this.dragOffset.x = clientX - iconRect.left;
             this.dragOffset.y = clientY - iconRect.top;
             // 注意：不在这里转换位置，只在真正开始拖动时才转换（在 onDrag 中）
+            // 性能优化：在拖动开始时预加载所有 iframe 位置信息
+            // 这样可以避免在拖动过程中频繁查询 DOM
+            const allIframes = document.querySelectorAll('iframe');
+            this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                element: iframe,
+                rect: iframe.getBoundingClientRect()
+            }));
+            this.lastIframeUpdateTime = Date.now();
+            if (this.debug) {
+                console.log(`[IconManager] Drag start - Found ${this.cachedIframes.length} iframe(s)`, {
+                    iframes: this.cachedIframes.map(({ rect }) => ({
+                        left: rect.left,
+                        top: rect.top,
+                        right: rect.right,
+                        bottom: rect.bottom,
+                        width: rect.width,
+                        height: rect.height
+                    }))
+                });
+            }
             // 添加 document 事件监听器
             if (this.onDragHandler) {
                 document.addEventListener('mousemove', this.onDragHandler);
@@ -359,7 +395,7 @@ class IconManager {
             };
             window.addEventListener('blur', this.blurHandler);
             // 3. 添加超时机制（如果一段时间没有收到 mousemove 事件，自动停止拖动）
-            // 这可以处理鼠标移动到 iframe 上的情况
+            // 优化：缩短超时时间到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
             this.dragTimeoutId = window.setTimeout(() => {
                 if (this.isDragging) {
                     if (this.debug) {
@@ -367,9 +403,21 @@ class IconManager {
                     }
                     this.stopDrag();
                 }
-            }, 500); // 500ms 没有移动事件，自动停止拖动（处理鼠标移动到 iframe 上的情况）
+            }, 50); // 缩短到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
+            // 4. 启动主动检测机制：使用 requestAnimationFrame 定期检查鼠标位置
+            // 即使没有 mousemove 事件，也能检测到鼠标是否进入 iframe
+            this.startActiveDetection();
             if (this.debug) {
-                console.log('Drag start');
+                console.log('[IconManager] Drag start', {
+                    startPosition: { x: clientX, y: clientY },
+                    iconRect: {
+                        left: iconRect.left,
+                        top: iconRect.top,
+                        width: iconRect.width,
+                        height: iconRect.height
+                    },
+                    dragOffset: this.dragOffset
+                });
             }
         }
         catch (error) {
@@ -385,20 +433,92 @@ class IconManager {
         if (!this.iconElement)
             return;
         e.preventDefault();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        // 检测鼠标是否在任何 iframe 上（通过坐标判断）
+        // 如果检测到鼠标在 iframe 区域，立即停止拖动
+        // 重要：需要检测所有 iframe（包括嵌套的），因为任何 iframe 都会导致事件丢失
+        if (this.isDragging) {
+            const now = Date.now();
+            // 性能优化：缓存 iframe 位置信息，避免频繁查询 DOM
+            if (this.cachedIframes.length === 0 ||
+                now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
+                // 更新 iframe 缓存
+                const allIframes = document.querySelectorAll('iframe');
+                const previousCount = this.cachedIframes.length;
+                this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                    element: iframe,
+                    rect: iframe.getBoundingClientRect()
+                }));
+                this.lastIframeUpdateTime = now;
+                if (this.debug && this.cachedIframes.length !== previousCount) {
+                    console.log(`[IconManager] Iframe cache updated - Found ${this.cachedIframes.length} iframe(s)`, {
+                        iframes: this.cachedIframes.map(({ rect }) => ({
+                            left: rect.left,
+                            top: rect.top,
+                            right: rect.right,
+                            bottom: rect.bottom
+                        }))
+                    });
+                }
+            }
+            // 检查鼠标是否在任何 iframe 上
+            for (const { rect, element } of this.cachedIframes) {
+                if (clientX >= rect.left &&
+                    clientX <= rect.right &&
+                    clientY >= rect.top &&
+                    clientY <= rect.bottom) {
+                    // 鼠标在 iframe 上，立即停止拖动
+                    if (this.debug) {
+                        console.log('[IconManager] Mouse over iframe detected, stopping drag immediately', {
+                            mousePosition: { x: clientX, y: clientY },
+                            iframeRect: {
+                                left: rect.left,
+                                top: rect.top,
+                                right: rect.right,
+                                bottom: rect.bottom
+                            },
+                            iframeSrc: element.src || 'no src'
+                        });
+                    }
+                    this.stopDrag();
+                    return;
+                }
+            }
+        }
+        // 更新最后记录的鼠标位置和时间戳（用于主动检测）
+        const now = Date.now();
+        const timeSinceLastUpdate = now - this.lastMousePosition.timestamp;
+        this.lastMousePosition = {
+            x: clientX,
+            y: clientY,
+            timestamp: now
+        };
+        // 如果距离上次更新超过 50ms，记录警告（可能事件丢失）
+        if (this.debug && timeSinceLastUpdate > 50 && this.lastMousePosition.timestamp > 0) {
+            console.warn(`[IconManager] Long gap between mousemove events: ${timeSinceLastUpdate}ms`, {
+                lastPosition: { x: this.lastMousePosition.x, y: this.lastMousePosition.y },
+                currentPosition: { x: clientX, y: clientY }
+            });
+        }
         // 重置超时定时器（每次移动都重置，确保只有真正停止移动时才触发超时）
+        // 优化：缩短超时时间到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
         if (this.dragTimeoutId !== null) {
             window.clearTimeout(this.dragTimeoutId);
             this.dragTimeoutId = window.setTimeout(() => {
                 if (this.isDragging) {
                     if (this.debug) {
-                        console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
+                        const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                        console.warn('[IconManager] Drag timeout triggered, stopping drag (likely mouse moved over iframe)', {
+                            timeSinceLastMove,
+                            lastMousePosition: this.lastMousePosition,
+                            iframeCount: this.cachedIframes.length
+                        });
                     }
                     this.stopDrag();
                 }
-            }, 500); // 500ms 没有移动事件，自动停止拖动
+            }, 50); // 缩短到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
         }
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
         // 检查是否有足够的移动距离
         const deltaX = Math.abs(clientX - this.lastTouchPosition.x);
         const deltaY = Math.abs(clientY - this.lastTouchPosition.y);
@@ -442,17 +562,31 @@ class IconManager {
             return;
         }
         try {
+            // 性能优化：缓存容器信息，避免频繁查询 DOM
+            const now = Date.now();
             const container = this.getTargetElement();
             if (!container) {
                 return;
             }
-            const containerRect = container.getBoundingClientRect();
+            // 只在必要时更新容器信息（避免频繁重排）
+            if (!this.cachedContainer ||
+                this.cachedContainer !== container ||
+                now - this.lastContainerUpdateTime > this.containerUpdateInterval) {
+                this.cachedContainer = container;
+                this.cachedContainerRect = container.getBoundingClientRect();
+                this.cachedIconSize = {
+                    width: this.iconElement.offsetWidth,
+                    height: this.iconElement.offsetHeight
+                };
+                this.lastContainerUpdateTime = now;
+            }
+            const containerRect = this.cachedContainerRect;
+            const iconWidth = this.cachedIconSize.width;
+            const iconHeight = this.cachedIconSize.height;
             // 计算新位置
             let newX = clientX - this.dragOffset.x - containerRect.left;
             let newY = clientY - this.dragOffset.y - containerRect.top;
             // 限制在容器内
-            const iconWidth = this.iconElement.offsetWidth;
-            const iconHeight = this.iconElement.offsetHeight;
             if (container === document.body) {
                 // 限制在视口内
                 newX = Math.max(0, Math.min(newX, window.innerWidth - iconWidth));
@@ -465,11 +599,22 @@ class IconManager {
                 newX = Math.max(0, Math.min(newX, containerWidth - iconWidth));
                 newY = Math.max(0, Math.min(newY, containerHeight - iconHeight));
             }
-            // 更新位置
-            this.iconElement.style.left = `${newX}px`;
-            this.iconElement.style.top = `${newY}px`;
-            this.iconElement.style.right = 'auto';
-            this.iconElement.style.bottom = 'auto';
+            // 性能优化：使用 requestAnimationFrame 节流位置更新
+            this.pendingPosition.x = newX;
+            this.pendingPosition.y = newY;
+            this.pendingPosition.needsUpdate = true;
+            if (this.rafId === null) {
+                this.rafId = requestAnimationFrame(() => {
+                    this.rafId = null;
+                    if (this.pendingPosition.needsUpdate && this.iconElement && this.isDragging) {
+                        this.iconElement.style.left = `${this.pendingPosition.x}px`;
+                        this.iconElement.style.top = `${this.pendingPosition.y}px`;
+                        this.iconElement.style.right = 'auto';
+                        this.iconElement.style.bottom = 'auto';
+                        this.pendingPosition.needsUpdate = false;
+                    }
+                });
+            }
             // 更新最后位置
             this.lastTouchPosition.x = clientX;
             this.lastTouchPosition.y = clientY;
@@ -484,6 +629,14 @@ class IconManager {
      * 停止拖动
      */
     stopDrag(_e) {
+        const stopReason = this.isDragging ? 'drag_stopped' : 'not_dragging';
+        const finalPosition = this.iconElement ? {
+            left: this.iconElement.style.left,
+            top: this.iconElement.style.top,
+            computed: window.getComputedStyle(this.iconElement).left !== 'auto'
+                ? { left: window.getComputedStyle(this.iconElement).left, top: window.getComputedStyle(this.iconElement).top }
+                : null
+        } : null;
         this.cleanupDragEvents();
         if (!this.iconElement)
             return;
@@ -494,11 +647,14 @@ class IconManager {
         const touchDuration = Date.now() - this.touchStartTime;
         const isValidClick = !this.hasMoved && touchDuration < 1000 && !this.dragStarted;
         if (this.debug) {
-            console.log('Drag end', {
+            console.log('[IconManager] Drag end', {
+                stopReason,
                 hasMoved: this.hasMoved,
                 dragStarted: this.dragStarted,
                 touchDuration,
-                isValidClick
+                isValidClick,
+                finalPosition,
+                lastMousePosition: this.lastMousePosition
             });
         }
         // 先保存点击状态，然后重置拖动状态
@@ -538,6 +694,97 @@ class IconManager {
             }, 100); // 增加延迟到 100ms，确保拖动状态完全重置
         }
     }
+    /**
+     * 启动主动检测机制：使用 requestAnimationFrame 定期检查鼠标位置
+     * 即使没有 mousemove 事件，也能检测到鼠标是否进入 iframe
+     */
+    startActiveDetection() {
+        if (this.activeDetectionRafId !== null) {
+            if (this.debug) {
+                console.log('[IconManager] Active detection already running');
+            }
+            return; // 已经在运行
+        }
+        if (this.debug) {
+            console.log('[IconManager] Starting active detection mechanism');
+        }
+        const checkMousePosition = () => {
+            if (!this.isDragging) {
+                if (this.debug) {
+                    console.log('[IconManager] Active detection stopped (drag ended)');
+                }
+                this.activeDetectionRafId = null;
+                return;
+            }
+            // 检查是否长时间没有收到 mousemove 事件（超过 50ms）
+            const now = Date.now();
+            const timeSinceLastMove = now - this.lastMousePosition.timestamp;
+            if (timeSinceLastMove > 50) {
+                // 长时间没有收到事件，可能鼠标已经进入 iframe
+                // 使用最后记录的鼠标位置进行检测
+                const clientX = this.lastMousePosition.x;
+                const clientY = this.lastMousePosition.y;
+                if (this.debug) {
+                    console.log(`[IconManager] Active detection: No mousemove event for ${timeSinceLastMove}ms`, {
+                        lastMousePosition: { x: clientX, y: clientY },
+                        timestamp: this.lastMousePosition.timestamp
+                    });
+                }
+                // 更新 iframe 缓存（更频繁，每帧更新）
+                if (this.cachedIframes.length === 0 ||
+                    now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
+                    const allIframes = document.querySelectorAll('iframe');
+                    this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                        element: iframe,
+                        rect: iframe.getBoundingClientRect()
+                    }));
+                    this.lastIframeUpdateTime = now;
+                    if (this.debug) {
+                        console.log(`[IconManager] Active detection: Updated iframe cache (${this.cachedIframes.length} iframes)`);
+                    }
+                }
+                // 检查最后记录的鼠标位置是否在任何 iframe 上
+                for (const { rect, element } of this.cachedIframes) {
+                    if (clientX >= rect.left &&
+                        clientX <= rect.right &&
+                        clientY >= rect.top &&
+                        clientY <= rect.bottom) {
+                        // 鼠标在 iframe 上，立即停止拖动
+                        if (this.debug) {
+                            console.log('[IconManager] Active detection: Mouse over iframe detected, stopping drag immediately', {
+                                mousePosition: { x: clientX, y: clientY },
+                                iframeRect: {
+                                    left: rect.left,
+                                    top: rect.top,
+                                    right: rect.right,
+                                    bottom: rect.bottom
+                                },
+                                iframeSrc: element.src || 'no src',
+                                timeSinceLastMove
+                            });
+                        }
+                        this.stopDrag();
+                        return;
+                    }
+                }
+            }
+            // 继续检测
+            this.activeDetectionRafId = requestAnimationFrame(checkMousePosition);
+        };
+        this.activeDetectionRafId = requestAnimationFrame(checkMousePosition);
+    }
+    /**
+     * 停止主动检测机制
+     */
+    stopActiveDetection() {
+        if (this.activeDetectionRafId !== null) {
+            if (this.debug) {
+                console.log('[IconManager] Stopping active detection mechanism');
+            }
+            cancelAnimationFrame(this.activeDetectionRafId);
+            this.activeDetectionRafId = null;
+        }
+    }
     /**
      * 清理拖动事件
      */
@@ -569,6 +816,18 @@ class IconManager {
             window.clearTimeout(this.dragTimeoutId);
             this.dragTimeoutId = null;
         }
+        // 清理 requestAnimationFrame
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        // 清理主动检测机制
+        this.stopActiveDetection();
+        // 清理缓存
+        this.cachedContainer = null;
+        this.cachedContainerRect = null;
+        this.cachedIframes = []; // 清理 iframe 缓存
+        this.pendingPosition.needsUpdate = false;
     }
     /**
      * 处理点击事件