Commits: 8
Embed Transformations example in Markup document
index 5dc347c..1a452ee 100644
--- a/index.txt
+++ b/index.txt
@@ -36,4 +36,8 @@ Setup the development environment
=
=| counter
=
-Last sentence
+Embeded transformations example:
+
+| transformations
+
+Finito!index b8450ee..b7a1bc1 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -3,6 +3,7 @@ module Main exposing (main)
=import Browser
=import Counter
=import Element exposing (Element)
+import Element.Background as Background
=import Element.Border as Border
=import Element.Input as Input
=import Html exposing (Html)
@@ -10,6 +11,7 @@ import Http
=import Mark
=import Mark.Custom
=import Result.Extra as Result
+import Transformations
=
=
=main =
@@ -28,18 +30,21 @@ type alias Flags =
=type alias Model =
= { markup : Maybe String
= , counter : Counter.Model
+ , transformations : Transformations.Model
= }
=
=
=type Msg
= = DocumentFetched (Result Http.Error String)
= | CounterMsg Counter.Msg
+ | TransformationsMsg Transformations.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
=init flags =
= ( { markup = Nothing
= , counter = Counter.init
+ , transformations = Transformations.init
= }
= , Http.get
= { url = "/index.txt"
@@ -60,9 +65,27 @@ view model =
= Just markup ->
= markup
= |> Mark.parseWith options
- |> Result.mapError Debug.toString
= |> Result.map (\fn -> fn model)
- |> Result.extract Element.text
+ |> Result.extract problemsElement
+
+ problemsElement problems =
+ problems
+ |> List.map problemElement
+ |> Element.column
+ [ Element.centerX
+ , Element.centerY
+ , Background.color (Element.rgb 0.7 0 0)
+ , Element.padding 40
+ , Element.spacing 20
+ ]
+
+ problemElement { row, col, problem } =
+ Debug.toString problem
+ ++ " at "
+ ++ String.fromInt row
+ ++ ":"
+ ++ String.fromInt col
+ |> Element.text
= in
= Element.layout
= [ Element.width Element.fill
@@ -89,6 +112,11 @@ update msg model =
= , Cmd.none
= )
=
+ TransformationsMsg m ->
+ ( { model | transformations = Transformations.update m model.transformations }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -127,8 +155,29 @@ options =
= , Border.width 2
= ]
= |> Element.map CounterMsg
+
+ transformationsBlock : Mark.Custom.Block Model Styling Msg
+ transformationsBlock =
+ Mark.Custom.block "transformations" transformationsView
+
+ transformationsView : Styling -> Model -> Element Msg
+ transformationsView style model =
+ model.transformations
+ |> Transformations.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+ |> Element.map TransformationsMsg
= in
= { default
= | blocks =
- counterBlock :: Mark.defaultBlocks
+ counterBlock
+ :: transformationsBlock
+ :: Mark.defaultBlocks
= }index 0d66cf5..0c519ab 100644
--- a/src/Transformations.elm
+++ b/src/Transformations.elm
@@ -1,4 +1,11 @@
-module Transformations exposing (main)
+module Transformations exposing
+ ( Model
+ , Msg
+ , init
+ , main
+ , ui
+ , update
+ )
=
=import Array exposing (Array)
=import Browser
@@ -19,19 +26,15 @@ import Svg exposing (..)
=import Svg.Attributes exposing (..)
=
=
+main : Program () Model Msg
=main =
- Browser.element
+ Browser.sandbox
= { init = init
= , view = view
= , update = update
- , subscriptions = subscriptions
= }
=
=
-type alias Flags =
- ()
-
-
=type alias Model =
= Array Transformation
=
@@ -49,19 +52,26 @@ type Msg
= | SetTransformation Int Transformation
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( Array.fromList
+init : Model
+init =
+ Array.fromList
= [ Translate 0 0
= , Rotate 0
= , Scale 1 1
= ]
- , Cmd.none
- )
=
=
=view : Model -> Html Msg
=view model =
+ Element.layout
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+ (ui model)
+
+
+ui : Model -> Element Msg
+ui model =
= let
= transformations =
= Array.toList model
@@ -113,10 +123,6 @@ view model =
= |> List.singleton
= |> CartesianPlane.graph 300
= |> wrapper
- |> Element.layout
- [ Element.height Element.fill
- , Element.width Element.fill
- ]
=
=
=transformationsUI : List Transformation -> Element Msg
@@ -277,13 +283,11 @@ transformationUI index transformation =
= ]
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update msg model =
= case msg of
= AddTransformation transformation ->
- ( Array.push transformation model
- , Cmd.none
- )
+ Array.push transformation model
=
= DeleteTransformation index ->
= let
@@ -296,14 +300,10 @@ update msg model =
= back =
= Array.slice (index + 1) end model
= in
- ( Array.append front back
- , Cmd.none
- )
+ Array.append front back
=
= SetTransformation index transformation ->
- ( Array.set index transformation model
- , Cmd.none
- )
+ Array.set index transformation model
=
=
=subscriptions : Model -> Sub MsgEmbed cartesian coordinates example
index 1a452ee..da39b4c 100644
--- a/index.txt
+++ b/index.txt
@@ -36,6 +36,10 @@ Setup the development environment
=
=| counter
=
+Embedded cartesian coordinates example:
+
+| cartesian-coordinates
+
=Embeded transformations example:
=
=| transformationsindex 6be4d7b..d9b0f00 100644
--- a/src/CartesianCoordinates.elm
+++ b/src/CartesianCoordinates.elm
@@ -1,10 +1,8 @@
=module CartesianCoordinates exposing
- ( Flags
- , Model
+ ( Model
= , Msg
= , init
= , main
- , subscriptions
= , ui
= , update
= , view
@@ -12,7 +10,7 @@ module CartesianCoordinates exposing
=
=import Browser
=import CartesianPlane exposing (graph)
-import Element
+import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
=import Element.Input as Input
@@ -21,19 +19,15 @@ import Svg exposing (..)
=import Svg.Attributes exposing (..)
=
=
+main : Program () Model Msg
=main =
- Browser.element
+ Browser.sandbox
= { init = init
= , view = view
= , update = update
- , subscriptions = subscriptions
= }
=
=
-type alias Flags =
- ()
-
-
=type alias Model =
= { x : Float
= , y : Float
@@ -45,62 +39,47 @@ type Msg
= | SetY Float
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( { x = 0, y = 0 }
- , Cmd.none
- )
+init : Model
+init =
+ { x = 0, y = 0 }
=
=
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
=view model =
- let
- wrapper element =
- Element.el
- [ Element.width (Element.maximum 600 Element.fill), Element.centerX ]
- element
- in
- ui model
- |> wrapper
- |> Element.layout
- [ Element.height Element.fill
- , Element.width Element.fill
- ]
+ Element.layout
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+ (ui model)
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update msg model =
= case msg of
= SetX x ->
- ( { model | x = x }, Cmd.none )
+ { model | x = x }
=
= SetY y ->
- ( { model | y = y }, Cmd.none )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
- Sub.none
+ { model | y = y }
=
=
+ui : Model -> Element Msg
=ui model =
= Element.column
- [ Element.width Element.fill
+ [ Element.width (Element.maximum 600 Element.fill)
= , Element.centerX
- , Element.spacing 30
- , Element.padding 30
+ , Element.spacing 20
= ]
= [ Element.el
- [ Element.height Element.fill
- , Element.width Element.fill
+ [ Element.width Element.fill
= ]
= <|
= Element.html <|
- graph
+ CartesianPlane.graph 300
= [ circle
= [ cx <| String.fromFloat model.x
= , cy <| String.fromFloat model.y
- , r "0.01"
+ , r "2"
= , fill "magenta"
= ]
= []
@@ -115,7 +94,7 @@ ui model =
= , Input.slider
= [ Element.behindContent
= (Element.el
- [ Element.width Element.fill
+ [ Element.width (Element.maximum 600 Element.fill)
= , Element.height (Element.px 2)
= , Element.centerY
= , Background.color <| Element.rgb 0.7 0.7 0.7
@@ -128,8 +107,8 @@ ui model =
= , label =
= Input.labelBelow [ Element.centerX ] <|
= Element.text ("x value: " ++ String.fromFloat model.x)
- , min = -1
- , max = 1
+ , min = -150
+ , max = 150
= , value = model.x
= , thumb = Input.defaultThumb
= , step = Just 0.01
@@ -150,8 +129,8 @@ ui model =
= , label =
= Input.labelBelow [ Element.centerX ] <|
= Element.text ("y value: " ++ String.fromFloat model.y)
- , min = -1
- , max = 1
+ , min = -150
+ , max = 150
= , value = model.y
= , thumb = Input.defaultThumb
= , step = Just 0.01index b7a1bc1..9610763 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1,6 +1,7 @@
=module Main exposing (main)
=
=import Browser
+import CartesianCoordinates
=import Counter
=import Element exposing (Element)
=import Element.Background as Background
@@ -31,6 +32,7 @@ type alias Model =
= { markup : Maybe String
= , counter : Counter.Model
= , transformations : Transformations.Model
+ , cartesianCoordinates : CartesianCoordinates.Model
= }
=
=
@@ -38,6 +40,7 @@ type Msg
= = DocumentFetched (Result Http.Error String)
= | CounterMsg Counter.Msg
= | TransformationsMsg Transformations.Msg
+ | CartesianCoordinatesMsg CartesianCoordinates.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -45,6 +48,7 @@ init flags =
= ( { markup = Nothing
= , counter = Counter.init
= , transformations = Transformations.init
+ , cartesianCoordinates = CartesianCoordinates.init
= }
= , Http.get
= { url = "/index.txt"
@@ -117,6 +121,11 @@ update msg model =
= , Cmd.none
= )
=
+ CartesianCoordinatesMsg m ->
+ ( { model | cartesianCoordinates = CartesianCoordinates.update m model.cartesianCoordinates }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -174,10 +183,30 @@ options =
= , Border.width 2
= ]
= |> Element.map TransformationsMsg
+
+ cartesianCoordinatesBlock : Mark.Custom.Block Model Styling Msg
+ cartesianCoordinatesBlock =
+ Mark.Custom.block "cartesian-coordinates" cartesianCoordinatesView
+
+ cartesianCoordinatesView : Styling -> Model -> Element Msg
+ cartesianCoordinatesView style model =
+ model.cartesianCoordinates
+ |> CartesianCoordinates.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+ |> Element.map CartesianCoordinatesMsg
= in
= { default
= | blocks =
= counterBlock
= :: transformationsBlock
+ :: cartesianCoordinatesBlock
= :: Mark.defaultBlocks
= }Embed centered dot example
index da39b4c..c024bc9 100644
--- a/index.txt
+++ b/index.txt
@@ -36,6 +36,10 @@ Setup the development environment
=
=| counter
=
+Embedded centered dot example:
+
+| centered-dot
+
=Embedded cartesian coordinates example:
=
=| cartesian-coordinatesindex cbd5f2e..fef1177 100644
--- a/src/CenteredDot.elm
+++ b/src/CenteredDot.elm
@@ -1,4 +1,4 @@
-module CenteredDot exposing (main)
+module CenteredDot exposing (main, ui)
=
=import Element
=import Svg
@@ -10,9 +10,14 @@ main =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-1000 -1000 2000 2000" ]
- [ Svg.circle [ Svg.Attributes.r "10" ] [] ]
- )
+ ui
+
+
+ui =
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200"
+ , Svg.Attributes.height "200"
+ ]
+ [ Svg.circle [ Svg.Attributes.r "10" ] [] ]
= )index 9610763..7327b7d 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -2,6 +2,7 @@ module Main exposing (main)
=
=import Browser
=import CartesianCoordinates
+import CenteredDot
=import Counter
=import Element exposing (Element)
=import Element.Background as Background
@@ -165,6 +166,23 @@ options =
= ]
= |> Element.map CounterMsg
=
+ centeredDotBlock : Mark.Custom.Block Model Styling Msg
+ centeredDotBlock =
+ Mark.Custom.block "centered-dot" centeredDotView
+
+ centeredDotView : Styling -> Model -> Element Msg
+ centeredDotView style model =
+ CenteredDot.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
= transformationsBlock : Mark.Custom.Block Model Styling Msg
= transformationsBlock =
= Mark.Custom.block "transformations" transformationsView
@@ -206,6 +224,7 @@ options =
= { default
= | blocks =
= counterBlock
+ :: centeredDotBlock
= :: transformationsBlock
= :: cartesianCoordinatesBlock
= :: Mark.defaultBlocksEmbed fill the screen example
index c024bc9..8d8b39c 100644
--- a/index.txt
+++ b/index.txt
@@ -36,6 +36,10 @@ Setup the development environment
=
=| counter
=
+Embedded fill the screen example:
+
+| fill-the-screen
+
=Embedded centered dot example:
=
=| centered-dotindex 753928b..d7cfc83 100644
--- a/src/FillTheScreen.elm
+++ b/src/FillTheScreen.elm
@@ -1,4 +1,4 @@
-module FillTheScreen exposing (main)
+module FillTheScreen exposing (main, ui)
=
=import Element
=import Svg
@@ -10,15 +10,18 @@ main =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.style "background: pink; height: 100%; width: 100%" ]
- [ Svg.circle
- [ Svg.Attributes.r "10"
- , Svg.Attributes.cx "30"
- , Svg.Attributes.cy "30"
- ]
- []
+ ui
+
+
+ui =
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.style "background: pink; height: 100%; width: 100%" ]
+ [ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "30"
+ , Svg.Attributes.cy "30"
= ]
- )
+ []
+ ]
= )index 7327b7d..e962fd1 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -8,6 +8,7 @@ import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
=import Element.Input as Input
+import FillTheScreen
=import Html exposing (Html)
=import Http
=import Mark
@@ -166,6 +167,24 @@ options =
= ]
= |> Element.map CounterMsg
=
+ fillTheScreenBlock : Mark.Custom.Block Model Styling Msg
+ fillTheScreenBlock =
+ Mark.Custom.block "fill-the-screen" fillTheScreenView
+
+ fillTheScreenView : Styling -> Model -> Element Msg
+ fillTheScreenView style model =
+ FillTheScreen.ui
+ |> Element.el
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
= centeredDotBlock : Mark.Custom.Block Model Styling Msg
= centeredDotBlock =
= Mark.Custom.block "centered-dot" centeredDotView
@@ -224,6 +243,7 @@ options =
= { default
= | blocks =
= counterBlock
+ :: fillTheScreenBlock
= :: centeredDotBlock
= :: transformationsBlock
= :: cartesianCoordinatesBlockEmbed gradient example
index 8d8b39c..b6243e7 100644
--- a/index.txt
+++ b/index.txt
@@ -44,6 +44,10 @@ Embedded centered dot example:
=
=| centered-dot
=
+Embedded gradient example:
+
+| gradient
+
=Embedded cartesian coordinates example:
=
=| cartesian-coordinatesindex 81e07be..4aa189c 100644
--- a/src/Gradient.elm
+++ b/src/Gradient.elm
@@ -1,4 +1,4 @@
-module Gradient exposing (main)
+module Gradient exposing (main, ui)
=
=import Element
=import Svg
@@ -10,36 +10,41 @@ main =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200" ]
- [ Svg.defs []
- [ Svg.linearGradient
- [ Svg.Attributes.id "blue-pink-gradient"
- , Svg.Attributes.x1 "0"
- , Svg.Attributes.y1 "0"
- , Svg.Attributes.x2 "1"
- , Svg.Attributes.y2 "0"
- , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ui
+
+
+ui =
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.height "200"
+ , Svg.Attributes.viewBox "-10 -25 100 100"
+ ]
+ [ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
= ]
- [ Svg.stop
- [ Svg.Attributes.stopColor "blue"
- , Svg.Attributes.offset "0"
- ]
- []
- , Svg.stop
- [ Svg.Attributes.stopColor "pink"
- , Svg.Attributes.offset "1"
- ]
- []
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
= ]
+ []
= ]
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , Svg.Attributes.transform "rotate(30) scale(100, 1)"
- ]
- []
= ]
- )
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(30) scale(100, 1)"
+ ]
+ []
+ ]
= )index e962fd1..7799c4b 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -9,6 +9,7 @@ import Element.Background as Background
=import Element.Border as Border
=import Element.Input as Input
=import FillTheScreen
+import Gradient
=import Html exposing (Html)
=import Http
=import Mark
@@ -202,6 +203,23 @@ options =
= , Border.width 2
= ]
=
+ gradientBlock : Mark.Custom.Block Model Styling Msg
+ gradientBlock =
+ Mark.Custom.block "gradient" gradientView
+
+ gradientView : Styling -> Model -> Element Msg
+ gradientView style model =
+ Gradient.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
= transformationsBlock : Mark.Custom.Block Model Styling Msg
= transformationsBlock =
= Mark.Custom.block "transformations" transformationsView
@@ -244,6 +262,7 @@ options =
= | blocks =
= counterBlock
= :: fillTheScreenBlock
+ :: gradientBlock
= :: centeredDotBlock
= :: transformationsBlock
= :: cartesianCoordinatesBlockEmbed line example
index b6243e7..5481c9e 100644
--- a/index.txt
+++ b/index.txt
@@ -44,6 +44,10 @@ Embedded centered dot example:
=
=| centered-dot
=
+Embedded line example:
+
+| line
+
=Embedded gradient example:
=
=| gradientindex 0eee932..53ab314 100644
--- a/src/Line.elm
+++ b/src/Line.elm
@@ -1,4 +1,4 @@
-module Line exposing (main)
+module Line exposing (main, ui)
=
=import Element
=import Svg
@@ -10,15 +10,20 @@ main =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200" ]
- [ Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "black"
- , Svg.Attributes.transform "rotate(30) scale(100, 1)"
- ]
- []
+ ui
+
+
+ui =
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.height "200"
+ , Svg.Attributes.viewBox "-10 -25 100 100"
+ ]
+ [ Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "black"
+ , Svg.Attributes.transform "rotate(30) scale(100, 1)"
= ]
- )
+ []
+ ]
= )index 7799c4b..20f8888 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -12,6 +12,7 @@ import FillTheScreen
=import Gradient
=import Html exposing (Html)
=import Http
+import Line
=import Mark
=import Mark.Custom
=import Result.Extra as Result
@@ -203,6 +204,23 @@ options =
= , Border.width 2
= ]
=
+ lineBlock : Mark.Custom.Block Model Styling Msg
+ lineBlock =
+ Mark.Custom.block "line" lineView
+
+ lineView : Styling -> Model -> Element Msg
+ lineView style model =
+ Line.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
= gradientBlock : Mark.Custom.Block Model Styling Msg
= gradientBlock =
= Mark.Custom.block "gradient" gradientView
@@ -262,6 +280,7 @@ options =
= | blocks =
= counterBlock
= :: fillTheScreenBlock
+ :: lineBlock
= :: gradientBlock
= :: centeredDotBlock
= :: transformationsBlockEmbed nested transformations program
index 5481c9e..b76690a 100644
--- a/index.txt
+++ b/index.txt
@@ -60,4 +60,8 @@ Embeded transformations example:
=
=| transformations
=
+Embeded nested-transformations example:
+
+| nested-transformations
+
=Finito!index 20f8888..72898e4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -15,6 +15,7 @@ import Http
=import Line
=import Mark
=import Mark.Custom
+import NestedTransformations
=import Result.Extra as Result
=import Transformations
=
@@ -36,6 +37,7 @@ type alias Model =
= { markup : Maybe String
= , counter : Counter.Model
= , transformations : Transformations.Model
+ , nestedTransformations : NestedTransformations.Model
= , cartesianCoordinates : CartesianCoordinates.Model
= }
=
@@ -44,6 +46,7 @@ type Msg
= = DocumentFetched (Result Http.Error String)
= | CounterMsg Counter.Msg
= | TransformationsMsg Transformations.Msg
+ | NestedTransformationsMsg NestedTransformations.Msg
= | CartesianCoordinatesMsg CartesianCoordinates.Msg
=
=
@@ -52,6 +55,7 @@ init flags =
= ( { markup = Nothing
= , counter = Counter.init
= , transformations = Transformations.init
+ , nestedTransformations = NestedTransformations.init
= , cartesianCoordinates = CartesianCoordinates.init
= }
= , Http.get
@@ -125,6 +129,11 @@ update msg model =
= , Cmd.none
= )
=
+ NestedTransformationsMsg m ->
+ ( { model | nestedTransformations = NestedTransformations.update m model.nestedTransformations }
+ , Cmd.none
+ )
+
= CartesianCoordinatesMsg m ->
= ( { model | cartesianCoordinates = CartesianCoordinates.update m model.cartesianCoordinates }
= , Cmd.none
@@ -257,6 +266,25 @@ options =
= ]
= |> Element.map TransformationsMsg
=
+ nestedTransformationsBlock : Mark.Custom.Block Model Styling Msg
+ nestedTransformationsBlock =
+ Mark.Custom.block "nested-transformations" nestedTransformationsView
+
+ nestedTransformationsView : Styling -> Model -> Element Msg
+ nestedTransformationsView style model =
+ model.nestedTransformations
+ |> NestedTransformations.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+ |> Element.map NestedTransformationsMsg
+
= cartesianCoordinatesBlock : Mark.Custom.Block Model Styling Msg
= cartesianCoordinatesBlock =
= Mark.Custom.block "cartesian-coordinates" cartesianCoordinatesView
@@ -284,6 +312,7 @@ options =
= :: gradientBlock
= :: centeredDotBlock
= :: transformationsBlock
+ :: nestedTransformationsBlock
= :: cartesianCoordinatesBlock
= :: Mark.defaultBlocks
= }index 30da4f4..fa27050 100644
--- a/src/NestedTransformations.elm
+++ b/src/NestedTransformations.elm
@@ -1,4 +1,11 @@
-module Transformations exposing (main)
+module NestedTransformations exposing
+ ( Model
+ , Msg
+ , init
+ , main
+ , ui
+ , update
+ )
=
=import Array exposing (Array)
=import Basics.Extra exposing (..)
@@ -9,6 +16,7 @@ import Dict.Any as Dict exposing (AnyDict)
=import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
+import Element.Font as Font
=import Element.Input as Input
=import Geometry.Svg
=import Html exposing (Html)
@@ -21,18 +29,13 @@ import Svg.Attributes exposing (..)
=
=
=main =
- Browser.element
+ Browser.sandbox
= { init = init
= , view = view
= , update = update
- , subscriptions = subscriptions
= }
=
=
-type alias Flags =
- ()
-
-
=type alias Model =
= AnyDict String Group (Array Transformation)
=
@@ -59,9 +62,9 @@ type GroupMsg
= | SetTransformation Int Transformation
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( Dict.empty Debug.toString
+init : Model
+init =
+ Dict.empty Debug.toString
= |> Dict.insert Pink
= (Array.fromList
= [ Translate 0 0
@@ -76,12 +79,19 @@ init () =
= , Scale 1 1
= ]
= )
- , Cmd.none
- )
=
=
=view : Model -> Html Msg
=view model =
+ Element.layout
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+ (ui model)
+
+
+ui : Model -> Element Msg
+ui model =
= let
= wrapper element =
= Element.column
@@ -148,10 +158,6 @@ view model =
= |> List.singleton
= |> CartesianPlane.graph 300
= |> wrapper
- |> Element.layout
- [ Element.height Element.fill
- , Element.width Element.fill
- ]
=
=
=transformationsUI : List Transformation -> Element GroupMsg
@@ -179,11 +185,12 @@ transformationsUI transformations =
= in
= Element.column
= [ Element.width Element.fill
- , Element.spacing 10
+ , Font.size 12
+ , Element.spacing 4
= ]
= [ Element.row
= [ Element.width Element.fill
- , Element.spacing 10
+ , Element.spacing 2
= ]
= addButtons
= , Element.column
@@ -301,7 +308,7 @@ transformationUI index transformation =
= |> Element.el [ Element.width Element.fill ]
= , Input.button []
= { onPress = Just (DeleteTransformation index)
- , label = Element.text "X"
+ , label = Element.el [] (Element.text "X")
= }
= ]
= , Element.column
@@ -312,7 +319,7 @@ transformationUI index transformation =
= ]
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update (Msg group msg) model =
= let
= transformations =
@@ -344,14 +351,7 @@ update (Msg group msg) model =
= in
= Array.append front back
= in
- ( Dict.insert group transformations model
- , Cmd.none
- )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
- Sub.none
+ Dict.insert group transformations model
=
=
=apply : List Transformation -> StringEmbed polar coordinates program
index b76690a..5dd325d 100644
--- a/index.txt
+++ b/index.txt
@@ -56,6 +56,10 @@ Embedded cartesian coordinates example:
=
=| cartesian-coordinates
=
+Embedded polar coordinates example:
+
+| polar-coordinates
+
=Embeded transformations example:
=
=| transformationsindex 72898e4..0d3eb5a 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -16,6 +16,7 @@ import Line
=import Mark
=import Mark.Custom
=import NestedTransformations
+import PolarCoordinates
=import Result.Extra as Result
=import Transformations
=
@@ -39,6 +40,7 @@ type alias Model =
= , transformations : Transformations.Model
= , nestedTransformations : NestedTransformations.Model
= , cartesianCoordinates : CartesianCoordinates.Model
+ , polarCoordinates : PolarCoordinates.Model
= }
=
=
@@ -48,6 +50,7 @@ type Msg
= | TransformationsMsg Transformations.Msg
= | NestedTransformationsMsg NestedTransformations.Msg
= | CartesianCoordinatesMsg CartesianCoordinates.Msg
+ | PolarCoordinatesMsg PolarCoordinates.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -57,6 +60,7 @@ init flags =
= , transformations = Transformations.init
= , nestedTransformations = NestedTransformations.init
= , cartesianCoordinates = CartesianCoordinates.init
+ , polarCoordinates = PolarCoordinates.init
= }
= , Http.get
= { url = "/index.txt"
@@ -139,6 +143,11 @@ update msg model =
= , Cmd.none
= )
=
+ PolarCoordinatesMsg m ->
+ ( { model | polarCoordinates = PolarCoordinates.update m model.polarCoordinates }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -303,6 +312,25 @@ options =
= , Border.width 2
= ]
= |> Element.map CartesianCoordinatesMsg
+
+ polarCoordinatesBlock : Mark.Custom.Block Model Styling Msg
+ polarCoordinatesBlock =
+ Mark.Custom.block "polar-coordinates" polarCoordinatesView
+
+ polarCoordinatesView : Styling -> Model -> Element Msg
+ polarCoordinatesView style model =
+ model.polarCoordinates
+ |> PolarCoordinates.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+ |> Element.map PolarCoordinatesMsg
= in
= { default
= | blocks =
@@ -314,5 +342,6 @@ options =
= :: transformationsBlock
= :: nestedTransformationsBlock
= :: cartesianCoordinatesBlock
+ :: polarCoordinatesBlock
= :: Mark.defaultBlocks
= }index 7a0d79c..5da8133 100644
--- a/src/PolarCoordinates.elm
+++ b/src/PolarCoordinates.elm
@@ -1,10 +1,8 @@
=module PolarCoordinates exposing
- ( Flags
- , Model
+ ( Model
= , Msg
= , init
= , main
- , subscriptions
= , ui
= , update
= , view
@@ -22,18 +20,13 @@ import Svg.Attributes exposing (..)
=
=
=main =
- Browser.element
+ Browser.sandbox
= { init = init
= , view = view
= , update = update
- , subscriptions = subscriptions
= }
=
=
-type alias Flags =
- ()
-
-
=type alias Model =
= { angle : Float
= , radius : Float
@@ -45,27 +38,18 @@ type Msg
= | SetRadius Float
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( { angle = 0, radius = 0.5 }
- , Cmd.none
- )
+init : Model
+init =
+ { angle = 0, radius = 75 }
=
=
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
=view model =
- let
- wrapper element =
- Element.el
- [ Element.width (Element.maximum 600 Element.fill), Element.centerX ]
- element
- in
- ui model
- |> wrapper
- |> Element.layout
- [ Element.height Element.fill
- , Element.width Element.fill
- ]
+ Element.layout
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+ (ui model)
=
=
=ui : Model -> Element Msg
@@ -86,11 +70,11 @@ ui model =
= ]
= <|
= Element.html <|
- CartesianPlane.graph
+ CartesianPlane.graph 300
= [ circle
= [ cx <| String.fromFloat point.x
= , cy <| String.fromFloat point.y
- , r "0.01"
+ , r "2"
= , fill "magenta"
= ]
= []
@@ -100,16 +84,16 @@ ui model =
= , y1 "0"
= , y2 <| String.fromFloat point.y
= , stroke "magenta"
- , strokeWidth "0.001"
+ , strokeWidth "0.5"
= ]
= []
= , text_
- [ x <| String.fromFloat (point.x + 0.02)
- , y <| String.fromFloat (point.y + 0.01)
- , Svg.Attributes.fontSize "0.03pt"
+ [ x <| String.fromFloat (point.x + 5)
+ , y <| String.fromFloat (point.y + 5)
+ , Svg.Attributes.fontSize "10pt"
= ]
= [ text <|
- Debug.toString ( point.x, point.y )
+ Debug.toString ( round point.x, round point.y )
= ]
= ]
= , Input.slider
@@ -151,7 +135,7 @@ ui model =
= Input.labelBelow [ Element.centerX ] <|
= Element.text ("radius value: " ++ String.fromFloat model.radius)
= , min = 0
- , max = 1
+ , max = 150
= , value = model.radius
= , thumb = Input.defaultThumb
= , step = Just 0.01
@@ -159,19 +143,14 @@ ui model =
= ]
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update msg model =
= case msg of
= SetAngle angle ->
- ( { model | angle = angle }, Cmd.none )
+ { model | angle = angle }
=
= SetRadius radius ->
- ( { model | radius = radius }, Cmd.none )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
- Sub.none
+ { model | radius = radius }
=
=
=cartesian : { angle : Float, radius : Float } -> { x : Float, y : Float }