import Ability from './Ability';

/**
 * @module Draft
 * @submodule Resizable
 * @author Adam Timberlake
 * @link https://github.com/Wildhoney/Draft
 */
export default class Resizable extends Ability {

    /**
     * @method didSelect
     * @return {void}
     */
    didSelect() {
        this.reattachHandles();
    }

    /**
     * @method didDeselect
     * @return {void}
     */
    didDeselect() {
        this.detachHandles();
    }

    /**
     * @method reattachHandles
     * @return {void}
     */
    reattachHandles() {
        this.detachHandles();
        this.attachHandles();
    }

    /**
     * @method attachHandles
     * @return {void}
     */
    attachHandles() {

        const shape  = this.shape();
        const layer  = this.middleman().layers().markers;
        this.handles = layer.append('g').attr('class', 'resize-handles');

        const x      = shape.attr('x');
        const y      = shape.attr('y');
        const width  = shape.attr('width');
        const height = shape.attr('height');

        const cornerMap = [
            { x, y },
            { x: x + (width / 2), y },
            { x: x + width, y },
            { x: x, y: y + (height / 2) },
            { x: x, y: y + height },
            { x: x + (width / 2), y: y + height },
            { x: x + width, y: y + height },
            { x: x + width, y: y + (height / 2) }
        ];

        cornerMap.forEach((corner) => {

            this.handles.append('circle')
                        .attr('fill', 'black')
                        .attr('stroke', 'white')
                        .attr('stroke-width', 1)
                        .attr('r', 3)
                        .attr('cx', corner.x)
                        .attr('cy', corner.y);

        });

    }

    /**
     * @method detachHandles
     * @return {void}
     */
    detachHandles() {
        
        if (this.handles) {
            this.handles.remove();
        }
        
    }

}
@@ -1043,22 +1043,20 @@
   const 
-corner
+edge
 Map = %5B%0A
@@ -1071,16 +1071,33 @@
     %7B x,
+                 
  y %7D,%0A  
@@ -1160,16 +1160,22 @@
 + width,
+      
  y %7D,%0A  
@@ -1183,32 +1183,46 @@
          %7B x: x,
+              
  y: y + (height 
@@ -1248,16 +1248,30 @@
  %7B x: x,
+              
  y: y + 
@@ -1350,32 +1350,38 @@
  %7B x: x + width,
+      
  y: y + height %7D
@@ -1409,16 +1409,22 @@
 + width,
+      
  y: y + 
@@ -1458,22 +1458,20 @@
         
-corner
+edge
 Map.forE
@@ -1475,22 +1475,20 @@
 orEach((
-corner
+edge
 ) =%3E %7B%0A%0A
@@ -1748,22 +1748,20 @@
 r('cx', 
-corner
+edge
 .x)%0A    
@@ -1796,14 +1796,12 @@
 y', 
-corner
+edge
 .y);

Changed 'corner' to 'edge'