Support [rzGrid]

Author: Xie, Ziyu

README.md

@@ -167,8 +167,9 @@ Well you can use both directives concurrently if you wish:
     | ----- | ---- | ------- | ----------- |
     | 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"` |
-    | rzAspectRatio | boolean\|number | false | `boolean`: Whether the element should be constrained to a specific aspect ratio. `number`: Force the element to maintain a specific aspect ratio during resizing (width/height) |
-    | rzContainment | Selector\|string\|Element | null | Constrains resizing to within the bounds of the specified element or region. It accepts an HTMLElement, `'parent'` or a valid CSS selector string such as '#id' |
+    | rzAspectRatio | boolean \| number | `false` | `boolean`: Whether the element should be constrained to a specific aspect ratio. `number`: Force the element to maintain a specific aspect ratio during resizing (width/height) |
+    | rzContainment | Selector \| string \| Element | null | Constrains resizing to within the bounds of the specified element or region. It accepts an HTMLElement, `'parent'` or a valid CSS selector string such as '#id' |
+    | rzGrid | number \| number[] | 1 | Snaps the resizing element to a grid, every x and y pixels. Array values: `[x, y]`|
 
 ## 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:

projects/angular2-draggable/package.json

@@ -1,6 +1,7 @@
 {
   "name": "angular2-draggable",
-  "version": "2.0.1",
+  "version": "2.1.0",
+  "license": "MIT",
   "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

@@ -8,7 +8,7 @@ import {
 import { HelperBlock } from './widgets/helper-block';
 import { ResizeHandle } from './widgets/resize-handle';
 import { ResizeHandleType } from './models/resize-handle-type';
-import { Position } from './models/position';
+import { Position, IPosition } from './models/position';
 import { Size } from './models/size';
 import { IResizeEvent } from './models/resize-event';
 
@@ -37,6 +37,9 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   private _initSize: Size = null;
   private _initPos: Position = null;
 
+  /** Snap to gird */
+  private _gridSize: IPosition = null;
+
   private _bounding: any = null;
 
   /**
@@ -80,6 +83,12 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
    */
   @Input() rzContainment: string | HTMLElement = null;
 
+  /**
+   * Snaps the resizing element to a grid, every x and y pixels.
+   * A number for both width and height or an array values like [ x, y ]
+   */
+  @Input() rzGrid: number | number[] = null;
+
   /** emitted when start resizing */
   @Output() rzStart = new EventEmitter<IResizeEvent>();
 
@@ -276,6 +285,7 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
       if (this._containment) {
         this.getBounding();
       }
+      this.getGridSize();
       this.startResize(handle);
     }
   }
@@ -341,10 +351,13 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   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/)) {
       // n, ne, nw
-      this._currPos.y = this._origPos.y + p.y;
-      this._currSize.height = this._origSize.height - p.y;
+      this._currPos.y = this._origPos.y + tmpY;
+      this._currSize.height = this._origSize.height - tmpY;
 
       // check bounds
       if (this._containment) {
@@ -363,22 +376,22 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
       this.adjustByRatio('h');
     } else if (this._handleResizing.type.match(/s/)) {
       // s, se, sw
-      this._currSize.height = this._origSize.height + p.y;
+      this._currSize.height = this._origSize.height + tmpY;
 
       // aspect ratio
       this.adjustByRatio('h');
     }
 
     if (this._handleResizing.type.match(/e/)) {
       // e, ne, se
-      this._currSize.width = this._origSize.width + p.x;
+      this._currSize.width = this._origSize.width + tmpX;
 
       // aspect ratio
       this.adjustByRatio('w');
     } else if (this._handleResizing.type.match(/w/)) {
       // w, nw, sw
-      this._currSize.width = this._origSize.width - p.x;
-      this._currPos.x = this._origPos.x + p.x;
+      this._currSize.width = this._origSize.width - tmpX;
+      this._currPos.x = this._origPos.x + tmpX;
 
       // check bounds
       if (this._containment) {
@@ -421,7 +434,6 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
 
   private checkBounds() {
     if (this._containment) {
-      const container = 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;
 
@@ -460,4 +472,16 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
     }
     this._bounding = null;
   }
+
+  private getGridSize() {
+    if (this.rzGrid) {
+      if (typeof this.rzGrid === 'number') {
+        this._gridSize = { x: this.rzGrid, y: this.rzGrid };
+      } else if (Array.isArray(this.rzGrid)) {
+        this._gridSize = { x: this.rzGrid[0], y: this.rzGrid[1] };
+      } else {
+        this._gridSize = { x: 1, y: 1 };
+      }
+    }
+  }
 }

src/app/_nav.ts

@@ -38,16 +38,6 @@ export const navigation = [
         name: 'API',
         url: '/draggable/usage/api',
         icon: 'fa fa-code'
-      },
-      {
-        name: 'Swapping',
-        url: '/draggable/advance/swap',
-        icon: 'fa fa-refresh'
-      },
-      {
-        name: 'Snap To Grid',
-        url: '/draggable/advance/snap-grid',
-        icon: 'fa fa-th-large',
       }
     ]
   },
@@ -76,16 +66,31 @@ export const navigation = [
         url: '/resizable/containment',
         icon: 'fa fa-window-close'
       },
+      {
+        name: 'Snap To Grid',
+        url: '/resizable/grid',
+        icon: 'fa fa-th-large'
+      },
     ]
   },
   {
     name: 'Advanced Demo',
     icon: 'fa fa-bookmark',
-    url: '/draggable',
+    url: '/advance',
     children: [
+      {
+        name: 'Swapping',
+        url: '/advance/swap',
+        icon: 'fa fa-refresh'
+      },
+      {
+        name: 'Snap To Grid',
+        url: '/advance/snap-grid',
+        icon: 'fa fa-th-large',
+      },
       {
         name: 'iframe',
-        url: '/draggable/advance/iframe',
+        url: '/advance/iframe',
         icon: 'fa fa-window-maximize',
         badge: {
           variant: 'success',

src/app/app.routing.ts

@@ -39,18 +39,18 @@ export const routes: Routes = [
             path: 'usage',
             loadChildren: './views/usage/usage.module#UsageModule',
             data: { title: 'Usage' }
-          },
-          {
-            path: 'advance',
-            loadChildren: './views/adv-demo/adv-demo.module#AdvDemoModule',
-            data: { title: 'Advance' }
-          },
+          }
         ]
       },
       {
         path: 'resizable',
         loadChildren: './views/resizable-demo/resizable-demo.module#ResizableDemoModule',
         data: { title: 'Resizable' }
+      },
+      {
+        path: 'advance',
+        loadChildren: './views/adv-demo/adv-demo.module#AdvDemoModule',
+        data: { title: 'Advance' }
       }
     ]
   },

src/app/views/adv-demo/snap-grid-demo/snap-grid-demo.component.html

@@ -1,6 +1,6 @@
 <div class="card card-accent-info">
   <div class="card-body">
-    <h4 class="card-title">Snap to Grid</h4>
+    <h4 class="card-title">[Draggable] Snap to Grid</h4>
     <div class="mt-4">
       <tabset>
         <tab heading="demo">

src/app/views/resizable-demo/resizable-demo-routing.module.ts

@@ -4,7 +4,7 @@ import { ResizeDefaultDemoComponent } from './resize-default-demo/resize-default
 import { ResizeEventDemoComponent } from './resize-event-demo/resize-event-demo.component';
 import { ResizeAspectRatioDemoComponent } from './resize-aspect-ratio-demo/resize-aspect-ratio-demo.component';
 import { ResizeContainmentDemoComponent } from './resize-containment-demo/resize-containment-demo.component';
-
+import { ResizeGridDemoComponent } from './resize-grid-demo/resize-grid-demo.component';
 
 const routes: Routes = [
   {
@@ -34,6 +34,13 @@ const routes: Routes = [
     data: {
       title: 'Containment'
     }
+  },
+  {
+    path: 'grid',
+    component: ResizeGridDemoComponent,
+    data: {
+      title: 'Snap to grid'
+    }
   }
 ];
 

src/app/views/resizable-demo/resizable-demo.module.ts

@@ -7,6 +7,7 @@ import { ResizeDefaultDemoComponent } from './resize-default-demo/resize-default
 import { ResizeEventDemoComponent } from './resize-event-demo/resize-event-demo.component';
 import { ResizeAspectRatioDemoComponent } from './resize-aspect-ratio-demo/resize-aspect-ratio-demo.component';
 import { ResizeContainmentDemoComponent } from './resize-containment-demo/resize-containment-demo.component';
+import { ResizeGridDemoComponent } from './resize-grid-demo/resize-grid-demo.component';
 
 @NgModule({
   imports: [
@@ -18,7 +19,8 @@ import { ResizeContainmentDemoComponent } from './resize-containment-demo/resize
     ResizeDefaultDemoComponent,
     ResizeEventDemoComponent,
     ResizeAspectRatioDemoComponent,
-    ResizeContainmentDemoComponent
+    ResizeContainmentDemoComponent,
+    ResizeGridDemoComponent
   ]
 })
 export class ResizableDemoModule { }

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

@@ -0,0 +1,28 @@
+<div class="row">
+  <div class="col-6" style="min-height: 200px;">
+    <div ngResizable [rzGrid]="50" class="resizable-widget">
+      <h4 class="widget-header">Resizable</h4>
+      <div>[rzGrid]=50</div>
+    </div>
+  </div>
+  <div class="col-6" style="min-height: 200px;">
+    <div ngResizable [rzGrid]="[100, 50]" class="resizable-widget">
+      <h4 class="widget-header">Resizable</h4>
+      <div>[rzGrid]=[100, 50]</div>
+    </div>
+  </div>
+</div>
+
+<!-- Documents -->
+<div class="row mt-4">
+  <div class="col">
+    <tabset>
+      <tab heading="html">
+        <markdown [data]="demo_html | language: 'html'"></markdown>
+      </tab>
+      <tab heading="component">
+        <markdown [data]="demo_ts | language: 'typescript'"></markdown>
+      </tab>
+    </tabset>
+  </div>
+</div>