mygraph = {var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: document.getElementById('paper'), gridSize: 1, width: 1000, height: 700, model: graph, snapLinks: true, linkPinning: false, background: { color: '#e6ffff', opacity: 0.3 }, defaultLink: new joint.dia.Link({ markup: [ '', '', '', '', '', '', '', '' ].join(''), }), highlighting: { 'default': { name: 'stroke', options: { padding: 20 } }}, validateConnection: function(sourceView, sourceMagnet, targetView, targetMagnet) { return sourceMagnet != targetMagnet; } }); var draggableElementContainerGraph = new joint.dia.Graph; var draggableElementContainerPaper = new joint.dia.Paper({ el: document.getElementById('draggableElementContainerPaper'), gridSize: 1, width: 150, height: 700, model: draggableElementContainerGraph, interactive: false, background: { color: '#ecf8ec', opacity: 0.3 } }); var connect = function(source, sourcePort, target, targetPort) { var link = new joint.dia.Link({ source: { id: source.id, port: sourcePort }, target: { id: target.id, port: targetPort } }); link.addTo(graph).reparent(); }; var previousCellView = null; paper.on('element:pointerdown', function(elementView, evt, x, y) { console.log('cell view ' + elementView.model.id + ' was clicked'); elementView.highlight(); console.log("highlighted "+elementView.model.id); if(elementView != previousCellView && previousCellView != null){ previousCellView.unhighlight(); console.log("unhighlighted "+previousCellView.model.id); } previousCellView = elementView; } ); paper.on('blank:pointerdown', function(evt, x, y) { if(previousCellView != null){ previousCellView.unhighlight(); console.log("unhighlighted "+previousCellView.model.id); } } ); var graphNode = new joint.shapes.devs.Atomic({ position: { x: 30, y: 310 }, inPorts: [''], outPorts: [' '], ports: { groups: { 'in': { attrs: { '.port-body': { fill: '#16A085' } } }, 'out': { attrs: { '.port-body': { fill: '#16A085' } } } } }, attrs: { rect: { stroke: '#31d0c6', 'stroke-width': 4 }, image: { 'xlink:href': 'table.png' }, '.body': { 'rx': 6, 'ry': 6 } } }); draggableElementContainerGraph.addCells([graphNode]); draggableElementContainerPaper.on('cell:pointerdown', function(cellView, e, x, y) { jQuery('body').append('

'); var flyGraph = new joint.dia.Graph, flyPaper = new joint.dia.Paper({ el: jQuery('#flyPaper'), model: flyGraph, height: 100, width:110, interactive: false }), flyShape = cellView.model.clone(), pos = cellView.model.position(), offset = { x: x - pos.x, y: y - pos.y }; flyShape.position(15, 10); flyShape.prop = 1; flyGraph.addCell(flyShape); jQuery("#flyPaper").offset({ left: e.pageX - offset.x, top: e.pageY - offset.y }); jQuery('body').on('mousemove.fly', function(e) { jQuery("#flyPaper").offset({ left: e.pageX - offset.x, top: e.pageY - offset.y }); }); jQuery('body').on('mouseup.fly', function(e) { var x = e.pageX, y = e.pageY, target = paper.$el.offset(); // Dropped over paper ? if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) { var s = flyShape.clone(); s.position(x - target.left - offset.x, y - target.top - offset.y); graph.addCell(s); } jQuery('body').off('mousemove.fly').off('mouseup.fly'); flyShape.remove(); jQuery('#flyPaper').remove(); }); }); }