2012-12-10 22:46:20 +08:00
|
|
|
define [
|
|
|
|
'underscore',
|
|
|
|
'backbone',
|
2012-12-11 02:28:30 +08:00
|
|
|
'socket.io',
|
2013-04-30 05:26:09 +08:00
|
|
|
'globals',
|
2012-12-11 02:28:30 +08:00
|
|
|
'cs!utils'
|
2013-04-30 05:26:09 +08:00
|
|
|
], (_, Backbone, IO, globals, Utils) ->
|
2012-12-10 22:46:20 +08:00
|
|
|
|
|
|
|
ConnectionModel = Backbone.Model.extend
|
|
|
|
|
|
|
|
initialize: ->
|
|
|
|
@socket = null
|
|
|
|
@host = window.location.protocol + "//" + window.location.host
|
|
|
|
|
|
|
|
disconnect: ->
|
|
|
|
if @socket?
|
|
|
|
console.log "disconnecting from", @host
|
|
|
|
@socket.disconnect()
|
|
|
|
else
|
|
|
|
console.log "tried to disconnect but it's not connected"
|
|
|
|
|
|
|
|
connect: ->
|
|
|
|
unless @socket?
|
|
|
|
console.log "connecting to the server", @host
|
|
|
|
@socket = io.connect(@host)
|
2012-12-15 08:41:30 +08:00
|
|
|
@_registerEvents()
|
2012-12-10 22:46:20 +08:00
|
|
|
else
|
|
|
|
console.log "tried to connect but it's already connected"
|
|
|
|
|
2013-04-30 05:26:09 +08:00
|
|
|
isConnected: ->
|
|
|
|
# if we have a socket set we assume we are connected
|
|
|
|
@socket?
|
|
|
|
|
|
|
|
# Registers listeners to all events in the websocket. Passes these events to the
|
|
|
|
# event bus so that other objects can receive them too.
|
2012-12-15 08:41:30 +08:00
|
|
|
_registerEvents: ->
|
2012-12-11 02:28:30 +08:00
|
|
|
|
|
|
|
# Immediately say we are connected
|
|
|
|
@socket.on "connect", =>
|
|
|
|
console.log "socket on: connect"
|
2013-05-21 04:41:29 +08:00
|
|
|
globals.events.trigger("connection:connected")
|
|
|
|
@socket.emit "user connect" # tell the server we have a new user
|
2012-12-11 02:28:30 +08:00
|
|
|
|
|
|
|
# Received event to logout yourself
|
|
|
|
@socket.on "logout", ->
|
|
|
|
console.log "socket on: logout"
|
|
|
|
Utils.postToUrl "logout"
|
|
|
|
window.location.replace "./"
|
|
|
|
|
|
|
|
# If the server disconnects from the client or vice-versa
|
|
|
|
@socket.on "disconnect", ->
|
|
|
|
console.log "socket on: disconnect"
|
|
|
|
window.location.replace "./"
|
2013-05-21 04:41:29 +08:00
|
|
|
globals.events.trigger("connection:disconnected")
|
|
|
|
@socket = null
|
2013-05-21 02:47:18 +08:00
|
|
|
|
|
|
|
@socket.on "reconnect", ->
|
|
|
|
console.log "socket on: reconnect"
|
|
|
|
globals.events.trigger("connection:reconnect")
|
|
|
|
|
|
|
|
@socket.on "reconnecting", ->
|
|
|
|
console.log "socket on: reconnecting"
|
|
|
|
globals.events.trigger("connection:reconnecting")
|
|
|
|
|
|
|
|
@socket.on "reconnect_failed", ->
|
|
|
|
console.log "socket on: reconnect_failed"
|
|
|
|
globals.events.trigger("connection:reconnect_failed")
|
2012-12-11 02:28:30 +08:00
|
|
|
|
|
|
|
# If an error occurs while not connected
|
|
|
|
# @param {string} reason Reason for the error.
|
|
|
|
@socket.on "error", (reason) ->
|
|
|
|
console.error "unable to connect socket.io", reason
|
|
|
|
|
2013-04-30 05:26:09 +08:00
|
|
|
# Received event to update all the slide images
|
|
|
|
# @param {Array} urls list of URLs to be added to the paper (after old images are removed)
|
|
|
|
@socket.on "all_slides", (urls) =>
|
|
|
|
console.log "socket on: all_slides"
|
|
|
|
globals.events.trigger("connection:all_slides", urls)
|
|
|
|
|
|
|
|
# Received event to clear the whiteboard shapes
|
|
|
|
@socket.on "clrPaper", =>
|
|
|
|
console.log "socket on: clrPaper"
|
|
|
|
globals.events.trigger("connection:clrPaper")
|
|
|
|
|
|
|
|
# Received event to update all the shapes in the whiteboard
|
|
|
|
# @param {Array} shapes Array of shapes to be drawn
|
|
|
|
@socket.on "all_shapes", (shapes) =>
|
|
|
|
console.log "socket on: all_shapes"
|
|
|
|
globals.events.trigger("connection:all_shapes", shapes)
|
|
|
|
|
|
|
|
# Received event to update a shape being created
|
|
|
|
# @param {string} shape type of shape being updated
|
|
|
|
# @param {Array} data all information to update the shape
|
|
|
|
@socket.on "updShape", (shape, data) =>
|
|
|
|
console.log "socket on: updShape"
|
|
|
|
globals.events.trigger("connection:updShape", shape, data)
|
|
|
|
|
|
|
|
# Received event to create a shape on the whiteboard
|
|
|
|
# @param {string} shape type of shape being made
|
|
|
|
# @param {Array} data all information to make the shape
|
|
|
|
@socket.on "makeShape", (shape, data) =>
|
|
|
|
console.log "socket on: makeShape"
|
|
|
|
globals.events.trigger("connection:makeShape", shape, data)
|
|
|
|
|
|
|
|
# Pencil drawings are received as points from the server and painted as lines.
|
|
|
|
@socket.on "shapePoints", (type, color, thickness, points) =>
|
|
|
|
console.log "socket on: shapePoints"
|
|
|
|
globals.events.trigger("connection:shapePoints", type, color, thickness, points)
|
|
|
|
|
|
|
|
# Received event to update the cursor coordinates
|
|
|
|
# @param {number} x x-coord of the cursor as a percentage of page width
|
|
|
|
# @param {number} y y-coord of the cursor as a percentage of page height
|
|
|
|
@socket.on "mvCur", (x, y) =>
|
|
|
|
console.log "socket on: mvCur"
|
|
|
|
globals.events.trigger("connection:mvCur", x, y)
|
|
|
|
|
|
|
|
# Received event to update the slide image
|
|
|
|
# @param {string} url URL of image to show
|
|
|
|
@socket.on "changeslide", (url) =>
|
|
|
|
console.log "socket on: changeslide"
|
|
|
|
globals.events.trigger("connection:changeslide", url)
|
|
|
|
|
|
|
|
# Received event to update the viewBox value
|
|
|
|
# @param {string} xperc Percentage of x-offset from top left corner
|
|
|
|
# @param {string} yperc Percentage of y-offset from top left corner
|
|
|
|
# @param {string} wperc Percentage of full width of image to be displayed
|
|
|
|
# @param {string} hperc Percentage of full height of image to be displayed
|
|
|
|
# TODO: not tested yet
|
|
|
|
@socket.on "viewBox", (xperc, yperc, wperc, hperc) =>
|
|
|
|
console.log "socket on: viewBox"
|
|
|
|
globals.events.trigger("connection:viewBox", xperc, yperc, wperc, hperc)
|
|
|
|
|
|
|
|
# Received event to update the whiteboard between fit to width and fit to page
|
|
|
|
# @param {boolean} value choice of fit: true for fit to page, false for fit to width
|
|
|
|
@socket.on "fitToPage", (value) ->
|
|
|
|
console.log "socket on: fitToPage"
|
|
|
|
globals.events.trigger("connection:fitToPage", value)
|
|
|
|
|
|
|
|
# Received event to update the zoom level of the whiteboard.
|
|
|
|
# @param {number} delta amount of change in scroll wheel
|
|
|
|
@socket.on "zoom", (delta) ->
|
|
|
|
console.log "socket on: zoom"
|
|
|
|
globals.events.trigger("connection:zoom", delta)
|
|
|
|
|
|
|
|
# Received event to update the whiteboard size and position
|
|
|
|
# @param {number} cx x-offset from top left corner as percentage of original width of paper
|
|
|
|
# @param {number} cy y-offset from top left corner as percentage of original height of paper
|
|
|
|
# @param {number} sw slide width as percentage of original width of paper
|
|
|
|
# @param {number} sh slide height as a percentage of original height of paper
|
|
|
|
@socket.on "paper", (cx, cy, sw, sh) ->
|
|
|
|
console.log "socket on: paper"
|
|
|
|
globals.events.trigger("connection:paper", cx, cy, sw, sh)
|
|
|
|
|
|
|
|
# Received event when the panning action finishes
|
|
|
|
@socket.on "panStop", ->
|
|
|
|
console.log "socket on: panStop"
|
|
|
|
globals.events.trigger("connection:panStop")
|
|
|
|
|
|
|
|
# Received event to change the current tool
|
|
|
|
# @param {string} tool The tool to be turned on
|
|
|
|
@socket.on "toolChanged", (tool) ->
|
|
|
|
console.log "socket on: toolChanged"
|
|
|
|
globals.events.trigger("connection:toolChanged", tool)
|
|
|
|
|
|
|
|
# Received event to denote when the text has been created
|
|
|
|
@socket.on "textDone", ->
|
|
|
|
console.log "socket on: textDone"
|
|
|
|
globals.events.trigger("connection:textDone")
|
|
|
|
|
|
|
|
# Received event to update the status of the upload progress
|
|
|
|
# @param {string} message update message of status of upload progress
|
|
|
|
# @param {boolean} fade true if you wish the message to automatically disappear after 3 seconds
|
|
|
|
@socket.on "uploadStatus", (message, fade) =>
|
|
|
|
console.log "socket on: uploadStatus"
|
|
|
|
globals.events.trigger("connection:uploadStatus", message, fade)
|
|
|
|
|
|
|
|
# Received event for a new public chat message
|
|
|
|
# @param {Array} users Array of names and publicIDs of connected users
|
|
|
|
# TODO: event name with spaces is bad
|
|
|
|
@socket.on "user list change", (users) =>
|
|
|
|
console.log "socket on: user list change"
|
|
|
|
globals.events.trigger("connection:user_list_change", users)
|
|
|
|
|
|
|
|
# TODO: event name with spaces is bad
|
|
|
|
@socket.on "load users", (users) =>
|
|
|
|
console.log "socket on: load users"
|
|
|
|
globals.events.trigger("connection:load_users", users)
|
|
|
|
|
|
|
|
# Received event for a new user
|
|
|
|
@socket.on "user join", (userid, username) =>
|
|
|
|
console.log "socket on: user join"
|
|
|
|
globals.events.trigger("connection:user_join", userid, username)
|
|
|
|
|
|
|
|
# Received event when a user leave
|
|
|
|
@socket.on "user leave", (userid) =>
|
|
|
|
console.log "socket on: user leave"
|
|
|
|
globals.events.trigger("connection:user_leave", userid)
|
|
|
|
|
|
|
|
# Received event to set the presenter to a user
|
|
|
|
# @param {string} userID publicID of the user that is being set as the current presenter
|
|
|
|
@socket.on "setPresenter", (userid) =>
|
|
|
|
console.log "socket on: setPresenter"
|
|
|
|
globals.events.trigger("connection:setPresenter", userid)
|
|
|
|
|
2013-05-21 02:47:18 +08:00
|
|
|
# Received event for a new public chat message
|
|
|
|
# @param {string} name name of user
|
|
|
|
# @param {string} msg message to be displayed
|
|
|
|
@socket.on "msg", (name, msg) =>
|
|
|
|
console.log "socket on: msg"
|
|
|
|
globals.events.trigger("connection:msg", name, msg)
|
|
|
|
|
|
|
|
# Received event to update all the messages in the chat box
|
|
|
|
# @param {Array} messages Array of messages in public chat box
|
|
|
|
@socket.on "all_messages", (messages) =>
|
|
|
|
console.log "socket on: all_messages"
|
|
|
|
globals.events.trigger("connection:all_messages", messages)
|
|
|
|
|
2012-12-10 22:46:20 +08:00
|
|
|
# Emit an update to move the cursor around the canvas
|
|
|
|
# @param {number} x x-coord of the cursor as a percentage of page width
|
|
|
|
# @param {number} y y-coord of the cursor as a percentage of page height
|
|
|
|
emitMoveCursor: (x, y) ->
|
|
|
|
@socket.emit "mvCur", x, y
|
|
|
|
|
|
|
|
# Requests the shapes from the server.
|
|
|
|
emitAllShapes: ->
|
|
|
|
@socket.emit "all_shapes"
|
|
|
|
|
|
|
|
# Emit an update in a fit of the whiteboard
|
|
|
|
# @param {boolean} true for fitToPage, false for fitToWidth
|
2012-12-14 01:26:02 +08:00
|
|
|
emitFitToPage: (value) ->
|
|
|
|
@socket.emit "fitToPage", value
|
2012-12-10 22:46:20 +08:00
|
|
|
|
|
|
|
# Emit a message to the server
|
|
|
|
# @param {string} the message
|
|
|
|
emitMsg: (msg) ->
|
|
|
|
@socket.emit "msg", msg
|
|
|
|
|
|
|
|
# Emit the finish of a text shape
|
|
|
|
emitTextDone: ->
|
|
|
|
@socket.emit "textDone"
|
|
|
|
|
|
|
|
# Emit the creation of a shape
|
|
|
|
# @param {string} shape type of shape
|
|
|
|
# @param {Array} data all the data required to draw the shape on the client whiteboard
|
|
|
|
emitMakeShape: (shape, data) ->
|
|
|
|
@socket.emit "makeShape", shape, data
|
|
|
|
|
|
|
|
# Emit the update of a shape
|
|
|
|
# @param {string} shape type of shape
|
|
|
|
# @param {Array} data all the data required to update the shape on the client whiteboard
|
|
|
|
emitUpdateShape: (shape, data) ->
|
|
|
|
@socket.emit "updShape", shape, data
|
|
|
|
|
|
|
|
# Emit an update in the whiteboard position/size values
|
|
|
|
# @param {number} cx x-offset from top left corner as percentage of original width of paper
|
|
|
|
# @param {number} cy y-offset from top left corner as percentage of original height of paper
|
|
|
|
# @param {number} sw slide width as percentage of original width of paper
|
|
|
|
# @param {number} sh slide height as a percentage of original height of paper
|
|
|
|
emitPaperUpdate: (cx, cy, sw, sh) ->
|
|
|
|
@socket.emit "paper", cx, cy, sw, sh
|
|
|
|
|
|
|
|
# Update the zoom level for the clients
|
|
|
|
# @param {number} delta amount of change in scroll wheel
|
|
|
|
emitZoom: (delta) ->
|
|
|
|
@socket.emit "zoom", delta
|
|
|
|
|
|
|
|
# Request the next slide
|
|
|
|
emitNextSlide: ->
|
|
|
|
@socket.emit "nextslide"
|
|
|
|
|
|
|
|
# Request the previous slide
|
2012-12-14 01:26:02 +08:00
|
|
|
emitPreviousSlide: ->
|
2012-12-10 22:46:20 +08:00
|
|
|
@socket.emit "prevslide"
|
|
|
|
|
|
|
|
# Logout of the meeting
|
|
|
|
emitLogout: ->
|
|
|
|
@socket.emit "logout"
|
|
|
|
|
|
|
|
# Emit panning has stopped
|
|
|
|
emitPanStop: ->
|
|
|
|
@socket.emit "panStop"
|
|
|
|
|
|
|
|
# Publish a shape to the server to be saved
|
|
|
|
# @param {string} shape type of shape to be saved
|
|
|
|
# @param {Array} data information about shape so that it can be recreated later
|
|
|
|
emitPublishShape: (shape, data) ->
|
|
|
|
@socket.emit "saveShape", shape, JSON.stringify(data)
|
|
|
|
|
|
|
|
# Emit a change in the current tool
|
|
|
|
# @param {string} tool [description]
|
|
|
|
emitChangeTool: (tool) ->
|
|
|
|
@socket.emit "changeTool", tool
|
|
|
|
|
|
|
|
# Tell the server to undo the last shape
|
|
|
|
emitUndo: ->
|
|
|
|
@socket.emit "undo"
|
|
|
|
|
|
|
|
# Emit a change in the presenter
|
|
|
|
emitSetPresenter: (id) ->
|
|
|
|
@socket.emit "setPresenter", id
|
|
|
|
|
2012-12-14 01:26:02 +08:00
|
|
|
# Emit signal to clear the canvas
|
|
|
|
emitClearCanvas: (id) ->
|
|
|
|
@socket.emit "clrPaper", id
|
|
|
|
|
2012-12-10 22:46:20 +08:00
|
|
|
ConnectionModel
|