From 0c68fa88adb0e8a51bca7a70b2d440151097b587 Mon Sep 17 00:00:00 2001 From: Koen Bok Date: Tue, 15 Dec 2015 10:05:18 +0100 Subject: [PATCH 1/3] Wrap event handlers for cleanup --- framer/LayerDraggable.coffee | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/framer/LayerDraggable.coffee b/framer/LayerDraggable.coffee index fb6d5719b..755991adb 100644 --- a/framer/LayerDraggable.coffee +++ b/framer/LayerDraggable.coffee @@ -150,8 +150,8 @@ class exports.LayerDraggable extends BaseClass x: touchEvent.clientX - @_correctedLayerStartPoint.x y: touchEvent.clientY - @_correctedLayerStartPoint.y - document.addEventListener(Events.TouchMove, @_touchMove) - document.addEventListener(Events.TouchEnd, @_touchEnd) + @layer._context.domEventManager.wrap(document).addEventListener(Events.TouchMove, @_touchMove) + @layer._context.domEventManager.wrap(document).addEventListener(Events.TouchEnd, @_touchEnd) @emit(Events.DragStart, event) @@ -218,8 +218,8 @@ class exports.LayerDraggable extends BaseClass event.stopPropagation() unless @propagateEvents - document.removeEventListener(Events.TouchMove, @_touchMove) - document.removeEventListener(Events.TouchEnd, @_touchEnd) + @layer._context.domEventManager.wrap(document).removeEventListener(Events.TouchMove, @_touchMove) + @layer._context.domEventManager.wrap(document).removeEventListener(Events.TouchEnd, @_touchEnd) # Start the simulation prior to emitting the DragEnd event. # This way, if the user calls layer.animate on DragEnd, the simulation will From 3529f97c8eb1cb991b8ae80a9bcd166e12ea18b5 Mon Sep 17 00:00:00 2001 From: Koen Bok Date: Tue, 15 Dec 2015 10:06:22 +0100 Subject: [PATCH 2/3] Add static event handler shortcuts --- framer/Animation.coffee | 10 +++++++++ framer/BaseClass.coffee | 2 ++ framer/Canvas.coffee | 2 ++ framer/Events.coffee | 14 +----------- framer/Layer.coffee | 42 +++++++++++++++++++++++++++++++++--- framer/LayerDraggable.coffee | 13 +++++++++++ 6 files changed, 67 insertions(+), 16 deletions(-) diff --git a/framer/Animation.coffee b/framer/Animation.coffee index 765c3c93a..0630a869e 100644 --- a/framer/Animation.coffee +++ b/framer/Animation.coffee @@ -269,3 +269,13 @@ class exports.Animation extends EventEmitter return animatableProperties + + ############################################################## + ## EVENT HELPERS + + onAnimationStart: (cb) -> @on(Events.AnimationStart, cb) + onAnimationStop: (cb) -> @on(Events.AnimationStop, cb) + onAnimationEnd: (cb) -> @on(Events.AnimationEnd, cb) + onAnimationDidStart: (cb) -> @on(Events.AnimationDidStart, cb) + onAnimationDidStop: (cb) -> @on(Events.AnimationDidStop, cb) + onAnimationDidEnd: (cb) -> @on(Events.AnimationDidEnd, cb) \ No newline at end of file diff --git a/framer/BaseClass.coffee b/framer/BaseClass.coffee index e515a5731..d5423fa69 100644 --- a/framer/BaseClass.coffee +++ b/framer/BaseClass.coffee @@ -110,6 +110,8 @@ class exports.BaseClass extends EventEmitter toInspect: => "<#{@constructor.name} id:#{@id or null}>" + onChange: (name, cb) -> @on("change:#{name}", cb) + ################################################################# # Base constructor method diff --git a/framer/Canvas.coffee b/framer/Canvas.coffee index 550382bcb..5439bd4af 100644 --- a/framer/Canvas.coffee +++ b/framer/Canvas.coffee @@ -16,6 +16,8 @@ class CanvasClass extends BaseClass super(eventName, listener) on: @::addListener + + onResize: (cb) -> @on("resize", cb) # We use this as a singleton exports.Canvas = new CanvasClass \ No newline at end of file diff --git a/framer/Events.coffee b/framer/Events.coffee index df76fa0af..1d3c146f5 100644 --- a/framer/Events.coffee +++ b/framer/Events.coffee @@ -17,6 +17,7 @@ Events.MouseOut = "mouseout" Events.MouseMove = "mousemove" Events.MouseWheel = "mousewheel" Events.DoubleClick = "dblclick" +Events.MouseDoubleClick = "dblclick" # Alias for consistent naming # Let's make sure the touch events work on desktop too if not Utils.isTouch() @@ -51,17 +52,4 @@ Events.touchEvent = (event) -> Events.wrap = (element) -> Framer.CurrentContext.domEventManager.wrap(element) -Events.addHelpers = (obj) -> - - # Add event helpers to an object like: - # layer.onClick, layer.onScroll, etc. - - _.keys(Events).map (eventName) -> - return unless _.isString(eventName) - obj::["on#{eventName}"] = (callback) -> - @on(Events[eventName], callback) - - obj::onChange = (p, callback) -> - @on("change:#{p}", callback) - exports.Events = Events \ No newline at end of file diff --git a/framer/Layer.coffee b/framer/Layer.coffee index e450373bc..5accfca18 100644 --- a/framer/Layer.coffee +++ b/framer/Layer.coffee @@ -856,6 +856,45 @@ class exports.Layer extends BaseClass on: @::addListener off: @::removeListener + ############################################################## + ## EVENT HELPERS + + onClick: (cb) -> @on(Events.Click, cb) + onDoubleClick: (cb) -> @on(Events.DoubleClick, cb) + onScroll: (cb) -> @on(Events.Scroll, cb) + + onTouchStart: (cb) -> @on(Events.TouchStart, cb) + onTouchEnd: (cb) -> @on(Events.TouchEnd, cb) + onTouchMove: (cb) -> @on(Events.TouchMove, cb) + + onMouseUp: (cb) -> @on(Events.MouseUp, cb) + onMouseDown: (cb) -> @on(Events.MouseDown, cb) + onMouseOver: (cb) -> @on(Events.MouseOver, cb) + onMouseOut: (cb) -> @on(Events.MouseOut, cb) + onMouseMove: (cb) -> @on(Events.MouseMove, cb) + onMouseWheel: (cb) -> @on(Events.MouseWheel, cb) + + onAnimationStart: (cb) -> @on(Events.AnimationStart, cb) + onAnimationStop: (cb) -> @on(Events.AnimationStop, cb) + onAnimationEnd: (cb) -> @on(Events.AnimationEnd, cb) + onAnimationDidStart: (cb) -> @on(Events.AnimationDidStart, cb) + onAnimationDidStop: (cb) -> @on(Events.AnimationDidStop, cb) + onAnimationDidEnd: (cb) -> @on(Events.AnimationDidEnd, cb) + + onImageLoaded: (cb) -> @on(Events.ImageLoaded, cb) + onImageLoadError: (cb) -> @on(Events.ImageLoadError, cb) + + onMove: (cb) -> @on(Events.Move, cb) + onDragStart: (cb) -> @on(Events.DragStart, cb) + onDragWillMove: (cb) -> @on(Events.DragWillMove, cb) + onDragMove: (cb) -> @on(Events.DragMove, cb) + onDragDidMove: (cb) -> @on(Events.DragDidMove, cb) + onDrag: (cb) -> @on(Events.Drag, cb) + onDragEnd: (cb) -> @on(Events.DragEnd, cb) + onDragAnimationDidStart: (cb) -> @on(Events.DragAnimationDidStart, cb) + onDragAnimationDidEnd: (cb) -> @on(Events.DragAnimationDidEnd, cb) + onDirectionLockDidStart: (cb) -> @on(Events.DirectionLockDidStart, cb) + ############################################################## ## DESCRIPTOR @@ -869,6 +908,3 @@ class exports.Layer extends BaseClass if @name return "<#{@constructor.name} id:#{@id} name:#{@name} (#{round(@x)},#{round(@y)}) #{round(@width)}x#{round(@height)}>" return "<#{@constructor.name} id:#{@id} (#{round(@x)},#{round(@y)}) #{round(@width)}x#{round(@height)}>" - -# Add event helpers for the layer dynamically -Events.addHelpers(exports.Layer) diff --git a/framer/LayerDraggable.coffee b/framer/LayerDraggable.coffee index 755991adb..8c5043685 100644 --- a/framer/LayerDraggable.coffee +++ b/framer/LayerDraggable.coffee @@ -515,4 +515,17 @@ class exports.LayerDraggable extends BaseClass animateStop: -> @_stopSimulation() + ############################################################## + ## EVENT HELPERS + + onMove: (cb) -> @on(Events.Move, cb) + onDragStart: (cb) -> @on(Events.DragStart, cb) + onDragWillMove: (cb) -> @on(Events.DragWillMove, cb) + onDragMove: (cb) -> @on(Events.DragMove, cb) + onDragDidMove: (cb) -> @on(Events.DragDidMove, cb) + onDrag: (cb) -> @on(Events.Drag, cb) + onDragEnd: (cb) -> @on(Events.DragEnd, cb) + onDragAnimationDidStart: (cb) -> @on(Events.DragAnimationDidStart, cb) + onDragAnimationDidEnd: (cb) -> @on(Events.DragAnimationDidEnd, cb) + onDirectionLockDidStart: (cb) -> @on(Events.DirectionLockDidStart, cb) From ea17d4e91b5bda01f85f1e42bf503884c82cbdd1 Mon Sep 17 00:00:00 2001 From: Koen Bok Date: Tue, 15 Dec 2015 10:06:34 +0100 Subject: [PATCH 3/3] Wrap event handler --- framer/VideoLayer.coffee | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/framer/VideoLayer.coffee b/framer/VideoLayer.coffee index ecc4bb2ab..788b592cf 100644 --- a/framer/VideoLayer.coffee +++ b/framer/VideoLayer.coffee @@ -14,8 +14,8 @@ class exports.VideoLayer extends Layer # Make it work with .on and .off # https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events - @player.on = @player.addEventListener - @player.off = @player.removeEventListener + @player.on = @_context.domEventManager.wrap(@player).addEventListener + @player.off = @_context.domEventManager.wrap(@player).removeEventListener @video = options.video @@ -24,3 +24,5 @@ class exports.VideoLayer extends Layer @define "video", get: -> @player.src set: (video) -> @player.src = video + + # TODO: Maybe add event handler shortcuts here too