diff --git a/README.md b/README.md index 76327b8..9c1ee34 100644 --- a/README.md +++ b/README.md @@ -25,9 +25,10 @@ angular2-draggable has angular directives that make the DOM element draggable an + provided since v2.0, requires Angular >= 6 # Latest Update -+ 2018.08.14: 2.1.0 ++ 2018.08.14: 2.1.1 + ngResizable: Provide `[rzGrid]`. Snaps the resizing element to a grid. + ngResizable: Provide `[rzMinWidth]`, `[rzMaxWidth]`, `[rzMinHeight]`, `[rzMaxHeight]`. The minimum/maximum width/height the resizable should be allowed to resize to. + + Bugfix: resizing from w, nw or n with a min/max size moves the window if it goes below/above the min/max size. [#94](https://github.com/xieziyu/angular2-draggable/issues/94) + 2018.08.08: 2.0.1 + Bugfix: click events are blocked. [#87](https://github.com/xieziyu/angular2-draggable/issues/87), [#84](https://github.com/xieziyu/angular2-draggable/issues/84) diff --git a/projects/angular2-draggable/package.json b/projects/angular2-draggable/package.json index 76893f0..1718824 100644 --- a/projects/angular2-draggable/package.json +++ b/projects/angular2-draggable/package.json @@ -1,6 +1,6 @@ { "name": "angular2-draggable", - "version": "2.1.0", + "version": "2.1.1", "license": "MIT", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || >=6.0.0", diff --git a/projects/angular2-draggable/src/lib/angular-resizable.directive.ts b/projects/angular2-draggable/src/lib/angular-resizable.directive.ts index 7461e01..9ec4a38 100644 --- a/projects/angular2-draggable/src/lib/angular-resizable.directive.ts +++ b/projects/angular2-draggable/src/lib/angular-resizable.directive.ts @@ -21,6 +21,7 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, private _handles: { [key: string]: ResizeHandle } = {}; private _handleType: string[] = []; private _handleResizing: ResizeHandle = null; + private _direction: { 'n': boolean, 's': boolean, 'w': boolean, 'e': boolean } = null; private _aspectRatio = 0; private _containment: HTMLElement = null; private _origMousePos: Position = null; @@ -288,16 +289,7 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, event.preventDefault(); if (!this._handleResizing) { - const elm = this.el.nativeElement; this._origMousePos = Position.fromEvent(event); - this._origSize = Size.getCurrent(elm); - this._origPos = Position.getCurrent(elm); // x: left, y: top - this._currSize = Size.copy(this._origSize); - this._currPos = Position.copy(this._origPos); - if (this._containment) { - this.getBounding(); - } - this.getGridSize(); this.startResize(handle); } } @@ -310,11 +302,6 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, if (this._handleResizing) { this.stopResize(); this._origMousePos = null; - this._origSize = null; - this._origPos = null; - if (this._containment) { - this.resetBounding(); - } } } @@ -328,9 +315,20 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, } private startResize(handle: ResizeHandle) { + const elm = this.el.nativeElement; + this._origSize = Size.getCurrent(elm); + this._origPos = Position.getCurrent(elm); // x: left, y: top + this._currSize = Size.copy(this._origSize); + this._currPos = Position.copy(this._origPos); + if (this._containment) { + this.getBounding(); + } + this.getGridSize(); + // Add a transparent helper div: this._helperBlock.add(); this._handleResizing = handle; + this.updateDirection(); this.rzStart.emit(this.getResizingEvent()); } @@ -339,6 +337,12 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, this._helperBlock.remove(); this.rzStop.emit(this.getResizingEvent()); this._handleResizing = null; + this._direction = null; + this._origSize = null; + this._origPos = null; + if (this._containment) { + this.resetBounding(); + } } private onResizing() { @@ -360,70 +364,42 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, }; } + private updateDirection() { + this._direction = { + n: !!this._handleResizing.type.match(/n/), + s: !!this._handleResizing.type.match(/s/), + w: !!this._handleResizing.type.match(/w/), + e: !!this._handleResizing.type.match(/e/) + }; + } + private resizeTo(p: Position) { p.subtract(this._origMousePos); const tmpX = Math.round(p.x / this._gridSize.x) * this._gridSize.x; const tmpY = Math.round(p.y / this._gridSize.y) * this._gridSize.y; - if (this._handleResizing.type.match(/n/)) { + if (this._direction.n) { // n, ne, nw this._currPos.y = this._origPos.y + tmpY; this._currSize.height = this._origSize.height - tmpY; - - // check bounds - if (this._containment) { - if (this._currPos.y < 0) { - this._currPos.y = 0; - this._currSize.height = this._origSize.height + this._origPos.y; - } - } - - if (this._currSize.height < 1) { - this._currSize.height = 1; - this._currPos.y = this._origPos.y + (this._origSize.height - 1); - } - - // aspect ratio - this.adjustByRatio('h'); - } else if (this._handleResizing.type.match(/s/)) { + } else if (this._direction.s) { // s, se, sw this._currSize.height = this._origSize.height + tmpY; - - // aspect ratio - this.adjustByRatio('h'); } - if (this._handleResizing.type.match(/e/)) { + if (this._direction.e) { // e, ne, se this._currSize.width = this._origSize.width + tmpX; - - // aspect ratio - this.adjustByRatio('w'); - } else if (this._handleResizing.type.match(/w/)) { + } else if (this._direction.w) { // w, nw, sw this._currSize.width = this._origSize.width - tmpX; this._currPos.x = this._origPos.x + tmpX; - - // check bounds - if (this._containment) { - if (this._currPos.x < 0) { - this._currPos.x = 0; - this._currSize.width = this._origSize.width + this._origPos.x; - } - } - - if (this._currSize.width < 1) { - this._currSize.width = 1; - this._currPos.x = this._origPos.x + (this._origSize.width - 1); - } - - // aspect ratio - this.adjustByRatio('w'); } this.checkBounds(); this.checkSize(); + this.adjustByRatio(); this.doResize(); } @@ -435,9 +411,9 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, this.renderer.setStyle(container, 'top', this._currPos.y + 'px'); } - private adjustByRatio(d: string) { + private adjustByRatio() { if (this._aspectRatio) { - if (d === 'w') { + if (this._direction.e || this._direction.w) { this._currSize.height = this._currSize.width / this._aspectRatio; } else { this._currSize.width = this._aspectRatio * this._currSize.height; @@ -450,6 +426,16 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, const maxWidth = this._bounding.width - this._bounding.pr - this.el.nativeElement.offsetLeft; const maxHeight = this._bounding.height - this._bounding.pb - this.el.nativeElement.offsetTop; + if (this._direction.n && this._currPos.y < 0) { + this._currPos.y = 0; + this._currSize.height = this._origSize.height + this._origPos.y; + } + + if (this._direction.w && this._currPos.x < 0) { + this._currPos.x = 0; + this._currSize.width = this._origSize.width + this._origPos.x; + } + if (this._currSize.width > maxWidth) { this._currSize.width = maxWidth; } @@ -461,20 +447,39 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, } private checkSize() { - if (this.rzMaxWidth && this._currSize.width > this.rzMaxWidth) { - this._currSize.width = this.rzMaxWidth; + const minHeight = !this.rzMinHeight ? 1 : this.rzMinHeight; + const minWidth = !this.rzMinWidth ? 1 : this.rzMinWidth; + + if (this._currSize.height < minHeight) { + this._currSize.height = minHeight; + + if (this._direction.n) { + this._currPos.y = this._origPos.y + (this._origSize.height - minHeight); + } } - if (this.rzMinWidth && this._currSize.width < this.rzMinWidth) { - this._currSize.width = this.rzMinWidth; + if (this._currSize.width < minWidth) { + this._currSize.width = minWidth; + + if (this._direction.w) { + this._currPos.x = this._origPos.x + (this._origSize.width - minWidth); + } } if (this.rzMaxHeight && this._currSize.height > this.rzMaxHeight) { this._currSize.height = this.rzMaxHeight; + + if (this._direction.n) { + this._currPos.y = this._origPos.y + (this._origSize.height - this.rzMaxHeight); + } } - if (this.rzMinHeight && this._currSize.height < this.rzMinHeight) { - this._currSize.height = this.rzMinHeight; + if (this.rzMaxWidth && this._currSize.width > this.rzMaxWidth) { + this._currSize.width = this.rzMaxWidth; + + if (this._direction.w) { + this._currPos.x = this._origPos.x + (this._origSize.width - this.rzMaxWidth); + } } } diff --git a/src/assets/CHANGELOG.md b/src/assets/CHANGELOG.md index 4dd086b..7d4df43 100644 --- a/src/assets/CHANGELOG.md +++ b/src/assets/CHANGELOG.md @@ -1,8 +1,12 @@ -## 2.1.0 (2018-08-14) +## 2.1.1 (2018-08-14) #### New + ngResizable: Provide `[rzGrid]`. Snaps the resizing element to a grid. + ngResizable: Provide `[rzMinWidth]`, `[rzMaxWidth]`, `[rzMinHeight]`, `[rzMaxHeight]`. The minimum/maximum width/height the resizable should be allowed to resize to. + +#### Bugfix ++ ngResizable: resizing from w, nw or n with a min/max size moves the window if it goes below/above the min/max size. [#94](https://github.com/xieziyu/angular2-draggable/issues/94) + --- ## 2.0.1 (2018-08-08)