React and Canvas Arrows Test

by Trever Shick

HTML

<script src="https://dl.dropboxusercontent.com/u/7812537/datascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/immutable/3.6.4/immutable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script>
<div id="output"></div>
<script src="https://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
    font-family:verdana;
    font-size:10pt;
}

table {
    width:100%;
    border-collapse: collapse;
}
td {
    padding:5px;
    border: 1px solid grey;
}
div.pill {
    border:1px solid grey;
    border-left: 5px solid blue;
    padding:5px;
}
div.progress {
    font-size:0.8em;
    border:1px solid #c7c7c7;
}

JavaScript 1.7

Util = (new function() {
    this.circleAt = function(context, point,radius) {
        context.save();
        context.beginPath();
        context.arc(point.x, point.y, radius, 0, 2 * Math.PI, false);
        context.fill();
        context.restore();
    };
    
    this.drawArrowHead = function(context, from, to) {
        var headlen = 10;   // length of head in pixels
        var angle = Math.atan2(to.y-from.y,to.x-from.x);
        var alx = to.x-headlen*Math.cos(angle-Math.PI/6),
            aly = to.y-headlen*Math.sin(angle-Math.PI/6);
            
        var arx = to.x-headlen*Math.cos(angle+Math.PI/6),
            ary = to.y-headlen*Math.sin(angle+Math.PI/6);
            
        var asx = to.x-headlen*.7*Math.cos(angle),
            asy = to.y-headlen*.7*Math.sin(angle);
        context.moveTo(to.x,to.y);
        context.lineTo(alx,aly);
        context.lineTo(asx,asy);
        context.lineTo(arx,ary);
        context.lineTo(to.x,to.y);
        context.fill();
    };
    
    this.slope=function(from,to) {
        return Math.abs((from.y-to.y) / (from.x-to.x));
    };
    
    return this;
});


function Basic3ByPortModel() {
    return this;
}

    
Basic3ByPortModel.prototype.centerOfRect = function(r) {
    return {
        x: r.left + ((r.right - r.left) / 2), 
        y: r.top + ((r.bottom-r.top)/2)
    };
};

Basic3ByPortModel.prototype.rightCenterOfRect = function(rect) {
    return {
        x: rect.right, 
        y: this.centerOfRect(rect).y
    };
};
    
Basic3ByPortModel.prototype.leftCenterOfRect = function(rect) {
        return {
            x: rect.left, 
            y: this.centerOfRect(rect).y
        };
    };
    
Basic3ByPortModel.prototype.topCenterOfRect = function(rect){
        return {
            x: this.centerOfRect(rect).x,
            y: rect.top
        };
    };
    
Basic3ByPortModel.prototype.bottomCenterOfRect = function(rect){
        return {
            x: this.centerOfRect(rect).x,
            y: rect.bottom
    ...