MacCASOutreach / graphicsvg / GraphicSVG

A library for creating SVG graphics in a way that is compatible with Elm's old Graphics library. Also includes built-in functions for creating games and other applications including keyboard presses and mouse movements.

Basic Types


type alias Stencil =
Secret.Stencil

A filled, outlined, or filled and outlined object that can be drawn to the screen using collage.


type alias Shape userMsg =
Secret.Shape userMsg

A primitive template representing the shape you wish to draw. This must be turned into a Shape before being drawn to the screen with collage (see below).


type Collage userMsg
    = Collage Basics.Float Basics.Float (List (Shape userMsg))

The Collage type represents the drawable surface of the window which contains a (x, y) pair of horizontal and vertical dimensions (arbitrary units, not necessarily in pixels) to which the drawing surface will be scaled, and the `List' of Shapes to be drawn on the drawing surface.


type alias GraphicSVG userMsg =
Collage userMsg

The GraphicSVG type alias represents the drawable surface of the window.

This type is only used to define a type signature for a user defined view as follows:

view : GraphicSVG.GraphicSVG userMsg

for use with graphicsApp and as follows:

view : Model -> GraphicSVG.GraphicSVG MyMsg

for use with notificationsApp, gameApp and App.

These assume that Model is the name of the user model type alias and MyMsg is the name of the user message type. Simply substitute the names actually used for these labels.

THIS IS DEPRECIATED AND ONLY KEPT FOR COMPATIBILITY WITH THE PREVIOUS VERSION; Use "Collage userMsg" instead of "GraphicSVG userMsg", as they are identical except in name.

Rendering To Screen

collage : Basics.Float -> Basics.Float -> List (Shape userMsg) -> Collage userMsg

Creates a blank canvas on which you can draw. Takes a width, height and a list of Shapes. Use this in your view functions in the three types of Apps above:

collage 500 500
    [
        circle 10 |> filled red
    ]

mapCollage : (a -> b) -> Collage a -> Collage b

To apply the function over all the shapes in the given Collage using the map function. (Ask if you don't know what this means.)

App


type alias App flags userModel userMsg =
Platform.Program flags ( userModel
, HiddenModel ) (Msg userMsg
}

This type alias is only used as a target for a user main type signature to make the type signature more clear and concise when main calls app:

main : App Flags Model Msg
main =
    app Tick
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        , onUrlRequest = onUrlRequest
        , onUrlChange = onUrlChange
        }

where Tick is a message handler called once per browser window update, Flags is the type alias (or type) of the flags input from JavaScript Model is the type alias of the user persistent model, and Msg is the name of the user message type; if other names are used, they can just be substituted for these names.

Note that "type alias" could also be an ordinary "type" in all case, just that the syntax for producing a new type is not as clean as using a type alias for a record.

app : { init : flags -> Url -> Browser.Navigation.Key -> ( userModel, Platform.Cmd.Cmd userMsg ), update : userMsg -> userModel -> ( userModel, Platform.Cmd.Cmd userMsg ), view : userModel -> { title : String, body : Collage userMsg }, subscriptions : userModel -> Platform.Sub.Sub userMsg, onUrlRequest : Browser.UrlRequest -> userMsg, onUrlChange : Url -> userMsg } -> App flags userModel userMsg

Advanced Function Warning! app takes one parameter of its own type of the form:

{
  init = \flags url key -> (model, cmd)
, view = \model -> { title = "Your Title goes here",
                   , body = view model
                   }
, update = \userMsg userModel -> ( userModel, Cmd userMsg )
, subscriptions = \userModel -> Sub userMsg
, onUrlRequest = \urlRequest -> userMsg
, onUrlChange = \url -> userMsg
}

This matches the Elm architecture and is analogous to Browser.application.

EllieApp


type alias EllieApp flags userModel userMsg =
Platform.Program flags ( userModel
, HiddenModel ) (Msg userMsg
}

This type alias is only used as a target for a user main type signature to make the type signature more clear and concise when main calls ellieApp:

main : EllieApp Flags Model Msg
main =
    ellieApp Tick
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

where Tick is a message handler called once per browser window update, Flags is the type alias (or type) of the flags input from JavaScript Model is the type alias of the user persistent model, and Msg is the name of the user message type; if other names are used, they can just be substituted for these names.

Note that "type alias" could also be an ordinary "type" in all case, just that the syntax for producing a new type is not as clean as using a type alias for a record.

ellieApp : { init : flags -> ( userModel, Platform.Cmd.Cmd userMsg ), update : userMsg -> userModel -> ( userModel, Platform.Cmd.Cmd userMsg ), view : userModel -> { title : String, body : Collage userMsg }, subscriptions : userModel -> Platform.Sub.Sub userMsg } -> EllieApp flags userModel userMsg

Advanced Function Warning! ellieApp takes one parameter of its own type of the form:

{
  init = \flags url key -> (model, cmd)
, view = \model -> { title = "Your Title goes here",
                   , body = view model
                   }
, update = \userMsg userModel -> ( userModel, Cmd userMsg )
, subscriptions = \userModel -> Sub userMsg
}

This matches the Elm architecture and is analogous to Browser.document. It is called ellieApp because this version is compatible with the online Elm IDE Ellie.

Stencils

line : ( Basics.Float, Basics.Float ) -> ( Basics.Float, Basics.Float ) -> Stencil

Create a line from a point to a point. Use outlined to convert to a viewable Shape.

polygon : List ( Basics.Float, Basics.Float ) -> Stencil

Create a closed shape given a list of points. Can use outlined or filled to convert to a Shape.

openPolygon : List ( Basics.Float, Basics.Float ) -> Stencil

Create an open shape given a list of points. Unlike with polygon, the first and last points will not join up automatically. Can use outlined or filled to convert to a Shape.

ngon : Basics.Int -> Basics.Float -> Stencil

Create a regular polygon with a given number of sides and radius. Examples:

ngon 3 50 -- triangle

ngon 5 50 -- pentagon

ngon 8 50 -- octogon

triangle : Basics.Float -> Stencil

Synonym for ngon 3. Creates a triangle with a given size.

rightTriangle : Basics.Float -> Basics.Float -> Stencil

Creates a right-angled triangle with a given base and height.

isosceles : Basics.Float -> Basics.Float -> Stencil

Creates an isosceles triangle with a given base and height.

sideAngleSide : Basics.Float -> Basics.Float -> Basics.Float -> Stencil

Creates a triangle given two side lengths and the angle between them.

For example, sideAngleSide 30 (degrees 45) 50 creates a triangle with side lengths 30 and 50 with an angle of 45 degrees between them.

square : Basics.Float -> Stencil

Creates a square with a given side length. (Synonym for rect s s)

rect : Basics.Float -> Basics.Float -> Stencil

Creates a rectangle with a given width and height.

rectangle : Basics.Float -> Basics.Float -> Stencil

Synonym for rect.

roundedRect : Basics.Float -> Basics.Float -> Basics.Float -> Stencil

Creates a rectangle with a given width, height, and circular rounded corners with the given radius.

circle : Basics.Float -> Stencil

Creates a circle with a given radius.

oval : Basics.Float -> Basics.Float -> Stencil

Creates an oval with a given width and height.

wedge : Basics.Float -> Basics.Float -> Stencil

Creates a wedge with a given radius, and a given fraction of a circle.

wedge 50 0.5 -- semi-circle

wedge 50 0.25 -- quarter-circle

wedge 50 0.75 -- three-quarter circle

Creating Shapes from Stencils

filled : Color -> Stencil -> Shape userMsg

Fill a Stencil with a Color, creating a Shape; Note that any Stencil converted to a Shape this way can be made transparent (for instance by using the blank Color) but will not be "click-through", meaning that the body will catch any attached notifications and not let them through to any visible Shape(s) revealed beneath them.

circle 10
    |> filled red

outlined : LineType -> Color -> Stencil -> Shape userMsg

Outline a Stencil with a LineType and Color, creating a Shape; Note that this is the only way to convert a Stencil into a Shape that is "click-through" as if the body is not just transparent but doesn't exist at all. It works for all Stencil's except for Text which can never be made "click-through" due to a permanent transparent background area that cannot be disabled.

circle 10
    |> outlined (solid 5) red

repaint : Color -> Shape userMsg -> Shape userMsg

Repaint an already-filled Shape. This is helpful for repainting every Shape inside a group as well.

Repaints the outline the same color as the body of the shape including the outline, if used; Note that this can repaint with a transparent Color (for instance, the blank Color) but will never have the ability to be "click-through" so that it will always block (or catch) notifications to covered Shape(s) revealed beneath.

group
    [ circle 10
        |> filled orange
    , rect 10 40
        |> filled blue
    ]
    |> repaint green

addOutline : LineType -> Color -> Shape userMsg -> Shape userMsg

Add an outline to an already-filled Shape.

When applied to Group's including Shape's that have had union applied to them, the outline will have half the expected stroke width only outside the Shape's and for Shape's with clip or subtract applied to them, the half width stroke will be interior to the composite shapes displayed.

The limitation is that when displaying "clip's" or "subtract's" containing "Group's", the outline for the "Group's" won't be visibile at all (less common), nor will the outline's for "clip's" or "subtract's" inside "Group's" be visible (more common); also, the outline for the clipping or subtraction pattern may not be as expected when the pattern is a "Group" as it won't appear at all in a "clip".

In these cases the workaround is just as before this was made available, to build up the outlines desired using combinations of other shapes such as curves, clipped or subtracted shapes, convential pre-applied outlines, etc.

Note that when applied to Group(s), Clip(s), and AlphaMask(s) (from subtracts), the body colour may still be transparent so that Shape(s) can be revealed beneath, but the bodies are not "click-through" so that notifications can be passed through to them, and the transparent bodies can still capture notifications enabled on the resulting Shape(s).

circle 10
    |> filled red
    |> addOutline (solid 5) white

rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color

Define a colour given its red, green and blue components.

rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

Define a colour given its red, green, blue and alpha components. Alpha is a decimal number (Float) from 0 to 1 representing the level of transparency.

hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color

Define a colour given its hue, saturation and light components.

hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

Define a colour given its hue, saturation, light and alpha components. Alpha is a decimal number (Float) from 0 to 1 representing the level of transparency.

Grouping Shapes

group : List (Shape userMsg) -> Shape userMsg

Combine any number of Shape types into one Shape that can be transformed (moved, rotated, scaled, etc) as one Shape.

Rendering HTML

This feature is still very much experimental. Cross-platform support is not guaranteed and weird things can happen.

html : Basics.Float -> Basics.Float -> Html userMsg -> Shape userMsg

Display HTML inside an SVG foreignObject.

Curves


type alias Pull =
Secret.Pull

To make it easier to read the code defining a curve, and to make sure we always use the right number of curve points and pull points (which is one more curve point than pull points), we define a special Pull type, whose first point is the point we pull towards, and second point is the end point for this curve segments.

curve : ( Basics.Float, Basics.Float ) -> List Pull -> Stencil

Creates a curve starting at a point, pulled towards a point, ending at a third point. For example,

curve (0,0) [Pull (0,10) (0,20)]

gives a curve starting at (0,0), pulled towards (0,10) and ending at (0,20).

Think about curves as what you get when you take a bunch of bendy sticks with their ends glued down to a board, and then pulling each stick towards another point. You always need an initial point and at least one Pull, but you can add as many Pulls as you want to add additional curve segments, but each curve segment can only bend one way, since it is pulled in one direction.

curveHelper : Shape userMsg -> Shape userMsg

Apply to a curve or group of curves in order to view their start points, end points and Pull points. Helpful while perfecting curves.

curve (0,0) [Pull (0,10) (0,20)]
    |> curveHelper

Line Styles


type alias LineType =
Secret.LineType

The LineType type is used to define the appearance of an outline for a Stencil. LineType also defines the appearence of line and curve.

noline : () -> LineType

Define aLineType that doesn't exist, doesn't appear.

solid : Basics.Float -> LineType

Define a solid LineType with the given width.

dotted : Basics.Float -> LineType

Define a dotted LineType with the given width.

dashed : Basics.Float -> LineType

Define a dashed LineType with the given width. Dashes are short line segments, versus dots which are theoretically points, but may be drawn with very short line segments.

longdash : Basics.Float -> LineType

Define a dashed LineType with the given width, where the dashes are longer than normal.

dotdash : Basics.Float -> LineType

Define a LineType with the given width, including alternating dots and dashes.

custom : List ( Basics.Float, Basics.Float ) -> Basics.Float -> LineType

A custom line defined by a list of (on,off):

custom [ ( 10, 5 ) ] 5 -- a line with dashes 10 long and spaces 5 long

custom [ ( 10, 5 ), ( 20, 5 ) ] -- on for 10, off 5, on 20, off 5

Text

text : String -> Stencil

Creates a text Stencil. You can change this Stencil using the text helper functions. Note that |> filled ... or |> outlined ... must go at the end of the text helper functions (ie note that all these functions have type Stencil -> Stencil). For example,

text "Hello World"
    |> fixedwidth
    |> bold
    |> size 14
    |> filled black

size : Basics.Float -> Stencil -> Stencil

Apply to a text Stencil to change the font size of the text.

The size has a unit called "points", which depends on the size and type of screen used, but try 12 to start.

bold : Stencil -> Stencil

Apply to a text Stencil to make the text bold.

italic : Stencil -> Stencil

Apply to a text Stencil to make the text italicized (slanted).

underline : Stencil -> Stencil

Apply to a text Stencil to underline the text.

strikethrough : Stencil -> Stencil

Apply to a text Stencil to put a line through the centre of the text.

centered : Stencil -> Stencil

Apply to a text Stencil to centre the text.

alignLeft : Stencil -> Stencil

Apply to a text Stencil to left-align the text.

alignRight : Stencil -> Stencil

Apply to a text Stencil to right-align the text.

selectable : Stencil -> Stencil

Apply to a text Stencil to make the text selectable (so users can copy your text and paste it elsewhere).

sansserif : Stencil -> Stencil

Apply to a text Stencil to render the text with a Sans Serif font (ie one without thinner and thicker bits).

serif : Stencil -> Stencil

Apply to a text Stencil to render the text with a Serif font (ie one with thinner and thicker bits).

fixedwidth : Stencil -> Stencil

Apply to a text Stencil to render the text Stencil with a font in which every character has the same width. This will mean that the letters line up from line to line which is important in programming languages like Elm.

customFont : String -> Stencil -> Stencil

Apply to a text Stencil to render the text with a font of your choosing by specifying its name in a String.

Use this sparingly as support for each font will vary across browsers and devices.

Transformations

move : ( Basics.Float, Basics.Float ) -> Shape userMsg -> Shape userMsg

Move a Shape by a number of units along the x-axis and y-axis.

rotate : Basics.Float -> Shape userMsg -> Shape userMsg

Rotate a Shape by the specified amount (in radians). Use the degrees function to convert from degrees into radians:

[
    rect 30 60
        |> filled blue
        |> rotate(degrees 30)
]

scale : Basics.Float -> Shape userMsg -> Shape userMsg

Scale a Shape by a given factor.

scaleX : Basics.Float -> Shape userMsg -> Shape userMsg

Scale a Shape in the x-axis by a given factor.

scaleY : Basics.Float -> Shape userMsg -> Shape userMsg

Scale a Shape in the y-axis by a given factor.

mirrorX : Shape userMsg -> Shape userMsg

Flip a Shape along the x-axis.

mirrorY : Shape userMsg -> Shape userMsg

Flip a Shape along the y-axis.

skewX : Basics.Float -> Shape userMsg -> Shape userMsg

Skew a Shape along the x-axis.

skewY : Basics.Float -> Shape userMsg -> Shape userMsg

Skew a Shape along the y-axis.

Group Operations

clip : Shape userMsg -> Shape userMsg -> Shape userMsg

Clipping to a shape

Cut out the Shape on the right using the Shape on the left.

union : Shape userMsg -> Shape userMsg -> Shape userMsg

Shape union

Combine two Shapes together into one to use with clip.

subtract : Shape userMsg -> Shape userMsg -> Shape userMsg

Shape subtraction

Subtract the Shape on the left from the Shape on the right.

outside : Shape userMsg -> Shape userMsg

The whole region outside the given Shape.

ghost : Stencil -> Shape userMsg

Make a Shape into a ghost. Mostly to be used inside of the clip operations. Note that although the blank Color is transparent, it will still catch notifications enabled on the Shape or block them if not enabled on the Shape.

Notifications

notifyTap : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when a Shape is clicked or tapped.

notifyTapAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse or finger when the Shape is clicked or tapped.

notifyEnter : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the mouse enters a Shape.

notifyEnterAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse when the mouse enters a Shape.

notifyLeave : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the mouse leaves a Shape.

notifyLeaveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse when the mouse leaves a Shape.

notifyMouseMoveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse when the mouse is moved across a Shape.

notifyMouseDown : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the mouse button is pressed while the cursor is over a Shape.

notifyMouseDownAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse when the mouse button is pressed while the cursor is over a Shape.

notifyMouseUp : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the mouse button is released while the cursor is over a Shape.

notifyMouseUpAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the mouse when the mouse button is released while the cursor is over a Shape.

notifyTouchStart : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the user begins touching a Shape.

notifyTouchStartAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the user's finger when the user begins touching a Shape.

notifyTouchEnd : userMsg -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) when the user lifts their finger off a Shape.

notifyTouchEndAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the user's finger when the user lifts their finger off a Shape.

notifyTouchMoveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg

Receive a message (userMsg) with the x and y position of the user's finger when the user moves their finger over a Shape.

Miscellaneous

makeTransparent : Basics.Float -> Shape userMsg -> Shape userMsg

Make a Shape transparent by the fraction given. Multiplies on top of other transparencies:

circle 10
    |> filled red
    |> makeTransparent 0.5
--results in a transparency of 0.5 (half vislible)

circle 10
    |> filled red
    |> makeTransparent 0.5
    |> makeTransparent 0.5
--results in a transparency of 0.25 (a quarter visible)

addHyperlink : String -> Shape userMsg -> Shape userMsg

Add a hyperlink to any Shape:

circle 10
    |> filled red
    |> addHyperlink "http://outreach.mcmaster.ca"

puppetShow : Basics.Float -> Basics.Float -> List ( Basics.Float, Shape userMsg ) -> List (Shape userMsg)

Take a Collage width and height as well as a list of tuples of depth and Shape. to produce a list of Shape's suitable for display as a group in a Collage with Shape's with lesser depth larger and in front of Shape's with greater depth.

Helpers

graphPaper : Basics.Float -> Shape userMsg

Creates a graph paper with squares of a given size.

graphPaperCustom : Basics.Float -> Basics.Float -> Color -> Shape userMsg

Creates graph paper with squares of a given size, with a user-defined thickness and colour.

map : (a -> b) -> Shape a -> Shape b

To compose multiple pages or components which each have a Msg/view/update, we need to map messages. (Ask if you don't know what this means.)

Let there be colours!


type alias Color =
Secret.Color

The Color type is used for filling or outlining a Stencil.

black : Color

blank : Color

blue : Color

brown : Color

charcoal : Color

darkBlue : Color

darkBrown : Color

darkCharcoal : Color

darkGray : Color

darkGreen : Color

darkGrey : Color

darkOrange : Color

darkPurple : Color

darkRed : Color

darkYellow : Color

gray : Color

green : Color

grey : Color

hotPink : Color

lightBlue : Color

lightBrown : Color

lightCharcoal : Color

lightGray : Color

lightGreen : Color

lightGrey : Color

lightOrange : Color

lightPurple : Color

lightRed : Color

lightYellow : Color

orange : Color

pink : Color

purple : Color

red : Color

white : Color

yellow : Color

Let there be gradients!


type alias Gradient =
Secret.Gradient

A type representing radial and linear gradients.


type alias Stop =
Secret.Stop

A type representing stops in a gradient. Consists of one constructor with inputs for the position, transparency and colour.

stop : Color -> Basics.Float -> Stop

A colour stop in a gradient. This takes a colour and a position.

transparentStop : Color -> Basics.Float -> Basics.Float -> Stop

A colour stop with transparency.

gradient : List Stop -> Color

Create a linear gradient from a list of colour stops.

radialGradient : List Stop -> Color

Create a radial gradient from a list of colour stops.

rotateGradient : Basics.Float -> Color -> Color

Rotate a linear gradient by a certain angle in radians.

Advanced Transformations

Advanced section warning! These functions provide a way to interface on a lower level to the transformations normally handled in the background by GraphicSVG. Most users should be happy to use the regular functions applied directly to shapes, which are provided in the section above this one.


type alias Transform =
Secret.Transform

A matrix representing an SVG transformation matrix of the form:

( ( a , c , e ) , ( b , d , f ) )

or

 a c e
 b d f

The a, c, b and d control transformations such as skew, rotate and scale; e and f control translation.

These matrices are best built up by starting with the identity matrix and applying any number of *T functions (see below); for example,

myTransform =
    ident
        |> scaleT 2 2
        |> rotateT (degrees 30)
        |> moveT (0, 50)

ident : Transform

The identity or "starting" matrix. Applying this matrix to a shape is the equivalent of doing no transformations at all. The matrix itself looks like

ident = ( ( 1 , 0 , 0 ) , ( 0 , 1 , 0 ) )

or,

 1 0 0
 0 1 0

moveT : ( Basics.Float, Basics.Float ) -> Transform -> Transform

Apply a move (translation) transformation to a transformation matrix. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)

rotateT : Basics.Float -> Transform -> Transform

Apply a rotation transformation to a transformation matrix. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)

scaleT : Basics.Float -> Basics.Float -> Transform -> Transform

Apply a scale transformation to a transformation matrix. The first argument scales in x and the second argument scales in y. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)
    |> scaleT 4 0.4

skewT : Basics.Float -> Basics.Float -> Transform -> Transform

Apply a skew transformation to a matrix. The first argument skews in x and the second argument skews in y. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)
    |> scaleT 4 0.4
    |> skewT 0.5 1.3

rotateAboutT : ( Basics.Float, Basics.Float ) -> Basics.Float -> Transform -> Transform

Apply a rotation about a given point to a Transform matrix. For example, the following transform will rotate a Shape 30 degrees about the point (0,50):

rotateAbout050 =
    ident
        |> rotateAboutT (0, 50) (degrees 30)

transform : Transform -> Shape userMsg -> Shape userMsg

Manually transform a shape using a Transform matrix. Matrix multiplication will be used to apply the given matrix to any transformations of the current shape. This is designed to be used in the usual way in a pipe:

circle 10
    |> filled red
    |> transform moveLeft50

moveLeft50 =
    ident
        |> moveT (50,0)

NOTE: Transformations generated using pipes this way are applied backwards compared to the "regular" Shape userMsg transformation functions. For example, rect0 and rect1 below are equivalent:

myTransform =
    ident
        |> scaleT 2 2
        |> rotateT (degrees 30)
        |> moveT (0, 50)

rect0 =
    rect 20 10
        |> filled red
        |> transform myTransform

rect1 =
    rect 20 10
        |> filled red
        |> move (0, 50)
        |> rotate (degrees 30)
        |> scale 2

On the other hand, single transformations produce a result consistent with the Shape userMsg transformations. rect2 is also equivalent to the two above:

moveRight50 =
    ident
        |> moveT (50,0)

scale2 =
    ident
        |> scaleT 2 2

rotate30 =
    ident
        |> rotateT (degrees 30)

rect2 =
    rect 20 10
        |> filled red
        |> transform moveRight50
        |> transform scale2
        |> transform rotate30

However, chaining together transformations in this way is discouraged because it is less efficient than the regular Shape userMsg transformations in the "Transformations" section.

More Advanced Things

Don't worry about these unless you really know what you're doing!


type Msg userMsg
    = Graphics userMsg
    | WindowResize (Maybe ( Basics.Int, Basics.Int ))
    | ReturnPosition (( Basics.Float, Basics.Float ) -> userMsg) (( Basics.Float, Basics.Float ))
    | NoOp

The Msg type encapsulates all GraphicSVG internal messages.

This type is only used to define type signature fors user defined view and main as follows:

view : GraphicSVG.Collage (GraphicSVG.Msg Msg)

for use with graphicsApp and notificationsApp, and as follows:

view : Model -> GraphicSVG.Collage (GraphicSVG.Msg Msg)

for use with gameApp.

It is also used to define the type signature for a user supplied main as follows:

main : Program Never (GraphicsModel Model Msg) (GraphicSVG.Msg Msg)

for use with graphicsApp and notificationsApp, and as follows:

main : Program Never (GamesModel Model Msg) (GraphicSVG.Msg Msg)

for use when main calls gameApp

These assume that Model is the type alias of the user persistent model, and Msg is the name of the user message type.

createSVG : String -> Basics.Float -> Basics.Float -> Transform -> (a -> b) -> ((( Basics.Float, Basics.Float ) -> a) -> ( Basics.Float, Basics.Float ) -> b) -> Shape a -> Svg b

Create Svg from a Shape. This is considered an advanced function and is usually not used. Instead, use collage as part of a regular GraphicSVG app or create a widget with GraphicSVG.Widget.