Shape
Shape object. A shape object has following features:
- can be serialized (store and copy-paste)
- can have many children shapes
- can have multple scripts
- can have multiple constraints
- can have a manipulator
- has it’s own coordinate system (rotate)
Extends
Constructors
new Shape()
new Shape():
Shape
Returns
Overrides
Source
Properties
children
children:
Obj[]
Inherited from
Source
connectable
connectable:
boolean
Connectable flag
Source
constraints
constraints:
Constraint[]
Shape’s constraints
Source
containable
containable:
boolean
Containable flag
Source
containableFilter
containableFilter:
string
Containable filter
Source
description
description:
string
Description of the shape
Source
enable
enable:
boolean
Enable flag
Source
fillColor
fillColor:
string
Fill color
Source
fillStyle
fillStyle:
string
Fill style
Source
fontColor
fontColor:
string
Font color
Source
fontFamily
fontFamily:
string
Font family
Source
fontSize
fontSize:
number
Font size
Source
fontStyle
fontStyle:
string
Font style
Source
fontWeight
fontWeight:
number
Font weight
Source
height
height:
number
Shape’s height
Source
id
id:
string
Inherited from
Source
left
left:
number
Shape’s left position
Source
link
link:
string
Link
Source
movable
movable:
MovableEnum
Indicate how this shape can be moved
Source
movableParentFilter
movableParentFilter:
string
Movable parent filter
Source
name
name:
string
Name of the shape
Source
opacity
opacity:
number
Opacity
Source
parent
parent:
null|Obj
Inherited from
Source
properties
properties:
Property[]
Shape’s properties
Source
proto
proto:
boolean
The flag to indicate this shape is a prototype or not
Source
reference
reference:
null|Shape
A reference to shape
Source
rotatable
rotatable:
boolean
Rotatable flag
Source
rotate
rotate:
number
Shape’s rotation angle (in degree)
Source
roughness
roughness:
number
Roughness
Source
scripts
scripts:
Script[]
Shape’s scripts
Source
shadow
shadow:
boolean
Shadow
Source
shadowColor
shadowColor:
string
Shadow color
Source
shadowOffset
shadowOffset:
number[]
Shadow offset
Source
sizable
sizable:
SizableEnum
Indicate how this shape can be resized
Source
strokeColor
strokeColor:
string
Stroke color
Source
strokePattern
strokePattern:
number[]
Stroke pattern
Source
strokeWidth
strokeWidth:
number
Stroke width
Source
tags
tags:
string[]
Tags
Source
top
top:
number
Shape’s top position
Source
type
type:
string
Inherited from
Source
visible
visible:
boolean
Visible flag
Source
width
width:
number
Shape’s width
Source
Accessors
bottom
getbottom():number
Returns
number
Source
right
getright():number
Returns
number
Source
Methods
assignStyles()
assignStyles(
canvas):void
Assign styles to memoization canvas.
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
canContain()
canContain(
shape):boolean
Determine a given shape can be contained in this shape
Parameters
• shape: Shape
Returns
boolean
Source
computeOpacity()
computeOpacity():
number
Returns
number
Source
containsPoint()
containsPoint(
canvas,point):boolean
Determines whether this shape contains a point in GCS
Parameters
• canvas: Canvas
• point: number[]
Returns
boolean
Source
draw()
draw(
canvas,showDOM):void
Draw this shape
Render vs Draw
- Render: computing geometries how to draw the shape
- Draw: actual drawing the computed geometries of the shape on the canvas
Parameters
• canvas: Canvas
• showDOM: boolean= false
Returns
void
Source
drawLink()
drawLink(
canvas,showDOM):void
Draw link
Parameters
• canvas: Canvas
• showDOM: boolean= false
Returns
void
Source
finalize()
finalize(
canvas):void
Finalize shape
Parameters
• canvas: Canvas
Returns
void
Source
find()
find(
pred):null|Obj
Find an shape in breath-first order
Parameters
• pred
Returns
null | Obj
Inherited from
Source
findAllByQuery()
findAllByQuery(
queryString):Shape[]
Find all shapes matched with the query string
Parameters
• queryString: string
Returns
Shape[]
Source
findByQuery()
findByQuery(
queryString):null|Shape
Find a shape first matched with the query string
Parameters
• queryString: any
Returns
null | Shape
Source
findDepthFirst()
findDepthFirst(
pred):null|Obj
Find an shape in depth-first order
Parameters
• pred
Returns
null | Obj
Inherited from
Source
findParent()
findParent(
pred):null|Obj
Find a shape along with the parent-chain
Parameters
• pred
Returns
null | Obj
Inherited from
Source
fromJSON()
fromJSON(
json):void
Import shape from JSON
Parameters
• json: any
Returns
void
Overrides
Source
getBoundingRect()
getBoundingRect(
includeAnchorPoints):number[][]
Return a bounding rect.
Parameters
• includeAnchorPoints: boolean= false
Returns
number[][]
Source
getCenter()
getCenter():
number[]
Returns the center point
Returns
number[]
Source
getChildrenBoundingRect()
getChildrenBoundingRect():
number[][]
Return a bounding box embracing children shapes
Returns
number[][]
Source
getEnclosure()
getEnclosure():
number[][]
Return a enclosure
Returns
number[][]
Source
getOutline()
getOutline():
number[][]
Return outline polygon.
Returns
number[][]
Source
getPage()
getPage():
null|Page
Return the page that contains this shape
Returns
null | Page
Source
getProperty()
getProperty(
name):any
Get a property object
Parameters
• name: string
Returns
any
Source
getPropertyValue()
getPropertyValue(
name):any
Get a property value
Parameters
• name: string
Returns
any
Source
getRectInDCS()
getRectInDCS(
canvas,includeAnchorPoints):number[][]
Return a bounding box in DOM coord.
[Note] If you want to place DOM elements over the canvas, use this method. and don’t forget to apply transform scale to the DOM element.
Parameters
• canvas: Canvas
• includeAnchorPoints: boolean= false
Returns
number[][]
Source
getScript()
getScript(
id):undefined|string
Get a property object
Parameters
• id: string
Returns
undefined | string
Source
getSeed()
getSeed():
number
Return the seed number
Returns
number
Source
getShapeAt()
getShapeAt(
canvas,point,exceptions,allowDisabledAndInvisible):null|Shape
Pick a shape at specific position (x, y)
Parameters
• canvas: Canvas
• point: number[]
• exceptions: Shape[]= []
• allowDisabledAndInvisible: boolean= false
Returns
null | Shape
Source
getViewport()
getViewport(
canvas):number[][]
Return a viewport in GCS. Viewport is a rect that includes actually drawn area which includes stroke width, arrowheads, etc. So viewport is mostly larger than bounding rect.
Parameters
• canvas: Canvas
Returns
number[][]
Source
initialze()
initialze(
canvas):void
Initialize shape
Parameters
• canvas: Canvas
Returns
void
Source
isDescendant()
isDescendant(
obj):boolean
Test whether the given shape is a descendant
Parameters
• obj: Obj
Returns
boolean
Inherited from
Source
localCoordTransform()
localCoordTransform(
canvas,point,recursive):number[]
Transform local coord to parent’s coord (LCS —> parent’s LCS) if recursive=true, transform to GCS (Global coord-system).
Parameters
• canvas: Canvas
• point: number[]
• recursive: boolean= false
Returns
number[]
Source
localCoordTransformRev()
localCoordTransformRev(
canvas,point,recursive):number[]
Transform parent’s coord to local coord (parent’s LCS —> LCS) if recursive=true, transform GCS (Global coord-system) —> LCS.
Parameters
• canvas: Canvas
• point: number[]
• recursive: boolean= false
Returns
number[]
Source
localTransform()
localTransform(
canvas,recursive):void
Transform local context to parent’s context
Parameters
• canvas: Canvas
• recursive: boolean= false
Returns
void
Source
match()
match(
query):boolean
Returns true if query matches this shape
Parameters
• query: object[]
Returns
boolean
Source
overlapClippingArea()
overlapClippingArea(
canvas,rect):boolean
Determines whether the given rect overlaps this shape’s clipping area. If the shape don’t have clipping area, return true. If the shape has clipping area, return true if the rect overlaps the clipping area. (e.g. Frame)
Parameters
• canvas: Canvas
• rect: number[][]
Returns
boolean
Source
overlapRect()
overlapRect(
canvas,rect):boolean
Determines whether this shape overlaps a given rect
Parameters
• canvas: Canvas
• rect: number[][]
Returns
boolean
Source
parseQueryString()
parseQueryString(
queryString):any[]
Parse the query-string and returns a query object (JSON)
Query syntax:
e.g.) parseQuery(“@Box|NameText|@Text&#compartment”) —> [{_type: “Box”},{name: “NameText”},{_type: “Text”, tag:“compartment”}]
Parameters
• queryString: string
Returns
any[]
query object
Source
render()
render(
canvas):void
Render this shape
Render vs Draw
- Render: computing geometries how to draw the shape
- Draw: actual drawing the computed geometries of the shape on the canvas
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
renderDefault()
renderDefault(
canvas):void
Default render this shape
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
renderOutline()
renderOutline(
canvas):void
Render this shape’s outline
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
renderOutlineDefault()
renderOutlineDefault(
canvas):number[][]
Render default outline
Parameters
• canvas: MemoizationCanvas
Returns
number[][]
Source
renderShadow()
renderShadow(
canvas):void
Render shadow
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
renderViewport()
renderViewport(
canvas):void
Return this shape’s viewport
Parameters
• canvas: MemoizationCanvas
Returns
void
Source
renderViewportDefault()
renderViewportDefault(
canvas):number[][]
Render default viewport
Parameters
• canvas: MemoizationCanvas
Returns
number[][]
Source
resolveRefs()
resolveRefs(
idMap,nullIfNotFound):void
Resolve references
Parameters
• idMap: Record<string, Shape>
id to object map
• nullIfNotFound: boolean= false
assign null if not found
Returns
void
Overrides
Source
toJSON()
toJSON(
recursive,keepRefs):any
Export shape to JSON
Parameters
• recursive: boolean= false
• keepRefs: boolean= false
Returns
any
Overrides
Source
traverse()
traverse(
fun,parent):void
Traverse all objects in breath-first order
Parameters
• fun
• parent: null | Obj= null
Returns
void
Inherited from
Source
traverseDepthFirst()
traverseDepthFirst(
fun,parent):void
Traverse all shapes in depth-first order
Parameters
• fun
• parent: null | Obj= null
Returns
void
Inherited from
Source
traverseDepthFirstSequence()
traverseDepthFirstSequence():
Obj[]
Returns an array of shapes in order of traverse sequence.
Returns
Obj[]
Inherited from
Obj.traverseDepthFirstSequence
Source
traverseSequence()
traverseSequence():
Obj[]
Returns an array of shapes in order of traverse sequence.
Returns
Obj[]
Inherited from
Source
update()
update(
canvas):void
Update shape
Parameters
• canvas: Canvas
Returns
void
Source
visit()
visit(
fun,parent):void
Visit all shapes in breath-first order. The difference from traverse() is that each shape determine visit into children or not. (e.g. Group and Frame doens’t visit into children)
Parameters
• fun
• parent: null | Shape= null
Returns
void