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
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:
Name Type Attributes Description
positionDefinition PositionDefinition

Any position
ctx CanvasRenderingContext2D <optional>

Context use for calculation
Overrides:
Source:
Returns:
Type
Boolean

# makePath(ctx) → {Component}

Make the path and trace it

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

Drawing context
Overrides:
Source:
Returns:

Itself

Type
Component

# setOptions(optionsopt) → {Component}

Define options for this component

Parameters:
Name Type Attributes Default Description
options ComponentOptions <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
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
Source:

# 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"
Source:

# 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
Source:

# 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
Source:

# 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
Source: