CODEWITHSUNDEEP
javascript
joevallender
joevallender

Reputation: 4293

create new javascript object from within a version of itself

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!

Upvotes: 1

Views: 89

Answers (2)

Shmiddty
Shmiddty

Reputation: 13967

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);
}

Upvotes: 1

Kishore
Kishore

Reputation: 1912

Your code works fine but the issue is the new nodes are overlapping on each other since in create function you have your x and y at 100 to create new nodes.

so I used math.random to generate random x,y positions to new nodes

here is the Demo

You should be generating new nodes positions and names randomly according to your needs

Upvotes: 1

Related Questions