Skip to content

Instantly share code, notes, and snippets.

@matt-dale
Created February 26, 2017 15:43
Show Gist options
  • Save matt-dale/9c5b513ce8b71f3adb3407f57b5d7521 to your computer and use it in GitHub Desktop.
Save matt-dale/9c5b513ce8b71f3adb3407f57b5d7521 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="draw2d/lib/shifty.js"></script>
<script type="text/javascript" src="draw2d/lib/raphael.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Minimal HEAD, as you work through the documentation exmaples, more libraries will need to be added -->
<!--<script type="text/javascript" src="draw2d/lib/jquery.autoresize.js"></script>-->
<!--<script type="text/javascript" src="draw2d/lib/jquery-touch_punch.js"></script>-->
<!--<script type="text/javascript" src="draw2d/lib/rgbcolor.js"></script>-->
<!--<script type="text/javascript" src="draw2d/lib/canvg.js"></script> -->
<!--<script type="text/javascript" src="draw2d/lib/json2.js"></script>-->
<!--<script type="text/javascript" src="draw2d/lib/pathfinding-browser.min.js"></script>-->
<script type="text/javascript" src="draw2d/lib/Class.js"></script>
<script type="text/javascript" src="draw2d/lib/draw2d.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// This example shows the very basic functionality of draw2d based on the
// First Documentation Example:
// http://draw2d.org/draw2d_touch/jsdoc_6/draw2d/examples/code_snippets/shape/index.html
var canvas = new draw2d.Canvas("example_canvas"); // 'example_canvas' is the ID of the Canvas element in HTML
// you can add basic shapes simply like this
// These are just simple shapes that don't have Ports on them
canvas.add( new draw2d.shape.basic.Oval(),220,100);
canvas.add( new draw2d.shape.basic.Rectangle(),220,180);
// look at the source for Node.js in the src/shape/node folder
// Nodes are basic figures with Ports on them that can be connected
// This demonstration renders 4 Nodes that can be connected together
// Notice how you can't connect a Start Node to a Start Node
canvas.add( new draw2d.shape.node.Start(), 60,80);
canvas.add( new draw2d.shape.node.Start(), 60,200);
canvas.add( new draw2d.shape.node.End(), 350,80);
canvas.add( new draw2d.shape.node.End(), 350,200);
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="row">
<div class="col-md-12">
<div onselectstart="javascript:/*IE8 hack*/return false" id="example_canvas" style="cursor: default; height:600px;"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment