Add whiteboard pencil based on line tool
This commit is contained in:
Lucas Zawacki
parent
0e670a05d8
commit
079c44a367
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user