@@ -6,18 +6,19 @@ import Data.Array as Array
66import Data.FoldableWithIndex (findWithIndex)
77import Data.Lens (set)
88import Data.Lens.Index (ix)
9−import Data.Maybe (Maybe(..), fromMaybe, isJust)
9+import Data.Maybe (Maybe(..), fromMaybe)
1010import Data.Nullable (Nullable)
1111import Data.Nullable as Nullable
1212import Data.Traversable (for, sequence)
1313import Data.Tuple.Nested ((/\), type (/\))
1414import Debug.Trace (spy)
1515import Effect (Effect)
16+import Effect.Aff (Milliseconds(..), delay, launchAff_)
1617import Justifill (justifill)
1718import React.Basic (ReactComponent)
1819import React.Basic.DOM (css)
1920import React.Basic.Helpers (jsx)
20−import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)
21+import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)
2122import React.Basic.Hooks as React
2223import React.Basic.Hooks.Spring (animatedDiv, useSprings)
2324import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
@@ -30,6 +31,7 @@ import Yoga.Grid.Component as Grid
3031import Yoga.Grimoire.Spell.Component as GrimoireSpell
3132import Yoga.Grimoire.Styles (styles)
3233import Yoga.Helpers ((?||))
34+import Yoga.Resize.Hook (useResize)
3335import Yoga.Spell.Types (Spell)
3436import Yoga.Theme.Styles (makeStylesJSS, useTheme)
3537import Yoga.Theme.Types (CSSTheme)
@@ -83,14 +85,28 @@ makeComponent = do
8385 nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))
8486 positionsRef <- useRef ([] ∷ _ DOMRect)
8587 originalPositionsRef <- useRef ([] ∷ _ DOMRect)
86− useLayoutEffect unit do
87− rects <- getRects nodeRefs
88− writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
89− writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
88+ initialisedRef <- useRef false
89+ windowSize <- useResize
90+ let
91+ init = do
92+ initialised <- readRef initialisedRef
93+ unless initialised do
94+ rects <- getRects nodeRefs
95+ writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
96+ writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
97+ writeRef initialisedRef true
98+ useEffect windowSize do
99+ writeRef initialisedRef false
100+ positions <- readRef positionsRef
101+ let
102+ newOriginalPositions = positions
103+ writeRef positionsRef newOriginalPositions
104+ init
90105 mempty
91106 theme ∷ CSSTheme <- useTheme
92107 bindDragProps <-
93− useDrag (justifill {}) \{ arg, down, movement: mx /\ my, xy: x /\ y } -> do
108+ useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do
109+ init
94110 rects <- getRects nodeRefs
95111 originalPositions <- readRef originalPositionsRef
96112 positionsBefore <- readRef positionsRef
@@ -101,7 +117,10 @@ makeComponent = do
101117
102118 overlapsOtherBefore = positionsBefore # findWithIndex \i' pos -> i' /= arg && overlaps currentPosDraggedBefore pos
103119 case down, overlapsOtherBefore of
104− false, Just { index, value } -> writeRef positionsRef (swap arg index positionsBefore ?|| positionsBefore)
120+ false, Just { index, value } -> do
121+ let
122+ swapped = swap arg index positionsBefore ?|| positionsBefore
123+ writeRef positionsRef swapped
105124 _, _ -> mempty
106125 positions <- readRef positionsRef
107126 let
@@ -121,9 +140,27 @@ makeComponent = do
121140 topOffset = if iPos == origIPos then 0.0 else iPos.top - origIPos.top
122141 case i == arg, down, overlapsOther of
123142 false, true, Just { index, value }
124− | index == i -> { x: originalPosDragged.left - value.left + leftOffset, y: originalPosDragged.top - value.top + topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }
125− true, true, _ -> { x: mx + leftOffset, y: my + topOffset, zIndex: 1, transform: "scale3d(1.1, 1.1, 1.1)", immediate: \n -> n == "x" || n == "y" || n == "zIndex" }
126− _, _, _ -> { x: leftOffset, y: topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }
143+ | index == i ->
144+ { x: originalPosDragged.left - value.left + leftOffset
145+ , y: originalPosDragged.top - value.top + topOffset
146+ , zIndex: 0
147+ , transform: "scale3d(1.0, 1.0, 1.0)"
148+ , immediate: const false
149+ }
150+ true, true, _ ->
151+ { x: mx + leftOffset
152+ , y: my + topOffset
153+ , zIndex: 1
154+ , transform: "scale3d(1.1, 1.1, 1.1)"
155+ , immediate: \n -> n == "x" || n == "y" || n == "zIndex"
156+ }
157+ _, _, _ ->
158+ { x: leftOffset
159+ , y: topOffset
160+ , zIndex: 0
161+ , transform: "scale3d(1.0, 1.0, 1.0)"
162+ , immediate: const false
163+ }
127164 let
128165 renderSpells =
129166 mapWithIndex \i (spell /\ style) ->