From 4ef0e634bb9f7a9f92df00499f30c88707e31052 Mon Sep 17 00:00:00 2001 From: mostovoy Date: Mon, 12 Feb 2024 18:15:00 +0300 Subject: [PATCH 1/3] feat: add drag closes handle when press on rail --- examples/react/basic/src/main.tsx | 2 ++ packages/ranger/src/index.ts | 32 +++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx index 5e58f96..4bd909b 100644 --- a/examples/react/basic/src/main.tsx +++ b/examples/react/basic/src/main.tsx @@ -34,6 +34,8 @@ function App() { boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)', borderRadius: '2px', }} + onMouseDown={rangerInstance.handleRailPress} + onTouchStart={rangerInstance.handleRailPress} > {rangerInstance .handles() diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts index 84f4116..bd26c6f 100644 --- a/packages/ranger/src/index.ts +++ b/packages/ranger/src/index.ts @@ -115,6 +115,23 @@ export class Ranger { } } + getClosesValueIndex = (val: number): number => { + let index = -1 + let closesValueIndex = -1 + let distanceBuffer = -1 + + this.options.values.forEach((value, index) => { + const diff = value - val + const distance = Math.abs(diff) + if (closesValueIndex === -1 || distance < distanceBuffer) { + closesValueIndex = index + distanceBuffer = distance + } + }) + + return closesValueIndex + } + roundToStep = (val: number) => { const { min, max } = this.options @@ -217,6 +234,21 @@ export class Ranger { document.addEventListener('touchend', handleRelease) } + handleRailPress = (e: any) => { + const clientX = + e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX + const value = this.getValueForClientX(clientX) + const activeHandleIndex = this.getClosesValueIndex(value) + + this.activeHandleIndex = activeHandleIndex + this.handleDrag(e) + if (this.options.onChange) { + this.options.onChange(this) + } + + this.handlePress(e, activeHandleIndex) + } + getPercentageForValue = (val: number) => this.options.interpolator.getPercentageForValue( val, From f1c04674fdecb89fc2e71c9d01f57d04df286d8f Mon Sep 17 00:00:00 2001 From: mostovoy Date: Mon, 12 Feb 2024 18:40:10 +0300 Subject: [PATCH 2/3] feat: add drag closes handle when press on rail #2 --- packages/ranger/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts index bd26c6f..abfa6ac 100644 --- a/packages/ranger/src/index.ts +++ b/packages/ranger/src/index.ts @@ -116,7 +116,6 @@ export class Ranger { } getClosesValueIndex = (val: number): number => { - let index = -1 let closesValueIndex = -1 let distanceBuffer = -1 From b46d8ba882db61e3c094cd4c74d98184a33a135d Mon Sep 17 00:00:00 2001 From: mostovoy Date: Wed, 10 Apr 2024 15:03:28 +0300 Subject: [PATCH 3/3] feat: add drag closes handle when press on rail #3 --- packages/ranger/src/index.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts index abfa6ac..b75b4aa 100644 --- a/packages/ranger/src/index.ts +++ b/packages/ranger/src/index.ts @@ -115,12 +115,12 @@ export class Ranger { } } - getClosesValueIndex = (val: number): number => { + getClosesValueIndex = (percentage: number): number => { let closesValueIndex = -1 let distanceBuffer = -1 this.options.values.forEach((value, index) => { - const diff = value - val + const diff = this.getPercentageForValue(value) - percentage const distance = Math.abs(diff) if (closesValueIndex === -1 || distance < distanceBuffer) { closesValueIndex = index @@ -237,14 +237,12 @@ export class Ranger { const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX const value = this.getValueForClientX(clientX) - const activeHandleIndex = this.getClosesValueIndex(value) + const percentageForValue = this.getPercentageForValue(value) + const activeHandleIndex = this.getClosesValueIndex(percentageForValue) this.activeHandleIndex = activeHandleIndex - this.handleDrag(e) - if (this.options.onChange) { - this.options.onChange(this) - } + this.handleDrag(e) this.handlePress(e, activeHandleIndex) }