Merge remote-tracking branch 'anton/creating-better-templates' into creating-better-templates

Conflicts:
	labs/meteor-client/client/main.coffee

labs/meteor-client/client/globals.coffee

@@ -188,7 +188,7 @@ Handlebars.registerHelper "getShapesForSlide", ->
   presentationId = currentPresentation?.presentation?.id
   currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
   # try to reuse the lines above
-  Meteor.Shapes.find({whiteboardId: currentSlide?.slide?.id}).fetch()
+  Meteor.Shapes.find({whiteboardId: currentSlide?.slide?.id})
 
 Handlebars.registerHelper "pointerLocation", ->
   currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})

labs/meteor-client/client/main.coffee

@@ -75,4 +75,3 @@ Meteor.startup ->
 		{isActive:false, name:"Options", class: "optionsChatTab"}
 	]
 
-	@whiteboardPaperModel = new WhiteboardPaperModel('whiteboard-paper')

labs/meteor-client/client/views/whiteboard/slide.coffee

@@ -23,6 +23,23 @@ Template.slide.helpers
     wpm = Template.slide.whiteboardPaperModel
     wpm?.moveCursor(pointer.x, pointer.y)
 
+  manuallyDisplayShapes: ->
+    currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})
+    presentationId = currentPresentation?.presentation?.id
+    currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
+    wpm = Template.slide.whiteboardPaperModel
+
+    shapes = Meteor.Shapes.find({whiteboardId: currentSlide?.slide?.id}).fetch()
+    for s in shapes
+      shapeInfo = s.shape?.shape
+      shapeType = shapeInfo?.type
+
+      for num in [0..3] # the coordinates must be in the range 0 to 1
+        shapeInfo.points[num] = shapeInfo.points[num] / 100
+      wpm.makeShape(shapeType, shapeInfo)
+      wpm.updateShape(shapeType, shapeInfo)
+
+
 #### SHAPE ####
 Template.shape.rendered = ->
   # @data is the shape object coming from the {{#each}} in the html file
@@ -36,3 +53,9 @@ Template.shape.rendered = ->
   wpm.makeShape(shapeType, shapeInfo)
   wpm.updateShape(shapeType, shapeInfo)
 
+Template.shape.destroyed = ->
+  wpm = Template.slide.whiteboardPaperModel
+  wpm.clearShapes()
+  Template.slide.displaySlide(wpm)
+  Template.slide.manuallyDisplayShapes()
+

labs/meteor-client/client/views/whiteboard/whiteboard.html

@@ -2,12 +2,13 @@
     <div id="{{id}}" {{visibility name}} class="component">
         <h3 class="title gradientBar"><span class="glyphicon glyphicon-pencil"></span> {{title}}</h3>
         <div id="whiteboard-contents">
-            <div id="whiteboard-paper"  style="">
+        	{{#if getInSession "display_whiteboard"}}
-                <!-- <p>{{png}}</p> -->
         		{{#each getCurrentSlide}}
 				{{> slide}}
 			{{/each}}
+            <div id="whiteboard-paper"  style="">
             </div>
+            {{/if}}
         </div>
     </div>
 </template>

labs/meteor-client/client/whiteboard_models/whiteboard_ellipse.coffee

@@ -8,26 +8,24 @@ class @WhiteboardEllipseModel extends WhiteboardToolModel
       # format: top left x, top left y, bottom right x, bottom right y, stroke color, thickness
       @definition = [0, 0, 0, 0, "#000", "0px"]
 
-        # @ellipseX = null
-        # @ellipseY = null
-
     # Make an ellipse on the whiteboard
     # @param    {[type]} x                 the x value of the top left corner
     # @param    {[type]} y                 the y value of the top left corner
     # @param    {string} colour        the colour of the object
     # @param    {number} thickness the thickness of the object's line(s)
     make: (info) ->
-        if info?.payload?.data?.coordinate?
+      console.log "Whiteboard - Making ellipse: "
-            x = info.payload.data.coordinate.first_x
+      console.log info
-            y = info.payload.data.coordinate.first_y
+      if info?.points?
-            color = info.payload.data.line.color
+        x = info.points[0]
-            thickness = info.payload.data.line.weight
+        y = info.points[1]
+        color = info.color
+        thickness = info.thickness
 
         @obj = @paper.ellipse(x * @gw + @xOffset, y * @gh + @yOffset, 0, 0)
-            @obj.attr Utils.strokeAndThickness(color, thickness)
+        @obj.attr Meteor.call("strokeAndThickness", color, thickness)
-            @definition =
+        @definition = [x, y, y, x, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
-                shape: "ellipse"
+
-                data: [x, y, y, x, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
       @obj
 
     # Update ellipse drawn
@@ -37,19 +35,18 @@ class @WhiteboardEllipseModel extends WhiteboardToolModel
     # @param    {number} y2 the y value of the bottom right corner in percent of current slide size
     # @param    {boolean} square (draw a circle or not
     update: (info) ->
-        x1 = info.payload.data.coordinate.first_x
+      console.log info
-        y1 = info.payload.data.coordinate.first_y
+      if info?.points?
-        x2 = info.payload.data.coordinate.last_x
+        x1 = info.points[0]
-        y2 = info.payload.data.coordinate.last_y
+        y1 = info.points[1]
-        circle = info.payload.data.square
+        x2 = info.points[2]
+        y2 = info.points[3]
+
+        circle = !info.square
 
         if @obj?
-
           [x1, x2] = [x2, x1] if x2 < x1
 
-            
-
-            
           if y2 < y1
             [y1, y2] = [y2, y1]
             reversed = true
@@ -62,8 +59,6 @@ class @WhiteboardEllipseModel extends WhiteboardToolModel
 
             #if the control key is pressed then the width and height of the ellipse are equal (a circle)
             #we calculate this by making the y2 coord equal to the y1 coord plus the width of x2-x1 and corrected for the slide size
-            
-
             coords =
               x1: x1
               x2: x2
@@ -75,21 +70,20 @@ class @WhiteboardEllipseModel extends WhiteboardToolModel
             rx = (x2 - x1) / 2
             ry = (y2 - y1) / 2
 
-       
             r =
               rx: rx * @gw
               ry: ry * @gh
               cx: (rx + x1) * @gw + @xOffset
               cy: (ry + y1) * @gh + @yOffset
-            console.log "------------>", r
+
             @obj.attr(r)
 
             console.log( "@gw: " + @gw + "\n@gh: " + @gh + "\n@xOffset: " + @xOffset + "\n@yOffset: " + @yOffset );
             # we need to update all these values, specially for when shapes are drawn backwards
-            @definition.data[0] = x1
+            @definition[0] = x1
-            @definition.data[1] = y1
+            @definition[1] = y1
-            @definition.data[2] = x2
+            @definition[2] = x2
-            @definition.data[3] = y2
+            @definition[3] = y2
 
     # Draw an ellipse on the whiteboard
     # @param    {number} x1 the x value of the top left corner

labs/meteor-client/client/whiteboard_models/whiteboard_line.coffee

@@ -23,24 +23,23 @@ class @WhiteboardLineModel extends WhiteboardToolModel
   # @param  {string} colour    the colour of the shape to be drawn
   # @param  {number} thickness the thickness of the line to be drawn
   make: (info) ->
-    console.log "in line MAKE(info): " + info
+    console.log "in line MAKE(info): "
-    if info?.payload?.data?.coordinate?
+    console.log info
-      x = info.payload.data.coordinate.first_x
+    if info?.points?
-      y = info.payload.data.coordinate.first_y
+      x = info.points[0]
-      color = info.payload.data.line.color
+      y = info.points[1]
-      thickness = info.payload.data.line.weight
+      color = info.color
+      thickness = info.thickness
 
       x1 = x * @gw + @xOffset
       y1 = y * @gh + @yOffset
       path = "M" + x1 + " " + y1 + " L" + x1 + " " + y1
       pathPercent = "M" + x + " " + y + " L" + x + " " + y
       @obj = @paper.path(path)
-      @obj.attr Utils.strokeAndThickness(color, thickness)
+      @obj.attr Meteor.call("strokeAndThickness", color, thickness)
       @obj.attr({"stroke-linejoin": "round"})
 
-      @definition =
+      @definition = [pathPercent, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
-        shape: "path"
-        data: [pathPercent, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
 
     @obj
 
@@ -55,12 +54,13 @@ class @WhiteboardLineModel extends WhiteboardToolModel
   # @param  {number}         y2  1) the y of the second point
   #                              2) undefined
   update: (info) ->
-    console.log "in line-UPDATE(info): " + info
+    console.log "in line-UPDATE(info): "
-    if info?.payload?.data?.coordinate?
+    console.log info
-      x1 = info.payload.data.coordinate.first_x
+    if info?.points?
-      y1 = info.payload.data.coordinate.first_y
+      x1 = info.points[0]
-      x2 = info.payload.data.coordinate.last_x
+      y1 = info.points[1]
-      y2 = info.payload.data.coordinate.last_y
+      x2 = info.points[2]
+      y2 = info.points[3]
 
       if @obj?
 
@@ -89,7 +89,7 @@ class @WhiteboardLineModel extends WhiteboardToolModel
         # adding lines from the line tool
         else
           path = @_buildPath(x1, y1, x2, y2)
-          @definition.data[0] = path
+          @definition[0] = path
 
           path = @_scaleLinePath(path, @gw, @gh, @xOffset, @yOffset)
           @obj.attr path: path

labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee

@@ -4,7 +4,6 @@ class @WhiteboardPaperModel
 
   # Container must be a DOM element
   constructor: (@container) ->
-    # console.log "paper in WhiteboardPaperModel =" + @container
     # a WhiteboardCursorModel
     @cursor = null
 
@@ -56,8 +55,7 @@ class @WhiteboardPaperModel
   # are not yet created in the page.
   create: ->
     # paper is embedded within the div#slide of the page.
-    console.log ("@container=" + @container)
+    @raphaelObj ?= ScaleRaphael(@container, "900", "500")
-    @raphaelObj ?= ScaleRaphael(@container, "500", "500")
     @raphaelObj.canvas.setAttribute "preserveAspectRatio", "xMinYMin slice"
 
     @cursor = new WhiteboardCursorModel(@raphaelObj)
@@ -318,12 +316,14 @@ class @WhiteboardPaperModel
     @currentShapesDefinitions = shapes
     @currentShapes = @raphaelObj.set()
     for shape in shapes
-      data = if _.isString(shape.data) then JSON.parse(shape.data) else shape.data
+      shapeType = shape?.shape?.shape_type
-      tool = @_createTool(shape.shape)
+      dataBlock = shape?.shape?.shape
+      data = if _.isString(dataBlock) then JSON.parse(dataBlock) else dataBlock
+      tool = @_createTool(shapeType)
       if tool?
         @currentShapes.push tool.draw.apply(tool, data)
       else
-        ;#console.log "shape not recognized at drawListOfShapes", shape
+        console.log "shape not recognized at drawListOfShapes", shape
 
     # make sure the cursor is still on top
     @cursor.toFront()
@@ -345,7 +345,6 @@ class @WhiteboardPaperModel
   # Updated a shape `shape` with the data in `data`.
   # TODO: check if the objects exist before calling update, if they don't they should be created
   updateShape: (shape, data) ->
-    # alert "updating a " + shape
     switch shape
       when "line"
         @currentLine.update(data)
@@ -358,11 +357,10 @@ class @WhiteboardPaperModel
       when "text"
         @currentText.update.apply(@currentText, data)
       else
-        ;#console.log "shape not recognized at updateShape", shape
+        console.log "shape not recognized at updateShape", shape
 
   # Make a shape `shape` with the data in `data`.
   makeShape: (shape, data) ->
-    # alert "making a " + shape
     tool = null
     switch shape
       when "path", "line"
@@ -386,10 +384,9 @@ class @WhiteboardPaperModel
         toolModel = @currentText
         tool = @currentText.make.apply(@currentText, data)
       else
-        ;#console.log "shape not recognized at makeShape", shape
+        console.log "shape not recognized at makeShape", shape
     if tool?
       @currentShapes ?= @raphaelObj.set()
-      console.log "currentShapes:" + @currentShapes
       @currentShapes.push(tool)
       @currentShapesDefinitions.push(toolModel.getDefinition())
 
@@ -822,10 +819,6 @@ class @WhiteboardPaperModel
   _displayPage: (data) ->
     @removeAllImagesFromPaper()
 
-    #page = data?.payload?.currentPage
-    #pngSlide = "http://www.tux.org/pub/sites/ftp.gnome.org/GNOME/teams/art.gnome.org/backgrounds/ABSTRACT-BlueRidge_1280x1024.png"
-    #@addImageToPaper(page.png_uri, 400, 400) # TODO the dimensions should be modified
-
     # get dimensions for available whiteboard space
     # get where to start from the left -> either the end of the user's list or the left edge of the screen
     if getInSession "display_usersList" then xBegin = $("#userListContainer").width()
@@ -848,8 +841,9 @@ class @WhiteboardPaperModel
     presentationId = currentPresentation?.presentation?.id
     currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
 
-    imageWidth = boardWidth * (currentSlide.slide.width_ratio/100)
+    # TODO currentSlide undefined in some cases - will check later why
-    imageHeight = boardHeight * (currentSlide.slide.height_ratio/100)
+    imageWidth = boardWidth * (currentSlide?.slide.width_ratio/100) or 500
+    imageHeight = boardHeight * (currentSlide?.slide.height_ratio/100) or 500
 
     # console.log "xBegin: #{xBegin}"
     # console.log "xEnd: #{xEnd}"

labs/meteor-client/client/whiteboard_models/whiteboard_rect.coffee

@@ -2,7 +2,6 @@
 class @WhiteboardRectModel extends WhiteboardToolModel
   constructor: (@paper) ->
     super @paper
-    console.log "@paper in WhiteboardRectModel=" + @paper
 
     # the defintion of this shape, kept so we can redraw the shape whenever needed
     # format: x1, y1, x2, y2, stroke color, thickness
@@ -15,10 +14,6 @@ class @WhiteboardRectModel extends WhiteboardToolModel
   # @param  {string} colour    the colour of the object
   # @param  {number} thickness the thickness of the object's line(s)
   make: (startingData) =>
-    console.log "MAKING RECT"
-    console.log "@paper in make in WhiteboardRectModel=" + @paper
-    console.log "make startingData"+ JSON.stringify startingData
-
     x = startingData.points[0]
     y = startingData.points[1]
     color = startingData.color
@@ -38,12 +33,12 @@ class @WhiteboardRectModel extends WhiteboardToolModel
   # @param  {number} y2 the y value of the bottom right corner
   # @param  {boolean} square (draw a square or not)
   update: (startingData) ->
-    console.log "UPDATING RECT"
+
     x1 = startingData.points[0]
     y1 = startingData.points[1]
     x2 = startingData.points[2]
     y2 = startingData.points[3]
-    console.log "updating rect points:" + x1, x2, y1, y2
+
     square = startingData.square
     if @obj?
       [x1, x2] = [x2, x1] if x2 < x1

labs/meteor-client/client/whiteboard_models/whiteboard_triangle.coffee

@@ -2,6 +2,7 @@
 class @WhiteboardTriangleModel extends WhiteboardToolModel
 
   constructor: (@paper) ->
+    console.log "Whiteboard - Creating rectangle"
     super @paper
 
     # the defintion of this shape, kept so we can redraw the shape whenever needed
@@ -14,20 +15,18 @@ class @WhiteboardTriangleModel extends WhiteboardToolModel
   # @param  {string} colour    the colour of the object
   # @param  {number} thickness the thickness of the object's line(s)
   make: (info) ->
-    if info?.payload?.data?.coordinate?
+    if info?.points?
-      x = info.payload.data.coordinate.first_x
+      x = info.points[0]
-      y = info.payload.data.coordinate.first_y
+      y = info.points[1]
-      color = info.payload.data.line.color
+      color = info.color
-      thickness = info.payload.data.line.weight
+      thickness = info.thickness
 
       path = @_buildPath(x, y, x, y, x, y)
       @obj = @paper.path(path)
-      @obj.attr Utils.strokeAndThickness(color, thickness)
+      @obj.attr Meteor.call("strokeAndThickness", color, thickness)
       @obj.attr({"stroke-linejoin": "round"})
 
-      @definition =
+      @definition = [x, y, x, y, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
-        shape: "triangle"
-        data: [x, y, x, y, @obj.attrs["stroke"], @obj.attrs["stroke-width"]]
 
     @obj
 
@@ -37,11 +36,12 @@ class @WhiteboardTriangleModel extends WhiteboardToolModel
   # @param  {number} x2 the x value of the bottom right corner
   # @param  {number} y2 the y value of the bottom right corner
   update: (info) ->
-    if info?.payload?.data?.coordinate?
+    console.log "Whiteboard - updating triangle points"
-      x1 = info.payload.data.coordinate.first_x
+    if info?.points?
-      y1 = info.payload.data.coordinate.first_y
+      x1 = info.points[0]
-      x2 = info.payload.data.coordinate.last_x
+      y1 = info.points[1]
-      y2 = info.payload.data.coordinate.last_y
+      x2 = info.points[2]
+      y2 = info.points[3]
 
       if @obj?
         [xTop, yTop, xBottomLeft, yBottomLeft, xBottomRight, yBottomRight] = @_getCornersFromPoints(x1, y1, x2, y2)
@@ -51,10 +51,10 @@ class @WhiteboardTriangleModel extends WhiteboardToolModel
                            xBottomRight * @gw + @xOffset, yBottomRight * @gh + @yOffset)
         @obj.attr path: path
 
-        @definition.data[0] = x1
+        @definition[0] = x1
-        @definition.data[1] = y1
+        @definition[1] = y1
-        @definition.data[2] = x2
+        @definition[2] = x2
-        @definition.data[3] = y2
+        @definition[3] = y2
 
   # Draw a triangle on the whiteboard
   # @param  {number} x1 the x value of the top left corner

labs/meteor-client/collections/shapes.coffee

@@ -1,6 +1,6 @@
 Meteor.methods
   addShapeToCollection: (meetingId, whiteboardId, shapeObject) ->
-    unless Meteor.Shapes.findOne({whiteboardId:whiteboardId, meetingId: meetingId, "shape.wb_id": "shapeObject.wb_id"})?
+    if shapeObject?.status is "DRAW_END" #the mouse button was released - the drawing is complete
       entry =
         meetingId: meetingId
         whiteboardId: whiteboardId
@@ -21,5 +21,30 @@ Meteor.methods
             color: shapeObject.shape.color
 
       id = Meteor.Shapes.insert(entry)
-      console.log "added shape id =[#{id}]:#{shapeObject.id} in #{meetingId}"
+      numShapesOnSlide = Meteor.Shapes.find({meetingId: meetingId, whiteboardId: whiteboardId}).fetch().length
+      console.log "added shape id =[#{id}]:#{shapeObject.id} in #{meetingId} || now there are #{numShapesOnSlide} shapes on the slide"
+
+  removeAllShapesFromSlide: (meetingId, whiteboardId) ->
+    console.log "removeAllShapesFromSlide__" + whiteboardId
+    if meetingId? and whiteboardId? and Meteor.Shapes.find({meetingId: meetingId, whiteboardId: whiteboardId})?
+      shapesOnSlide = Meteor.Shapes.find({meetingId: meetingId, whiteboardId: whiteboardId}).fetch()
+      console.log "number of shapes:" + shapesOnSlide.length
+      for s in shapesOnSlide
+        console.log "shape=" + s.shape.id
+        id = Meteor.Shapes.findOne({meetingId: meetingId, whiteboardId: whiteboardId, "shape.id": s.shape.id})
+        if id?
+          Meteor.Shapes.remove(id._id)
+          console.log "----removed shape[" + s.shape.id + "] from " + whiteboardId
+          console.log "remaining shapes on the slide:" + Meteor.Shapes.find({meetingId: meetingId, whiteboardId: whiteboardId}).fetch().length
+
+  removeShapeFromSlide: (meetingId, whiteboardId, shapeId) ->
+    console.log "remove a shape from slide:" + shapeId
+    shapeToRemove = Meteor.Shapes.findOne({meetingId: meetingId, whiteboardId: whiteboardId, "shape.id": shapeId})
+    if meetingId? and whiteboardId? and shapeId? and shapeToRemove?
+      console.log "found the shape to be removed"
+      Meteor.Shapes.remove(shapeToRemove._id)
+      console.log "----removed shape[" + shapeId + "] from " + whiteboardId
+      console.log "remaining shapes on the slide:" + Meteor.Shapes.find({meetingId: meetingId, whiteboardId: whiteboardId}).count()
+
+
 

labs/meteor-client/server/redispubsub.coffee

@@ -121,6 +121,7 @@ class Meteor.RedisPubSub
       "keep_alive_reply"
       "page_resized_message"
       "presentation_page_resized_message"
+      "presentation_cursor_updated_message" # just because it's common. we handle it anyway
     ]
 
     unless message.header?.name in ignoredEventTypes
@@ -239,7 +240,20 @@ class Meteor.RedisPubSub
       y = message.payload?.y_percent
 
       Meteor.Presentations.update({"presentation.current": true, meetingId: meetingId},{$set: {"pointer.x": x, "pointer.y": y}})
-      console.log "presentation_cursor_updated_message #{x}_#{y}"
+
+    if message.header?.name is "whiteboard_cleared_message"
+      whiteboardId = message.payload?.whiteboard_id
+      # shapesOnSlide = Meteor.Shapes.find({whiteboardId:whiteboardId, meetingId: meetingId}).fetch()
+      # console.log "shapesOnSlide:" + shapesOnSlide.size()
+      
+      Meteor.call("removeAllShapesFromSlide", meetingId, whiteboardId)
+
+    if message.header?.name is "undo_whiteboard_request"
+      whiteboardId = message.payload?.whiteboard_id
+      shapeId = message.payload?.shape_id
+
+      Meteor.call("removeShapeFromSlide", meetingId, whiteboardId, shapeId)
+
 
     if message.header?.name in ["meeting_ended_message", "meeting_destroyed_event",
       "end_and_kick_all_message", "disconnect_all_users_message"]