JSFiddle - React, Tailwind, and code Playground

by djatha

HTML

<link rel="stylesheet" href="http://draw2d.org/draw2d_touch/jsdoc/draw2d/examples/code_snippets/shape/css/example.css">
<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/jquery-touch_punch.js"></script>
<script src="http://draw2d.org/draw2d_touch/jsdoc/draw2d/lib/jquery.contextmenu.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 id="canvas"></div>

JavaScript

var canvas = new draw2d.Canvas("canvas");
var rect = new draw2d.shape.basic.Rectangle({
    x: 70,
    y: 70,
    width: 150,
    height: 150,
    bgColor: "none",
    stroke: 3,
    color: "#FF0000"
});
canvas.add(rect);

start = new draw2d.shape.node.Start({x:10, y:10});
end = new draw2d.shape.node.End({x:150, y:150});
canvas.add(start);
canvas.add(end);
		 
c = new draw2d.Connection({
	router: new draw2d.layout.connection.DirectRouter(),     source: start.getOutputPort(0),
    target:end.getInputPort(0),
    stroke: 4
});
canvas.add(c);

var setAColor = function(c) {
    console.log(c);
    if (c.hashString === "#FF0000") {
        return "#00FF00";
    } else {
        return "#FF0000";
    }
};
c.on("click", function() {
    rect.setColor(setAColor(rect.getColor()));
});