From e73c97154d879aa42f5feb1a7befee088b54143b Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 14 Oct 2013 12:02:08 +0100
Subject: [PATCH] Add more resize events

'resize' is actually 'resizeEnd'. Added 'resizeStart' and 'resizing'
which is triggered on mouse move.

Change-Id: I13c6e426cbcc965b3db50082c5294ca76979fe57
---
 modules/ve/ce/ve.ce.FocusableNode.js   |  4 ++--
 modules/ve/ce/ve.ce.RelocatableNode.js |  2 +-
 modules/ve/ce/ve.ce.ResizableNode.js   | 25 +++++++++++++++++++++++--
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/modules/ve/ce/ve.ce.FocusableNode.js b/modules/ve/ce/ve.ce.FocusableNode.js
index 5c970ec6a6..0b3c8986c2 100644
--- a/modules/ve/ce/ve.ce.FocusableNode.js
+++ b/modules/ve/ce/ve.ce.FocusableNode.js
@@ -16,7 +16,7 @@
  * node's DOM rendering.
  *
  * If your focusable node changes size and the highlight must be redrawn, call redrawHighlight().
- * 'resize' and 'rerender' are already bound to call this.
+ * 'resizeEnd' and 'rerender' are already bound to call this.
  *
  * @class
  * @abstract
@@ -34,7 +34,7 @@ ve.ce.FocusableNode = function VeCeFocusableNode( $focusable ) {
 	// Events
 	this.connect( this, {
 		'setup': 'onFocusableSetup',
-		'resize': 'onFocusableResize',
+		'resizeEnd': 'onFocusableResize',
 		'rerender': 'onFocusableRerender',
 		'live': 'onFocusableLive'
 	} );
diff --git a/modules/ve/ce/ve.ce.RelocatableNode.js b/modules/ve/ce/ve.ce.RelocatableNode.js
index f91e66312d..d4b15f4eab 100644
--- a/modules/ve/ce/ve.ce.RelocatableNode.js
+++ b/modules/ve/ce/ve.ce.RelocatableNode.js
@@ -26,7 +26,7 @@ ve.ce.RelocatableNode = function VeCeRelocatableNode( $relocatable ) {
 	this.connect( this, {
 		'focus': 'onRelocatableFocus',
 		'blur': 'onRelocatableBlur',
-		'resize': 'onRelocatableResize',
+		'resizeEnd': 'onRelocatableResize',
 		'live': 'onRelocatableLive'
 	} );
 
diff --git a/modules/ve/ce/ve.ce.ResizableNode.js b/modules/ve/ce/ve.ce.ResizableNode.js
index 3c402669ed..f33bf93b2b 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -29,7 +29,7 @@ ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
 		'focus': 'onResizableFocus',
 		'blur': 'onResizableBlur',
 		'live': 'onResizableLive',
-		'resize': 'onResizableFocus'
+		'resizeEnd': 'onResizableFocus'
 	} );
 
 	// Initialization
@@ -41,6 +41,22 @@ ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
 		.append( this.$$( '<div>' ).addClass( 've-ce-resizableNode-swHandle' ) );
 };
 
+/* Events */
+
+/**
+ * @event resizeStart
+ */
+
+/**
+ * @event resizing
+ * @param {Object} dimensions Dimension object containing width & height
+ */
+
+/**
+ * @event resizeEnd
+ */
+
+
 /* Static Properties */
 
 ve.ce.ResizableNode.static = {};
@@ -108,6 +124,7 @@ ve.ce.ResizableNode.prototype.onResizableLive = function () {
  *
  * @method
  * @param {jQuery.Event} e Click event
+ * @emits resizeStart
  */
 ve.ce.ResizableNode.prototype.onResizeHandlesCornerMouseDown = function ( e ) {
 	// Hide context menu
@@ -142,6 +159,7 @@ ve.ce.ResizableNode.prototype.onResizeHandlesCornerMouseDown = function ( e ) {
 		'mousemove.ve-ce-resizableNode': ve.bind( this.onDocumentMouseMove, this ),
 		'mouseup.ve-ce-resizableNode': ve.bind( this.onDocumentMouseUp, this )
 	} );
+	this.emit( 'resizeStart' );
 
 	return false;
 };
@@ -181,6 +199,7 @@ ve.ce.ResizableNode.prototype.setResizableHandlesSizeAndPosition = function () {
  *
  * @method
  * @param {jQuery.Event} e Click event
+ * @emits resizing
  */
 ve.ce.ResizableNode.prototype.onDocumentMouseMove = function ( e ) {
 	var newWidth, newHeight, newRatio, snapMin, snapMax, snap,
@@ -260,6 +279,7 @@ ve.ce.ResizableNode.prototype.onDocumentMouseMove = function ( e ) {
 
 		// Update bounding box
 		this.$resizeHandles.css( dimensions );
+		this.emit( 'resizing', dimensions );
 	}
 };
 
@@ -267,6 +287,7 @@ ve.ce.ResizableNode.prototype.onDocumentMouseMove = function ( e ) {
  * Handle body mouseup.
  *
  * @method
+ * @emits resizeEnd
  */
 ve.ce.ResizableNode.prototype.onDocumentMouseUp = function () {
 	var attrChanges,
@@ -294,7 +315,7 @@ ve.ce.ResizableNode.prototype.onDocumentMouseUp = function () {
 	// user doesn't perform a drag
 	this.root.getSurface().getSurface().getContext().update();
 
-	this.emit( 'resize' );
+	this.emit( 'resizeEnd' );
 };
 
 /**