I'm wondering if possible do create a event delegation from an object reference inside another object, this is the scenario.
I have 2 circles and 1 line between those two circles, every time any circle changes its own postition it have to update the line's position as well, by this time I have created a custom line that is going to have a reference to the two circles as a properties (origin, target) but isn't binding the event in that way.
what I'm tryting to do is something like>
this.origin.on('dragstart dragmove',function(){
console.log("origin mouse move");
this.setPoints([origin.getX(),origin.getY(), target.getX(), target.getY()]);
this.draw();
});
this is the fiddle
buildArrow: function(origin,target){
var arrowInstance = new Shape.Arrow({
points: [origin.getX(),origin.getY(), target.getX(), target.getY()],
stroke: '#629DD1',
tension: 1
});
arrowInstance.origin=origin;
origin.line = arrowInstance;
arrowInstance.target=target;
target.line = arrowInstance;
return arrowInstance;
},
updatePosition : function() {
this.points([this.origin.getX(),this.origin.getY(), this.target.getX(), this.target.getY()]);
},
Then:
this.on('dragstart dragmove',function(){
var centerpoint = (this.cellSize/2)
this.setX(((Math.round(this.getX() / centerpoint) * centerpoint)));
this.setY(((Math.round(this.getY() / centerpoint) * centerpoint)));
this.line.updatePosition();
});