git.iko.soy/rowtype-yoga/psfp
on master help sign in
Whatever
commit7e0bbefd01e6877b3c324d860bac46b96a0b4e6b authorMark Eibes <mark.eibes@gmail.com> dateTue 12 May 2020, 22:56 (6 years ago) parentfd4a42d
3 files changed+57−21
components/src/React/Basic/Hooks/UseGesture.purs+15−3 components/src/Yoga/DOM/Hook.purs+22−2 components/src/Yoga/Grimoire/Component.purs+20−16
components/src/React/Basic/Hooks/UseGesture.purs+15−3
@@ -21,10 +21,22 @@ import Yoga.Helpers ((?||))
2121foreign import data UseDrag ∷ Type -> Type -> Type
2222
2323type DragHandler a
24− = { arg ∷ a, down ∷ Boolean, movement ∷ Number /\ Number, xy ∷ Number /\ Number } -> Effect Unit
24+ = { arg ∷ a
25+ , down ∷ Boolean
26+ , movement ∷ Number /\ Number
27+ , xy ∷ Number /\ Number
28+ , tap ∷ Boolean
29+ } ->
30+ Effect Unit
2531
2632type DragHandlerImpl a
27− = { args ∷ Array a, down ∷ Boolean, movement ∷ Array Number, xy ∷ Array Number } -> Unit
33+ = { args ∷ Array a
34+ , down ∷ Boolean
35+ , movement ∷ Array Number
36+ , xy ∷ Array Number
37+ , tap ∷ Boolean
38+ } ->
39+ Unit
2840
2941type DragProps
3042 = { onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler }
@@ -52,7 +64,7 @@ useDrag dragOptions dragHandler = unsafeHook (runEffectFn2 useDragImpl dragHandl
5264 dragHandlerImpl ∷ DragHandlerImpl a
5365 dragHandlerImpl x =
5466 (unsafePerformEffect <<< dragHandler)
55− { arg, down: x.down, movement: mx /\ my, xy: xyX /\ xyY
67+ { arg, down: x.down, tap: x.tap, movement: mx /\ my, xy: xyX /\ xyY
5668 }
5769 where
5870 arg = x.args !! 0 # fromMaybe' (\_ -> unsafeCrashWith "Bollox")
components/src/Yoga/DOM/Hook.purs+22−2
@@ -12,8 +12,8 @@ import React.Basic.Hooks (Hook, UseLayoutEffect, UseRef, UseState, coerceHook, r
1212import React.Basic.Hooks as React
1313import Unsafe.Coerce (unsafeCoerce)
1414import Web.DOM (Node)
15−import Web.DOM.Element (clientHeight)
16−import Web.HTML (HTMLElement, window)
15+import Web.DOM.Element (clientHeight, clientWidth)
16+import Web.HTML (window)
1717import Web.HTML.HTMLDocument as Document
1818import Web.HTML.HTMLElement (DOMRect, focus, getBoundingClientRect)
1919import Web.HTML.HTMLElement as HTMLElement
@@ -63,6 +63,26 @@ useViewportHeight =
6363 pure (pure unit)
6464 pure viewportHeight
6565
66+newtype UseViewportWidth hooks
67+ = UseViewportWidth (UseLayoutEffect Unit (UseState (Maybe Number) hooks))
68+
69+derive instance ntUseViewportWidth ∷ Newtype (UseViewportWidth hooks) _
70+useViewportWidth ∷ Hook UseViewportWidth (Maybe Number)
71+useViewportWidth =
72+ coerceHook React.do
73+ viewportWidth /\ modifyViewportWidth <- useState Nothing
74+ useLayoutEffect unit do
75+ doc <- window >>= document
76+ let
77+ maybeElem = Document.toNode doc # HTMLElement.fromNode
78+ case maybeElem of
79+ Nothing -> pure unit
80+ Just elem -> do
81+ ch <- clientWidth (HTMLElement.toElement elem)
82+ modifyViewportWidth (const $ Just ch)
83+ pure (pure unit)
84+ pure viewportWidth
85+
6686newtype UseFocus hooks
6787 = UseFocus (UseLayoutEffect Unit (UseRef (Nullable Node) (UseState Boolean hooks)))
6888
components/src/Yoga/Grimoire/Component.purs+20−16
@@ -91,6 +91,8 @@ regularScale = "scale3d(1.0, 1.0, 1.0)"
9191
9292scaledUp = "scale3d(1.1, 1.1, 1.1)"
9393
94+scaledCompletely = "scale3d(2.0, 2.0, 2.0)"
95+
9496defaultSprings =
9597 { x: 0.0
9698 , y: 0.0
@@ -100,7 +102,7 @@ defaultSprings =
100102 , transform: "scale3d(1.0,1.0,1.0)"
101103 }
102104
103−springsteen init rectsRef positionsRef arg mx my down springs = do
105+springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = do
104106 init
105107 rects <- readRef rectsRef
106108 positionsBefore <- readRef positionsRef
@@ -122,24 +124,25 @@ springsteen init rectsRef positionsRef arg mx my down springs = do
122124 currentRect = rects !!! (positions !!! i)
123125 leftOffset = currentRect.left - originalRect.left
124126 topOffset = currentRect.top - originalRect.top
125− case i == arg, down, overlapsOther of
126− true, true, _ ->
127− defaultSprings
128− { x = mx + leftOffset
129− , y = my + topOffset
130− , zIndex = 1
131− , transform = scaledUp
132− , shadow = 20
133− , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
134− }
135− false, true, Just { index, value }
127+ case down, overlapsOther of
128+ true, _
129+ | i == arg ->
130+ defaultSprings
131+ { x = mx + leftOffset
132+ , y = my + topOffset
133+ , zIndex = 1
134+ , transform = scaledUp
135+ , shadow = 20
136+ , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
137+ }
138+ true, Just { index, value }
136139 | index == i ->
137140 defaultSprings
138141 { x = rectDragged.left - currentRect.left + leftOffset
139142 , y = rectDragged.top - currentRect.top + topOffset
140143 , immediate = const false
141144 }
142− _, _, _ ->
145+ _, _ ->
143146 defaultSprings
144147 { x = leftOffset
145148 , y = topOffset
@@ -187,8 +190,8 @@ makeComponent = do
187190 mempty
188191 theme ∷ CSSTheme <- useTheme
189192 bindDragProps <-
190− useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my } ->
191− springsteen init rectsRef positionsRef arg mx my down springs
193+ useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my, tap } ->
194+ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs
192195 let
193196 renderSpells =
194197 mapWithIndex \i (spell /\ style) ->
@@ -205,7 +208,8 @@ makeComponent = do
205208 `withDragProps`
206209 bindDragProps i
207210 pure
208− $ jsx grid {} (renderSpells (spells `zip` springs.styles))
211+ $ jsx grid {}
212+ $ renderSpells (spells `zip` springs.styles)
209213
210214foreign import unsafeArraySetAt ∷ ∀ a. Int -> a -> Array a -> Array a
211215