Class: Path<O>

Free shape following a list of instructions (or a SVG path string)

Extends

Component<O>

Type Parameters

Type Parameter	Default type
`O` extends `ComponentOptions`	`ComponentOptions`

Constructors

Constructor

new Path<O>(
   positionDefinition?, 
   instructions?, 
   isClosed?, 
   options?
): Path<O>;

Defined in: path.ts:175

Path constructor

Parameters

Parameter	Type	Default value	Description
`positionDefinition?`	`PositionDefinition`	`undefined`	Starting position of the Path
`instructions?`	`string` \| `Instruction`[]	`[]`	Set of instructions to follow to draw it (or a SVG path string)
`isClosed?`	`boolean`	`true`	Should the path close itself (add a line to the starting position)
`options?`	`Partial`<`LineOptions` \| `O`>	`undefined`	Drawing options

Returns

Path<O>

Example

new Path([0, 0], [
    Path.lineTo([100, 0]),
    Path.quarterTo([100, 100]),
]);
new Path([0, 0], "l100 0 a50 50 0 0 1 0 100");

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
`instructions`	`string` \| `Instruction`[]	Set of instructions (or a SVG path string)	-	path.ts:157
`isClicked`	`boolean`	Is currently clicked	`Component`.`isClicked`	component.ts:177
`isClosed`	`boolean`	Should the path close itself	-	path.ts:160
`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
`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

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: component.ts:328

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

Inherited from

Component.pathDependencies

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: path.ts:152

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(): ComponentOptions;

Defined in: component.ts:452

Default options for this class

Returns

ComponentOptions

Inherited from

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

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: component.ts:201

Return the relative origin position of draw

Returns

Position

Inherited from

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: component.ts:366

Fill and stroke the component (the context is already set)

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

void

Inherited from

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

Returns

this

Itself

Inherited from

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

Inherited from

Component.render

rotatable()

rotatable(): RotatableAPI;

Defined in: rotatable.ts:24

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

Returns

RotatableAPI

Inherited from

Component.rotatable

setContext()

setContext(ctx): this;

Defined in: component.ts:274

Set drawing variables of the context according to specified options

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

this

Itself

Inherited from

Component.setContext

setLineContext()

protected setLineContext(ctx): void;

Defined in: component.ts:246

Set line related variables of the context

Parameters

Parameter	Type	Description
`ctx`	`CanvasRenderingContext2D`	Drawing context

Returns

void

Inherited from

Component.setLineContext

setOptions()

setOptions(options?): this;

Defined in: component.ts:211

Define options for this component

Parameters

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

Returns

this

Itself

Inherited from

Component.setOptions

show()

show(): this;

Defined in: container.ts:708

Display it

Returns

this

Itself

Inherited from

Component.show

sortChildren()

protected sortChildren(): void;

Defined in: container.ts:385

Sort children according to their zIndex

Returns

void

Inherited from

Component.sortChildren

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

Inherited from

Component.toGlobal

toJSON()

toJSON(): ContainerJSON;

Defined in: path.ts:221

Return a json ready object

Returns

ContainerJSON

Overrides

Component.toJSON

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

Inherited from

Component.toLocal

trace()

trace(path): this;

Defined in: path.ts:201

Draw the path

Parameters

Parameter	Type	Description
`path`	`Path2D`	Drawing path

Returns

this

Itself

Overrides

Component.trace

arcTo()

static arcTo(
   position, 
   angle, 
   magicRatio, 
   clockwise?
): Instruction;

Defined in: path.ts:286

Try to approximate an arc between two points

Parameters

Parameter	Type	Default value	Description
`position`	`PositionDefinition`	`undefined`	Any position
`angle`	`number`	`undefined`	Arc angle in ratio of a full circle (should be less than 0.5)
`magicRatio`	`number`	`undefined`	Control points "openness" ratio
`clockwise?`	`boolean`	`true`	Should the arc be clockwise or not

Returns

Instruction

bezierTo()

static bezierTo(
   position, 
   firstControlPoint, 
   secondControlPoint
): Instruction;

Defined in: path.ts:310

Draw a bezier curve to a position

Parameters

Parameter	Type	Description
`position`	`PositionDefinition`	Any position
`firstControlPoint`	`PositionDefinition`	First point to control the curve
`secondControlPoint`	`PositionDefinition`	Second point to control the curve

Returns

Instruction

from()

static from(definition): Path;

Defined in: path.ts:234

Return an instance from a generic object

Parameters

Parameter	Type	Description
`definition`	`ContainerJSON`	Path definition

Returns

Path

Overrides

Component.from

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

Inherited from

Component.getClipPath

halfTo()

static halfTo(position, clockwise?): Instruction;

Defined in: path.ts:273

Draw a half circle to a position

Parameters

Parameter	Type	Default value	Description
`position`	`PositionDefinition`	`undefined`	Any position
`clockwise?`	`boolean`	`true`	Should the arc be clockwise or not

Returns

Instruction

lineTo()

static lineTo(position): Instruction;

Defined in: path.ts:245

Draw a line to a position

Parameters

Parameter	Type	Description
`position`	`PositionDefinition`	Any position

Returns

Instruction

moveTo()

static moveTo(position): Instruction;

Defined in: path.ts:253

Move the pencil without drawing

Parameters

Parameter	Type	Description
`position`	`PositionDefinition`	Any position

Returns

Instruction

quadTo()

static quadTo(position, controlPoint): Instruction;

Defined in: path.ts:297

Draw a quadratic curve to a position

Parameters

Parameter	Type	Description
`position`	`PositionDefinition`	Any position
`controlPoint`	`PositionDefinition`	Point that control the curve

Returns

Instruction

quarterTo()

static quarterTo(position, clockwise?): Instruction;

Defined in: path.ts:262

Draw a quarter circle to a position

Parameters

Parameter	Type	Default value	Description
`position`	`PositionDefinition`	`undefined`	Any position
`clockwise?`	`boolean`	`true`	Should the arc be clockwise or not

Returns

Instruction

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

Inherited from

Component.setOpacity

sinTo()

static sinTo(
   position, 
   nbSins?, 
   sinsHeight?
): Instruction;

Defined in: path.ts:375

Draw a sinusoid to a position

Parameters

Parameter	Type	Default value	Description
`position`	`PositionDefinition`	`undefined`	Any position
`nbSins?`	`number`	`1`	Number of sinusoid to draw
`sinsHeight?`	`number`	`10`	Height of the sinusoid

Returns

Instruction

splineThrough()

Call Signature

static splineThrough(points, tension?): Instruction;

Defined in: path.ts:327

Draw a smooth curve going through a set of positions

Parameters

Parameter	Type	Description
`points`	`PositionDefinition`[]	Any set of positions (the last one being the target)
`tension?`	`number`	Ratio of tension

Returns

Instruction

Call Signature

static splineThrough(
   target, 
   points, 
   tension?
): Instruction;

Defined in: path.ts:334

Draw a smooth curve going through a set of positions (serialized form)

Parameters

Parameter	Type	Description
`target`	`PositionDefinition`	Last position
`points`	`PositionDefinition`[]	Every positions to go through before the target
`tension?`	`number`	Ratio of tension

Returns

Instruction

waveTo()

static waveTo(position, nbWaves?): Instruction;

Defined in: path.ts:356

Draw a series of half circles to a position

Parameters

Parameter	Type	Default value	Description
`position`	`PositionDefinition`	`undefined`	Any position
`nbWaves?`	`number`	`1`	Number of waves to draw

Returns

Instruction

Class: Path<O> ​

Extends ​

Type Parameters ​

Constructors ​

Constructor ​

Parameters ​

Class: Path<O>

Extends

Type Parameters

Constructors

Constructor

Parameters