<link rel="import" href="../the-graph/the-graph.html">
<link rel="import" href="../bower_components/the-behavior/the-behavior/the-behavior.html">
<!-- <link rel="import" href="../the-library/the-library.html"> -->

<polymer-element name="the-graph-editor" lightdom>
  <template>
    <link rel="stylesheet" href="../themes/default/the-graph.css">
    <the-graph id="graph" name="{{ graph.properties.name }}">
      <the-behavior type="drag" direction="north south" accept="nodeName=THE-GRAPH-PROCESS" action="attribute" distance="20"></the-behavior>
      <the-behavior type="swipe" direction="north" accept="nodeName=THE-GRAPH-PROCESS" action="remove" speed="1.5" distance="40"></the-behavior>
      <the-behavior type="drag" direction="north south east west" accept="nodeName=svg" action="attribute" distance="20"></the-behavior>
      <the-behavior type="pinch" accept="nodeName=svg"></the-behavior>
    </the-graph>
  </template>
  <script>
  (function () {
    Polymer('the-graph-editor', {
      graph: {},
      graphChanged: function () {
        this.$.graph.graph = this.graph;
      }
    });
  })();
  </script>
</polymer-element>

<link rel="import" href="../the-graph/the-graph.html">
<link rel="import" href="../bower_components/the-behavior/the-behavior/the-behavior.html">
<!-- <link rel="import" href="../the-library/the-library.html"> -->

<polymer-element name="the-graph-editor" lightdom>
  <template>
    <link rel="stylesheet" href="../themes/default/the-graph.css">
    <the-graph id="graph" name="{{ graph.properties.name }}">
      <the-behavior type="drag" direction="north south" accept="nodeName=THE-GRAPH-PROCESS" action="attribute" distance="20"></the-behavior>
      <the-behavior type="swipe" direction="north" accept="nodeName=THE-GRAPH-PROCESS" action="remove" speed="1.5" distance="40"></the-behavior>
      <the-behavior type="drag" direction="north south east west" accept="nodeName=svg" action="attribute" distance="20"></the-behavior>
      <the-behavior type="pinch"></the-behavior>
    </the-graph>
  </template>
  <script>
  (function () {
    Polymer('the-graph-editor', {
      graph: {},
      graphChanged: function () {
        this.$.graph.graph = this.graph;
      }
    });
  })();
  </script>
</polymer-element>

Allow pinching anywhere since that doesn't clash with the other gestures
Allow pinching anywhere since that doesn't clash with the other gestures
