From 91a89a5d2b2e056c4f891c90621a63b75a38823e Mon Sep 17 00:00:00 2001
From: wiidede <wiixdede@gmail.com>
Date: Fri, 20 Oct 2023 22:50:32 +0800
Subject: [PATCH] feat: remove container ref

---
 src/Range.ts       |  1 -
 src/Range.vue      |  5 +----
 src/RangeThumb.vue | 14 ++++++--------
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/Range.ts b/src/Range.ts
index 6688692..2af2711 100644
--- a/src/Range.ts
+++ b/src/Range.ts
@@ -1,4 +1,3 @@
 import type { InjectionKey, Ref } from 'vue'
 
 export const RangeTrackRefKey: InjectionKey<Ref<HTMLElement | undefined>> = Symbol('RangeTrackRefKey')
-export const RangeContainerRefKey: InjectionKey<Ref<HTMLElement | undefined>> = Symbol('RangeContainerRefKey')
diff --git a/src/Range.vue b/src/Range.vue
index 25f40e2..0dbd0e5 100644
--- a/src/Range.vue
+++ b/src/Range.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup generic="T = any, U = RangeValueType<T>">
 import { computed, nextTick, provide, ref, watch } from 'vue'
-import { RangeContainerRefKey, RangeTrackRefKey } from './Range'
+import { RangeTrackRefKey } from './Range'
 import RangeThumb from './RangeThumb.vue'
 import type { RangeData, RangeMarks, RangeRenderFn, RangeValue, RangeValueType } from './type'
 import { percentage2value, swap, value2percentage } from './utils'
@@ -126,7 +126,6 @@ watch(model, (val) => {
 })
 
 const trackRef = ref<HTMLElement>()
-const containerRef = ref<HTMLElement>()
 
 function getValue(percentage: number) {
   return percentage2value(percentage, props.min, props.max, props.step)
@@ -210,12 +209,10 @@ function addThumb(e: MouseEvent) {
 }
 
 provide(RangeTrackRefKey, trackRef)
-provide(RangeContainerRefKey, containerRef)
 </script>
 
 <template>
   <div
-    ref="containerRef"
     class="dark:m-range-theme-dark m-range-theme m-range"
     :class="[`m-range-${vertical ? 'v-' : ''}${size}`, `m-range-${vertical ? 'v-' : ''}thumb-${thumbSize}`]"
   >
diff --git a/src/RangeThumb.vue b/src/RangeThumb.vue
index fa6063d..b7200a1 100644
--- a/src/RangeThumb.vue
+++ b/src/RangeThumb.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup generic="T = any, U = RangeValueType<T>">
 import { computed, inject, nextTick, ref } from 'vue'
-import { RangeContainerRefKey, RangeTrackRefKey } from './Range'
+import { RangeTrackRefKey } from './Range'
 import Render from './Render.vue'
 import type { RangeData, RangeRenderFn, RangeValueType } from './type'
 
@@ -36,7 +36,6 @@ defineSlots<{
 
 const thumbRef = ref<HTMLElement>()
 const trackRef = inject(RangeTrackRefKey)
-const containerRef = inject(RangeContainerRefKey)
 
 const removable = computed(() => props.addable && !props.unremovable)
 const cursor = computed(() => props.disabled ? 'cursor-not-allowed' : removable.value ? 'cursor-move' : props.vertical ? 'cursor-ns-resize' : 'cursor-ew-resize')
@@ -53,18 +52,17 @@ function setTrackCursor(cursor: string | undefined) {
 }
 
 function shouldDelete(offset: number) {
-  if (!containerRef?.value || !trackRef?.value)
+  if (!trackRef?.value)
     return false
-  const containerRect = containerRef.value.getBoundingClientRect()
   const trackRect = trackRef.value.getBoundingClientRect()
   if (props.vertical) {
-    const left = Math.min(containerRect.left, trackRect.left - 32)
-    const right = Math.max(containerRect.right, trackRect.right + 32)
+    const left = trackRect.left - 32
+    const right = trackRect.right + 32
     return offset < left || offset > right
   }
   else {
-    const top = Math.min(containerRect.top, trackRect.top - 32)
-    const bottom = Math.max(containerRect.bottom, trackRect.bottom + 32)
+    const top = trackRect.top - 32
+    const bottom = trackRect.bottom + 32
     return offset < top || offset > bottom
   }
 }