Merge pull request #44 from Vi-dot/element-classes

feat(cssClasses): Gives classes to main element depend on state
mattlewis92 · Feb 28, 2017 · cd07766 · cd07766
2 parents 0017fa4 + 8e3f108
commit cd07766
Showing 1 changed file with 35 additions and 7 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -72,19 +72,28 @@ function isWithinBoundingX({mouseX, rect}: {mouseX: number, rect: ClientRect}):
 }
 
 function getResizeEdges(
-  {mouseX, mouseY, elm, allowedEdges}: {mouseX: number, mouseY: number, elm: ElementRef, allowedEdges: Edges}): Edges {
+  {mouseX, mouseY, elm, allowedEdges, cursorPrecision}:
+    {mouseX: number, mouseY: number, elm: ElementRef, allowedEdges: Edges, cursorPrecision: number}): Edges {
   const elmPosition: ClientRect = elm.nativeElement.getBoundingClientRect();
   const edges: Edges = {};
-  if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left) && isWithinBoundingY({mouseY, rect: elmPosition})) {
+  if (allowedEdges.left
+    && isNumberCloseTo(mouseX, elmPosition.left, cursorPrecision)
+    && isWithinBoundingY({mouseY, rect: elmPosition})) {
     edges.left = true;
   }
-  if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right) && isWithinBoundingY({mouseY, rect: elmPosition})) {
+  if (allowedEdges.right
+    && isNumberCloseTo(mouseX, elmPosition.right, cursorPrecision)
+    && isWithinBoundingY({mouseY, rect: elmPosition})) {
     edges.right = true;
   }
-  if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top) && isWithinBoundingX({mouseX, rect: elmPosition})) {
+  if (allowedEdges.top
+    && isNumberCloseTo(mouseY, elmPosition.top, cursorPrecision)
+    && isWithinBoundingX({mouseX, rect: elmPosition})) {
     edges.top = true;
   }
-  if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom) && isWithinBoundingX({mouseX, rect: elmPosition})) {
+  if (allowedEdges.bottom
+    && isNumberCloseTo(mouseY, elmPosition.bottom, cursorPrecision)
+    && isWithinBoundingX({mouseX, rect: elmPosition})) {
     edges.bottom = true;
   }
   return edges;
@@ -178,6 +187,11 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
    */
   @Input() resizeCursors: ResizeCursors = DEFAULT_RESIZE_CURSORS;
 
+  /**
+   * Mouse over thickness to active cursor.
+   */
+  @Input() cursorPrecision: number = 3;
+
   /**
    * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
    */
@@ -243,10 +257,20 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
         event.preventDefault();
       }
 
-      const resizeEdges: Edges = getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges});
+      const resizeEdges: Edges = getResizeEdges({
+        mouseX, mouseY,
+        elm: this.elm,
+        allowedEdges: this.resizeEdges,
+        cursorPrecision: this.cursorPrecision});
       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);
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-hover', (cursor !== null));
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-active', (currentResize !== null));
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-left', (resizeEdges.left === true));
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-right', (resizeEdges.right === true));
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-top', (resizeEdges.top === true));
+      this.renderer.setElementClass(this.elm.nativeElement, 'resize-bottom', (resizeEdges.bottom === true));
 
     });
 
@@ -349,7 +373,11 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     });
 
     this.mousedown.map(({mouseX, mouseY, edges}) => {
-      return edges || getResizeEdges({mouseX, mouseY, elm: this.elm, allowedEdges: this.resizeEdges});
+      return edges || getResizeEdges({
+        mouseX, mouseY,
+        elm: this.elm,
+        allowedEdges: this.resizeEdges,
+        cursorPrecision: this.cursorPrecision});
     }).filter((edges: Edges) => {
       return Object.keys(edges).length > 0;
     }).subscribe((edges: Edges) => {