edge.js from GEAR

edge.js

define(['graph_editor/register_core'], function(registerCore) {
  
  var Edge = function(options) {
    this._initEdge(options);
  };

  Edge.prototype = {

    _initEdge: function(options) {

      this.source = options.source;
      this.output_name = options.output_name;
      this.output = this.source.outputs[this.output_name];
      this.destination = options.destination;
      this.input_name = options.input_name;
      this.input = this.destination.inputs[this.input_name];
      this.runtime_name = this.output.runtime_name;
      
      this.lineType = options.line_type;
      this.lineColor = options.line_color || '#30e8ca';

      this.bezierDeflection = 30;

      this.patch = options.patch;
      
      this.drawLine();

      this.setupSelectHandler();

    },

    setupSelectHandler: function() {
      //var that = this;
      // this.targetArea.on("mousedown touchstart", function(evt) {
      //   that.patch.selectEdge(that, evt, evt.shiftKey);
      // });
    },

    drawLine: function() {
      
      if (this.lineType == "solid") {
        this.drawSolidLine();
      }
      if (this.lineType == "dashed") {
        this.drawDashedLine();
      }

    },
    
    drawSolidLine: function() {
      var startX = this.output.getX();
      var startY = this.output.getY();

      var endX = this.input.getX();
      var endY = this.input.getY();
      
      var context = this.patch.edgeContext;
      
      context.strokeStyle = this.lineColor;
      context.lineWidth = 3;
      context.lineCap = "round";
      context.beginPath();
      context.moveTo(startX, startY);
      context.bezierCurveTo(startX + 60, startY, endX - 60, endY, endX, endY);
      context.stroke();
      
    },
    
    // http://davidowens.wordpress.com/2010/09/07/html-5-canvas-and-dashed-lines/
    
    drawDashedLine: function(pattern_option) {
      
      pattern = pattern_option || [10,5];
      
      var startX = this.output.getX();
      var startY = this.output.getY();

      var endX = this.input.getX();
      var endY = this.input.getY();
      
      var context = this.patch.edgeContext;
      
      var lt = function (a, b) { return a <= b; };
      var gt = function (a, b) { return a >= b; };
      var capmin = function (a, b) { return Math.min(a, b); };
      var capmax = function (a, b) { return Math.max(a, b); };

      var checkX = { thereYet: gt, cap: capmin };
      var checkY = { thereYet: gt, cap: capmin };

      if (startY - endY > 0) {
        checkY.thereYet = lt;
        checkY.cap = capmax;
      }
      if (startX - endX > 0) {
        checkX.thereYet = lt;
        checkX.cap = capmax;
      }
      
      context.strokeStyle = this.lineColor;
      context.lineWidth = 3;
      context.lineCap = "round";
      context.beginPath();

      context.moveTo(startX, startY);
      var offsetX = startX;
      var offsetY = startY;
      var idx = 0, dash = true;
      while (!(checkX.thereYet(offsetX, endX) && checkY.thereYet(offsetY, endY))) {
        var ang = Math.atan2(endY - startY, endX - startX);
        var len = pattern[idx];

        offsetX = checkX.cap(endX, offsetX + (Math.cos(ang) * len));
        offsetY = checkY.cap(endY, offsetY + (Math.sin(ang) * len));

        if (dash) context.lineTo(offsetX, offsetY);
        else context.moveTo(offsetX, offsetY);

        idx = (idx + 1) % pattern.length;
        dash = !dash;
      }
      
      context.stroke();
    },

    remove: function() {

      if (!this.removed) {
        //console.log("removing edge", this.source.id, "<=>", this.destination.id);
        this.removed = true;
        this.destination.edges.splice(this.destination.edges.indexOf(this), 1);
        this.source.edges.splice(this.source.edges.indexOf(this), 1);
        this.source.disconnect(this);
        this.patch.removeEdge(this);
      }

    }

  };

  registerCore({
    name: "Edge",
    core: Edge
  });
  
});