fix: deprecate the top level resizeEdges option in favour of resize h…

…andles
mattlewis92 · Feb 5, 2019 · 2f6ac2d · 2f6ac2d
1 parent 94dc48d
commit 2f6ac2d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 12 deletions.
diff --git a/demo/demo.component.ts b/demo/demo.component.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:max-inline-declarations */
 import { Component } from '@angular/core';
-import { ResizeEvent } from './../src';
+import { ResizeEvent } from '../src';
 
 @Component({
   selector: 'mwl-demo',
@@ -19,11 +19,37 @@ import { ResizeEvent } from './../src';
         color: #121621;
         margin: auto;
       }
-      .resize-handle {
+
+      .resize-handle-top,
+      .resize-handle-bottom {
+        position: absolute;
+        height: 5px;
+        cursor: row-resize;
+        width: 100%;
+      }
+
+      .resize-handle-top {
+        top: 0;
+      }
+
+      .resize-handle-bottom {
+        bottom: 0;
+      }
+
+      .resize-handle-left,
+      .resize-handle-right {
         position: absolute;
-        bottom: 10px;
-        right: 10px;
-        cursor: se-resize;
+        height: 100%;
+        cursor: col-resize;
+        width: 5px;
+      }
+
+      .resize-handle-left {
+        left: 0;
+      }
+
+      .resize-handle-right {
+        right: 0;
       }
     `
   ],
@@ -35,15 +61,30 @@ import { ResizeEvent } from './../src';
         [ngStyle]="style"
         mwlResizable
         [validateResize]="validate"
-        [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
         [enableGhostResize]="true"
-        [resizeSnapGrid]="{left: 50, right: 50}"
-        (resizeEnd)="onResizeEnd($event)">
-        <img
-          src="http://i.imgur.com/eqzz2dl.gif"
-          class="resize-handle"
+        [resizeSnapGrid]="{ left: 50, right: 50 }"
+        (resizeEnd)="onResizeEnd($event)"
+      >
+        <div
+          class="resize-handle-top"
+          mwlResizeHandle
+          [resizeEdges]="{ top: true }"
+        ></div>
+        <div
+          class="resize-handle-left"
+          mwlResizeHandle
+          [resizeEdges]="{ left: true }"
+        ></div>
+        <div
+          class="resize-handle-right"
+          mwlResizeHandle
+          [resizeEdges]="{ right: true }"
+        ></div>
+        <div
+          class="resize-handle-bottom"
           mwlResizeHandle
-          [resizeEdges]="{bottom: true, right: true}">
+          [resizeEdges]="{ bottom: true }"
+        ></div>
       </div>
     </div>
   `

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -281,6 +281,7 @@ export class ResizableDirective implements OnInit, OnDestroy {
 
   /**
    * The edges that an element can be resized from. Pass an object like `{top: true, bottom: false}`. By default no edges can be resized.
+   * @deprecated use a resize handle instead that positions itself to the side of the element you would like to resize
    */
   @Input()
   resizeEdges: Edges = {};
@@ -307,6 +308,7 @@ export class ResizableDirective implements OnInit, OnDestroy {
 
   /**
    * Mouse over thickness to active cursor.
+   * @deprecated invalid when you migrate to use resize handles instead of setting resizeEdges on the element
    */
   @Input()
   resizeCursorPrecision: number = 3;