JSFiddle - React, Tailwind, and code Playground

by David Rocha de Almeida Martinelli

HTML

<div id="angular-test" style="margin: 10px" ng-app>
  <div ng-controller="CanvasCtrl">
    <h1>Angular test</h1>     
    <form ng-submit="addData()">
      <input ng-model="x"  size="2" placeholder="X" required type="number" min="0" max="600">
      <input ng-model="y"  size="2" placeholder="Y" required type="number" min="0" max="400">
      <input ng-model="amount"  size="3" placeholder="Amount" required type="number" min="5" max="100">
      <input class="btn-primary" type="submit" value="Add point">
    </form>
    <canvas id="canvas" style="border: 1px gray solid; float: left"></canvas>
    <div id="list" style="margin-left: 620px; float; left">
        Points:
        <ul>
            <li ng-repeat="point in data">
                [{{point.x}}, {{point.y}}] <a ng-click="removePoint(point)">[x]</a>
            </li>
        </ul>
    </div>
    <div style="clear: both"/>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<style>

JavaScript

var counter = 0;
function CanvasCtrl($scope) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    $scope.data = [
       
    ];
    
    $scope.addData = function() {
        var id = 0;
        if($scope.data.length > 0) {
            id = $scope.data[$scope.data.length-1].id + 1;
        }
        var p = {id: id, x: $scope.x, y: $scope.y, amount: $scope.amount};
        $scope.data.push(p);
        $scope.x = '';
        $scope.y = '';
        $scope.amount = '';
        draw($scope.data);
    };
    
    $scope.removePoint = function(point) {
        console.log(point);
        for(var i=0; i<$scope.data.length; i++) {
            if($scope.data[i].id === point.id) {
                console.log("removing item at position: "+i);
                $scope.data.splice(i, 1);    
            }
        }
        
        context.clearRect(0,0,600,400);
        draw($scope.data);
        console.log($scope.data);
    }
    
    function draw(data) {
        for(var i=0; i<data.length; i++) {
            drawDot(data[i]);
            if(i > 0) {
                drawLine(data[i], data[i-1]);
            }
        }
    }
    
    function drawDot(data) {
        context.beginPath();
        context.arc(data.x, data.y, data.amount, 0, 2*Math.PI, false);
        context.fillStyle = "#ccddff";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "#666666";
        context.stroke();  
    }
    
    function drawLine(data1, data2) {
        context.beginPath();
        context.moveTo(data1.x, data1.y);
        context.lineTo(data2.x, data2.y);
        context.strokeStyle = "black";
        context.stroke();
    }
    
    // setup
    canvas.width = 600;
    canvas.height = 400;
    context.globalAlpha = 1.0;
    context.beginPath();
    draw($scope.data);    
}