Documentation 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)

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