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()