@@ -9,7 +9,7 @@ import Effect.Unsafe (unsafePerformEffect)
99import Foreign.Object as Object
1010import Framer.Motion (VariantLabel)
1111import Framer.Motion as Motion
12−import Hooks.Scroll (useScrollPosition)
12+import Yoga.Block.Hook.Scroll (useScrollPosition)
1313import Literals.Undefined (undefined)
1414import MotionValue (useMotionValue)
1515import MotionValue as MotionValue
@@ -21,12 +21,12 @@ import React.Basic.Hooks as React
2121import Unsafe.Coerce (unsafeCoerce)
2222import Yoga.Block.Atom.Segmented.Style as Style
2323
24−type Props =
25− { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))
26− , activeItemIndex ∷ Int
27− , updateActiveIndex ∷ Int -> Effect Unit
28− , windowWidth ∷ Number
29− }
24+type Props
25+ = { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))
26+ , activeItemIndex ∷ Int
27+ , updateActiveIndex ∷ Int -> Effect Unit
28+ , windowWidth ∷ Number
29+ }
3030
3131component ∷ ReactComponent Props
3232component =
@@ -42,14 +42,16 @@ component =
4242 _ <-
4343 runMaybeT do
4444 rawStyles <- traverse getStyle props.activeItemRefs
45− let styles = rawStyles <#> \s -> s { left = s.left + scrollX }
45+ let
46+ styles = rawStyles <#> \s -> s { left = s.left + scrollX }
4647 unless (maybeAnimationVariants == Just styles) do
4748 setVariants (Just styles) # lift
4849 mempty
4950 useLayoutEffect maybeDragX do
5051 case maybeDragX, maybeAnimationVariants of
5152 Just x, Just animationVariants -> do
52− let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
53+ let
54+ { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
5355 activeLeft # MotionValue.set left
5456 activeWidth # MotionValue.set width
5557 _, _ -> mempty
@@ -88,9 +90,12 @@ component =
8890 when (isJust maybeDragX) $ setDragX (Just pi.point.x)
8991 , onDragEnd:
9092 Motion.onDragEnd \_ pi -> do
91− let x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x should not happen"
92− let newIdx = findOverlapping props.activeItemIndex animationVariants x
93− let v = animationVariants TwoOrMore.!! newIdx # fromMaybe' \_ -> unsafeCrashWith "omg"
93+ let
94+ x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x should not happen"
95+ let
96+ newIdx = findOverlapping props.activeItemIndex animationVariants x
97+ let
98+ v = animationVariants TwoOrMore.!! newIdx # fromMaybe' \_ -> unsafeCrashWith "omg"
9499 setDragX Nothing
95100 activeLeft # MotionValue.set v.left
96101 activeWidth # MotionValue.set v.width
@@ -118,18 +123,23 @@ getStyle itemRef = do
118123indexToVariant ∷ Int -> VariantLabel
119124indexToVariant = show >>> unsafeCoerce
120125
121−type BBox =
122− { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }
126+type BBox
127+ = { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }
123128
124129findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int
125130findOverlapping activeIndex styles x =
126131 fromMaybe activeIndex do
127132 curr <- styles TwoOrMore.!! activeIndex
128− let fst = TwoOrMore.head styles
129− let lst = TwoOrMore.last styles
130− let inside e = (e.left < x) && (e.left + e.width) >= x
131− let tooFarLeft = MZ.guard (x <= fst.left + fst.width) $> 0
132− let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
133+ let
134+ fst = TwoOrMore.head styles
135+ let
136+ lst = TwoOrMore.last styles
137+ let
138+ inside e = (e.left < x) && (e.left + e.width) >= x
139+ let
140+ tooFarLeft = MZ.guard (x <= fst.left + fst.width) $> 0
141+ let
142+ tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
133143 TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
134144
135145handleDrag ∷
@@ -139,11 +149,16 @@ handleDrag ∷
139149 } ->
140150 { left ∷ Number, width ∷ Number }
141151handleDrag { x, activeItemIndex, animationVariants } = do
142− let idx = findOverlapping activeItemIndex animationVariants x
143− let av = animationVariants
144− let firstVariant = av # TwoOrMore.head
145− let lastVariant = av # TwoOrMore.last
146− let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"
152+ let
153+ idx = findOverlapping activeItemIndex animationVariants x
154+ let
155+ av = animationVariants
156+ let
157+ firstVariant = av # TwoOrMore.head
158+ let
159+ lastVariant = av # TwoOrMore.last
160+ let
161+ baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"
147162 let
148163 closestVariant =
149164 if x >= (baseVariant.left + (baseVariant.width / 2.0)) then
@@ -157,25 +172,41 @@ handleDrag { x, activeItemIndex, animationVariants } = do
157172 else
158173 closestVariant /\ baseVariant
159174 -- Total
160− let rangeStart = smaller.left + (smaller.width / 2.0)
161− let rangeEnd = greater.left + (greater.width / 2.0)
162− let range = rangeEnd - rangeStart
163− let ratio = ((x - rangeStart) / range)
164− let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
175+ let
176+ rangeStart = smaller.left + (smaller.width / 2.0)
177+ let
178+ rangeEnd = greater.left + (greater.width / 2.0)
179+ let
180+ range = rangeEnd - rangeStart
181+ let
182+ ratio = ((x - rangeStart) / range)
183+ let
184+ interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
165185 -- Right
166− let rangeStartRight = smaller.left + smaller.width
167− let rangeEndRight = greater.left + greater.width
168− let rangeRight = rangeEndRight - rangeStartRight
169− let ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
186+ let
187+ rangeStartRight = smaller.left + smaller.width
188+ let
189+ rangeEndRight = greater.left + greater.width
190+ let
191+ rangeRight = rangeEndRight - rangeStartRight
192+ let
193+ ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
170194 -- Left
171− let rangeStartLeft = smaller.left
172− let rangeEndLeft = greater.left
173− let rangeLeft = rangeEndLeft - rangeStartLeft
174− let ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
195+ let
196+ rangeStartLeft = smaller.left
197+ let
198+ rangeEndLeft = greater.left
199+ let
200+ rangeLeft = rangeEndLeft - rangeStartLeft
201+ let
202+ ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
175203 -- Individual
176− let left = rangeStartLeft + (ratioLeft * rangeLeft)
177− let right = rangeStartRight + (ratioRight * rangeRight)
178− let width = right - left
204+ let
205+ left = rangeStartLeft + (ratioLeft * rangeLeft)
206+ let
207+ right = rangeStartRight + (ratioRight * rangeRight)
208+ let
209+ width = right - left
179210 if x < firstVariant.left then
180211 { left: firstVariant.left, width: firstVariant.width }
181212 else