pencil.js / container / Container

Class: Container<O>

Defined in: container.ts:121

Basic node in the scene graph, holding children and their common transformations

Extends

• EventEmitter

Extended by

• OffScreenCanvas
• Component

Type Parameters

Type Parameter	Default type
O extends ContainerOptions	ContainerOptions

Constructors

Constructor

new Container<O>(positionDefinition?, options?): Container<O>;

Defined in: container.ts:161

Container constructor

Parameters

Parameter	Type	Description
positionDefinition?	PositionDefinition	Position in its container
options?	Partial<O>	Specific options

Returns

Container<O>

Overrides

EventEmitter.constructor

Properties

Property	Type	Description	Inherited from	Defined in
children	Container<ContainerOptions>[]	List of children	-	container.ts:134
eventListeners	Record<string, EventListener[]>	Set of event listeners of this component	EventEmitter.eventListeners	event-emitter.ts:33
frameCount	number	Number of time this container has been rendered	-	container.ts:140
options	O	Set of options	-	container.ts:131
parent	| Container<ContainerOptions> | null	Parent container (null when not attached)	-	container.ts:137
position	Position	Position in its container	-	container.ts:128

Accessors

isScene

Get Signature

get isScene(): boolean;

Defined in: container.ts:143

Is this the root scene

Returns

boolean

---

className

Get Signature

get static className(): string;

Defined in: container.ts:123

Name used when serializing (survive minification)

Returns

string

---

defaultOptions

Get Signature

get static defaultOptions(): ContainerOptions;

Defined in: container.ts:831

Default options for this class

Returns

ContainerOptions

---

events

Get Signature

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

Defined in: container.ts:846

Set of events for easy access

Returns

Record<string, string>

Overrides

EventEmitter.events

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

---

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

---

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

---

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

---

clone()

clone(): this;

Defined in: container.ts:788

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

Returns

this

---

delete()

delete(): this;

Defined in: container.ts:259

Remove itself from its parent

Returns

this

Itself

---

empty()

empty(): this;

Defined in: container.ts:251

Remove all its children

Returns

this

Itself

---

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

Overrides

EventEmitter.fire

---

getAbsoluteMatrix()

getAbsoluteMatrix(): DOMMatrix;

Defined in: container.ts:330

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

Returns

DOMMatrix

---

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

---

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

---

getRoot()

getRoot(): Container;

Defined in: container.ts:299

Return its highest parent

Returns

Container

---

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

---

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

---

hide()

hide(): this;

Defined in: container.ts:718

Hide it

Returns

this

Itself

---

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

---

isHover()

isHover(_positionDefinition?, _ctx?): boolean;

Defined in: container.ts:197

Container can't be hovered

Parameters

Parameter	Type	Description
_positionDefinition?	PositionDefinition	Any position
_ctx?	CanvasRenderingContext2D	Drawing context

Returns

boolean

---

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

---

makePath()

makePath(_ctx): this;

Defined in: container.ts:700

Do nothing on Container, override it to add behavior

Parameters

Parameter	Type	Description
_ctx	CanvasRenderingContext2D	Drawing context

Returns

this

Itself

---

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

EventEmitter.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

EventEmitter.once

---

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

---

removeAllListener()

removeAllListener(): this;

Defined in: event-emitter.ts:127

Remove all event listeners

Returns

this

Itself

Inherited from

EventEmitter.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

Returns

this

Itself

Inherited from

EventEmitter.removeListener

---

render()

render(ctx): this;

Defined in: container.ts:512

Draw itself and all its children

Parameters

Parameter	Type	Description
ctx	CanvasRenderingContext2D	Drawing context (its current transformation and opacity are used as starting point)

Returns

this

Itself

---

setContext()

setContext(_ctx): this;

Defined in: container.ts:503

Set variables of the context according to specified options (override it to add behavior)

Parameters

Parameter	Type	Description
_ctx	CanvasRenderingContext2D	Drawing context

Returns

this

Itself

---

setOptions()

setOptions(options?): this;

Defined in: container.ts:177

Define options for this container

Parameters

Parameter	Type	Description
options?	Partial<O>	Options to override

Returns

this

Itself

---

show()

show(): this;

Defined in: container.ts:708

Display it

Returns

this

Itself

---

sortChildren()

protected sortChildren(): void;

Defined in: container.ts:385

Sort children according to their zIndex

Returns

void

---

toGlobal()

toGlobal(positionDefinition): Position;

Defined in: container.ts:360

Convert a position from this container's space into the root (scene) space

Parameters

Parameter	Type	Description
positionDefinition	PositionDefinition	Position relative to this container

Returns

Position

---

toJSON()

toJSON(): ContainerJSON;

Defined in: container.ts:755

Return a json ready object

Returns

ContainerJSON

---

toLocal()

toLocal(positionDefinition): Position;

Defined in: container.ts:347

Convert a position from the root (scene) space into this container's space

Parameters

Parameter	Type	Description
positionDefinition	PositionDefinition	Position relative to the root

Returns

Position

---

from()

static from(definition): Container;

Defined in: container.ts:824

Return an instance from a generic object

Parameters

Parameter	Type	Description
definition	ContainerJSON	Container definition

Returns

Container

---

getClipPath()

static getClipPath(clip): Path2D;

Defined in: container.ts:489

Build the clipping path of a component, with its own transformations applied

Parameters

Parameter	Type	Description
clip	Component	Component used as clip

Returns

Path2D

---

setOpacity()

static setOpacity(ctx, opacity): void;

Defined in: container.ts:814

Define context opacity (null means no change)

Parameters

Parameter	Type	Description
ctx	CanvasRenderingContext2D	Drawing context
opacity	number | null	Opacity value

Returns

void