mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
Small improvements
This commit is contained in:
parent
8e9130c624
commit
fd4a42d47f
@ -13,7 +13,6 @@ import Data.Nullable as Nullable
|
||||
import Data.Symbol (SProxy(..))
|
||||
import Data.Traversable (for, sequence)
|
||||
import Data.Tuple.Nested ((/\), type (/\))
|
||||
import Debug.Trace (spy)
|
||||
import Effect (Effect)
|
||||
import Effect.Class.Console (log)
|
||||
import Justifill (justifill)
|
||||
@ -88,6 +87,19 @@ swap i j arr = swapped # orDie "Couldn't swap"
|
||||
valueJ <- arr !! j
|
||||
pure $ (set (ix i) valueJ <<< set (ix j) valueI) arr
|
||||
|
||||
regularScale = "scale3d(1.0, 1.0, 1.0)"
|
||||
|
||||
scaledUp = "scale3d(1.1, 1.1, 1.1)"
|
||||
|
||||
defaultSprings =
|
||||
{ x: 0.0
|
||||
, y: 0.0
|
||||
, shadow: 5
|
||||
, zIndex: 0
|
||||
, immediate: const true
|
||||
, transform: "scale3d(1.0,1.0,1.0)"
|
||||
}
|
||||
|
||||
springsteen init rectsRef positionsRef arg mx my down springs = do
|
||||
init
|
||||
rects <- readRef rectsRef
|
||||
@ -96,55 +108,43 @@ springsteen init rectsRef positionsRef arg mx my down springs = do
|
||||
rectDragged = rects !!! (positionsBefore !!! arg)
|
||||
currentPosDragged = rectDragged # translate (mx /\ my)
|
||||
orderedRectsBefore = positionsBefore <#> (rects !!! _)
|
||||
overlapsOtherBefore = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect
|
||||
case down, overlapsOtherBefore of
|
||||
overlapsOther = orderedRectsBefore # findWithIndex \i rect -> i /= arg && overlaps currentPosDragged rect
|
||||
case down, overlapsOther of
|
||||
false, Just { index } -> do
|
||||
let
|
||||
newPositions = swap arg index positionsBefore
|
||||
writeRef positionsRef $ spy "new posis" newPositions
|
||||
writeRef positionsRef newPositions
|
||||
_, _ -> mempty
|
||||
-- alles gut bis hierher, glaube ich
|
||||
positions <- readRef positionsRef
|
||||
springs.set \i -> do
|
||||
let
|
||||
j = positions !!! i
|
||||
isTheDraggedOne = i == arg
|
||||
originalRect = rects !!! i
|
||||
currentRect = rects !!! j
|
||||
currentRect = rects !!! (positions !!! i)
|
||||
leftOffset = currentRect.left - originalRect.left
|
||||
topOffset = currentRect.top - originalRect.top
|
||||
case isTheDraggedOne, down, overlapsOtherBefore of
|
||||
case i == arg, down, overlapsOther of
|
||||
true, true, _ ->
|
||||
{ x: mx + leftOffset
|
||||
, y: my + topOffset
|
||||
, zIndex: 1
|
||||
, transform: "scale3d(1.1, 1.1, 1.1)"
|
||||
, borderRadius: "var(--s-2)"
|
||||
, height: "100px"
|
||||
, shadow: 20
|
||||
, immediate: \n -> n == "x" || n == "y" || n == "zIndex"
|
||||
}
|
||||
defaultSprings
|
||||
{ x = mx + leftOffset
|
||||
, y = my + topOffset
|
||||
, zIndex = 1
|
||||
, transform = scaledUp
|
||||
, shadow = 20
|
||||
, immediate = \n -> n == "x" || n == "y" || n == "zIndex"
|
||||
}
|
||||
false, true, Just { index, value }
|
||||
| index == i ->
|
||||
{ x: rectDragged.left - currentRect.left + leftOffset
|
||||
, y: rectDragged.top - currentRect.top + topOffset
|
||||
, zIndex: 0
|
||||
, shadow: 2
|
||||
, height: "100px"
|
||||
, transform: "scale3d(1.0, 1.0, 1.0)"
|
||||
, borderRadius: "var(--s-2)"
|
||||
, immediate: const false
|
||||
}
|
||||
defaultSprings
|
||||
{ x = rectDragged.left - currentRect.left + leftOffset
|
||||
, y = rectDragged.top - currentRect.top + topOffset
|
||||
, immediate = const false
|
||||
}
|
||||
_, _, _ ->
|
||||
{ x: leftOffset
|
||||
, y: topOffset
|
||||
, shadow: 2
|
||||
, height: "100px"
|
||||
, borderRadius: "var(--s-2)"
|
||||
, zIndex: 0
|
||||
, transform: "scale3d(1.0, 1.0, 1.0)"
|
||||
, immediate: const false
|
||||
}
|
||||
defaultSprings
|
||||
{ x = leftOffset
|
||||
, y = topOffset
|
||||
, immediate = const false
|
||||
}
|
||||
|
||||
makeComponent ∷ Effect (ReactComponent Props)
|
||||
makeComponent = do
|
||||
@ -152,19 +152,8 @@ makeComponent = do
|
||||
spellComponent <- GrimoireSpell.makeComponent
|
||||
useStyles <- makeStylesJSS styles
|
||||
component "Grimoire" \(props ∷ Props) -> React.do
|
||||
{} <- useStyles (pick props)
|
||||
let
|
||||
defaultSprings = \_ ->
|
||||
{ x: 0.0
|
||||
, y: 0.0
|
||||
, height: "100px"
|
||||
, shadow: 2
|
||||
, borderRadius: "var(--s-2)"
|
||||
, zIndex: 0
|
||||
, immediate: const true
|
||||
, transform: "scale3d(1.0,1.0,1.0)"
|
||||
}
|
||||
springs <- useSprings (Array.length props.spells) defaultSprings
|
||||
classes <- useStyles (pick props)
|
||||
springs <- useSprings (Array.length props.spells) (const defaultSprings)
|
||||
nodeRefs ∷ Ref (Array (Nullable (_))) <- useRef (props.spells $> Nullable.null)
|
||||
spells /\ updateSpells <- useState props.spells
|
||||
positionsRef <- useRef ([] ∷ _ Int)
|
||||
@ -184,7 +173,7 @@ makeComponent = do
|
||||
writeRef rectsRef rects
|
||||
writeRef initialisedRef true
|
||||
useLayoutEffect windowSize do
|
||||
springs.set defaultSprings
|
||||
springs.set (const defaultSprings)
|
||||
positionsBefore <- readRef positionsRef
|
||||
when (positionsBefore == []) do
|
||||
log "resetting positions"
|
||||
@ -204,15 +193,14 @@ makeComponent = do
|
||||
renderSpells =
|
||||
mapWithIndex \i (spell /\ style) ->
|
||||
animatedDiv
|
||||
$ { 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)
|
||||
$ { 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
|
||||
, className: classes.container
|
||||
, ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
|
||||
, children:
|
||||
[ element
|
||||
spellComponent
|
||||
{ spell
|
||||
, cardRef: Nothing
|
||||
}
|
||||
]
|
||||
, children: [ element spellComponent { spell } ]
|
||||
}
|
||||
`withDragProps`
|
||||
bindDragProps i
|
||||
|
@ -3,16 +3,13 @@ module Yoga.Grimoire.Spell.Component where
|
||||
import Prelude
|
||||
import CSS (AlignItemsValue, JustifyContentValue, spaceBetween)
|
||||
import CSS.Common (baseline)
|
||||
import Data.Maybe (Maybe)
|
||||
import Data.Nullable (Nullable)
|
||||
import Effect (Effect)
|
||||
import React.Basic (ReactComponent)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Helpers (classSpan, jsx)
|
||||
import React.Basic.Hooks (Ref, component)
|
||||
import React.Basic.Hooks (component)
|
||||
import React.Basic.Hooks as React
|
||||
import Record.Extra (pick)
|
||||
import Web.DOM (Node)
|
||||
import Yoga.Box.Component as Box
|
||||
import Yoga.Card.Component (mkCard)
|
||||
import Yoga.Centre.Component as Centre
|
||||
@ -27,7 +24,6 @@ import Yoga.Theme.Types (CSSTheme)
|
||||
|
||||
type Props
|
||||
= { spell ∷ Spell
|
||||
, cardRef ∷ Maybe (Ref (Nullable Node))
|
||||
| Style.PropsR
|
||||
}
|
||||
|
||||
@ -56,7 +52,7 @@ makeComponent = do
|
||||
]
|
||||
]
|
||||
pure
|
||||
$ jsx card { divRef: props.cardRef, className: style.card }
|
||||
$ jsx card { className: style.card }
|
||||
[ jsx box { className: style.container, padding: "var(--s-1)" }
|
||||
[ jsx stack { space: "var(--s-3)" }
|
||||
[ headerCluster
|
||||
|
@ -1,9 +1,9 @@
|
||||
module Yoga.Grimoire.Spell.Styles where
|
||||
|
||||
import Prelude hiding (top)
|
||||
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)
|
||||
import CSS (backgroundColor, black, boxShadow, color, darken, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, pct, rgba, sansSerif, textOverflow, textWhitespace, unitless, white, whitespaceNoWrap, width)
|
||||
import CSS.FontStyle (italic)
|
||||
import CSS.Overflow (overflow, overflowY)
|
||||
import CSS.Overflow (overflow)
|
||||
import CSS.Overflow as Overflow
|
||||
import CSS.Text.Overflow (ellipsis)
|
||||
import CSS.TextAlign (rightTextAlign, textAlign)
|
||||
@ -34,10 +34,12 @@ styles =
|
||||
do
|
||||
width (100.0 # pct)
|
||||
height (100.0 # pct)
|
||||
boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black
|
||||
boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) white
|
||||
backgroundColor $ rgba 0 0 0 0.0
|
||||
, container:
|
||||
jss do
|
||||
backgroundColor theme.backgroundColourLighter
|
||||
backgroundColor $ rgba 0 0 0 0.0
|
||||
width (100.0 # pct)
|
||||
(key $ fromString "user-select") "none"
|
||||
height (100.0 # pct)
|
||||
, signature:
|
||||
|
@ -1,7 +1,7 @@
|
||||
module Yoga.Grimoire.Styles where
|
||||
|
||||
import Prelude hiding (top)
|
||||
import CSS (backgroundColor, borderRadius)
|
||||
import CSS (backgroundColor, borderRadius, height, px)
|
||||
import JSS (JSSClasses, JSSElem, jssClasses)
|
||||
import Yoga.Theme.Types (YogaTheme)
|
||||
|
||||
@ -17,9 +17,10 @@ type Classes a
|
||||
|
||||
styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))
|
||||
styles =
|
||||
jssClasses \theme@{ s0 } ->
|
||||
jssClasses \theme@{ s0, s_2 } ->
|
||||
{ container:
|
||||
do
|
||||
borderRadius s0 s0 s0 s0
|
||||
backgroundColor theme.backgroundColourDarker
|
||||
height (100.0 # px)
|
||||
borderRadius s_2 s_2 s_2 s_2
|
||||
backgroundColor $ theme.interfaceColour
|
||||
}
|
||||
|
@ -24,7 +24,7 @@ darkTheme ∷ Theme
|
||||
darkTheme =
|
||||
{ backgroundColour: Color.hsl 238.0 0.18 0.30
|
||||
, textColour: Color.hsl 225.0 0.28 0.90
|
||||
, interfaceColour: Color.hsl 225.0 0.48 0.12
|
||||
, interfaceColour: Color.hsl 235.0 0.22 0.28
|
||||
, highlightColour: Color.hsl 285.0 0.88 0.72
|
||||
, altHighlightColour: Color.hsl 84.0 0.617 0.631
|
||||
, textFontFamily: cons' "Rubik" systemFontStack
|
||||
@ -47,8 +47,8 @@ lightTheme ∷ Theme
|
||||
lightTheme =
|
||||
darkTheme
|
||||
{ textColour = Color.hsl 220.0 0.18 0.30
|
||||
, backgroundColour = Color.hsl 30.0 0.50 0.96
|
||||
, interfaceColour = Color.hsl 210.0 0.10 0.89
|
||||
, backgroundColour = Color.hsl 30.0 0.50 0.97
|
||||
, interfaceColour = Color.hsl 350.0 0.40 0.97
|
||||
, highlightColour = Color.hsl 350.0 0.93 0.67
|
||||
, altHighlightColour = Color.hsl 84.0 0.617 0.631
|
||||
, green = Color.hsl 170.0 0.39 0.40
|
||||
|
Loading…
Reference in New Issue
Block a user