JSFiddle - React, Tailwind, and code Playground

by ipoly

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app ng-controller='myCtrl'>
    <select name="arrowType" class='input-mini' ng-options='c.name for c in colors'></select>
    <select name="arrowWidth" class='input-mini'></select>
    <select name="arrowLength" class='input-mini'></select>
    <div id="canvas"></div>
</div>

JavaScript

function myCtrl($scope){
     $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
    $scope.arrowTypes = ["classic","block","open","oval","diamond","none"]
    $scope.arrowWidthes = ["wide","narrow","midium"];
    $scope.arrowLengthes = ["long","short","midium"];
    paper = Raphael('canvas', 500, 500);
    path = paper.path('M10,20 T50,60');
    path.attr({
        'stroke-width': 4 ,
        'arrow-end': 'clasic'
    })
}