Merge branch 't/11177d'

CHANGES.md

@@ -3,6 +3,10 @@ CKEditor 4 Changelog
 
 ## CKEditor 4.3.2
 
+* [#11177](http://dev.ckeditor.com/ticket/11177): Widget's drag handler improvements:
+  * fixed: initial position is not updated when widget's data object is empty ([#11161](http://dev.ckeditor.com/ticket/11161)),
+  * fixed: multiple synchronous layout recalculations are caused by initial drag handler positioning causing performance issues ([#11001](http://dev.ckeditor.com/ticket/11001)),
+  * fixed: drag handler is not repositioned in various situations ([#11161](http://dev.ckeditor.com/ticket/11161)).
 * [#11207](http://dev.ckeditor.com/ticket/11207): [Firefox] Fixed: Misplaced Image2 resizer in inline editor.
 * [#11102](http://dev.ckeditor.com/ticket/11102): `CKEDITOR.template` improvements:
   * added new line character support ([#11102](http://dev.ckeditor.com/ticket/11102)),

plugins/widget/plugin.js

@@ -44,6 +44,9 @@
 					'position:absolute;' +
 					'width:' + DRAG_HANDLER_SIZE + 'px;' +
 					'height:0;' +
+					// Initially drag handler should not be visible, until its position will be
+					// repositioned. #11177
+					'left:-9999px;' +
 					'opacity:0.75;' +
 					'transition:height 0s 0.2s;' + // Delay hiding drag handler.
 					// Prevent drag handler from being misplaced (#11198).
@@ -1130,6 +1133,31 @@
 			this.wrapper[ selected ? 'addClass' : 'removeClass' ]( 'cke_widget_selected' );
 			this.fire(  selected ? 'select' : 'deselect' );
 			return this;
+		},
+
+		/**
+		 * Repositions drag handler according to the widget's element position. Should be called from events, like mouseover.
+		 */
+		updateDragHandlerPosition: function() {
+			var editor = this.editor,
+				domElement = this.element.$,
+				oldPos = this._.dragHandlerOffset,
+				newPos = {
+					x: domElement.offsetLeft,
+					y: domElement.offsetTop - DRAG_HANDLER_SIZE
+				};
+
+			if ( oldPos && newPos.x == oldPos.x && newPos.y == oldPos.y )
+				return;
+
+			editor.fire( 'lockSnapshot' );
+			this.dragHandlerContainer.setStyles( {
+				top: newPos.y + 'px',
+				left: newPos.x + 'px'
+			} );
+			editor.fire( 'unlockSnapshot' );
+
+			this._.dragHandlerOffset = newPos;
 		}
 	};
 
@@ -2546,14 +2574,6 @@
 		}
 	}
 
-	// Position drag handler according to the widget's element position.
-	function positionDragHandler( widget ) {
-		var handler = widget.dragHandlerContainer;
-
-		handler.setStyle( 'top', widget.element.$.offsetTop - DRAG_HANDLER_SIZE + 'px' );
-		handler.setStyle( 'left', widget.element.$.offsetLeft + 'px' );
-	}
-
 	function setupDragHandler( widget ) {
 		if ( !widget.draggable )
 			return;
@@ -2588,6 +2608,11 @@
 			widget.wrapper.append( container );
 		}
 
+		widget.wrapper.on( 'mouseenter', widget.updateDragHandlerPosition, widget );
+		setTimeout( function() {
+			widget.on( 'data', widget.updateDragHandlerPosition, widget );
+		}, 50 );
+
 		if ( widget.inline ) {
 			img.on( 'dragstart', function( evt ) {
 				evt.data.$.dataTransfer.setData( 'text', JSON.stringify( { type: 'cke-widget', editor: editor.name, id: widget.id } ) );
@@ -2801,12 +2826,6 @@
 
 		if ( widgetDef.edit )
 			widget.on( 'edit', widgetDef.edit );
-
-		if ( widget.draggable ) {
-			widget.on( 'data', function() {
-				positionDragHandler( widget );
-			}, null, null, 999 );
-		}
 	}
 
 	function setupWidgetData( widget, startupData ) {