From 27d6f616c20fa41869f923d56c6d0f5921ca1c50 Mon Sep 17 00:00:00 2001
From: wiidede <wiixdede@gmail.com>
Date: Fri, 20 Oct 2023 09:24:48 +0800
Subject: [PATCH] feat: better delete judgment

---
 src/RangeThumb.vue | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/RangeThumb.vue b/src/RangeThumb.vue
index 87292e5..b0c6de9 100644
--- a/src/RangeThumb.vue
+++ b/src/RangeThumb.vue
@@ -38,8 +38,18 @@ const containerRef = inject(RangeContainerRefKey)
 
 const deleting = ref(false)
 
+function shouldDelete(clientY: number) {
+  if (!containerRef?.value || !trackRef?.value)
+    return false
+  const containerRect = containerRef.value.getBoundingClientRect()
+  const trackRect = trackRef.value.getBoundingClientRect()
+  const top = Math.min(containerRect.top, trackRect.top - 32)
+  const bottom = Math.max(containerRect.bottom, trackRect.bottom + 32)
+  return clientY < top || clientY > bottom
+}
+
 function onPointerMove(e: PointerEvent) {
-  if (!thumbRef.value || !trackRef?.value || !containerRef?.value || props.disabled)
+  if (!thumbRef.value || !trackRef?.value || props.disabled)
     return
   const trackRect = trackRef.value.getBoundingClientRect()
   const offset = e.clientX - trackRect.left
@@ -50,26 +60,20 @@ function onPointerMove(e: PointerEvent) {
     emits('update', 100)
   else if (!Number.isNaN(percent))
     emits('update', percent)
-  if (props.addable) {
-    const containerRect = containerRef.value.getBoundingClientRect()
-    if (e.clientY - containerRect.top < 0 || e.clientY - containerRect.bottom > 0)
-      deleting.value = true
-    else
-      deleting.value = false
-  }
+  if (props.addable)
+    deleting.value = shouldDelete(e.clientY)
 }
 
 async function onPointerUp(e: PointerEvent) {
   window.removeEventListener('pointermove', onPointerMove)
   window.removeEventListener('pointerup', onPointerUp)
   window.removeEventListener('pointercancel', onPointerUp)
-  if (e.type === 'pointercancel' || !containerRef?.value || props.disabled) {
+  if (e.type === 'pointercancel' || props.disabled) {
     emits('moveDone')
     return
   }
-  const containerRect = containerRef.value.getBoundingClientRect()
   if (props.addable) {
-    if (e.clientY - containerRect.top < 0 || e.clientY - containerRect.bottom > 0) {
+    if (shouldDelete(e.clientY)) {
       deleting.value = false
       emits('delete')
     }