title: JointJS: make link label movable over the link itself
body: <p>For the links - in a JointJS diagram - I tried to implement this tutorial (<a href="http://jointjs.com/tutorial/constraint-move-to-circle">http://jointjs.com/tutorial/constraint-move-to-circle</a>) to move the labels on the link, but I don't understand where to put the <code>ConstraintElementView</code>.</p>
  
  <ol>
  <li>I would like to make the label of a link moveable over the link. So how can I define the link as the 'path' for the moveable label?</li>
  </ol>
  
  <p><strong>ConstraintElementView</strong></p>
  
  <pre><code>var constraint = label; // ???
  
  var ConstraintElementView = joint.dia.ElementView.extend({
  
      pointerdown: function(evt, x, y) {
          var position = this.model.get('position');
          var size = this.model.get('size');
          var center = g.rect(position.x, position.y, size.width, size.height).center();
          var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
          joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
      },
      pointermove: function(evt, x, y) {
          var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
          joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
      }
  });
  </code></pre>
  
  <p><strong>link label</strong></p>
  
  <pre><code>paper.on({
      /**
      *   Doubleclick on link: Add label for link
      */
      'cell:pointerdblclick': function(cellView, event, x, y){            
          if (cellView.model.isLink()) {
              cellView.model.label(0, {
                  position: .5,
                  attrs: {
                      rect: { fill: '#eeeeee' },
                      text: { text: 'text', 'font-size': 12, ref: 'rect' }
                  }
              });
          }
      }
  });
  </code></pre>
  
  <p><strong>paper</strong></p>
  
  <pre><code>var paper = new joint.dia.Paper({
      el: $('#canvas'),
      width: 801,
      height: 496,
      model: graph,
      gridSize: 10,
      elementView: ConstraintElementView,
      defaultLink: new joint.dia.Link({
          router: { name: 'manhattan' },
          connector: { name: 'rounded' },
          attrs: {
              '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
              '.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
          }
      })
  });
  </code></pre>
  
  <ol start="2">
  <li>As it is moveable over the link, it should be snap to the center of each segment of the manhattan-style link. But I don't see any chance to get the value of the center of each segment.</li>
  </ol>