diff --git a/README.md b/README.md index 74addd9..84fc298 100644 --- a/README.md +++ b/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 diff --git a/src/Examples/Basic.elm b/src/Examples/Basic.elm index d246afb..1f9abeb 100644 --- a/src/Examples/Basic.elm +++ b/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 ] \ No newline at end of file diff --git a/src/Examples/GradientsPatterns.elm b/src/Examples/GradientsPatterns.elm new file mode 100644 index 0000000..bfaecd8 --- /dev/null +++ b/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" + ] + [] + +-- + +main : Html msg +main = + svg [ viewBox 0 0 800 600 ] [ defs [] myDefs, myRectangle, myCircle, myTriangle] \ No newline at end of file diff --git a/src/Examples/RectangleInPx.elm b/src/Examples/RectangleInPx.elm index f8f6efb..f9a716a 100644 --- a/src/Examples/RectangleInPx.elm +++ b/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 ] diff --git a/src/Examples/SumAnimateTransform.elm b/src/Examples/SumAnimateTransform.elm index dd0f85a..8234d5c 100644 --- a/src/Examples/SumAnimateTransform.elm +++ b/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 diff --git a/src/TypedSvg/Attributes.elm b/src/TypedSvg/Attributes.elm index 07416cb..d47b823 100644 --- a/src/TypedSvg/Attributes.elm +++ b/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 {-| -} diff --git a/src/TypedSvg/Types.elm b/src/TypedSvg/Types.elm index 8545c4e..2c29059 100644 --- a/src/TypedSvg/Types.elm +++ b/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 diff --git a/src/TypedSvg/TypesToStrings.elm b/src/TypedSvg/TypesToStrings.elm index f3609b0..b79bb4a 100644 --- a/src/TypedSvg/TypesToStrings.elm +++ b/src/TypedSvg/TypesToStrings.elm @@ -13,11 +13,11 @@ module TypedSvg.TypesToStrings exposing , fontVariantToString, fontWeightToString, funcTypeToString, inValueToString , kerningToString, lengthAdjustToString, lengthToString , markerCoordinateSystemToString, meetOrSliceToString, modeToString - , morphologyOperatorToString, opacityToString + , morphologyOperatorToString, opacityToString, paintToString , renderingToString, repeatCountToString, restartToString, scaleToString , shapeRenderingToString, timingValueAsString, transformToString , turbulenceTypeToString, yesNoToString - , fillToString, strokeLinecapToString, strokeLinejoinToString, textRenderingToString + , strokeLinecapToString, strokeLinejoinToString, textRenderingToString ) {-| @@ -571,16 +571,6 @@ filterToString f = funcIRI -fillToString : Fill -> String -fillToString fill = - case fill of - Fill color -> - toCssString color - - FillNone -> - "none" - - floodColorToString : FloodColor -> String floodColorToString floodColor = case floodColor of @@ -867,6 +857,23 @@ opacityToString opacity = "inherit" +paintToString : Paint -> String +paintToString paint = + case paint of + Paint color -> + toCssString color + + Reference string -> + String.concat ["url(#", string,")"] + + ContextFill -> + "context-fill" + + ContextStroke -> + "context-stroke" + PaintNone -> + "none" + renderingToString : Rendering -> String renderingToString rendering = case rendering of