module:Component

module:Component

Abstract class for visual component

Constructor

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

Component constructor

Parameters:
Name Type Attributes Description
positionDefinition PositionDefinition

Position in space

options ComponentOptions <optional>

Drawing options

Extends

Members

# (static) cursors :Cursors

Type:
  • Cursors

# (static) dashes :DashPatterns

Type:
  • DashPatterns

# (static) defaultOptions :ComponentOptions

Type:
  • ComponentOptions

# (static) joins :LineJoins

Type:
  • LineJoins

# isClicked :Boolean

Type:
  • Boolean

# isHovered :Boolean

Type:
  • Boolean

# path :Path2D

Type:
  • Path2D

# willFill

Tell if a component will need to be filled

# willStroke

Tell if a component will need to be stroked

Methods

# getOrigin() → {Position}

Return the relative origin position of draw

Returns:
Type
Position

# isHover(positionDefinition, ctxopt) → {Boolean}

Define if is hover a position

Parameters:
Name Type Attributes Description
positionDefinition PositionDefinition

Any position

ctx CanvasRenderingContext2D <optional>

Context use for calculation

Returns:
Type
Boolean

# makePath(ctx) → {Component}

Make the path and trace it

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

Drawing context

Returns:

Itself

Type
Component

# setOptions(optionsopt) → {Component}

Define options for this component

Parameters:
Name Type Attributes Default Description
options ComponentOptions <optional>
{}

Options to override

Returns:

Itself

Type
Component

# trace()

Every component should have a trace function

Throws:
ReferenceError

Type Definitions

# ComponentOptions

Type:
  • Object
Properties
Name Type Attributes Default Description
fill String | ColorDefinition <optional>
"#000"

Color used to fill, set to null for transparent

stroke String | ColorDefinition <optional>
null

Color used to stroke, set to null for transparent

strokeWidth Number <optional>
2

Stroke line thickness in pixels

dashed Boolean | Array <optional>
false

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

cursor String <optional>
Component.cursors.default

Cursor to use when hover

join String <optional>
Component.joins.miter

How lines join between them

origin PositionDefinition <optional>
new Position()

Relative offset

shadow ShadowOptions <optional>

Set of options to set a shadow

# Cursors

Type:
  • Object
Properties
Name Type Description
default String

Normal behavior

none String

No visible cursor

contextMenu String

Possible to extends context-menu

help String

Display help

pointer String

Can be clicked

progress String

Process running in background

wait String

Process running in foreground

cell String

Table cell selection

crosshair String

Precise selection

text String

Text selection

textVertical String

Vertical test selection

alias String

Can create a shortcut

copy String

Can be copied

move String

Move around

noDrop String

Drop not allowed

notAllowed String

Action not allowed

grab String

Can be grabbed

grabbing String

Currently grabbing

allScroll String

Scroll in all direction

colResize String

Horizontal resize

rowResize String

Vertical resize

nResize String

Resize the north border

eResize String

Resize the east border

sResize String

Resize the south border

wResize String

Resize the west border

neResize String

Resize the north-east corner

seResize String

Resize the south-east corner

swResize String

Resize the north-west corner

nwResize String

Resize the north-west corner

ewResize String

Horizontal resize

nsResize String

Vertical resize

neswResize String

Diagonal resize (top-right to bottom-left)

nwseResize String

Diagonal resize (top-left to bottom-right)

zoomIn String

Zoom in

zoomOut String

Zoom out

link String

Alias for "alias"

verticalResize String

Alias for "rowResize"

horizontalResize String

Alias for "colResize"

topResize String

Alias for "nResize"

rightResize String

Alias for "eResize"

bottomResize String

Alias for "sResize"

leftResize String

Alias for "wResize"

# DashPatterns

Type:
  • Object
Properties
Name Type Description
default Array.<Number>

Simple dash

dots Array.<Number>

Simple dots

long Array.<Number>

Longer dash

sewing Array.<Number>

Alternating pattern of short and long dash

# LineJoins

Type:
  • Object
Properties
Name Type Description
miter String

Join segment by extending the line edges until they meet

round String

Join with a circle tangent to line edges

bevel String

Join with a straight line between the line edges

# ShadowOptions

Type:
  • Object
Properties
Name Type Attributes Default Description
blur Number <optional>
0

Spread of the shadow around the component

position PositionDefinition <optional>
new Position()

Position of the shadow relative to the component

color String | ColorDefinition <optional>
null

Color of the shadow