Fix issue #132

Author: Xie, Ziyu

README.md

@@ -28,9 +28,11 @@ angular2-draggable has angular directives that make the DOM element draggable an
 
 # Latest Update
 + 2018.12.22: 2.2.0
-  + **ngDraggable**: 
+  + **ngDraggable**:
     + Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
     + Fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
+  + **ngResizable**:
+    + Fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
 
 + 2018.11.29: 2.1.9
   + **ngDraggable**: fix [issue #31](https://github.com/xieziyu/angular2-draggable/issues/31): Problems when scale transform applied to parent. ([by rathodsanjay](https://github.com/rathodsanjay) - [PR #123](https://github.com/xieziyu/angular2-draggable/pull/123))

projects/angular2-draggable/src/lib/angular-resizable.directive.ts

@@ -447,8 +447,10 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
     if (this._containment) {
       const maxWidth = this._bounding.width - this._bounding.pr - this.el.nativeElement.offsetLeft - this._bounding.translateX;
       const maxHeight = this._bounding.height - this._bounding.pb - this.el.nativeElement.offsetTop - this._bounding.translateY;
+      const minHeight = !this.rzMinHeight ? 1 : this.rzMinHeight;
+      const minWidth = !this.rzMinWidth ? 1 : this.rzMinWidth;
 
-      if (this._direction.n && (this._currPos.y + this._bounding.translateY) < 0) {
+      if (this._direction.n && (this._currPos.y + this._bounding.translateY < 0)) {
         this._currPos.y = -this._bounding.translateY;
         this._currSize.height = this._origSize.height + this._origPos.y + this._bounding.translateY;
       }
@@ -465,6 +467,28 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
       if (this._currSize.height > maxHeight) {
         this._currSize.height = maxHeight;
       }
+
+      /**
+       * Fix Issue: Additional check for aspect ratio
+       * https://github.com/xieziyu/angular2-draggable/issues/132
+       */
+      if (this._aspectRatio) {
+        if ((this._currSize.width / this._aspectRatio) > maxHeight) {
+          this._currSize.width = maxHeight * this._aspectRatio;
+
+          if (this._direction.w) {
+            this._currPos.x = this._origPos.x;
+          }
+        }
+
+        if ((this._currSize.height * this._aspectRatio) > maxWidth) {
+          this._currSize.height = maxWidth / this._aspectRatio;
+
+          if (this._direction.n) {
+            this._currPos.y = this._origPos.y;
+          }
+        }
+      }
     }
   }
 

src/app/views/resizable-demo/resize-containment-demo/resize-containment-demo.component.html

@@ -3,7 +3,7 @@
     <div id="container" class="widget-container">
       <h4 class="widget-header">Containment</h4>
       <!-- rzContainment could be a CSS selector string, 'parent' or an Element object -->
-      <div ngResizable class="resizable-widget" rzContainment="#container" rzHandles="all">
+      <div ngResizable [rzAspectRatio]="true" class="resizable-widget" rzContainment="#container" rzHandles="all">
         <h4 class="widget-header">Resizable</h4>
       </div>
     </div>

src/assets/CHANGELOG.md

@@ -1,8 +1,11 @@
 ## 2.2.0 (2018-12-22)
 
 #### Bugfix
-+ **ngDraggable**: Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
-
++ **ngDraggable**:
+    + Performance update. Fix [issue #112](https://github.com/xieziyu/angular2-draggable/issues/112): Control change detection with HostListener events.
+    + Fix [issue #128](https://github.com/xieziyu/angular2-draggable/issues/128): Multiple phone draggables at the same time.
++ **ngResizable**:
+    + Fix [issue #132](https://github.com/xieziyu/angular2-draggable/issues/132): Aspect ratio feature exits Y-Axis boundary on resize.
 ---
 
 ## 2.1.9 (2018-11-29)