Class: Checkbox<O>

Checkbox input

Extends

Input<O>

Type Parameters

Type Parameter	Default type
`O` extends `CheckboxOptions`	`CheckboxOptions`

Constructors

Constructor

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

Defined in: checkbox.ts:31

Checkbox constructor

Parameters

Parameter	Type	Description
`positionDefinition?`	`PositionDefinition`	Top-left corner
`options?`	`Partial`<`O`>	Specific options

Returns

Checkbox<O>

Overrides

Input.constructor

Properties

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

Accessors

height

Get Signature

get height(): number;

Defined in: checkbox.ts:58

Height of the checkbox

Returns

number

Set Signature

set height(value): void;

Defined in: checkbox.ts:62

Parameters

Parameter	Type
`value`	`number`

Returns

void

isScene

Get Signature

get isScene(): boolean;

Defined in: container.ts:143

Is this the root scene

Returns

boolean

Inherited from

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

Input.pathDependencies

size

Get Signature

get size(): number;

Defined in: checkbox.ts:69

Same as width and height

Returns

number

Set Signature

set size(value): void;

Defined in: checkbox.ts:73

Parameters

Parameter	Type
`value`	`number`

Returns

void

value

Get Signature

get value(): boolean;

Defined in: checkbox.ts:98

Is checked

Returns

boolean

Set Signature

set value(value): void;

Defined in: checkbox.ts:102

Current value

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

Overrides

Input.value

width

Get Signature

get width(): number;

Defined in: checkbox.ts:47

Width of the checkbox

Returns

number

Set Signature

set width(value): void;

Defined in: checkbox.ts:51

Parameters

Parameter	Type
`value`	`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

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

Input.willStroke

className

Get Signature

get static className(): string;

Defined in: checkbox.ts:19

Name used when serializing (survive minification)

Returns

string

Overrides

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

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

Input.dashes

defaultOptions

Get Signature

get static defaultOptions(): CheckboxOptions;

Defined in: checkbox.ts:111

Default options for this class

Returns

CheckboxOptions

Overrides

Input.defaultOptions

events

Get Signature

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

Defined in: input.ts:65

Set of events for easy access

Returns

Record<string, string>

Inherited from

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

Input.joins

MARGIN

Get Signature

get static MARGIN(): number;

Defined in: checkbox.ts:122

Margin ratio around the check mark

Returns

number

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

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

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

Input.applyTransform

buildPath()

protected buildPath(): Path2D;

Defined in: component.ts:312

Trace and return a new path

Returns

Path2D

Inherited from

Input.buildPath

click()

click(): void;

Defined in: checkbox.ts:80

Action on click (fire a "change" event by default)

Returns

void

Overrides

Input.click

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

Input.climbAncestry

clone()

clone(): this;

Defined in: container.ts:788

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

Returns

this

Inherited from

Input.clone

delete()

delete(): this;

Defined in: container.ts:259

Remove itself from its parent

Returns

this

Itself

Inherited from

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

Input.draggable

empty()

empty(): this;

Defined in: container.ts:251

Remove all its children

Returns

this

Itself

Inherited from

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

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

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

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

Input.getMatrix

getOrigin()

getOrigin(): Position;

Defined in: widget.ts:59

Return the relative origin position of draw

Returns

Position

Inherited from

Input.getOrigin

getPath()

getPath(): Path2D;

Defined in: component.ts:355

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

Returns

Path2D

Inherited from

Input.getPath

getRoot()

getRoot(): Container;

Defined in: container.ts:299

Return its highest parent

Returns

Container

Inherited from

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

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

Input.getTarget

hide()

hide(): this;

Defined in: container.ts:718

Hide it

Returns

this

Itself

Inherited from

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

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

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

Input.isInClip

isPathDirty()

protected isPathDirty(): boolean;

Defined in: component.ts:335

Tell if the path needs to be traced again

Returns

boolean

Inherited from

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

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

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

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

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

Input.remove

removeAllListener()

removeAllListener(): this;

Defined in: event-emitter.ts:127

Remove all event listeners

Returns

this

Itself

Inherited from

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