Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 5x 18x 18x 9x 9x 9x 9x 9x 9x 5x 8x 8x 8x 5x 2x 2x 1x 2x 1x 2x 5x 3x 3x 1x 3x 1x 3x 5x 5x 5x | export type SliderRangePosition = {
leftEnd: number
rightStart: number
}
export type CalculateSliderRangePositionArgument = {
minValue: number
maxValue: number
currentLeftValue: number
currentRightValue: number
sliderWidth: number
}
export const calculateSliderRangePosition = ({
minValue,
maxValue,
currentLeftValue,
currentRightValue,
sliderWidth
}: CalculateSliderRangePositionArgument): SliderRangePosition => {
const totalFraction = maxValue - minValue
if (totalFraction <= 0) {
return { leftEnd: sliderWidth, rightStart: sliderWidth }
}
const leftFraction = (currentLeftValue - minValue) / totalFraction
const rightFraction = (currentRightValue - minValue) / totalFraction
const leftThumbPosition = leftFraction * sliderWidth
const rightThumbPosition = rightFraction * sliderWidth
return { leftEnd: leftThumbPosition, rightStart: rightThumbPosition }
}
type ThumbPosition2ValueArgument = {
thumbX: number
minValue: number
maxValue: number
sliderWidth: number
}
export const thumbPosition2Value = ({ thumbX, minValue, maxValue, sliderWidth }: ThumbPosition2ValueArgument) => {
const valuePerPixel = (maxValue - minValue) / sliderWidth
const value = minValue + thumbX * valuePerPixel
return Math.round(value)
}
type UpdateThumbXArgument = {
deltaX: number
thumbScreenX: number
thumbRadius: number
otherThumbScreenX: number
sliderBoundingClientRectX: number
sliderWidth: number
minValue: number
maxValue: number
}
export const updateRightThumb = ({
deltaX,
thumbScreenX,
thumbRadius,
otherThumbScreenX,
sliderBoundingClientRectX,
sliderWidth,
minValue,
maxValue
}: UpdateThumbXArgument) => {
let newRightThumbScreenX = thumbScreenX + deltaX
if (newRightThumbScreenX > sliderBoundingClientRectX + sliderWidth - thumbRadius) {
newRightThumbScreenX = sliderBoundingClientRectX + sliderWidth - thumbRadius
}
if (newRightThumbScreenX < otherThumbScreenX) {
newRightThumbScreenX = otherThumbScreenX
}
return calculateUpdate({
newThumbScreenX: newRightThumbScreenX,
sliderBoundingClientRectX,
thumbRadius,
sliderWidth,
minValue,
maxValue
})
}
export const updateLeftThumb = ({
deltaX,
thumbScreenX,
thumbRadius,
otherThumbScreenX,
sliderBoundingClientRectX,
sliderWidth,
minValue,
maxValue
}: UpdateThumbXArgument) => {
let newLeftThumbScreenX = thumbScreenX + deltaX
if (newLeftThumbScreenX < sliderBoundingClientRectX - thumbRadius) {
newLeftThumbScreenX = sliderBoundingClientRectX - thumbRadius
}
if (newLeftThumbScreenX > otherThumbScreenX) {
newLeftThumbScreenX = otherThumbScreenX
}
return calculateUpdate({
newThumbScreenX: newLeftThumbScreenX,
sliderBoundingClientRectX,
thumbRadius,
sliderWidth,
minValue,
maxValue
})
}
type CalculateUpdateArgument = {
newThumbScreenX: number
sliderBoundingClientRectX: number
thumbRadius: number
sliderWidth: number
minValue: number
maxValue: number
}
const calculateUpdate = ({
newThumbScreenX,
sliderBoundingClientRectX,
thumbRadius,
sliderWidth,
minValue,
maxValue
}: CalculateUpdateArgument) => {
// own screen.x + thumb radius - sliderStart, so thumb is centered on its value
const updatedThumbX = newThumbScreenX - sliderBoundingClientRectX + thumbRadius
return {
updatedThumbX,
upcomingValue: thumbPosition2Value({
thumbX: updatedThumbX,
minValue,
maxValue,
sliderWidth
})
}
}
|