Dynamic: Creating Connections and Blocks

[hansemann]

Hey Guys! First of all ths is a very cool tool. I have just a few questions. I am trying to build a page, where i can easily create new blocks and connections between them. In fact I am trying to do this with drag-and-drop from another list. Example: I have a list on the right side and want to drag some objects from there and drop them on the js-graph. Then i want to create connections between them. I've tried a few things. I created a new <DIV>-Connection Element and called the initPageObjects Method, but of course this didn't work, because the mainCanvas already had changed, and now I am trying to do this manually, creating a new Canvas, a new Connection.... But I still haven't the clue how to make it right. Can anybody help me???

[donatook]

To add a block from an HTMLelement:

var canvas = findCanvas('canvas');
var newBlock = new Block(HTMLelement, canvas);
newBlock.initBlock();
canvas.blocks.push(newBlock);

To add a connection from an HTMLdiv with classname properly set:

var canvas = findCanvas('canvas');
var newConnection = new Connection(HTMLelement, canvas);
newConnection.initConnection();
canvas.connections.push(newConnection);

Hope it may help you.

[Tad]

It looks like the functions have changed a little? I used this to create a new element. How would I remove a connector?
$('#connect').click(function() {
var newdiv = document.createElement('div');
newdiv.setAttribute('class','connector '+$('.selected:first').attr('id')+' '+ $('.selected:first').next().attr('id'));
var canvas = findCanvas('mainCanvas');
var newConnector = new Connector(newdiv, canvas);
newConnector.initConnector();
canvas.connectors.push(newConnector);
});

[Tad]

Needed to attach the element to the canvas first otherwise it errors.
$('#connect').click(function() {
var newdiv = document.createElement('div');
newdiv.setAttribute('class','connector '+$('.selected:first').attr('id')+' '+ $('.selected:first').next().attr('id'));
var ni = document.getElementById('mainCanvas');
ni.appendChild(newdiv);
var canvas = findCanvas('mainCanvas');
var newConnector = new Connector(newdiv, canvas);
newConnector.initConnector();
canvas.connectors.push(newConnector);
       });