Global

Members


toolsCache :Array

cache of tools

Type:
  • Array

myStash :Array

cache of tools

Type:
  • Array

framesHistory :Array

frames that has been already drawen

Type:
  • Array

newFrames :Array

new frames waiting to draw

Type:
  • Array

grindingThreshold :number

should be equal to requestAnimationFrame fps

Type:
  • number

Methods


RGBtoHSV(red, green, blue)

[RGBtoHSV description]

Parameters:
Name Type Description
red number

0-255

green number

0-255

blue number

0-255

Returns:
  • {h: number, s: number, v: number}
Type
object

elementOffset(target, screenX, screenY)

Calculate element offset

Parameters:
Name Type Description
target HTMLElement

target element

screenX number

coordinate y

screenY number

coordinate x

Returns:
  • {x: number, y: number}
Type
object

uploadFile(File)

Uploads file

Parameters:
Name Type Description
File File

file


randomColor(config)

Generate random color

Parameters:
Name Type Description
config object

config of generator

Returns:
  • rgba(number,number,number,1)
Type
object

Progressbar(config)

Progressbar component

Parameters:
Name Type Description
config object

config.progressParentEl contain parent element where progress bar will be attached, if null then document.body will be parent element; config.style contains styles for progressbar


prepareLoadingElements()

Creates HTML Elements of component


uploadProgress(e)

Event handler for progress

Parameters:
Name Type Description
e object

ex. {total: 100, loaded: 50}


uploadCompleteDestructor()

Removes HTML Elements of component


uploadComplete()

Event handler for complete


startFakeProgress()

Starts fake, never ending progress (better spinner)


cancel()

Cancel progres bar and remove it as soon as possible


Resources(config)

Resources manager

Parameters:
Name Type Description
config object

-


calculateOffsetXY(target, screenX, screenY)

Calculate correct input coordinates fixed to target element offset

Parameters:
Name Type Description
target HTMLElement

target element

screenX number

coordinate y

screenY number

coordinate x

Returns:
  • {x: number, y: number}
Type
object

randomName(length)

Generate random string

Parameters:
Name Type Description
length number

number of letters

Returns:
  • speakable string
Type
string

colorPicker(x, y)

Returns color from canvas

Parameters:
Name Type Description
x number

screen x

y number

screen y

Returns:
  • ex. {r:0, g:0, b:0, a:0}
Type
object

renderOutputCanvas()

SAVE IMAGE EXPORT IMAGE SAVE PHOTO


showGrid(config)

Draws 100px grid on background.

Parameters:
Name Type Description
config object

{size: 1000, step: 100, substep: 10}


setScale(z)

sets the scale (scale) of sketchpad

Parameters:
Name Type Description
z float

precentage of scale (.5 for 50% etc.)


setRotation(z)

sets the scale (scale) of sketchpad

Parameters:
Name Type Description
z float

precentage of scale (.5 for 50% etc.)


registerTool(toolId, ToolClass)

Register tool in sketchpad before use.

Parameters:
Name Type Description
toolId string

unique id for tool

ToolClass Tool

child class of Tool


getCurrentTool()

[getLastTool description]

Returns:

[description]

Type
Tool

getCurrentToolId()

[getCurrentToolId description]

Returns:

[description]

Type
Any

getTool(id)

Returns registered tool by id.

Parameters:
Name Type Description
id string

id of registered tool


reset()

reset sketchpad

Returns:

[description]

Type
undefined

canDraw()

[canDraw description]

Returns:

[description]

Type
boolean

clearCanvas()

[clearCanvas description]

Returns:

[description]

Type
undefined

setTool(tool)

[setTool description]

Parameters:
Name Type Description
tool Any

[description]


drawFramePath(config, points)

Draw on canvas one path part (ex. part of one finger movement)

Parameters:
Name Type Description
config object

config of drawing viewport

points array

points of movement (at least 2 points)


drawFrame(draw)

Draw one time frame with parts of multiple paths (ex. parts of many fingers movement)

Parameters:
Name Type Description
draw array

array of paths with frames


drawInputs()

DRAWING INPUTS

Grind new inputs into draw frames and render it on screen

! Must be run before room sketch change !


drawSketchFrame(draw, sketch)

Draw using sketch many time frames

Parameters:
Name Type Description
draw array

array of paths with frames

sketch Sketch

sketch with cached tools


startPath(e, id, x, y)

Start of one input "many inputs can exists in one time" uses toolId = this.getTool(this.getCurrentToolId())

Parameters:
Name Type Description
e Event

input event (eg. TouchEvent)

id any

unique identifier in current time

x integer

x position in viewport

y integer

y position in viewport


drawPath(e, id, x, y)

Movement of one input

Parameters:
Name Type Description
e Event

input event (eg. TouchEvent)

id Any

unique identifier in current time (must be initialised by startPath)

x integer

x position in viewport

y integer

y position in viewport


endPath(e, id, x, y)

End of one input

Parameters:
Name Type Description
e Event

input event (eg. TouchEvent)

id Any

unique identifier in current time (must be initialised by startPath)

x integer

x position in viewport

y integer

y position in viewport


syncCanvasFrame()

Heartbeat of drawing engine

Draws new inputs (phisical Input and waiting Input in current sketch)


mainPos(x, y)

Calculates/fixes position of direct input methods (TouchEvent, MouseEvent...)

Parameters:
Name Type Description
x integer

x position in direct input viewport

y integer

y position in direct input viewport

Returns:
  • obect witch coordinates {x: corrx, y: corry}
Type
object

createEventsDraw()

Add event listeners to draw area


openConnection(e, token)

Connection to server has been established

Parameters:
Name Type Description
e Event

openConnection event

token string

room token to join


getCurrentViewport()

Returns current viewport


sendCurrentViewport()

Sends current status of this client viewport


sendStringToServer()

Convert object into JSON and send it to server

Parameters:
Type Description
object
Returns:
Type
undefined

sendMessageToServer()

Convert object into JSON and send it to server

Parameters:
Type Description
object
Returns:
Type
undefined

receiveMessageFromServer()

Receive JSON string from server, convert into object and execute command

Parameters:
Type Description
json-string
Returns:
Type
undefined

sendInputs()

Sends new inputs to server. This method is executed periodicly and also can be executed on important events like end of input.

Timeout of periodic can be set in: config.syncNetworkDataFrequency

Longer value causes time shift between clients.

! Must be run before room sketch change !


syncNetworkData()

Heartbeat of network synchronization

this.syncNetworkDataFrequency defines interval


cacheFrame(tool)

Cache frame by saving each configuration only once configuration = viewport position + scale + rotation + width + height + tool config

Parameters:
Name Type Description
tool object

drawing frame

Returns:

[description]

Type
integer

getCachedFrame(id)

[getTool description]

Parameters:
Name Type Description
id integer

[description]

Returns:

[description]

Type
object

reset()

reset sketch

Returns:

[description]

Type
undefined

grindBulkFrame(bulkFrame, receivingHistory)

Gets bulkFrame and grinds it to newFrames stack or to framesHistory if receivingHistory is true

Parameters:
Name Type Description
bulkFrame object

[description]

receivingHistory boolean

[description]

Returns:

[description]

Type
undefined

getCommandsHist()

[getCommandsHist description]

Returns:

[description]

Type
array

getCommandsCurrent()

[getCommandsCurrent description]

Returns:

[description]

Type
array

getToolConfig()

Get tool configuration

Returns:
  • tool configuration
Type
object

setToolConfig(config)

Sets configuration of tool

Parameters:
Name Type Description
config config

tool configuration

Returns:
  • this
Type
object

recalcS(config, s)

Recalulates scale

Parameters:
Name Type Description
config Object

configuration of drawing client viewport

s number

scale

Returns:
  • recalculated scale
Type
number

drawFramePath(config, points)

Draw on canvas one path part (ex. part of one finger movement)

Parameters:
Name Type Description
config object

config of drawing viewport

points array

points of movement (at least 2 points)


getToolConfig()

Get tool configuration

Returns:
  • tool configuration
Type
object

setToolConfig(config)

Sets configuration of tool

Parameters:
Name Type Description
config config

tool configuration

Returns:
  • this
Type
object

rotate(theta, p)

Rotate point over theta angle

Parameters:
Name Type Description
theta float

deg angle

p object

{x:.. ,y:..} point

Returns:
  • rotated point
Type
object

setColor(r, g, b, a)

Set tool color

Parameters:
Name Type Description
r byte

0-255

g byte

0-255

b byte

0-255

a number

0..1


getColor()

Get current tool color

Returns:

{r: byte, g: byte, b: byte, a: byte}

Type
object

getColorStr()

Get current tool color as "rgba(0,0,0,1)"" string

Returns:
  • rgba() color string
Type
string

setSize(size)

Set size

Parameters:
Name Type Description
size integer

tool size


getSize()

Get current size

Returns:

number

Type
integer

startInput(id, x, y)

Init new tool path (ex. one finger touch)

Parameters:
Name Type Description
id string

unique id of path

x int

first x position

y int

first y position

Returns:
  • Input
Type
Input

moveInput(input, x, y)

Record path movement

Parameters:
Name Type Description
input Input

Input object initialised by Tool::startInput();

x int

current x position

y int

current y position


finishInput(input, x, y)

Close tool path (ex. one finger touch)

Parameters:
Name Type Description
input Input

Input object initialised by Tool::startInput();

x int

last x position

y int

last y position


drawFramePath(config, points)

Draw on canvas one path part (ex. part of one finger movement)

Parameters:
Name Type Description
config object

config of drawing viewport

points array

points of movement (at least 2 points)


drawFramePath(config, points)

Draw on canvas one path part (ex. part of one finger movement)

Parameters:
Name Type Description
config object

config of drawing viewport

points array

points of movement (at least 2 points)


setSize(size)

Set size

Parameters:
Name Type Description
size integer

tool size


getSize()

Get current size

Returns:

number

Type
integer