Week 48 of 2018
Development log of Elm Tree Workshop
24 items
- Embed Transformations example in Markup document
- Embed cartesian coordinates example
- Embed centered dot example
- Embed fill the screen example
- Embed gradient example
- Embed line example
- Embed nested transformations program
- Embed polar coordinates program
- Embed simplest, roestte, and spiral examples
- (Re-) implement title, note and emphasize blocks for markup
- Embed tree example
- Embed view box example
- Unify styles of grid examples
- Fix embedded tree style
- Merge embeded programs with content branch
- Merge embeded programs with content branch
- Create browser window element that wraps ui element in a mock browser window
- Refactor circle in browser window
- Minor improvements to BrowserWindow layout
- Make browser window content not stretch to fill window
- Make only simplest example not fill screen
- Make simplest example display a circle instead of a line
- Use Element.clip instead of overflow CSS property in BorwserWindow
- Use BrowserWindow decoration inside ViewBox example
Embed Transformations example in Markup document
On by
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
On by
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
On by
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
On by
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
On by
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
On by
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
On by
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
On by
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 }Embed simplest, roestte, and spiral examples
On by
index 5dd325d..f789f82 100644
--- a/index.txt
+++ b/index.txt
@@ -36,6 +36,10 @@ Setup the development environment
=
=| counter
=
+Embedded simplest example:
+
+| simplest
+
=Embedded fill the screen example:
=
=| fill-the-screen
@@ -64,8 +68,16 @@ Embeded transformations example:
=
=| transformations
=
-Embeded nested-transformations example:
+Embedded nested-transformations example:
=
=| nested-transformations
=
+Embedded rosette example:
+
+| rosette
+
+Embedded spiral example:
+
+| spiral
+
=Finito!index 0d3eb5a..d450539 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -18,6 +18,9 @@ import Mark.Custom
=import NestedTransformations
=import PolarCoordinates
=import Result.Extra as Result
+import RosetteTypedTransformations
+import Simplest
+import Spiral
=import Transformations
=
=
@@ -187,6 +190,24 @@ options =
= ]
= |> Element.map CounterMsg
=
+ simplestBlock : Mark.Custom.Block Model Styling Msg
+ simplestBlock =
+ Mark.Custom.block "simplest" simplestView
+
+ simplestView : Styling -> Model -> Element Msg
+ simplestView style model =
+ Simplest.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
+ ]
+
= fillTheScreenBlock : Mark.Custom.Block Model Styling Msg
= fillTheScreenBlock =
= Mark.Custom.block "fill-the-screen" fillTheScreenView
@@ -331,10 +352,45 @@ options =
= , Border.width 2
= ]
= |> Element.map PolarCoordinatesMsg
+
+ rosetteBlock : Mark.Custom.Block Model Styling Msg
+ rosetteBlock =
+ Mark.Custom.block "rosette" rosetteView
+
+ rosetteView : Styling -> Model -> Element Msg
+ rosetteView style model =
+ RosetteTypedTransformations.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
+
+ spiralBlock : Mark.Custom.Block Model Styling Msg
+ spiralBlock =
+ Mark.Custom.block "spiral" spiralView
+
+ spiralView : Styling -> Model -> Element Msg
+ spiralView style model =
+ Spiral.ui
+ |> Element.el
+ [ Element.centerX
+ ]
+ |> Element.el
+ [ Element.centerX
+ , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
= in
= { default
= | blocks =
= counterBlock
+ :: simplestBlock
= :: fillTheScreenBlock
= :: lineBlock
= :: gradientBlock
@@ -343,5 +399,7 @@ options =
= :: nestedTransformationsBlock
= :: cartesianCoordinatesBlock
= :: polarCoordinatesBlock
+ :: rosetteBlock
+ :: spiralBlock
= :: Mark.defaultBlocks
= }index dcd20c1..2ae161e 100644
--- a/src/RosetteTypedTransformations.elm
+++ b/src/RosetteTypedTransformations.elm
@@ -1,4 +1,4 @@
-module RosetteTypedTransformations exposing (main)
+module RosetteTypedTransformations exposing (main, ui)
=
=import Element
=import Svg
@@ -10,77 +10,82 @@ 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 "400"
+ , 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"
+ ]
+ [ 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)"
- , transform
- [ Rotate 0
- , Scale 100 1
- ]
+ ]
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 0
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 72
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 72
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 144
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 144
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 216
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 216
+ , Scale 100 1
= ]
- []
- , Svg.line
- [ Svg.Attributes.x2 "1"
- , Svg.Attributes.stroke "url(#blue-pink-gradient)"
- , transform
- [ Rotate 288
- , Scale 100 1
- ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 288
+ , Scale 100 1
= ]
- []
= ]
- )
+ []
+ ]
= )
=
=index 9686d17..ae4d919 100644
--- a/src/Simplest.elm
+++ b/src/Simplest.elm
@@ -1,5 +1,6 @@
-module Simplest exposing (main)
+module Simplest exposing (main, ui)
=
+import Element
=import Svg
=import Svg.Attributes
=
@@ -8,10 +9,15 @@ main =
= Svg.svg [ Svg.Attributes.style "background: pink" ]
= [ Svg.line
= [ Svg.Attributes.x1 "0"
- , Svg.Attributes.x2 "1"
+ , Svg.Attributes.x2 "20"
= , Svg.Attributes.y1 "0"
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke "black"
+ , Svg.Attributes.strokeWidth <| String.fromInt <| 5
= ]
= []
= ]
+
+
+ui =
+ Element.html mainindex f2e2aa0..09c888e 100644
--- a/src/Spiral.elm
+++ b/src/Spiral.elm
@@ -1,4 +1,4 @@
-module Spiral exposing (main)
+module Spiral exposing (main, ui)
=
=import Element
=import Svg
@@ -6,6 +6,14 @@ import Svg.Attributes
=
=
=main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ ui
+
+
+ui =
= let
= defs =
= Svg.defs []
@@ -30,15 +38,12 @@ main =
= ]
= ]
= in
- Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
- (Element.html
- (Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200" ]
- (defs :: spiral 500)
- )
+ Element.html
+ (Svg.svg
+ [ Svg.Attributes.height "400"
+ , Svg.Attributes.viewBox "-100 -100 200 200"
+ ]
+ (defs :: spiral 500)
= )
=
=(Re-) implement title, note and emphasize blocks for markup
On by
Title has subtitles (lines following the first one). Note and emphasize are visually separated from the normal content.
index 1a452ee..67d6710 100644
--- a/index.txt
+++ b/index.txt
@@ -1,3 +1,50 @@
+| title
+ Software Garden
+
+ ⚘
+
+ A functional programming workshop for non-programmers
+
+
+
+| header
+ Before the course begins
+
+| header
+ Setup
+
+| note
+ This setup instructions are based on an assumption that you are using a Mac.
+
+ If you are using Linux or BSD, then you probably know how to install stuff.
+
+ If you are using anything else, then... well, good luck.
+
+ The rest of the instructions should work with any platform.
+
+
+We will need
+
+| list
+ - a text editor (I use Atom)
+ - and the Elm programming language
+
+
+| header
+ Installing Elm
+
+To install the Elm programming language, go to it's website:
+
+| emphasize
+ [elm-lang.org](http://elm-lang.org/)
+
+
+and follow the installation instructions.
+
+
+
+
+
=| header
= To do:
=
@@ -22,22 +69,3 @@ Groups and transformations
= Spiral (recursion)
=
=Tree
-
-
-| header
- Before the course begins
-
-Setup the development environment
-
-| list
- - Elm
- - Node.js
-
-
-| counter
-
-Embeded transformations example:
-
-| transformations
-
-Finito!index b7a1bc1..41b9ce4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -5,6 +5,7 @@ import Counter
=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 Html exposing (Html)
=import Http
@@ -74,7 +75,7 @@ view model =
= |> Element.column
= [ Element.centerX
= , Element.centerY
- , Background.color (Element.rgb 0.7 0 0)
+ , Background.color colors.maroon
= , Element.padding 40
= , Element.spacing 20
= ]
@@ -131,12 +132,80 @@ type alias Options =
= Mark.Options Model Styling Msg
=
=
+colors =
+ { maroon = Element.rgb 0.7 0 0
+ , gray = Element.rgb 0.8 0.8 0.8
+ , pink = Element.rgb 1 0.6 0.6
+ }
+
+
=options : Options
=options =
= let
= default =
= Mark.default
=
+ emphasizeBlock : Mark.Custom.Block Model Styling Msg
+ emphasizeBlock =
+ Mark.Custom.section "emphasize" emphasizeView
+
+ emphasizeView : List (Element Msg) -> Styling -> Model -> Element Msg
+ emphasizeView elements style model =
+ elements
+ |> Element.column
+ [ Element.spacing 30
+ , Font.bold
+ , Font.size 30
+ , Font.center
+ , Element.paddingXY 0 40
+ ]
+
+ titleBlock : Mark.Custom.Block Model Styling Msg
+ titleBlock =
+ Mark.Custom.section "title" titleView
+
+ titleView : List (Element Msg) -> Styling -> Model -> Element Msg
+ titleView elements style model =
+ case elements of
+ title :: subtitles ->
+ let
+ titleElement =
+ Element.el
+ [ Font.center
+ , Font.size 60
+ , Font.extraBold
+ , Element.width Element.fill
+ ]
+ title
+ in
+ Element.column
+ [ Element.spacing 30
+ , Font.bold
+ , Font.size 30
+ , Font.center
+ , Element.paddingXY 0 80
+ ]
+ (titleElement :: subtitles)
+
+ [] ->
+ Element.none
+
+ noteBlock : Mark.Custom.Block Model Styling Msg
+ noteBlock =
+ Mark.Custom.section "note" noteView
+
+ noteView : List (Element Msg) -> Styling -> Model -> Element Msg
+ noteView elements style model =
+ Element.column
+ [ Element.padding 20
+ , Element.spacing 10
+ , Border.width 1
+ , Border.color colors.gray
+ , Border.rounded 5
+ , Font.italic
+ ]
+ elements
+
= counterBlock : Mark.Custom.Block Model Styling Msg
= counterBlock =
= Mark.Custom.block "counter" counterView
@@ -150,7 +219,7 @@ options =
= ]
= |> Element.el
= [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.color colors.pink
= , Border.rounded 5
= , Border.width 2
= ]
@@ -169,7 +238,7 @@ options =
= ]
= |> Element.el
= [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
+ , Border.color colors.pink
= , Border.rounded 5
= , Border.width 2
= ]
@@ -177,7 +246,10 @@ options =
= in
= { default
= | blocks =
- counterBlock
+ titleBlock
+ :: emphasizeBlock
+ :: noteBlock
+ :: counterBlock
= :: transformationsBlock
= :: Mark.defaultBlocks
= }Embed tree example
On by
The embedded example is toggled by clicking on the element
index f789f82..96e0265 100644
--- a/index.txt
+++ b/index.txt
@@ -80,4 +80,8 @@ Embedded spiral example:
=
=| spiral
=
+Embedded tree example:
+
+| tree
+
=Finito!index d450539..689e5cb 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -7,6 +7,7 @@ import Counter
=import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
+import Element.Events
=import Element.Input as Input
=import FillTheScreen
=import Gradient
@@ -22,6 +23,7 @@ import RosetteTypedTransformations
=import Simplest
=import Spiral
=import Transformations
+import Tree
=
=
=main =
@@ -44,6 +46,7 @@ type alias Model =
= , nestedTransformations : NestedTransformations.Model
= , cartesianCoordinates : CartesianCoordinates.Model
= , polarCoordinates : PolarCoordinates.Model
+ , tree : Maybe Tree.Model
= }
=
=
@@ -54,6 +57,8 @@ type Msg
= | NestedTransformationsMsg NestedTransformations.Msg
= | CartesianCoordinatesMsg CartesianCoordinates.Msg
= | PolarCoordinatesMsg PolarCoordinates.Msg
+ | ToggleTree (Maybe Tree.Model)
+ | TreeMsg Tree.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -64,6 +69,9 @@ init flags =
= , nestedTransformations = NestedTransformations.init
= , cartesianCoordinates = CartesianCoordinates.init
= , polarCoordinates = PolarCoordinates.init
+ , tree = Nothing
+
+ --, tree = Tree.init () |> Tuple.first
= }
= , Http.get
= { url = "/index.txt"
@@ -151,10 +159,32 @@ update msg model =
= , Cmd.none
= )
=
+ ToggleTree tree ->
+ ( { model | tree = tree }, Cmd.none )
+
+ TreeMsg m ->
+ case model.tree of
+ Just tree ->
+ Tree.update m tree
+ |> (\( newTree, treeCmd ) ->
+ ( { model | tree = Just newTree }
+ , Cmd.map TreeMsg treeCmd
+ )
+ )
+
+ Nothing ->
+ ( model, Cmd.none )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
- Sub.none
+ case model.tree of
+ Nothing ->
+ Sub.none
+
+ Just tree ->
+ Tree.subscriptions tree
+ |> Sub.map TreeMsg
=
=
=type alias Styling =
@@ -386,6 +416,48 @@ options =
= , Border.rounded 5
= , Border.width 2
= ]
+
+ treeBlock : Mark.Custom.Block Model Styling Msg
+ treeBlock =
+ Mark.Custom.block "tree" treeView
+
+ treeView : Styling -> Model -> Element Msg
+ treeView style model =
+ let
+ content =
+ case model.tree of
+ Nothing ->
+ Element.text "Click Here to Display Tree"
+ |> List.singleton
+ |> Element.paragraph
+ [ Element.centerY ]
+ |> Element.el
+ [ Element.centerX
+ , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.Events.onClick
+ (Tree.init ()
+ |> Tuple.first
+ |> Just
+ |> ToggleTree
+ )
+ ]
+
+ Just tree ->
+ tree
+ |> Tree.ui
+ |> Element.map TreeMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.Events.onClick (ToggleTree Nothing)
+ ]
+ in
+ content
+ |> Element.el
+ [ Border.color (Element.rgb 1 0.6 0.6)
+ , Border.rounded 5
+ , Border.width 2
+ ]
= in
= { default
= | blocks =
@@ -401,5 +473,6 @@ options =
= :: polarCoordinatesBlock
= :: rosetteBlock
= :: spiralBlock
+ :: treeBlock
= :: Mark.defaultBlocks
= }index cde6818..44e7a9a 100644
--- a/src/Tree.elm
+++ b/src/Tree.elm
@@ -1,9 +1,17 @@
-module Tree exposing (main)
+module Tree exposing
+ ( Model
+ , Msg
+ , init
+ , main
+ , subscriptions
+ , ui
+ , update
+ )
=
=import Browser
=import Browser.Events
=import Dict exposing (Dict)
-import Element
+import Element exposing (Element)
=import Html exposing (Html)
=import Json.Decode exposing (Decoder)
=import List.Extra as List
@@ -81,6 +89,15 @@ init () =
=
=view : Model -> Html Msg
=view model =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (ui model)
+
+
+ui : Model -> Element Msg
+ui model =
= let
= gradients : List (Svg Msg)
= gradients =
@@ -123,20 +140,15 @@ view model =
= )
= ]
= in
- Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
- (Element.html <|
- svg
- [ viewBox "-1000 -1000 2000 2000"
- , height "100%"
- , width "100%"
- ]
- [ defs [] gradients
- , tree
- ]
- )
+ Element.html <|
+ svg
+ [ viewBox "-1000 -1000 2000 2000"
+ , height "100%"
+ , width "100%"
+ ]
+ [ defs [] gradients
+ , tree
+ ]
=
=
=update : Msg -> Model -> ( Model, Cmd Msg )Embed view box example
On by
index 96e0265..1a106ac 100644
--- a/index.txt
+++ b/index.txt
@@ -84,4 +84,8 @@ Embedded tree example:
=
=| tree
=
+Embedded view box example:
+
+| view-box
+
=Finito!index 689e5cb..b88bb06 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -24,6 +24,7 @@ import Simplest
=import Spiral
=import Transformations
=import Tree
+import ViewBox
=
=
=main =
@@ -47,6 +48,7 @@ type alias Model =
= , cartesianCoordinates : CartesianCoordinates.Model
= , polarCoordinates : PolarCoordinates.Model
= , tree : Maybe Tree.Model
+ , viewBox : ViewBox.Model
= }
=
=
@@ -59,6 +61,7 @@ type Msg
= | PolarCoordinatesMsg PolarCoordinates.Msg
= | ToggleTree (Maybe Tree.Model)
= | TreeMsg Tree.Msg
+ | ViewBoxMsg ViewBox.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -70,8 +73,7 @@ init flags =
= , cartesianCoordinates = CartesianCoordinates.init
= , polarCoordinates = PolarCoordinates.init
= , tree = Nothing
-
- --, tree = Tree.init () |> Tuple.first
+ , viewBox = ViewBox.init
= }
= , Http.get
= { url = "/index.txt"
@@ -175,6 +177,9 @@ update msg model =
= Nothing ->
= ( model, Cmd.none )
=
+ ViewBoxMsg m ->
+ ( { model | viewBox = ViewBox.update m model.viewBox }, Cmd.none )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -458,6 +463,25 @@ options =
= , Border.rounded 5
= , Border.width 2
= ]
+
+ viewBoxBlock : Mark.Custom.Block Model Styling Msg
+ viewBoxBlock =
+ Mark.Custom.block "view-box" viewBoxView
+
+ viewBoxView : Styling -> Model -> Element Msg
+ viewBoxView style model =
+ model.viewBox
+ |> ViewBox.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 ViewBoxMsg
= in
= { default
= | blocks =
@@ -474,5 +498,6 @@ options =
= :: rosetteBlock
= :: spiralBlock
= :: treeBlock
+ :: viewBoxBlock
= :: Mark.defaultBlocks
= }index de064d5..fadec31 100644
--- a/src/ViewBox.elm
+++ b/src/ViewBox.elm
@@ -1,10 +1,8 @@
=module ViewBox 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 =
= { left : Float
= , top : Float
@@ -47,15 +40,13 @@ type Msg
= | Resize Float Float
=
=
-init : Flags -> ( Model, Cmd Msg )
-init () =
- ( { left = 0
- , top = 0
- , width = 400
- , height = 400
- }
- , Cmd.none
- )
+init : Model
+init =
+ { left = 0
+ , top = 0
+ , width = 400
+ , height = 400
+ }
=
=
=view : Model -> Html.Html Msg
@@ -77,19 +68,14 @@ view model =
= ]
=
=
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> Model
=update msg model =
= case msg of
= Move left top ->
- ( { model | left = left, top = top }, Cmd.none )
+ { model | left = left, top = top }
=
= Resize width height ->
- ( { model | width = width, height = height }, Cmd.none )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
- Sub.none
+ { model | width = width, height = height }
=
=
=ui model =
@@ -107,11 +93,14 @@ ui model =
= , Element.padding 30
= ]
= [ Element.el
- [ Element.height Element.fill
- , Element.width Element.fill
+ [ Element.height <| Element.maximum 500 Element.fill
+ , Element.width <| Element.maximum 500 Element.fill
= ]
= (Element.html <|
- svg [ viewBox "0 0 1000 1000" ]
+ svg
+ [ viewBox "0 0 1000 1000"
+ , Svg.Attributes.style "width: 100%; height: 100%"
+ ]
= [ g [] world
= , rect
= [ x (String.fromFloat model.left)
@@ -126,8 +115,8 @@ ui model =
= ]
= )
= , Element.el
- [ Element.height Element.fill
- , Element.width Element.fill
+ [ Element.height <| Element.maximum 170 Element.fill
+ , Element.width <| Element.maximum 170 Element.fill
= ]
= (Element.html <|
= svg
@@ -136,7 +125,7 @@ ui model =
= |> String.join " "
= |> viewBox
= , preserveAspectRatio "none"
- , Svg.Attributes.style "width: 100; height: 100%"
+ , Svg.Attributes.style "width: 100%; height: 100%"
= ]
= [ g [] world
= , rectUnify styles of grid examples
On by
index d9b0f00..7441ca2 100644
--- a/src/CartesianCoordinates.elm
+++ b/src/CartesianCoordinates.elm
@@ -66,12 +66,14 @@ update msg model =
=ui : Model -> Element Msg
=ui model =
= Element.column
- [ Element.width (Element.maximum 600 Element.fill)
+ [ Element.width Element.fill
= , Element.centerX
- , Element.spacing 20
+ , Element.spacing 30
+ , Element.padding 30
= ]
= [ Element.el
- [ Element.width Element.fill
+ [ Element.height Element.fill
+ , Element.width Element.fill
= ]
= <|
= Element.html <|index b88bb06..c295c9b 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -360,6 +360,7 @@ options =
= |> CartesianCoordinates.ui
= |> Element.el
= [ Element.centerX
+ , Element.width Element.fill
= ]
= |> Element.el
= [ Element.centerX
@@ -379,6 +380,7 @@ options =
= |> PolarCoordinates.ui
= |> Element.el
= [ Element.centerX
+ , Element.width Element.fill
= ]
= |> Element.el
= [ Element.centerXindex fa27050..27129df 100644
--- a/src/NestedTransformations.elm
+++ b/src/NestedTransformations.elm
@@ -101,6 +101,7 @@ ui model =
= ]
= [ Element.el
= [ Element.width Element.fill
+ , Element.paddingEach { top = 0, right = 30, bottom = 0, left = 30 }
= ]
= (Element.html element)
= , Element.row [ Element.width Element.fill ]index 0c519ab..0bcd917 100644
--- a/src/Transformations.elm
+++ b/src/Transformations.elm
@@ -86,14 +86,12 @@ ui model =
= [ Element.width Element.fill
= ]
= (Element.html element)
- , Element.row [ Element.width Element.fill ]
- [ Element.el
- [ Background.color (Element.rgb 1 0.8 0.8)
- , Element.padding 10
- , Element.width Element.fill
- ]
- (transformationsUI transformations)
+ , Element.el
+ [ Background.color (Element.rgb 1 0.8 0.8)
+ , Element.padding 10
+ , Element.width Element.fill
= ]
+ (transformationsUI transformations)
= ]
=
= shape =Fix embedded tree style
On by
index c295c9b..b4f72e0 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -431,16 +431,23 @@ options =
= treeView : Styling -> Model -> Element Msg
= treeView style model =
= let
+ height =
+ 500
+
= content =
= case model.tree of
= Nothing ->
= Element.text "Click Here to Display Tree"
= |> List.singleton
= |> Element.paragraph
- [ Element.centerY ]
+ [ Element.centerY
+ ]
= |> Element.el
= [ Element.centerX
- , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.height <|
+ Element.minimum height <|
+ Element.maximum height <|
+ Element.fill
= , Element.Events.onClick
= (Tree.init ()
= |> Tuple.first
@@ -455,7 +462,11 @@ options =
= |> Element.map TreeMsg
= |> Element.el
= [ Element.centerX
- , Element.height <| Element.minimum 300 <| Element.fill
+ , Element.height <|
+ Element.minimum height <|
+ Element.maximum height <|
+ Element.fill
+ , Element.width Element.fill
= , Element.Events.onClick (ToggleTree Nothing)
= ]
= inMerge embeded programs with content branch
On by
Merge embeded programs with content branch
On by
Create browser window element that wraps ui element in a mock browser window
On by
new file mode 100644
index 0000000..7902e60
--- /dev/null
+++ b/src/BrowserWindow.elm
@@ -0,0 +1,54 @@
+module BrowserWindow exposing (main, window)
+
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Html exposing (Html)
+
+
+main : Html msg
+main =
+ Element.text "Hello World!"
+ |> window
+ |> Element.layout []
+
+
+window : Element msg -> Element msg
+window content =
+ let
+ circle : Char
+ circle =
+ Char.fromCode 9679
+ in
+ Element.column
+ [ Element.width Element.shrink
+ , Element.height Element.shrink
+ , Border.width 1
+ , Border.rounded 6
+ , Border.color <| Element.rgb 0.4 0.4 0.4
+ , Border.shadow { offset = ( 0, 0 ), size = 2, blur = 0, color = Element.rgb 0.35 0.35 0.35 }
+ ]
+ [ Element.row
+ [ Element.height <| Element.px <| 23
+ , Background.color <| Element.rgb 0.27 0.27 0.27
+ , Element.width Element.fill
+ , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
+ , Border.color <| Element.rgb 0.2 0.2 0.2
+ ]
+ ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
+ |> List.map
+ (\( red, green, blue ) ->
+ circle
+ |> String.fromChar
+ |> Element.text
+ |> Element.el
+ [ Element.rgb red green blue |> Font.color
+ , Font.size 35
+ , Element.height <| Element.px 42
+ , Element.moveRight 6
+ ]
+ )
+ )
+ , content
+ ]index b4f72e0..0da1f44 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1,6 +1,7 @@
=module Main exposing (main)
=
=import Browser
+import BrowserWindow
=import CartesianCoordinates
=import CenteredDot
=import Counter
@@ -217,12 +218,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
= |> Element.map CounterMsg
=
= simplestBlock : Mark.Custom.Block Model Styling Msg
@@ -236,12 +232,7 @@ options =
= [ 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
- ]
+ |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling Msg
= fillTheScreenBlock =
@@ -254,12 +245,7 @@ options =
= [ 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
- ]
+ |> BrowserWindow.window
=
= centeredDotBlock : Mark.Custom.Block Model Styling Msg
= centeredDotBlock =
@@ -271,12 +257,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= lineBlock : Mark.Custom.Block Model Styling Msg
= lineBlock =
@@ -288,12 +269,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= gradientBlock : Mark.Custom.Block Model Styling Msg
= gradientBlock =
@@ -305,12 +281,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= transformationsBlock : Mark.Custom.Block Model Styling Msg
= transformationsBlock =
@@ -400,12 +371,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= spiralBlock : Mark.Custom.Block Model Styling Msg
= spiralBlock =
@@ -417,12 +383,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= treeBlock : Mark.Custom.Block Model Styling Msg
= treeBlock =
@@ -471,11 +432,7 @@ options =
= ]
= in
= content
- |> Element.el
- [ Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= viewBoxBlock : Mark.Custom.Block Model Styling Msg
= viewBoxBlock =Refactor circle in browser window
On by
index 7902e60..34177eb 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -17,9 +17,15 @@ main =
=window : Element msg -> Element msg
=window content =
= let
- circle : Char
- circle =
+ circle : Element.Color -> Element msg
+ circle color =
= Char.fromCode 9679
+ |> String.fromChar
+ |> Element.text
+ |> Element.el
+ [ color |> Font.color
+ , Font.size 35
+ ]
= in
= Element.column
= [ Element.width Element.shrink
@@ -39,14 +45,10 @@ window content =
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
= |> List.map
= (\( red, green, blue ) ->
- circle
- |> String.fromChar
- |> Element.text
+ circle (Element.rgb red green blue)
= |> Element.el
- [ Element.rgb red green blue |> Font.color
- , Font.size 35
- , Element.height <| Element.px 42
- , Element.moveRight 6
+ [ Element.moveRight 6
+ , Element.moveUp 3
= ]
= )
= )Minor improvements to BrowserWindow layout
On by
index 34177eb..161f379 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -5,6 +5,7 @@ import Element.Background as Background
=import Element.Border as Border
=import Element.Font as Font
=import Html exposing (Html)
+import Html.Attributes
=
=
=main : Html msg
@@ -25,32 +26,49 @@ window content =
= |> Element.el
= [ color |> Font.color
= , Font.size 35
+ , Element.width (Element.px 20)
+ , Element.height (Element.px 35)
+ , Font.center
= ]
= in
= Element.column
= [ Element.width Element.shrink
= , Element.height Element.shrink
- , Border.width 1
+ , Border.width 2
= , Border.rounded 6
- , Border.color <| Element.rgb 0.4 0.4 0.4
- , Border.shadow { offset = ( 0, 0 ), size = 2, blur = 0, color = Element.rgb 0.35 0.35 0.35 }
+ , Border.color <| Element.rgb 0.27 0.27 0.27
+ , Background.color <| Element.rgb 0.27 0.27 0.27
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23
- , Background.color <| Element.rgb 0.27 0.27 0.27
= , Element.width Element.fill
= , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
= , Border.color <| Element.rgb 0.2 0.2 0.2
+ , Border.roundEach
+ { topLeft = 5
+ , topRight = 5
+ , bottomLeft = 0
+ , bottomRight = 0
+ }
+ , Element.paddingXY 10 15
= ]
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
= |> List.map
= (\( red, green, blue ) ->
= circle (Element.rgb red green blue)
- |> Element.el
- [ Element.moveRight 6
- , Element.moveUp 3
- ]
= )
= )
- , content
+ , Element.el
+ [ Background.color <| Element.rgb 1 1 1
+ , Element.width Element.fill
+ , Element.height Element.fill
+ , Border.roundEach
+ { topLeft = 0
+ , topRight = 0
+ , bottomLeft = 5
+ , bottomRight = 5
+ }
+ , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ ]
+ content
= ]Make browser window content not stretch to fill window
On by
index 161f379..257c30b 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -38,18 +38,13 @@ window content =
= , Border.rounded 6
= , Border.color <| Element.rgb 0.27 0.27 0.27
= , Background.color <| Element.rgb 0.27 0.27 0.27
+ , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23
= , Element.width Element.fill
= , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
= , Border.color <| Element.rgb 0.2 0.2 0.2
- , Border.roundEach
- { topLeft = 5
- , topRight = 5
- , bottomLeft = 0
- , bottomRight = 0
- }
= , Element.paddingXY 10 15
= ]
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
@@ -59,16 +54,14 @@ window content =
= )
= )
= , Element.el
- [ Background.color <| Element.rgb 1 1 1
+ [ Element.width Element.fill
= , Element.width Element.fill
- , Element.height Element.fill
- , Border.roundEach
- { topLeft = 0
- , topRight = 0
- , bottomLeft = 5
- , bottomRight = 5
- }
- , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ , Background.color <| Element.rgb 1 1 1
= ]
- content
+ (Element.el
+ [ Element.width Element.shrink
+ , Element.height Element.shrink
+ ]
+ content
+ )
= ]index 0da1f44..1edee6f 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -118,9 +118,7 @@ view model =
= |> Element.text
= in
= Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
+ []
= content
=
=
@@ -228,10 +226,6 @@ options =
= simplestView : Styling -> Model -> Element Msg
= simplestView style model =
= Simplest.ui
- |> Element.el
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
= |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling MsgMake only simplest example not fill screen
On by
index 257c30b..d3b8508 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -58,10 +58,5 @@ window content =
= , Element.width Element.fill
= , Background.color <| Element.rgb 1 1 1
= ]
- (Element.el
- [ Element.width Element.shrink
- , Element.height Element.shrink
- ]
- content
- )
+ content
= ]index 1edee6f..0591a0c 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -226,6 +226,7 @@ options =
= simplestView : Styling -> Model -> Element Msg
= simplestView style model =
= Simplest.ui
+ |> Element.el []
= |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling MsgMake simplest example display a circle instead of a line
On by
index ae4d919..27930cc 100644
--- a/src/Simplest.elm
+++ b/src/Simplest.elm
@@ -6,14 +6,12 @@ import Svg.Attributes
=
=
=main =
- Svg.svg [ Svg.Attributes.style "background: pink" ]
- [ Svg.line
- [ Svg.Attributes.x1 "0"
- , Svg.Attributes.x2 "20"
- , Svg.Attributes.y1 "0"
- , Svg.Attributes.y2 "0"
- , Svg.Attributes.stroke "black"
- , Svg.Attributes.strokeWidth <| String.fromInt <| 5
+ 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"
= ]
= []
= ]Use Element.clip instead of overflow CSS property in BorwserWindow
On by
index d3b8508..2714ed3 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -5,7 +5,6 @@ import Element.Background as Background
=import Element.Border as Border
=import Element.Font as Font
=import Html exposing (Html)
-import Html.Attributes
=
=
=main : Html msg
@@ -38,7 +37,7 @@ window content =
= , Border.rounded 6
= , Border.color <| Element.rgb 0.27 0.27 0.27
= , Background.color <| Element.rgb 0.27 0.27 0.27
- , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ , Element.clip
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23Use BrowserWindow decoration inside ViewBox example
On by
index fadec31..5de8663 100644
--- a/src/ViewBox.elm
+++ b/src/ViewBox.elm
@@ -9,6 +9,7 @@ module ViewBox exposing
= )
=
=import Browser
+import BrowserWindow
=import CartesianPlane exposing (graph)
=import Element
=import Element.Background as Background
@@ -114,32 +115,32 @@ ui model =
= []
= ]
= )
- , Element.el
- [ Element.height <| Element.maximum 170 Element.fill
- , Element.width <| Element.maximum 170 Element.fill
+ , svg
+ [ [ model.left, model.top, model.width, model.height ]
+ |> List.map String.fromFloat
+ |> String.join " "
+ |> viewBox
+ , preserveAspectRatio "none"
+ , Svg.Attributes.style "width: 100%; height: 100%"
= ]
- (Element.html <|
- svg
- [ [ model.left, model.top, model.width, model.height ]
- |> List.map String.fromFloat
- |> String.join " "
- |> viewBox
- , preserveAspectRatio "none"
- , Svg.Attributes.style "width: 100%; height: 100%"
- ]
- [ g [] world
- , rect
- [ x (String.fromFloat model.left)
- , y (String.fromFloat model.top)
- , width (String.fromFloat model.width)
- , height (String.fromFloat model.height)
- , opacity "0.3"
- , stroke "white"
- , fill "pink"
- ]
- []
- ]
- )
+ [ g [] world
+ , rect
+ [ x (String.fromFloat model.left)
+ , y (String.fromFloat model.top)
+ , width (String.fromFloat model.width)
+ , height (String.fromFloat model.height)
+ , opacity "0.3"
+ , stroke "white"
+ , fill "pink"
+ ]
+ []
+ ]
+ |> Element.html
+ |> BrowserWindow.window
+ |> Element.el
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
= ]
= , Input.slider
= [ Element.behindContent