Create a new class to work with pentagrams (star polygons)

[elchininet]

This pull request implements a new class to create Isometric pentagrams (star polygons).

Class IsometricPentagram

This class is to create isometric pentagrams (star polygons) that can be added to the isometric canvas.

const path = new IsometricPentagram(properties);

Parameters

properties

Object to set the properties of the isometric pentagram

Property	Type	Default value	Description
radius	number	-	Sets the radius of the isometric pentagram
rotation	number	-	Sets the rotation of the isometric pentagram
right	number	0	Sets the right isometric coordinates of the isometric pentagram
left	number	0	Sets the left isometric coordinates of the isometric pentagram
top	number	0	Sets the top isometric coordinates of the isometric pentagram
planeView	PlaneView (string)	-	Sets the plane view in which the isometric pentagram will be created
fillColor	string	"white"	Sets the fill color of the isometric pentagram
fillOpacity	number	1	Sets the fill opacity of the isometric pentagram
strokeColor	string	"black"	Sets the stroke color of the isometric pentagram
strokeOpacity	number	1	Sets stroke opacity of the isometric pentagram
strokeDashArray	number[]	[]	Sets the [SVG stroke dasharray][1] of the isometric pentagram
strokeLinecap	string	"butt"	Sets the [SVG stroke linecap][2] of the isometric pentagram
strokeLinejoin	string	"round"	Sets the [SVG stroke linejoin][3] of the isometric pentagram
strokeWidth	number	1	Sets the stroke width of the isometric pentagram
texture	Texture (object)	-	Sets the texture of the isometric pentagram

planeView values

"TOP" | "FRONT" | "SIDE"

texture properties

Object to set the texture of the isometric pentagram

Property	Type	Default value	Description
url	string	-	URL of the image texture
planeView	PlaneView (string)	parent planeView	Sets the texture plane view. By default it takes the isometric pentagram plane view
height	number	-	Sets the texture height
width	number	-	Sets the texture width
scale	number	-	Sets the scale of the texture
pixelated	boolean	-	Sets the image rendering of the texture
shift	Point (object)	-	Shifts the background position
rotation	Rotation (object)	-	Set the rotation of the texture

shift properties

Object to shift the background position

Property	Type	Default value	Description
right	number	-	Right coordinates
left	number	-	Left coordinates
top	number	-	Top coordinates

rotation properties

Object to set the background rotation

Property	Type	Default value	Description
axis	Axis (string)	-	Rotation axis
value	number	-	Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

Instance Methods

All the instance methods (except getElement and getPattern) return the same instance, so they are chainable.

getElement()

Returns the native SVG path element

getPattern()

Returns the native SVGPatternElement responsible for the texture

update()

Forces a re-render of the SVG pentagram

updateTexture(texture)

Adds or override the texture properties

Property	Type	Optional	Description
url	string	yes	URL of the image texture
planeView	PlaneView (string)	yes	Texture plane view
height	number	yes	Texture height
width	number	yes	Texture width
scale	number	yes	Texture scale
pixelated	boolean	yes	Image rendering of the texture
shift	Point (object)	yes	Shifts the background position
rotation	Rotation (object)	yes	Rotation of the texture

shift properties

Object to shift the background position

Property	Type	Default value	Description
right	number	-	Right coordinates
left	number	-	Left coordinates
top	number	-	Top coordinates

rotation properties

Object to set the background rotation

Property	Type	Default value	Description
axis	Axis (string)	-	Rotation axis
value	number	-	Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

clear()

Cleans the isometric pentagram (removes all the path commands from the native SVG path element)

addAnimation(animation)

Adds an animated element to the isometric pentagram (not compatible with Internet Explorer). These are the properties of the SVGPentagramAnimation object:

Property	Type	Optional	Default	Description
property	string	no	-	Indicates which property should be animated
duration	number	yes	1	Indicates the number of seconds of the animation
repeat	number	yes	0	Number of times that the animation will run. 0 runs indefinitely
from	string / number	yes	-	Initial value of the animation (if this property is used, values property can't be used)
to	string / number	yes	-	Final value of the animation (if this property is used, values property can't be used)
values	string / number / string[] / number[]	yes	-	All the values of the animation (if this property is used, from and to properties can't be used)

These are the properties that can be animated (property property)

• fillColor
• fillOpacity
• strokeColor
• strokeOpacity
• strokeWidth
• right*
• left*
• top*
• radius*
• rotation*

* At the moment, it is not possible to animate more than one of these properties at the same time. If you do it, only the last one will be applied.

removeAnimationByIndex(index)

Remove an especific animation element by its index.

removeAnimations()

Remove all the animation elements.

addEventListener(type, callback, [useCapture])

Sets up a function that will be called whenever the specified event is delivered to the isometric pentagram (the SVG path element)

Parameter	Type
type	string
callback	VoidFunction
callback	boolean

removeEventListener(type, listener, [useCapture])

Removes from the isometric pentagram (the SVG path element) an event listener previously registered with addEventListener

Parameter	Type
type	string
callback	VoidFunction
callback	boolean

Instance Properties

Property	Type	Description
radius	number	Gets and sets the radius of the isometric pentagram
rotation	number	Gets and sets the rotation of the isometric pentagram
right	number	Gets and sets the right isometric coordinates of the isometric pentagram
left	number	Gets and sets the left isometric coordinates of the isometric pentagram
top	number	Gets and sets the top isometric coordinates of the isometric pentagram
planeView	string	Gets and sets the plane view in which the isometric pentagram is created
fillColor	string	Gets and sets the fill color of the isometric pentagram
fillOpacity	number	Gets and sets the fill opacity of the isometric pentagram
strokeColor	string	Gets and sets the stroke color of the isometric pentagram
strokeOpacity	number	Gets and sets the stroke opacity of the isometric pentagram
strokeDashArray	number[]	Gets and sets the [SVG stroke dasharray][1] of the isometric pentagram
strokeLinecap	string	Gets and sets the [SVG stroke linecap][2] of the isometric pentagram
strokeLinejoin	string	Gets and sets the [SVG stroke linejoin][3] of the isometric pentagram
strokeWidth	number	Gets and sets the stroke width of the isometric pentagram
texture	Texture (object)	Gets and sets the texture of the isometric pentagram
drag *	PlaneView (string) / false	Gets an sets the dragging plane of the isometric pentagram
bounds	object / false	Gets an sets the boundaries of the isometric pentagram position

* When dragging an isometric pentagram, the events dragstart, drag and dragend will be fired in that order. These events will be CustomEvents with a detail property containing the right, left and top properties that the isometric pentagram will receive. The drag event can be prevented using preventDefault so, if it is prevented, the isometric pentagram will not change its position when it is dragged.

planeView values

"TOP" | "FRONT" | "SIDE" | false

bounds properties

Object to set the boundaries of the isometric pentagram position. If it is set as false the isometric pentagram will not have boundaries.

Property	Type	Default value	Description
right	[number, number]	-	Minimum and maximum boundaries of the right coordinates
left	[number, number]	-	Minimum and maximum boundaries of the left coordinates
top	[number, number]	-	Minimum and maximum boundaries of the top coordinates

[coveralls]

coverage: 100.0%. remained the same
when pulling 6154a67 on implement_a_isometric_pentagram_class
into b8df40c on master.