Emberjs and Raphael - Icon Sketch

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://gist.github.com/raw/4520982/c707b0a86a7e3665cd7722aa7013f37d8040f202/ember-latest-20130113.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application
    {{outlet drawingPane}}
</script>
<script type="text/x-handlebars" data-template-name="drawingPane">
    {{view Em.TextField valueBinding="gridSize"}}
    <div class="paper"></div>
</script>

CSS

body {
    background-image: url(http://handlebarsjs.com/images/noise.png);
    background-image: url("http://handlebarsjs.com/images/noise.png");
}
a {
    cursor: pointer;
}
.paper{
    width:100%;
    height:100%;
}

JavaScript

$(function(){    
	//Bind Application name to window
    window.App = Em.Application.create({
        autoInit: false
    })
    
    //Create Application controller, view and router
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({});
  
    App.Router.map(function(match){
        match("/").to("index")
    });
    
    App.IndexRoute = Em.Route.extend({
        renderTemplate: function(){
            var controller = this.controllerFor('drawingPane');
            this.render('drawingPane', {outlet:'drawingPane', controller:controller});
        }
    })
    
    App.DrawingPane = Em.Object.create({
        content:[],
        gridSize : 10
    });
    App.DrawingPaneController = Em.Controller.extend();
    App.DrawingPaneView = Em.View.extend({
        contentBinding:App.DrawingPane.content,
        gridSizeBinding : "App.DrawingPane.gridSize",
        classNames:["drawingPane"],
        didInsertElement:function(){
            this._super();
            this.redrawGrid();
            
        },
        redrawGrid:function(){
            
            var paper = Raphael(this.$('.paper')[0]);
            var gs = this.get('gridSize');
            var pw = this.$('.paper').width();
            var ph = this.$('.paper').height();
            for (var i = 0; i < Math.round(pw/gs); i++){
                console.log("p="+'M0 '+(i*gs)+"L"+pw+" "+(i*gs));
                var p = paper.path('M0 '+(i*gs)+"L"+pw+" "+(i*gs));
                $(p.node).attr('id', 'grid_x_'+(i*gs));
            }
            for (var i = 0; i < Math.round(ph/gs); i++){
                console.log("p="+'M'+(i*gs)+" 0L"+(i*gs)+" "+ph );
                var p = paper.path('M'+(i*gs)+" 0L"+(i*gs)+" "+ph )
                $(p.node).attr('id', 'grid_y_'+(i*gs));
            }
            $(this.$('.paper')[0]).on('mousemove', function(e){
                console.log("mouse pos { x:", e.offsetX, ", y:", e.offsetY, " }");
               ...