<link rel="import" href="../the-graph-inports/the-graph-inports.html">
<link rel="import" href="../the-graph-outports/the-graph-outports.html">
<polymer-element name="the-graph-process" attributes="label x y component">
  <template>
    <div class="the-graph-process">
      <h1>{{label}}</h1>
      <content select="the-graph-inports"></content>
      <content select="the-graph-outports"></content>
    </div>
  </template>
  <script>

    var translate = function (el, x, y) {
      //var move = "translate3d("+x+"px,"+y+"px,0px)";
      var move = "translate("+x+"px,"+y+"px)";
      el.style.webkitTransform = move;
      el.style.MozTransform = move;
      el.style.msTransform = move;
      el.style.OTransform = move;
      el.style.transform = move;
      console.log(el);
      return el;
    };

    Polymer('the-graph-process', {
      created: function () {
        this.style.position = 'absolute';
        this.positionChanged();
      },
      label: '',
      x: 0,
      y: 0,
      xChanged: this.positionChanged,
      yChanged: this.positionChanged,
      positionChanged: function () {
        translate(this, this.x, this.y);
      }
    });
  </script>
</polymer-element>


<link rel="import" href="../the-graph-inports/the-graph-inports.html">
<link rel="import" href="../the-graph-outports/the-graph-outports.html">
<polymer-element name="the-graph-process" attributes="label x y component">
  <template>
    <div class="the-graph-process">
      <h1>{{label}}</h1>
      <content select="the-graph-inports"></content>
      <content select="the-graph-outports"></content>
    </div>
  </template>
  <script>

    var translate = function (el, x, y) {
      //var move = "translate3d("+x+"px,"+y+"px,0px)";
      var move = "translate("+x+"px,"+y+"px)";
      el.style.webkitTransform = move;
      el.style.MozTransform = move;
      el.style.msTransform = move;
      el.style.OTransform = move;
      el.style.transform = move;
      console.log(el);
      return el;
    };

    Polymer('the-graph-process', {
      created: function () {
        this.style.position = 'absolute';
        this.positionChanged();
      },
      label: '',
      x: 0,
      y: 0,
      xChanged: function () {
        this.positionChanged();
      },
      yChanged: function () {
        this.positionChanged();
      },
      positionChanged: function () {
        translate(this, this.x, this.y);
      }
    });
  </script>
</polymer-element>


Fix x & y change handlers
Fix x & y change handlers
