git.iko.soy/rowtype-yoga/psfp
on master help sign in
Whatever
7e0bbefMark Eibes
components/src/React/Basic/Hooks/UseGesture.purs+15−3
compare with master
unifiedsplit
@@ -21,10 +21,22 @@ import Yoga.Helpers ((?||))
21foreign import data UseDrag ∷ Type -> Type -> Type
21foreign import data UseDrag ∷ Type -> Type -> Type
22
22
23type DragHandler a
23type DragHandler a
24+ = { arg ∷ a
25+ , down ∷ Boolean
24− = { arg ∷ a, down ∷ Boolean, movement ∷ Number /\ Number, xy ∷ Number /\ Number } -> Effect Unit
26+ , movement ∷ Number /\ Number
27+ , xy ∷ Number /\ Number
28+ , tap ∷ Boolean
29+ } ->
30+ Effect Unit
25
31
26type DragHandlerImpl a
32type DragHandlerImpl a
33+ = { args ∷ Array a
34+ , down ∷ Boolean
27− = { args ∷ Array a, down ∷ Boolean, movement ∷ Array Number, xy ∷ Array Number } -> Unit
35+ , movement ∷ Array Number
36+ , xy ∷ Array Number
37+ , tap ∷ Boolean
38+ } ->
39+ Unit
28
40
29type DragProps
41type DragProps
30 = { onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler }
42 = { onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler }
@@ -52,7 +64,7 @@ useDrag dragOptions dragHandler = unsafeHook (runEffectFn2 useDragImpl dragHandl
52 dragHandlerImpl ∷ DragHandlerImpl a
64 dragHandlerImpl ∷ DragHandlerImpl a
53 dragHandlerImpl x =
65 dragHandlerImpl x =
54 (unsafePerformEffect <<< dragHandler)
66 (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
56 }
68 }
57 where
69 where
58 arg = x.args !! 0 # fromMaybe' (\_ -> unsafeCrashWith "Bollox")
70 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
12import React.Basic.Hooks as React
12import React.Basic.Hooks as React
13import Unsafe.Coerce (unsafeCoerce)
13import Unsafe.Coerce (unsafeCoerce)
14import Web.DOM (Node)
14import Web.DOM (Node)
15−import Web.DOM.Element (clientHeight)
15+import Web.DOM.Element (clientHeight, clientWidth)
16−import Web.HTML (HTMLElement, window)
16+import Web.HTML (window)
17import Web.HTML.HTMLDocument as Document
17import Web.HTML.HTMLDocument as Document
18import Web.HTML.HTMLElement (DOMRect, focus, getBoundingClientRect)
18import Web.HTML.HTMLElement (DOMRect, focus, getBoundingClientRect)
19import Web.HTML.HTMLElement as HTMLElement
19import Web.HTML.HTMLElement as HTMLElement
@@ -63,6 +63,26 @@ useViewportHeight =
63 pure (pure unit)
63 pure (pure unit)
64 pure viewportHeight
64 pure viewportHeight
65
65
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+
66newtype UseFocus hooks
86newtype UseFocus hooks
67 = UseFocus (UseLayoutEffect Unit (UseRef (Nullable Node) (UseState Boolean hooks)))
87 = UseFocus (UseLayoutEffect Unit (UseRef (Nullable Node) (UseState Boolean hooks)))
68
88
components/src/Yoga/Grimoire/Component.purs+20−16
@@ -91,6 +91,8 @@ regularScale = "scale3d(1.0, 1.0, 1.0)"
91
91
92scaledUp = "scale3d(1.1, 1.1, 1.1)"
92scaledUp = "scale3d(1.1, 1.1, 1.1)"
93
93
94+scaledCompletely = "scale3d(2.0, 2.0, 2.0)"
95+
94defaultSprings =
96defaultSprings =
95 { x: 0.0
97 { x: 0.0
96 , y: 0.0
98 , y: 0.0
@@ -100,7 +102,7 @@ defaultSprings =
100 , transform: "scale3d(1.0,1.0,1.0)"
102 , transform: "scale3d(1.0,1.0,1.0)"
101 }
103 }
102
104
103−springsteen init rectsRef positionsRef arg mx my down springs = do
105+springsteen init windowSize rectsRef positionsRef arg mx my down tap springs = do
104 init
106 init
105 rects <- readRef rectsRef
107 rects <- readRef rectsRef
106 positionsBefore <- readRef positionsRef
108 positionsBefore <- readRef positionsRef
@@ -122,24 +124,25 @@ springsteen init rectsRef positionsRef arg mx my down springs = do
122 currentRect = rects !!! (positions !!! i)
124 currentRect = rects !!! (positions !!! i)
123 leftOffset = currentRect.left - originalRect.left
125 leftOffset = currentRect.left - originalRect.left
124 topOffset = currentRect.top - originalRect.top
126 topOffset = currentRect.top - originalRect.top
125− case i == arg, down, overlapsOther of
127+ case down, overlapsOther of
126− true, true, _ ->
128+ true, _
129+ | i == arg ->
127− defaultSprings
130+ defaultSprings
128− { x = mx + leftOffset
131+ { x = mx + leftOffset
129− , y = my + topOffset
132+ , y = my + topOffset
130− , zIndex = 1
133+ , zIndex = 1
131− , transform = scaledUp
134+ , transform = scaledUp
132− , shadow = 20
135+ , shadow = 20
133− , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
136+ , immediate = \n -> n == "x" || n == "y" || n == "zIndex"
134− }
137+ }
135− false, true, Just { index, value }
138+ true, Just { index, value }
136 | index == i ->
139 | index == i ->
137 defaultSprings
140 defaultSprings
138 { x = rectDragged.left - currentRect.left + leftOffset
141 { x = rectDragged.left - currentRect.left + leftOffset
139 , y = rectDragged.top - currentRect.top + topOffset
142 , y = rectDragged.top - currentRect.top + topOffset
140 , immediate = const false
143 , immediate = const false
141 }
144 }
142− _, _, _ ->
145+ _, _ ->
143 defaultSprings
146 defaultSprings
144 { x = leftOffset
147 { x = leftOffset
145 , y = topOffset
148 , y = topOffset
@@ -187,8 +190,8 @@ makeComponent = do
187 mempty
190 mempty
188 theme ∷ CSSTheme <- useTheme
191 theme ∷ CSSTheme <- useTheme
189 bindDragProps <-
192 bindDragProps <-
190− useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my } ->
193+ useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my, tap } ->
191− springsteen init rectsRef positionsRef arg mx my down springs
194+ springsteen init windowSize rectsRef positionsRef arg mx my down tap springs
192 let
195 let
193 renderSpells =
196 renderSpells =
194 mapWithIndex \i (spell /\ style) ->
197 mapWithIndex \i (spell /\ style) ->
@@ -205,7 +208,8 @@ makeComponent = do
205 `withDragProps`
208 `withDragProps`
206 bindDragProps i
209 bindDragProps i
207 pure
210 pure
211+ $ jsx grid {}
208− $ jsx grid {} (renderSpells (spells `zip` springs.styles))
212+ $ renderSpells (spells `zip` springs.styles)
209
213
210foreign import unsafeArraySetAt ∷ ∀ a. Int -> a -> Array a -> Array a
214foreign import unsafeArraySetAt ∷ ∀ a. Int -> a -> Array a -> Array a
211
215