Made zoom level consistent between slides and encapsulated some duplicate code.

This commit is contained in:
Maxim Khlobystov 2014-09-25 11:34:08 -07:00
parent feba2731e5
commit 156e84cb70

View File

@ -47,6 +47,9 @@ class @WhiteboardPaperModel
@zoomObserver = null @zoomObserver = null
@adjustedWidth = 0
@adjustedHeight = 0
# Override the close() to unbind events. # Override the close() to unbind events.
unbindEvents: -> unbindEvents: ->
$(window).off "resize.whiteboard_paper" $(window).off "resize.whiteboard_paper"
@ -467,6 +470,13 @@ class @WhiteboardPaperModel
#update cursor to appear the same size even when page is zoomed in #update cursor to appear the same size even when page is zoomed in
@cursor.setRadius( 3 * widthRatio / 100 ) @cursor.setRadius( 3 * widthRatio / 100 )
zoomAndPan: (widthRatio, heightRatio, xOffset, yOffset) ->
newX = - xOffset * 2 * @adjustedWidth / 100
newY = - yOffset * 2 * @adjustedHeight / 100
newWidth = @adjustedWidth * widthRatio / 100
newHeight = @adjustedHeight * heightRatio / 100
@raphaelObj.setViewBox(newX, newY, newWidth, newHeight) # zooms and pans
# Registers listeners for events in the gloval event bus # Registers listeners for events in the gloval event bus
_registerEvents: -> _registerEvents: ->
@ -558,7 +568,6 @@ class @WhiteboardPaperModel
@containerOffsetLeft = $container.offset()?.left @containerOffsetLeft = $container.offset()?.left
@containerOffsetTop = $container.offset()?.top @containerOffsetTop = $container.offset()?.top
# Retrieves an image element from the paper. # Retrieves an image element from the paper.
# The url must be in the slides array. # The url must be in the slides array.
# @param {string} url the url of the image (must be in slides array) # @param {string} url the url of the image (must be in slides array)
@ -810,30 +819,31 @@ class @WhiteboardPaperModel
@zoomObserver = currentSlideCursor.observe # watching the current slide changes @zoomObserver = currentSlideCursor.observe # watching the current slide changes
changed: (newDoc, oldDoc) -> changed: (newDoc, oldDoc) ->
if originalWidth <= originalHeight if originalWidth <= originalHeight
adjustedWidth = boardHeight * originalWidth / originalHeight @adjustedWidth = boardHeight * originalWidth / originalHeight
adjustedHeight = boardHeight @adjustedHeight = boardHeight
else else
adjustedHeight = boardWidth * originalHeight / originalWidth @adjustedHeight = boardWidth * originalHeight / originalWidth
adjustedWidth = boardWidth @adjustedWidth = boardWidth
newX = - newDoc.slide.x_offset * 2 * adjustedWidth / 100 _this.zoomAndPan(newDoc.slide.width_ratio, newDoc.slide.height_ratio,
newY = - newDoc.slide.y_offset * 2 * adjustedHeight / 100 newDoc.slide.x_offset, newDoc.slide.y_offset)
newWidth = adjustedWidth * newDoc.slide.width_ratio / 100
newHeight = adjustedHeight * newDoc.slide.height_ratio / 100
_this.raphaelObj.setViewBox(newX, newY, newWidth, newHeight) # zooms and pans
oldRatio = (oldDoc.slide.width_ratio + oldDoc.slide.height_ratio) / 2 oldRatio = (oldDoc.slide.width_ratio + oldDoc.slide.height_ratio) / 2
newRatio = (newDoc.slide.width_ratio + newDoc.slide.height_ratio) / 2 newRatio = (newDoc.slide.width_ratio + newDoc.slide.height_ratio) / 2
_this.currentShapes?.forEach (shape) -> _this?.currentShapes?.forEach (shape) ->
shape.attr "stroke-width", shape.attr('stroke-width') * oldRatio / newRatio shape.attr "stroke-width", shape.attr('stroke-width') * oldRatio / newRatio
if originalWidth <= originalHeight if originalWidth <= originalHeight
# square => boardHeight is the shortest side # square => boardHeight is the shortest side
adjustedWidth = boardHeight * originalWidth / originalHeight @adjustedWidth = boardHeight * originalWidth / originalHeight
$('#whiteboard-paper').width(adjustedWidth) $('#whiteboard-paper').width(@adjustedWidth)
@addImageToPaper(data, adjustedWidth, boardHeight) @addImageToPaper(data, @adjustedWidth, boardHeight)
@adjustedHeight = boardHeight
else else
adjustedHeight = boardWidth * originalHeight / originalWidth @adjustedHeight = boardWidth * originalHeight / originalWidth
$('#whiteboard-paper').height(adjustedHeight) $('#whiteboard-paper').height(@adjustedHeight)
@addImageToPaper(data, boardWidth, adjustedHeight) @addImageToPaper(data, boardWidth, @adjustedHeight)
@adjustedWidth = boardWidth
@zoomAndPan(currentSlide.slide.width_ratio, currentSlide.slide.height_ratio,
currentSlide.slide.x_offset, currentSlide.slide.y_offset)