gistfile1.txt

/**
 * An individual cell's surface
 * @author Michael Harris
 */
Sudoku.CellSurface = SC.View.extend({

    updateDisplay: function() {
        console.log('cell update display ');
        var psurface = SC.psurfaces[this.__id__],
            canvas = psurface ? psurface.__element__ : null,
            ctx = canvas ? canvas.getContext('2d') : null,
            w, i, j, base03;

        if (!ctx) return;
        SC.Benchmark.start('cellUpdateDisplay');

        w = canvas.width, h = canvas.height,
            i = this.get('i'),
            j = this.get('j'),
            base03 = "#002b36";

        ctx.save();

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

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

        if (j === 2 || j === 5) {
            ctx.beginPath();
            ctx.lineTo(0, h - 1);
            ctx.lineTo(w, h - 1);
            ctx.closePath();
            ctx.stroke();
        }

        if (i === 2 || i === 5) {
            ctx.beginPath();
            ctx.lineTo(w - 1, 0);
            ctx.lineTo(w - 1, h);
            ctx.closePath();
            ctx.stroke();
        }


        if (!this._layersCreated) this._createLayers();
//
//        this.get('layers').invoke('updateDisplay');

        SC.Benchmark.end('cellUpdateDisplay');
        ctx.restore();
    },

    _createLayers: function() {
        this._layersCreated = true;

        var layers = this.get('layers'),
            frame = this.get('frame'),
            w = frame[2],
            h = frame[3];

//        this._valueLayer = Sudoku.ValueLayer.create({
////            layout: {top: 0, left: 0, right: 0, bottom: 0}
//        });
        this._valueLayer = SC.TextLayer.create({
            layout: {top: 0, left: 0, right: 0, bottom: 0},
            value: '5',
            font: "30pt Calibri",
            textAlign: 'center',
            lineHeight: h
        });
//        this._valueLayer.set('frame', SC.MakeRect(0, 0, w, h));
//        console.log('layer frame', SC.MakeRect(0, 0, w, h));

        layers.pushObject(this._valueLayer);
    }

});