Sketch

@auvious/sketch / Exports / Sketch

Class: Sketch

Implements

• ISketch

Table of contents

Constructors

• constructor

Properties

• _scaleValue
• arrow
• autoScale
• eraser
• events
• left
• marker
• messenger
• noTool
• scope
• sketchId
• syncedWidth
• top
• userEndpointId
• userId

Accessors

• scaleValue

Methods

• arrowDrawnCallback
• clear
• clearLayer
• connect
• deserialize
• eraserCallback
• lockRatio
• markerDrawnCallback
• mirror
• processIncomingMessage
• processSketchEvents
• resize
• scale
• scrollTo
• serialize
• serializeChildren
• snapshot
• create

Constructors

constructor

• new Sketch(canvas, client)

Parameters

Name	Type
canvas	HTMLCanvasElement
client	AuviousCommon

Properties

_scaleValue

• Private _scaleValue: number = 1

---

arrow

• arrow: ArrowTool

Implementation of

ISketch.arrow

---

autoScale

• Private autoScale: boolean = false

---

eraser

• eraser: EraserTool

Implementation of

ISketch.eraser

---

events

• events: Events<IEventMap>

Implementation of

ISketch.events

---

left

• Private left: number = 0

---

marker

• marker: PathTool

Implementation of

ISketch.marker

---

messenger

• Private messenger: Messenger

---

noTool

• noTool: Tool

---

scope

• scope: PaperScope

---

sketchId

• sketchId: string

---

syncedWidth

• Private syncedWidth: number = 1280.0

---

top

• Private top: number = 0

---

userEndpointId

• userEndpointId: string

---

userId

• userId: string

Accessors

scaleValue

• Private get scaleValue(): number

Returns

number

• Private set scaleValue(value): void

Parameters

Name	Type
value	number

Returns

void

Methods

arrowDrawnCallback

▸ Private arrowDrawnCallback(ev): void

Parameters

Name	Type
ev	any

Returns

void

---

clear

▸ clear(): void

Returns

void

Implementation of

ISketch.clear

---

clearLayer

▸ Private clearLayer(): void

Returns

void

---

connect

▸ connect(options): Promise<string>

Make the sketch collaborative

Parameters

Name	Type
options	IJoinArguments

Returns

Promise<string>

sketchId

Implementation of

ISketch.connect

---

deserialize

▸ deserialize(sketch): void

Parameters

Name	Type
sketch	string

Returns

void

Implementation of

ISketch.deserialize

---

eraserCallback

▸ Private eraserCallback(ev): void

Parameters

Name	Type
ev	any

Returns

void

---

lockRatio

▸ lockRatio(state, width?): void

if set, when resizing, the view will be scaled to equal the ratio of an virtual sketch of width value for all participants

Parameters

Name	Type	Default value
state	boolean	undefined
width	number	720

Returns

void

Implementation of

ISketch.lockRatio

---

markerDrawnCallback

▸ Private markerDrawnCallback(ev): void

Parameters

Name	Type
ev	any

Returns

void

---

mirror

▸ mirror(): void

flips the sketch horizontally at center

Returns

void

Implementation of

ISketch.mirror

---

processIncomingMessage

▸ Private processIncomingMessage(msg): void

Parameters

Name	Type
msg	Object
msg.payload	Object
msg.payload.events?	any[]
msg.payload.userEndpointId	string
msg.payload.userId	string
msg.type	MESSAGES

Returns

void

---

processSketchEvents

▸ Private processSketchEvents(events): void

Parameters

Name	Type
events	{ data: any ; op: OPS }[]

Returns

void

---

resize

▸ resize(x, y): void

resize the view, scaling the sketch if setSync true

Parameters

Name	Type
x	number
y	number

Returns

void

Implementation of

ISketch.resize

---

scale

▸ scale(scale, center?): void

scaling using absolute values

Parameters

Name	Type
scale	number
center?	Object
center.x	number
center.y	number

Returns

void

Implementation of

ISketch.scale

---

scrollTo

▸ scrollTo(top, left): void

scrolling using absolute values

Parameters

Name	Type
top	number
left	number

Returns

void

Implementation of

ISketch.scrollTo

---

serialize

▸ serialize(): string

serialize own drawings

Returns

string

Implementation of

ISketch.serialize

---

serializeChildren

▸ Private serializeChildren(): { data: string ; op: any }[]

Returns

{ data: string ; op: any }[]

---

snapshot

▸ snapshot(): HTMLCanvasElement

optional background image should have the same aspect ratio as the sketch

Returns

HTMLCanvasElement

Implementation of

ISketch.snapshot

---

create

▸ Static create(canvas, auviousClient): ISketch

Parameters

Name	Type
canvas	HTMLCanvasElement
auviousClient	AuviousCommon

Returns

ISketch