Group

Corner radius [top-left, top-right, bottom-right, bottom-left] (same with CSS). if positive value, it is pixels. if negative value, it is the percentage ratio of the shorter one between the width and the height.

Inherited from

Box.corners

Source

shapes.ts:1353

description

description: string

Description of the shape

Inherited from

Box.description

Source

shapes.ts:163

enable

enable: boolean

Enable flag

Inherited from

Box.enable

Source

shapes.ts:178

fillColor

fillColor: string

Fill color

Inherited from

Box.fillColor

Source

shapes.ts:263

fillStyle

fillStyle: string

Fill style

Inherited from

Box.fillStyle

Source

shapes.ts:268

fontColor

fontColor: string

Font color

Inherited from

Box.fontColor

Source

shapes.ts:273

fontFamily

fontFamily: string

Font family

Inherited from

Box.fontFamily

Source

shapes.ts:278

fontStyle

fontStyle: string

Font style

Inherited from

Box.fontStyle

Source

shapes.ts:288

fontWeight

fontWeight: number

Font weight

Inherited from

Box.fontWeight

Source

shapes.ts:293

height

height: number

Shape’s height

Inherited from

Box.height

Source

shapes.ts:238

horzAlign

horzAlign: HorzAlignEnum

Text horizontal alignment

Inherited from

Box.horzAlign

Source

shapes.ts:1428

id

id: string

Inherited from

Box.id

Source

core/obj.ts:11

left

left: number

Shape’s left position

Inherited from

Box.left

Source

shapes.ts:223

lineHeight

lineHeight: number

Text line height

Inherited from

Box.lineHeight

Source

shapes.ts:1438

link

link: string

Link

Inherited from

Box.link

Source

shapes.ts:323

movable

movable: MovableEnum

Indicate how this shape can be moved

Inherited from

Box.movable

Source

shapes.ts:188

movableParentFilter

movableParentFilter: string

Movable parent filter

Inherited from

Box.movableParentFilter

Source

shapes.ts:213

name

name: string

Name of the shape

Inherited from

Box.name

Source

shapes.ts:158

opacity

opacity: number

Opacity

Inherited from

Box.opacity

Source

shapes.ts:298

padding

padding: number[]

Padding spaces [top, right, bottom, left] (same with CSS)

Inherited from

Box.padding

Source

shapes.ts:1346

paragraphSpacing

paragraphSpacing: number

Text paragraph spacing

Inherited from

Box.paragraphSpacing

Source

shapes.ts:1443

parent

parent: null | Obj

Inherited from

Box.parent

Source

core/obj.ts:13

properties

properties: Property[]

Shape’s properties

Inherited from

Box.properties

Source

shapes.ts:338

proto

proto: boolean

The flag to indicate this shape is a prototype or not

Inherited from

Box.proto

Source

shapes.ts:168

reference

reference: null | Shape

A reference to shape

Inherited from

Box.reference

Source

shapes.ts:328

rotatable

rotatable: boolean

Rotatable flag

Inherited from

Box.rotatable

Source

shapes.ts:198

rotate

rotate: number

Shape’s rotation angle (in degree)

Inherited from

Box.rotate

Source

shapes.ts:243

roughness

roughness: number

Roughness

Inherited from

Box.roughness

Source

shapes.ts:303

scripts

scripts: Script[]

Shape’s scripts

Inherited from

Box.scripts

Source

shapes.ts:343

shadow

shadow: boolean

Shadow

Inherited from

Box.shadow

Source

shapes.ts:308

shadowColor

shadowColor: string

Shadow color

Inherited from

Box.shadowColor

Source

shapes.ts:313

shadowOffset

shadowOffset: number[]

Shadow offset

Inherited from

Box.shadowOffset

Source

shapes.ts:318

sizable

sizable: SizableEnum

Indicate how this shape can be resized

Inherited from

Box.sizable

Source

shapes.ts:193

strokeColor

strokeColor: string

Stroke color

Inherited from

Box.strokeColor

Source

shapes.ts:248

strokePattern

strokePattern: number[]

Stroke pattern

Inherited from

Box.strokePattern

Source

shapes.ts:258

strokeWidth

strokeWidth: number

Stroke width

Inherited from

Box.strokeWidth

Source

shapes.ts:253

text

text: any

Text could a string or document object

Rich text document content grammar (BNF): doc = (paragraph | bulletList | orderedList)* bulletList = listItem* orderedList = listItem* paragraph = (text | hardBreak)* listItem = paragraph text = hardBreak =

Rich text document content (this.text) look like: { “type”: “doc”, “content”: [ { “type”: “paragraph”, “content”: [ { “type”: “text”, “text”: “asdf asdf” }, { “type”: “text”, “marks”: [{ “type”: “strong” }], “text”: “sadflkj” }, … ] } … ] }

Inherited from

Box.text

Source

shapes.ts:1418

textEditable

textEditable: boolean

Text editable

Inherited from

Box.textEditable

Source

shapes.ts:1388

top

top: number

Shape’s top position

Inherited from

Box.top

Source

shapes.ts:228

type

type: string

Inherited from

Box.type

Source

core/obj.ts:12

vertAlign

vertAlign: VertAlignEnum

Text vertical alignment

Inherited from

Box.vertAlign

Source

shapes.ts:1433

visible

visible: boolean

Visible flag

Inherited from

Box.visible

Source

shapes.ts:183

width

width: number

Shape’s width

Inherited from

Box.width

Source

shapes.ts:233

wordWrap

wordWrap: boolean

Word wrap

Inherited from

Box.wordWrap

Source

shapes.ts:1423

Accessors

bottom

get bottom(): number

Returns

number

Source

shapes.ts:563

innerBottom

get innerBottom(): number

Returns

number

Source

shapes.ts:1559

innerHeight

get innerHeight(): number

Returns

number

Source

shapes.ts:1567

innerLeft

get innerLeft(): number

Returns

number

Source

shapes.ts:1547

innerRight

get innerRight(): number

Returns

number

Source

shapes.ts:1551

innerTop

get innerTop(): number

Returns

number

Source

shapes.ts:1555

innerWidth

get innerWidth(): number

Returns

number

Source

shapes.ts:1563

right

get right(): number

Returns

number

Source

shapes.ts:559

Methods

assignStyles()

assignStyles(canvas): void

Assign styles to memoization canvas.

Parameters

• canvas: MemoizationCanvas

Returns

void

Inherited from

Box.assignStyles

Source

shapes.ts:673

canContain()

canContain(shape): boolean

Determine a given shape can be contained in this shape

Parameters

• shape: Shape

Returns

boolean

Inherited from

Box.canContain

Source

shapes.ts:1131

computeCorners()

computeCorners(): number[]

Returns

number[]

Inherited from

Box.computeCorners

Source

shapes.ts:1571

computeOpacity()

computeOpacity(): number

Returns

number

Inherited from

Box.computeOpacity

Source

shapes.ts:663

containsPoint()

containsPoint(canvas, point, regardFillStyle): boolean

Determines whether this shape contains a point in GCS

Parameters

• canvas: Canvas

• point: number[]

• regardFillStyle: boolean= true

Returns

boolean

Inherited from

Box.containsPoint

Source

shapes.ts:988

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

Inherited from

Box.draw

Source

shapes.ts:819

drawLink()

drawLink(canvas, showDOM): void

Draw link

Parameters

• canvas: Canvas

• showDOM: boolean= false

Returns

void

Inherited from

Box.drawLink

Source

shapes.ts:833

finalize()

finalize(canvas): void

Finalize shape

Parameters

• canvas: Canvas

Returns

void

Inherited from

Box.finalize

Source

shapes.ts:583

find()

find(pred): null | Obj

Find an shape in breath-first order

Parameters

• pred

Returns

null | Obj

Inherited from

Box.find

Source

core/obj.ts:147

findAllByQuery()

findAllByQuery(queryString): Shape[]

Find all shapes matched with the query string

Parameters

• queryString: string

Returns

Shape[]

Inherited from

Box.findAllByQuery

Source

shapes.ts:1121

findByQuery()

findByQuery(queryString): null | Shape

Find a shape first matched with the query string

Parameters

• queryString: any

Returns

null | Shape

Inherited from

Box.findByQuery

Source

shapes.ts:1108

findDepthFirst()

findDepthFirst(pred): null | Obj

Find an shape in depth-first order

Parameters

• pred

Returns

null | Obj

Inherited from

Box.findDepthFirst

Source

core/obj.ts:160

findParent()

findParent(pred): null | Obj

Find a shape along with the parent-chain

Parameters

• pred

Returns

null | Obj

Inherited from

Box.findParent

Source

core/obj.ts:173

fromJSON()

fromJSON(json): void

Import shape from JSON

Parameters

• json: any

Returns

void

Inherited from

Box.fromJSON

Source

shapes.ts:1524

getAnchorVector()

getAnchorVector(canvas): number[][]

Return the anchor vector based on this.anchorPosition. The anchor vector provides the start point and end point to derive the base angle. The shape will be rotated as the angle of (base angle + anchor angle) at start point.

(shape)
\ <— anchorLength
o --------------------> o | (anchor vector) | | | vector[0] vector[1]

Parameters

• canvas: Canvas

Returns

number[][]

Inherited from

Box.getAnchorVector

Source

shapes.ts:1920

getBoundingRect()

getBoundingRect(includeAnchorPoints): number[][]

Return a bounding rect.

Parameters

• includeAnchorPoints: boolean= false

Returns

number[][]

Inherited from

Box.getBoundingRect

Source

shapes.ts:880

getCenter()

getCenter(): number[]

Returns the center point

Returns

number[]

Inherited from

Box.getCenter

Source

shapes.ts:873

getChildrenBoundingRect()

getChildrenBoundingRect(): number[][]

Return a bounding box embracing children shapes

Returns

number[][]

Inherited from

Box.getChildrenBoundingRect

Source

shapes.ts:941

getContainerAt()

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

Pick a container shape at specific position (x, y)

Parameters

• canvas: Canvas

• point: number[]

• exceptions: Shape[]= []

Returns

null | Shape

Inherited from

Box.getContainerAt

Source

shapes.ts:630

getEnclosure()

getEnclosure(): number[][]

Return a enclosure

Returns

number[][]

Inherited from

Box.getEnclosure

Source

shapes.ts:975

getJson()

getJson(json, field, defaultValue): any

Get a field from the JSON object, return defaultValue if the field is not defined.

Parameters

• json: any

• field: string

• defaultValue: any

Returns

any

Inherited from

Box.getJson

Source

core/obj.ts:53

getOutline()

getOutline(): number[][]

Return outline polygon.

Returns

number[][]

Inherited from

Box.getOutline

Source

shapes.ts:808

getPage()

getPage(): null | Page

Return the page that contains this shape

Returns

null | Page

Inherited from

Box.getPage

Source

shapes.ts:555

getProperty()

getProperty(name): any

Get a property object

Parameters

• name: string

Returns

any

Inherited from

Box.getProperty

Source

shapes.ts:1143

getPropertyValue()

getPropertyValue(name): any

Get a property value

Parameters

• name: string

Returns

any

Inherited from

Box.getPropertyValue

Source

shapes.ts:1153

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[][]

Inherited from

Box.getRectInDCS

Source

shapes.ts:954

getScript()

getScript(id): undefined | string

Get a property object

Parameters

• id: string

Returns

undefined | string

Inherited from

Box.getScript

Source

shapes.ts:1161

getSeed()

getSeed(): number

Return the seed number

Returns

number

Inherited from

Box.getSeed

Source

shapes.ts:570

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

Overrides

Box.getShapeAt

Source

shapes.ts:2285

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[][]

Inherited from

Box.getViewport

Source

shapes.ts:931

initialze()

initialze(canvas): void

Initialize shape

Parameters

• canvas: Canvas

Returns

void

Inherited from

Box.initialze

Source

shapes.ts:578

isDescendant()

isDescendant(obj): boolean

Test whether the given shape is a descendant

Parameters

• obj: Obj

Returns

boolean

Inherited from

Box.isDescendant

Source

core/obj.ts:183

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[]

Inherited from

Box.localCoordTransform

Source

shapes.ts:709

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[]

Inherited from

Box.localCoordTransformRev

Source

shapes.ts:729

localTransform()

localTransform(canvas, recursive): void

Transform local context to parent’s context

Parameters

• canvas: Canvas

• recursive: boolean= false

Returns

void

Inherited from

Box.localTransform

Source

shapes.ts:693

match()

match(query): boolean

Returns true if query matches this shape

Parameters

• query: object[]

Returns

boolean

Inherited from

Box.match

Source

shapes.ts:1084

overlapClippingArea()

overlapClippingArea(canvas, rect): boolean

Determines whether the given rect overlaps this shape’s clipping area. Group do not allow to overlap with children shapes.

Parameters

• canvas: Canvas

• rect: number[][]

Returns

boolean

Overrides

Box.overlapClippingArea

Source

shapes.ts:2301

overlapRect()

overlapRect(canvas, rect): boolean

Determines whether this shape overlaps a given rect

Parameters

• canvas: Canvas

• rect: number[][]

Returns

boolean

Inherited from

Box.overlapRect

Source

shapes.ts:1022

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

Inherited from

Box.parseQueryString

Source

shapes.ts:1059

preprocess()

preprocess(doc, wordWrap, width, listIndent): void

Preprocess document (handle wordWrap and hardBreak) options: wordWrap: boolean width: number listIndent: number

Preprocessed document content grammar (BNF): doc = (paragraph | bulletList | orderedList)* orderedList [width, height] = listItem* bulletList [width, height] = listItem* listItem [width, height] = paragraph paragraph [width, height] = line* line [width, height] = text* text [width, height] =

Parameters

• doc: any

• wordWrap: boolean

• width: number

• listIndent: number

Returns

void

Inherited from

Box.preprocess

Source

shapes.ts:1814

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

Inherited from

Box.render

Source

shapes.ts:752

renderBorders()

renderBorders(canvas, x1, y1, x2, y2): void

Parameters

• canvas: MemoizationCanvas

• x1: number

• y1: number

• x2: number

• y2: number

Returns

void

Inherited from

Box.renderBorders

Source

shapes.ts:1584

renderDefault()

renderDefault(canvas): void

Default render this shape

Parameters

• canvas: MemoizationCanvas

Returns

void

Overrides

Box.renderDefault

Source

shapes.ts:2317

renderOutline()

renderOutline(canvas): void

Render this shape’s outline

Parameters

• canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderOutline

Source

shapes.ts:777

renderOutlineDefault()

renderOutlineDefault(canvas): number[][]

Return outline polygon

Parameters

• canvas: MemoizationCanvas

Returns

number[][]

Inherited from

Box.renderOutlineDefault

Source

shapes.ts:1895

renderShadow()

renderShadow(canvas): void

Render shadow

Parameters

• canvas: MemoizationCanvas

Returns

void

Overrides

Box.renderShadow

Source

shapes.ts:2319

renderText()

renderText(canvas): void

Render text

Parameters

• canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderText

Source

shapes.ts:1768

renderViewport()

renderViewport(canvas): void

Return this shape’s viewport

Parameters

• canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderViewport

Source

shapes.ts:890

renderViewportDefault()

renderViewportDefault(canvas): number[][]

Render default viewport

Parameters

• canvas: MemoizationCanvas

Returns

number[][]

Inherited from

Box.renderViewportDefault

Source

shapes.ts:909

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

Inherited from

Box.resolveRefs

Source

shapes.ts:541

setJson()

setJson(json, field, value, defaultValue, enforce): void

Set a field in the JSON object only if the value is defined and not equal to the default value.

Parameters

• json: any

The JSON object to set the field in.

• field: string

The field name to set.

• value: any

The value to set.

• defaultValue: any

The default value to compare against.

• enforce: boolean= false

If true, the field will be set even if it is equal to the default value.

Returns

void

Inherited from

Box.setJson

Source

core/obj.ts:31

toJSON()

toJSON(recursive, keepRefs, enforce): any

Export shape to JSON

Parameters

• recursive: boolean= false

• keepRefs: boolean= false

• enforce: boolean= false

Returns

any

Inherited from

Box.toJSON

Source

shapes.ts:1476

traverse()

traverse(fun, parent): void

Traverse all objects in breath-first order

Parameters

• fun

• parent: null | Obj= null

Returns

void

Inherited from

Box.traverse

Source

core/obj.ts:101

traverseDepthFirst()

traverseDepthFirst(fun, parent): void

Traverse all shapes in depth-first order

Parameters

• fun

• parent: null | Obj= null

Returns

void

Inherited from

Box.traverseDepthFirst

Source

core/obj.ts:115

traverseDepthFirstSequence()

traverseDepthFirstSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Box.traverseDepthFirstSequence

Source

core/obj.ts:138

traverseSequence()

traverseSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Box.traverseSequence

Source

core/obj.ts:129

update()

update(canvas): void

Update shape

Parameters

• canvas: Canvas

Returns

void

Inherited from

Box.update

Source

shapes.ts:593

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

Overrides

Box.visit

Source

shapes.ts:2310

wordWrapTextSize()

wordWrapTextSize(canvas, wordWrap, width): number[]

Compute size of text with word-wrap and new line chars

Parameters

• canvas: Canvas

• wordWrap: boolean

• width: number

Returns

number[]

Inherited from

Box.wordWrapTextSize

Source

shapes.ts:1819

Group

Extends

Constructors

new Group()

Returns

Overrides

Source

Properties

anchorAngle

Inherited from

Source

anchorLength

Inherited from

Source

anchorPosition

Inherited from

Source

anchored

Inherited from

Source

borderPosition

Inherited from

Source

borders

Inherited from

Source

children

Inherited from

Source

connectable

Inherited from

Source

constraints

Inherited from

Source

containable

Inherited from

Source

containableFilter

Inherited from

Source

corners

Inherited from

Source

description

Inherited from

Source

enable

Inherited from

Source

fillColor

Inherited from

Source

fillStyle

Inherited from

Source

fontColor

Inherited from

Source

fontFamily

Inherited from

Source

fontSize

Inherited from

Source

fontStyle

Inherited from

Source

fontWeight

Inherited from

Source

height

Inherited from

Source

horzAlign

Inherited from

Source

id

Inherited from

Source