elm-community / typed-svg

Typed SVG library written for Elm
BSD 3-Clause "New" or "Revised" License
59 stars 16 forks source link

Added the functions from2, from3, to2, to3. #24

Closed RalfNorthman closed 6 years ago

RalfNorthman commented 6 years ago

The functions to and from can be used to set important attributes for transformation animations. They only take one float value as an argument, which is enough for skewX and skewY. But translate and scale can take two floats and rotate takes three. Therefore I've added the functions from2, from3, to2 and to3. I imagine their names are in the spirit of the map functions.

The svg tutorial which got me started on this: http://tutorials.jenkov.com/svg/svg-animation.html

Here's an ellie with a rotate animation in action: https://ellie-app.com/3qq59rhvx9za1

Reproducing the ellie code for posterity:

module Main exposing (main)

import TypedSvg as Svg
import TypedSvg.Attributes exposing (..)
import TypedSvg.Attributes.InPx exposing (height, width, x, y)
import TypedSvg.Core exposing (Attribute, Svg, attribute)
import TypedSvg.Types exposing (..)

-- Could not import

animateTransformTypeToString : AnimateTransformType -> String
animateTransformTypeToString animateTransformType =
    case animateTransformType of
        AnimateTransformTypeTranslate ->
            "translate"

        AnimateTransformTypeScale ->
            "scale"

        AnimateTransformTypeRotate ->
            "rotate"

        AnimateTransformTypeSkewX ->
            "skewX"

        AnimateTransformTypeSkewY ->
            "skewY"

-- Change from an earlier pull request

updatedAnimateTransformType : AnimateTransformType -> Attribute msg
updatedAnimateTransformType transformType =
    attribute "type" <| animateTransformTypeToString transformType

-- Proposed additions

floatsToString : List Float -> String
floatsToString floatsList =
    floatsList
        |> List.map String.fromFloat
        |> String.join " "

from2 : Float -> Float -> Attribute msg
from2 a b =
    attribute "from" <| floatsToString [ a, b ]

from3 : Float -> Float -> Float -> Attribute msg
from3 a b c =
    attribute "from" <| floatsToString [ a, b, c ]

to2 : Float -> Float -> Attribute msg
to2 a b =
    attribute "to" <| floatsToString [ a, b ]

to3 : Float -> Float -> Float -> Attribute msg
to3 a b c =
    attribute "to" <| floatsToString [ a, b, c ]

-- Demonstration

main =
    Svg.svg []
        [ Svg.rect
            [ x 30
            , y 30
            , height 60
            , width 60
            ]
            [ Svg.animateTransform
                [ attributeName "transform"
                , begin [ TimingOffsetValue "0s" ]
                , dur <| Duration "15s"
                , updatedAnimateTransformType AnimateTransformTypeRotate
                , from3 0 60 60
                , to3 360 60 60
                , repeatCount RepeatIndefinite
                ]
                []
            ]
        ]
rupertlssmith commented 6 years ago

Merged in, and also filled in the documentation.