Skip to content

Shape

Shape object. A shape object has following features:

  1. can be serialized (store and copy-paste)
  2. can have many children shapes
  3. can have multple scripts
  4. can have multiple constraints
  5. can have a manipulator
  6. has it’s own coordinate system (rotate)

Extends

Constructors

new Shape()

new Shape(): Shape

Returns

Shape

Overrides

Obj.constructor

Source

shapes.ts:330

Properties

children

children: Obj[]

Inherited from

Obj.children

Source

core/obj.ts:14


connectable

connectable: boolean

Connectable flag

Source

shapes.ts:198


constraints

constraints: Constraint[]

Shape’s constraints

Source

shapes.ts:298


containable

containable: boolean

Containable flag

Source

shapes.ts:188


containableFilter

containableFilter: string

Containable filter

Source

shapes.ts:193


description

description: string

Description of the shape

Source

shapes.ts:148


enable

enable: boolean

Enable flag

Source

shapes.ts:163


fillColor

fillColor: string

Fill color

Source

shapes.ts:243


fillStyle

fillStyle: string

Fill style

Source

shapes.ts:248


fontColor

fontColor: string

Font color

Source

shapes.ts:253


fontFamily

fontFamily: string

Font family

Source

shapes.ts:258


fontSize

fontSize: number

Font size

Source

shapes.ts:263


fontStyle

fontStyle: string

Font style

Source

shapes.ts:268


fontWeight

fontWeight: number

Font weight

Source

shapes.ts:273


height

height: number

Shape’s height

Source

shapes.ts:218


id

id: string

Inherited from

Obj.id

Source

core/obj.ts:11


left

left: number

Shape’s left position

Source

shapes.ts:203


link: string

Link

Source

shapes.ts:288


movable

movable: MovableEnum

Indicate how this shape can be moved

Source

shapes.ts:173


name

name: string

Name of the shape

Source

shapes.ts:143


opacity

opacity: number

Opacity

Source

shapes.ts:278


parent

parent: null | Obj

Inherited from

Obj.parent

Source

core/obj.ts:13


properties

properties: Property[]

Shape’s properties

Source

shapes.ts:303


proto

proto: boolean

The flag to indicate this shape is a prototype or not

Source

shapes.ts:153


reference

reference: null | Shape

A reference to shape

Source

shapes.ts:293


rotatable

rotatable: boolean

Rotatable flag

Source

shapes.ts:183


rotate

rotate: number

Shape’s rotation angle (in degree)

Source

shapes.ts:223


roughness

roughness: number

Roughness

Source

shapes.ts:283


scripts

scripts: Script[]

Shape’s scripts

Source

shapes.ts:308


sizable

sizable: SizableEnum

Indicate how this shape can be resized

Source

shapes.ts:178


strokeColor

strokeColor: string

Stroke color

Source

shapes.ts:228


strokePattern

strokePattern: number[]

Stroke pattern

Source

shapes.ts:238


strokeWidth

strokeWidth: number

Stroke width

Source

shapes.ts:233


tags

tags: string[]

Tags

Source

shapes.ts:158


top

top: number

Shape’s top position

Source

shapes.ts:208


type

type: string

Inherited from

Obj.type

Source

core/obj.ts:12


visible

visible: boolean

Visible flag

Source

shapes.ts:168


width

width: number

Shape’s width

Source

shapes.ts:213

Accessors

bottom

get bottom(): number

Returns

number

Source

shapes.ts:472


get right(): number

Returns

number

Source

shapes.ts:468

Methods

assignStyles()

assignStyles(canvas): void

Assign styles to memoization canvas.

Parameters

canvas: MemoizationCanvas

Returns

void

Source

shapes.ts:550


canContain()

canContain(shape): boolean

Determine a given shape can be contained in this shape

Parameters

shape: Shape

Returns

boolean

Source

shapes.ts:942


computeOpacity()

computeOpacity(): number

Returns

number

Source

shapes.ts:540


containsPoint()

containsPoint(canvas, point): boolean

Determines whether this shape contains a point in GCS

Parameters

canvas: Canvas

point: number[]

Returns

boolean

Source

shapes.ts:819


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

shapes.ts:685


drawLink(canvas, showDOM): void

Draw link

Parameters

canvas: Canvas

showDOM: boolean= false

Returns

void

Source

shapes.ts:699


finalize()

finalize(canvas): void

Finalize shape

Parameters

canvas: Canvas

Returns

void

Source

shapes.ts:489


find()

find(pred): null | Obj

Find an shape in breath-first order

Parameters

pred

Returns

null | Obj

Inherited from

Obj.find

Source

core/obj.ts:106


findAllByQuery()

findAllByQuery(queryString): Shape[]

Find all shapes matched with the query string

Parameters

queryString: string

Returns

Shape[]

Source

shapes.ts:932


findByQuery()

findByQuery(queryString): null | Shape

Find a shape first matched with the query string

Parameters

queryString: any

Returns

null | Shape

Source

shapes.ts:919


findDepthFirst()

findDepthFirst(pred): null | Obj

Find an shape in depth-first order

Parameters

pred

Returns

null | Obj

Inherited from

Obj.findDepthFirst

Source

core/obj.ts:119


findParent()

findParent(pred): null | Obj

Find a shape along with the parent-chain

Parameters

pred

Returns

null | Obj

Inherited from

Obj.findParent

Source

core/obj.ts:132


fromJSON()

fromJSON(json): void

Import shape from JSON

Parameters

json: any

Returns

void

Overrides

Obj.fromJSON

Source

shapes.ts:419


getBoundingRect()

getBoundingRect(includeAnchorPoints): number[][]

Return a bounding rect.

Parameters

includeAnchorPoints: boolean= false

Returns

number[][]

Source

shapes.ts:746


getCenter()

getCenter(): number[]

Returns the center point

Returns

number[]

Source

shapes.ts:739


getChildrenBoundingRect()

getChildrenBoundingRect(): number[][]

Return a bounding box embracing children shapes

Returns

number[][]

Source

shapes.ts:772


getEnclosure()

getEnclosure(): number[][]

Return a enclosure

Returns

number[][]

Source

shapes.ts:806


getOutline()

getOutline(): number[][]

Return outline polygon.

Returns

number[][]

Source

shapes.ts:674


getProperty()

getProperty(name): any

Get a property object

Parameters

name: string

Returns

any

Source

shapes.ts:954


getPropertyValue()

getPropertyValue(name): any

Get a property value

Parameters

name: string

Returns

any

Source

shapes.ts:964


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

shapes.ts:785


getScript()

getScript(id): undefined | string

Get a property object

Parameters

id: string

Returns

undefined | string

Source

shapes.ts:972


getSeed()

getSeed(): number

Returns

number

Source

shapes.ts:476


getShapeAt()

getShapeAt(canvas, point, exceptions): null | Shape

Pick a shape at specific position (x, y)

Parameters

canvas: Canvas

point: number[]

exceptions: Shape[]= []

Returns

null | Shape

Source

shapes.ts:509


getViewRect()

getViewRect(canvas): number[][]

Return a view rect in GCS. View rect is a rect that includes actually drawn area which includes stroke width, arrowheads, etc. So view rect is mostly larger than bounding rect.

Parameters

canvas: Canvas

Returns

number[][]

Source

shapes.ts:759


initialze()

initialze(canvas): void

Initialize shape

Parameters

canvas: Canvas

Returns

void

Source

shapes.ts:484


isDescendant()

isDescendant(obj): boolean

Test whether the given shape is a descendant

Parameters

obj: Obj

Returns

boolean

Inherited from

Obj.isDescendant

Source

core/obj.ts:142


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

shapes.ts:586


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

shapes.ts:606


localTransform()

localTransform(canvas, recursive): void

Transform local context to parent’s context

Parameters

canvas: Canvas

recursive: boolean= false

Returns

void

Source

shapes.ts:570


match()

match(query): boolean

Returns true if query matches this shape

Parameters

query: object[]

Returns

boolean

Source

shapes.ts:894


overlapRect()

overlapRect(canvas, rect): boolean

Determines whether this shape overlaps a given rect

Parameters

canvas: Canvas

rect: number[][]

Returns

boolean

Source

shapes.ts:839


parseQueryString()

parseQueryString(queryString): any[]

Parse the query-string and returns a query object (JSON)

Query syntax: = [”|” ]* = [”&” ]* = | = e.g.) OuterBox, NameText, … = ”@” e.g.) @Box, @Text, @Line, … = ”#” e.g.) #label, #compartment, …

e.g.) parseQuery(“@Box|NameText|@Text&#compartment”) —> [{_type: “Box”},{name: “NameText”},{_type: “Text”, tag:“compartment”}]

Parameters

queryString: string

Returns

any[]

query object

Source

shapes.ts:869


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

shapes.ts:629


renderDefault()

renderDefault(canvas): void

Default render this shape

Parameters

canvas: MemoizationCanvas

Returns

void

Source

shapes.ts:647


renderOutline()

renderOutline(canvas): void

Render this shape’s outline

Parameters

canvas: MemoizationCanvas

Returns

void

Source

shapes.ts:652


renderOutlineDefault()

renderOutlineDefault(): number[][]

Render default outline

Returns

number[][]

Source

shapes.ts:667


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

Obj.resolveRefs

Source

shapes.ts:457


toJSON()

toJSON(recursive, keepRefs): any

Export shape to JSON

Parameters

recursive: boolean= false

keepRefs: boolean= false

Returns

any

Overrides

Obj.toJSON

Source

shapes.ts:377


traverse()

traverse(fun, parent): void

Traverse all objects in breath-first order

Parameters

fun

parent: null | Obj= null

Returns

void

Inherited from

Obj.traverse

Source

core/obj.ts:60


traverseDepthFirst()

traverseDepthFirst(fun, parent): void

Traverse all shapes in depth-first order

Parameters

fun

parent: null | Obj= null

Returns

void

Inherited from

Obj.traverseDepthFirst

Source

core/obj.ts:74


traverseDepthFirstSequence()

traverseDepthFirstSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Obj.traverseDepthFirstSequence

Source

core/obj.ts:97


traverseSequence()

traverseSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Obj.traverseSequence

Source

core/obj.ts:88


update()

update(canvas): void

Update shape

Parameters

canvas: Canvas

Returns

void

Source

shapes.ts:499


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

Source

shapes.ts:529