fd4a42d · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Small improvements

fd4a42dMark Eibes6 years ago

components/src/Yoga/Grimoire/Component.purs+46−58

compare with master

unifiedsplit

@@ -13,7 +13,6 @@ import Data.Nullable as Nullable

13import Data.Symbol (SProxy(..))

14import Data.Traversable (for, sequence)

15import Data.Tuple.Nested ((/\), type (/\))

16−import Debug.Trace (spy)

17import Effect (Effect)

16import Effect (Effect)

18import Effect.Class.Console (log)

17import Effect.Class.Console (log)

19import Justifill (justifill)

18import Justifill (justifill)

@@ -88,6 +87,19 @@ swap i j arr = swapped # orDie "Couldn't swap"

88 valueJ <- arr !! j

87 valueJ <- arr !! j

89 pure $ (set (ix i) valueJ <<< set (ix j) valueI) arr

88 pure $ (set (ix i) valueJ <<< set (ix j) valueI) arr

90+regularScale = "scale3d(1.0, 1.0, 1.0)"

91+

92+scaledUp = "scale3d(1.1, 1.1, 1.1)"

93+

94+defaultSprings =

95+ { x: 0.0

96+ , y: 0.0

97+ , shadow: 5

98+ , zIndex: 0

99+ , immediate: const true

100+ , transform: "scale3d(1.0,1.0,1.0)"

101+ }

102+

91springsteen init rectsRef positionsRef arg mx my down springs = do

103springsteen init rectsRef positionsRef arg mx my down springs = do

92 init

104 init

93 rects <- readRef rectsRef

105 rects <- readRef rectsRef

@@ -96,55 +108,43 @@ springsteen init rectsRef positionsRef arg mx my down springs = do

96 rectDragged = rects !!! (positionsBefore !!! arg)

108 rectDragged = rects !!! (positionsBefore !!! arg)

97 currentPosDragged = rectDragged # translate (mx /\ my)

109 currentPosDragged = rectDragged # translate (mx /\ my)

98 orderedRectsBefore = positionsBefore <#> (rects !!! _)

110 orderedRectsBefore = positionsBefore <#> (rects !!! _)

99− overlapsOtherBefore = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect

111+ overlapsOther = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect

100− case down, overlapsOtherBefore of

112+ case down, overlapsOther of

101 false, Just { index } -> do

113 false, Just { index } -> do

102 let

114 let

103 newPositions = swap arg index positionsBefore

115 newPositions = swap arg index positionsBefore

104− writeRef positionsRef $ spy "new posis" newPositions

116+ writeRef positionsRef newPositions

105 _, _ -> mempty

117 _, _ -> mempty

106− -- alles gut bis hierher, glaube ich

107 positions <- readRef positionsRef

118 positions <- readRef positionsRef

108 springs.set \i -> do

119 springs.set \i -> do

109 let

120 let

110− j = positions !!! i

111− isTheDraggedOne = i == arg

112 originalRect = rects !!! i

121 originalRect = rects !!! i

113− currentRect = rects !!! j

122+ currentRect = rects !!! (positions !!! i)

114 leftOffset = currentRect.left - originalRect.left

123 leftOffset = currentRect.left - originalRect.left

115 topOffset = currentRect.top - originalRect.top

124 topOffset = currentRect.top - originalRect.top

116− case isTheDraggedOne, down, overlapsOtherBefore of

125+ case i == arg, down, overlapsOther of

117 true, true, _ ->

126 true, true, _ ->

127+ defaultSprings

118− { x: mx + leftOffset

128+ { x = mx + leftOffset

119− , y: my + topOffset

129+ , y = my + topOffset

120− , zIndex: 1

130+ , zIndex = 1

121− , transform: "scale3d(1.1, 1.1, 1.1)"

131+ , transform = scaledUp

122− , borderRadius: "var(--s-2)"

123− , height: "100px"

124− , shadow: 20

132+ , shadow = 20

125− , immediate: \n -> n == "x" || n == "y" || n == "zIndex"

133+ , immediate = \n -> n == "x" || n == "y" || n == "zIndex"

126− }

134+ }

127 false, true, Just { index, value }

135 false, true, Just { index, value }

128 | index == i ->

136 | index == i ->

137+ defaultSprings

129− { x: rectDragged.left - currentRect.left + leftOffset

138+ { x = rectDragged.left - currentRect.left + leftOffset

130− , y: rectDragged.top - currentRect.top + topOffset

139+ , y = rectDragged.top - currentRect.top + topOffset

131− , zIndex: 0

132− , shadow: 2

133− , height: "100px"

134− , transform: "scale3d(1.0, 1.0, 1.0)"

135− , borderRadius: "var(--s-2)"

136− , immediate: const false

140+ , immediate = const false

137− }

141+ }

138 _, _, _ ->

142 _, _, _ ->

143+ defaultSprings

139− { x: leftOffset

144+ { x = leftOffset

140− , y: topOffset

145+ , y = topOffset

141− , shadow: 2

142− , height: "100px"

143− , borderRadius: "var(--s-2)"

144− , zIndex: 0

145− , transform: "scale3d(1.0, 1.0, 1.0)"

146− , immediate: const false

146+ , immediate = const false

147− }

147+ }

148

149makeComponent ∷ Effect (ReactComponent Props)

150makeComponent = do

@@ -152,19 +152,8 @@ makeComponent = do

152 spellComponent <- GrimoireSpell.makeComponent

153 useStyles <- makeStylesJSS styles

154 component "Grimoire" \(props ∷ Props) -> React.do

155− {} <- useStyles (pick props)

155+ classes <- useStyles (pick props)

156− let

157− defaultSprings = \_ ->

158− { x: 0.0

159− , y: 0.0

160− , height: "100px"

161− , shadow: 2

162− , borderRadius: "var(--s-2)"

163− , zIndex: 0

164− , immediate: const true

165− , transform: "scale3d(1.0,1.0,1.0)"

166− }

167− springs <- useSprings (Array.length props.spells) defaultSprings

156+ springs <- useSprings (Array.length props.spells) (const defaultSprings)

168 nodeRefs ∷ Ref (Array (Nullable (_))) <- useRef (props.spells $> Nullable.null)

157 nodeRefs ∷ Ref (Array (Nullable (_))) <- useRef (props.spells $> Nullable.null)

169 spells /\ updateSpells <- useState props.spells

158 spells /\ updateSpells <- useState props.spells

170 positionsRef <- useRef ([] ∷ _ Int)

159 positionsRef <- useRef ([] ∷ _ Int)

@@ -184,7 +173,7 @@ makeComponent = do

184 writeRef rectsRef rects

173 writeRef rectsRef rects

185 writeRef initialisedRef true

174 writeRef initialisedRef true

186 useLayoutEffect windowSize do

175 useLayoutEffect windowSize do

187− springs.set defaultSprings

176+ springs.set (const defaultSprings)

188 positionsBefore <- readRef positionsRef

177 positionsBefore <- readRef positionsRef

189 when (positionsBefore == []) do

178 when (positionsBefore == []) do

190 log "resetting positions"

179 log "resetting positions"

@@ -204,15 +193,14 @@ makeComponent = do

204 renderSpells =

193 renderSpells =

205 mapWithIndex \i (spell /\ style) ->

194 mapWithIndex \i (spell /\ style) ->

206 animatedDiv

195 animatedDiv

196+ $ { style:

197+ css

198+ $ Record.insert (SProxy ∷ _ "boxShadow")

207− $ { style: css (Record.insert (SProxy ∷ _ "boxShadow") ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String)) style)

199+ ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String))

200+ style

201+ , className: classes.container

208 , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

202 , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

209− , children:

210− [ element

211− spellComponent

203+ , children: [ element spellComponent { spell } ]

212− { spell

213− , cardRef: Nothing

214− }

215− ]

216 }

204 }

217 `withDragProps`

205 `withDragProps`

218 bindDragProps i

206 bindDragProps i

components/src/Yoga/Grimoire/Spell/Component.purs+2−6

@@ -3,16 +3,13 @@ module Yoga.Grimoire.Spell.Component where

3import Prelude

4import CSS (AlignItemsValue, JustifyContentValue, spaceBetween)

5import CSS.Common (baseline)

6−import Data.Maybe (Maybe)

7−import Data.Nullable (Nullable)

8import Effect (Effect)

6import Effect (Effect)

9import React.Basic (ReactComponent)

7import React.Basic (ReactComponent)

10import React.Basic.DOM as R

8import React.Basic.DOM as R

11import React.Basic.Helpers (classSpan, jsx)

9import React.Basic.Helpers (classSpan, jsx)

12−import React.Basic.Hooks (Ref, component)

10+import React.Basic.Hooks (component)

13import React.Basic.Hooks as React

11import React.Basic.Hooks as React

14import Record.Extra (pick)

12import Record.Extra (pick)

15−import Web.DOM (Node)

16import Yoga.Box.Component as Box

13import Yoga.Box.Component as Box

17import Yoga.Card.Component (mkCard)

14import Yoga.Card.Component (mkCard)

18import Yoga.Centre.Component as Centre

15import Yoga.Centre.Component as Centre

@@ -27,7 +24,6 @@ import Yoga.Theme.Types (CSSTheme)

28type Props

25type Props

29 = { spell ∷ Spell

26 = { spell ∷ Spell

30− , cardRef ∷ Maybe (Ref (Nullable Node))

31 | Style.PropsR

27 | Style.PropsR

32 }

28 }

@@ -56,7 +52,7 @@ makeComponent = do

56 ]

52 ]

57 ]

53 ]

58 pure

54 pure

59− $ jsx card { divRef: props.cardRef, className: style.card }

55+ $ jsx card { className: style.card }

60 [ jsx box { className: style.container, padding: "var(--s-1)" }

56 [ jsx box { className: style.container, padding: "var(--s-1)" }

61 [ jsx stack { space: "var(--s-3)" }

57 [ jsx stack { space: "var(--s-3)" }

62 [ headerCluster

58 [ headerCluster

components/src/Yoga/Grimoire/Spell/Styles.purs+6−4

@@ -1,9 +1,9 @@

1module Yoga.Grimoire.Spell.Styles where

3import Prelude hiding (top)

4−import CSS (backgroundColor, black, block, boxShadow, color, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, lineHeight, maxHeight, pct, px, sansSerif, textOverflow, textWhitespace, unitless, whitespaceNoWrap, width)

4+import CSS (backgroundColor, black, boxShadow, color, darken, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, pct, rgba, sansSerif, textOverflow, textWhitespace, unitless, white, whitespaceNoWrap, width)

5import CSS.FontStyle (italic)

6−import CSS.Overflow (overflow, overflowY)

6+import CSS.Overflow (overflow)

7import CSS.Overflow as Overflow

8import CSS.Text.Overflow (ellipsis)

9import CSS.TextAlign (rightTextAlign, textAlign)

@@ -34,10 +34,12 @@ styles =

34 do

35 width (100.0 # pct)

36 height (100.0 # pct)

37− boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black

37+ boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) white

38+ backgroundColor $ rgba 0 0 0 0.0

38 , container:

39 , container:

39 jss do

40 jss do

40− backgroundColor theme.backgroundColourLighter

41+ backgroundColor $ rgba 0 0 0 0.0

42+ width (100.0 # pct)

41 (key $ fromString "user-select") "none"

43 (key $ fromString "user-select") "none"

42 height (100.0 # pct)

44 height (100.0 # pct)

43 , signature:

45 , signature:

components/src/Yoga/Grimoire/Styles.purs+5−4

@@ -1,7 +1,7 @@

1module Yoga.Grimoire.Styles where

3import Prelude hiding (top)

4−import CSS (backgroundColor, borderRadius)

4+import CSS (backgroundColor, borderRadius, height, px)

5import JSS (JSSClasses, JSSElem, jssClasses)

6import Yoga.Theme.Types (YogaTheme)

@@ -17,9 +17,10 @@ type Classes a

18styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))

19styles =

20− jssClasses \theme@{ s0 } ->

20+ jssClasses \theme@{ s0, s_2 } ->

21 { container:

22 do

23+ height (100.0 # px)

23− borderRadius s0 s0 s0 s0

24+ borderRadius s_2 s_2 s_2 s_2

24− backgroundColor theme.backgroundColourDarker

25+ backgroundColor $ theme.interfaceColour

25 }

26 }

components/src/Yoga/Theme/Default.purs+3−3

@@ -24,7 +24,7 @@ darkTheme ∷ Theme

24darkTheme =

25 { backgroundColour: Color.hsl 238.0 0.18 0.30

26 , textColour: Color.hsl 225.0 0.28 0.90

27− , interfaceColour: Color.hsl 225.0 0.48 0.12

27+ , interfaceColour: Color.hsl 235.0 0.22 0.28

28 , highlightColour: Color.hsl 285.0 0.88 0.72

29 , altHighlightColour: Color.hsl 84.0 0.617 0.631

30 , textFontFamily: cons' "Rubik" systemFontStack

@@ -47,8 +47,8 @@ lightTheme ∷ Theme

47lightTheme =

48 darkTheme

49 { textColour = Color.hsl 220.0 0.18 0.30

50− , backgroundColour = Color.hsl 30.0 0.50 0.96

50+ , backgroundColour = Color.hsl 30.0 0.50 0.97

51− , interfaceColour = Color.hsl 210.0 0.10 0.89

51+ , interfaceColour = Color.hsl 350.0 0.40 0.97

52 , highlightColour = Color.hsl 350.0 0.93 0.67

53 , altHighlightColour = Color.hsl 84.0 0.617 0.631

54 , green = Color.hsl 170.0 0.39 0.40