matt-dale/draw2d_example_template.html

## draw2d_example_template.html
<!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>
	<!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>