module:Component

Abstract class for visual component

Constructor

(abstract) new module:Component(positionDefinition, optionsopt)

Component constructor

Parameters:
NameTypeAttributesDescription
positionDefinitionPositionDefinition

Position in space

optionsComponentOptions<optional>

Drawing options

Source

Extends

Members

(static) cursors :Cursors

All available cursors https://www.w3.org/TR/2017/WD-css-ui-4-20171222/#cursor

Type:
  • Cursors
Source

(static) dashes :DashPatterns

Type:
  • DashPatterns
Source

(static) defaultOptions :ComponentOptions

Type:
  • ComponentOptions
Source

(static) joins :LineJoins

Type:
  • LineJoins
Source

isClicked :Boolean

Type:
  • Boolean
Source

isHovered :Boolean

Type:
  • Boolean
Source

path :Path2D

Type:
  • Path2D
Source

willFill

Tell if a component will need to be filled

Source

willStroke

Tell if a component will need to be stroked

Source

Methods

getOrigin() → {Position}

Return the relative origin position of draw

Source
Returns:
Type: 
Position

isHover(positionDefinition, ctxopt) → {Boolean}

Define if is hover a position

Parameters:
NameTypeAttributesDescription
positionDefinitionPositionDefinition

Any position

ctxCanvasRenderingContext2D<optional>

Context use for calculation

Overrides
Source
Returns:
Type: 
Boolean

makePath(ctx) → {Component}

Make the path and trace it

Parameters:
NameTypeDescription
ctxCanvasRenderingContext2D

Drawing context

Overrides
Source
Returns:

Itself

Type: 
Component

setOptions(optionsopt) → {Component}

Define options for this component

Parameters:
NameTypeAttributesDefaultDescription
optionsComponentOptions<optional>
{}

Options to override

Overrides
Source
Returns:

Itself

Type: 
Component

trace()

Every component should have a trace function

Source
Throws:
ReferenceError

Type Definitions

ComponentOptions

Type:
  • Object
Properties
NameTypeAttributesDefaultDescription
fillString | ColorDefinition<optional>
"#000"

Color used to fill, set to null for transparent

strokeString | ColorDefinition<optional>
null

Color used to stroke, set to null for transparent

strokeWidthNumber<optional>
2

Stroke line thickness in pixels

dashedBoolean | Array<optional>
false

Should the line be dashed, you can also specify the dash pattern (ex: [4, 4] or Component.dashes.dots)

cursorString<optional>
Component.cursors.default

Cursor to use when hover

joinString<optional>
Component.joins.miter

How lines join between them

originPositionDefinition<optional>
new Position()

Relative offset

shadowShadowOptions<optional>

Set of options to set a shadow

Source

Cursors

Type:
  • Object
Properties
NameTypeDescription
defaultString

Normal behavior

noneString

No visible cursor

contextMenuString

Possible to extends context-menu

helpString

Display help

pointerString

Can be clicked

progressString

Process running in background

waitString

Process running in foreground

cellString

Table cell selection

crosshairString

Precise selection

textString

Text selection

textVerticalString

Vertical test selection

aliasString

Can create a shortcut

copyString

Can be copied

moveString

Move around

noDropString

Drop not allowed

notAllowedString

Action not allowed

grabString

Can be grabbed

grabbingString

Currently grabbing

allScrollString

Scroll in all direction

colResizeString

Horizontal resize

rowResizeString

Vertical resize

nResizeString

Resize the north border

eResizeString

Resize the east border

sResizeString

Resize the south border

wResizeString

Resize the west border

neResizeString

Resize the north-east corner

seResizeString

Resize the south-east corner

swResizeString

Resize the north-west corner

nwResizeString

Resize the north-west corner

ewResizeString

Horizontal resize

nsResizeString

Vertical resize

neswResizeString

Diagonal resize (top-right to bottom-left)

nwseResizeString

Diagonal resize (top-left to bottom-right)

zoomInString

Zoom in

zoomOutString

Zoom out

linkString

Alias for "alias"

verticalResizeString

Alias for "rowResize"

horizontalResizeString

Alias for "colResize"

topResizeString

Alias for "nResize"

rightResizeString

Alias for "eResize"

bottomResizeString

Alias for "sResize"

leftResizeString

Alias for "wResize"

Source

DashPatterns

Type:
  • Object
Properties
NameTypeDescription
defaultArray.<Number>

Simple dash

dotsArray.<Number>

Simple dots

longArray.<Number>

Longer dash

sewingArray.<Number>

Alternating pattern of short and long dash

Source

LineJoins

Type:
  • Object
Properties
NameTypeDescription
miterString

Join segment by extending the line edges until they meet

roundString

Join with a circle tangent to line edges

bevelString

Join with a straight line between the line edges

Source

ShadowOptions

Type:
  • Object
Properties
NameTypeAttributesDefaultDescription
blurNumber<optional>
0

Spread of the shadow around the component

positionPositionDefinition<optional>
new Position()

Position of the shadow relative to the component

colorString | ColorDefinition<optional>
null

Color of the shadow

Source