Skip to content
logo logo DGM.js

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

packages/core/src/shapes.ts:370

Properties

children

children: Obj[]

Inherited from

Obj.children

Source

packages/core/src/core/obj.ts:14

connectable

connectable: boolean

Connectable flag

Source

packages/core/src/shapes.ts:218

constraints

constraints: Constraint[]

Shape’s constraints

Source

packages/core/src/shapes.ts:333

containable

containable: boolean

Containable flag

Source

packages/core/src/shapes.ts:203

containableFilter

containableFilter: string

Containable filter

Source

packages/core/src/shapes.ts:208

description

description: string

Description of the shape

Source

packages/core/src/shapes.ts:163

enable

enable: boolean

Enable flag

Source

packages/core/src/shapes.ts:178

fillColor

fillColor: string

Fill color

Source

packages/core/src/shapes.ts:263

fillStyle

fillStyle: FillStyleEnum

Fill style

Source

packages/core/src/shapes.ts:268

fontColor

fontColor: string

Font color

Source

packages/core/src/shapes.ts:273

fontFamily

fontFamily: string

Font family

Source

packages/core/src/shapes.ts:278

fontSize

fontSize: number

Font size

Source

packages/core/src/shapes.ts:283

fontStyle

fontStyle: string

Font style

Source

packages/core/src/shapes.ts:288

fontWeight

fontWeight: number

Font weight

Source

packages/core/src/shapes.ts:293

height

height: number

Shape’s height

Source

packages/core/src/shapes.ts:238

id

id: string

Inherited from

Obj.id

Source

packages/core/src/core/obj.ts:11

left

left: number

Shape’s left position

Source

packages/core/src/shapes.ts:223

link: string

Link

Source

packages/core/src/shapes.ts:323

movable

movable: MovableEnum

Indicate how this shape can be moved

Source

packages/core/src/shapes.ts:188

movableParentFilter

movableParentFilter: string

Movable parent filter

Source

packages/core/src/shapes.ts:213

name

name: string

Name of the shape

Source

packages/core/src/shapes.ts:158

opacity

opacity: number

Opacity

Source

packages/core/src/shapes.ts:298

parent

parent: null | Obj

Inherited from

Obj.parent

Source

packages/core/src/core/obj.ts:13

properties

properties: Property[]

Shape’s properties

Source

packages/core/src/shapes.ts:338

proto

proto: boolean

The flag to indicate this shape is a prototype or not

Source

packages/core/src/shapes.ts:168

reference

reference: null | Shape

A reference to shape

Source

packages/core/src/shapes.ts:328

rotatable

rotatable: boolean

Rotatable flag

Source

packages/core/src/shapes.ts:198

rotate

rotate: number

Shape’s rotation angle (in degree)

Source

packages/core/src/shapes.ts:243

roughness

roughness: number

Roughness

Source

packages/core/src/shapes.ts:303

scripts

scripts: Script[]

Shape’s scripts

Source

packages/core/src/shapes.ts:343

shadow

shadow: boolean

Shadow

Source

packages/core/src/shapes.ts:308

shadowColor

shadowColor: string

Shadow color

Source

packages/core/src/shapes.ts:313

shadowOffset

shadowOffset: number[]

Shadow offset

Source

packages/core/src/shapes.ts:318

sizable

sizable: SizableEnum

Indicate how this shape can be resized

Source

packages/core/src/shapes.ts:193

strokeColor

strokeColor: string

Stroke color

Source

packages/core/src/shapes.ts:248

strokePattern

strokePattern: number[]

Stroke pattern

Source

packages/core/src/shapes.ts:258

strokeWidth

strokeWidth: number

Stroke width

Source

packages/core/src/shapes.ts:253

tags

tags: string[]

Tags

Source

packages/core/src/shapes.ts:173

top

top: number

Shape’s top position

Source

packages/core/src/shapes.ts:228

type

type: string

Inherited from

Obj.type

Source

packages/core/src/core/obj.ts:12

visible

visible: boolean

Visible flag

Source

packages/core/src/shapes.ts:183

width

width: number

Shape’s width

Source

packages/core/src/shapes.ts:233

Accessors

bottom

get bottom(): number

Returns

number

Source

packages/core/src/shapes.ts:576

get right(): number

Returns

number

Source

packages/core/src/shapes.ts:572

Methods

assignStyles()

assignStyles(canvas): void

Assign styles to memoization canvas.

Parameters

• canvas: MemoizationCanvas

Returns

void

Source

packages/core/src/shapes.ts:686

canContain()

canContain(shape): boolean

Determine a given shape can be contained in this shape

Parameters

• shape: Shape

Returns

boolean

Source

packages/core/src/shapes.ts:1144

computeOpacity()

computeOpacity(): number

Returns

number

Source

packages/core/src/shapes.ts:676

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

Source

packages/core/src/shapes.ts:1001

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

packages/core/src/shapes.ts:832

drawLink(canvas, showDOM): void

Draw link

Parameters

• canvas: Canvas

• showDOM: boolean= false

Returns

void

Source

packages/core/src/shapes.ts:846

finalize()

finalize(canvas): void

Finalize shape

Parameters

• canvas: Canvas

Returns

void

Source

packages/core/src/shapes.ts:596

find()

find(pred): null | Obj

Find an shape in breath-first order

Parameters

• pred

Returns

null | Obj

Inherited from

Obj.find

Source

packages/core/src/core/obj.ts:363

findAllByQuery()

findAllByQuery(queryString): Shape[]

Find all shapes matched with the query string

Parameters

• queryString: string

Returns

Shape[]

Source

packages/core/src/shapes.ts:1134

findByQuery()

findByQuery(queryString): null | Shape

Find a shape first matched with the query string

Parameters

• queryString: any

Returns

null | Shape

Source

packages/core/src/shapes.ts:1121

findDepthFirst()

findDepthFirst(pred): null | Obj

Find an shape in depth-first order

Parameters

• pred

Returns

null | Obj

Inherited from

Obj.findDepthFirst

Source

packages/core/src/core/obj.ts:376

findParent()

findParent(pred): null | Obj

Find a shape along with the parent-chain

Parameters

• pred

Returns

null | Obj

Inherited from

Obj.findParent

Source

packages/core/src/core/obj.ts:389

fromJSON()

fromJSON(json): void

Import shape from JSON

Parameters

• json: any

Returns

void

Overrides

Obj.fromJSON

Source

packages/core/src/shapes.ts:499

getBoundingRect()

getBoundingRect(includeAnchorPoints): number[][]

Return a bounding rect.

Parameters

• includeAnchorPoints: boolean= false

Returns

number[][]

Source

packages/core/src/shapes.ts:893

getCenter()

getCenter(): number[]

Returns the center point

Returns

number[]

Source

packages/core/src/shapes.ts:886

getChildrenBoundingRect()

getChildrenBoundingRect(): number[][]

Return a bounding box embracing children shapes

Returns

number[][]

Source

packages/core/src/shapes.ts:954

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

Source

packages/core/src/shapes.ts:643

getEnclosure()

getEnclosure(): number[][]

Return a enclosure

Returns

number[][]

Source

packages/core/src/shapes.ts:988

getOutline()

getOutline(): number[][]

Return outline polygon.

Returns

number[][]

Source

packages/core/src/shapes.ts:821

getPage()

getPage(): null | Page

Return the page that contains this shape

Returns

null | Page

Source

packages/core/src/shapes.ts:568

getProperty()

getProperty(name): any

Get a property object

Parameters

• name: string

Returns

any

Source

packages/core/src/shapes.ts:1156

getPropertyValue()

getPropertyValue(name): any

Get a property value

Parameters

• name: string

Returns

any

Source

packages/core/src/shapes.ts:1166

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

packages/core/src/shapes.ts:967

getScript()

getScript(id): undefined | string

Get a property object

Parameters

• id: string

Returns

undefined | string

Source

packages/core/src/shapes.ts:1174

getSeed()

getSeed(): number

Return the seed number

Returns

number

Source

packages/core/src/shapes.ts:583

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

packages/core/src/shapes.ts:616

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

packages/core/src/shapes.ts:944

initialze()

initialze(canvas): void

Initialize shape

Parameters

• canvas: Canvas

Returns

void

Source

packages/core/src/shapes.ts:591

isDescendant()

isDescendant(obj): boolean

Test whether the given shape is a descendant

Parameters

• obj: Obj

Returns

boolean

Inherited from

Obj.isDescendant

Source

packages/core/src/core/obj.ts:399

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

packages/core/src/shapes.ts:722

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

packages/core/src/shapes.ts:742

localTransform()

localTransform(canvas, recursive): void

Transform local context to parent’s context

Parameters

• canvas: Canvas

• recursive: boolean= false

Returns

void

Source

packages/core/src/shapes.ts:706

match()

match(query): boolean

Returns true if query matches this shape

Parameters

• query: object[]

Returns

boolean

Source

packages/core/src/shapes.ts:1097

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

packages/core/src/shapes.ts:1028

overlapRect()

overlapRect(canvas, rect): boolean

Determines whether this shape overlaps a given rect

Parameters

• canvas: Canvas

• rect: number[][]

Returns

boolean

Source

packages/core/src/shapes.ts:1035

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

packages/core/src/shapes.ts:1072

readAny()

readAny(json, field, defaultValue): any

Read an any value from the JSON object, return defaultValue if the field is undefined.

Parameters

• json: any

• field: string

• defaultValue: any

Returns

any

Inherited from

Obj.readAny

Source

packages/core/src/core/obj.ts:54

readArrayAny()

readArrayAny(json, field, defaultValue): any[]

Read an array of any value from the JSON object, return defaultValue if the field is not an array.

Parameters

• json: any

• field: string

• defaultValue: any[]

Returns

any[]

Inherited from

Obj.readArrayAny

Source

packages/core/src/core/obj.ts:65

readArrayBoolean()

readArrayBoolean(json, field, defaultValue, length?): boolean[]

Read an array of boolean from the JSON object, return defaultValue if the field is not an array of boolean.

Parameters

• json: any

• field: string

• defaultValue: boolean[]

• length?: number

Returns

boolean[]

Inherited from

Obj.readArrayBoolean

Source

packages/core/src/core/obj.ts:148

readArrayNumber()

readArrayNumber(json, field, defaultValue, length?): number[]

Read a number field from the JSON object, return defaultValue if the field is not a number.

Parameters

• json: any

• field: string

• defaultValue: number[]

• length?: number

Returns

number[]

Inherited from

Obj.readArrayNumber

Source

packages/core/src/core/obj.ts:87

readArrayPoint()

readArrayPoint(json, field, defaultValue): [number, number][]

Read a, array of point value from the JSON object, return defaultValue if the field is not an array of point.

Parameters

• json: any

• field: string

• defaultValue: [number, number][]

Returns

[number, number][]

Inherited from

Obj.readArrayPoint

Source

packages/core/src/core/obj.ts:256

readArrayString()

readArrayString(json, field, defaultValue): string[]

Read an array of string from the JSON object, return defaultValue if the field is not an array of string.

Parameters

• json: any

• field: string

• defaultValue: string[]

Returns

string[]

Inherited from

Obj.readArrayString

Source

packages/core/src/core/obj.ts:123

readBoolean()

readBoolean(json, field, defaultValue): boolean

Read a boolean field from the JSON object, return defaultValue if the field is not a boolean.

Parameters

• json: any

• field: string

• defaultValue: boolean

Returns

boolean

Inherited from

Obj.readBoolean

Source

packages/core/src/core/obj.ts:137

readColor()

readColor(json, field, defaultValue): string

Read a color field from the JSON object, return defaultValue if the field is not a string or not a valid color.

Parameters

• json: any

• field: string

• defaultValue: string

Returns

string

Inherited from

Obj.readColor

Source

packages/core/src/core/obj.ts:170

readEnum()

readEnum(json, field, enumType, defaultValue): string

Read an enum value from the JSON object, return defaultValue if the field is not a valid enum value.

Parameters

• json: any

• field: string

• enumType: any

• defaultValue: string

Returns

string

Inherited from

Obj.readEnum

Source

packages/core/src/core/obj.ts:185

readNumber()

readNumber(json, field, defaultValue): number

Read a number field from the JSON object, return defaultValue if the field is not a number.

Parameters

• json: any

• field: string

• defaultValue: number

Returns

number

Inherited from

Obj.readNumber

Source

packages/core/src/core/obj.ts:76

readPoint()

readPoint(json, field, defaultValue): [number, number]

Read a point value from the JSON object, return defaultValue if the field is not a point.

Parameters

• json: any

• field: string

• defaultValue: [number, number]

Returns

[number, number]

Inherited from

Obj.readPoint

Source

packages/core/src/core/obj.ts:213

readPointOrNull()

readPointOrNull(json, field, defaultValue): null | [number, number]

Read a point or null value from the JSON object, return defaultValue if the field is not a point or null.

Parameters

• json: any

• field: string

• defaultValue: null | [number, number]

Returns

null | [number, number]

Inherited from

Obj.readPointOrNull

Source

packages/core/src/core/obj.ts:233

readRef()

readRef(json, field): null | string

Read a reference to object from the JSON object, return defaultValue if the field is not string (obj’s id) or null.

Parameters

• json: any

• field: string

Returns

null | string

Inherited from

Obj.readRef

Source

packages/core/src/core/obj.ts:202

readString()

readString(json, field, defaultValue): string

Read a string field from the JSON object, return defaultValue if the field is not a string.

Parameters

• json: any

• field: string

• defaultValue: string

Returns

string

Inherited from

Obj.readString

Source

packages/core/src/core/obj.ts:112

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

packages/core/src/shapes.ts:765

renderDefault()

renderDefault(canvas): void

Default render this shape

Parameters

• canvas: MemoizationCanvas

Returns

void

Source

packages/core/src/shapes.ts:785

renderOutline()

renderOutline(canvas): void

Render this shape’s outline

Parameters

• canvas: MemoizationCanvas

Returns

void

Source

packages/core/src/shapes.ts:790

renderOutlineDefault()

renderOutlineDefault(canvas): number[][]

Render default outline

Parameters

• canvas: MemoizationCanvas

Returns

number[][]

Source

packages/core/src/shapes.ts:809

renderShadow()

renderShadow(canvas): void

Render shadow

Parameters

• canvas: MemoizationCanvas

Returns

void

Source

packages/core/src/shapes.ts:816

renderViewport()

renderViewport(canvas): void

Return this shape’s viewport

Parameters

• canvas: MemoizationCanvas

Returns

void

Source

packages/core/src/shapes.ts:903

renderViewportDefault()

renderViewportDefault(canvas): number[][]

Render default viewport

Parameters

• canvas: MemoizationCanvas

Returns

number[][]

Source

packages/core/src/shapes.ts:922

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

packages/core/src/shapes.ts:554

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

Obj.setJson

Source

packages/core/src/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

Overrides

Obj.toJSON

Source

packages/core/src/shapes.ts:422

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

packages/core/src/core/obj.ts:317

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

packages/core/src/core/obj.ts:331

traverseDepthFirstSequence()

traverseDepthFirstSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Obj.traverseDepthFirstSequence

Source

packages/core/src/core/obj.ts:354

traverseSequence()

traverseSequence(): Obj[]

Returns an array of shapes in order of traverse sequence.

Returns

Obj[]

Inherited from

Obj.traverseSequence

Source

packages/core/src/core/obj.ts:345

update()

update(canvas): void

Update shape

Parameters

• canvas: Canvas

Returns

void

Source

packages/core/src/shapes.ts:606

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

packages/core/src/shapes.ts:665