Merge branch 'Anton-4-fill_expansion'

README.md

@@ -21,36 +21,29 @@ TL;DR this package will change
 ## Usage
 
 ```elm
-import Html exposing (Html)
 import Color
-import TypedSvg exposing (svg, circle)
-import TypedSvg.Attributes exposing (viewBox, cx, cy, r, fill, strokeWidth, stroke)
-import TypedSvg.Types exposing (Fill(..), px)
-
-
-type Msg
-    = NoOp
-
-
-type alias Model =
-    Int
-
-
-view : Model -> Html Msg
-view model =
-    svg
-        [ viewBox 0 0 800 600
-        ]
-        [ circle
-            [ cx (px 150)
-            , cy (px 150)
-            , r (px 30)
-            , fill <| Fill Color.black
-            , strokeWidth (px 2)
-            , stroke <| Color.rgba 90 60 60 0.5
-            ]
-            []
+import Html exposing (Html)
+import TypedSvg exposing (circle, svg)
+import TypedSvg.Attributes exposing (cx, cy, fill, r, stroke, strokeWidth, viewBox)
+import TypedSvg.Types exposing (Paint(..), px)
+import TypedSvg.Core exposing (Svg)
+
+
+myCircle : Svg msg
+myCircle =
+    circle
+        [ cx (px 100)
+        , cy (px 100)
+        , r (px 30)
+        , fill <| Paint Color.blue
+        , strokeWidth (px 2)
+        , stroke <| Paint <| Color.rgba 0.8 0 0 0.5
         ]
+        []
+
+main : Html msg
+main =
+    svg [ viewBox 0 0 800 600 ] [ myCircle ]
 ```
 
 ## Sister Packages

src/Examples/Basic.elm

@@ -1,32 +1,25 @@
-module Examples.Basic exposing (Model, Msg(..), view)
+module Examples.Basic exposing (main)
 
 import Color
 import Html exposing (Html)
 import TypedSvg exposing (circle, svg)
 import TypedSvg.Attributes exposing (cx, cy, fill, r, stroke, strokeWidth, viewBox)
-import TypedSvg.Types exposing (Fill(..), px)
+import TypedSvg.Types exposing (Paint(..), px)
+import TypedSvg.Core exposing (Svg)
 
 
-type Msg
-    = NoOp
-
-
-type alias Model =
-    Int
-
-
-view : Model -> Html Msg
-view model =
-    svg
-        [ viewBox 0 0 800 600
-        ]
-        [ circle
-            [ cx (px 150)
-            , cy (px 150)
-            , r (px 30)
-            , fill <| Fill Color.black
-            , strokeWidth (px 2)
-            , stroke <| Color.rgba 90 60 60 0.5
-            ]
-            []
+myCircle : Svg msg
+myCircle =
+    circle
+        [ cx (px 100)
+        , cy (px 100)
+        , r (px 30)
+        , fill <| Paint Color.blue
+        , strokeWidth (px 2)
+        , stroke <| Paint <| Color.rgba 0.8 0 0 0.5
         ]
+        []
+
+main : Html msg
+main =
+    svg [ viewBox 0 0 800 600 ] [ myCircle ]

src/Examples/GradientsPatterns.elm

@@ -0,0 +1,95 @@
+module Examples.GradientsPatterns exposing (main)
+
+import Color
+import Html exposing (Html)
+import TypedSvg exposing (rect, circle, polygon, svg, linearGradient, radialGradient, pattern, stop, defs)
+import TypedSvg.Attributes exposing (id, fill, stroke, viewBox, stopColor, offset, stopOpacity, x1, y1, x2, y2, cx, cy, fx, fy, r, patternUnits, points)
+import TypedSvg.Attributes.InPx as InPx
+import TypedSvg.Attributes.InPx exposing (height, strokeWidth, width, x, y)
+import TypedSvg.Types exposing (Paint(..), Opacity(..), Length(..), CoordinateSystem(..))
+import TypedSvg.Core exposing (Svg)
+
+
+myDefs : List (Svg msg)
+myDefs =
+  [ linearGradient
+    [ id "linGradientTripHor" ]
+    [ stop [ offset "0%", stopColor "rgb(255, 255, 255)" ] []
+    , stop [ offset "50%", stopColor "rgb(184, 0, 0)"] []
+    , stop [ offset "100%", stopColor "rgb(0,0,0)" ] []
+    ]
+    , linearGradient
+    [ id "linGradientDuoVert"
+    , x1 <| Percent 0.0
+    , y1 <| Percent 0.0
+    , x2 <| Percent 0.0
+    , y2 <| Percent 100.0
+    ]
+    [ stop [ offset "0%", stopColor "#434343" , stopOpacity <| Opacity 1.0 ] []
+    , stop [ offset "100%", stopColor "#000000" , stopOpacity <| Opacity 1.0 ] []
+    ]
+    , radialGradient
+    [ id "radGradient" 
+    , cx <| Percent 50.0
+    , cy <| Percent 50.0
+    , r <| Percent 80.0
+    , fx <| Percent 50.0
+    , fy <| Percent 50.0
+    ]
+    [ stop [ offset "0%", stopColor "rgb(184, 0, 0)" , stopOpacity <| Opacity 1.0 ] []
+    , stop [ offset "100%", stopColor "rgb(0, 0, 0)" , stopOpacity <| Opacity 1.0 ] []
+    ]
+    , pattern
+    [ id "chessPattern"
+    , width 50
+    , height 50
+    , patternUnits CoordinateSystemUserSpaceOnUse]
+    [ rect [ x 0, y 0, width 25, height 25, fill <| Paint <| Color.rgb255 184 0 0 ][]
+    , rect [ x 25, y 0, width 25, height 25, fill <| Paint <| Color.rgb255 25 25 25 ][]
+    , rect [ x 0, y 25, width 25, height 25, fill <| Paint <| Color.rgb255 25 25 25 ][]
+    , rect [ x 25, y 25, width 25, height 25, fill <| Paint <| Color.rgb255 184 0 0 ][]
+    ]
+  ]
+
+myRectangle : Svg msg
+myRectangle =
+        rect
+            [ x 100
+            , y 100
+            , width 150
+            , height 150
+            , fill <| Reference "linGradientTripHor"
+            , strokeWidth 8
+            , stroke <| Reference "linGradientDuoVert"
+            ]
+            []
+
+
+myCircle : Svg msg
+myCircle =
+    circle
+        [ InPx.cx 375
+        , InPx.cy 175
+        , InPx.r 70
+        , fill <| Reference "radGradient"
+        , strokeWidth 8
+        , stroke <| Reference "linGradientDuoVert"
+        ]
+        []
+
+
+myTriangle : Svg msg
+myTriangle =
+        polygon
+            [ points [(500,110), (650,110), (575, 240)]
+            , fill <| Reference "chessPattern"
+            , strokeWidth 8
+            , stroke <| Reference "linGradientDuoVert"
+            ]
+            []
+
+-- <polygon points="0,0 750,0 375,650" fill="url(#pattern-checkers)"/>
+
+main : Html msg
+main =
+    svg [ viewBox 0 0 800 600 ] [ defs [] myDefs, myRectangle, myCircle, myTriangle]

src/Examples/RectangleInPx.elm

@@ -1,34 +1,33 @@
-module Examples.RectangleInPx exposing (Model, Msg(..), view)
+module Examples.RectangleInPx exposing (main)
+
+{-| Using TypedSvg.Attributes.InPx makes it unnecessary to prefix
+each numeric length with the `px` function.
+-}
 
 import Color
 import Html exposing (Html)
 import TypedSvg exposing (rect, svg)
 import TypedSvg.Attributes exposing (fill, stroke, viewBox)
 import TypedSvg.Attributes.InPx exposing (height, strokeWidth, width, x, y)
-import TypedSvg.Types exposing (Fill(..))
-
-
-type Msg
-    = NoOp
-
+import TypedSvg.Types exposing (Paint(..))
+import TypedSvg.Core exposing (Svg)
 
-type alias Model =
-    Int
 
-
-view : Model -> Html Msg
-view model =
-    svg
-        [ viewBox 0 0 800 600
-        ]
-        [ rect
-            [ x 150
-            , y 150
+myRectangle : Svg msg
+myRectangle =
+        rect
+            [ x 100
+            , y 100
             , width 200
             , height 200
-            , fill <| Fill Color.white
+            , fill <| Paint Color.white
             , strokeWidth 2
-            , stroke Color.black
+            , stroke <| Paint Color.black
             ]
             []
-        ]
+
+
+
+main : Html msg
+main =
+    svg [ viewBox 0 0 800 600 ] [ myRectangle ]

src/Examples/SumAnimateTransform.elm

@@ -1,9 +1,9 @@
-module SumAnimateTransform exposing (main)
+module Examples.SumAnimateTransform exposing (main)
 
 import Color
 import Html exposing (Html)
 import TypedSvg exposing (..)
-import TypedSvg.Attributes exposing (..)
+import TypedSvg.Attributes exposing (attributeName, attributeType, animateTransformType, from, from3, to, to3, begin, dur, repeatCount, additive, stroke, fill)
 import TypedSvg.Types exposing (..)
 import TypedSvg.Core exposing (Svg)
 import TypedSvg.Attributes.InPx exposing (x, y, width, height)
@@ -48,8 +48,8 @@ myRectangle =
         , y 10
         , width 40
         , height 20
-        , stroke Color.black
-        , fill FillNone
+        , stroke <| Paint Color.black
+        , fill PaintNone
         ]
         [ myScale
         , myRotate

src/TypedSvg/Attributes.elm

@@ -769,15 +769,15 @@ externalResourcesRequired bool =
 
 
 {-| -}
-fill : Fill -> Attribute msg
+fill : Paint -> Attribute msg
 fill =
-    attribute "fill" << fillToString
+    attribute "fill" << paintToString
 
 
 {-| -}
 noFill : Attribute msg
 noFill =
-    fill FillNone
+    fill PaintNone
 
 
 {-| This attribute specifies the opacity of the color or the content the current
@@ -1944,9 +1944,9 @@ string =
 
 
 {-| -}
-stroke : Color -> Attribute msg
-stroke col =
-    attribute "stroke" (toCssString col)
+stroke : Paint -> Attribute msg
+stroke =
+    attribute "stroke" << paintToString
 
 
 {-| -}

src/TypedSvg/Types.elm

@@ -1,6 +1,6 @@
 module TypedSvg.Types exposing
     ( Accumulate(..), Additive(..), Align(..), AlignmentBaseline(..), AnchorAlignment(..), AnimateTransformType(..), AttributeType(..), BaselineShift(..), BezierAnchorPoint, CalcMode(..), Clip(..), ClipPath(..), ClipRule(..), ClockValue, ColorInterpolation(..), ColorMatrixType(..), ColorProfile(..), CompositeOperator(..), CoordinateSystem(..), Cursor(..), Direction(..), Display(..), DominantBaseline(..), Duration(..), EdgeMode(..), FillRule(..), Filter(..), FloodColor(..), FontSizeAdjust(..), FontStretch(..), FontStyle(..), FontVariant(..), FontWeight(..), FuncType(..), InValue(..), Kerning(..), Length(..), LengthAdjust(..), MarkerCoordinateSystem(..), MeetOrSlice(..), Mode(..), MorphologyOperator(..), Opacity(..), Rendering(..), RepeatCount(..), Restart(..), Scale(..), ShapeRendering(..), TimingValue(..), Transform(..), TurbulenceType(..), YesNo(..)
-    , Fill(..), StrokeLinecap(..), StrokeLinejoin(..), TextRendering(..)
+    , Paint(..), StrokeLinecap(..), StrokeLinejoin(..), TextRendering(..)
     , cm, em, ex, inch, mm, num, pc, percent, pt, px
     -- Lengths
     )
@@ -256,12 +256,6 @@ type FillRule
     | FillRuleEvenOdd
 
 
-{-| -}
-type Fill
-    = Fill Color
-    | FillNone
-
-
 {-| -}
 type Filter
     = FilterNone
@@ -477,6 +471,15 @@ type Opacity
     | OpacityInherit
 
 
+{-| -}
+type Paint
+    = Paint Color
+    | Reference String
+    | ContextFill
+    | ContextStroke
+    | PaintNone
+
+
 {-| -}
 type Rendering
     = RenderingAuto