@elchininet/isometric
v3.10.0
Published
A JavaScript library written in TypeScript to create isometric projections using SVGs
Downloads
190
Maintainers
Readme
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.
- Copy the JavaScript file
isometric.js
, located in thedist/web
folder - Put it in the folder that you prefer in your web server
- 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 path | Environment | Module type |
| ------------------ | ----------- | ----------- |
| web/isometric.js
| Browser | IIFE |
| index.js
| Browser | CommonJS |
| esm/index.js
| Browser | ESM |
| index.node.js
| Node | CommonJS |
| esm/index.node.js
| Node | ESM |
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
| Property | Type | Default value | Description | | --------------- | -------------------- | -------------- | ------------------------------------------------- | | container | HTMLElement 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 | | id | string | random | Sets the id of the isometric canvas. It also sets the id of the native SVG element | | backgroundColor | string | "white" | Sets the background color of the isometric canvas | | scale | number | 1 | Sets the scale multiplier of each isometric unit | | height | number | 480 | Sets the height of the isometric canvas | | width | number | 640 | Sets the width of the isometric canvas |
All the instance methods (excluding
getElement
,getChildByIndex
,getChildById
, andgetSVGCode
) 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
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
addChildren(child, child, child...)
Adds multiple children to the isometric canvas
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
getChildByIndex(index)
Gets a child taking into account its index
| Parameter | Type | | --------------- | ------------- | | index | number |
getChildById(id)
Gets a child taking into account its id
| Parameter | Type | | --------------- | ------------- | | id | string |
removeChild(child)
Removes a child from the isometric canvas
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
removeChildren(child, child, child...)
Removes multiple children from the isometric canvas
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
removeChildByIndex(index)
Removes a child taking into account its index in the elements tree
| Parameter | Type | | --------------- | ------------- | | index | number |
removeChildById(id)
Removes a child taking into account its id
| Parameter | Type | | --------------- | ------------- | | id | string |
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.
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element | | index | number |
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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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)
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
removeEventListener(type, callback, [useCapture])
Removes from the isometric canvas (the SVG element) an event listener previously registered with
addEventListener
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
| Property | Type | Description |
| --------------- | -------- | ----------------------------------------------------------------- |
| id | string | Gets and sets the id of the isometric canvas. This property also sets the id of the native SVG
element |
| backgroundColor | string | Gets and sets the background color of the isometric canvas |
| scale | number | Gets and sets the multiplier scale of the isometric canvas |
| height | number | Gets and sets the height of the isometric canvas |
| width | number | Gets and sets the width of the isometric canvas |
| children | array | Gets an array of the isometric canvas children elements |
| animated | boolean | Gets 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
| Property | Type | Default value | Description | | --------------- | -------------------- | -------------- | ------------------------------------------------------------ | | id | string | random | Sets the id of the isometric group. It also sets the id of the native SVG element | | right | number | 0 | Sets the right isometric coordinates of the isometric group | | left | number | 0 | Sets the left isometric coordinates of the isometric group | | top | number | 0 | Sets the top isometric coordinates of the isometric group |
All the instance methods (excluding
getChildByIndex
,getChildById
, andgetElement
) return the same instance, so they are chainable.
getElement()
Returns the native
g
element
addChild(child)
Adds a child to the isometric group
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
addChildren(child, child, child...)
Adds multiple children to the isometric group
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
getChildByIndex(index)
Gets a child taking into account its index
| Parameter | Type | | --------------- | ------------- | | index | number |
getChildById(id)
Gets a child taking into account its id
| Parameter | Type | | --------------- | ------------- | | id | string |
removeChild(child)
Removes a child from the isometric group
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
removeChildren(child, child, child...)
Removes multiple children from the isometric group
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element |
removeChildByIndex(index)
Removes a child taking into account its index in the elements tree
| Parameter | Type | | --------------- | ------------- | | index | number |
removeChildById(id)
Removes a child taking into account its id
| Parameter | Type | | --------------- | ------------- | | id | string |
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.
| Parameter | Type | | --------------- | ------------- | | child | Any isometric element | | index | number |
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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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.
| Parameter | Type | | --------------- | ------------- | | child | Any 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)
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
removeEventListener(type, callback, [useCapture])
Removes from the isometric group (the
g
element) an event listener previously registered withaddEventListener
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
| Property | Type | Description |
| --------------- | -------- | -------------------------------------------------------------------- |
| id | string | Gets and sets the id of the isometric group. This property also sets the id of the native SVG
element |
| right | number | Gets and sets the right isometric coordinates of the isometric group |
| left | number | Gets and sets the left isometric coordinates of the isometric group |
| top | number | Gets and sets the top isometric coordinates of the isometric group |
| children | array | Gets an array of the isometric group children elements |
| drag * | PlaneView (string
) / false | Gets an sets the dragging plane of the isometric group |
| bounds | object / false | Gets an sets the boundaries of the isometric group position |
* When dragging an isometric group, the events
dragstart
,drag
anddragend
will be fired in that order. These events will beCustomEvents
with adetail
property containing theright
,left
andtop
properties that the isometric group will receive. Thedrag
event can be prevented usingpreventDefault
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.
| 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 |
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
| Property | Type | Default value | Description |
| --------------- | -------------------- | ------------- | -------------------------------------------------------------------- |
| id | string | random | Sets the id of the isometric rectangle. It also sets the id of the native SVG element |
| height | number | - | Sets the height of the isometric rectangle |
| width | number | - | Sets the width of the isometric rectangle |
| right | number | 0 | Sets the right isometric coordinates of the isometric rectangle |
| left | number | 0 | Sets the left isometric coordinates of the isometric rectangle |
| top | number | 0 | Sets the top isometric coordinates of the isometric rectangle |
| planeView | PlaneView (string
) | - | Sets the plane view in which the isometric rectangle will be created |
| fillColor | string | "white" | Sets the fill color of the isometric rectangle |
| fillOpacity | number | 1 | Sets the fill opacity of the isometric rectangle |
| strokeColor | string | "black" | Sets the stroke color of the isometric rectangle |
| strokeOpacity | number | 1 | Sets stroke opacity of the isometric rectangle |
| strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric rectangle |
| strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric rectangle |
| strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric rectangle |
| strokeWidth | number | 1 | Sets the stroke width of the isometric rectangle |
| texture | Texture (object
) | - | Sets the texture of the isometric rectangle |
planeView values
"TOP" | "FRONT" | "SIDE"
texture properties
Object to set the texture of the isometric rectangle
| 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 rectangle 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"
All the instance methods (except
getElement
andgetPattern
) 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
| 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 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:
| 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*
- 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)
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
removeEventListener(type, listener, [useCapture])
Removes from the isometric rectangle (the SVG path element) an event listener previously registered with
addEventListener
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
| Property | Type | Description |
| --------------- | ------------------ | ------------------------------------------------------------------------ |
| id | string | Gets and sets the id of the isometric rectangle. This property also sets the id of the native SVG
element |
| height | number | Gets and sets the height of the isometric rectangle |
| width | number | Gets and sets the width of the isometric rectangle |
| right | number | Gets and sets the right isometric coordinates of the isometric rectangle |
| left | number | Gets and sets the left isometric coordinates of the isometric rectangle |
| top | number | Gets and sets the top isometric coordinates of the isometric rectangle |
| planeView | string | Gets and sets the plane view in which the isometric rectangle is created |
| fillColor | string | Gets and sets the fill color of the isometric rectangle |
| fillOpacity | number | Gets and sets the fill opacity of the isometric rectangle |
| strokeColor | string | Gets and sets the stroke color of the isometric rectangle |
| strokeOpacity | number | Gets and sets the stroke opacity of the isometric rectangle |
| strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric rectangle |
| strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric rectangle |
| strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric rectangle |
| strokeWidth | number | Gets and sets the stroke width of the isometric rectangle |
| texture | Texture (object
) | Gets and sets the texture of the isometric rectangle |
| drag * | PlaneView (string
) / false | Gets an sets the dragging plane of the isometric rectangle |
| bounds | object / false | Gets an sets the boundaries of the isometric rectangle position |
* When dragging an isometric rectangle, the events
dragstart
,drag
anddragend
will be fired in that order. These events will beCustomEvents
with adetail
property containing theright
,left
andtop
properties that the isometric rectangle will receive. Thedrag
event can be prevented usingpreventDefault
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.
| 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 |
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
| Property | Type | Default value | Description |
| --------------- | -------------------- | -------------------- | ----------------------------------------------------------------- |
| id | string | random | Sets the id of the isometric circle. It also sets the id of the native SVG element |
| radius | number | - | Sets the radius of the isometric circle |
| right | number | 0 | Sets the right isometric coordinates of the isometric circle |
| left | number | 0 | Sets the left isometric coordinates of the isometric circle |
| top | number | 0 | Sets the top isometric coordinates of the isometric circle |
| planeView | PlaneView (string
) | - | Sets the plane view in which the isometric circle will be created |
| fillColor | string | "white" | Sets the fill color of the isometric circle |
| fillOpacity | number | 1 | Sets the fill opacity of the isometric circle |
| strokeColor | string | "black" | Sets the stroke color of the isometric circle |
| strokeOpacity | number | 1 | Sets stroke opacity of the isometric circle |
| strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric circle |
| strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric circle |
| strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric circle |
| strokeWidth | number | 1 | Sets the stroke width of the isometric circle |
| texture | Texture (object
) | - | Sets the texture of the isometric circle |
planeView values
"TOP" | "FRONT" | "SIDE"
texture properties
Object to set the texture of the isometric circle
| 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 circle 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"
All the instance methods (except
getElement
andgetPattern
) 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
| 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 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:
| 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*
* 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)
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
removeEventListener(type, listener, [useCapture])
Removes from the isometric circle (the SVG path element) an event listener previously registered with
addEventListener
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
| Property | Type | Description |
| --------------- | ------------------ | --------------------------------------------------------------------- |
| id | string | Gets and sets the id of the isometric circle. This property also sets the id of the native SVG
element |
| radius | number | Gets and sets the radius of the isometric circle |
| right | number | Gets and sets the right isometric coordinates of the isometric circle |
| left | number | Gets and sets the left isometric coordinates of the isometric circle |
| top | number | Gets and sets the top isometric coordinates of the isometric circle |
| planeView | string | Gets and sets the plane view in which the isometric circle is created |
| fillColor | string | Gets and sets the fill color of the isometric circle |
| fillOpacity | number | Gets and sets the fill opacity of the isometric circle |
| strokeColor | string | Gets and sets the stroke color of the isometric circle |
| strokeOpacity | number | Gets and sets the stroke opacity of the isometric circle |
| strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric circle |
| strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric circle |
| strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric circle |
| strokeWidth | number | Gets and sets the stroke width of the isometric circle |
| texture | Texture (object
) | Gets and sets the texture of the isometric circle |
| drag * | PlaneView (string
) / false | Gets an sets the dragging plane of the isometric circle |
| bounds | object / false | Gets an sets the boundaries of the isometric circle position |
* When dragging an isometric circle, the events
dragstart
,drag
anddragend
will be fired in that order. These events will beCustomEvents
with adetail
property containing theright
,left
andtop
properties that the isometric circle will receive. Thedrag
event can be prevented usingpreventDefault
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.
| 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 |
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
| Property | Type | Default value | Description |
| --------------- | -------------------- | -------------------- | ----------------------------------------------------------------------- |
| id | string | random | Sets the id of the isometric star polygon. It also sets the id of the native SVG element |
| radius | number | - | Sets the radius of the isometric star polygon |
| points | number | - | Sets the number of points of the isometric star polygon |
| density | number | - | Sets the density of the isometric star polygon |
| rotation | number | - | Sets the rotation of the isometric star polygon |
| right | number | 0 | Sets the right isometric coordinates of the isometric star polygon |
| left | number | 0 | Sets the left isometric coordinates of the isometric star polygon |
| top | number | 0 | Sets the top isometric coordinates of the isometric star polygon |
| planeView | PlaneView (string
) | - | Sets the plane view in which the isometric star polygon will be created |
| fillColor | string | "white" | Sets the fill color of the isometric star polygon |
| fillOpacity | number | 1 | Sets the fill opacity of the isometric star polygon |
| strokeColor | string | "black" | Sets the stroke color of the isometric star polygon |
| strokeOpacity | number | 1 | Sets stroke opacity of the isometric star polygon |
| strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric star polygon |
| strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric star polygon |
| strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric star polygon |
| strokeWidth | number | 1 | Sets the stroke width of the isometric star polygon |
| texture | Texture (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
| 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 star polygon 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"
All the instance methods (except
getElement
andgetPattern
) 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 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:
| 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*
- 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)
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
removeEventListener(type, listener, [useCapture])
Removes from the isometric star polygon (the SVG path element) an event listener previously registered with
addEventListener
| Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |
| Property | Type | Description |
| --------------- | ------------------ | --------------------------------------------------------------------------- |
| id | string | Gets and sets the id of the isometric star polygon. This property also sets the id of the native SVG
element |
| radius | number | Gets and sets the radius of the isometric star polygon |
| rotation | number | Gets and sets the rotation of the isometric star polygon |
| points | number | Gets and sets the number of points of the isometric star polygon |
| density | number | Gets and sets the density of the isometric star polygon |
| right | number | Gets and sets the right isometric coordinates of the isometric star polygon |
| left | number | Gets and sets the left isometric coordinates of the isometric star polygon |
| top | number | Gets and sets the top isometric coordinates of the isometric star polygon |
| planeView | string | Gets and sets the plane view in which the isometric star polygon is created |
| fillColor | string | Gets and sets the fill color of the isometric star polygon |
| fillOpacity | number | Gets and sets the fill opacity of the isometric star polygon |
| strokeColor | string | Gets and sets the stroke color of the isometric star polygon |
| strokeOpacity | number | Gets and sets the stroke opacity of the isometric star polygon |
| strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric star polygon |
| strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric star polygon |
| strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric star polygon |
| strokeWidth | number | Gets and sets the stroke width of the isometric star polygon |
| texture | Texture (object
) | Gets and sets the texture of the isometric star polygon |
| drag * | PlaneView (string
) / false | Gets an sets the dragging plane of the isometric star polygon |
| bounds | object / false | Gets an sets the boundaries of the isometric star polygon position |
* When dragging an isometric star polygon, the events
dragstart
,drag
anddragend
will be fired in that order. These events will beCustomEvents
with adetail
property containing theright
,left
andtop
properties that the isometric star polygon will receive. Thedrag
event can be prevented usingpreventDefault
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.
| 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 |
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
| Property | Type | Default value | Description |
| --------------- | -------------------- | -------------------- | -------------------------------------------------------------------- |
| id | string | random | Sets the id of the isometric pentagram. It also sets the id of the native SVG element |
| 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