designer

designer.html

<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="ic-resizeable" attributes="width height">

  <template>
    <style>    
      :host {
        position: absolute;
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .handle {
        display: none;
        position: absolute;
        background-color: red;
      }
      .handle.visible {
        display: block;
      }
      #handle-n, #handle-s {
        cursor: ns-resize;
        width: 100%;
        height: 4px;
      }
      #handle-e, #handle-w {
        cursor: ew-resize;
        width: 4px;
        height: 100%;
      }
      #handle-n {
        top: 0px;
      }
      #handle-s {
        bottom: 0px;
      }
      #handle-e {
        right: 0px;
      }
      #handle-w {
        left: 0px;
      }
      #handle-ne {
        cursor: ne-resize;
        width: 4px;
        height: 4px;
        top: 0px;
        right: 0px;
      }
      #handle-se {
        cursor: se-resize;
        width: 4px;
        height: 4px;
        bottom: 0px;
        right: 0px;
      }
      #handle-sw {
        cursor: sw-resize;
        width: 4px;
        height: 4px;
        bottom: 0px;
        left: 0px;
      }
      #handle-nw {
        cursor: nw-resize;
        width: 4px;
        height: 4px;
        top: 0px;
        left: 0px;
      }
    </style>
    <div id="handle-n" class="handle visible"></div>
    <div id="handle-s" class="handle visible"></div>
    <div id="handle-e" class="handle visible"></div>
    <div id="handle-w" class="handle visible"></div>
    <div id="handle-ne" class="handle visible"></div>
    <div id="handle-se" class="handle visible"></div>
    <div id="handle-sw" class="handle visible"></div>
    <div id="handle-nw" class="handle visible"></div>
  </template>

  <script>

    Polymer('ic-resizeable', {
      width: '300px',
      height: '300px',
      widthChanged: function (oldValue, newValue) {
      	this.style.width = newValue;
      },
      heightChanged: function (oldValue, newValue) {
      	this.style.height = newValue;      
      }
    });

  </script>

</polymer-element>