Class WhiteboardDesigner

Defined in: wboard-drawing.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	WhiteboardDesigner(witeboardConfig, whiteboardId, user, pubSubUrl, pubSubTransport) Whiteboard designer class for element drawing.

Field Summary
Field Attributes	Field Name and Description
	config Whiteboard's configuration WhiteboardConfig.
	logging Logging flag, true - logging is visible, false - otherwise.
<private> <inner>	modeSwitcher Action mode.
<private> <inner>	paper Raphael's canvas.
	pubSubTransport Transport protocol "long-polling" \| "streaming" \| "websocket".
	pubSubUrl URL for bidirectional communication.
	user User which works with this whiteboard.
	whiteboardId Whiteboard's id.

Method Summary
Method Attributes	Method Name and Description
	bringBackElement(helperBox) Brings element to back (behind all other elements).
	bringFrontElement(helperBox) Brings element to front (over all other elements).
	clearWhiteboard() Clears the whiteboard.
<inner>	clickEl(event)
<inner>	clickHandler(event)
	cloneElement(helperBox) Clones element to back.
	createElement(props, classType) Creates element.
<inner>	ddMoveEl(dx, dy)
<inner>	ddStartEl()
<inner>	ddStopEl()
	drawCircle(x, y) Draws circle with default properties.
<inner>	drawCircleSet(x, y, width, height)
	drawEllipse(x, y) Draws ellipse with default properties.
	drawFreeLineBegin(x, y) Draws begin point of the free line and registers mouse handlers.
<inner>	drawHelperBox(el, classType, rotation, scale, select, id)
<inner>	drawIcons()
	drawImage(inputUrl, width, height) Draws image with default properties.
	drawRectangle(x, y) Draws rectangle with default properties.
	drawStraightLineBegin(x, y) Draws begin point of the straight line and registers mouse handlers.
	drawText(x) Draws text with default properties.
<inner>	getDasharrayValue(label)
	getSelectedObject() Gets currently selected whiteboard element.
<inner>	getSelectedProperties(el, propsObj)
<inner>	hoverOutEl(event)
<inner>	hoverOverEl(event)
	joinUser(usersCount) Sends a message if user has been joined the whiteboard.
<inner>	logDebug(msg)
<inner>	logIncoming(data)
<inner>	logOutgoing(data)
<inner>	logProfile(timestamp)
	makeAsDefault(properties) Makes given properties as default (user push the button "Make as default").
<inner>	mousedownHandler(event)
<inner>	mouseleaveHandler(event)
<inner>	mousemoveHandler(event)
<inner>	mouseupHandler()
	openIconsDialog(x, y) Open dialog to paste an icon.
	openImageDialog(x, y) Open dialog to paste an image.
	openResizeDialog() Opens dialog to resize the whiteboard.
	openTextDialog(x, y) Open dialog to input a text.
<inner>	prependMessage(msg)
	propagateProperties(classType, props) Gets properties from the panel "Edit Properties".
	pubSubCallback(response) Callback method defined in subscribePubSub().
	removeElement(helperBox) Removes element.
	resizeWhiteboard(width, height) Resizes this whiteboard.
	restoreWhiteboard(jsWhiteboard) Restores the whiteboard if user has joined this whiteboard.
	selectElement(helperBox) Selects an element if user clicks on it.
	sendChanges(jsObject) Sends any changes on client side to the server (see actions).
	sendPropertiesChanges(type, resize, resize) Sends changed properties of the currently selected element to the server (use case: user changes properties in the panel "Edit Properties").
<inner>	setElementProperties(el, propsObj)
	setIdSubviewProperties(id) Sets Id of the subview - where pinned or unpinned panels are placed.
	showProperties(showClass) Enables / disables properties in the panel "Edit Properties" depends on action.
	showSelectedProperties(selObj) Shows properties of the selected element in the panel "Edit Properties".
	subscribePubSub() Subscribes to bidirectional channel.
	switchToMode(mode, cursor) Switches the mode if user selects any action (like "Input Text" or "Draw Circle").
	transferCirclePropertiesToDialog(cx, cy, props) Transfers circle properties to the panel "Edit properties".
	transferEllipsePropertiesToDialog(cx, cy, props) Transfers ellipse properties to the panel "Edit properties".
	transferFreeLinePropertiesToDialog(props) Transfers free line properties to the panel "Edit properties".
	transferIconPropertiesToDialog(cx, cy, props) Transfers icon properties to the panel "Edit properties".
	transferImagePropertiesToDialog(cx, cy, props) Transfers image properties to the panel "Edit properties".
	transferPropertiesToDialog(selObj) Transfer properties of the selected element to the panel "Edit Properties".
	transferRectanglePropertiesToDialog(cx, cy, props) Transfers rectangle properties to the panel "Edit properties".
	transferStraightLinePropertiesToDialog(props) Transfers straight line properties to the panel "Edit properties".
	transferTextPropertiesToDialog(cx, cy, props) Transfers given text properties to the panel "Edit properties".

Class Detail

WhiteboardDesigner(witeboardConfig, whiteboardId, user, pubSubUrl, pubSubTransport)

Whiteboard designer class for element drawing.

Parameters:
witeboardConfig: whiteboard's configuration WhiteboardConfig
whiteboardId: whiteboard's id
user: user (user name) working with this whiteboard
pubSubUrl: URL for bidirectional communication
pubSubTransport: transport protocol "long-polling" | "streaming" | "websocket"

Field Detail

{WhiteboardConfig} config

Whiteboard's configuration WhiteboardConfig.

{boolean} logging

Logging flag, true - logging is visible, false - otherwise.

<private> <inner> {object} modeSwitcher

Action mode.

<private> <inner> {Raphael's paper} paper

Raphael's canvas.

{string} pubSubTransport

Transport protocol "long-polling" | "streaming" | "websocket".

{string} pubSubUrl

URL for bidirectional communication.

{string} user

User which works with this whiteboard.

{uuid} whiteboardId

Whiteboard's id.

Method Detail

bringBackElement(helperBox)

Brings element to back (behind all other elements).

Parameters:
helperBox: helper rectangle around element.

bringFrontElement(helperBox)

Brings element to front (over all other elements).

Parameters:
helperBox: helper rectangle around element.

clearWhiteboard()

Clears the whiteboard.

<inner> clickEl(event)

Parameters:
event

<inner> clickHandler(event)

Parameters:
event

cloneElement(helperBox)

Clones element to back.

Parameters:
helperBox: helper rectangle around element to be cloned.

createElement(props, classType)

Creates element.

Parameters:
props: element properties as JavaScript object (key, value).
classType: element type.

<inner> ddMoveEl(dx, dy)

Parameters:
dx
dy

<inner> ddStartEl()

<inner> ddStopEl()

drawCircle(x, y)

Draws circle with default properties.

Parameters:
x: X-coordinate.
y: Y-coordinate.

<inner> drawCircleSet(x, y, width, height)

Parameters:
x
y
width
height

drawEllipse(x, y)

Draws ellipse with default properties.

Parameters:
x: X-coordinate.
y: Y-coordinate.

drawFreeLineBegin(x, y)

Draws begin point of the free line and registers mouse handlers.

Parameters:
x: X-coordinate.
y: Y-coordinate.

<inner> drawHelperBox(el, classType, rotation, scale, select, id)

Parameters:
el
classType
rotation
scale
select
id

<inner> drawIcons()

drawImage(inputUrl, width, height)

Draws image with default properties.

Parameters:
inputUrl: image URL.
width: image width.
height: image height.

drawRectangle(x, y)

Draws rectangle with default properties.

Parameters:
x: X-coordinate.
y: Y-coordinate.

drawStraightLineBegin(x, y)

Draws begin point of the straight line and registers mouse handlers.

Parameters:
x: X-coordinate.
y: Y-coordinate.

drawText(x)

Draws text with default properties.

Parameters:
x: text message.

<inner> getDasharrayValue(label)

Parameters:
label

{Raphael's element} getSelectedObject()

Gets currently selected whiteboard element.

Returns:: {Raphael's element} currently selected element

<inner> getSelectedProperties(el, propsObj)

Parameters:
el
propsObj

<inner> hoverOutEl(event)

Parameters:
event

<inner> hoverOverEl(event)

Parameters:
event

joinUser(usersCount)

Sends a message if user has been joined the whiteboard.

Parameters:
usersCount: current user count.

<inner> logDebug(msg)

Parameters:
msg

<inner> logIncoming(data)

Parameters:
data

<inner> logOutgoing(data)

Parameters:
data

<inner> logProfile(timestamp)

Parameters:
timestamp

makeAsDefault(properties)

Makes given properties as default (user push the button "Make as default").

Parameters:
properties: property JavaScript object as key, value.

<inner> mousedownHandler(event)

Parameters:
event

<inner> mouseleaveHandler(event)

Parameters:
event

<inner> mousemoveHandler(event)

Parameters:
event

<inner> mouseupHandler()

openIconsDialog(x, y)

Open dialog to paste an icon.

Parameters:
x: X-coordinate where the icon has to be pasted.
y: Y-coordinate where the icon has to be pasted.

openImageDialog(x, y)

Open dialog to paste an image.

Parameters:
x: X-coordinate where the image has to be pasted.
y: Y-coordinate where the image has to be pasted.

openResizeDialog()

Opens dialog to resize the whiteboard.

openTextDialog(x, y)

Open dialog to input a text.

Parameters:
x: X-coordinate where the text has to be input.
y: Y-coordinate where the text has to be input.

<inner> prependMessage(msg)

Parameters:
msg

{object} propagateProperties(classType, props)

Gets properties from the panel "Edit Properties".

Parameters:
classType: element type.
props: empty property JavaScript object as key, value.

Returns:: {object} filled property JavaScript object as key, value.

pubSubCallback(response)

Callback method defined in subscribePubSub(). This method is always called when new data (updates) are available on server side.

Parameters:
response: response object having state, status and sent data.

removeElement(helperBox)

Removes element.

Parameters:
helperBox: helper rectangle around element to be removed.

resizeWhiteboard(width, height)

Resizes this whiteboard.

Parameters:
width: new whiteboard width.
height: new whiteboard height.

restoreWhiteboard(jsWhiteboard)

Restores the whiteboard if user has joined this whiteboard. All elements and a proper message gets restored.

Parameters:
jsWhiteboard: whiteboard in JSON format from backend (server side).

selectElement(helperBox)

Selects an element if user clicks on it.

Parameters:
helperBox: helper rectangle around element to be selected.

sendChanges(jsObject)

Sends any changes on client side to the server (see actions).

Parameters:
jsObject: changes as JavaScript object.

sendPropertiesChanges(type, resize, resize)

Sends changed properties of the currently selected element to the server (use case: user changes properties in the panel "Edit Properties").

Parameters:
type: element type.
resize: boolean flag, true - resize element, false - otherwise.
resize: boolean flag, true - rotate element, false - otherwise.

<inner> setElementProperties(el, propsObj)

Parameters:
el
propsObj

setIdSubviewProperties(id)

Sets Id of the subview - where pinned or unpinned panels are placed.

Parameters:
id: subview Id.

showProperties(showClass)

Enables / disables properties in the panel "Edit Properties" depends on action.

Parameters:
showClass: CSS class of the property block to be enabled.

showSelectedProperties(selObj)

Shows properties of the selected element in the panel "Edit Properties".

Parameters:
selObj: selected element.

subscribePubSub()

Subscribes to bidirectional channel. This method will be called once the web-application is ready to use.

switchToMode(mode, cursor)

Switches the mode if user selects any action (like "Input Text" or "Draw Circle").

Parameters:
mode: mode defined in the variable modeSwitcher.
cursor: cursor type, e.g. "default", "move", "wait".

transferCirclePropertiesToDialog(cx, cy, props)

Transfers circle properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the circle.
cy: Y-coordinate of the circle.
props: property JavaScript object as key, value.

transferEllipsePropertiesToDialog(cx, cy, props)

Transfers ellipse properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the ellipse.
cy: Y-coordinate of the ellipse.
props: property JavaScript object as key, value.

transferFreeLinePropertiesToDialog(props)

Transfers free line properties to the panel "Edit properties".

Parameters:
props: property JavaScript object as key, value.

transferIconPropertiesToDialog(cx, cy, props)

Transfers icon properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the icon.
cy: Y-coordinate of the icon.
props: property JavaScript object as key, value.

transferImagePropertiesToDialog(cx, cy, props)

Transfers image properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the image.
cy: Y-coordinate of the image.
props: property JavaScript object as key, value.

transferPropertiesToDialog(selObj)

Transfer properties of the selected element to the panel "Edit Properties". Called from showSelectedProperties().

Parameters:
selObj: selected element.

transferRectanglePropertiesToDialog(cx, cy, props)

Transfers rectangle properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the rectangle.
cy: Y-coordinate of the rectangle.
props: property JavaScript object as key, value.

transferStraightLinePropertiesToDialog(props)

Transfers straight line properties to the panel "Edit properties".

Parameters:
props: property JavaScript object as key, value.

transferTextPropertiesToDialog(cx, cy, props)

Transfers given text properties to the panel "Edit properties".

Parameters:
cx: X-coordinate of the text.
cy: Y-coordinate of the text.
props: property JavaScript object as key, value.

Classes

Class WhiteboardDesigner