From 079c44a3677b2c7e871452173a51e22dfaf5b6cb Mon Sep 17 00:00:00 2001 From: Lucas Zawacki Date: Wed, 17 Sep 2014 17:04:30 -0300 Subject: [PATCH] Add whiteboard pencil based on line tool --- .../client/views/whiteboard/slide.coffee | 6 +- .../whiteboard_models/whiteboard_line.coffee | 72 ++++++++----------- .../whiteboard_models/whiteboard_paper.coffee | 14 ++-- labs/meteor-client/collections/shapes.coffee | 4 +- 4 files changed, 45 insertions(+), 51 deletions(-) diff --git a/labs/meteor-client/client/views/whiteboard/slide.coffee b/labs/meteor-client/client/views/whiteboard/slide.coffee index 85c4bf1663..9b2e4e69b9 100755 --- a/labs/meteor-client/client/views/whiteboard/slide.coffee +++ b/labs/meteor-client/client/views/whiteboard/slide.coffee @@ -39,7 +39,8 @@ Template.slide.helpers shapeType = shapeInfo?.type if shapeType isnt "text" - for num in [0..3] # the coordinates must be in the range 0 to 1 + len = shapeInfo.points.length + for num in [0..len] # 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) @@ -52,7 +53,8 @@ Template.shape.rendered = -> shapeType = shapeInfo?.type if shapeType isnt "text" - for num in [0..3] # the coordinates must be in the range 0 to 1 + len = shapeInfo.points.length + for num in [0..len] # the coordinates must be in the range 0 to 1 shapeInfo.points[num] = shapeInfo.points[num] / 100 wpm = Template.slide.whiteboardPaperModel diff --git a/labs/meteor-client/client/whiteboard_models/whiteboard_line.coffee b/labs/meteor-client/client/whiteboard_models/whiteboard_line.coffee index 6e66159a4a..22f3be7d12 100755 --- a/labs/meteor-client/client/whiteboard_models/whiteboard_line.coffee +++ b/labs/meteor-client/client/whiteboard_models/whiteboard_line.coffee @@ -14,9 +14,6 @@ class @WhiteboardLineModel extends WhiteboardToolModel # format: svg path, stroke color, thickness @definition = ["", "#000", "0px"] - # @lineX = null - # @lineY = null - # Creates a line in the paper # @param {number} x the x value of the line start point as a percentage of the original width # @param {number} y the y value of the line start point as a percentage of the original height @@ -62,36 +59,12 @@ class @WhiteboardLineModel extends WhiteboardToolModel y2 = info.points[3] if @obj? + path = @_buildPath(info.points) - # if adding points from the pencil - if _.isBoolean(info.adding) - add = info.adding + @definition[0] = path - pathPercent = "L" + x1 + " " + y1 - @definition.data[0] += pathPercent - - x1 = x1 * @gw + @xOffset - y1 = y1 * @gh + @yOffset - - # if adding to the line - if add - path = @obj.attrs.path + "L" + x1 + " " + y1 - @obj.attr path: path - - # if simply updating the last portion (for drawing a straight line) - else - @obj.attrs.path.pop() - path = @obj.attrs.path.join(" ") - path = path + "L" + x1 + " " + y1 - @obj.attr path: path - - # adding lines from the line tool - else - path = @_buildPath(x1, y1, x2, y2) - @definition[0] = path - - path = @_scaleLinePath(path, @gw, @gh, @xOffset, @yOffset) - @obj.attr path: path + path = @_scaleLinePath(path, @gw, @gh, @xOffset, @yOffset) + @obj.attr path: path # Draw a line on the paper # @param {number,string} x1 1) the x value of the first point @@ -109,19 +82,19 @@ class @WhiteboardLineModel extends WhiteboardToolModel draw: (x1, y1, x2, y2, colour, thickness) -> # if the drawing is from the pencil tool, it comes as a path first - if _.isString(x1) - colour = y1 - thickness = x2 - path = x1 + # if _.isString(x1) + # colour = y1 + # thickness = x2 + # path = x1 - # if the drawing is from the line tool, it comes with two points - else - path = @_buildPath(x1, y1, x2, y2) + # # if the drawing is from the line tool, it comes with two points + # else + # path = @_buildPath(points) - line = @paper.path(@_scaleLinePath(path, @gw, @gh, @xOffset, @yOffset)) - line.attr Utils.strokeAndThickness(colour, thickness) - line.attr({"stroke-linejoin": "round"}) - line + # line = @paper.path(@_scaleLinePath(path, @gw, @gh, @xOffset, @yOffset)) + # line.attr Utils.strokeAndThickness(colour, thickness) + # line.attr({"stroke-linejoin": "round"}) + # line # When dragging for drawing lines starts # @param {number} x the x value of the cursor @@ -184,8 +157,19 @@ class @WhiteboardLineModel extends WhiteboardToolModel # [ @_scaleLinePath(path.join(","), 1 / @gw, 1 / @gh), # @currentColour, @currentThickness ] - _buildPath: (x1, y1, x2, y2) -> - "M#{x1} #{y1}L#{x2} #{y2}" + _buildPath: (points) -> + path = "" + + if points and points.length >= 2 + path += "M #{points[0]} #{points[1]}" + i = 2 + + while i < points.length + path += "L#{points[i]} #{points[i + 1]}" + i += 2 + + path += "Z" + path # Scales a path string to fit within a width and height of the new paper size # @param {number} w width of the shape as a percentage of the original width diff --git a/labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee b/labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee index 36bdf0eedf..18c211caa5 100755 --- a/labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee +++ b/labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee @@ -254,11 +254,11 @@ class @WhiteboardPaperModel @currentTool = tool console.log "setting current tool to", tool switch tool - when "path", "line" + when "line" @cursor.undrag() @currentLine = @_createTool(tool) @cursor.drag(@currentLine.dragOnMove, @currentLine.dragOnStart, @currentLine.dragOnEnd) - when "rect" + when "rectangle" @cursor.undrag() @currentRect = @_createTool(tool) @cursor.drag(@currentRect.dragOnMove, @currentRect.dragOnStart, @currentRect.dragOnEnd) @@ -363,6 +363,8 @@ class @WhiteboardPaperModel # TODO: check if the objects exist before calling update, if they don't they should be created updateShape: (shape, data) -> switch shape + when "pencil" + @currentPencil.update(data) when "line" @currentLine.update(data) when "rectangle" @@ -372,7 +374,6 @@ class @WhiteboardPaperModel when "triangle" @currentTriangle.update(data) when "text" - #@currentText.update.apply(@currentText, data) @currentText.update(data) else console.log "shape not recognized at updateShape", shape @@ -381,6 +382,10 @@ class @WhiteboardPaperModel makeShape: (shape, data) -> tool = null switch shape + when "pencil" + @currentPencil = @_createTool(shape) + toolModel = @currentPencil + tool = @currentPencil.make(data) when "path", "line" @currentLine = @_createTool(shape) toolModel = @currentLine @@ -462,7 +467,6 @@ class @WhiteboardPaperModel #set parameters to raphael viewbox @raphaelObj.setViewBox(newXPos , newyPos, newWidth , newHeight , true) - # update the rectangle elements which create the border when page is zoomed @borders.left.attr( {width:newXPos, height: @containerHeight} ) @@ -748,6 +752,8 @@ class @WhiteboardPaperModel # Wrapper method to create a tool for the whiteboard _createTool: (type) -> switch type + when "pencil" + model = WhiteboardLineModel when "path", "line" model = WhiteboardLineModel when "rectangle" diff --git a/labs/meteor-client/collections/shapes.coffee b/labs/meteor-client/collections/shapes.coffee index 479b82b3b8..6ffea6261e 100644 --- a/labs/meteor-client/collections/shapes.coffee +++ b/labs/meteor-client/collections/shapes.coffee @@ -29,7 +29,9 @@ Meteor.methods console.log "added textShape id =[#{id}]:#{shapeObject.id} in #{meetingId} || now there are #{numShapesOnSlide} shapes on the slide" else - if shapeObject?.status is "DRAW_END" #the mouse button was released - the drawing is complete + # the mouse button was released - the drawing is complete + # TODO: pencil messages currently don't send draw_end and are labeled all as DRAW_START + if shapeObject?.status is "DRAW_END" or (shapeObject?.status is "DRAW_START" and shapeObject?.shape_type is "pencil") entry = meetingId: meetingId whiteboardId: whiteboardId