Commits: 3
Remove Transformations.apply, expose toString instead
Apply was just mapping the list with toString and joining with a " ". In our opinion it's easy enough to do it in consuming code and it doesn't require a separate function.
Co-Authored-By: Fana jewiet@outlook.com
index 6e99a6f..b934bac 100644
--- a/src/Examples/Circle.elm
+++ b/src/Examples/Circle.elm
@@ -154,11 +154,12 @@ ui config =
= , Svg.Attributes.cx "0"
= , Svg.Attributes.cy "0"
= , Svg.Attributes.fill fill
- , Svg.Attributes.transform <|
- Transformations.apply
- [ Rotate angle
- , Translate config.radius 0
- ]
+ , [ Rotate angle
+ , Translate config.radius 0
+ ]
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
= []
=
@@ -177,10 +178,9 @@ ui config =
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke "pink"
= , Svg.Attributes.strokeDasharray config.radi
- , Svg.Attributes.transform <|
- Transformations.apply
- [ Rotate angle
- ]
+ , Rotate angle
+ |> Transformations.toString
+ |> Svg.Attributes.transform
= ]
= []
= inindex f4a9dbf..fee3a3d 100644
--- a/src/Examples/NestedTransformations.elm
+++ b/src/Examples/NestedTransformations.elm
@@ -128,17 +128,18 @@ ui model =
= nestTransformationsGroup : Group -> Array Transformation -> Svg Msg -> Svg Msg
= nestTransformationsGroup group transformations item =
= let
- transformation =
- transformations
- |> Array.toList
- |> Transformations.apply
-
= color =
= group
= |> groupName
= |> String.toLower
= in
- g [ transform transformation ]
+ g
+ [ transformations
+ |> Array.toList
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> transform
+ ]
= [ line
= [ x1 "0"
= , x2 "100"index 15d42cf..d08ff63 100644
--- a/src/Examples/Transformations.elm
+++ b/src/Examples/Transformations.elm
@@ -93,7 +93,12 @@ ui model =
= ]
=
= shape =
- g [ transform (Transformations.apply transformations) ]
+ g
+ [ transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> transform
+ ]
= [ line
= [ x1 "0"
= , x2 "100"
@@ -267,8 +272,7 @@ transformationUI index transformation =
= ]
= [ Element.row [ Element.width Element.fill ]
= [ transformation
- |> List.singleton
- |> Transformations.apply
+ |> Transformations.toString
= |> Element.text
= |> Element.el [ Element.width Element.fill ]
= , Input.button []index d72965f..5b78597 100644
--- a/src/Transformations.elm
+++ b/src/Transformations.elm
@@ -1,6 +1,6 @@
=module Transformations exposing
= ( Transformation(..)
- , apply
+ , toString
= )
=
=
@@ -11,34 +11,27 @@ type Transformation
= | Rotate Float
=
=
-apply : List Transformation -> String
-apply transformations =
- let
- toString : Transformation -> String
- toString transformation =
- case transformation of
- Identity ->
- ""
+toString : Transformation -> String
+toString transformation =
+ case transformation of
+ Identity ->
+ ""
=
- Scale x y ->
- "scale("
- ++ String.fromFloat x
- ++ ", "
- ++ String.fromFloat y
- ++ ")"
+ Scale x y ->
+ "scale("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
=
- Translate x y ->
- "translate("
- ++ String.fromFloat x
- ++ ", "
- ++ String.fromFloat y
- ++ ")"
+ Translate x y ->
+ "translate("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
=
- Rotate angle ->
- "rotate("
- ++ String.fromFloat angle
- ++ ")"
- in
- transformations
- |> List.map toString
- |> String.join " "
+ Rotate angle ->
+ "rotate("
+ ++ String.fromFloat angle
+ ++ ")"Make each shape in Examples.Shapes take a list of transformations
We cannot nest groups due to Elm Markup limitation, so the next best thing is to repeat the transformations and simulate nesting that way.
Co-Authored-By: Fana jewiet@outlook.com
index 76067a3..24cc5df 100644
--- a/src/Examples/Shapes.elm
+++ b/src/Examples/Shapes.elm
@@ -6,6 +6,8 @@ module Examples.Shapes exposing
= , ui
= )
=
+import Axis2d
+import Basics.Extra exposing (inDegrees)
=import Circle2d
=import Element exposing (Element)
=import Geometry.Svg
@@ -15,7 +17,7 @@ import LineSegment2d
=import Point2d exposing (Point2d)
=import Svg exposing (Attribute, Svg)
=import Svg.Attributes
-import Transformations
+import Transformations exposing (Transformation(..))
=
=
=type alias Config =
@@ -33,22 +35,17 @@ type alias Container =
=
=type Shape
= = Dot
- { cx : Float
- , cy : Float
+ { transformations : List Transformation
= , radius : Float
= , color : String
= }
= | Line
- { x1 : Float
- , y1 : Float
- , x2 : Float
- , y2 : Float
+ { length : Float
+ , transformations : List Transformation
= , color : String
= }
= | Group
- { rotation : Float
- , x : Float
- , y : Float
+ { transformations : List Transformation
= }
= (List Shape)
=
@@ -62,43 +59,44 @@ defaults =
= }
= , shapes =
= [ Dot
- { cx = 0
- , cy = 0
+ { transformations = []
= , radius = 10
= , color = "skyblue"
= }
= , Line
- { x1 = 0.0
- , y1 = 0.0
- , x2 = 20.0
- , y2 = 30.0
+ { length = sqrt ((20 ^ 2) + (30 ^ 2))
+ , transformations =
+ [ atan2 20 30
+ |> inDegrees
+ |> Rotate
+ ]
= , color = "green"
= }
- , Group { rotation = -45.0, x = 0.0, y = 0.0 }
+ , Group
+ { transformations =
+ [ Rotate -45.0
+ ]
+ }
= [ Line
- { x1 = 20.0
- , y1 = 0.0
- , x2 = 70.0
- , y2 = 0.0
+ { transformations = [ Translate 20 0 ]
+ , length = 50
= , color = "orange"
= }
= , Dot
- { cx = 100
- , cy = 0.0
+ { transformations = [ Translate 100 0 ]
= , radius = 20.0
= , color = "red"
= }
- , Group { rotation = -45.0, x = 100.0, y = 0.0 }
+ , Group
+ { transformations = [ Rotate -45, Translate 100 0 ]
+ }
= [ Line
- { x1 = 20.0
- , y1 = 0.0
- , x2 = 70.0
- , y2 = 0.0
+ { length = 50
+ , transformations = [ Translate 20 0 ]
= , color = "orange"
= }
= , Dot
- { cx = 100
- , cy = 0.0
+ { transformations = [ Translate 100 0 ]
= , radius = 20.0
= , color = "red"
= }
@@ -123,34 +121,35 @@ ui { container, shapes } =
= shape : Shape -> Svg msg
= shape s =
= case s of
- Dot { cx, cy, color, radius } ->
- ( cx, cy )
- |> Point2d.fromCoordinates
+ Dot { transformations, color, radius } ->
+ Point2d.origin
= |> Circle2d.withRadius radius
- |> Geometry.Svg.circle2d [ Svg.Attributes.fill color ]
-
- Line { x1, y1, x2, y2, color } ->
- let
- a =
- Point2d.fromCoordinates ( x1, y1 )
+ |> Geometry.Svg.circle2d
+ [ Svg.Attributes.fill color
+ , transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
+ ]
=
- b =
- Point2d.fromCoordinates ( x2, y2 )
- in
- LineSegment2d.from a b
+ Line { length, transformations, color } ->
+ LineSegment2d.along Axis2d.x 0 length
= |> Geometry.Svg.lineSegment2d
= [ Svg.Attributes.stroke color
= , Svg.Attributes.strokeWidth "1"
+ , transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
=
- Group { rotation, x, y } ss ->
+ Group { transformations } ss ->
= ss
= |> List.map shape
= |> Svg.g
- [ [ Transformations.Rotate rotation
- , Transformations.Translate x y
- ]
- |> Transformations.apply
+ [ transformations
+ |> List.map Transformations.toString
+ |> String.join " "
= |> Svg.Attributes.transform
= ]
=index af1a472..e8c7294 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -49,7 +49,7 @@ import Result.Extra as Result
=import Routes exposing (Route)
=import Svg.Attributes
=import Task
-import Transformations
+import Transformations exposing (Transformation)
=import Url exposing (Url)
=
=
@@ -745,7 +745,6 @@ document =
= , circle
= , protractor
= , gradient
- , transformations
= , nestedTransformations
= , cartesianCoordinates
= , polarCoordinates
@@ -810,54 +809,80 @@ document =
=
= dot : Mark.Block Examples.Shapes.Shape
= dot =
- Mark.record4 "Dot"
- (\cx cy radius color ->
+ Mark.record3 "Dot"
+ (\radius color transformations ->
= Examples.Shapes.Dot
- { cx = cx
- , cy = cy
+ { transformations = transformations
= , radius = radius
= , color = color
= }
= )
- (Mark.field "cx" Mark.float)
- (Mark.field "cy" Mark.float)
= (Mark.field "radius" Mark.float)
= (Mark.field "color" Mark.string)
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
=
= line : Mark.Block Examples.Shapes.Shape
= line =
- Mark.record5 "Line"
- (\x1 y1 x2 y2 color ->
+ Mark.record3 "Line"
+ (\color length transformations ->
= Examples.Shapes.Line
- { x1 = x1
- , y1 = y1
- , x2 = x2
- , y2 = y2
+ { transformations = transformations
= , color = color
+ , length = length
= }
= )
- (Mark.field "x1" Mark.float)
- (Mark.field "y1" Mark.float)
- (Mark.field "x2" Mark.float)
- (Mark.field "y2" Mark.float)
= (Mark.field "color" Mark.string)
+ (Mark.field "length" Mark.float)
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
=
= -- TODO: Implement a recursive group block (that can contain nested groups)
= group : Mark.Block Examples.Shapes.Shape
= group =
- Mark.record4 "Group"
- (\x y rotation children ->
+ Mark.record2 "Group"
+ (\children transformations ->
= Examples.Shapes.Group
- { x = x
- , y = y
- , rotation = rotation
+ { transformations = transformations
= }
= children
= )
+ (Mark.field "children" (Mark.manyOf [ dot, line ]))
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
+
+ identity : Mark.Block Transformation
+ identity =
+ Mark.stub "Identity" Transformations.Identity
+
+ translate : Mark.Block Transformation
+ translate =
+ Mark.record2 "Translate"
+ Transformations.Translate
= (Mark.field "x" Mark.float)
= (Mark.field "y" Mark.float)
- (Mark.field "rotation" Mark.float)
- (Mark.field "children" (Mark.manyOf [ dot, line ]))
+
+ rotate : Mark.Block Transformation
+ rotate =
+ Mark.block "Rotate" Transformations.Rotate Mark.float
= in
= Mark.block "Shapes"
= render
@@ -897,20 +922,6 @@ document =
= in
= Mark.stub "Gradient" render
=
- transformations : Mark.Block (Examples.Model -> Element Msg)
- transformations =
- let
- render model =
- model.transformations
- |> Examples.Transformations.ui
- |> Element.el
- [ Element.width Element.fill
- ]
- |> Element.map Examples.TransformationsMsg
- |> Element.map ExamplesMsg
- in
- Mark.stub "Transformations" render
-
= nestedTransformations : Mark.Block (Examples.Model -> Element Msg)
= nestedTransformations =
= let