Question

I forked a JSfiddle from this blog post (just for fun on a Tuesday evening…)
http://boundary.com/blog/2012/07/03/building-node-diagrams-in-html5/

And have been trying to create a linked new Node() every time I double click one. My fiddle is here
http://jsfiddle.net/joevallender/cGzCe/4/

I was trying not to mess with the library at first, but the fiddle includes (in resources) an altered version where I added support for the dblclick event.

Anyway, to the point! I’m passing in a function to be run on the event, and it does work in when double clicking on firstNode but I’d need to keep re-adding the event to each new created node / reference the create function somehow which would guess us into a loop.

var create = function() {
  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 100,
    y: 100
  }).attach();
  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();
}
var firstNode = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 350,
    y: 50,
    events: {
        dblclick: create
    }
}).attach();

I feel like I should be looking to modify the prototype function for the double click event but just got a bit lost. Does anyone a) know what I’m talking about? and b) can you help. It’s not client work or anything, but I’d just like to know!

I’ve had a quick scan for duplicated, but as you might tell from my badly worded question title, I’m not entirely sure how to phrase my search!

Answer 1

The quickest way to accomplish this would be to add the dblclick event to the created node. You should be able to extend the Node class to do this automatically, but I’m not sure it’s necessary.

var create = function() {

  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 100,
    y: 100,
    events:{ // add the event to the created node. 
      dblclick: create
    }
  }).attach();

  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();

  //nodes.push(node);
}

for positioning the newly created nodes, I would suggest that it be relative to the node they are spawned from:

var create = function() {
  var ancestor = $(event.target); // get the element that was double clicked
  var top = ancestor.position().top;  // and its position
  var left = ancestor.position().left;

  var node = new Node({
    title: 'Node',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: left + 100,        //new position relative to the parent.
    y: top + 100,
    events:{
      dblclick: create
    }
  }).attach();

  new Segment({
    h: 5,
    stage: stage,
    origin: this,
    destination: node
  }).attach();

  //nodes.push(node);
}