Refactored the Camera to only listen to events that use the same canvas. Fixed the level editor map selection modals.

app/lib/surface/Camera.coffee

@@ -25,6 +25,8 @@ module.exports = class Camera extends CocoClass
   # what the camera is pointed at right now
   target: DEFAULT_TARGET
   zoom: DEFAULT_ZOOM
+  canvasScaleFactorX: 1
+  canvasScaleFactorY: 1
 
   # properties for tracking going between targets
   oldZoom: null
@@ -40,14 +42,16 @@ module.exports = class Camera extends CocoClass
   subscriptions:
     'camera-zoom-in': 'onZoomIn'
     'camera-zoom-out': 'onZoomOut'
-    'surface:mouse-scrolled': 'onMouseScrolled'
+    'camera-zoom-to': 'onZoomTo'
     'level:restarted': 'onLevelRestarted'
+    'surface:mouse-scrolled': 'onMouseScrolled'
     'sprite:mouse-down': 'onMouseDown'
     'sprite:dragged': 'onMouseDragged'
-    'camera-zoom-to': 'onZoomTo'
 
-  constructor: (@canvasWidth, @canvasHeight, angle=Math.asin(0.75), hFOV=d2r(30)) ->
+  constructor: (@canvas, angle=Math.asin(0.75), hFOV=d2r(30)) ->
     super()
+    @canvasWidth = parseInt(@canvas.attr('width'), 10)
+    @canvasHeight = parseInt(@canvas.attr('height'), 10)
     @offset = {x: 0, y: 0}
     @calculateViewingAngle angle
     @calculateFieldOfView hFOV
@@ -151,6 +155,7 @@ module.exports = class Camera extends CocoClass
   onZoomIn: (e) -> @zoomTo @target, @zoom * 1.15, 300
   onZoomOut: (e) -> @zoomTo @target, @zoom / 1.15, 300
   onMouseScrolled: (e) ->
+    return unless e.canvas is @canvas
     ratio = 1 + 0.05 * Math.sqrt(Math.abs(e.deltaY))
     ratio = 1 / ratio if e.deltaY > 0
     newZoom = @zoom * ratio
@@ -169,10 +174,12 @@ module.exports = class Camera extends CocoClass
     @zoomTo target, newZoom, 0
 
   onMouseDown: (e) ->
+    return unless e.canvas is @canvas
     return if @dragDisabled
     @lastPos = {x: e.originalEvent.rawX, y: e.originalEvent.rawY}
 
   onMouseDragged: (e) ->
+    return unless e.canvas is @canvas
     return if @dragDisabled
     target = @boundTarget(@target, @zoom)
     newPos =

app/lib/surface/CocoSprite.coffee

@@ -465,7 +465,11 @@ module.exports = CocoSprite = class CocoSprite extends CocoClass
 
   onMouseEvent: (e, ourEventName) ->
     return if @letterboxOn
-    Backbone.Mediator.publish ourEventName, sprite: @, thang: @thang, originalEvent: e
+    p = @imageObject
+    p = p.parent while p.parent
+    newEvent = sprite: @, thang: @thang, originalEvent: e, canvas:p
+    @trigger ourEventName, newEvent
+    Backbone.Mediator.publish ourEventName, newEvent
 
   addHealthBar: ->
     return unless @thang?.health? and "health" in (@thang?.hudProperties ? [])

app/lib/surface/PointChooser.coffee

@@ -26,7 +26,7 @@ module.exports = class PointChooser extends CocoClass
   onMouseDown: (e) =>
     console.log "got stagemousedown", e, key.shift
     return unless key.shift
-    @setPoint @options.camera.canvasToWorld {x: e.stageX, y: e.stageY}
+    @setPoint @options.camera.screenToWorld {x: e.stageX, y: e.stageY}
     Backbone.Mediator.publish 'choose-point', point: @point
 
   updateShape: ->

app/lib/surface/RegionChooser.coffee

@@ -16,12 +16,12 @@ module.exports = class RegionChooser extends CocoClass
 
   onMouseDown: (e) =>
     return unless key.shift
-    @firstPoint = @options.camera.canvasToWorld {x: e.stageX, y: e.stageY}
+    @firstPoint = @options.camera.screenToWorld {x: e.stageX, y: e.stageY}
     @options.camera.dragDisabled = true
 
   onMouseMove: (e) =>
     return unless @firstPoint
-    @secondPoint = @options.camera.canvasToWorld {x: e.stageX, y: e.stageY}
+    @secondPoint = @options.camera.screenToWorld {x: e.stageX, y: e.stageY}
     @restrictRegion() if @options.restrictRatio
     @updateShape()
 

app/lib/surface/SpriteBoss.coffee

@@ -13,7 +13,6 @@ module.exports = class SpriteBoss extends CocoClass
     'bus:player-left': 'onPlayerLeft'
 #    'level-set-debug': 'onSetDebug'
     'level-highlight-sprites': 'onHighlightSprites'
-    'sprite:mouse-up': 'onSpriteMouseUp'
     'surface:stage-mouse-down': 'onStageMouseDown'
     'level-select-sprite': 'onSelectSprite'
     'level-suppress-selection-sounds': 'onSuppressSelectionSounds'
@@ -152,6 +151,7 @@ module.exports = class SpriteBoss extends CocoClass
     options = @createSpriteOptions thang: thang
     options.resolutionFactor = if thangType.get('kind') is 'Floor' then 2 else SPRITE_RESOLUTION_FACTOR
     sprite = new CocoSprite thangType, options
+    @listenTo sprite, 'sprite:mouse-up', @onSpriteMouseUp
     @addSprite sprite, null, layer
     sprite.setDebug @debug
     sprite

app/lib/surface/Surface.coffee

@@ -400,7 +400,7 @@ module.exports = Surface = class Surface extends CocoClass
     canvasWidth = parseInt @canvas.attr('width'), 10
     canvasHeight = parseInt @canvas.attr('height'), 10
     @camera?.destroy()
-    @camera = new Camera canvasWidth, canvasHeight
+    @camera = new Camera @canvas
     AudioPlayer.camera = @camera
     @layers.push @surfaceLayer = new Layer name: "Surface", layerPriority: 0, transform: Layer.TRANSFORM_SURFACE, camera: @camera
     @layers.push @surfaceTextLayer = new Layer name: "Surface Text", layerPriority: 1, transform: Layer.TRANSFORM_SURFACE_TEXT, camera: @camera
@@ -425,6 +425,7 @@ module.exports = Surface = class Surface extends CocoClass
     oldHeight = parseInt @canvas.attr('height'), 10
     newWidth = @canvas.width()
     newHeight = @canvas.height()
+    return unless newWidth > 0 and newHeight > 0
     #if InstallTrigger?  # Firefox rendering performance goes down as canvas size goes up
     #  newWidth = Math.min 924, newWidth
     #  newHeight = Math.min 589, newHeight
@@ -544,6 +545,7 @@ module.exports = Surface = class Surface extends CocoClass
       deltaX: e.deltaX
       deltaY: e.deltaY
       screenPos: @mouseScreenPos
+      canvas: @canvas
     Backbone.Mediator.publish 'surface:mouse-scrolled', event unless @disabled
 
   hookUpChooseControls: ->

app/views/editor/thang/edit.coffee

@@ -100,10 +100,8 @@ module.exports = class ThangTypeEditView extends View
   initStage: ->
     canvas = @$el.find('#canvas')
     @stage = new createjs.Stage(canvas[0])
-    canvasWidth = parseInt(canvas.attr('width'), 10)
-    canvasHeight = parseInt(canvas.attr('height'), 10)
     @camera?.destroy()
-    @camera = new Camera canvasWidth, canvasHeight
+    @camera = new Camera canvas
 
     @torsoDot = @makeDot('blue')
     @mouthDot = @makeDot('yellow')