Commits: 1
In CartesianCoordinates do not subscribe to animation frames if springs are at rest
It leads to frequent garbage collection, which hits performance.
Also use translations instead of setting x and y attributes for SVG elements. Otherwise browsers are recalcuating the layout and frame rate drops.
index f45515a..a8f1e95 100644
--- a/src/Examples/CartesianCoordinates.elm
+++ b/src/Examples/CartesianCoordinates.elm
@@ -21,6 +21,7 @@ import Html exposing (Html)
=import Spring exposing (Spring)
=import Svg exposing (..)
=import Svg.Attributes exposing (..)
+import Transformations exposing (Transformation)
=
=
=type alias Config =
@@ -91,7 +92,7 @@ view model =
=
=update : Msg -> Model -> ( Model, Cmd Msg )
=update msg model =
- case Debug.log "CartesianCoordinatesMsg" msg of
+ case msg of
= SetX x ->
= ( { model | x = Spring.setTarget x model.x }
= , Cmd.none
@@ -112,7 +113,11 @@ update msg model =
=
=
=subscriptions model =
- Browser.Events.onAnimationFrameDelta Animate
+ if Spring.atRest model.x && Spring.atRest model.y then
+ Sub.none
+
+ else
+ Browser.Events.onAnimationFrameDelta Animate
=
=
=ui : Config -> Model -> Element Msg
@@ -120,19 +125,21 @@ ui config model =
= let
= graph =
= [ circle
- [ Spring.value model.x
- |> String.fromFloat
- |> cx
- , Spring.value model.y
- |> String.fromFloat
- |> cy
+ [ Transformations.Translate
+ (Spring.value model.x)
+ (Spring.value model.y)
+ |> Transformations.toString
+ |> Svg.Attributes.transform
= , r "2"
= , fill "magenta"
= ]
= []
= , text_
- [ x <| String.fromFloat (Spring.value model.x + 5)
- , y <| String.fromFloat (Spring.value model.y + 5)
+ [ Transformations.Translate
+ (5 + Spring.value model.x)
+ (-5 + Spring.value model.y)
+ |> Transformations.toString
+ |> Svg.Attributes.transform
= , fontSize "6"
= , fontFamily "Source Code Pro, monospace"
= , fill "gray"