Add events to Canvas

Closes framer/company#1544

framer/Canvas.coffee

@@ -1,7 +1,7 @@
 {BaseClass} = require "./BaseClass"
 {Events} = require "./Events"
 
-class CanvasClass extends BaseClass
+class Canvas extends BaseClass
 
 	@define "width",  get: -> window.innerWidth
 	@define "height", get: -> window.innerHeight
@@ -20,16 +20,20 @@ class CanvasClass extends BaseClass
 		get: -> Framer.Device.background.image
 		set: (value) -> Framer.Device.background.image = value
 
-	addListener: (eventName, listener) =>
-		if eventName is "resize"
-			Events.wrap(window).addEventListener "resize", =>
-				@emit("resize")
+	constructor: (options={})->
+		super options
+		Events.wrap(window).addEventListener("resize", @_handleResize)
 
-		super(eventName, listener)
+	onResize: (cb) -> @on("resize", cb)
 
-	on: @::addListener
+	toInspect: ->
+		return "<#{@constructor.name} #{@width}x#{@height}>"
 
-	onResize: (cb) -> @on("resize", cb)
+	_handleResize: (event) =>
+		@emit("resize")
+		@emit("change:width")
+		@emit("change:height")
+		@emit("change:size")
+		@emit("change:frame")
 
-# We use this as a singleton
-exports.Canvas = new CanvasClass
+exports.Canvas = Canvas

framer/Framer.coffee

@@ -14,7 +14,6 @@ Framer.Gestures = (require "./Gestures").Gestures
 Framer.Animation = (require "./Animation").Animation
 Framer.AnimationGroup = (require "./AnimationGroup").AnimationGroup
 Framer.Screen = (require "./Screen").Screen
-Framer.Canvas = (require "./Canvas").Canvas
 Framer.Align = (require "./Align").Align
 Framer.print = (require "./Print").print
 
@@ -60,5 +59,6 @@ Framer.DefaultContext = new Framer.Context(name:"Default")
 Framer.DefaultContext.backgroundColor = "white"
 Framer.CurrentContext = Framer.DefaultContext
 
+window.Canvas = new (require "./Canvas").Canvas
 Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
 Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()