Pre-release v2.0.0-beta.1

Add events and methods

Author: Xie, Ziyu

README.md

@@ -21,6 +21,10 @@ angular2-draggable has angular (ver >= 4.x) directives that make the DOM element
 + `ngResizable`
 
 # Latest Update
++ 2018.06.26: 2.0.0-beta.1
+  + ngResizable: Provide `(rzStart)`, `(rzResizing)`, `(rzStop)` event emitters
+  + ngResizable: Provide `resetSize()`, `getStatus()` methods
+
 + 2018.06.25: 2.0.0-beta.0
   + New: `ngResizable` directive which you can use to make the element resizable! More resizable options are planning. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/default)
 
@@ -130,28 +134,25 @@ Well you can use both directives concurrently if you wish:
 
 ## Directive:
 + `ngDraggable` directive support following input porperties:
-    + `ngDraggable`: boolean. You can toggle the draggable capability by setting `true`/`false` to `ngDraggable`
-
-    + `handle`: HTMLElement. Use template variable to refer to the handle element. Then only the handle element is draggable.
-
-    + `zIndex`: string. Use it to set z-index property when element is not moving.
-
-    + `zIndexMoving`: string. Use it to set z-index property when element is moving.
-
-    + `bounds`: HTMLElemnt. Use it to set the boundary.
-
-    + `inBounds`: boolean, default is `false`. Use it make element stay in the bounds.
 
-    + `outOfBounds`: { top: boolean; bottom: boolean; right: boolean; left: boolean }, default are `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`: IPosition: `{ x: number, y: number }`, default is `{ x:0, y:0 }`. Use it to set initial position offset.
-
-    + `gridSize`: number, default is `1`. Use it for snapping to grid. Refer to [demo](https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid).
+    | Input | Type | Default | Description |
+    | ----- | ---- | ------- | ----------- |
+    | `ngDraggable` | boolean | `true` | You can toggle the draggable capability by setting `true` or `false` |
+    | `handle` | HTMLElement | null | Use template variable to refer to the handle element. Then only the handle element is draggable |
+    | `zIndex` | string | null | Use it to set z-index property when element is not moving |
+    | `zIndexMoving` | string | null | Use it to set z-index property when element is moving |
+    | `bounds` | HTMLElemnt | null | Use it to set the boundary |
+    | `inBounds` | boolean | `false` | Use it make element stay in the bounds |
+    | `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) |
 
 + `ngResizable` directive support following input porperties:
-    + `ngResizable`: boolean. You can disable the resizable capability by setting it to `false`.
 
-    + `rzHandles`: Default is `"e,s,se"`. Which handles can be used for resizing. Optional types: `"n,e,s,w,se,sw,ne,nw"`.
+    | Input | Type | Default | Description |
+    | ----- | ---- | ------- | ----------- |
+    | `ngResizable` | boolean | `true` | You can toggle the resizable capability by setting `true` or `false` |
+    | `rzHandles` | string | `"e,s,se"` | Which handles can be used for resizing. Optional types in `"n,e,s,w,se,sw,ne,nw"` or `"all"` |
 
 ## CSS:
 + When `ngDraggable` is enabled on some element, `ng-draggable` class is automatically assigned to it. You can use it to customize the pointer style. For example:
@@ -166,24 +167,58 @@ Well you can use both directives concurrently if you wish:
 
 # Events
 + `ngDraggable` directive:
-    1. Support `started` and `stopped` events. The `nativeElement` of the host would be emitted.
-    2. Support `edge` events only when `[bounds]` is set. It would emit the result of the boundary check.
-    3. `(movingOffset)` event emitter: emit position offset when moving
-    4. `(endOffset)` event emitter: emit position offset when stop moving
 
-    + Simple example:
-      + html:
-      ```html
-      <div ngDraggable
-        (started)="onDragBegin($event)"
-        (stopped)="onDragEnd($event)"
-        (movingOffset)="onMoving($event)"
-        (endOffset)="onMoveEnd($event)">
-        Drag me!
-      </div>
-      ```
+    | Output | $event | Description |
+    | ------ | ------ | ----------- |
+    | `started` | `nativeElement` of host | emitted when start dragging |
+    | `stopped` | `nativeElement` of host | emitted when stop dragging |
+    | `edge` | { top: boolean, right: boolean, bottom: boolean, left: boolean } | emitted after `[bounds]` is set |
+    | `movingOffset` | { x: number, y: number } | emit position offset when moving |
+    | `endOffset` | { x: number, y: number } | emit position offset when stop moving |
+
+    Simple example:
+    ```html
+    <div ngDraggable
+      (started)="onDragBegin($event)"
+      (stopped)="onDragEnd($event)"
+      (movingOffset)="onMoving($event)"
+      (endOffset)="onMoveEnd($event)">
+      Drag me!
+    </div>
+    ```
+
++ `ngResizable` directive:
+
+    | Output | $event | description |
+    | ------ | ------ | ----------- |
+    | `rzStart` | `IResizeEvent` | emitted when start resizing |
+    | `rzResizing` | `IResizeEvent` | emitted when stop resizing |
+    | `rzStop` | `IResizeEvent` | emitted when resizing |
 
-+ `ngResizable` directive: on-going
+    ```typescript
+    export interface IResizeEvent {
+      host: any;
+      handle: any;
+      size: {
+        width: number;
+        height: number;
+      };
+      position: {
+        top: number;
+        left: number;
+      };
+    }
+    ```
+
+    Simple example:
+    ```html
+    <div ngResizable
+      (rzStart)="onResizeStart($event)"
+      (rzResizing)="onResizing($event)"
+      (rzStop)="onResizeStop($event)">
+      Resizable
+    </div>
+    ```
 
 # Demo
 You can clone this repo to your working copy and then launch the demo page in your local machine:

angular.json

@@ -10,7 +10,11 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "styleext": "scss",
+          "spec": false
+        },
+        "@schematics/angular:service": {
+          "spec": false
         }
       },
       "architect": {

projects/angular2-draggable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-draggable",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0"

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

@@ -2,27 +2,38 @@ import {
   Directive, ElementRef, Renderer2,
   Input, Output, OnInit, HostListener,
   EventEmitter, OnChanges, SimpleChanges,
-  OnDestroy
+  OnDestroy, AfterViewInit
 } from '@angular/core';
 
 import { ResizeHandle } from './widgets/resize-handle';
 import { ResizeHandleType } from './models/resize-handle-type';
 import { Position } from './models/position';
 import { Size } from './models/size';
+import { IResizeEvent } from './models/resize-event';
 
 @Directive({
   selector: '[ngResizable]',
   exportAs: 'ngResizable'
 })
-export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
+export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy, AfterViewInit {
   private _resizable = true;
   private _handles: { [key: string]: ResizeHandle } = {};
   private _handleType: string[] = [];
   private _handleResizing: ResizeHandle = null;
   private _origMousePos: Position = null;
+
+  /** Original Size and Position */
   private _origSize: Size = null;
   private _origPos: Position = null;
 
+  /** Current Size and Position */
+  private _currSize: Size = null;
+  private _currPos: Position = null;
+
+  /** Initial Size and Position */
+  private _initSize: Size = null;
+  private _initPos: Position = null;
+
   /** Disables the resizable if set to false. */
   @Input() set ngResizable(v: any) {
     if (v !== undefined && v !== null && v !== '') {
@@ -35,11 +46,20 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
    * Which handles can be used for resizing.
    * @example
    * [rzHandles] = "'n,e,s,w,se,ne,sw,nw'"
-   * [rzHandles] = { n: 'ng-resizable-n', e: 'ng-resizable-e' }
+   * equals to: [rzHandles] = "'all'"
    *
    * */
   @Input() rzHandles: ResizeHandleType = 'e,s,se';
 
+  /** emitted when start resizing */
+  @Output() rzStart = new EventEmitter<IResizeEvent>();
+
+  /** emitted when start resizing */
+  @Output() rzResizing = new EventEmitter<IResizeEvent>();
+
+  /** emitted when stop resizing */
+  @Output() rzStop = new EventEmitter<IResizeEvent>();
+
   constructor(private el: ElementRef, private renderer: Renderer2) { }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -56,6 +76,39 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
     this.removeHandles();
   }
 
+  ngAfterViewInit() {
+    const elm = this.el.nativeElement;
+    this._initSize = Size.getCurrent(elm);
+    this._initPos = Position.getCurrent(elm);
+    this._currSize = Size.copy(this._initSize);
+    this._currPos = Position.copy(this._initPos);
+  }
+
+  /** A method to reset size */
+  public resetSize() {
+    this._currSize = Size.copy(this._initSize);
+    this._currPos = Position.copy(this._initPos);
+    this.doResize();
+  }
+
+  /** A method to reset size */
+  public getStatus() {
+    if (!this._currPos || !this._currSize) {
+      return null;
+    }
+
+    return {
+      size: {
+        width: this._currSize.width,
+        height: this._currSize.height
+      },
+      position: {
+        top: this._currPos.y,
+        left: this._currPos.x
+      }
+    };
+  }
+
   private updateResizable() {
     const element = this.el.nativeElement;
 
@@ -78,7 +131,12 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
 
     let tmpHandleTypes: string[];
     if (typeof this.rzHandles === 'string') {
-      tmpHandleTypes = this.rzHandles.replace(/ /g, '').toLowerCase().split(',');
+      if (this.rzHandles === 'all') {
+        tmpHandleTypes = ['n', 'e', 's', 'w', 'ne', 'se', 'nw', 'sw'];
+      } else {
+        tmpHandleTypes = this.rzHandles.replace(/ /g, '').toLowerCase().split(',');
+      }
+
       for (let type of tmpHandleTypes) {
         // default handle theme: ng-resizable-$type.
         let handle = this.createHandleByType(type, `ng-resizable-${type}`);
@@ -137,6 +195,8 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
       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);
       this.startResize(handle);
     }
   }
@@ -159,37 +219,68 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy {
   onMouseMove(event: MouseEvent | TouchEvent) {
     if (this._handleResizing && this._resizable && this._origMousePos && this._origPos && this._origSize) {
       this.resizeTo(Position.fromEvent(event));
+      this.onResizing();
     }
   }
 
-  startResize(handle: ResizeHandle) {
+  private startResize(handle: ResizeHandle) {
     this._handleResizing = handle;
+    this.rzStart.emit(this.getResizingEvent());
   }
 
-  stopResize() {
+  private stopResize() {
+    this.rzStop.emit(this.getResizingEvent());
     this._handleResizing = null;
   }
 
-  resizeTo(p: Position) {
-    const container = this.el.nativeElement;
+  private onResizing() {
+    this.rzResizing.emit(this.getResizingEvent());
+  }
+
+  private getResizingEvent(): IResizeEvent {
+    return {
+      host: this.el.nativeElement,
+      handle: this._handleResizing ? this._handleResizing.el : null,
+      size: {
+        width: this._currSize.width,
+        height: this._currSize.height
+      },
+      position: {
+        top: this._currPos.y,
+        left: this._currPos.x
+      }
+    };
+  }
+
+  private resizeTo(p: Position) {
     p.subtract(this._origMousePos);
 
     if (this._handleResizing.type.match(/n/)) {
       // n, ne, nw
-      this.renderer.setStyle(container, 'height', (this._origSize.height - p.y) + 'px');
-      this.renderer.setStyle(container, 'top', (this._origPos.y + p.y) + 'px');
+      this._currSize.height = this._origSize.height - p.y;
+      this._currPos.y = this._origPos.y + p.y;
     } else if (this._handleResizing.type.match(/s/)) {
       // s, se, sw
-      this.renderer.setStyle(container, 'height', (this._origSize.height + p.y) + 'px');
+      this._currSize.height = this._origSize.height + p.y;
     }
 
     if (this._handleResizing.type.match(/e/)) {
       // e, ne, se
-      this.renderer.setStyle(container, 'width', (this._origSize.width + p.x) + 'px');
+      this._currSize.width = this._origSize.width + p.x;
     } else if (this._handleResizing.type.match(/w/)) {
       // w, nw, sw
-      this.renderer.setStyle(container, 'width', (this._origSize.width - p.x) + 'px');
-      this.renderer.setStyle(container, 'left', (this._origPos.x + p.x) + 'px');
+      this._currSize.width = this._origSize.width - p.x;
+      this._currPos.x = this._origPos.x + p.x;
     }
+
+    this.doResize();
+  }
+
+  private doResize() {
+    const container = this.el.nativeElement;
+    this.renderer.setStyle(container, 'height', this._currSize.height + 'px');
+    this.renderer.setStyle(container, 'width', this._currSize.width + 'px');
+    this.renderer.setStyle(container, 'left', this._currPos.x + 'px');
+    this.renderer.setStyle(container, 'top', this._currPos.y + 'px');
   }
 }

projects/angular2-draggable/src/lib/models/position.ts

@@ -34,6 +34,10 @@ export class Position implements IPosition {
     }
   }
 
+  static copy(p: Position) {
+    return new Position(0, 0).set(p);
+  }
+
   add(p: IPosition) {
     this.x += p.x;
     this.y += p.y;

projects/angular2-draggable/src/lib/models/resize-event.ts

@@ -0,0 +1,11 @@
+import { ISize } from './size';
+
+export interface IResizeEvent {
+  host: any;
+  handle: any;
+  size: ISize;
+  position: {
+    top: number;
+    left: number;
+  };
+}

projects/angular2-draggable/src/lib/models/size.ts

@@ -21,4 +21,14 @@ export class Size implements ISize {
       return null;
     }
   }
+
+  static copy(s: Size) {
+    return new Size(0, 0).set(s);
+  }
+
+  set(s: ISize) {
+    this.width = s.width;
+    this.height = s.height;
+    return this;
+  }
 }