Skip to content

Commit 50fe3a4

Browse files
author
Xie, Ziyu
committed
Release v2.1.1
Bugfix: issue 94
1 parent 946061f commit 50fe3a4

File tree

4 files changed

+77
-67
lines changed

4 files changed

+77
-67
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ angular2-draggable has angular directives that make the DOM element draggable an
2525
+ provided since v2.0, requires Angular >= 6
2626

2727
# Latest Update
28-
+ 2018.08.14: 2.1.0
28+
+ 2018.08.14: 2.1.1
2929
+ ngResizable: Provide `[rzGrid]`. Snaps the resizing element to a grid.
3030
+ ngResizable: Provide `[rzMinWidth]`, `[rzMaxWidth]`, `[rzMinHeight]`, `[rzMaxHeight]`. The minimum/maximum width/height the resizable should be allowed to resize to.
31+
+ 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)
3132

3233
+ 2018.08.08: 2.0.1
3334
+ Bugfix: click events are blocked. [#87](https://github.com/xieziyu/angular2-draggable/issues/87), [#84](https://github.com/xieziyu/angular2-draggable/issues/84)

‎projects/angular2-draggable/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular2-draggable",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"license": "MIT",
55
"peerDependencies": {
66
"@angular/common": "^6.0.0-rc.0 || >=6.0.0",

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

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
2121
private _handles: { [key: string]: ResizeHandle } = {};
2222
private _handleType: string[] = [];
2323
private _handleResizing: ResizeHandle = null;
24+
private _direction: { 'n': boolean, 's': boolean, 'w': boolean, 'e': boolean } = null;
2425
private _aspectRatio = 0;
2526
private _containment: HTMLElement = null;
2627
private _origMousePos: Position = null;
@@ -288,16 +289,7 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
288289
event.preventDefault();
289290

290291
if (!this._handleResizing) {
291-
const elm = this.el.nativeElement;
292292
this._origMousePos = Position.fromEvent(event);
293-
this._origSize = Size.getCurrent(elm);
294-
this._origPos = Position.getCurrent(elm); // x: left, y: top
295-
this._currSize = Size.copy(this._origSize);
296-
this._currPos = Position.copy(this._origPos);
297-
if (this._containment) {
298-
this.getBounding();
299-
}
300-
this.getGridSize();
301293
this.startResize(handle);
302294
}
303295
}
@@ -310,11 +302,6 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
310302
if (this._handleResizing) {
311303
this.stopResize();
312304
this._origMousePos = null;
313-
this._origSize = null;
314-
this._origPos = null;
315-
if (this._containment) {
316-
this.resetBounding();
317-
}
318305
}
319306
}
320307

@@ -328,9 +315,20 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
328315
}
329316

330317
private startResize(handle: ResizeHandle) {
318+
const elm = this.el.nativeElement;
319+
this._origSize = Size.getCurrent(elm);
320+
this._origPos = Position.getCurrent(elm); // x: left, y: top
321+
this._currSize = Size.copy(this._origSize);
322+
this._currPos = Position.copy(this._origPos);
323+
if (this._containment) {
324+
this.getBounding();
325+
}
326+
this.getGridSize();
327+
331328
// Add a transparent helper div:
332329
this._helperBlock.add();
333330
this._handleResizing = handle;
331+
this.updateDirection();
334332
this.rzStart.emit(this.getResizingEvent());
335333
}
336334

@@ -339,6 +337,12 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
339337
this._helperBlock.remove();
340338
this.rzStop.emit(this.getResizingEvent());
341339
this._handleResizing = null;
340+
this._direction = null;
341+
this._origSize = null;
342+
this._origPos = null;
343+
if (this._containment) {
344+
this.resetBounding();
345+
}
342346
}
343347

344348
private onResizing() {
@@ -360,70 +364,42 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
360364
};
361365
}
362366

367+
private updateDirection() {
368+
this._direction = {
369+
n: !!this._handleResizing.type.match(/n/),
370+
s: !!this._handleResizing.type.match(/s/),
371+
w: !!this._handleResizing.type.match(/w/),
372+
e: !!this._handleResizing.type.match(/e/)
373+
};
374+
}
375+
363376
private resizeTo(p: Position) {
364377
p.subtract(this._origMousePos);
365378

366379
const tmpX = Math.round(p.x / this._gridSize.x) * this._gridSize.x;
367380
const tmpY = Math.round(p.y / this._gridSize.y) * this._gridSize.y;
368381

369-
if (this._handleResizing.type.match(/n/)) {
382+
if (this._direction.n) {
370383
// n, ne, nw
371384
this._currPos.y = this._origPos.y + tmpY;
372385
this._currSize.height = this._origSize.height - tmpY;
373-
374-
// check bounds
375-
if (this._containment) {
376-
if (this._currPos.y < 0) {
377-
this._currPos.y = 0;
378-
this._currSize.height = this._origSize.height + this._origPos.y;
379-
}
380-
}
381-
382-
if (this._currSize.height < 1) {
383-
this._currSize.height = 1;
384-
this._currPos.y = this._origPos.y + (this._origSize.height - 1);
385-
}
386-
387-
// aspect ratio
388-
this.adjustByRatio('h');
389-
} else if (this._handleResizing.type.match(/s/)) {
386+
} else if (this._direction.s) {
390387
// s, se, sw
391388
this._currSize.height = this._origSize.height + tmpY;
392-
393-
// aspect ratio
394-
this.adjustByRatio('h');
395389
}
396390

397-
if (this._handleResizing.type.match(/e/)) {
391+
if (this._direction.e) {
398392
// e, ne, se
399393
this._currSize.width = this._origSize.width + tmpX;
400-
401-
// aspect ratio
402-
this.adjustByRatio('w');
403-
} else if (this._handleResizing.type.match(/w/)) {
394+
} else if (this._direction.w) {
404395
// w, nw, sw
405396
this._currSize.width = this._origSize.width - tmpX;
406397
this._currPos.x = this._origPos.x + tmpX;
407-
408-
// check bounds
409-
if (this._containment) {
410-
if (this._currPos.x < 0) {
411-
this._currPos.x = 0;
412-
this._currSize.width = this._origSize.width + this._origPos.x;
413-
}
414-
}
415-
416-
if (this._currSize.width < 1) {
417-
this._currSize.width = 1;
418-
this._currPos.x = this._origPos.x + (this._origSize.width - 1);
419-
}
420-
421-
// aspect ratio
422-
this.adjustByRatio('w');
423398
}
424399

425400
this.checkBounds();
426401
this.checkSize();
402+
this.adjustByRatio();
427403
this.doResize();
428404
}
429405

@@ -435,9 +411,9 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
435411
this.renderer.setStyle(container, 'top', this._currPos.y + 'px');
436412
}
437413

438-
private adjustByRatio(d: string) {
414+
private adjustByRatio() {
439415
if (this._aspectRatio) {
440-
if (d === 'w') {
416+
if (this._direction.e || this._direction.w) {
441417
this._currSize.height = this._currSize.width / this._aspectRatio;
442418
} else {
443419
this._currSize.width = this._aspectRatio * this._currSize.height;
@@ -450,6 +426,16 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
450426
const maxWidth = this._bounding.width - this._bounding.pr - this.el.nativeElement.offsetLeft;
451427
const maxHeight = this._bounding.height - this._bounding.pb - this.el.nativeElement.offsetTop;
452428

429+
if (this._direction.n && this._currPos.y < 0) {
430+
this._currPos.y = 0;
431+
this._currSize.height = this._origSize.height + this._origPos.y;
432+
}
433+
434+
if (this._direction.w && this._currPos.x < 0) {
435+
this._currPos.x = 0;
436+
this._currSize.width = this._origSize.width + this._origPos.x;
437+
}
438+
453439
if (this._currSize.width > maxWidth) {
454440
this._currSize.width = maxWidth;
455441
}
@@ -461,20 +447,39 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
461447
}
462448

463449
private checkSize() {
464-
if (this.rzMaxWidth && this._currSize.width > this.rzMaxWidth) {
465-
this._currSize.width = this.rzMaxWidth;
450+
const minHeight = !this.rzMinHeight ? 1 : this.rzMinHeight;
451+
const minWidth = !this.rzMinWidth ? 1 : this.rzMinWidth;
452+
453+
if (this._currSize.height < minHeight) {
454+
this._currSize.height = minHeight;
455+
456+
if (this._direction.n) {
457+
this._currPos.y = this._origPos.y + (this._origSize.height - minHeight);
458+
}
466459
}
467460

468-
if (this.rzMinWidth && this._currSize.width < this.rzMinWidth) {
469-
this._currSize.width = this.rzMinWidth;
461+
if (this._currSize.width < minWidth) {
462+
this._currSize.width = minWidth;
463+
464+
if (this._direction.w) {
465+
this._currPos.x = this._origPos.x + (this._origSize.width - minWidth);
466+
}
470467
}
471468

472469
if (this.rzMaxHeight && this._currSize.height > this.rzMaxHeight) {
473470
this._currSize.height = this.rzMaxHeight;
471+
472+
if (this._direction.n) {
473+
this._currPos.y = this._origPos.y + (this._origSize.height - this.rzMaxHeight);
474+
}
474475
}
475476

476-
if (this.rzMinHeight && this._currSize.height < this.rzMinHeight) {
477-
this._currSize.height = this.rzMinHeight;
477+
if (this.rzMaxWidth && this._currSize.width > this.rzMaxWidth) {
478+
this._currSize.width = this.rzMaxWidth;
479+
480+
if (this._direction.w) {
481+
this._currPos.x = this._origPos.x + (this._origSize.width - this.rzMaxWidth);
482+
}
478483
}
479484
}
480485

‎src/assets/CHANGELOG.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
## 2.1.0 (2018-08-14)
1+
## 2.1.1 (2018-08-14)
22

33
#### New
44
+ ngResizable: Provide `[rzGrid]`. Snaps the resizing element to a grid.
55
+ ngResizable: Provide `[rzMinWidth]`, `[rzMaxWidth]`, `[rzMinHeight]`, `[rzMaxHeight]`. The minimum/maximum width/height the resizable should be allowed to resize to.
6+
7+
#### Bugfix
8+
+ 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)
9+
610
---
711

812
## 2.0.1 (2018-08-08)

0 commit comments

Comments
 (0)