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

package/dist/xpert-chatkit.umd.cjs

@@ -1431,6 +1431,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.lastDragPosition = null;
       this.lastDragClientX = null;
       this.dragAnimation = null;
+      this.activePointerId = null;
       this.isDragging = false;
       this.isHovering = false;
       this.movedDuringDrag = false;
@@ -1562,7 +1563,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       };
       this.handlePointerDown = (event) => {
         var _a2, _b2;
-        if (event.button !== 0 || event.ctrlKey) {
+        if (event.button !== 0 || event.ctrlKey || this.isDragging) {
           return;
         }
         this.closeContextMenu();
@@ -1588,12 +1589,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         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)) {
@@ -1613,20 +1619,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         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;
@@ -1830,6 +1834,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       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);
@@ -1839,6 +1844,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     removeOverlay() {
       var _a2;
+      this.cancelActiveDrag();
       this.clearRestingDelayTimer();
       this.clearTimers();
       this.closeContextMenu();
@@ -1855,6 +1861,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           "pointerdown",
           this.handlePointerDown
         );
+        this.petElement.removeEventListener(
+          "lostpointercapture",
+          this.handleLostPointerCapture
+        );
         this.petElement.removeEventListener(
           "contextmenu",
           this.handleContextMenu
@@ -2572,6 +2582,34 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         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 };
@@ -2586,12 +2624,35 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         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);