lib/sugar-web/graphics/grid.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

define(function () {
    var grid = {};

    // Add a grid overlay with lines spaced by subcellSize, for visual
    // debugging.  This is useful while doing the activity layout or
    // while developing widgets.
    grid.addGrid = function (subcellSize) {
        var canvas = document.createElement('canvas');
        canvas.className = "grid";
        document.body.appendChild(canvas);

        var updateGrid = function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#00FFFF";

            var subcellsVertical = window.innerHeight / subcellSize;
            for (i = 0; i < subcellsVertical; i++) {
                if ((i + 1) % 5 === 0) {
                    ctx.lineWidth = 1;
                } else {
                    ctx.lineWidth = 0.5;
                }
                ctx.beginPath();
                ctx.moveTo(0, subcellSize * (i + 1));
                ctx.lineTo(canvas.width, subcellSize * (i + 1));
                ctx.stroke();
            }

            var subcellsHorizontal = window.innerWidth / subcellSize;
            for (i = 0; i < subcellsHorizontal; i++) {
                if ((i + 1) % 5 === 0) {
                    ctx.lineWidth = 1;
                } else {
                    ctx.lineWidth = 0.5;
                }
                ctx.beginPath();
                ctx.moveTo(subcellSize * (i + 1), 0);
                ctx.lineTo(subcellSize * (i + 1), canvas.height);
                ctx.stroke();
            }
        };

        updateGrid();

        window.onresize = function (event) {
            updateGrid();
        };
    };

    return grid;
});