chroe: darg event

wenlng · Sep 20, 2024 · d159bed · d159bed
1 parent e3ad5c3
commit d159bed
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 29 deletions.
diff --git a/example/App.vue b/example/App.vue
@@ -84,6 +84,13 @@ const slideEvents = {
     slideData.thumbY = 60
     slideData.image = clickImage2
   },
+  confirm(dots: any, clear: Function): void {
+    console.log("dots >>>>>>>", dots)
+
+    setTimeout(() => {
+      clear()
+    }, 100)
+  },
   close(): void {
     console.log("close >>>>>>>")
   }
@@ -101,6 +108,13 @@ const slideRegionEvents = {
   move(x: number, y: number): void {
     console.log("move >>>>>>>", x, y)
   },
+  confirm(dots: any, clear: Function): void {
+    console.log("dots >>>>>>>", dots)
+
+    setTimeout(() => {
+      clear()
+    }, 100)
+  },
   refresh(): void {
     console.log("refresh >>>>>>>")
 
@@ -122,6 +136,13 @@ const rotateEvents = {
   rotate(angle: number): void {
     console.log("rotate >>>>>>>", angle)
   },
+  confirm(point: any, clear: Function): void {
+    console.log("point >>>>>>>", point)
+
+    setTimeout(() => {
+      clear()
+    }, 100)
+  },
   refresh(): void {
     console.log("refresh >>>>>>>")
     rotateData.image = clickImage2

diff --git a/packages/components/rotate/hooks/handler.ts b/packages/components/rotate/hooks/handler.ts
@@ -27,6 +27,7 @@ export function useHandler(
 
     let angle = 0
     let isMoving = false
+    let tmpLeaveDragEvent: Event|any = null
     let startX = 0;
     if (touch) {
       startX = touch.pageX - offsetLeft
@@ -74,12 +75,7 @@ export function useHandler(
         return
       }
 
-      dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
-      dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
-
-      dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
-      dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
-      dragBarRef.value.removeEventListener("touchend", upEvent, false)
+      clearEvent()
 
       isMoving = false
       event.confirm && event.confirm(parseInt(angle.toString()), () => {
@@ -90,11 +86,47 @@ export function useHandler(
       e.preventDefault()
     }
 
+    const leaveDragBlockEvent = (e: Event|any) => {
+      tmpLeaveDragEvent = e
+    }
+
+    const enterDragBlockEvent = () => {
+      tmpLeaveDragEvent = null
+    }
+
+    const leaveUpEvent = (_: Event|any) => {
+      if(!tmpLeaveDragEvent) {
+        return
+      }
+
+      upEvent(tmpLeaveDragEvent)
+      clearEvent()
+    }
+
+    const clearEvent = () => {
+      dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
+      dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
+
+      dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
+      // dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
+      dragBarRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
+      dragBarRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
+      dragBarRef.value.removeEventListener("touchend", upEvent, false)
+
+      document.body.removeEventListener("mouseleave", upEvent, false)
+      document.body.removeEventListener("mouseup", leaveUpEvent, false)
+    }
+
     dragBarRef.value.addEventListener("mousemove", moveEvent, false)
     dragBarRef.value.addEventListener("touchmove", moveEvent, { passive: false })
     dragBarRef.value.addEventListener( "mouseup", upEvent, false)
-    dragBarRef.value.addEventListener( "mouseout", upEvent, false)
+    // dragBarRef.value.addEventListener( "mouseout", upEvent, false)
+    dragBarRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
+    dragBarRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
     dragBarRef.value.addEventListener("touchend", upEvent, false)
+
+    document.body.addEventListener("mouseleave", upEvent, false)
+    document.body.addEventListener("mouseup", leaveUpEvent, false)
   }
 
   const closeEvent = (e: Event|any) => {

diff --git a/packages/components/rotate/index.vue b/packages/components/rotate/index.vue
@@ -26,10 +26,12 @@
       </div>
     </div>
     <div class="gc-footer">
-      <div class="gc-drag-slide-bar" ref="dragBarRef" @mousedown="handler.dragEvent">
+      <div class="gc-drag-slide-bar" ref="dragBarRef">
         <div class="gc-drag-line" />
-        <div class="gc-drag-block" ref="dragBlockRef" @touchstart="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
-          <arrows-icon />
+        <div class="gc-drag-block" ref="dragBlockRef" @mousedown="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
+          <div class="drag-block-inline" @touchstart="handler.dragEvent">
+            <arrows-icon />
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/components/slide-region/hooks/handler.ts b/packages/components/slide-region/hooks/handler.ts
@@ -28,6 +28,7 @@ export function useHandler(
     const maxHeight = height - tileHeight
 
     let isMoving = false
+    let tmpLeaveDragEvent: Event|any = null
     let startX = 0
     let startY = 0
     let tileLeft = 0
@@ -89,13 +90,7 @@ export function useHandler(
         return
       }
       isMoving = false
-
-      containerRef.value.removeEventListener("mousemove", moveEvent, false)
-      containerRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
-
-      containerRef.value.removeEventListener( "mouseup", upEvent, false)
-      containerRef.value.removeEventListener( "mouseout", upEvent, false)
-      containerRef.value.removeEventListener("touchend", upEvent, false)
+      clearEvent()
 
       event.confirm && event.confirm({x: tileLeft, y: tileTop}, () => {
         clear()
@@ -105,11 +100,46 @@ export function useHandler(
       e.preventDefault()
     }
 
+    const leaveDragBlockEvent = (e: Event|any) => {
+      tmpLeaveDragEvent = e
+    }
+
+    const enterDragBlockEvent = () => {
+      tmpLeaveDragEvent = null
+    }
+
+    const leaveUpEvent = (_: Event|any) => {
+      if(!tmpLeaveDragEvent) {
+        return
+      }
+
+      upEvent(tmpLeaveDragEvent)
+      clearEvent()
+    }
+
+    const clearEvent = () => {
+      containerRef.value.removeEventListener("mousemove", moveEvent, false)
+      containerRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
+      containerRef.value.removeEventListener( "mouseup", upEvent, false)
+      // containerRef.value.removeEventListener( "mouseout", upEvent, false)
+      containerRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
+      containerRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
+      containerRef.value.removeEventListener("touchend", upEvent, false)
+
+      document.body.removeEventListener("mouseleave", upEvent, false)
+      document.body.removeEventListener("mouseup", leaveUpEvent, false)
+    }
+
     containerRef.value.addEventListener("mousemove", moveEvent, false)
     containerRef.value.addEventListener("touchmove", moveEvent, { passive: false })
     containerRef.value.addEventListener( "mouseup", upEvent, false)
-    containerRef.value.addEventListener( "mouseout", upEvent, false)
+    // containerRef.value.addEventListener( "mouseout", upEvent, false)
+    containerRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
+    containerRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
     containerRef.value.addEventListener("touchend", upEvent, false)
+
+    document.body.addEventListener("mouseleave", upEvent, false)
+    document.body.addEventListener("mouseup", leaveUpEvent, false)
   }
 
   const closeEvent = (e: Event|any) => {

diff --git a/packages/components/slide/hooks/handler.ts b/packages/components/slide/hooks/handler.ts
@@ -31,6 +31,7 @@ export function useHandler(
     const ratio = ((maxWidth - thumbX) + ad) / maxWidth
 
     let isMoving = false
+    let tmpLeaveDragEvent: Event|any = null
     let startX = 0
     let currentThumbX = 0
     if (touch) {
@@ -79,14 +80,8 @@ export function useHandler(
         return
       }
 
-      dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
-      dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
-
-      dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
-      dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
-      dragBarRef.value.removeEventListener("touchend", upEvent, false)
-
       isMoving = false
+      clearEvent()
       event.confirm && event.confirm({x: parseInt(currentThumbX.toString()), y: data.thumbY || 0}, () => {
         clear()
       })
@@ -95,11 +90,47 @@ export function useHandler(
       e.preventDefault()
     }
 
+    const leaveDragBlockEvent = (e: Event|any) => {
+      tmpLeaveDragEvent = e
+    }
+
+    const enterDragBlockEvent = () => {
+      tmpLeaveDragEvent = null
+    }
+
+    const leaveUpEvent = (_: Event|any) => {
+      if(!tmpLeaveDragEvent) {
+        return
+      }
+
+      upEvent(tmpLeaveDragEvent)
+      clearEvent()
+    }
+
+    const clearEvent = () => {
+      dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
+      dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
+
+      dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
+      // dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
+      dragBarRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
+      dragBarRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
+      dragBarRef.value.removeEventListener("touchend", upEvent, false)
+
+      document.body.removeEventListener("mouseleave", upEvent, false)
+      document.body.removeEventListener("mouseup", leaveUpEvent, false)
+    }
+
     dragBarRef.value.addEventListener("mousemove", moveEvent, false)
     dragBarRef.value.addEventListener("touchmove", moveEvent, { passive: false })
     dragBarRef.value.addEventListener( "mouseup", upEvent, false)
-    dragBarRef.value.addEventListener( "mouseout", upEvent, false)
+    // dragBarRef.value.addEventListener( "mouseout", upEvent, false)
+    dragBarRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
+    dragBarRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
     dragBarRef.value.addEventListener("touchend", upEvent, false)
+
+    document.body.addEventListener("mouseleave", upEvent, false)
+    document.body.addEventListener("mouseup", leaveUpEvent, false)
   }
 
   const closeEvent = (e: Event|any) => {

diff --git a/packages/components/slide/index.vue b/packages/components/slide/index.vue
@@ -20,10 +20,12 @@
       </div>
     </div>
     <div class="gc-footer">
-      <div class="gc-drag-slide-bar" ref="dragBarRef" @mousedown="handler.dragEvent">
+      <div class="gc-drag-slide-bar" ref="dragBarRef">
         <div class="gc-drag-line" />
-        <div class="gc-drag-block" ref="dragBlockRef" @touchstart="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
-        <arrows-icon />
+        <div class="gc-drag-block" ref="dragBlockRef" @mousedown="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
+          <div class="drag-block-inline" @touchstart="handler.dragEvent">
+            <arrows-icon />
+          </div>
       </div>
     </div>
     </div>

diff --git a/packages/gocaptcha.less b/packages/gocaptcha.less
@@ -259,4 +259,12 @@
     color: var(--go-captcha-theme-drag-icon-color);
     fill: var(--go-captcha-theme-drag-icon-color);
   }
+
+  .drag-block-inline {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }