Resizable node live preview

Resizes the $resizable element as you drag.
Can be disabled by setting the 'outline' config option.

FocusableNode
* Redraw on resize

ProtectedNode
* Destroy and prevent creation of phantoms on resize

MWInlineImageNode
* Correctly pass this.$image to ResizableNode

Bug: 54298
Change-Id: I7d6d345af8bb4712bbf154072b4704943a5a620d

modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js

@@ -234,6 +234,14 @@ ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to )
 	}
 };
 
+/** */
+ve.ce.MWBlockImageNode.prototype.onResizableResizing = function ( dimensions ) {
+	if ( !this.outline ) {
+		ve.ce.ResizableNode.prototype.onResizableResizing.call( this, dimensions );
+		this.$thumbInner.css( 'width', dimensions.width + 2 );
+	}
+};
+
 /** */
 ve.ce.MWBlockImageNode.prototype.setupSlugs = function () {
 	// Intentionally empty

modules/ve-mw/ce/nodes/ve.ce.MWInlineImageNode.js

@@ -40,7 +40,7 @@ ve.ce.MWInlineImageNode = function VeCeMWInlineImageNode( model, config ) {
 	ve.ce.ProtectedNode.call( this );
 	ve.ce.FocusableNode.call( this );
 	ve.ce.RelocatableNode.call( this );
-	ve.ce.MWResizableNode.call( this );
+	ve.ce.MWResizableNode.call( this, this.$image );
 
 	this.$image
 		.attr( 'src', this.model.getAttribute( 'src' ) )

modules/ve-mw/ce/ve.ce.MWResizableNode.js

@@ -14,9 +14,10 @@
  *
  * @constructor
  * @param {jQuery} [$resizable=this.$] Resizable DOM element
+ * @param {Object} [config] Configuration options
  */
-ve.ce.MWResizableNode = function VeCeMWResizableNode( $resizable ) {
-	ve.ce.ResizableNode.call( this, $resizable );
+ve.ce.MWResizableNode = function VeCeMWResizableNode( $resizable, config ) {
+	ve.ce.ResizableNode.call( this, $resizable, config );
 };
 
 /* Inheritance */

modules/ve/ce/ve.ce.FocusableNode.js

@@ -34,7 +34,8 @@ ve.ce.FocusableNode = function VeCeFocusableNode( $focusable ) {
 	// Events
 	this.connect( this, {
 		'setup': 'onFocusableSetup',
-		'resizeEnd': 'onFocusableResize',
+		'resizeEnd': 'onFocusableResizeEnd',
+		'resizing': 'onFocusableResizing',
 		'rerender': 'onFocusableRerender',
 		'live': 'onFocusableLive'
 	} );
@@ -94,16 +95,27 @@ ve.ce.FocusableNode.prototype.onFocusableHistory = function () {
 };
 
 /**
- * Handle resize event.
+ * Handle resize end event.
  *
  * @method
  */
-ve.ce.FocusableNode.prototype.onFocusableResize = function () {
+ve.ce.FocusableNode.prototype.onFocusableResizeEnd = function () {
 	if ( this.focused ) {
 		this.redrawHighlight();
 	}
 };
 
+/**
+ * Handle resizing event.
+ *
+ * @method
+ */
+ve.ce.FocusableNode.prototype.onFocusableResizing = function () {
+	if ( this.focused && !this.outline ) {
+		this.redrawHighlight();
+	}
+};
+
 /**
  * Handle rerender event.
  *

modules/ve/ce/ve.ce.ProtectedNode.js

@@ -24,7 +24,8 @@ ve.ce.ProtectedNode = function VeCeProtectedNode( $phantomable ) {
 	// Events
 	this.connect( this, {
 		'setup': 'onProtectedSetup',
-		'teardown': 'onProtectedTeardown'
+		'teardown': 'onProtectedTeardown',
+		'resizeStart': 'onProtectedResizeStart'
 	} );
 };
 
@@ -166,7 +167,7 @@ ve.ce.ProtectedNode.prototype.onPhantomMouseDown = function ( e ) {
  * @method
  */
 ve.ce.ProtectedNode.prototype.onProtectedMouseEnter = function () {
-	if ( !this.root.getSurface().dragging ) {
+	if ( !this.root.getSurface().dragging && !this.resizing ) {
 		this.createPhantoms();
 	}
 };
@@ -210,6 +211,15 @@ ve.ce.ProtectedNode.prototype.onSurfaceModelChange = function () {
 	}
 };
 
+/**
+ * Handle resize start events.
+ *
+ * @method
+ */
+ve.ce.ProtectedNode.prototype.onProtectedResizeStart = function () {
+	this.clearPhantoms();
+};
+
 /**
  * Creates phantoms
  *

modules/ve/ce/ve.ce.ResizableNode.js

@@ -15,6 +15,7 @@
  * @param {jQuery} [$resizable=this.$] Resizable DOM element
  * @param {Object} [config] Configuration options
  * @param {number|null} [config.snapToGrid=10] Snap to a grid of size X when the shift key is held. Null disables.
+ * @param {boolean} [config.outline=false] Resize using an outline of the element only, don't live preview.
  */
 ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
 	// Properties
@@ -23,12 +24,14 @@ ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
 	this.resizing = false;
 	this.$resizeHandles = this.$$( '<div>' );
 	this.snapToGrid = ( config && config.snapToGrid !== undefined ) ? config.snapToGrid : 10;
+	this.outline = !!( config && config.outline );
 
 	// Events
 	this.connect( this, {
 		'focus': 'onResizableFocus',
 		'blur': 'onResizableBlur',
 		'live': 'onResizableLive',
+		'resizing': 'onResizableResizing',
 		'resizeEnd': 'onResizableFocus'
 	} );
 
@@ -119,6 +122,22 @@ ve.ce.ResizableNode.prototype.onResizableLive = function () {
 	}
 };
 
+/**
+ * Handle resizing event.
+ *
+ * @method
+ * @param {Object} dimensions Dimension object containing width & height
+ */
+ve.ce.ResizableNode.prototype.onResizableResizing = function ( dimensions ) {
+	if ( !this.outline ) {
+		this.$resizable.css( {
+			'width': dimensions.width,
+			'height': dimensions.height
+		} );
+		this.setResizableHandlesPosition();
+	}
+};
+
 /**
  * Handle bounding box handle mousedown.
  *