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

This is a package candidate release! Here you can preview how this package release will appear once published to the main package index (which can be accomplished via the 'maintain' link below). Please note that once a package has been published to the main package index it cannot be undone! Please consult the package uploading documentation for more information.

[maintain] [Publish]

Provides support for easily creating and manipulating SVG elements via Reflex.


[Skip to Readme]

Properties

Versions 0.3.2.0, 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-04-29T03:27:24Z

Modules

[Index] [Quick Jump]

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


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:

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.