Class: Rectangle<O>

Rectangle shape

Extends

Component<O>

Extended by

Type Parameters

Type Parameter	Default type
`O` extends `RectangleOptions`	`RectangleOptions`

Constructors

Constructor

new Rectangle<O>(
   positionDefinition?, 
   width?, 
   height?, 
   options?
): Rectangle<O>;

Defined in: rectangle.ts:92

Rectangle constructor

Parameters

Parameter	Type	Default value	Description
`positionDefinition?`	`PositionDefinition`	`undefined`	Top-left corner (depending on the origin)
`width?`	`number`	`0`	Horizontal size
`height?`	`number`	`0`	Vertical size
`options?`	`Partial`<`O`>	`undefined`	Drawing options

Returns

Rectangle<O>

Overrides

Component.constructor

Properties

Property	Type	Description	Inherited from	Defined in
`children`	`Container`<`ContainerOptions`>[]	List of children	`Component`.`children`	container.ts:134
`eventListeners`	`Record`<`string`, `EventListener`[]>	Set of event listeners of this component	`Component`.`eventListeners`	event-emitter.ts:33
`frameCount`	`number`	Number of time this container has been rendered	`Component`.`frameCount`	container.ts:140
`isClicked`	`boolean`	Is currently clicked	`Component`.`isClicked`	component.ts:177
`isDraggable?`	`boolean`	Is the component draggable	`Component`.`isDraggable`	draggable.ts:37
`isDragged?`	`boolean`	Is the component currently dragged	`Component`.`isDragged`	draggable.ts:39
`isHovered`	`boolean`	Is currently hovered	`Component`.`isHovered`	component.ts:180
`isResizable?`	`boolean`	Is the rectangle resizable	-	resizable.ts:22
`isRotatable?`	`boolean`	Is the component rotatable	`Component`.`isRotatable`	rotatable.ts:18
`isRotated?`	`boolean`	Is the component currently rotated	`Component`.`isRotated`	rotatable.ts:20
`options`	`O`	Set of options	`Component`.`options`	container.ts:131
`parent`	\| `Container`<`ContainerOptions`> \| `null`	Parent container (null when not attached)	`Component`.`parent`	container.ts:137
`path`	`Path2D` \| `null`	Last traced path	`Component`.`path`	component.ts:174
`position`	`Position`	Position in its container	`Component`.`position`	container.ts:128

Accessors

height

Get Signature

get height(): number;

Defined in: rectangle.ts:113

Vertical size

Returns

number

Set Signature

set height(height): void;

Defined in: rectangle.ts:117

Parameters

Parameter	Type
`height`	`number`

Returns

void

isScene

Get Signature

get isScene(): boolean;

Defined in: container.ts:143

Is this the root scene

Returns

boolean

Inherited from

Component.isScene

pathDependencies

Get Signature

get protected pathDependencies(): readonly unknown[] | null;

Defined in: rectangle.ts:137

Values the path depends on (the path is kept between renders while they don't change). Return null when the path must be traced at every render (the default). Override it alongside "trace" when the traced path only depends on a few values.

Example

protected override get pathDependencies () {
    return [this.width, this.height];
}

Returns

readonly unknown[] | null

Overrides

Component.pathDependencies

width

Get Signature

get width(): number;

Defined in: rectangle.ts:102

Horizontal size

Returns

number

Set Signature

set width(width): void;

Defined in: rectangle.ts:106

Parameters

Parameter	Type
`width`	`number`

Returns

void

willFill

Get Signature

get willFill(): boolean;

Defined in: component.ts:231

Tell if a component will need to be filled

Returns

boolean

Inherited from

Component.willFill

willStroke

Get Signature

get willStroke(): boolean;

Defined in: component.ts:238

Tell if a component will need to be stroked

Returns

boolean

Inherited from

Component.willStroke

className

Get Signature

get static className(): string;

Defined in: rectangle.ts:77

Name used when serializing (survive minification)

Returns

string

Overrides

Component.className

cursors

Get Signature

get static cursors(): object;

Defined in: component.ts:475

All available cursors https://developer.mozilla.org/docs/Web/CSS/cursor

Returns

object

alias

alias: string = "alias";

allScroll

allScroll: string = "all-scroll";

bottomResize

bottomResize: string = cssCursors.sResize;

cell

cell: string = "cell";

colResize

colResize: string = "col-resize";

contextMenu

contextMenu: string = "context-menu";

copy

copy: string = "copy";

crosshair

crosshair: string = "crosshair";

default

default: string = "default";

eResize

eResize: string = "e-resize";

ewResize

ewResize: string = "ew-resize";

grab

grab: string = "grab";

grabbing

grabbing: string = "grabbing";

help

help: string = "help";

horizontalResize

horizontalResize: string = cssCursors.colResize;

leftResize

leftResize: string = cssCursors.wResize;

link

link: string = cssCursors.alias;

move

move: string = "move";

neResize

neResize: string = "ne-resize";

neswResize

neswResize: string = "nesw-resize";

noDrop

noDrop: string = "no-drop";

none

none: string = "none";

notAllowed

notAllowed: string = "not-allowed";

nResize

nResize: string = "n-resize";

nsResize

nsResize: string = "ns-resize";

nwResize

nwResize: string = "nw-resize";

nwseResize

nwseResize: string = "nwse-resize";

pointer

pointer: string = "pointer";

progress

progress: string = "progress";

rightResize

rightResize: string = cssCursors.eResize;

rowResize

rowResize: string = "row-resize";

seResize

seResize: string = "se-resize";

sResize

sResize: string = "s-resize";

swResize

swResize: string = "sw-resize";

text

text: string = "text";

textVertical

textVertical: string = "vertical-text";

topResize

topResize: string = cssCursors.nResize;

verticalResize

verticalResize: string = cssCursors.rowResize;

wait

wait: string = "wait";

wResize

wResize: string = "w-resize";

zoomIn

zoomIn: string = "zoom-in";

zoomOut

zoomOut: string = "zoom-out";

Inherited from

Component.cursors

dashes

Get Signature

get static dashes(): object;

Defined in: component.ts:489

Dash patterns

Returns

default

default: number[];

Simple dash

dots

dots: number[];

Simple dots

long

long: number[];

Longer dash

sewing

sewing: number[];

Alternating pattern of short and long dash

Inherited from

Component.dashes

defaultOptions

Get Signature

get static defaultOptions(): RectangleOptions;

Defined in: rectangle.ts:229

Default options for this class

Returns

RectangleOptions

Overrides

Component.defaultOptions

events

Get Signature

get static events(): Record<string, string>;

Defined in: container.ts:846

Set of events for easy access

Returns

Record<string, string>

Inherited from

Component.events

joins

Get Signature

get static joins(): object;

Defined in: component.ts:482

How lines join between them

Returns

bevel

readonly bevel: "bevel" = "bevel";

Join with a straight line between the line edges

miter

readonly miter: "miter" = "miter";

Join segment by extending the line edges until they meet

round

readonly round: "round" = "round";

Join with a circle tangent to line edges

Inherited from

Component.joins

origins

Get Signature

get static origins(): object;

Defined in: rectangle.ts:239

Set of named origins

Returns

object

bottomCenter

readonly bottomCenter: "bottomCenter" = "bottomCenter";

bottomLeft

readonly bottomLeft: "bottomLeft" = "bottomLeft";

bottomRight

readonly bottomRight: "bottomRight" = "bottomRight";

center

readonly center: "center" = "center";

centerLeft

readonly centerLeft: "centerLeft" = "centerLeft";

centerRight

readonly centerRight: "centerRight" = "centerRight";

topCenter

readonly topCenter: "topCenter" = "topCenter";

topLeft

readonly topLeft: "topLeft" = "topLeft";

topRight

readonly topRight: "topRight" = "topRight";

Methods

add()

add(...children): this;

Defined in: container.ts:206

Add other containers as children

Parameters

Parameter	Type	Description
...`children`	`Container`<`ContainerOptions`>[]	Other containers

Returns

this

Itself

Inherited from

Component.add

applyRotationAndScale()

protected applyRotationAndScale(ctx): this;

Defined in: container.ts:467

Apply rotation and scaling to the context

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

this

Itself

Inherited from

Component.applyRotationAndScale

applyTransform()

applyTransform(ctx): this;

Defined in: container.ts:450

Apply position, clipping, rotation and scaling to the context

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

this

Itself

Inherited from

Component.applyTransform

buildPath()

protected buildPath(): Path2D;

Defined in: component.ts:312

Trace and return a new path

Returns

Path2D

Inherited from

Component.buildPath

climbAncestry()

climbAncestry(callback, until?): void;

Defined in: container.ts:744

Execute an action on itself and every ancestor

Parameters

Parameter	Type	Description
`callback`	(`ancestor`) => `void`	Function to execute on each ancestor
`until?`	\| `Container`<`ContainerOptions`> \| `null`	Define a ancestor where to stop the climbing (excluded)

Returns

void

Inherited from

Component.climbAncestry

clone()

clone(): this;

Defined in: container.ts:788

Create a deep copy of this container (and its children)

Returns

this

Inherited from

Component.clone

delete()

delete(): this;

Defined in: container.ts:259

Remove itself from its parent

Returns

this

Itself

Inherited from

Component.delete

draggable()

draggable(options?): DraggableAPI;

Defined in: draggable.ts:44

Make the component draggable (need to import "pencil.js/draggable")

Parameters

Parameter	Type	Description
`options?`	`DraggableOptions`	Additional options

Returns

DraggableAPI

Inherited from

Component.draggable

empty()

empty(): this;

Defined in: container.ts:251

Remove all its children

Returns

this

Itself

Inherited from

Component.empty

fire()

fire(event): this;

Defined in: container.ts:374

Fire an event and bubble it to its parent

Parameters

Parameter	Type	Description
`event`	`BaseEvent`	Event to fire

Returns

this

Itself

Inherited from

Component.fire

getAbsoluteMatrix()

getAbsoluteMatrix(): DOMMatrix;

Defined in: container.ts:330

Get the cumulated matrix of transformation from the root to this container

Returns

DOMMatrix

Inherited from

Component.getAbsoluteMatrix

getAbsolutePosition()

getAbsolutePosition(): Position;

Defined in: container.ts:338

Get this container's absolute position (up to it's utmost parent), taking into account every transformation

Returns

Position

Inherited from

Component.getAbsolutePosition

getMatrix()

getMatrix(): DOMMatrix;

Defined in: container.ts:310

Get the matrix of transformation applied by this container on its children (including its position)

Returns

DOMMatrix

Inherited from

Component.getMatrix

getOrigin()

getOrigin(): Position;

Defined in: rectangle.ts:208

Return the relative origin position of draw (accepting named origins like "center" or "bottomRight")

Returns

Position

Overrides

Component.getOrigin

getPath()

getPath(): Path2D;

Defined in: component.ts:355

Return the path of this component, traced again only when needed

Returns

Path2D

Inherited from

Component.getPath

getRoot()

getRoot(): Container;

Defined in: container.ts:299

Return its highest parent

Returns

Container

Inherited from

Component.getRoot

getScene()

getScene(): Promise<Scene<SceneOptions>>;

Defined in: container.ts:267

Return a promise for the associated scene (resolved once attached to a scene)

Returns

Promise<Scene<SceneOptions>>

Inherited from

Component.getScene

getTarget()

getTarget(position, ctx): 
  | Container<ContainerOptions>
  | null;

Defined in: container.ts:401

Find the target at a position

Parameters

Parameter	Type	Description
`position`	`Position`	Any position
`ctx`	`CanvasRenderingContext2D`	Drawing context to apply paths

Returns

| Container<ContainerOptions> | null

Inherited from

Component.getTarget

hide()

hide(): this;

Defined in: container.ts:718

Hide it

Returns

this

Itself

Inherited from

Component.hide

isAncestorOf()

isAncestorOf(container?): boolean;

Defined in: container.ts:728

Define if this is an ancestor of another container

Parameters

Parameter	Type	Description
`container?`	\| `Container`<`ContainerOptions`> \| `null`	Any container

Returns

boolean

Inherited from

Component.isAncestorOf

isHover()

isHover(positionDefinition?, ctx?): boolean;

Defined in: component.ts:425

Define if is hover a position

Parameters

Parameter	Type	Description
`positionDefinition?`	`PositionDefinition`	Any position
`ctx?`	`CanvasRenderingContext2D`	Context use for calculation (with transformations already applied)

Returns

boolean

Inherited from

Component.isHover

isInClip()

protected isInClip(position, ctx): boolean;

Defined in: container.ts:437

Tell if a position is inside the clipping region

Parameters

Parameter	Type	Description
`position`	`Position`	Any position (in the drawing context space)
`ctx`	`CanvasRenderingContext2D`	Drawing context with this container's transformations applied

Returns

boolean

Inherited from

Component.isInClip

isPathDirty()

protected isPathDirty(): boolean;

Defined in: component.ts:335

Tell if the path needs to be traced again

Returns

boolean

Inherited from

Component.isPathDirty

makePath()

makePath(ctx): this;

Defined in: component.ts:393

Set the context and draw the component

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

this

Itself

Inherited from

Component.makePath

on()

on(
   eventName, 
   callback, 
   isTargeted?
): this;

Defined in: event-emitter.ts:51

Listen to an event or multiple events

Parameters

Parameter	Type	Default value	Description
`eventName`	`string` \| `string`[]	`undefined`	Name of event (or a list of event names) to listen to. The event name can be followed by a modifier (separated by a ".")
`callback`	`EventCallback`	`undefined`	Function to call when event fire
`isTargeted?`	`boolean`	`false`	Should only listen to event targeting itself

Returns

this

Itself

Example

component.on("event.modifier", () => console.log("Event fired with modifier"));

Inherited from

Component.on

once()

once(
   eventName, 
   callback, 
   isTargeted?
): this;

Defined in: event-emitter.ts:71

Listen to an event only once

Parameters

Parameter	Type	Default value	Description
`eventName`	`string` \| `string`[]	`undefined`	Name of event (or a list of event names) to listen to.
`callback`	`EventCallback`	`undefined`	Function to call when event fire
`isTargeted?`	`boolean`	`false`	Should only listen to event targeting itself

Returns

this

Itself

Inherited from

Component.once

paint()

protected paint(ctx): void;

Defined in: rectangle.ts:147

Use the fast fillRect and strokeRect for plain rectangles

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

void

Overrides

Component.paint

remove()

remove(...children): this;

Defined in: container.ts:234

Remove children from the list

Parameters

Parameter	Type	Description
...`children`	`Container`<`ContainerOptions`>[]	Children to remove

Returns

this

Itself

Inherited from

Component.remove

removeAllListener()

removeAllListener(): this;

Defined in: event-emitter.ts:127

Remove all event listeners

Returns

this

Itself

Inherited from

Component.removeAllListener

removeListener()

removeListener(eventName, callback?): this;

Defined in: event-emitter.ts:105

Remove an event or multiple events

Parameters

Parameter	Type	Description
`eventName`	`string` \| `string`[]	Name of event (or a list of event names) to remove
`callback?`	`EventCallback`<`any`>	Specify the callback to remove, if not defined remove all listeners