JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="newAnalysis();return(false)">Create Analysis></button>
<div id="canvas_container"></div>
CSS
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
JavaScript
document.paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
function newAnalysis() {
var elements = [];
var connections = [];
this.Analysis = document.paper.rect(20, 20, 60, 40).attr({
fill: "#ff0",
});
var CloseBox = document.paper.rect(70, 20, 10, 10).attr({
cursor: "pointer",
fill: "#f00",
});
var FlowCircle = document.paper.circle(48, 60, 5).attr({
cursor: "pointer",
fill: "#ff0",
});
elements.push(Analysis);
elements.push(CloseBox);
elements.push(FlowCircle);
var Thing = document.paper.set();
Thing.push(
Analysis, CloseBox, FlowCircle);
CloseBox.node.onclick = function() {
Thing.remove();
}
FlowCircle.node.onmouseover = function() {
FlowCircle.attr({
fill: "#f00"
});
}
FlowCircle.node.onmouseout = function() {
FlowCircle.attr({
fill: "#ff0"
});
}
FlowCircle.node.onmousedown = function() {
// newDataflow();
}
var dragger = function() {
for (var i = 0; i < elements.length; i++) {
elements[i].ox = elements[i].type == "rect" ? elements[i].attr("x") : elements[i].attr("cx");
elements[i].oy = elements[i].type == "rect" ? elements[i].attr("y") : elements[i].attr("cy");
elements[i].animate({
"fill-opacity": .2
}, 500);
}
}
var move = function(dx, dy) {
// Move all elements
for (var i = 0; i < elements.length; i++) {
var att = elements[i].type == "rect" ? {
x: elements[i].ox + dx,
y: elements[i].oy + dy
} : {
cx: elements[i].ox + dx,
cy: elements[i].oy + dy
};
elements[i].attr(att);
}
}
var up = function() {
for (var i = 0; i < elements.length; i++) {
elements[i].animate({
...