Skip to content

Latest commit

 

History

History
2363 lines (1741 loc) · 116 KB

API.md

File metadata and controls

2363 lines (1741 loc) · 116 KB
Raw

Classes

ResizeBox
ResizeBoxEventListener
RotateBox
RotateBoxEventListener
SmartPoint
SmartShape
SmartShapeDrawHelper
SmartShapeEventListener
SmartShapeGroupHelper
SmartShapeManager
EventsManager

Members

point : SmartPoint

The point object to manage menu for

Constants

mapPointCords ⇒ array

Method used to transform specified coordinates using transformations, specified in params argument.

Functions

scaleTo(width, height)

Scales image to fit specified width and height. It only changes coordinates of points, but do not redraws the shape on new position. So, you need to call redraw yourself after scale.

scaleBy(scaleX, scaleY, includeChildren)

Method used to scale the shape by specified ratio by X and Y

zoomBy(level)

Method used to zoom shape by specified level

rotateBy(angle, centerX, centerY, checkBounds)

Method used to rotate this shape by specified angle around it's center.

flip(byX, byY, includeChildren)

Method used to flip shape and its children vertically or horizontally

pngChunkGet(png, chunkName) ⇒ Promise.<(DataView|null)>
pngChunkSet(png, chunkName, data) ⇒ Promise.<Blob>
chunkSet(pngData, chunkNameUint32, data) ⇒ Blob
chunkGet(pngData, chunkNameUint32) ⇒ DataView | null
toUit32(chunkName) ⇒ number

ResizeBox

Kind: global class

new ResizeBox()

Class represents a special type of shape, that shows the rectangle with markers on it corners, used to resize it. See demo. Mostly used to resize SmartShape object, but also can be used as an independent shape for tasks like resizing objects on a web page or select rectangular regions.

resizeBox.left : number

Left corner of resize box

Kind: instance property of ResizeBox

resizeBox.top : number

Top corner of resize box

Kind: instance property of ResizeBox

resizeBox.right : number

Right corner of resize box

Kind: instance property of ResizeBox

resizeBox.bottom : number

Bottom corner of resize box

Kind: instance property of ResizeBox

resizeBox.width : number

Width of resize box

Kind: instance property of ResizeBox

resizeBox.height : number

Height of resize box

Kind: instance property of ResizeBox

resizeBox.shape : SmartShape

Underlying shape, that used to service this resize box (draw, point event handling and so on)

Kind: instance property of ResizeBox

resizeBox.guid : string

Global unique identifier of this object. Generated automatically

Kind: instance property of ResizeBox

resizeBox.options : object

Options of resize box

Kind: instance property of ResizeBox

Param Type Description
id string Unique ID or resize box. If instantiated by SmartShape, then setup automatically
shapeOptions object Options of underlying shape, that used to draw and manage this ResizeBox. See SmartShape.options
zIndex number Order of element in a stack of HTML elements (https://www.w3schools.com/cssref/pr_pos_z-index.asp). Elements if higher z-index value placed on top.
onlyMove boolean If enabled, then resizeBox displayed as hidden. It's possible to drag it, but but not resize

resizeBox.eventListener : ResizeBoxEventListener

Event listener that handles event listening logic for this resize box. Instance of ResizeBoxEventListener class.

Kind: instance property of ResizeBox

resizeBox.left_top : SmartPoint

Left top marker point

Kind: instance property of ResizeBox

resizeBox.left_center : SmartPoint

Left center marker point

Kind: instance property of ResizeBox

resizeBox.left_bottom : SmartPoint

Left bottom marker point

Kind: instance property of ResizeBox

resizeBox.center_top : SmartPoint

Center top marker point

Kind: instance property of ResizeBox

resizeBox.center_bottom : SmartPoint

Center bottom marker point

Kind: instance property of ResizeBox

resizeBox.right_top : SmartPoint

Right top marker point

Kind: instance property of ResizeBox

resizeBox.right_center : SmartPoint

Right center marker point

Kind: instance property of ResizeBox

resizeBox.right_bottom : SmartPoint

Right bottom marker point

Kind: instance property of ResizeBox

resizeBox.init(root, left, top, width, height, options) ⇒ ResizeBox

Method used to construct ResizeBox object with specified coordinates and size, with specified options. Then it binds this object to specified root HTML node and displays it

Kind: instance method of ResizeBox
Returns: ResizeBox - constucted ResizeBox object

Param Type Description
root HTMLElement HTML element that used as a container for this ResizeBox
left number Left corner of shape relative to container top left
top number Top corner of shape relative to container top left
width number Width of shape
height number Height of shape
options object Options used to setup ResizeBox. See here.

resizeBox.setOptions(options)

Method used to change options of ResizeBox.

Kind: instance method of ResizeBox

Param Type Description
options object Options object. See here.

resizeBox.getPosition() ⇒ object

Method used to get current position of Resize Box

Kind: instance method of ResizeBox
Returns: object - Position with fields: top,left,right,bottom,width,height

resizeBox.redraw()

Method used to redraw resize box

Kind: instance method of ResizeBox

resizeBox.show()

Method used to show Resize Box if it has hidden

Kind: instance method of ResizeBox

resizeBox.hide()

Method used to hide Resize Box

Kind: instance method of ResizeBox

resizeBox.destroy()

Destroys the ResizeBox. Destroys all points, removes event listeners and removes the shape from screen. But variable continue existing. To completely remove the shape, set the variable to 'null' after calling this method.

Kind: instance method of ResizeBox

resizeBox.addEventListener(eventName, handler) ⇒ function

Uniform method that used to add event handler of specified type to this object. ResizeBox can emit events, defined in ResizeBoxEvents enumeration. So, you can listen any of these events.

Kind: instance method of ResizeBox
Returns: function - - Pointer to added event handler. Should be used to remove event listener later.

Param Type Description
eventName string Name of event. Use one of names, defined in ResizeBoxEvents
handler function Function that used as an event handler

resizeBox.removeEventListener(eventName, listener)

Uniform method that used to remove event handler, that previously added to this object.

Kind: instance method of ResizeBox

Param Type Description
eventName ResizeBoxEvents | string Name of event to remove listener from
listener function Pointer to event listener, that added previously. It was returned from addEventListener method.

ResizeBoxEventListener

Kind: global class

new ResizeBoxEventListener(resizeBox)

Internal helper class, that contains all event listening logic for the ResizeBox. This class should not be used directly. Each ResizeBox creates an instance of this class automatically during init process

Param Type Description
resizeBox ResizeBox Link to owner Shape instance

RotateBox

Kind: global class

new RotateBox()

Class represents a special type of shape, that shows the rectangle with markers on it corners, used to rotate it. See demo. Mostly used to rotate SmartShape object, but also can be used as an independent shape for tasks like rotating objects on a web page or select rectangular regions.

rotateBox.left : number

Left corner of rotate box

Kind: instance property of RotateBox

rotateBox.top : number

Top corner of rotate box

Kind: instance property of RotateBox

rotateBox.right : number

Right corner of rotate box

Kind: instance property of RotateBox

rotateBox.bottom : number

Bottom corner of rotate box

Kind: instance property of RotateBox

rotateBox.width : number

Width of rotate box

Kind: instance property of RotateBox

rotateBox.height : number

Height of rotate box

Kind: instance property of RotateBox

rotateBox.shape : SmartShape

Underlying shape, that used to service this rotate box (draw, point event handling and so on)

Kind: instance property of RotateBox

rotateBox.guid : string

Global unique identifier of this object. Generated automatically

Kind: instance property of RotateBox

rotateBox.options : object

Options of rotate box

Kind: instance property of RotateBox

Param Type Description
id string Unique ID or rotate box. If instantiated by SmartShape, then setup automatically
shapeOptions object Options of underlying shape, that used to draw and manage this RotateBox. See SmartShape.options
zIndex number Order of element in a stack of HTML elements (https://www.w3schools.com/cssref/pr_pos_z-index.asp). Elements if higher z-index value placed on top.

rotateBox.eventListener : RotateBoxEventListener

Event listener that handles event listening logic for this rotate box. Instance of ResizeBoxEventListener class.

Kind: instance property of RotateBox

rotateBox.left_top : SmartPoint

Left top marker point

Kind: instance property of RotateBox

rotateBox.left_bottom : SmartPoint

Left bottom marker point

Kind: instance property of RotateBox

rotateBox.right_top : SmartPoint

Right top marker point

Kind: instance property of RotateBox

rotateBox.right_bottom : SmartPoint

Right bottom marker point

Kind: instance property of RotateBox

rotateBox.init(root, left, top, width, height, options) ⇒ RotateBox

Method used to construct RotateBox object with specified coordinates and size, with specified options. Then it binds this object to specified root HTML node and displays it

Kind: instance method of RotateBox
Returns: RotateBox - constucted RotateBox object

Param Type Description
root HTMLElement HTML element that used as a container for this RotateBox
left number Left corner of shape relative to container top left
top number Top corner of shape relative to container top left
width number Width of shape
height number Height of shape
options object Options used to setup RotateBox. See here.

rotateBox.setOptions(options)

Method used to change options of RotateBox.

Kind: instance method of RotateBox

Param Type Description
options object Options object. See here.

rotateBox.getPosition() ⇒ object

Method used to get current position of Rotate Box

Kind: instance method of RotateBox
Returns: object - Position with fields: top,left,right,bottom,width,height

rotateBox.redraw()

Method used to redraw rotate box

Kind: instance method of RotateBox

rotateBox.show()

Method used to show Rotate Box if it has hidden

Kind: instance method of RotateBox

rotateBox.hide()

Method used to hide Rotate Box

Kind: instance method of RotateBox

rotateBox.destroy()

Destroys the RotateBox. Destroys all points, removes event listeners and removes the shape from screen. But variable continue existing. To completely remove the shape, set the variable to 'null' after calling this method.

Kind: instance method of RotateBox

rotateBox.addEventListener(eventName, handler) ⇒ function

Uniform method that used to add event handler of specified type to this object. RotateBox can emit events, defined in RotateBoxEvents enumeration. So, you can listen any of these events.

Kind: instance method of RotateBox
Returns: function - - Pointer to added event handler. Should be used to remove event listener later.

Param Type Description
eventName string Name of event. Use one of name, defined in RotateBoxEvents
handler function Function that used as an event handler

rotateBox.removeEventListener(eventName, listener)

Uniform method that used to remove event handler, that previously added to this object.

Kind: instance method of RotateBox

Param Type Description
eventName RotateBoxEvents | string Name of event to remove listener from
listener function Pointer to event listener, that added previously. It was returned from addEventListener method.

RotateBoxEventListener

Kind: global class

new RotateBoxEventListener(rotateBox)

Internal helper class, that contains all event listening logic for the RotateBox. This class should not be used directly. Each RotateBox creates an instance of this class automatically during init process

Param Type Description
rotateBox RotateBox Link to owner Shape instance

SmartPoint

Kind: global class

new SmartPoint()

Class that represents a single point on the screen. Can be created directly using class constructor, but more often they added by using addPoint, addPoints methods of SmartShape class or interactively using SmartShape context menu.

Returns: object - SmartPoint object that should be initialized by init method.

smartPoint.options : Object

Point HTML element options. Defines look and behavior of point. Has the following parameters.

Kind: instance property of SmartPoint

Param Type Description
id string Id of point HTML element. Default empty.
width number Width of point in pixels. Default: 10.
height number Height of point in pixels. Default 10.
classes string CSS class or classes of point, delimited by comma. Default empty.
style object CSS styles, that override classes. Must be provided as an object. Default see in code. (The same as "style" HTML attribute)
canDrag boolean Is it allowed to drag this point by mouse to change it positions. Default true
canDelete boolean Is it allowed to delete this point by right mouse click. Default true.
zIndex number Order of element in a stack of HTML elements (https://www.w3schools.com/cssref/pr_pos_z-index.asp). Elements if higher z-index value placed on top.
bounds object Bounds for point movement. If setup, then it's impossible to drag point beyond bounds. It must be an object of the following format: {left:number,top:number,right:number,bottom:number}. If created using SmartShape, then it automatically set this object to the dimensions of shape's container.
moveDirections array . Defines in which directions point can move. Can contain values from PointMoveDirections enumeration. By default, all directions allowed. Default value is: [PointMoveDirections.LEFT,PointMoveDirections.TOP,PointMoveDirections.RIGHT, PointMoveDirections.BOTTOM]. To restrict movement in any direction, need to remove some directions from this array.
visible boolean Point is visible or not. By default, true.
forceDisplay boolean If this option enabled, than this point displayed all the time, even if shape is not in SCALE or ROTATE mode. By default, if the shape is in DEFAULT mode, then points not displayed on it.
createDOMElement boolean Should HTML element for this point created by default. "false" by default

smartPoint.x : number

X coordinate of point, relative to a corner of shape's container

Kind: instance property of SmartPoint

smartPoint.y : number

Y coordinate of point, relative to a corner of shape's container

Kind: instance property of SmartPoint

smartPoint.element : HTMLElement

HTML DOM node of element, which used to display the point. This is styled DIV element.

Kind: instance property of SmartPoint

smartPoint.guid : string

Internal global unique identifier of point. Generated automatically.

Kind: instance property of SmartPoint

smartPoint.init(x, y, options) ⇒ object

Initializes new point and displays it on the screen.

Kind: instance method of SmartPoint
Returns: object - constructed SmartPoint object

Param Type Description
x number X coordinate of point relative to shape's container left
y number Y coordinate of point relative to shape's container top
options object Point options, described above. If not specified, then SmartShape.options.pointOptions used or global default options for point.

smartPoint.setOptions(options)

Method used to set specified options to point.

Kind: instance method of SmartPoint

Param Type Description
options object Point options object, described above.

smartPoint.redraw()

Method used to redraw the point. Usually used after change point position on the screen.

Kind: instance method of SmartPoint

smartPoint.show()

Method used to display point if it has hidden

Kind: instance method of SmartPoint

smartPoint.hide()

Method used to hide point

Kind: instance method of SmartPoint

smartPoint.toJSON() ⇒ string

Method used to serialize point to JSON string

Kind: instance method of SmartPoint
Returns: string - JSON string with serialized point object

smartPoint.fromJSON(json) ⇒ SmartPoint

Method used to construct point object from JSON string representation, received by using toJSON() method.

Kind: instance method of SmartPoint
Returns: SmartPoint - constructed point or null in case of error

Param Type Description
json string JSON-serialized point object as an object or as a string

smartPoint.destroy()

Method used to destroy the point. Removes event listeners from point element and raises the point_destroyed event. This event then intercepted by owner shape. Then owner shape removes this point from shape's points array.

Kind: instance method of SmartPoint

smartPoint.addEventListener(eventName, handler) ⇒ function

Uniform method that used to add event handler of specified type to this object. SmartPoint can emit events, defined in PointEvents enumeration. So, you can listen any of these events.

Kind: instance method of SmartPoint
Returns: function - - Pointer to added event handler. Should be used to remove event listener later.

Param Type Description
eventName string Name of event. Use one of names, defined in PointEvents
handler function Function that used as an event handler

smartPoint.removeEventListener(eventName, listener)

Uniform method that used to remove event handler, that previously added to this object.

Kind: instance method of SmartPoint

Param Type Description
eventName string Name of event to remove listener from
listener function Pointer to event listener, that added previously. It was returned from addEventListener method.

smartPoint.distance(point) ⇒ number

Method returns a distance from this point to other specified point

Kind: instance method of SmartPoint
Returns: number - Distance from this point to specified point

Param Type Description
point SmartPoint Distant point

SmartShape

Kind: global class

new SmartShape()

SmartShape class. Used to construct shapes.

Returns: SmartShape object that should be initialised using init method.

smartShape.root : HTMLElement

The HTML container element to which the shape will be injected. This can be any block element, that can have children (div,span etc.)

Kind: instance property of SmartShape

smartShape.points : array

Array of points of shape polygon. Each item of array is SmartPoint object.

Kind: instance property of SmartShape

smartShape.svg : HTMLOrSVGElement

SVG element, which used as a backend for shape. SmartShape constructs SVG element based on provided point coordinates and options.

Kind: instance property of SmartShape

smartShape.polygon : HTMLOrSVGElement

SVG element, which used as a backend for shape. SVG Polygon element that defines a shape inside element

Kind: instance property of SmartShape

smartShape.groupHelper : SmartShapeGroupHelper

Helper object that used to manage children shapes of this shape

Kind: instance property of SmartShape

smartShape.options : object

Options of shape as an object. Can have the following parameters.

Kind: instance property of SmartShape
Parap: zoomStep {number} Defines to which extend the shape will be increased/decreased when apply Zoom in/Zoom out command from menu or drag mouse wheel. By default 0.1 . to the bottom. Helps to move entire figure without need to change coordinates of each point. Default: 0

Param Type Description
id string Unique ID of shape's SVG HTML element. By default, empty.
name string Name of shape. By default, Unnamed shape
maxPoints number Number of points, which possible to add to the shape interactively. By default -1, which means Unlimited
style object CSS styles, that will be applied to underlying polygon SVG element. Using CSS styles and classes is an alternative way to specify options of SVG elements: https://jenkov.com/tutorials/svg/svg-and-css.html, https://css-tricks.com/svg-properties-and-css/
fillGradient object Defines gradient object, that should be used to fill the shape. This could be either linear gradient or radial gradient. To make it work, it's required to set 'fill:#gradient' inside style. See demo here.
fillImage object Defines image fill object to fill the shape with image. Should contain following fields: href - URL to image, width - width of image, height - height of image To make image fill work, it's required to set 'fill:#image' inside style See demo here.
filters object Object, that defines a set of SVG filters, that will be applied to this shape. Keys are names of filters, for example feDropShadow for drop-shadow filter. Values are objects with attributes for each filter. All attributes, that supported by each particular SVG filter are supported. See more about SVG filters here. The demo of applying feDropShadow filter see here
classes string CSS class names, that will be applied to underlying polygon SVG element.
canDragShape boolean Is it allowed to drag shape. Default true.
canAddPoints boolean Is it allowed to add points to the shape interactively, by mouse double-click on the screen. Default false.
canScale boolean Is it allowed to scale this shape. If true, then ResizeBox appears around shape and user can drag it to resize shape in different directions
canRotate boolean Is it allowed to rotate this shape. If true, then RotateBox appears around shape and user can drag it to rotate shape in different directions
pointOptions object Default options for created points. See options property of SmartPoint object.
zIndex number Order of element in a stack of HTML elements (https://www.w3schools.com/cssref/pr_pos_z-index.asp). Elements if higher z-index value placed on top.
bounds object Bounds for shape movement and points dragging. This is an object with left, top, right and bottom values. By default, all values are equal -1, which means that bounds not specified. If bounds not specified, then left, top, right and bottom of container element will be used for this
visible boolean Shape is visible or not. By default, true.
displayMode SmartShapeDisplayMode In which mode the shape is displayed: default mode or with resize or rotate box around it. See SmartShapeDisplayMode
managed boolean Should this shape be managed by SmartShapeManager. Default: true
minWidth number Minimum width of shape. By default -1 - unlimited
minHeight number Minimum height of shape. By default -1 - unlimited
maxWidth number Maximum width of shape. By default -1 - unlimited
maxHeight number Maximum width of shape. By default -1 - unlimited
hasContextMenu boolean Should the shape have context menu. False by default
minPoints number Minimum number of points in the shape. Default: 3.
groupChildShapes boolean Should child shapes be grouped and move/resize/rotate/destroy together. True by default
moveToTop boolean Should shape go to top based on "zIndex" when user clicks on it. True by default
compactExport boolean If this is true, then it will save only coordinates of points, but not their properties during export to JSON using .toJSON() method
forceCreateEvent boolean Internal parameter used by JSON import. By default, if shape does not have point when create, it does not emit SHAPE_CREATE event on init() method. If this option set to true, then init() methods emits SHAPE_CREATE event event for empty shapes.
initialPoints array 2D array of initial coordinates of points in format [ [x,y], [x,y] ...] If this shape loaded from external resource and then modified, this array is a way to return back to initial coordinates
zoomLevel number Current zoom level of shape. By default it is 1, which means that shape is not zoomed. If less than 1, than shape decreased, if greater than 1, then shape increased. to the bottom. Helps to move entire figure without need to change coordinates of each point. Default: 0
zoomable boolean Determines if shape can be zoomed in or out using context menu or mouse wheel. True by default
offsetX number Offset on X axis that shape moved from initial position when initially loaded from external source.
offsetY number Offset on Y axis that shape moved from initial position when initially loaded.
displayAsPath boolean Should display all children of shape as a single SVG path. Default - false.
simpleMode boolean Simple load mode (do not create point objects)
scaleFactorX number Scaling factor that shows to which extent the shape was scaled in current moment after create by X axis. By default 1 (not scaled)
scaleFactorY number Scaling factor that shows to which extent the shape was scaled in current moment after create by Y axis. By default 1 (not scaled)
flippedX boolean Shows that the shape was flipped by X axis after create. By default false.
flippedY boolean Shows that the shape was flipped by Y axis after create. By default false.
rotateAngle number Shows the angle to which the shape was rotated after create. By default 0.

smartShape.left : number

Left position of the shape relative to container top left. (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.top : number

Top position of the shape relative to container top left. (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.right : number

Right position of the shape relative to container top left. (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.bottom : number

Bottom position of the shape relative to container top left. (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.width : number

Width of shape (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.height : number

Height of shape (Read-only, calculated automatically based on points coordinates)

Kind: instance property of SmartShape

smartShape.guid : string

Internal global unique identifier of shape. Generated automatically.

Kind: instance property of SmartShape

smartShape.children : array

Array of children of current shape

Kind: instance property of SmartShape

smartShape.resizeBox : ResizeBox

ResizeBox component, used to scale shape if canScale option enabled

Kind: instance property of SmartShape

smartShape.rotateBox : RotateBox

RotateBox component, used to rotate shape if canRotate option enabled

Kind: instance property of SmartShape

smartShape.initCenter : array

Initial center of shape, when user started rotating the shape using Rotate Box

Kind: instance property of SmartShape

smartShape.shapeMenu : SmartShapeContextMenu

Context menu of shape that appear on right mouse click if hasContextMenu option is true

Kind: instance property of SmartShape

smartShape.transformer : SmartShapeTransformer

Helper class that contains all methods for shape transofrmations

Kind: instance property of SmartShape

smartShape.init(root, options, points, show) ⇒ object

Method used to construct SmartShape object with specified points and with specified options. Then it binds this object to specified root HTML node and displays it

Kind: instance method of SmartShape
Returns: object - constructed SmartShape object

Param Type Description
root HTMLElement HTML DOM node af a container element
options object Options object to construct this shape (see above)
points array 2D Array of points for shape polygon. Each element is [x,y] coordinate array
show boolean Should display the shape by default. Default: true

smartShape.setOptions(options)

Set specified options to the shape. You may not set all options, that exist, but only what you want to change. Options that you set by this method will be merged with already active options.

Kind: instance method of SmartShape

Param Type Description
options object Options object, described above

smartShape.addPoint(x, y, pointOptions) ⇒ object

Add point to shape.

Kind: instance method of SmartShape
Returns: object - SmartPoint object of added point

Param Type Description
x number X coordinate relative to container left corner
y number Y coordinate relative to container top corner
pointOptions object Array of point options. Described in SmartPoint.options. Can be empty, in this case default SmartShape.options.pointOptions will be used, or default options of SmartPoint class itself.

smartShape.insertPoint(x, y, beforePoint, pointOptions) ⇒ object

Insert point to shape before specified point

Kind: instance method of SmartShape
Returns: object - SmartPoint object of added point

Param Type Description
x number X coordinate relative to container left corner
y number Y coordinate relative to container top corner
beforePoint array | SmartPoint Coordinates of point as [x,y] array or as a SmartPoint object, before which point should be inserted
pointOptions object Array of point options. Described in SmartPoint.options. Can be empty, in this case default SmartShape.options.pointOptions will be used, or default options of SmartPoint class itself.

smartShape.addPoints(points, pointOptions)

Adds specified points to shape.

Kind: instance method of SmartShape

Param Type Description
points array 2D array of points to add. Each point is array of [x,y] coordinates
pointOptions object Points options. Described in SmartPoint.options. Can be empty, in this case default SmartShape.options.pointOptions will be used, or default options of SmartPoint class itself.

smartShape.getClosestPoint(x, y, points) ⇒ null | Object | *

Method returns the closest point from specified array of points or all points of this shape to specified x,y coordinates.

Kind: instance method of SmartShape

Param Type Description
x number X coordinate
y number Y coordinate
points array Array of coordinates of points to. Each coordinate is [x,y] array. If not specified then all points of this shapes used.

smartShape.getPointIndex(point) ⇒ number

Method returns and index of specified point in points array

Kind: instance method of SmartShape
Returns: number - Index of point or -1 if not found

Param Type Description
point array | SmartPoint Point to find index for. Can be specified either as coordinates array [x,y] or as a SmartPoint object

smartShape.deleteAllPoints()

Method used to delete all points from shape

Kind: instance method of SmartShape

smartShape.deletePoint(x, y)

Method used to delete point with specified coordinates. If point with specified coordinates not found then just do nothing

Kind: instance method of SmartShape

Param Type Description
x number X coordinate of point
y number Y coordinate of point

smartShape.findPoint(x, y) ⇒ null | object

Method returns SmartPoint object of point with specified coordinates or null, if point not found

Kind: instance method of SmartShape
Returns: null | object - SmartPoint object instance of point, or null if point does not exist

Param Type Description
x number X coordinate of point
y number Y coordinate of point

smartShape.findPointById(id) ⇒ null | object

Method returns SmartPoint object for point with specified ID or null, if point not found

Kind: instance method of SmartShape
Returns: null | object - SmartPoint object instance of point, or null if point does not exist

Param Type Description
id string ID of point, provided to it as an options

smartShape.getPointsArray() ⇒ array

Returns 2D array of points coordinates in format [ [x,y], [x,y], [x,y] ... ].

Kind: instance method of SmartShape
Returns: array - 2D array of points in format [ [x,y], [x,y], [x,y] ... ]

smartShape.moveTo(x, y, redraw, respectBounds, fast)

Moves shape to specific position. It only changes coordinates of points, but do not redraw the shape on new position. So, you need to call redraw yourself after move.

Kind: instance method of SmartShape

Param Type Description
x number new X coordinate
y number new Y coordinate
redraw boolean should the function redraw the shape after move. True by default
respectBounds boolean should the function disallow to move beyond defined shape bounds
fast boolean if true, then only change shape dimensions without recalculate points

smartShape.moveBy(stepX, stepY, redraw, fast)

Moves shape by specified number of pixels by X and Y.

Kind: instance method of SmartShape

Param Type Description
stepX number number of pixels to move horizontally
stepY number number of pixes to move vertically
redraw boolean should the function redraw the shape after move. True by default
fast boolean if true, then only change shape dimensions without recalculate points

smartShape.scaleTo(width, height)

Scales image to fit specified width and height. It only changes coordinates of points, but do not redraws the shape on new position. So, you need to call redraw yourself after scale.

Kind: instance method of SmartShape

Param Type Description
width number | null new width. If not specified, then will be calculated automatically based on height to preserve aspect ratio
height number | null new height. If not specifie, then will be calculated automatically based on width to preserve aspect ratio

smartShape.scaleBy(scaleX, scaleY, includeChildren)

Method used to scale the shape by specified ratio by X and Y

Kind: instance method of SmartShape

Param Type Description
scaleX number Horizontal scale ratio
scaleY number Vertical scale ratio
includeChildren boolean If true, then children of this shape scaled with it, if not specified then it determined by the groupChildShapes option. if children of shape grouped, then scaled together with it

smartShape.zoomBy(level)

Method used to zoom shape by specified level

Kind: instance method of SmartShape

Param Type Description
level number Zoom level. Can be any positive number. If number is greater than 1, then it increases the size of shape, if it between 0 and 1, then it decreases the shape.

smartShape.rotateBy(angle, centerX, centerY, checkBounds)

Method used to rotate this shape by specified angle around it's center.

Kind: instance method of SmartShape

Param Type Description
angle number Angle in degrees. Positive - clockwise, Negative - counterclock-wise
centerX number X coordinate of center around which to rotate the shape. By default it's a center of the shape
centerY number Y coordinate of center around which to rotate the shape. By default it's a center of the shape
checkBounds boolean Should the function check that shape won't go beyond defined bounds or container bounds after rotation. By default false.

smartShape.flip(byX, byY, includeChildren)

Method used to flip shape and its children vertically or horizontally

Kind: instance method of SmartShape

Param Type Description
byX boolean Flip horizontally
byY boolean Flip vertically
includeChildren boolean Flip includes children shapes

smartShape.moveToTop()

Method used to change shape z-index to topmost

Kind: instance method of SmartShape

smartShape.moveToBottom()

Method used to change shape z-index to bottommost

Kind: instance method of SmartShape

smartShape.changeZIndex(zIndex)

Method used to change shape z-index to specified number

Kind: instance method of SmartShape

Param Type Description
zIndex number z-index value

smartShape.redraw()

Method used to redraw shape polygon. Runs automatically when add/remove points or change their properties.

Kind: instance method of SmartShape

smartShape.switchDisplayMode(mode)

Method used to switch display mode of SmartShape from Default to Resize to Rotate.

Kind: instance method of SmartShape

Param Type Description
mode SmartShapeDisplayMode Display mode to switch to. One of values of SmartShapeDisplayMode. If not specified, then automatically switches to next mode in the following loop sequence: DEFAULT -> SCALE -> ROTATE -> DEFAULT

smartShape.getPosition(forGroup) ⇒ object

Method used to get current position of shape

Kind: instance method of SmartShape
Returns: object - Position with fields: top,left,right,bottom,width,height

Param Type Description
forGroup boolean If true, then it calculates left, top, right and bottom of this shape and all its children

smartShape.getBounds() ⇒ object

Method returns the bounds of this shape, e.g. inside which square it's allowed to drag it. By default, if options.bounds not specified, the bounds of shape are equal to the bounds of shape's container element (clientLeft, clientTop, clientLeft+clientWidth, clientTop+clientHeight)

Kind: instance method of SmartShape
Returns: object - Object with left, top, right and bottom fields.

smartShape.isShapePoint(point) ⇒ boolean

Method returns true if specified point exists in the array of this shape or false if not.

Kind: instance method of SmartShape
Returns: boolean - True if this point exists and false if not

Param Description
point SmartPoint object of point to search

smartShape.belongsToShape(x, y) ⇒ boolean

Method returns true if point with specified coordinates lays inside shape or false otherwise.

Kind: instance method of SmartShape
Returns: boolean - True if (x,y) belongs to shape and false otherwise

Param Type Description
x number X coodrinate
y number Y coordinate

smartShape.addEventListener(eventName, handler) ⇒ function

Uniform method that used to add event handler of specified type to this object. SmartShape can emit events, defined in ShapeEvents enumeration. So, you can listen any of these events.

Kind: instance method of SmartShape
Returns: function - - Pointer to added event handler. Should be used to remove event listener later.

Param Type Description
eventName string Name of event. Use one of names, defined for ShapeEvents.
handler function Function that used as an event handler

smartShape.removeEventListener(eventName, listener)

Uniform method that used to remove event handler, that previously added to this object.

Kind: instance method of SmartShape

Param Type Description
eventName string Name of event to remove listener from
listener function Pointer to event listener, that added previously. It was returned from addEventListener method.

smartShape.show()

Method used to show shape if it has hidden

Kind: instance method of SmartShape

smartShape.hide()

Method used to hide the shape

Kind: instance method of SmartShape

smartShape.destroy()

Destroys the shape. Destroys all points, removes event listeners and removes the shape from screen. But variable continue existing. To completely remove the shape, set the variable to 'null' after calling this method.

Kind: instance method of SmartShape

smartShape.getCenter(forGroup) ⇒ array

Method returns coordinates of the center of the shape.

Kind: instance method of SmartShape
Returns: array - Center of a shape as an array [x,y]

Param Type Description
forGroup boolean Should get center of all shapes in the group. Default: false

smartShape.toSvg(includeChildren) ⇒ string

Method exports shape and all its children to SVG document.

Kind: instance method of SmartShape
Returns: string - Body of SVG document as a string

Param Type Description
includeChildren boolean Should include children of this shape to output. 'null' by default. In this case value of shape.options.groupChildShapes will be used*

smartShape.toPng(type, width, height, includeChildren) ⇒ Promise

Method exports shape and all its children as a PNG image

Kind: instance method of SmartShape
Returns: Promise - Promise that resolves either to DataURL string or to BLOB object, depending on value of type argument

Param Type Description
type PngExportTypes Format of returned result - dataurl or blob. By default dataurl
width number | null Width of image. If not specified, then calculate based on height or current width of shape
height number | null Height of image. If not specified, then calculate based on width or current height of shape
includeChildren boolean Should include children of this shape to output. 'null' by default. In this case value of shape.options.groupChildShapes will be used*

smartShape.toJSON(includeChildren, compact) ⇒ string

Method used to save shape to JSON string. Returns string with JSON object or JSON array, depending on should it save children too

Kind: instance method of SmartShape
Returns: string - Serialized JSON as string.

Param Type Description
includeChildren boolean If true, then it appends JSONs of all children to children property of resulting JSON.
compact boolean If this is true, then it will save only coordinates of points, but not their properties

smartShape.clone(options, includeChildren) ⇒ SmartShape | null

Method creates complete copy of current shape

Kind: instance method of SmartShape
Returns: SmartShape | null - Created shape object or null in case of errors

Param Type Description
options object Array of shape options to override on cloned object.
includeChildren boolean If true, then clones all children of this shape as well Any SmartShape options can be in this object.

smartShape.fromJSON(root, json, includeChildren) ⇒ SmartShape | null

Method used to load shape data from specified JSON string, that previously serialized by toJSON method

Kind: instance method of SmartShape
Returns: SmartShape | null - Loaded SmartShape object or null in case of JSON reading errors

Param Type Description
root HTMLElement HTML container to insert loaded shape
json string | object JSON-Serialized shape data as an object or as a string
includeChildren boolean Should load children of this shape if existed. True by default.

smartShape.addChild(child, emitEvent)

Method used to add specified shape as a child of current shape

Kind: instance method of SmartShape

Param Type Description
child SmartShape Shape to add
emitEvent boolean Should this method emit ADD_CHILD event. True by default

smartShape.addChildren(children)

Method used to add specified children to current shape

Kind: instance method of SmartShape

Param Type Description
children array Array of [SmartShape][#SmartShape) objects

smartShape.removeChild(child)

Method used to remove specified shape from children list of current shape

Kind: instance method of SmartShape

Param Type Description
child SmartShape SmartShape object to add

smartShape.removeAllChildren(all)

Method removes all children of current shape

Kind: instance method of SmartShape

Param Type Description
all boolean If true, then it removes all children hierarchically

smartShape.getChildren(all) ⇒ array

Method returns array of children of current shape

Kind: instance method of SmartShape
Returns: array - Array of SmartShape objects

Param Type Description
all boolean If true, then it returns deep list, including all children of each children of this shape

smartShape.hasChild(child, all)

Method returns if specified shape is child of current shape

Kind: instance method of SmartShape

Param Type Description
child SmartShape Shape to check
all boolean Should check include subchildren

smartShape.getParent() ⇒ SmartShape | null

Method returns parent of current shape or null

Kind: instance method of SmartShape

smartShape.getRootParent() ⇒ SmartShape | null

Method returns top parent of current shape

Kind: instance method of SmartShape
Returns: SmartShape | null - Parent shape or null

smartShape.getParentsList(plist) ⇒ array

Method returns a list of parents of current shape ordered from nearest to root

Kind: instance method of SmartShape
Returns: array - Array of SmartShape objects

Param Type Description
plist array Temporary list of parents from previous recursive call

smartShape.mapCurrentPointToOriginal(x, y) ⇒ array

Method used to transform coordinates of point on current shape to coordinate of points of original shape, before all transformations done on it (move,scale or flip)

Kind: instance method of SmartShape
Returns: array - Array of new coordinates [x,y]

Param Description
x X coordinate
y Y coordinate

smartShape.mapOriginalPointToCurrent(x, y) ⇒ array

Method used to transform coordinates of point of orignal shape to coordinate of points of current shape, after all transformations done on it (move,scale or flip)

Kind: instance method of SmartShape
Returns: array - Array of new coordinates [x,y]

Param Description
x X coordinate
y Y coordinate

SmartShapeDrawHelper

Kind: global class

new SmartShapeDrawHelper()

Internal helper class that used to draw shape. Should not be used directly. SmartShape objects execute methods of this object when need to draw shapes.

SmartShapeEventListener

Kind: global class

new SmartShapeEventListener(shape)

Internal helper class, that contains all event listening logic for the shape. This class should not be used directly. Each shape creates an instance of this class automatically during init process

Param Type Description
shape SmartShape Link to owner Shape instance

SmartShapeGroupHelper

Kind: global class

new SmartShapeGroupHelper(shape)

Class used as an extension to SmartShape class to add shape groups functionality. The feature works the following way:

Each shape can have a children shapes. If shape has children, then all actions, that user do with the shape propagated to all children: when user drags the shape, all children draged with it, if user resizes the shape, then all children resized with it. If user rotates the shape, then all shapes rotates with it.

You should not use this class directly. SmartShape class instantiates it. When init, this class extends provided SmartShape object by adding all it's methods to it and then you can use them right from your SmartShape instance. For example, methods addChild and removeChild declared here can be used right from SmartShape object, e.g. shape.addChild(child), shape.removeChild(child) and all other methods, declared here.

Param Type Description
shape SmartShape SmartShape object to extend

smartShapeGroupHelper.shape : SmartShape

SmartShape object to extend

Kind: instance property of SmartShapeGroupHelper

SmartShapeManager

Kind: global class

new SmartShapeManager()

Object that keeps collection of shapes and keep track of their activity. This object is instantiated automatically by when first shape created. Then it listens lifecycle events of shapes to keep their collection, correctly switch activity status and handle other global events related to shapes and their containers

smartShapeManager.shapes : object

Collection of SmartShape's objects. Each object indexed by GUID

Kind: instance property of SmartShapeManager

smartShapeManager.visibleShapes : object

Collection of SmartShape's objects that are visible now. Each object indexed by GUID

Kind: instance property of SmartShapeManager

smartShapeManager.activeShape : SmartShape

Which shape is currently selected

Kind: instance property of SmartShapeManager

smartShapeManager.draggedShape : SmartShape

Which shape user is currently dragging

Kind: instance property of SmartShapeManager

smartShapeManager.shapeOnCursor : SmartShape

The shape under mouse cursor

Kind: instance property of SmartShapeManager

smartShapeManager.containerEventListeners : array

List of event listeners, attached to containers of shapes in format {container: DOM-link to container, name: name of event, listener: handler function}

Kind: instance property of SmartShapeManager

smartShapeManager.createShape(root, options, points, show) ⇒ object

Method used to construct SmartShape object with specified points and with specified options. Then it binds this object to specified root HTML node and displays it

Kind: instance method of SmartShapeManager
Returns: object - constructed SmartShape object

Param Type Description
root HTMLElement HTML DOM node af a container element
options object Options object to construct this shape (See SmartShape options)
points array 2D Array of points for shape polygon. Each element is [x,y] coordinate array
show boolean Should display the shape by default. Default: true

smartShapeManager.findShapeByPoint(point) ⇒ null | SmartShape

Method returns a shape to which specified point object belongs or null

Kind: instance method of SmartShapeManager

Param Type
point SmartPoint

smartShapeManager.getShapeByGuid(guid) ⇒ null | SmartShape

Returns shape by GUID

Kind: instance method of SmartShapeManager
Returns: null | SmartShape - The shape object

Param Type Description
guid string GUID of shape

smartShapeManager.getShapesByContainer(container) ⇒ array

Returns an array of shapes that connected to specified DOM container

Kind: instance method of SmartShapeManager
Returns: array - Array of SmartShape objects

Param Type Description
container HTMLElement Link to container

smartShapeManager.getMaxZIndex(container) ⇒ number

Method returns zIndex of the topmost shape either in specified container or globally

Kind: instance method of SmartShapeManager
Returns: number - zIndex of the topmost shape

Param Type Description
container HTMLElement | null Container to search in or null if search through all shapes

smartShapeManager.getMinZIndex(container) ⇒ number

Method returns zIndex of the bottommost shape either in specified container or globally

Kind: instance method of SmartShapeManager
Returns: number - zIndex of the bottommost shape

Param Type Description
container HTMLElement | null Container to search in or null if search through all shapes

smartShapeManager.getShapes() ⇒ array

Method returns an array of all registered shapes (excluding rotate and resize boxes around them)

Kind: instance method of SmartShapeManager
Returns: array - Array of [SmartShape)(#SmartShape) objects

smartShapeManager.activateShape(shape, displayMode)

Method used to make specified shape active and move it on top according to zIndex

Kind: instance method of SmartShapeManager

Param Type Description
shape SmartShape Shape to activate
displayMode SmartShapeDisplayMode In which mode to activate the shape (by default select next mode)

smartShapeManager.addContainerEvent(container, eventName, handler)

Method adds event handler of specified event of specified HTML container.

Kind: instance method of SmartShapeManager

Param Type Description
container object Container
eventName string Name of event
handler function Event handling function

smartShapeManager.getShapeOnCursor(x, y) ⇒ SmartShape | null

Internal method used to determine the shape which is under mouse cursor right now.

Kind: instance method of SmartShapeManager
Returns: SmartShape | null - Either SmartShape object or null

Param Type Description
x number X coordinate of mouse cursor
y number Y coordinate of mouse cursor

smartShapeManager.toJSON(shapes, compact) ⇒ string

Method used to export shapes to JSON.

Kind: instance method of SmartShapeManager
Returns: string - JSON string with array of SmartShape objects. If not specified, then exports all shapes, that exists in SmartShapeManager.

Param Type Description
shapes array Array of SmartShape objects to export
compact boolean If this is true, then it will save only coordinates of points, but not their properties

smartShapeManager.fromJSON(root, json, progressCallback) ⇒ array | null

Method loads shapes from JSON string, previously serialized by toJSON method

Kind: instance method of SmartShapeManager
Returns: array | null - array of loaded SmartShape objects or null in case of JSON reading error

Param Type Description
root HTMLElement Container element to bind shapes to
json string | object JSON data with shapes as an object or as a string with array of shape definitions
progressCallback function Callback function that triggered after loading each shape in collection with ratio of processed items between 0 and 1

smartShapeManager.findShapesByOptionValue(name, value) ⇒ array

Method returns all shapes which have option with specified name and specified value

Kind: instance method of SmartShapeManager
Returns: array - Array of SmartShape objects that match condition

Param Type Description
name string Name of option to check
value any Value of option to check

smartShapeManager.findShapeById(id) ⇒ SmartShape | null

Method returns shape by specified ID

Kind: instance method of SmartShapeManager
Returns: SmartShape | null - SmartShape object or null if no shape with specified ID found

Param Type Description
id string ID to check

smartShapeManager.findShapeByName(name) ⇒ SmartShape | null

Method returns shape by specified name

Kind: instance method of SmartShapeManager
Returns: SmartShape | null - SmartShape object or null if no shape with specified name found

Param Type Description
name string Name to check

smartShapeManager.fromGeoJson(container, geoJSON, options, progressCallback) ⇒ array

Method used to import collection of shapes from JSON array in GeoJSON format: https://geojson.org/

Kind: instance method of SmartShapeManager
Returns: array - Array of SmartShape objects

Param Type Description
container HTMLElement The HTML element to connect loaded shapes
geoJSON object Javascript object in geoJSON format
options object Options to tune the import process: idField: the field from "properties collection of GeoJSON object that used as a shape ID, nameField: the field from "properties" collection of GeoJSON object that used as a shape name, width: the width to which loaded shapes should be scaled (if not specified then calc automatically based on height), height: the height to which loaded shapes should be scaled (if not specified then calc automatically based on width), options: shape options SmartShape.options to set to each shape after import scale: scaling factor to which loaded shapes should be scaled (if not specified, width and height used, if nothing specified, then scales to 200px width if natural width is less than this) fields: which other fields to import from GeoJSON, in addition to idField and nameField
progressCallback function Function that executes after loading each shape from file. If specified, it will be executed with three arguments: currentShapeIndex - index of current processed shape, totalShapesLength - total number of shapes in the collection, shape - SmartShape object of currently processed shape.

smartShapeManager.length() ⇒ number

Method returns total count of shapes, managed by this manager

Kind: instance method of SmartShapeManager

EventsManager

Kind: global class

new EventsManager()

Used as a singleton object to emit events and subscribe to these events. One object can subscribe to events of specified type, other object can emit events of this type. Each time when object emits event, all subscribed event handlers triggered.

eventsManager.subscriptions : object

Hashmap of all registered event subscriptions. Keys are event names as strings. Values are arrays of functions. Several handlers can subscribe to each event by providing function that should be triggered. this.subscriptions[event_name] = [handler_func,handler_func ...]

Kind: instance property of EventsManager

eventsManager.subscribe(events, handler) ⇒ function

Add subscription to event of specified type or to array of events of specified types

Kind: instance method of EventsManager
Returns: function - Pointer to handling function, that will be added

Param Type Description
events string | array Name of event as a string or names of events as an array of strings.
handler function Handling function, which will be called each time when event of this type emitted. Each time, when handling function triggered, it receives a single argument - event {object} which contains the following fields: type - type of event (eventType), target - pointer to object, which emitted this event, and also any custom params, that emitter sent with this event by using emit method.

eventsManager.emit(eventName, target, params) ⇒ boolean

Emits event of specified name. Based on specified arguments, it constructs event object, that contains the following fields: type - eventName, target - object that emitted this event and any other fields that received from params argument. Then, all subscribers will receive this event object to their handling functions.

Kind: instance method of EventsManager
Returns: boolean - True if this event triggered at least of one handler, or false if it does not.

Param Type Description
eventName string Name of event to emit.
target object Which object emitted this event.
params object Event specific params. Can be any number of params.

eventsManager.unsubscribe(events, handler) ⇒ boolean

Removes specified handler from event with specified name or from array of events with specified names.

Kind: instance method of EventsManager
Returns: boolean - True if really removed the handler or false if you could not remove because it does not exist

Param Type Description
events string | array Name of event as a string or names of events as an array of strings.
handler function Pointer to a function to remove. (This pointer returned from subscribe method and can be used here to unsubscribe

eventsManager.clear()

Method removes all subscriptions to events.

Kind: instance method of EventsManager

point : SmartPoint

The point object to manage menu for

Kind: global variable

ResizeBoxEvents : enum

Enumeration that defines events, that ResizeBox can emit.

Kind: global enum

Param Type Description
resize ResizeBoxEvents.RESIZE_BOX_RESIZE Emitted when user resized the shape by dragging one of marker points. Event object includes fields oldPos and newPos which are positions of shape before and after resizing. Position is an object with following fields "left,top,right,bottom,width,height"
create ShapeEvents.SHAPE_CREATE Emitted right after shape is created and initialized. Event object contains created shape SmartShape object in a target field
move_start MouseEvent Emitted when user presses left mouse button on shape to start dragging. Standard MouseEvent mousedown object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
move MouseEvent Emitted when user drags shape. Standard MouseEvent mousemove object, but also includes additional properties oldPos - shape position before previous movement. newPos - shape position after previous movement. Position is an object with following fields "left,top,right,bottom,width,height"
move_end MouseEvent Emitted when user releases mouse button to stop drag the shape. Standard MouseEvent mouseup object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
mousemove MouseEvent Emitted when user moves mouse over shape Standard MouseEvent mousemove object
mouseover MouseEvent Emitted when mouse cursor goes inside shape Standard MouseEvent mouseover object
mouseout MouseEvent Emitted when mouse cursor goes away from shape Standard MouseEvent mouseout object
click MouseEvent Emitted when click on shape Standard MouseEvent click object
dblclick MouseEvent Emitted when double-click on shape Standard MouseEvent dblclick object
point_drag_start MouseEvent Emitted when user starts dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_move MouseEvent Emitted when user dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_end MouseEvent Emitted when user finishes dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
destroy ShapeEvents.SHAPE_DESTROY Emitted right before shape is destroyed Event object contains created shape SmartShape object in a target field

RotateBoxEvents : enum

Enumeration that defines events, that RotateBox can emit.

Kind: global enum

Param Type Description
rotate RotateBoxEvents.ROTATE_BOX_ROTATE Emitted when user rotate the shape by dragging one of marker points. The event object of this type contains angle option, which is an angle of rotation in degrees.
create ShapeEvents.SHAPE_CREATE Emitted right after shape is created and initialized. Event object contains created shape SmartShape object in a target field
move_start MouseEvent Emitted when user presses left mouse button on shape to start dragging. Standard MouseEvent mousedown object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
move MouseEvent Emitted when user drags shape. Standard MouseEvent mousemove object, but also includes additional properties oldPos - shape position before previous movement. newPos - shape position after previous movement. Position is an object with following fields "left,top,right,bottom,width,height"
move_end MouseEvent Emitted when user releases mouse button to stop drag the shape. Standard MouseEvent mouseup object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
mousemove MouseEvent Emitted when user moves mouse over shape Standard MouseEvent mousemove object
mouseover MouseEvent Emitted when mouse cursor goes inside shape Standard MouseEvent mouseover object
mouseout MouseEvent Emitted when mouse cursor goes away from shape Standard MouseEvent mouseout object
click MouseEvent Emitted when click on shape Standard MouseEvent click object
dblclick MouseEvent Emitted when double-click on shape Standard MouseEvent dblclick object
point_drag_start MouseEvent Emitted when user starts dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_move MouseEvent Emitted when user dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_end MouseEvent Emitted when user finishes dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
destroy ShapeEvents.SHAPE_DESTROY Emitted right before shape is destroyed Event object contains created shape SmartShape object in a target field

PointEvents : enum

Enumeration of event names, that can be emitted by SmartPoint object.

Kind: global enum

Param Type Description
create PointEvents.POINT_ADDED Emitted when point created. Event contains SmartPoint object in target field
drag_start MouseEvent Emitted when user press mouse button on point before start dragging it. Standard MouseEvent mousedown object
drag MouseEvent Emitted when user drags point by a mouse. Standard MouseEvent mousemove object and two additional fields: oldX and oldY coordinates, which was before event start.
drag_end MouseEvent Emitted when user releases mouse button after pressing it on point Standard MouseEvent mouseup object
mousedown MouseEvent Emitted when user presses mouse button on point Standard MouseEvent mousedown object
mouseup MouseEvent Emitted when user releases mouse button on point Standard MouseEvent mouseup object
mouseover MouseEvent Emitted when mouse cursor goes inside point Standard MouseEvent mouseover object
mousemove MouseEvent Emitted when mouse cursor moves on top of point Standard MouseEvent mouseover object
mouseout MouseEvent Emitted when mouse cursor goes away from point Standard MouseEvent mouseout object
click MouseEvent Emitted when click on point Standard MouseEvent click object
dblclick MouseEvent Emitted when double-click on point Standard MouseEvent dblclick object
destroy PointEvents.POINT_DESTROYED Emitted when point destroyed (by pressing right mouse button on it or programmatically using destroy method)

PointMoveDirections : enum

Enumeration that defines point move directions. Values from this enumeration should be used in point option moveDirections to specify in which directions point can be moved. Members of enumeration: LEFT, TOP, RIGHT, BOTTOM

Kind: global enum

SmartShapeDisplayMode : enum

Enumeration of SmartShape display modes

Kind: global enum

Param Description
default basic display mode without resize or rotate boxes and points are hidden
selected In this mode the points displayed on shape, but resize and rotate boxes are hidden
scale In this mode the shape displayed with resize box around it
rotate In this mode the shape displayed with rotate box around it

PngExportTypes : enum

Enumeration of PNG export types for SmartShape.toPng() function

Kind: global enum

Param Description
dataurl Return PNG as a DataURL string
blob Return PNG as a BLOB object

ShapeEvents : enum

Enumeration of event names, that can be emitted by SmartShape object.

Kind: global enum

Param Type Description
create ShapeEvents.SHAPE_CREATE Emitted right after shape is created and initialized. Event object contains created shape SmartShape object in a target field
move_start MouseEvent Emitted when user presses left mouse button on shape to start dragging. Standard MouseEvent mousedown object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
move MouseEvent Emitted when user drags shape. Standard MouseEvent mousemove object, but also includes additional properties oldPos - shape position before previous movement. newPos - shape position after previous movement. Position is an object with following fields "left,top,right,bottom,width,height"
move_end MouseEvent Emitted when user releases mouse button to stop drag the shape. Standard MouseEvent mouseup object with additional field pos, which is a position of shape when movement started. Position is an object with following fields "left,top,right,bottom,width,height"
mousemove MouseEvent Emitted when user moves mouse over shape Standard MouseEvent mousemove object
mouseover MouseEvent Emitted when mouse cursor goes inside shape Standard MouseEvent mouseover object
mouseout MouseEvent Emitted when mouse cursor goes away from shape Standard MouseEvent mouseout object
click MouseEvent Emitted when click on shape Standard MouseEvent click object
dblclick MouseEvent Emitted when double-click on shape Standard MouseEvent dblclick object
resize ResizeBoxEvents.RESIZE_BOX_RESIZE Emitted when user resized the shape using resize box. Event object includes fields oldPos and newPos which are positions of shape before and after resizing. Position is an object with following fields "left,top,right,bottom,width,height"
rotate RotateBoxEvents.ROTATE_BOX_ROTATE Emitted when user rotated the shape using rotate box Event object includes the angle field, which is a rotation angle. Position is an object with following fields "left,top,right,bottom,width,height"
point_drag_start MouseEvent Emitted when user starts dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_move MouseEvent Emitted when user dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_drag_end MouseEvent Emitted when user finishes dragging one of shape's point. Event Includes point field. It is a SmartPoint object.
point_added MouseEvent Emitted when new point added to the shape
point_removed MouseEvent Emitted when point removed from the shape
destroy ShapeEvents.SHAPE_DESTROY Emitted right before shape is destroyed
add_child ShapeEvents.SHAPE_ADD_CHILD New child shape added to this shape. Event object contains a child field which is a SmartShape object of added child.
remove_child ShapeEvents.SHAPE_REMOVE_CHILD Child shape removed from this shape. Event object contains a child field which is a SmartShape object of removed child.
shape_activated ShapeEvents.SHAPE_ACTIVATED Shape activated

SmartShapeManagerEvents : enum

Events that SmartShapeManager can emit.

Kind: global enum

Param Description
MANAGER_ADD_CONTAINER_LISTENERS Emits each time when add SmartShape event listeners to container for shapes (usually after first shape added to it)
MANAGER_REMOVE_CONTAINER_LISTENERS Emits each time when remove SmartShape event listeners from container for shapes (usually after last shape removed from container)

ContainerEvents : enum

Enumeration of event names, that can be emitted by SmartShape object.

Kind: global enum

Param Description
CONTAINER_BOUNDS_CHANGED Emitted by shape when dimensions of container changed, e.g. browser window resized. Sends the event with the following fields: bounds -an object with the following fields: left:number,top:number,right:number,bottom:number, points - array of points (SmartPoint objects) with array of all points of this shape, which could be affected by this bounds change.

mapPointCords ⇒ array

Method used to transform specified coordinates using transformations, specified in params argument.

Kind: global constant
Returns: array - New coordinates after transformation in [x,y] format

Param Type Description
x number X coordinate
y number Y coordinate
type PointMapTypes This options specifies the transformation direction. If it equals to original_to_current then need to apply specified transformations to point, if it equals current_to_original, the it assumed that all transformations already applied to specified coordinates and need to un-apply them.
params Transformation parameters: offsetX - move by X, offsetY - move by Y, scaleX - scale by X, scaleY - scale by Y, flippedX - flip by X, flippedY - flip by Y

scaleTo(width, height)

Scales image to fit specified width and height. It only changes coordinates of points, but do not redraws the shape on new position. So, you need to call redraw yourself after scale.

Kind: global function

Param Type Description
width number | null new width. If not specified, then will be calculated automatically based on height to preserve aspect ratio
height number | null new height. If not specifie, then will be calculated automatically based on width to preserve aspect ratio

scaleBy(scaleX, scaleY, includeChildren)

Method used to scale the shape by specified ratio by X and Y

Kind: global function

Param Type Description
scaleX number Horizontal scale ratio
scaleY number Vertical scale ratio
includeChildren boolean If true, then children of this shape scaled with it, if not specified then it determined by the groupChildShapes option. if children of shape grouped, then scaled together with it

zoomBy(level)

Method used to zoom shape by specified level

Kind: global function

Param Type Description
level number Zoom level. Can be any positive number. If number is greater than 1, then it increases the size of shape, if it between 0 and 1, then it decreases the shape.

rotateBy(angle, centerX, centerY, checkBounds)

Method used to rotate this shape by specified angle around it's center.

Kind: global function

Param Type Description
angle number Angle in degrees. Positive - clockwise, Negative - counterclock-wise
centerX number X coordinate of center around which to rotate the shape. By default it's a center of the shape
centerY number Y coordinate of center around which to rotate the shape. By default it's a center of the shape
checkBounds boolean Should the function check that shape won't go beyond defined bounds or container bounds after rotation. By default false.

flip(byX, byY, includeChildren)

Method used to flip shape and its children vertically or horizontally

Kind: global function

Param Type Description
byX boolean Flip horizontally
byY boolean Flip vertically
includeChildren boolean Flip includes children shapes

pngChunkGet(png, chunkName) ⇒ Promise.<(DataView|null)>

Kind: global function
Returns: Promise.<(DataView|null)> - chunk data

Param Type Description
png Blob
chunkName string 4 symbol string

pngChunkSet(png, chunkName, data) ⇒ Promise.<Blob>

Kind: global function
Returns: Promise.<Blob> - new png

Param Type Description
png Blob
chunkName string 4 symbol string
data Uint8Array

chunkSet(pngData, chunkNameUint32, data) ⇒ Blob

Kind: global function
Returns: Blob - new png

Param Type Description
pngData ArrayBuffer
chunkNameUint32 number chunk name as Uint32
data Uint8Array

chunkSet~startPart : DataView

Kind: inner property of chunkSet

chunkSet~endPart : DataView

Kind: inner property of chunkSet

chunkGet(pngData, chunkNameUint32) ⇒ DataView | null

Kind: global function
Returns: DataView | null - chunk data

Param Type Description
pngData ArrayBuffer
chunkNameUint32 number chunk name as Uint32

toUit32(chunkName) ⇒ number

Kind: global function
Returns: number - uit32

Param Type Description
chunkName string 4 symbol string