fix(textAngular.resize): Fixes resize overlay with more than one image

Fixes #470

Author: SimeonC

lib/main.js

@@ -91,7 +91,7 @@ textAngular.directive("textAngular", [
 				var _keydown, _keyup, _keypress, _mouseup, _focusin, _focusout,
 					_originalContents, _toolbars,
 					_serial = (attrs.serial) ? attrs.serial : Math.floor(Math.random() * 10000000000000000),
-					_taExecCommand;
+					_taExecCommand, _resizeMouseDown;
 
 				scope._name = (attrs.name) ? attrs.name : 'textAngularEditor' + _serial;
 
@@ -232,7 +232,8 @@ textAngular.directive("textAngular", [
 				};
 				/* istanbul ignore next: pretty sure phantomjs won't test this */
 				scope.showResizeOverlay = function(_el){
-					var resizeMouseDown = function(event){
+					var _body = $document.find('body');
+					_resizeMouseDown = function(event){
 						var startPosition = {
 							width: parseInt(_el.attr('width')),
 							height: parseInt(_el.attr('height')),
@@ -257,30 +258,33 @@ textAngular.directive("textAngular", [
 								pos.y = ratio > newRatio ? pos.x * ratio : pos.y;
 							}
 							el = angular.element(_el);
+							console.log('element', pos, _el);
 							el.attr('height', Math.max(0, pos.y));
 							el.attr('width', Math.max(0, pos.x));
 
 							// reflow the popover tooltip
 							scope.reflowResizeOverlay(_el);
 						};
-						$document.find('body').on('mousemove', mousemove);
-						oneEvent($document.find('body'), 'mouseup', function(event){
+						_body.on('mousemove', mousemove);
+						oneEvent(_body, 'mouseup', function(event){
 							event.preventDefault();
 							event.stopPropagation();
-							$document.find('body').off('mousemove', mousemove);
+							console.log('Trigger Removal');
+							_body.off('mousemove', mousemove);
 							scope.showPopover(_el);
 						});
 						event.stopPropagation();
 						event.preventDefault();
 					};
 
-					scope.displayElements.resize.anchors[3].on('mousedown', resizeMouseDown);
+					scope.displayElements.resize.anchors[3].on('mousedown', _resizeMouseDown);
 
 					scope.reflowResizeOverlay(_el);
-					oneEvent($document.find('body'), 'click', function(){scope.hideResizeOverlay();});
+					oneEvent(_body, 'click', function(){scope.hideResizeOverlay();});
 				};
 				/* istanbul ignore next: pretty sure phantomjs won't test this */
 				scope.hideResizeOverlay = function(){
+					scope.displayElements.resize.anchors[3].off('mousedown', _resizeMouseDown);
 					scope.displayElements.resize.overlay.css('display', '');
 				};