Skip to content

Mirror

Mirror

Extends

Constructors

new Mirror()

new Mirror(): Mirror

Returns

Mirror

Overrides

Box.constructor

Source

shapes.ts:3041

Properties

anchorAngle

anchorAngle: number

Anchor angle (in degree)

Inherited from

Box.anchorAngle

Source

shapes.ts:1298


anchorLength

anchorLength: number

Anchor length

Inherited from

Box.anchorLength

Source

shapes.ts:1303


anchorPosition

anchorPosition: number

Anchor position (0~1). 0 is on tail, 1 is on head

Inherited from

Box.anchorPosition

Source

shapes.ts:1308


anchored

anchored: boolean

Anchored

Inherited from

Box.anchored

Source

shapes.ts:1293


borderPosition

borderPosition: BorderPositionEnum

Border position (center, inside, outside)

Inherited from

Box.borderPosition

Source

shapes.ts:1288


borders

borders: boolean[]

Borders [top, right, bottom, left]

Inherited from

Box.borders

Source

shapes.ts:1283


children

children: Obj[]

Inherited from

Box.children

Source

core/obj.ts:14


connectable

connectable: boolean

Connectable flag

Inherited from

Box.connectable

Source

shapes.ts:213


constraints

constraints: Constraint[]

Shape’s constraints

Inherited from

Box.constraints

Source

shapes.ts:328


containable

containable: boolean

Containable flag

Inherited from

Box.containable

Source

shapes.ts:203


containableFilter

containableFilter: string

Containable filter

Inherited from

Box.containableFilter

Source

shapes.ts:208


corners

corners: number[]

Corner radius [top-left, top-right, bottom-right, bottom-left] (same with CSS)

Inherited from

Box.corners

Source

shapes.ts:1278


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:258


fillStyle

fillStyle: string

Fill style

Inherited from

Box.fillStyle

Source

shapes.ts:263


fontColor

fontColor: string

Font color

Inherited from

Box.fontColor

Source

shapes.ts:268


fontFamily

fontFamily: string

Font family

Inherited from

Box.fontFamily

Source

shapes.ts:273


fontSize

fontSize: number

Font size

Inherited from

Box.fontSize

Source

shapes.ts:278


fontStyle

fontStyle: string

Font style

Inherited from

Box.fontStyle

Source

shapes.ts:283


fontWeight

fontWeight: number

Font weight

Inherited from

Box.fontWeight

Source

shapes.ts:288


height

height: number

Shape’s height

Inherited from

Box.height

Source

shapes.ts:233


horzAlign

horzAlign: HorzAlignEnum

Text horizontal alignment

Inherited from

Box.horzAlign

Source

shapes.ts:1353


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:218


lineHeight

lineHeight: number

Text line height

Inherited from

Box.lineHeight

Source

shapes.ts:1363


link: string

Link

Inherited from

Box.link

Source

shapes.ts:318


movable

movable: MovableEnum

Indicate how this shape can be moved

Inherited from

Box.movable

Source

shapes.ts:188


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:293


padding

padding: number[]

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

Inherited from

Box.padding

Source

shapes.ts:1273


paragraphSpacing

paragraphSpacing: number

Text paragraph spacing

Inherited from

Box.paragraphSpacing

Source

shapes.ts:1368


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:333


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:323


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:238


roughness

roughness: number

Roughness

Inherited from

Box.roughness

Source

shapes.ts:298


scripts

scripts: Script[]

Shape’s scripts

Inherited from

Box.scripts

Source

shapes.ts:338


shadow

shadow: boolean

Shadow

Inherited from

Box.shadow

Source

shapes.ts:303


shadowColor

shadowColor: string

Shadow color

Inherited from

Box.shadowColor

Source

shapes.ts:308


shadowOffset

shadowOffset: number[]

Shadow offset

Inherited from

Box.shadowOffset

Source

shapes.ts:313


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:243


strokePattern

strokePattern: number[]

Stroke pattern

Inherited from

Box.strokePattern

Source

shapes.ts:253


strokeWidth

strokeWidth: number

Stroke width

Inherited from

Box.strokeWidth

Source

shapes.ts:248


subject

subject: null | Shape

The subject shape to be mirrored

Source

shapes.ts:3039


tags

tags: string[]

Tags

Inherited from

Box.tags

Source

shapes.ts:173


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:1343


textEditable

textEditable: boolean

Text editable

Inherited from

Box.textEditable

Source

shapes.ts:1313


top

top: number

Shape’s top position

Inherited from

Box.top

Source

shapes.ts:223


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:1358


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:228


wordWrap

wordWrap: boolean

Word wrap

Inherited from

Box.wordWrap

Source

shapes.ts:1348

Accessors

bottom

get bottom(): number

Returns

number

Source

shapes.ts:527


innerBottom

get innerBottom(): number

Returns

number

Source

shapes.ts:1450


innerHeight

get innerHeight(): number

Returns

number

Source

shapes.ts:1458


innerLeft

get innerLeft(): number

Returns

number

Source

shapes.ts:1438


innerRight

get innerRight(): number

Returns

number

Source

shapes.ts:1442


innerTop

get innerTop(): number

Returns

number

Source

shapes.ts:1446


innerWidth

get innerWidth(): number

Returns

number

Source

shapes.ts:1454


get right(): number

Returns

number

Source

shapes.ts:523

Methods

assignStyles()

assignStyles(canvas): void

Assign styles to memoization canvas.

Parameters

canvas: MemoizationCanvas

Returns

void

Inherited from

Box.assignStyles

Source

shapes.ts:617


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:1066


computeOpacity()

computeOpacity(): number

Returns

number

Inherited from

Box.computeOpacity

Source

shapes.ts:607


containsPoint()

containsPoint(canvas, point): boolean

Determines whether this shape contains a point in GCS

Parameters

canvas: Canvas

point: number[]

Returns

boolean

Inherited from

Box.containsPoint

Source

shapes.ts:926


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

Overrides

Box.draw

Source

shapes.ts:3075


drawLink(canvas, showDOM): void

Draw link

Parameters

canvas: Canvas

showDOM: boolean= false

Returns

void

Inherited from

Box.drawLink

Source

shapes.ts:774


finalize()

finalize(canvas): void

Finalize shape

Parameters

canvas: Canvas

Returns

void

Inherited from

Box.finalize

Source

shapes.ts:547


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:106


findAllByQuery()

findAllByQuery(queryString): Shape[]

Find all shapes matched with the query string

Parameters

queryString: string

Returns

Shape[]

Inherited from

Box.findAllByQuery

Source

shapes.ts:1056


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:1043


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:119


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:132


fromJSON()

fromJSON(json): void

Import shape from JSON

Parameters

json: any

Returns

void

Overrides

Box.fromJSON

Source

shapes.ts:3059


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:1798


getBoundingRect()

getBoundingRect(includeAnchorPoints): number[][]

Return a bounding rect.

Parameters

includeAnchorPoints: boolean= false

Returns

number[][]

Inherited from

Box.getBoundingRect

Source

shapes.ts:821


getCenter()

getCenter(): number[]

Returns the center point

Returns

number[]

Inherited from

Box.getCenter

Source

shapes.ts:814


getChildrenBoundingRect()

getChildrenBoundingRect(): number[][]

Return a bounding box embracing children shapes

Returns

number[][]

Inherited from

Box.getChildrenBoundingRect

Source

shapes.ts:879


getEnclosure()

getEnclosure(): number[][]

Return a enclosure

Returns

number[][]

Inherited from

Box.getEnclosure

Source

shapes.ts:913


getOutline()

getOutline(): number[][]

Return outline polygon.

Returns

number[][]

Inherited from

Box.getOutline

Source

shapes.ts:749


getPage()

getPage(): null | Page

Return the page that contains this shape

Returns

null | Page

Inherited from

Box.getPage

Source

shapes.ts:519


getProperty()

getProperty(name): any

Get a property object

Parameters

name: string

Returns

any

Inherited from

Box.getProperty

Source

shapes.ts:1078


getPropertyValue()

getPropertyValue(name): any

Get a property value

Parameters

name: string

Returns

any

Inherited from

Box.getPropertyValue

Source

shapes.ts:1088


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:892


getScale()

getScale(): number[]

Returns

number[]

Source

shapes.ts:3123


getScript()

getScript(id): undefined | string

Get a property object

Parameters

id: string

Returns

undefined | string

Inherited from

Box.getScript

Source

shapes.ts:1096


getSeed()

getSeed(): number

Return the seed number

Returns

number

Inherited from

Box.getSeed

Source

shapes.ts:534


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

Inherited from

Box.getShapeAt

Source

shapes.ts:567


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:869


initialze()

initialze(canvas): void

Initialize shape

Parameters

canvas: Canvas

Returns

void

Inherited from

Box.initialze

Source

shapes.ts:542


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

Inherited from

Box.localCoordTransform

Source

shapes.ts:653


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:673


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:637


match()

match(query): boolean

Returns true if query matches this shape

Parameters

query: object[]

Returns

boolean

Inherited from

Box.match

Source

shapes.ts:1018


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

Inherited from

Box.overlapClippingArea

Source

shapes.ts:949


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:956


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:993


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:1692


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:696


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:1462


renderDefault()

renderDefault(canvas): void

Default render this shape

Parameters

canvas: MemoizationCanvas

Returns

void

Overrides

Box.renderDefault

Source

shapes.ts:3109


renderOutline()

renderOutline(canvas): void

Render this shape’s outline

Parameters

canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderOutline

Source

shapes.ts:721


renderOutlineDefault()

renderOutlineDefault(canvas): number[][]

Return outline polygon

Parameters

canvas: MemoizationCanvas

Returns

number[][]

Inherited from

Box.renderOutlineDefault

Source

shapes.ts:1773


renderShadow()

renderShadow(canvas): void

Render shadow

Parameters

canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderShadow

Source

shapes.ts:1655


renderText()

renderText(canvas): void

Render text

Parameters

canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderText

Source

shapes.ts:1646


renderViewport()

renderViewport(canvas): void

Return this shape’s viewport

Parameters

canvas: MemoizationCanvas

Returns

void

Inherited from

Box.renderViewport

Source

shapes.ts:831


renderViewportDefault()

renderViewportDefault(canvas): number[][]

Render default viewport

Parameters

canvas: MemoizationCanvas

Returns

number[][]

Overrides

Box.renderViewportDefault

Source

shapes.ts:3138


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

Box.resolveRefs

Source

shapes.ts:3064


toJSON()

toJSON(recursive, keepRefs): any

Export shape to JSON

Parameters

recursive: boolean= false

keepRefs: boolean= false

Returns

any

Overrides

Box.toJSON

Source

shapes.ts:3050


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:60


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:74


traverseDepthFirstSequence()

traverseDepthFirstSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Box.traverseDepthFirstSequence

Source

core/obj.ts:97


traverseSequence()

traverseSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Box.traverseSequence

Source

core/obj.ts:88


update()

update(canvas): void

Update shape

Parameters

canvas: Canvas

Returns

void

Inherited from

Box.update

Source

shapes.ts:557


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

Inherited from

Box.visit

Source

shapes.ts:596


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:1697