@xpert-ai/chatkit-web-component 0.5.1 → 0.5.2

package/dist/xpert-chatkit.js

@@ -1427,6 +1427,7 @@ class PetOverlay {
     this.lastDragPosition = null;
     this.lastDragClientX = null;
     this.dragAnimation = null;
+    this.activePointerId = null;
     this.isDragging = false;
     this.isHovering = false;
     this.movedDuringDrag = false;
@@ -1558,7 +1559,7 @@ class PetOverlay {
     };
     this.handlePointerDown = (event) => {
       var _a2, _b2;
-      if (event.button !== 0 || event.ctrlKey) {
+      if (event.button !== 0 || event.ctrlKey || this.isDragging) {
         return;
       }
       this.closeContextMenu();
@@ -1584,12 +1585,17 @@ class PetOverlay {
       this.movedDuringDrag = false;
       this.dragPosition = nextPosition;
       this.isDragging = true;
+      this.activePointerId = event.pointerId;
       this.clearRestingDelayTimer();
       this.isHovering = true;
+      this.captureActivePointer();
       this.installDragListeners();
       this.rescheduleAnimation();
     };
     this.handlePointerMove = (event) => {
+      if (!this.isActiveDragPointer(event)) {
+        return;
+      }
       const nextPosition = this.getNextDragPosition(event);
       const last = this.lastDragPosition;
       if (last && (Math.abs(last.x - nextPosition.x) > DRAG_DIRECTION_THRESHOLD_PX || Math.abs(last.y - nextPosition.y) > DRAG_DIRECTION_THRESHOLD_PX)) {
@@ -1609,20 +1615,18 @@ class PetOverlay {
       this.render();
     };
     this.handlePointerUp = (event) => {
+      if (!this.isActiveDragPointer(event)) {
+        return;
+      }
       const finalPosition = this.lastDragPosition ?? this.getNextDragPosition(event);
-      this.isDragging = false;
-      this.dragPosition = null;
-      this.dragAnimation = null;
-      this.lastDragClientX = null;
-      this.removeDragListeners();
-      this.persistPosition(finalPosition);
-      if (event.pointerType === "mouse" && this.isPointerOverPet(event)) {
-        this.isHovering = true;
-        this.rescheduleAnimation();
-      } else {
-        this.enterRestingAfterDelay();
-        this.rescheduleAnimation();
+      this.finishDrag(finalPosition, event);
+    };
+    this.handleLostPointerCapture = (event) => {
+      if (!this.isActiveDragPointer(event)) {
+        return;
       }
+      const finalPosition = this.lastDragPosition ?? this.getNextDragPosition(event);
+      this.finishDrag(finalPosition, event);
     };
     this.handleClick = () => {
       var _a2;
@@ -1826,6 +1830,7 @@ class PetOverlay {
     pet.addEventListener("pointerenter", this.handlePointerEnter);
     pet.addEventListener("pointerleave", this.handlePointerLeave);
     pet.addEventListener("pointerdown", this.handlePointerDown);
+    pet.addEventListener("lostpointercapture", this.handleLostPointerCapture);
     pet.addEventListener("contextmenu", this.handleContextMenu);
     pet.addEventListener("click", this.handleClick);
     overlay.append(style, pet);
@@ -1835,6 +1840,7 @@ class PetOverlay {
   }
   removeOverlay() {
     var _a2;
+    this.cancelActiveDrag();
     this.clearRestingDelayTimer();
     this.clearTimers();
     this.closeContextMenu();
@@ -1851,6 +1857,10 @@ class PetOverlay {
         "pointerdown",
         this.handlePointerDown
       );
+      this.petElement.removeEventListener(
+        "lostpointercapture",
+        this.handleLostPointerCapture
+      );
       this.petElement.removeEventListener(
         "contextmenu",
         this.handleContextMenu
@@ -2568,6 +2578,34 @@ class PetOverlay {
       this.render();
     }
   }
+  captureActivePointer() {
+    const pointerId = this.activePointerId;
+    const pet = this.petElement;
+    if (pointerId === null || typeof (pet == null ? void 0 : pet.setPointerCapture) !== "function") {
+      return;
+    }
+    try {
+      pet.setPointerCapture(pointerId);
+    } catch {
+    }
+  }
+  releaseActivePointer() {
+    const pointerId = this.activePointerId;
+    const pet = this.petElement;
+    this.activePointerId = null;
+    if (pointerId === null || typeof (pet == null ? void 0 : pet.hasPointerCapture) !== "function" || typeof pet.releasePointerCapture !== "function") {
+      return;
+    }
+    try {
+      if (pet.hasPointerCapture(pointerId)) {
+        pet.releasePointerCapture(pointerId);
+      }
+    } catch {
+    }
+  }
+  isActiveDragPointer(event) {
+    return this.isDragging && event.pointerId === this.activePointerId;
+  }
   getNextDragPosition(event) {
     if (!this.options) {
       return { x: 0, y: 0 };
@@ -2582,12 +2620,35 @@ class PetOverlay {
       normalizeBoundsPadding(this.options.position.boundsPadding)
     );
   }
+  finishDrag(finalPosition, event) {
+    this.isDragging = false;
+    this.dragPosition = null;
+    this.dragAnimation = null;
+    this.lastDragClientX = null;
+    this.removeDragListeners();
+    this.releaseActivePointer();
+    this.persistPosition(finalPosition);
+    if (event.pointerType === "mouse" && this.isPointerOverPet(event)) {
+      this.isHovering = true;
+      this.rescheduleAnimation();
+    } else {
+      this.enterRestingAfterDelay();
+      this.rescheduleAnimation();
+    }
+  }
+  cancelActiveDrag() {
+    this.isDragging = false;
+    this.dragPosition = null;
+    this.dragAnimation = null;
+    this.lastDragPosition = null;
+    this.lastDragClientX = null;
+    this.removeDragListeners();
+    this.releaseActivePointer();
+  }
   installDragListeners() {
     window.addEventListener("pointermove", this.handlePointerMove);
-    window.addEventListener("pointerup", this.handlePointerUp, { once: true });
-    window.addEventListener("pointercancel", this.handlePointerUp, {
-      once: true
-    });
+    window.addEventListener("pointerup", this.handlePointerUp);
+    window.addEventListener("pointercancel", this.handlePointerUp);
   }
   removeDragListeners() {
     window.removeEventListener("pointermove", this.handlePointerMove);