JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/shifty.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/raphael.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery-1.10.2.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery.autoresize.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/rgbcolor.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/canvg.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/Class.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/json2.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/pathfinding-browser.min.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc_5/draw2d/src/draw2d.js"></script>
<div onselectstart="javascript:/*IE8 hack*/return false" id="container" style="width:500px; height:500px;-webkit-tap-highlight-color: rgba(0,0,0,0);" class="ui-widget-content"></div>

JavaScript

$(function() {
  var draw2DCanvas = new draw2d.Canvas("container");
  draw2DCanvas.setScrollArea($(window));

  var rect1 = new draw2d.shape.basic.Rectangle({
    width: 60,
    height: 50,
    bgColor: "#00FF00"
  });
  var rect2 = new draw2d.shape.basic.Rectangle({
    width: 70,
    height: 40,
    bgColor: "#FF0000"
  });

  draw2DCanvas.addFigure(rect1, 50, 50);
  draw2DCanvas.addFigure(rect2, 150, 100);

  rect1.on("dragstart", function(event, ui) {
    console.log("Dragging rect1...", ui);
  });

  rect2.onDragStart = function(x, y, shiftKey, ctrlKey) {
    console.log("Dragging rect2...", x, y, shiftKey, ctrlKey);
  };
});