3.10.0 • Published 9 months ago

@elchininet/isometric v3.10.0

Weekly downloads
24
License
Apache-2.0
Repository
github
Last release
9 months ago

Deployment Status Test Coverage Status npm version

Demo

https://elchininet.github.io/isometric/

Installation

Using NPM

npm install @elchininet/isometric

Using PNPM

pnpm add @elchininet/isometric

Using Yarn

yarn add @elchininet/isometric

In the browser

Importing the package as an external script in the HTML code

It is possible to include a compiled version of the package directly in an HTML file. It will create a global isometric object that can be accessed from anywhere in your JavaScript code.

  1. Copy the JavaScript file isometric.js, located in the dist/web folder
  2. Put it in the folder that you prefer in your web server
  3. Include it in your HTML file
<script src="wherever/you/installed/isometric.js"></script>
/* There will be a global variable named isometric containing all the classes */
isometric.IsometricCanvas;
isometric.IsometricGroup;
isometric.IsometricRectangle;
isometric.IsometricCircle;
isometric.IsometricStarPolygon;
isometric.IsometricPentagram;
isometric.IsometricPath;
Importing the package in your code using CommonJS
const {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} = require('@elchininet/isometric');
Importing the package in your code using ES6 modules
import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from '@elchininet/isometric';

In node environments

To use the package in a Node environment, you need to install jsdom because the package needs it to work properly.

Importing the package in your code using CommonJS
const {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} = require('@elchininet/isometric/node');
Importing the package in your code using ES6 modules
import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from '@elchininet/isometric/node';

In Deno

To import the package in Deno, use the main esm version using any content delivery as UNPKG or JSDELIVR. The package contains a reference directive to the d.ts file so you can get type checking importing it without doing anything special.

import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from 'https://cdn.jsdelivr.net/npm/@elchininet/isometric/esm/index.js';

Scripts

build

npm run build

Transpiles the TypeScript code and creates the necesary package bundles:

Bundle pathEnvironmentModule type
web/isometric.jsBrowserIIFE
index.jsBrowserCommonJS
esm/index.jsBrowserESM
index.node.jsNodeCommonJS
esm/index.node.jsNodeESM

lint

npm run lint

Runs eslint in source files.

test

npm run test

Runs tests.

demo

npm run demo

Opens a development server that provides live reloading using webpack-dev-server. Some demo examples located in the @demo folder will be shown. You can modify the code of the demos and the changes will be live reloaded in the browser.

API

Class IsometricCanvas

This is the base class, it creates an isometric canvas (an SVG object)

const isometric = new IsometricCanvas([properties]);

properties (optional)

Object to set the properties of the isometric canvas

PropertyTypeDefault valueDescription
containerHTMLElement or string"body"The DOM element or the query selector of the element in which the isometric will be inserted. This parameter should not be provided in Node environments
idstringrandomSets the id of the isometric canvas. It also sets the id of the native SVG element
backgroundColorstring"white"Sets the background color of the isometric canvas
scalenumber1Sets the scale multiplier of each isometric unit
heightnumber480Sets the height of the isometric canvas
widthnumber640Sets the width of the isometric canvas

All the instance methods (excluding getElement, getChildByIndex, getChildById, and getSVGCode) return the same instance, so they are chainable.

getElement()

Returns the native SVG element

getSVGCode()

Returns the HTML code of the SVG element

addChild(child)

Adds a child to the isometric canvas

ParameterType
childAny isometric element
addChildren(child, child, child...)

Adds multiple children to the isometric canvas

ParameterType
childAny isometric element
getChildByIndex(index)

Gets a child taking into account its index

ParameterType
indexnumber
getChildById(id)

Gets a child taking into account its id

ParameterType
idstring
removeChild(child)

Removes a child from the isometric canvas

ParameterType
childAny isometric element
removeChildren(child, child, child...)

Removes multiple children from the isometric canvas

ParameterType
childAny isometric element
removeChildByIndex(index)

Removes a child taking into account its index in the elements tree

ParameterType
indexnumber
removeChildById(id)

Removes a child taking into account its id

ParameterType
idstring
setChildIndex(child, index)

Change the index of a child of the isometric canvas. This method also changes the index of the native elements inside the SVG.

ParameterType
childAny isometric element
indexnumber
bringChildToFront(child)

Change the index of a child of the isometric canvas bringing it to the front of the rest of the children. This method also changes the index of the native elements inside the SVG.

ParameterType
childAny isometric element
sendChildToBack(child)

Change the index of a child of the isometric canvas sending it to the back of the rest of the children. This method also changes the index of the native elements inside the SVG.

ParameterType
childAny isometric element
bringChildForward(child)

Change the index of a child of the isometric canvas bringing it to the front of the child above it. This method also changes the index of the native elements inside the SVG.

ParameterType
childAny isometric element
sendChildBackward(child)

Change the index of a child of the isometric canvas sending it to the back of the child below it. This method also changes the index of the native elements inside the SVG.

ParameterType
childAny isometric element
update()

Updates the entire isometric canvas and its children

clear()

Cleans the isometric canvas (removes all the children from it and all the native SVG elements from the SVG)

pauseAnimations()

Pause all the animations (not compatible with Internet Explorer)

resumeAnimations()

Resume all the animations (not compatible with Internet Explorer)

addEventListener(type, callback, [useCapture])

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

ParameterType
typestring
callbackVoidFunction
callbackboolean
removeEventListener(type, callback, [useCapture])

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

ParameterType
typestring
callbackVoidFunction
callbackboolean
PropertyTypeDescription
idstringGets and sets the id of the isometric canvas. This property also sets the id of the native SVG element
backgroundColorstringGets and sets the background color of the isometric canvas
scalenumberGets and sets the multiplier scale of the isometric canvas
heightnumberGets and sets the height of the isometric canvas
widthnumberGets and sets the width of the isometric canvas
childrenarrayGets an array of the isometric canvas children elements
animatedbooleanGets if the SVG is animations are paused or are running

Class IsometricGroup

This class can be used to group multiple isometric elements and translate them together.

const isometric = new IsometricGroup([properties]);

properties (optional)

Object to set the properties of the isometric canvas

PropertyTypeDefault valueDescription
idstringrandomSets the id of the isometric group. It also sets the id of the native SVG element
rightnumber0Sets the right isometric coordinates of the isometric group
leftnumber0Sets the left isometric coordinates of the isometric group
topnumber0Sets the top isometric coordinates of the isometric group

All the instance methods (excluding getChildByIndex, getChildById, and getElement) return the same instance, so they are chainable.

getElement()

Returns the native g element

addChild(child)

Adds a child to the isometric group

ParameterType
childAny isometric element
addChildren(child, child, child...)

Adds multiple children to the isometric group

ParameterType
childAny isometric element
getChildByIndex(index)

Gets a child taking into account its index

ParameterType
indexnumber
getChildById(id)

Gets a child taking into account its id

ParameterType
idstring
removeChild(child)

Removes a child from the isometric group

ParameterType
childAny isometric element
removeChildren(child, child, child...)

Removes multiple children from the isometric group

ParameterType
childAny isometric element
removeChildByIndex(index)

Removes a child taking into account its index in the elements tree

ParameterType
indexnumber
removeChildById(id)

Removes a child taking into account its id

ParameterType
idstring
setChildIndex(child, index)

Change the index of a child of the isometric group. This method also changes the index of the native elements inside the g element.

ParameterType
childAny isometric element
indexnumber
bringChildToFront(child)

Change the index of a child of the isometric group bringing it to the front of the rest of the children. This method also changes the index of the native elements inside the g element.

ParameterType
childAny isometric element
sendChildToBack(child)

Change the index of a child of the isometric group sending it to the back of the rest of the children. This method also changes the index of the native elements inside the g element.

ParameterType
childAny isometric element
bringChildForward(child)

Change the index of a child of the isometric group bringing it to the front of the child above it. This method also changes the index of the native elements inside the g element.

ParameterType
childAny isometric element
sendChildBackward(child)

Change the index of a child of the isometric group sending it to the back of the child below it. This method also changes the index of the native elements inside the g element.

ParameterType
childAny isometric element
update()

Updates the entire isometric group and its children

clear()

Cleans the isometric group (removes all the children from it and all the native SVG elements from the g element)

addEventListener(type, callback, [useCapture])

Sets up a function that will be called whenever the specified event is delivered to the isometric group (the g element)

ParameterType
typestring
callbackVoidFunction
callbackboolean
removeEventListener(type, callback, [useCapture])

Removes from the isometric group (the g element) an event listener previously registered with addEventListener

ParameterType
typestring
callbackVoidFunction
callbackboolean
PropertyTypeDescription
idstringGets and sets the id of the isometric group. This property also sets the id of the native SVG element
rightnumberGets and sets the right isometric coordinates of the isometric group
leftnumberGets and sets the left isometric coordinates of the isometric group
topnumberGets and sets the top isometric coordinates of the isometric group
childrenarrayGets an array of the isometric group children elements
drag *PlaneView (string) / falseGets an sets the dragging plane of the isometric group
boundsobject / falseGets an sets the boundaries of the isometric group position

* When dragging an isometric group, 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 group will receive. The drag event can be prevented using preventDefault so, if it is prevented, the isometric group 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 group position. If it is set as false the isometric group will not have boundaries.

PropertyTypeDefault valueDescription
rightnumber, number-Minimum and maximum boundaries of the right coordinates
leftnumber, number-Minimum and maximum boundaries of the left coordinates
topnumber, number-Minimum and maximum boundaries of the top coordinates

Class IsometricRectangle

This class is to create isometric rectangles that can be added to the isometric canvas or to isometric groups.

const path = new IsometricRectangle(properties);

properties

Object to set the properties of the isometric rectangle

PropertyTypeDefault valueDescription
idstringrandomSets the id of the isometric rectangle. It also sets the id of the native SVG element
heightnumber-Sets the height of the isometric rectangle
widthnumber-Sets the width of the isometric rectangle
rightnumber0Sets the right isometric coordinates of the isometric rectangle
leftnumber0Sets the left isometric coordinates of the isometric rectangle
topnumber0Sets the top isometric coordinates of the isometric rectangle
planeViewPlaneView (string)-Sets the plane view in which the isometric rectangle will be created
fillColorstring"white"Sets the fill color of the isometric rectangle
fillOpacitynumber1Sets the fill opacity of the isometric rectangle
strokeColorstring"black"Sets the stroke color of the isometric rectangle
strokeOpacitynumber1Sets stroke opacity of the isometric rectangle
strokeDashArraynumber[][]Sets the SVG stroke dasharray of the isometric rectangle
strokeLinecapstring"butt"Sets the SVG stroke linecap of the isometric rectangle
strokeLinejoinstring"round"Sets the SVG stroke linejoin of the isometric rectangle
strokeWidthnumber1Sets the stroke width of the isometric rectangle
textureTexture (object)-Sets the texture of the isometric rectangle

planeView values

"TOP" | "FRONT" | "SIDE"

texture properties

Object to set the texture of the isometric rectangle

PropertyTypeDefault valueDescription
urlstring-URL of the image texture
planeViewPlaneView (string)parent planeViewSets the texture plane view. By default it takes the isometric rectangle plane view
heightnumber-Sets the texture height
widthnumber-Sets the texture width
scalenumber-Sets the scale of the texture
pixelatedboolean-Sets the image rendering of the texture
shiftPoint (object)-Shifts the background position
rotationRotation (object)-Set the rotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

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 rectangle

updateTexture(texture)

Adds or override the texture properties

PropertyTypeOptionalDescription
urlstringyesURL of the image texture
planeViewPlaneView (string)yesTexture plane view
heightnumberyesTexture height
widthnumberyesTexture width
scalenumberyesTexture scale
pixelatedbooleanyesImage rendering of the texture
shiftPoint (object)yesShifts the background position
rotationRotation (object)yesRotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

clear()

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

addAnimation(animation)

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

PropertyTypeOptionalDefaultDescription
propertystringno-Indicates which property should be animated
durationnumberyes1Indicates the number of seconds of the animation
repeatnumberyes0Number of times that the animation will run. 0 runs indefinitely
fromstring / numberyes-Initial value of the animation (if this property is used, values property can't be used)
tostring / numberyes-Final value of the animation (if this property is used, values property can't be used)
valuesstring / 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*
  • width*
  • height*

* 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 rectangle (the SVG path element)

ParameterType
typestring
callbackVoidFunction
callbackboolean
removeEventListener(type, listener, [useCapture])

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

ParameterType
typestring
callbackVoidFunction
callbackboolean
PropertyTypeDescription
idstringGets and sets the id of the isometric rectangle. This property also sets the id of the native SVG element
heightnumberGets and sets the height of the isometric rectangle
widthnumberGets and sets the width of the isometric rectangle
rightnumberGets and sets the right isometric coordinates of the isometric rectangle
leftnumberGets and sets the left isometric coordinates of the isometric rectangle
topnumberGets and sets the top isometric coordinates of the isometric rectangle
planeViewstringGets and sets the plane view in which the isometric rectangle is created
fillColorstringGets and sets the fill color of the isometric rectangle
fillOpacitynumberGets and sets the fill opacity of the isometric rectangle
strokeColorstringGets and sets the stroke color of the isometric rectangle
strokeOpacitynumberGets and sets the stroke opacity of the isometric rectangle
strokeDashArraynumber[]Gets and sets the SVG stroke dasharray of the isometric rectangle
strokeLinecapstringGets and sets the SVG stroke linecap of the isometric rectangle
strokeLinejoinstringGets and sets the SVG stroke linejoin of the isometric rectangle
strokeWidthnumberGets and sets the stroke width of the isometric rectangle
textureTexture (object)Gets and sets the texture of the isometric rectangle
drag *PlaneView (string) / falseGets an sets the dragging plane of the isometric rectangle
boundsobject / falseGets an sets the boundaries of the isometric rectangle position

* When dragging an isometric rectangle, 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 rectangle will receive. The drag event can be prevented using preventDefault so, if it is prevented, the isometric rectangle 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 rectangle position. If it is set as false the isometric rectangle will not have boundaries.

PropertyTypeDefault valueDescription
rightnumber, number-Minimum and maximum boundaries of the right coordinates
leftnumber, number-Minimum and maximum boundaries of the left coordinates
topnumber, number-Minimum and maximum boundaries of the top coordinates

Class IsometricCircle

This class is to create isometric circles that can be added to the isometric canvas.

const path = new IsometricCircle(properties);

properties

Object to set the properties of the isometric circle

PropertyTypeDefault valueDescription
idstringrandomSets the id of the isometric circle. It also sets the id of the native SVG element
radiusnumber-Sets the radius of the isometric circle
rightnumber0Sets the right isometric coordinates of the isometric circle
leftnumber0Sets the left isometric coordinates of the isometric circle
topnumber0Sets the top isometric coordinates of the isometric circle
planeViewPlaneView (string)-Sets the plane view in which the isometric circle will be created
fillColorstring"white"Sets the fill color of the isometric circle
fillOpacitynumber1Sets the fill opacity of the isometric circle
strokeColorstring"black"Sets the stroke color of the isometric circle
strokeOpacitynumber1Sets stroke opacity of the isometric circle
strokeDashArraynumber[][]Sets the SVG stroke dasharray of the isometric circle
strokeLinecapstring"butt"Sets the SVG stroke linecap of the isometric circle
strokeLinejoinstring"round"Sets the SVG stroke linejoin of the isometric circle
strokeWidthnumber1Sets the stroke width of the isometric circle
textureTexture (object)-Sets the texture of the isometric circle

planeView values

"TOP" | "FRONT" | "SIDE"

texture properties

Object to set the texture of the isometric circle

PropertyTypeDefault valueDescription
urlstring-URL of the image texture
planeViewPlaneView (string)parent planeViewSets the texture plane view. By default it takes the isometric circle plane view
heightnumber-Sets the texture height
widthnumber-Sets the texture width
scalenumber-Sets the scale of the texture
pixelatedboolean-Sets the image rendering of the texture
shiftPoint (object)-Shifts the background position
rotationRotation (object)-Set the rotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

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 circle

updateTexture(texture)

Adds or override the texture properties

PropertyTypeOptionalDescription
urlstringyesURL of the image texture
planeViewPlaneView (string)yesTexture plane view
heightnumberyesTexture height
widthnumberyesTexture width
scalenumberyesTexture scale
pixelatedbooleanyesImage rendering of the texture
shiftPoint (object)yesShifts the background position
rotationRotation (object)yesRotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

clear()

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

addAnimation(animation)

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

PropertyTypeOptionalDefaultDescription
propertystringno-Indicates which property should be animated
durationnumberyes1Indicates the number of seconds of the animation
repeatnumberyes0Number of times that the animation will run. 0 runs indefinitely
fromstring / numberyes-Initial value of the animation (if this property is used, values property can't be used)
tostring / numberyes-Final value of the animation (if this property is used, values property can't be used)
valuesstring / 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*

* 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 circle (the SVG path element)

ParameterType
typestring
callbackVoidFunction
callbackboolean
removeEventListener(type, listener, [useCapture])

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

ParameterType
typestring
callbackVoidFunction
callbackboolean
PropertyTypeDescription
idstringGets and sets the id of the isometric circle. This property also sets the id of the native SVG element
radiusnumberGets and sets the radius of the isometric circle
rightnumberGets and sets the right isometric coordinates of the isometric circle
leftnumberGets and sets the left isometric coordinates of the isometric circle
topnumberGets and sets the top isometric coordinates of the isometric circle
planeViewstringGets and sets the plane view in which the isometric circle is created
fillColorstringGets and sets the fill color of the isometric circle
fillOpacitynumberGets and sets the fill opacity of the isometric circle
strokeColorstringGets and sets the stroke color of the isometric circle
strokeOpacitynumberGets and sets the stroke opacity of the isometric circle
strokeDashArraynumber[]Gets and sets the SVG stroke dasharray of the isometric circle
strokeLinecapstringGets and sets the SVG stroke linecap of the isometric circle
strokeLinejoinstringGets and sets the SVG stroke linejoin of the isometric circle
strokeWidthnumberGets and sets the stroke width of the isometric circle
textureTexture (object)Gets and sets the texture of the isometric circle
drag *PlaneView (string) / falseGets an sets the dragging plane of the isometric circle
boundsobject / falseGets an sets the boundaries of the isometric circle position

* When dragging an isometric circle, 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 circle will receive. The drag event can be prevented using preventDefault so, if it is prevented, the isometric circle 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 circle position. If it is set as false the isometric circle will not have boundaries.

PropertyTypeDefault valueDescription
rightnumber, number-Minimum and maximum boundaries of the right coordinates
leftnumber, number-Minimum and maximum boundaries of the left coordinates
topnumber, number-Minimum and maximum boundaries of the top coordinates

Class IsometricStarPolygon

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

const path = new IsometricStarPolygon(properties);

properties

Object to set the properties of the isometric star polygon

PropertyTypeDefault valueDescription
idstringrandomSets the id of the isometric star polygon. It also sets the id of the native SVG element
radiusnumber-Sets the radius of the isometric star polygon
pointsnumber-Sets the number of points of the isometric star polygon
densitynumber-Sets the density of the isometric star polygon
rotationnumber-Sets the rotation of the isometric star polygon
rightnumber0Sets the right isometric coordinates of the isometric star polygon
leftnumber0Sets the left isometric coordinates of the isometric star polygon
topnumber0Sets the top isometric coordinates of the isometric star polygon
planeViewPlaneView (string)-Sets the plane view in which the isometric star polygon will be created
fillColorstring"white"Sets the fill color of the isometric star polygon
fillOpacitynumber1Sets the fill opacity of the isometric star polygon
strokeColorstring"black"Sets the stroke color of the isometric star polygon
strokeOpacitynumber1Sets stroke opacity of the isometric star polygon
strokeDashArraynumber[][]Sets the SVG stroke dasharray of the isometric star polygon
strokeLinecapstring"butt"Sets the SVG stroke linecap of the isometric star polygon
strokeLinejoinstring"round"Sets the SVG stroke linejoin of the isometric star polygon
strokeWidthnumber1Sets the stroke width of the isometric star polygon
textureTexture (object)-Sets the texture of the isometric star polygon

planeView values

"TOP" | "FRONT" | "SIDE"

texture properties

Object to set the texture of the isometric star polygon

PropertyTypeDefault valueDescription
urlstring-URL of the image texture
planeViewPlaneView (string)parent planeViewSets the texture plane view. By default it takes the isometric star polygon plane view
heightnumber-Sets the texture height
widthnumber-Sets the texture width
scalenumber-Sets the scale of the texture
pixelatedboolean-Sets the image rendering of the texture
shiftPoint (object)-Shifts the background position
rotationRotation (object)-Set the rotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

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

PropertyTypeOptionalDescription
urlstringyesURL of the image texture
planeViewPlaneView (string)yesTexture plane view
heightnumberyesTexture height
widthnumberyesTexture width
scalenumberyesTexture scale
pixelatedbooleanyesImage rendering of the texture
shiftPoint (object)yesShifts the background position
rotationRotation (object)yesRotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis
valuenumber-Rotation value

axis values

"RIGHT" | "LEFT" | "TOP"

clear()

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

addAnimation(animation)

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

PropertyTypeOptionalDefaultDescription
propertystringno-Indicates which property should be animated
durationnumberyes1Indicates the number of seconds of the animation
repeatnumberyes0Number of times that the animation will run. 0 runs indefinitely
fromstring / numberyes-Initial value of the animation (if this property is used, values property can't be used)
tostring / numberyes-Final value of the animation (if this property is used, values property can't be used)
valuesstring / 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*
  • density*
  • 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 star polygon (the SVG path element)

ParameterType
typestring
callbackVoidFunction
callbackboolean
removeEventListener(type, listener, [useCapture])

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

ParameterType
typestring
callbackVoidFunction
callbackboolean
PropertyTypeDescription
idstringGets and sets the id of the isometric star polygon. This property also sets the id of the native SVG element
radiusnumberGets and sets the radius of the isometric star polygon
rotationnumberGets and sets the rotation of the isometric star polygon
pointsnumberGets and sets the number of points of the isometric star polygon
densitynumberGets and sets the density of the isometric star polygon
rightnumberGets and sets the right isometric coordinates of the isometric star polygon
leftnumberGets and sets the left isometric coordinates of the isometric star polygon
topnumberGets and sets the top isometric coordinates of the isometric star polygon
planeViewstringGets and sets the plane view in which the isometric star polygon is created
fillColorstringGets and sets the fill color of the isometric star polygon
fillOpacitynumberGets and sets the fill opacity of the isometric star polygon
strokeColorstringGets and sets the stroke color of the isometric star polygon
strokeOpacitynumberGets and sets the stroke opacity of the isometric star polygon
strokeDashArraynumber[]Gets and sets the SVG stroke dasharray of the isometric star polygon
strokeLinecapstringGets and sets the SVG stroke linecap of the isometric star polygon
strokeLinejoinstringGets and sets the SVG stroke linejoin of the isometric star polygon
strokeWidthnumberGets and sets the stroke width of the isometric star polygon
textureTexture (object)Gets and sets the texture of the isometric star polygon
drag *PlaneView (string) / falseGets an sets the dragging plane of the isometric star polygon
boundsobject / falseGets an sets the boundaries of the isometric star polygon position

* When dragging an isometric star polygon, 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 star polygon will receive. The drag event can be prevented using preventDefault so, if it is prevented, the isometric star polygon 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 star polygon position. If it is set as false the isometric star polygon will not have boundaries.

PropertyTypeDefault valueDescription
rightnumber, number-Minimum and maximum boundaries of the right coordinates
leftnumber, number-Minimum and maximum boundaries of the left coordinates
topnumber, number-Minimum and maximum boundaries of the top coordinates

Class IsometricPentagram

This class is to create isometric pentagrams (a specific star polygon with 5 points and density 2) that can be added to the isometric canvas.

const path = new IsometricPentagram(properties);

properties

Object to set the properties of the isometric pentagram

PropertyTypeDefault valueDescription
idstringrandomSets the id of the isometric pentagram. It also sets the id of the native SVG element
radiusnumber-Sets the radius of the isometric pentagram
rotationnumber-Sets the rotation of the isometric pentagram
rightnumber0Sets the right isometric coordinates of the isometric pentagram
leftnumber0Sets the left isometric coordinates of the isometric pentagram
topnumber0Sets the top isometric coordinates of the isometric pentagram
planeViewPlaneView (string)-Sets the plane view in which the isometric pentagram will be created
fillColorstring"white"Sets the fill color of the isometric pentagram
fillOpacitynumber1Sets the fill opacity of the isometric pentagram
strokeColorstring"black"Sets the stroke color of the isometric pentagram
strokeOpacitynumber1Sets stroke opacity of the isometric pentagram
strokeDashArraynumber[][]Sets the SVG stroke dasharray of the isometric pentagram
strokeLinecapstring"butt"Sets the SVG stroke linecap of the isometric pentagram
strokeLinejoinstring"round"Sets the SVG stroke linejoin of the isometric pentagram
strokeWidthnumber1Sets the stroke width of the isometric pentagram
textureTexture (object)-Sets the texture of the isometric pentagram

planeView values

"TOP" | "FRONT" | "SIDE"

texture properties

Object to set the texture of the isometric pentagram

PropertyTypeDefault valueDescription
urlstring-URL of the image texture
planeViewPlaneView (string)parent planeViewSets the texture plane view. By default it takes the isometric pentagram plane view
heightnumber-Sets the texture height
widthnumber-Sets the texture width
scalenumber-Sets the scale of the texture
pixelatedboolean-Sets the image rendering of the texture
shiftPoint (object)-Shifts the background position
rotationRotation (object)-Set the rotation of the texture

shift properties

Object to shift the background position

PropertyTypeDefault valueDescription
rightnumber-Right coordinates
leftnumber-Left coordinates
topnumber-Top coordinates

rotation properties

Object to set the background rotation

PropertyTypeDefault valueDescription
axisAxis (string)-Rotation axis

| value

3.9.0

9 months ago

3.8.0

10 months ago

3.10.0

9 months ago

3.7.3

2 years ago

3.7.2

2 years ago

3.7.1

3 years ago

3.7.0

3 years ago

3.6.1

3 years ago

3.6.0

3 years ago

3.5.1

3 years ago

3.5.0

3 years ago

3.4.0

3 years ago

3.3.0

3 years ago

3.2.1

3 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.0

4 years ago

2.5.3

5 years ago

2.5.2

5 years ago

2.5.1

5 years ago

2.5.0

5 years ago

2.4.1

5 years ago

2.3.2

5 years ago

2.4.0

5 years ago

2.3.0

5 years ago

2.2.1

5 years ago

2.3.1

5 years ago

2.2.0

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.0

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago