<commit_before><link rel="import" href="../the-graph-inports/the-graph-inports.html">
<link rel="import" href="../the-graph-outports/the-graph-outports.html">
<link rel="import" href="../the-graph-port/the-graph-port.html">

<polymer-element name="the-graph-process" attributes="label position component process highlight icon" class="the-graph-node" lightdom>

  <template>
    <div id="the-graph-node-label" class="the-graph-node-label">
      <h1 class="the-graph-node-title">{{label}}</h1>
      <h2 class="the-graph-node-subtitle">
        <template if="{{ label != component }}">
        {{component}}
        </template>
        <template if="{{ label == component }}">
        &nbsp;
        </template>
      </h2>
    </div>
    <i class="the-graph-node-icon fa fa-{{icon}}"></i>
    <the-graph-inports id="inports">
      <template repeat="{{port in inports}}">
        <the-graph-port name="{{port.name}}" type="{{port.type}}"></the-graph-port> 
      </template>
    </the-graph-inports>
    <the-graph-outports id="outports">
      <template repeat="{{port in outports}}">
        <the-graph-port name="{{port.name}}" type="{{port.type}}"></the-graph-port> 
      </template>
    </the-graph-outports>
  </template>

  <script type="text/javascript" src="../the-graph-util/the-graph-util.js"></script>

  <script>
  (function(){
    "use strict";

    Polymer('the-graph-process', {
      label: '',
      component: '',
      icon: '',
      position: '0 0',
      zoom: 1,
      pan: {
        x: 0,
        y: 0
      },
      bump: {
        x: 500,
        y: 500
      },
      snap: 30,
      width: 60,
      height: 60,
      libraryComponent: null,
      inports: [],
      outports: [],
      directionalGestureEnabled: true,
      ready: function () {
        var pos = this.getPosition();
        this._position = [pos.x, pos.y];
      },
      enteredView: function () {
        // Find graph in parents, since the-graph-export has a process child
        var graph = null;
        var parent = this.parentNode;
        while (parent && !graph) {
          if (parent.nodeName === "THE-GRAPH") {
            graph = parent;
          }
          parent = parent.parentNode;
        }
        if (!graph) {
          throw new Error('Process element needs to have a "the-graph" ancestor.');
        }
        this.graph = graph;

        // Initial bump
        this.bump.x = graph.padding;
        this.bump.y = graph.padding;

        // Handle sizing
        this.graphZoom(this.zoom);

        //
        // Autopan when dragging nodes to edge
        //

        var autoPanThreshold = 20;
        var autopanSpeed = 15;
        var panX, panY;
        var autopanInterval;
        var lastEvent;

        var panGraph = function () {
          var x = this.graph._pan.x;
          var y = this.graph._pan.y;
          if (panX) { x += panX; }
          if (panY) { y += panY; }
          this.graph.pan = x + " " + y;
        };

        var checkPan = function (event) {
          panX = null;
          panY = null;
          if (event.pageX < autoPanThreshold) {
            panX = autopanSpeed;
          }
          else if (event.pageX > this.graph.width-autoPanThreshold) {
            panX = -autopanSpeed;
          }
          if (event.pageY < autoPanThreshold) {
            panY = autopanSpeed;
          }
          else if (event.pageY > this.graph.height-autoPanThreshold) {
            panY = -autopanSpeed;
          }
          clearInterval(autopanInterval);
          if (panX || panY) {
            panGraph.call(this);
            autopanInterval = setInterval( function(){
              panGraph.call(this);
              // Retrigger track to move the process (otherwise gets left behind)
              this.dispatchEvent(event);
            }.bind(this), 100 );
          }
        };
        
        //
        // Gesture recognition for highlighting and moving
        //

        var dragStartX, dragStartY, dragStartPanX, dragStartPanY, gestureRecognised;
        var gestureThreshold = 20;

        // Move or highlight
        this.addEventListener("trackstart", function(event){
          // Don't track when graph is pinching
          if (graph.pinching) { return; }
          // Don't track the-graph
          event.stopPropagation();

          dragStartPanX = this.pan.x;
          dragStartPanY = this.pan.y;
          var pos = this.getPosition();
          dragStartX = pos.x;
          dragStartY = pos.y;
          gestureRecognised = null;
        }.bind(this));

        var thisNode = this;
        var thisPort = null;
        var otherNode = null;
        var otherPort = null;
        var startNewEdge = function (event) {
          var other = event.relatedTarget;
          if (other.nodeName==="THE-GRAPH-PORT") {
            // Already selected
            if (other===otherPort) { return; }
            // Not other type
            if (thisPort && other.isOutport()===thisPort.isOutport() ) { return; }
            if (otherPort) {
              otherPort.classList.remove('selected');
            }
            other.classList.add('selected');
            otherPort = other;
          }
          if (other && other.nodeName==="THE-GRAPH-PROCESS" && other!==thisNode) {
            // Deselect
            if (otherNode) {
              if (otherNode === other) {
                return;
              }
              otherNode.highlight = '';
              otherPort = null;
            }
            // Highlight other
            other.highlight = thisNode.highlight === "out" ? "in" : "out";
            otherNode = other;
            // Select first outport
            otherPort = other.getOutports()[0];
            if (otherPort) {
              otherPort.classList.add('selected');
            }
          }
        };
        var makeNewEdge = function (event) {
          if (thisNode && thisPort && otherNode && otherPort) {
            // Make the connection
            if (thisPort.isOutport()) {
              thisNode.graph.connect(thisNode, thisPort, otherNode, otherPort);
            } else {
              thisNode.graph.connect(otherNode, otherPort, thisNode, thisPort);
            }
          }
          // Unhighlight
          thisNode.highlight = null;
          if (otherNode) {
            otherNode.highlight = null;
            otherNode = null;
          }
        };

        this.addEventListener("track", function(event){
          // Don't track when graph is pinching
          if (graph.pinching) { return; }<commit_msg>connect tweaks<commit_after><link rel="import" href="../the-graph-inports/the-graph-inports.html">
<link rel="import" href="../the-graph-outports/the-graph-outports.html">
<link rel="import" href="../the-graph-port/the-graph-port.html">

<polymer-element name="the-graph-process" attributes="label position component process highlight icon" class="the-graph-node" lightdom>

  <template>
    <div id="the-graph-node-label" class="the-graph-node-label">
      <h1 class="the-graph-node-title">{{label}}</h1>
      <h2 class="the-graph-node-subtitle">
        <template if="{{ label != component }}">
        {{component}}
        </template>
        <template if="{{ label == component }}">
        &nbsp;
        </template>
      </h2>
    </div>
    <i class="the-graph-node-icon fa fa-{{icon}}"></i>
    <the-graph-inports id="inports">
      <template repeat="{{port in inports}}">
        <the-graph-port name="{{port.name}}" type="{{port.type}}"></the-graph-port> 
      </template>
    </the-graph-inports>
    <the-graph-outports id="outports">
      <template repeat="{{port in outports}}">
        <the-graph-port name="{{port.name}}" type="{{port.type}}"></the-graph-port> 
      </template>
    </the-graph-outports>
  </template>

  <script type="text/javascript" src="../the-graph-util/the-graph-util.js"></script>

  <script>
  (function(){
    "use strict";

    Polymer('the-graph-process', {
      label: '',
      component: '',
      icon: '',
      position: '0 0',
      zoom: 1,
      pan: {
        x: 0,
        y: 0
      },
      bump: {
        x: 500,
        y: 500
      },
      snap: 30,
      width: 60,
      height: 60,
      libraryComponent: null,
      inports: [],
      outports: [],
      directionalGestureEnabled: true,
      ready: function () {
        var pos = this.getPosition();
        this._position = [pos.x, pos.y];
      },
      enteredView: function () {
        // Find graph in parents, since the-graph-export has a process child
        var graph = null;
        var parent = this.parentNode;
        while (parent && !graph) {
          if (parent.nodeName === "THE-GRAPH") {
            graph = parent;
          }
          parent = parent.parentNode;
        }
        if (!graph) {
          throw new Error('Process element needs to have a "the-graph" ancestor.');
        }
        this.graph = graph;

        // Initial bump
        this.bump.x = graph.padding;
        this.bump.y = graph.padding;

        // Handle sizing
        this.graphZoom(this.zoom);

        //
        // Autopan when dragging nodes to edge
        //

        var autoPanThreshold = 20;
        var autopanSpeed = 15;
        var panX, panY;
        var autopanInterval;
        var lastEvent;

        var panGraph = function () {
          var x = this.graph._pan.x;
          var y = this.graph._pan.y;
          if (panX) { x += panX; }
          if (panY) { y += panY; }
          this.graph.pan = x + " " + y;
        };

        var checkPan = function (event) {
          panX = null;
          panY = null;
          if (event.pageX < autoPanThreshold) {
            panX = autopanSpeed;
          }
          else if (event.pageX > this.graph.width-autoPanThreshold) {
            panX = -autopanSpeed;
          }
          if (event.pageY < autoPanThreshold) {
            panY = autopanSpeed;
          }
          else if (event.pageY > this.graph.height-autoPanThreshold) {
            panY = -autopanSpeed;
          }
          clearInterval(autopanInterval);
          if (panX || panY) {
            panGraph.call(this);
            autopanInterval = setInterval( function(){
              panGraph.call(this);
              // Retrigger track to move the process (otherwise gets left behind)
              this.dispatchEvent(event);
            }.bind(this), 100 );
          }
        };
        
        //
        // Gesture recognition for highlighting and moving
        //

        var dragStartX, dragStartY, dragStartPanX, dragStartPanY, gestureRecognised;
        var gestureThreshold = 20;

        // Move or highlight
        this.addEventListener("trackstart", function(event){
          // Don't track when graph is pinching
          if (graph.pinching) { return; }
          // Don't track the-graph
          event.stopPropagation();

          dragStartPanX = this.pan.x;
          dragStartPanY = this.pan.y;
          var pos = this.getPosition();
          dragStartX = pos.x;
          dragStartY = pos.y;
          gestureRecognised = null;
        }.bind(this));

        var thisNode = this;
        var thisPort = null;
        var otherNode = null;
        var otherPort = null;
        var startNewEdge = function (event) {
          var other = event.relatedTarget;
          if (other.nodeName==="THE-GRAPH-PORT") {
            // Already selected
            if (other===otherPort) { return; }
            // Not other type
            if (thisPort && other.isOutport()===thisPort.isOutport() ) { return; }
            if (otherPort) {
              otherPort.classList.remove('selected');
            }
            other.classList.add('selected');
            otherPort = other;
          }
          if (other && other.nodeName==="THE-GRAPH-PROCESS" && other!==thisNode && other.directionalGestureEnabled) {
            // Deselect
            if (otherNode) {
              if (otherNode === other) {
                return;
              }
              otherNode.highlight = '';
              if (otherPort) {
                otherPort.classList.remove("selected");
                otherPort = null;
              }
            }
            // Highlight other
            other.highlight = thisNode.highlight === "out" ? "in" : "out";
            otherNode = other;
            // Select first outport
            otherPort = other.getOutports()[0];
            if (otherPort) {
              otherPort.classList.add('selected');
            }
          }
        };
        var makeNewEdge = function (event) {
          if (thisNode && thisPort && otherNode && otherPort) {
            // Make the connection
            if (thisPort.isOutport()) {
              thisNode.graph.connect(thisNode, thisPort, otherNode, otherPort);
            } else {
              thisNode.graph.connect(otherNode, otherPort, thisNode, thisPort);
            }
          }
          // Unhighlight
          thisNode.highlight = null;
          if (thisPort) {
            thisPort.classList.remove("selected");
          }
          if (otherPort) {
            otherPort.classList.remove("selected");
            otherPort = null;
          }
          if (otherNode) {
            otherNode.highlight = null;
            otherNode = null;
          }
        };

        this.addEventListener("track", function(event){
          // Don't track when graph is pinching
          if (graph.pinching) { return; }
{'fraction_non_alphanumeric': 0.13381904691101035, 'fraction_numerical': 0.0046093227269348004, 'mean_word_length': 1.6258051922701542, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3093302', 'n_tokens_mistral': 3903, 'n_tokens_neox': 3770, 'n_words': 845}