fix(resizeable): dont allow events to be resized to 0 height or width

Closes #287
mattlewis92 · Feb 16, 2016 · df410ae · df410ae
1 parent 583958f
commit df410ae
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/directives/mwlResizable.js b/src/directives/mwlResizable.js
@@ -64,7 +64,7 @@ angular
       },
       onmove: function(event) {
 
-        if (canResize()) {
+        if (canResize() && event.rect.width > 0 && event.rect.height > 0) {
           var elm = angular.element(event.target);
           var x = parseFloat(elm.data('x') || 0);
           var y = parseFloat(elm.data('y') || 0);

diff --git a/test/unit/directives/mwlResizable.spec.js b/test/unit/directives/mwlResizable.spec.js
@@ -105,11 +105,57 @@ describe('mwlresizable directive', function() {
     expect(scope.onResize).to.have.been.calledWith(0, 2);
   });
 
+  it('should not resize the element to height 0', function() {
+
+    var event = {
+      target: angular.element('<div></div>')[0],
+      rect: {
+        width: 100,
+        height: 0
+      },
+      deltaRect: {
+        left: 0,
+        top: -30
+      }
+    };
+    resizableOptions.onmove(event);
+    expect(angular.element(event.target).data('x')).to.be.undefined;
+    expect(angular.element(event.target).data('y')).to.be.undefined;
+    expect(angular.element(event.target).css('height')).to.equal('');
+    expect(angular.element(event.target).css('width')).to.equal('');
+    expect(angular.element(event.target).css('transform')).to.be.undefined;
+    expect(scope.onResize).not.to.have.been.called;
+
+  });
+
+  it('should not resize the element to width 0', function() {
+
+    var event = {
+      target: angular.element('<div></div>')[0],
+      rect: {
+        width: 0,
+        height: 100
+      },
+      deltaRect: {
+        left: 0,
+        top: -30
+      }
+    };
+    resizableOptions.onmove(event);
+    expect(angular.element(event.target).data('x')).to.be.undefined;
+    expect(angular.element(event.target).data('y')).to.be.undefined;
+    expect(angular.element(event.target).css('height')).to.equal('');
+    expect(angular.element(event.target).css('width')).to.equal('');
+    expect(angular.element(event.target).css('transform')).to.be.undefined;
+    expect(scope.onResize).not.to.have.been.called;
+
+  });
+
   it('should handle on resize end', function() {
     var event = {
       target: angular.element('<div style="width: 30px; height: 30px;"></div>')[0],
       rect: {
-        width: 0,
+        width: 1,
         height: 120
       },
       deltaRect: {
@@ -122,7 +168,7 @@ describe('mwlresizable directive', function() {
     resizableOptions.onmove(event);
     resizableOptions.onend(event);
     $timeout.flush();
-    expect(scope.onResizeEnd).to.have.been.calledWith(0, 4);
+    expect(scope.onResizeEnd).to.have.been.calledWith(1, 4);
     expect(angular.element(event.target).css('transform')).to.eql('');
     expect(angular.element(event.target).css('width')).to.eql('30px');
     expect(angular.element(event.target).css('height')).to.eql('30px');