Release v2.1.3

Bugfix: issue #100

Author: Xie, Ziyu

README.md

@@ -27,6 +27,9 @@ angular2-draggable has angular directives that make the DOM element draggable an
     + provided since v2.0, requires Angular >= 6
 
 # Latest Update
++ 2018.09.14: 2.1.3
+  + **ngResizable**: fix [issue #100](https://github.com/xieziyu/angular2-draggable/issues/100): Resize bounds on a draggable element inside a containment is off
+
 + 2018.08.20: 2.1.2
   + **ngDraggable**: fix [issue #97](https://github.com/xieziyu/angular2-draggable/issues/97): Item is produced with div partially out of bounds.
 
@@ -134,6 +137,7 @@ Well you can use both directives concurrently if you wish:
     | outOfBounds | `{ top: boolean; bottom: boolean; right: boolean; left: boolean }` | `false` | Set it to allow element get out of bounds from the direction. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/usage/boundary) |
     | position | `{ x: number, y: number }` | `{ x:0, y:0 }` | Use it to set position offset |
     | gridSize | number | 1 | Use it for snapping to grid. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid) |
+    | preventDefaultEvent | boolean | `false` | Whether to prevent default mouse event |
 
 + `ngResizable` directive support following input porperties:
 

projects/angular2-draggable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-draggable",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "author": "Xie, Ziyu",
   "license": "MIT",
   "keywords": [

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

@@ -423,17 +423,17 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
 
   private checkBounds() {
     if (this._containment) {
-      const maxWidth = this._bounding.width - this._bounding.pr - this.el.nativeElement.offsetLeft;
-      const maxHeight = this._bounding.height - this._bounding.pb - this.el.nativeElement.offsetTop;
+      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;
 
-      if (this._direction.n && this._currPos.y < 0) {
-        this._currPos.y = 0;
-        this._currSize.height = this._origSize.height + this._origPos.y;
+      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;
       }
 
-      if (this._direction.w && this._currPos.x < 0) {
-        this._currPos.x = 0;
-        this._currSize.width = this._origSize.width + this._origPos.x;
+      if (this._direction.w && (this._currPos.x + this._bounding.translateX) < 0) {
+        this._currPos.x = -this._bounding.translateX;
+        this._currSize.width = this._origSize.width + this._origPos.x + this._bounding.translateX;
       }
 
       if (this._currSize.width > maxWidth) {
@@ -489,11 +489,23 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
     if (computed) {
       let p = computed.getPropertyValue('position');
 
+      const nativeEl = window.getComputedStyle(this.el.nativeElement);
+      let transforms = nativeEl.getPropertyValue('transform').replace(/[^-\d,]/g, '').split(',');
+
       this._bounding = {};
       this._bounding.width = el.clientWidth;
       this._bounding.height = el.clientHeight;
       this._bounding.pr = parseInt(computed.getPropertyValue('padding-right'), 10);
       this._bounding.pb = parseInt(computed.getPropertyValue('padding-bottom'), 10);
+
+      if (transforms.length >= 6) {
+        this._bounding.translateX = parseInt(transforms[4], 10);
+        this._bounding.translateY = parseInt(transforms[5], 10);
+      } else {
+        this._bounding.translateX = 0;
+        this._bounding.translateY = 0;
+      }
+
       this._bounding.position = computed.getPropertyValue('position');
 
       if (p === 'static') {

projects/angular2-draggable/src/scss/resizable.scss

@@ -77,6 +77,7 @@
 }
 
 .ng-resizable-diagonal {
+  box-sizing: border-box;
   width: 0;
   height: 0;
   border-bottom: $handle-corner-size solid #aaa;

src/assets/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.1.3 (2018-09-14)
+
+#### Bugfix
++ **ngResizable**: Resize bounds on a draggable element inside a containment is off. [#100](https://github.com/xieziyu/angular2-draggable/issues/100)
+
+---
+
 ## 2.1.2 (2018-08-20)
 
 #### Bugfix