automatica-draw2d
Version:
JS drag&drop lib
120 lines (91 loc) • 4.51 kB
HTML
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, , maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link type="text/css" rel="stylesheet" href="./css/example.css" />
<script src="./lib/jquery.js"></script>
<script src="./lib/jquery-ui.js"></script>
<script src="../automatica-draw2d.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<script src="./lib/bootstrap-select.js"></script>
<script type="text/javascript">
var createStandardConnection= function(locator, flowDirection){
var connection = new draw2d.Connection();
var label = new draw2d.shape.basic.Label({text:"I'm a Label", stroke:1, color:"#FF0000", fontColor:"#0d0d0d"});
connection.add(label, locator);
connection.setStroke(2);
connection.setOutlineStroke(0);
connection.setOutlineColor("#303030");
connection.setRouter(null);
connection.setColor("#91B93E");
connection.setDashArray("--");
connection.setDasharrayOffset(200);
connection.setAnimate(true);
connection.setAnimateDirection(flowDirection);
return connection;
}
var createConnection=function(sourcePort, targetPort, callback, dropTarget){
// get the coordinate of the drop target element to place the context menu in a propper
// way
//
var pos = dropTarget.getAbsolutePosition();
var context = $('<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">'+
'<li><a data-locator="draw2d.layout.locator.ParallelMidpointLocator" tabindex="-1" href="#">Parallel Label</a></li>'+
'<li><a data-locator="draw2d.layout.locator.ManhattanMidpointLocator" tabindex="-1" href="#">Horizontal Label</a></li>'+
'</ul>');
$("body").append(context);
context.show()
.css({left:pos.x, top:pos.y})
.find("a").on("click", function(){
context.remove();
var locator = eval("new "+$(this).data("locator")+"()");
var connection = createStandardConnection(locator);
callback(connection);
});
};
document.addEventListener("DOMContentLoaded",function () {
// Create the paint area. The id in the constructor must be
// an existing DIV
var canvas = new draw2d.Canvas("gfx_holder");
var start, start2;
var end, end2;
canvas.add( new draw2d.shape.node.Start(), 50,150);
canvas.add( start= new draw2d.shape.node.Start(), 50,250);
canvas.add( new draw2d.shape.node.Start(), 50,350);
canvas.add( start2 =new draw2d.shape.node.Start(), 50,450);
canvas.add( end = new draw2d.shape.node.End(), 300,150);
canvas.add( new draw2d.shape.node.End(), 300,250);
canvas.add( new draw2d.shape.node.End(), 300,350);
canvas.add( end2 = new draw2d.shape.node.End(), 300,450);
// Create a Connection and connect the Start and End node
//
var c = createStandardConnection(new draw2d.layout.locator.ParallelMidpointLocator(), true);
c.setSource(start.getOutputPort(0));
c.setTarget(end.getInputPort(0));
canvas.add(c);
var c2 = createStandardConnection(new draw2d.layout.locator.ParallelMidpointLocator(), false);
c2.setSource(start2.getOutputPort(0));
c2.setTarget(end2.getInputPort(0));
canvas.add(c2);
/////////////////////////////////////////////////////////////////////
// THIS IS ONLY FOR THE ARROW AND THE POST-IT
/////////////////////////////////////////////////////////////////////
var msg = new draw2d.shape.note.PostIt({text:"Drag&Drop the blue box and notice the label.\nIt sticks always in the middle of the connector.\nCreate new a connection to choose the kind of locator."});
canvas.add(msg, 20,20);
/*
canvas.installEditPolicy( new draw2d.policy.connection.DragConnectionCreatePolicy({
createConnection: createConnection
}));
*/
});
</script>
</head>
<body>
<div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:1500px; height:1500px; ">
</div>
</body>
</html>