gistfile1.txt

Sudoku.CellSurface = SC.View.extend(SC.ContentDisplay, {
    contentDisplayProperties: ['value'],
    content: null,

    init: function() {
        sc_super();
        var layers = this.get('layers');

        this._valueLayer = Sudoku.ValueLayer.create({
            layout: {top: 0, left: 0, right: 0, bottom: 0}
        });

        layers.pushObject(this._valueLayer);
    },

    coDidChange: function(){
        console.log('cell content changed'); //  not firing!!
//        this.triggerRendering();
    }.observes('*content'),


    willRenderLayers: function(ctx) {
//        console.log('willRenderLayers ', this.get('content'), this.getPath('content.value'));
        SC.Benchmark.start('cellUpdateDisplay');

        var w = this.get('frame')[2],
            h = this.get('frame')[3],
            i = this.get('i'),
            j = this.get('j'),
            base03 = "#002b36";


//        if(!ctx.width || !ctx.height) return;
//        console.log('ctx.width and height', ctx.width, ctx.height)
        ctx.save();

        // Clear background.
        ctx.fillStyle = base03;
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "#aaa";
        ctx.strokeRect(0, 0, w, h);

        // top line
        if (i === 0) {
            ctx.beginPath();
            ctx.lineTo(0, 1);
            ctx.lineTo(w, 1);
            ctx.closePath();
//            ctx.strokeStyle = "#aaa";
            ctx.stroke();
        }

        // left line
        if (j === 0) {
            ctx.beginPath();
            ctx.lineTo(1, 1);
            ctx.lineTo(1, h);
            ctx.closePath();
//            ctx.strokeStyle = "#aaa";
            ctx.stroke();
        }

        // vertical lines, every 3x3
        if (i === 2 || i === 5 || i === 8) {
            ctx.beginPath();
            ctx.lineTo(0, h - 1);
            ctx.lineTo(w, h - 1);
            ctx.closePath();
            ctx.stroke();
        }

        // horizontal lines, every 3x3
        if (j === 2 || j === 5 || j === 8) {
            ctx.beginPath();
            ctx.lineTo(w - 1, 0);
            ctx.lineTo(w - 1, h);
            ctx.closePath();
            ctx.stroke();
        }

        ctx.restore();

        this._valueLayer.set('value', this.getPath('content.value'));
        SC.Benchmark.end('cellUpdateDisplay');
    }
});