Helpers

For some cases, Grapper offers helper functions to simplify the construction of the values accepted by the SVG attribute. These helpers are available in the $ object, accessible from the g-bind and g-content expressions:

g-bind

• $.element refers to the wrapper of the element where the g-bind directive has been included. With this reference it is possible to query other attributes of the element such as $.element.x() or $.element.stroke().

• $.attribute is the name of the attribute in which the g-bind directive has been included.

• $.currentValue() returns the current value of the property that has the g-bind directive. It is useful when we need to know the value of the property before modifying it. If the attribute is class returns and array of strings. If the attribute is style returns an object with key and value.

• $.polar2cartesian(cx, cy, r, angleDegrees) this global helper returns an x,y point from an angular value, a center point, and a radius. Parameters: cx center x, cy center y, r radius, angleDegrees angle in degrees. Returns: {x : *, y : *}.

• $.degrees2radians(degrees): this global helper converts an angle from degrees to radians. Parameters: degrees angle in degrees. Returns: angle in radians.

g-bind:transform

The transform attribute values are converted in helper functions. You can use these helpers to build the transformation. You can combine the helpers, as $.translate(10,10).rotate(45).

• $.translate(<x>, [<y>) moves the object by x and y, if y is not provided, it is assumed to be 0.

• $.scale(<x>, [<y>]) specifies a scale operation by x and y, if y is not provided, it is assumed to be equal to x.

• $.rotate(<a>, [<x>, <y>]) define a rotation by a degrees a about a given point (x and y), if x and y are not supplied, the rotation is about the origin coordinate system.

• $.skewX(<a>) and $.skewY(<a>) specify a skew transformation along the x and y axis by a degrees.

• $.matrix(<a>, <b>, <c>, <d>, <e>, <f>) modify the form by a transformation matrix.

Example:

g-bind:d in path

Constructing the d attribute of a path in SVG may seem complicated, but it is a series of relatively simple instructions. Grapper offers a series of helpers to construct the value of d step by step, chaining the different functions.

• M(<x>, <y>) m(<x>, <y>) move to absolute and relative point.
• Z() z() close path.
• L(<x>, <y>) l(<x>, <y>) line to absolute and relative point.
• H(<x>) h(<x>) horizontal line to absolute and relative x point.
• V(<y>) v(<y>) vertical line to absolute and relative ypoint.
• C(<x1>, <y1>, <x2>, <y2>, <x>, <y>) c(<x1>, <y1>, <x2>, <y2>, <x>, <y>) absolute and relative cubic Bézier curve.
• S(<x1>, <y1>, <x2>, <y2>) s(<x1>, <y1>, <x2>, <y2>) absolute and relative smooth cubic Bézier curve.
• Q(<x1>, <y1>, <x>, <y>) q(<x1>, <y1>, <x>, <y>) absolute and relative quadratic Bézier curve.
• T(<x>, <y>) t(<x>, <y>) absolute and relative smooth quadratic Bézier curve.
• A(<rx>, <ry>, <rot>, <arc-flag>, <sweep-flag>, <x>, <y>)a(<rx>, <ry>, <rot>, <arc-flag>, <sweep-flag>, <x>, <y>) absolute and relative arc curve.

Example:

:d="$.arc(cx, cy, r, grades, [start = 0] )"

Creates an arc (section of the circumference) based on a center (cx and cy), a radius (r), positive or negative number of grades (grades), and optionally a start angle (in degrees).

Parameters:

• cx - center x
• cy - center y
• r - radius
• grades - grades in degrees
• start - start position in degrees (optional, default value 0)

:d="$.barArc(cx, cy, r, width, grades, [start = 0] )"

Creates a bar with arc form (section of the circumference) based on a center (cx and cy), a radius (r), and width (width), positive or negative number of grades (grades), and optionally a start angle (in degrees).

Parameters:

• cx - center x
• cy - center y
• r - radius
• width - bar width
• grades - grades in degrees
• start - start position in degrees (optional, default value 0)

:d="$.circleSlice(cx, cy, r, grades, [start = 0] )"

Creates a circle slice (section of the circle) based on a center (cx and cy), a radius (r), positive or negative number of grades (grades), and optionally a start angle (in degrees).

Parameters:

• cx - center x
• cy - center y
• r - radius
• grades - grades in degrees
• start - start position in degrees (optional, default value 0)

g-content

The g-content directive has two helpers:

• $.element refers to the wrapper of the element where the g-conten directive has been included. With this reference it is possible to query attributes of the element such as $.element.x() or $.element.stroke() for conditional content.

• $.currentContent() returns the content of the element. It can be useful to add elements instead of replacing them or to check the content before modifying it.

• $.fromURL() gets an external resource via a URL and inserts it as element content.