From d159bedcde36f3697ad4d9e1bcf53fbf7f1dddc1 Mon Sep 17 00:00:00 2001 From: Awen Date: Fri, 20 Sep 2024 23:40:49 +0800 Subject: [PATCH] chroe: darg event --- example/App.vue | 21 +++++++++ packages/components/rotate/hooks/handler.ts | 46 +++++++++++++++--- packages/components/rotate/index.vue | 8 ++-- .../components/slide-region/hooks/handler.ts | 46 ++++++++++++++---- packages/components/slide/hooks/handler.ts | 47 +++++++++++++++---- packages/components/slide/index.vue | 8 ++-- packages/gocaptcha.less | 8 ++++ 7 files changed, 155 insertions(+), 29 deletions(-) diff --git a/example/App.vue b/example/App.vue index 3db15d2..6995878 100644 --- 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 index 307d590..c41ba92 100644 --- 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 index 10609b7..7671ec0 100644 --- a/packages/components/rotate/index.vue +++ b/packages/components/rotate/index.vue @@ -26,10 +26,12 @@
-
+
-
- +
+
+ +
diff --git a/packages/components/slide-region/hooks/handler.ts b/packages/components/slide-region/hooks/handler.ts index 0c63132..8d73211 100644 --- 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 index ad33f9f..5d953fb 100644 --- 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 index 1137760..db0788f 100644 --- a/packages/components/slide/index.vue +++ b/packages/components/slide/index.vue @@ -20,10 +20,12 @@
-
+
-
- +
+
+ +
diff --git a/packages/gocaptcha.less b/packages/gocaptcha.less index 85618f7..80f4868 100644 --- 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; + } } \ No newline at end of file