draw connector on two mouse clicks in javascript -
i have below code have dynamically created circles drag-gable. need create connector between 2 drag-gable circles using js. using d3 library. on click co ordinates not sure how proceed further. when 2 clicks on of dynamically created circles 1 connector should created , should drag-gable.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <style type="text/css"> .mybutton { background:#0000ff; width:40px; height:40px; border-radius:20px; -khtml-user-drag: element; -webkit-user-drag: element; } #root { background:#ffff00; } #service{ background:#00ff00; } #divcontainer, #divresize { border:dashed 1px #ccc; width:120px; height:120px; padding:5px; margin:5px; font:13px arial; cursor:move; float:left } .division{ border:solid 3px #ccc; width:90%; height:750px; float:right; } </style> </head> <body> <div id="drawarea" class="division" ></div> <div id="firstdivision" > <form id="test2"> <input type="button" id="root" class="mybutton" /> root <p> <input type="button" id="service" class="mybutton"/ > service<p> <input type="button" id="action1" class="mybutton" draggable="true"/ > action </form> </div> <canvas id="example" class="division"> </canvas> <script type="text/javascript"> // create svg canvas var svg = d3.select("#drawarea") .append("svg") .attr("width", 700) .attr("height", 500); //drag nodes var drag = d3.behavior.drag() .on("dragstart", function() { d3.event.sourceevent.stoppropagation(); d3.select(this).classed("dragging", true); }) .on("drag", dragmove) .on("dragend",dragended); //first circle var g1 = svg.append("g") .attr("transform", "translate(" + 150 + "," + 100 + ")") .attr("class", "first") .call(drag) .append("circle").attr({ r: 20, }) .style("fill", "#ffff00") //second cicle var g2 = svg.append("g") .attr("transform", "translate(" + 250 + "," + 300 + ")") .attr("class", "second") .call(drag) .append("circle").attr({ r: 20, }) .style("fill", "#00ff00") svg.on('dblclick', function() { var coords = d3.mouse(this); console.log(coords); drawcircle(coords[0], coords[1]); }); svg.on('click',function(){ var coords = d3.mouse(this); var classfirst = d3.select(this).attr("class"); drawconnector(coords[0], coords[1]); }); //draw connector function drawconnector(x, y) { var c=document.getelementbyid("example"); var ctx=c.getcontext("2d"); ctx.beginpath(); ctx.moveto(150,100); ctx.lineto(250,300); ctx.stroke(); } //third circle on click function drawcircle(x, y) { var g2 = svg.append("g") .attr("transform", "translate(" + x + "," + y + ")") .attr("class", "action") .call(drag) .append("circle").attr({ r: 20, }) .style("fill", "#00f"); } //drag handler function dragmove(d) { var x = d3.event.x; var y = d3.event.y; d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); if(d3.select(this).attr("class") == "first") { /*line.attr("x1", x); line.attr("y1", y);*/ d3.select(this).attr("cx", x); d3.select(this).attr("cy", y); } else { d3.select(this).attr("cx", x); d3.select(this).attr("cy", y); /*line.attr("x2", x); line.attr("y2", y);*/ } } function dragended(d) { d3.select(this).classed("dragging", false); } </script> </body> </html>
g1 , g2 being set circle elements weren't usable without adjustment. can use g1 , g2 translation's of circle containers , use draw line.
// create svg canvas var svg = d3.select("#drawarea") .append("svg") .attr("width", 700) .attr("height", 500); //drag nodes var drag = d3.behavior.drag() .on("dragstart", function() { d3.event.sourceevent.stoppropagation(); d3.select(this).classed("dragging", true); }) .on("drag", dragmove) .on("dragend", dragended); // added c1 , c2 below. g1 , g2 being set circles. //first circle var g1 = svg.append("g") .attr("transform", "translate(" + 150 + "," + 100 + ")") .attr("class", "first") .call(drag); var c1= g1.append("circle").attr({ r: 20, }) .style("fill", "#ffff00") //second cicle var g2 = svg.append("g") .attr("transform", "translate(" + 250 + "," + 300 + ")") .attr("class", "second") .call(drag); var c2 = g2.append("circle").attr({ r: 20, }) .style("fill", "#00ff00"); // add line element var line = svg.append("line") .attr({x1: 150, y1: 100, x2: 250, y2: 300}) .attr({"stroke-width": 2, stroke: "red"}); svg.on('dblclick', function() { var coords = d3.mouse(this); console.log(coords); drawcircle(coords[0], coords[1]); }); svg.on('click', function() { var coords = d3.mouse(this); var classfirst = d3.select(this).attr("class"); drawconnector(coords[0], coords[1]); }); //draw connector function drawconnector(g1, g2) { // move line transforms of g elements. var t1 = g1.attr("transform").replace(/[^\d.,]/g, "").split(","); var t2 = g2.attr("transform").replace(/[^\d.,]/g, "").split(","); line.attr({x1: t1[0], y1: t1[1], x2: t2[0], y2: t2[1]}); } //third circle on click function drawcircle(x, y) { var g2 = svg.append("g") .attr("transform", "translate(" + x + "," + y + ")") .attr("class", "action") .call(drag) .append("circle").attr({ r: 20, }) .style("fill", "#00f"); } //drag handler function dragmove(d) { var x = d3.event.x; var y = d3.event.y; d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); if (d3.select(this).attr("class") == "first") { /*line.attr("x1", x); line.attr("y1", y);*/ d3.select(this).attr("cx", x); d3.select(this).attr("cy", y); } else { d3.select(this).attr("cx", x); d3.select(this).attr("cy", y); /*line.attr("x2", x); line.attr("y2", y);*/ } drawconnector(g1, g2); } function dragended(d) { d3.select(this).classed("dragging", false); }
.mybutton { background: #0000ff; width: 40px; height: 40px; border-radius: 20px; -khtml-user-drag: element; -webkit-user-drag: element; } #root { background: #ffff00; } #service { background: #00ff00; } #divcontainer, #divresize { border: dashed 1px #ccc; width: 120px; height: 120px; padding: 5px; margin: 5px; font: 13px arial; cursor: move; float: left } .division { border: solid 3px #ccc; width: 90%; height: 750px; float: right; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <div id="drawarea" class="division"></div> <div id="firstdivision"> <form id="test2"> <input type="button" id="root" class="mybutton" />root <p> <input type="button" id="service" class="mybutton" />service <p> <input type="button" id="action1" class="mybutton" draggable="true" />action </form> </div> <canvas id="example" class="division"></canvas> </body> </html>
Comments
Post a Comment