Published
Edited
Jun 29, 2022
<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top;">
<div id="draggableElementContainerPaper" style="border: solid 1px black; margin: 20px;"></div>
</span>
<span style="width:5%"></span>
<span style="display: inline-block; vertical-align: top;">
<div id="paper" style="border: solid 1px black; margin: 20px;"></div>
</span>
</div>
lodash = require("lodash@3.10.1")
backbone = require("backbone@1.3.3")
joint = require("jointjs@1.1.0")
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: [
'<path class="connection" stroke="black" d="M 0 0 0 0"/>',
'<path class="connection" stroke= "#fe854f" stroke-width= "4" />',
'<path class="marker-target" fill="#fe854f" stroke="#fe854f" d="M 10 0 L 0 5 L 10 10 z"/>',
'<path class="connection-wrap" d="M 0 0 0 0"/>',
'<g class="labels"/>',
'<g class="marker-vertices"/>',
'<g class="marker-arrowheads"/>',
'<g class="link-tools"/>'
].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('<div id="flyPaper" style="position:relative;opacity:0.4;pointer-event:none;"></div>');
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();
});
});
}
`html
<style type="text/css">
body {
font-family: 'PT Serif', serif;
font-size: 24px;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
