feat(resizeCursors): allow resize cursors to be customised

Closes #40
mattlewis92 · Feb 4, 2017 · 99d2f66 · 99d2f66
1 parent c61de2d
commit 99d2f66
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -118,19 +118,37 @@ function getResizeEdges(
   return edges;
 }
 
-function getResizeCursor(edges: Edges): string {
+interface ResizeCursors {
+  topLeft: string;
+  topRight: string;
+  bottomLeft: string;
+  bottomRight: string;
+  leftOrRight: string;
+  topOrBottom: string;
+}
+
+const DEFAULT_RESIZE_CURSORS: ResizeCursors = Object.freeze({
+  topLeft: 'nw-resize',
+  topRight: 'ne-resize',
+  bottomLeft: 'sw-resize',
+  bottomRight: 'se-resize',
+  leftOrRight: 'ew-resize',
+  topOrBottom: 'ns-resize'
+});
+
+function getResizeCursor(edges: Edges, cursors: ResizeCursors): string {
   if (edges.left && edges.top) {
-    return 'nw-resize';
+    return cursors.topLeft;
   } else if (edges.right && edges.top) {
-    return 'ne-resize';
+    return cursors.topRight;
   } else if (edges.left && edges.bottom) {
-    return 'sw-resize';
+    return cursors.bottomLeft;
   } else if (edges.right && edges.bottom) {
-    return 'se-resize';
+    return cursors.bottomRight;
   } else if (edges.left || edges.right) {
-    return 'ew-resize';
+    return cursors.leftOrRight;
   } else if (edges.top || edges.bottom) {
-    return 'ns-resize';
+    return cursors.topOrBottom;
   } else {
     return null;
   }
@@ -183,6 +201,11 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
    */
   @Input() resizeSnapGrid: Edges = {};
 
+  /**
+   * The mouse cursors that will be set on the resize edges
+   */
+  @Input() resizeCursors: ResizeCursors = DEFAULT_RESIZE_CURSORS;
+
   /**
    * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
    */
@@ -249,7 +272,8 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
       }
 
       const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges});
-      const cursor: string = currentResize ? null : getResizeCursor(resizeEdges);
+      const resizeCursors: ResizeCursors = Object.assign({}, DEFAULT_RESIZE_CURSORS, this.resizeCursors);
+      const cursor: string = currentResize ? null : getResizeCursor(resizeEdges, resizeCursors);
       this.renderer.setElementStyle(this.elm.nativeElement, 'cursor', cursor);
 
     });
@@ -368,14 +392,15 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
       };
       if (this.enableGhostResize) {
         currentResize.clonedNode = this.elm.nativeElement.cloneNode(true);
+        const resizeCursors: ResizeCursors = Object.assign({}, DEFAULT_RESIZE_CURSORS, this.resizeCursors);
         this.elm.nativeElement.parentElement.appendChild(currentResize.clonedNode);
         this.renderer.setElementStyle(this.elm.nativeElement, 'visibility', 'hidden');
         this.renderer.setElementStyle(currentResize.clonedNode, 'position', 'fixed');
         this.renderer.setElementStyle(currentResize.clonedNode, 'left', `${currentResize.startingRect.left}px`);
         this.renderer.setElementStyle(currentResize.clonedNode, 'top', `${currentResize.startingRect.top}px`);
         this.renderer.setElementStyle(currentResize.clonedNode, 'height', `${currentResize.startingRect.height}px`);
         this.renderer.setElementStyle(currentResize.clonedNode, 'width', `${currentResize.startingRect.width}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges));
+        this.renderer.setElementStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
       }
       this.resizeStart.emit({
         edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}),

diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
@@ -26,6 +26,7 @@ describe('resizable directive', () => {
         [resizeEdges]="resizeEdges"
         [enableGhostResize]="enableGhostResize"
         [resizeSnapGrid]="resizeSnapGrid"
+        [resizeCursors]="resizeCursors"
         (resizeStart)="resizeStart($event)"
         (resizing)="resizing($event)"
         (resizeEnd)="resizeEnd($event)">
@@ -43,6 +44,7 @@ describe('resizable directive', () => {
     public resizeEdges: Edges = {top: true, bottom: true, left: true, right: true};
     public enableGhostResize: boolean = true;
     public resizeSnapGrid: Object = {};
+    public resizeCursors: Object = {};
 
   }
 
@@ -1005,4 +1007,16 @@ describe('resizable directive', () => {
 
   });
 
+  it('should allow the resize cursor to be customised', () => {
+
+    const fixture: ComponentFixture<TestCmp> = createComponent();
+    fixture.componentInstance.resizeCursors = {leftOrRight: 'col-resize'};
+    fixture.detectChanges();
+    const elm: HTMLElement = fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousemove', elm, {clientX: 100, clientY: 300});
+    expect(elm.style.cursor).to.equal('col-resize');
+    fixture.destroy();
+
+  });
+
 });