Create MWResizeableNode mixin to control defaultSize flag

Previously wasn't being updated to 'false' after a width/height
attribute change.

Bug: 50645
Change-Id: Id5dcd6998e0125757238426f8052505d131d712d

VisualEditor.php

@@ -413,6 +413,8 @@ $wgResourceModules += array(
 			've/ce/nodes/ve.ce.TableSectionNode.js',
 			've/ce/nodes/ve.ce.TextNode.js',
 
+			've-mw/ce/ve.ce.MWResizableNode.js',
+
 			've-mw/ce/nodes/ve.ce.MWEntityNode.js',
 			've-mw/ce/nodes/ve.ce.MWHeadingNode.js',
 			've-mw/ce/nodes/ve.ce.MWPreformattedNode.js',

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

@@ -11,6 +11,9 @@
  * @class
  * @extends ve.ce.BranchNode
  * @mixins ve.ce.ProtectedNode
+ * @mixins ve.ce.FocusableNode
+ * @mixins ve.ce.RelocatableNode
+ * @mixins ve.ce.MWResizableNode
  *
  * @constructor
  * @param {ve.dm.MWBlockImageNode} model Model to observe
@@ -26,7 +29,7 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
 	ve.ce.ProtectedNode.call( this );
 	ve.ce.FocusableNode.call( this );
 	ve.ce.RelocatableNode.call( this );
-	ve.ce.ResizableNode.call( this );
+	ve.ce.MWResizableNode.call( this );
 
 	type = this.model.getAttribute( 'type' );
 
@@ -94,8 +97,11 @@ ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.FocusableNode );
 
 ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.RelocatableNode );
 
+// Need to mixin base class as well
 ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.ResizableNode );
 
+ve.mixinClass( ve.ce.MWBlockImageNode, ve.ce.MWResizableNode );
+
 /* Static Properties */
 
 ve.ce.MWBlockImageNode.static.name = 'mwBlockImage';

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

@@ -1,5 +1,5 @@
 /*!
- * VisualEditor ContentEditable MWEntityNode class.
+ * VisualEditor ContentEditable MWInlineImageNode class.
  *
  * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
  * @license The MIT License (MIT); see LICENSE.txt
@@ -10,6 +10,9 @@
  *
  * @class
  * @extends ve.ce.LeafNode
+ * @mixins ve.ce.ProtectedNode
+ * @mixins ve.ce.FocusableNode
+ * @mixins ve.ce.RelocatableNode
  *
  * @constructor
  * @param {ve.dm.MWInlineImageNode} model Model to observe

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

@@ -0,0 +1,41 @@
+/*!
+ * VisualEditor ContentEditable MWResizableNode class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * ContentEditable MediaWiki resizable node.
+ *
+ * @class
+ * @abstract
+ * @extends {ve.ce.ResizableNode}
+ *
+ * @constructor
+ * @param {jQuery} [$resizable=this.$] Resizable DOM element
+ */
+ve.ce.MWResizableNode = function VeCeMwResizableNode( $resizable ) {
+	ve.ce.ResizableNode.call( this, $resizable );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ce.MWResizableNode, ve.ce.ResizableNode );
+
+/**
+ * Generate an object of attributes changes from the new width and height.
+ *
+ * If either property changes, clear the defaultSize flag.
+ *
+ * @param {number} width New image width
+ * @param {number} height New image height
+ * @returns {Object} Attribute changes
+ */
+ve.ce.MWResizableNode.prototype.getAttributeChanges = function ( width, height ) {
+	var attrChanges = ve.ce.ResizableNode.prototype.getAttributeChanges.call( this, width, height );
+	if ( !ve.isEmptyObject( attrChanges ) ) {
+		attrChanges.defaultSize = false;
+	}
+	return attrChanges;
+};

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

@@ -1,5 +1,5 @@
 /*!
- * VisualEditor DataModel MWEntityNode class.
+ * VisualEditor DataModel MWInlineImage class.
  *
  * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
  * @license The MIT License (MIT); see LICENSE.txt

modules/ve-mw/test/index.php

@@ -180,6 +180,7 @@
 		<script src="../../ve/ce/nodes/ve.ce.TableRowNode.js"></script>
 		<script src="../../ve/ce/nodes/ve.ce.TableSectionNode.js"></script>
 		<script src="../../ve/ce/nodes/ve.ce.TextNode.js"></script>
+		<script src="../../ve-mw/ce/ve.ce.MWResizableNode.js"></script>
 		<script src="../../ve-mw/ce/nodes/ve.ce.MWEntityNode.js"></script>
 		<script src="../../ve-mw/ce/nodes/ve.ce.MWHeadingNode.js"></script>
 		<script src="../../ve-mw/ce/nodes/ve.ce.MWPreformattedNode.js"></script>

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

@@ -258,25 +258,20 @@ ve.ce.ResizableNode.prototype.onDocumentMouseMove = function ( e ) {
  * @method
  */
 ve.ce.ResizableNode.prototype.onDocumentMouseUp = function () {
-	var offset = this.model.getOffset(),
+	var attrChanges,
+		offset = this.model.getOffset(),
 		width = this.$resizeHandles.outerWidth(),
 		height = this.$resizeHandles.outerHeight(),
 		surfaceModel = this.getRoot().getSurface().getModel(),
 		documentModel = surfaceModel.getDocument(),
-		selection = surfaceModel.getSelection(),
-		attrChanges = {};
+		selection = surfaceModel.getSelection();
 
 	this.$resizeHandles.removeClass( 've-ui-resizableNode-handles-resizing' );
 	$( this.getElementDocument() ).off( '.ve-ce-resizableNode' );
 	this.resizing = false;
 
 	// Apply changes to the model
-	if ( this.model.getAttribute( 'width' ) !== width ) {
-		attrChanges.width = width;
-	}
-	if ( this.model.getAttribute( 'height' ) !== height ) {
-		attrChanges.height = height;
-	}
+	attrChanges = this.getAttributeChanges( width, height );
 	if ( !ve.isEmptyObject( attrChanges ) ) {
 		surfaceModel.change(
 			ve.dm.Transaction.newFromAttributeChanges( documentModel, offset, attrChanges ),
@@ -286,3 +281,21 @@ ve.ce.ResizableNode.prototype.onDocumentMouseUp = function () {
 
 	this.emit( 'resize' );
 };
+
+/**
+ * Generate an object of attributes changes from the new width and height.
+ *
+ * @param {number} width New image width
+ * @param {number} height New image height
+ * @returns {Object} Attribute changes
+ */
+ve.ce.ResizableNode.prototype.getAttributeChanges = function ( width, height ) {
+	var attrChanges = {};
+	if ( this.model.getAttribute( 'width' ) !== width ) {
+		attrChanges.width = width;
+	}
+	if ( this.model.getAttribute( 'height' ) !== height ) {
+		attrChanges.height = height;
+	}
+	return attrChanges;
+};