mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
Resize is better
This commit is contained in:
parent
3d6eb2fd95
commit
0d8219addd
@ -36,13 +36,13 @@ type GenericOptions r
|
||||
= { domTarget ∷ Maybe (Ref (Nullable Node)) | r }
|
||||
|
||||
type DragOptions
|
||||
= GenericOptions ()
|
||||
= GenericOptions ( filterTaps ∷ Maybe Boolean )
|
||||
|
||||
type DragOptionsImpl
|
||||
= GenericOptionsImpl ()
|
||||
= GenericOptionsImpl ( filterTaps ∷ Boolean )
|
||||
|
||||
dragOptionsToImpl ∷ DragOptions -> DragOptionsImpl
|
||||
dragOptionsToImpl { domTarget } = { domTarget: domTarget # orUndefined }
|
||||
dragOptionsToImpl { domTarget, filterTaps } = { domTarget: domTarget # orUndefined, filterTaps: filterTaps ?|| false }
|
||||
|
||||
foreign import useDragImpl ∷ ∀ a. EffectFn2 (DragHandlerImpl a) DragOptionsImpl (a -> DragProps)
|
||||
|
||||
|
@ -4,24 +4,25 @@ import Prelude
|
||||
import Data.Array (mapWithIndex, zip, (!!))
|
||||
import Data.Array as Array
|
||||
import Data.FoldableWithIndex (findWithIndex)
|
||||
import Data.Interpolate as Interp
|
||||
import Data.Lens (set)
|
||||
import Data.Lens.Index (ix)
|
||||
import Data.Maybe (Maybe(..), fromMaybe)
|
||||
import Data.Nullable (Nullable)
|
||||
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.Aff (Milliseconds(..), delay, launchAff_)
|
||||
import Justifill (justifill)
|
||||
import React.Basic (ReactComponent)
|
||||
import React.Basic.DOM (css)
|
||||
import React.Basic.Helpers (jsx)
|
||||
import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)
|
||||
import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)
|
||||
import React.Basic.Hooks as React
|
||||
import React.Basic.Hooks.Spring (animatedDiv, useSprings)
|
||||
import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
|
||||
import Record as Record
|
||||
import Record.Extra (pick)
|
||||
import Unsafe.Coerce (unsafeCoerce)
|
||||
import Web.DOM (Node)
|
||||
@ -81,8 +82,20 @@ makeComponent = do
|
||||
useStyles <- makeStylesJSS styles
|
||||
component "Grimoire" \(props ∷ Props) -> React.do
|
||||
{} <- useStyles (pick props)
|
||||
springs <- useSprings (Array.length props.spells) \_ -> { x: 0.0, y: 0.0, zIndex: 0, immediate: false, transform: "scale3d(1.0,1.0,1.0)" }
|
||||
nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))
|
||||
let
|
||||
defaultSprings = \_ ->
|
||||
{ x: 0.0
|
||||
, y: 0.0
|
||||
, height: "100px"
|
||||
, shadow: 2
|
||||
, borderRadius: "var(--s-2)"
|
||||
, zIndex: 0
|
||||
, immediate: const false
|
||||
, transform: "scale3d(1.0,1.0,1.0)"
|
||||
}
|
||||
springs <-
|
||||
useSprings (Array.length props.spells) defaultSprings
|
||||
nodeRefs <- useRef (props.spells $> Nullable.null)
|
||||
positionsRef <- useRef ([] ∷ _ DOMRect)
|
||||
originalPositionsRef <- useRef ([] ∷ _ DOMRect)
|
||||
initialisedRef <- useRef false
|
||||
@ -95,19 +108,15 @@ makeComponent = do
|
||||
writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
|
||||
writeRef initialisedRef true
|
||||
useEffect windowSize do
|
||||
useLayoutEffect windowSize do
|
||||
springs.stop
|
||||
writeRef initialisedRef false
|
||||
positions <- readRef positionsRef
|
||||
let
|
||||
newOriginalPositions = positions
|
||||
writeRef positionsRef newOriginalPositions
|
||||
init
|
||||
springs.set defaultSprings
|
||||
mempty
|
||||
theme ∷ CSSTheme <- useTheme
|
||||
bindDragProps <-
|
||||
useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do
|
||||
useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my } -> do
|
||||
init
|
||||
rects <- getRects nodeRefs
|
||||
originalPositions <- readRef originalPositionsRef
|
||||
positionsBefore <- readRef positionsRef
|
||||
let
|
||||
@ -144,7 +153,10 @@ makeComponent = do
|
||||
{ x: originalPosDragged.left - value.left + leftOffset
|
||||
, y: originalPosDragged.top - value.top + topOffset
|
||||
, zIndex: 0
|
||||
, shadow: 2
|
||||
, height: "100px"
|
||||
, transform: "scale3d(1.0, 1.0, 1.0)"
|
||||
, borderRadius: "var(--s-2)"
|
||||
, immediate: const false
|
||||
}
|
||||
true, true, _ ->
|
||||
@ -152,11 +164,17 @@ makeComponent = do
|
||||
, 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"
|
||||
}
|
||||
_, _, _ ->
|
||||
{ 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
|
||||
@ -165,7 +183,7 @@ makeComponent = do
|
||||
renderSpells =
|
||||
mapWithIndex \i (spell /\ style) ->
|
||||
animatedDiv
|
||||
$ { style: css 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)
|
||||
, ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)
|
||||
, children:
|
||||
[ element
|
||||
|
@ -2,7 +2,6 @@ module Yoga.Spell.Spec where
|
||||
|
||||
import Prelude
|
||||
import Justifill (justifill)
|
||||
import React.Basic.DOM as R
|
||||
import React.TestingLibrary (describeComponent, renderComponent)
|
||||
import Test.Spec (Spec, it)
|
||||
import Yoga.Grimoire.Spell.Component as Spell
|
||||
|
@ -1,12 +1,16 @@
|
||||
module Yoga.Grimoire.Spell.Styles where
|
||||
|
||||
import Prelude hiding (top)
|
||||
import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)
|
||||
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.FontStyle (italic)
|
||||
import CSS.Overflow (overflow, overflowY)
|
||||
import CSS.Overflow as Overflow
|
||||
import CSS.Text.Overflow (ellipsis)
|
||||
import CSS.TextAlign (rightTextAlign, textAlign)
|
||||
import Data.Array (fromFoldable)
|
||||
import Data.NonEmpty as NonEmpty
|
||||
import JSS (JSSClasses, JSSElem, jss, jssClasses)
|
||||
import Text.Parsing.StringParser.CodePoints (whiteSpace)
|
||||
import Yoga.Theme.Types (YogaTheme)
|
||||
|
||||
type PropsR
|
||||
@ -30,11 +34,12 @@ styles =
|
||||
do
|
||||
width (100.0 # pct)
|
||||
height (100.0 # pct)
|
||||
boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black
|
||||
, container:
|
||||
jss { userSelect: "none" }
|
||||
<> jss do
|
||||
backgroundColor theme.backgroundColourLighter
|
||||
height (100.0 # pct)
|
||||
jss do
|
||||
backgroundColor theme.backgroundColourLighter
|
||||
(key $ fromString "user-select") "none"
|
||||
height (100.0 # pct)
|
||||
, signature:
|
||||
do
|
||||
color theme.textColour
|
||||
@ -48,6 +53,10 @@ styles =
|
||||
fontSize s1
|
||||
, description:
|
||||
do
|
||||
display inlineBlock
|
||||
color theme.grey
|
||||
fontStyle italic
|
||||
overflow Overflow.hidden
|
||||
textWhitespace whitespaceNoWrap
|
||||
textOverflow ellipsis
|
||||
}
|
||||
|
@ -21,17 +21,5 @@ spells =
|
||||
[ { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
|
||||
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
|
||||
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
|
||||
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
|
||||
, { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
|
||||
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
|
||||
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
|
||||
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
|
||||
, { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
|
||||
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
|
||||
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
|
||||
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
|
||||
, { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
|
||||
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }
|
||||
, { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }
|
||||
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }
|
||||
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }
|
||||
]
|
||||
|
@ -22,7 +22,7 @@ fontFaces = jss (Rubik.fontFamilies <> VictorMono.fontFamilies)
|
||||
|
||||
darkTheme ∷ Theme
|
||||
darkTheme =
|
||||
{ backgroundColour: Color.hsl 238.0 0.18 0.20
|
||||
{ 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
|
||||
, highlightColour: Color.hsl 285.0 0.88 0.72
|
||||
|
Loading…
Reference in New Issue
Block a user