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

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

@@ -46,6 +46,9 @@ class @WhiteboardPaperModel
     #     @_registerEvents()
     
     @zoomObserver = null
+    
+    @adjustedWidth = 0
+    @adjustedHeight = 0
 
   # Override the close() to unbind events.
   unbindEvents: ->
@@ -467,6 +470,13 @@ class @WhiteboardPaperModel
     #update cursor to appear the same size even when page is zoomed in
     @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
   _registerEvents: ->
 
@@ -558,7 +568,6 @@ class @WhiteboardPaperModel
     @containerOffsetLeft = $container.offset()?.left
     @containerOffsetTop = $container.offset()?.top
 
-
   # Retrieves an image element from the paper.
   # The url must be in the 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
       changed: (newDoc, oldDoc) ->
         if originalWidth <= originalHeight
-          adjustedWidth = boardHeight * originalWidth / originalHeight
-          adjustedHeight = boardHeight
+          @adjustedWidth = boardHeight * originalWidth / originalHeight
+          @adjustedHeight = boardHeight
         else
-          adjustedHeight = boardWidth * originalHeight / originalWidth
-          adjustedWidth = boardWidth
+          @adjustedHeight = boardWidth * originalHeight / originalWidth
+          @adjustedWidth = boardWidth
         
-        newX = - newDoc.slide.x_offset * 2 * adjustedWidth / 100
-        newY = - newDoc.slide.y_offset * 2 * adjustedHeight / 100
-        newWidth = adjustedWidth * newDoc.slide.width_ratio / 100
-        newHeight = adjustedHeight * newDoc.slide.height_ratio / 100
-        
-        _this.raphaelObj.setViewBox(newX, newY, newWidth, newHeight) # zooms and pans
+        _this.zoomAndPan(newDoc.slide.width_ratio, newDoc.slide.height_ratio,
+          newDoc.slide.x_offset, newDoc.slide.y_offset)
         
         oldRatio = (oldDoc.slide.width_ratio + oldDoc.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
     
     if originalWidth <= originalHeight
       # square => boardHeight is the shortest side
-      adjustedWidth = boardHeight * originalWidth / originalHeight
-      $('#whiteboard-paper').width(adjustedWidth)
-      @addImageToPaper(data, adjustedWidth, boardHeight)
+      @adjustedWidth = boardHeight * originalWidth / originalHeight
+      $('#whiteboard-paper').width(@adjustedWidth)
+      @addImageToPaper(data, @adjustedWidth, boardHeight)
+      @adjustedHeight = boardHeight
     else
-      adjustedHeight = boardWidth * originalHeight / originalWidth
-      $('#whiteboard-paper').height(adjustedHeight)
-      @addImageToPaper(data, boardWidth, adjustedHeight)
+      @adjustedHeight = boardWidth * originalHeight / originalWidth
+      $('#whiteboard-paper').height(@adjustedHeight)
+      @addImageToPaper(data, boardWidth, @adjustedHeight)
+      @adjustedWidth = boardWidth
+    
+    @zoomAndPan(currentSlide.slide.width_ratio, currentSlide.slide.height_ratio,
+      currentSlide.slide.x_offset, currentSlide.slide.y_offset)