Add sketchy transformation

elm.json

@@ -9,7 +9,8 @@
         "Collage.Render",
         "Collage.Events",
         "Collage.Layout",
-        "Collage.Text"
+        "Collage.Text",
+        "Collage.Sketchy"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {

examples/Axis.elm

@@ -1,14 +1,22 @@
 module Axis exposing (main)
 
+import Example
 import Collage exposing (..)
-import Collage.Render exposing (..)
 import Collage.Text exposing (Text, fromString)
 import Color exposing (..)
 import Html exposing (Html)
 
 
-main : Html msg
+main : Platform.Program () (Example.Model () (Collage ())) (Example.Msg ())
 main =
+    Example.example
+        { init = collage
+        , update = (\_ _ -> collage)
+        , render = (\_ -> collage)
+        , view = identity
+        }
+
+collage =
   let
     up =
       triangle 10
@@ -43,4 +51,3 @@ main =
     , box
     , ellipse 20 40 |> filled (uniform red) |> shift ( 50, 50 )
     ]
-    |> svg

examples/Composition.elm

@@ -1,14 +1,11 @@
 module Composition exposing (main)
 
-import Browser
 import Collage exposing (..)
 import Collage.Events exposing (onClick)
 import Collage.Layout exposing (..)
-import Collage.Render exposing (svg)
 import Collage.Text exposing (fromString)
 import Color exposing (..)
-import Html exposing (Html)
-
+import Example
 
 
 -- Model -----------------------------------------------------------------------
@@ -18,22 +15,19 @@ type alias Model =
   { active : Bool }
 
 
-init : Model
-init = { active = False }
-
-
 
 -- Update ----------------------------------------------------------------------
 
 
 type Msg
-  = Switch
+    = Switch
 
 
 update : Msg -> Model -> Model
 update msg model =
   case msg of
-    Switch -> { model | active = not model.active }
+    Switch ->
+        { model | active = not model.active }
 
 
 
@@ -59,12 +53,12 @@ txt =
 -- Shapes --
 
 
-elps : Model -> Collage Msg
-elps model =
+elps : Bool -> Collage Msg
+elps active =
   ellipse 100 50
     |> styled
         ( uniform <|
-            if model.active then
+            if active then
               lightPurple
             else
               lightBlue
@@ -105,9 +99,7 @@ alignments =
 
 -- Main ------------------------------------------------------------------------
 
-
-view : Model -> Html Msg
-view model =
+render model =
   vertical
     [ horizontal
         [ rect
@@ -118,11 +110,15 @@ view model =
             |> center
         , debug penta
         ]
-    , stack [ showEnvelope txt, elps model ]
+    , stack [ showEnvelope txt, elps model.active ]
     ]
-    |> debug
-    |> svg
 
 
-main : Program () Model Msg
-main = Browser.sandbox { init = init, view = view, update = update }
+main : Platform.Program () (Example.Model Msg Model) (Example.Msg Msg)
+main =
+    Example.example
+        { init = Model False
+        , update = update
+        , render = render
+        , view = identity
+        }

examples/Dimensions.elm

@@ -1,8 +1,8 @@
 module Dimensions exposing (diamond, main)
 
+import Example
 import Collage exposing (..)
 import Collage.Layout exposing (..)
-import Collage.Render exposing (..)
 import Collage.Text as Text exposing (Shape(..), Text, fromString)
 import Color exposing (Color)
 import Html exposing (Html)
@@ -42,11 +42,20 @@ diamond label =
     ]
 
 
-main : Html msg
-main =
+collage =
   vertical
     [ diamond "a very long piece of text"
     , gap
     , diamond "short text"
     ]
-    |> svg
+
+
+main : Platform.Program () (Example.Model () (Collage ())) (Example.Msg ())
+main =
+    Example.example
+        { init = collage
+        , update = (\_ _ -> collage)
+        , render = (\_ -> collage)
+        , view = identity
+        }
+

examples/Embedding.elm

@@ -14,7 +14,7 @@ main =
         [ Html.button []
             [ text "Hello Html!" ]
         ]
-        |> html ( 100, 100 )
+        |> html ( 100, 100 ) []
     , rectangle 100 100
         |> filled (uniform Color.lightGreen)
     ]

examples/Example.elm

@@ -0,0 +1,103 @@
+module Example exposing (Model, Msg, example)
+
+import Browser
+import Collage exposing (..)
+import Collage.Render exposing (svg)
+import Collage.Sketchy as Sketchy exposing (sketchy)
+import Html exposing (Html)
+import Html.Attributes
+import Html.Events
+
+
+type alias Config msg model =
+    { init : model
+    , update : msg -> model -> model
+    , render : model -> Collage msg
+    , view : Html msg -> Html msg
+    }
+
+
+type Msg childMsg
+    = ClickedNormal
+    | ClickedSketchy
+    | ChildMsg childMsg
+
+
+type Renderer
+    = Normal
+    | Sketchy
+
+
+type alias Model childMsg childModel =
+    { collage : Collage childMsg
+    , renderer : Renderer
+    , model : childModel
+    , sketchyConfig : Sketchy.Config
+    }
+
+
+init : (childModel -> Collage childMsg) -> childModel -> ( Model childMsg childModel, Cmd (Msg childMsg) )
+init render child =
+    let
+        model =
+            Model (render child) Normal child Sketchy.defaultConfig
+    in
+    ( model, Cmd.none )
+
+
+update : Config childMsg childModel -> Msg childMsg -> Model childMsg childModel -> ( Model childMsg childModel, Cmd (Msg childMsg) )
+update config msg model =
+    let
+        render m =
+            case m.renderer of
+                Sketchy ->
+                    ( { m | collage = sketchy m.sketchyConfig (config.render m.model) }
+                    , Cmd.none
+                    )
+
+                Normal ->
+                    ( { m | collage = config.render m.model }
+                    , Cmd.none
+                    )
+    in
+    case msg of
+        ClickedNormal ->
+            { model | renderer = Normal }
+                |> render
+
+        ClickedSketchy ->
+            { model | renderer = Sketchy, sketchyConfig = Sketchy.nextSeed model.sketchyConfig }
+                |> render
+
+        ChildMsg cMsg ->
+            { model | model = config.update cMsg model.model }
+                |> render
+
+
+example : Config childMsg childModel -> Platform.Program flags (Model childMsg childModel) (Msg childMsg)
+example config =
+    Browser.element
+        { init = \_ -> init config.render config.init
+        , update = update config
+        , subscriptions = \_ -> Sub.none
+        , view = view config.view
+        }
+
+
+button : String -> Msg childMsg -> Html (Msg childMsg)
+button name msg =
+    Html.button [ Html.Events.onClick msg ] [ Html.text name ]
+
+
+view : (Html childMsg -> Html childMsg) -> Model childMsg childModel -> Html (Msg childMsg)
+view childView model =
+    Html.div []
+        [ Html.div [ Html.Attributes.style "margin-bottom" "10px" ]
+            [ button "Normal" ClickedNormal
+            , button "Sketchy" ClickedSketchy
+            ]
+        , model.collage
+            |> svg
+            |> childView
+            |> Html.map ChildMsg
+        ]