Hackage :: [Package]

reflex-dom-svg: Reflex functions for SVG elements.

[ bsd3, frp, graphics, library, web ] [ Propose Tags ] [ Report a vulnerability ]
Versions [RSS] 0.3.2.0
Change log changelog.md
Dependencies base (>=4.9 && <=4.12), containers (>=0.5 && <0.6), lens (>=4.16.1 && <4.17), reflex (>=0.4 && <0.7), reflex-dom-core (>=0.5 && <0.7), safe (>=0.3 && <0.4), text (>=1.2 && <1.3) [details]
License BSD-3-Clause
Copyright Copyright (c) 2018, Commonwealth Scientific and Industrial Research Organisation (CSIRO) ABN 41 687 119 230.
Author Queensland Functional Programming Lab <oᴉ˙ldɟb@llǝʞsɐɥ>
Maintainer Queensland Functional Programming Lab <oᴉ˙ldɟb@llǝʞsɐɥ>
Category FRP, Web, Graphics
Source repo head: git clone git@github.com/qfpl/reflex-dom-svg/reflex-dom-svg.git
Uploaded by schalmers at 2019-05-01T00:06:59Z
Distributions
Downloads 1261 total (1 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs uploaded by user
Build status unknown [no reports yet]

Readme for reflex-dom-svg-0.3.2.0

[back to package description]

Reflex Dom SVG Helper

A helper library for working with SVG and creating dynamic SVG images using reflex-dom. This library provides a pile of types and some helper functions to make the process of creating and managing your SVG elements, more type safe and a bit easier.

It currently supports the following SVG elements/properties:

  • rect
  • circle
  • polygon
  • polyline
  • ellipse
  • line
  • animate
  • path (included is an API for building type safe paths)

The SVG elements are designed to be created inside a SVG root element:

let dSVGEl = pure $ SVG_El (Width 600.0) (Height 400)
a <- svg_ dSVGEl $ do
       ... -- other SVG elements go in here

Each of the SVG elements this library supports has a properties type associated with it, similar to how the TextInput and other widget types are configured in the core reflex-dom library.

data SVG_Rect = SVG_Rect
  { _svg_rect_pos_x          :: Pos X
  , _svg_rect_pos_y          :: Pos Y
  , _svg_rect_width          :: Width
  , _svg_rect_height         :: Height
  , _svg_rect_cornerRadius_x :: Maybe (CornerRadius X)
  , _svg_rect_cornerRadius_y :: Maybe (CornerRadius Y)
  }

The respective module contains a function to take these properties and convert them into the Map Text Text format that is expected by reflex-dom. The functions in this module take care of this for you, and allow you to add any other attributes as you require. You are able to manage the properties of an SVG element as either a static input or a Dynamic.

Additionally there is a (still work-in-progress) API for type safe <path> construction in the Reflex.Dom.Widget.SVG.Types.SVG_Path module. The SVG_Path type is a newtype over a NonEmpty PathCommand, which prevents you from having an empty list of Path instructions. As a minimal example of using the API as it currently is:

-- Drawing a simple rectangle using a <path>
r :: SVG_Path
r = _Wrapped # NonEmpty.fromList
  [ _M (_PosX # 10.0) (_PosY # 10.0)
  , _H (_PosX # 90.0)
  , _V (_PosY # 90.0)
  , _H (_PosX # 10.0)
  , _L (_PosX # 10.0) (_PosY # 10.0)
  ]

The functions _M, _H, _L, and _V, all correspond to their <path> commands from the MDN Documentation on Paths. These are the non-relative variants of those commands, there are relative versions as well, which are just lower-case named functions of the same type: _m, _h, and so on.