wbo1/client-data/tools/grid/grid.js

/**
 *                        WHITEBOPHIR
 *********************************************************
 * @licstart  The following is the entire license notice for the
 *  JavaScript code in this page.
 *
 * Copyright (C) 2020  Ophir LOJKINE
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend
 */

(function grid() { //Code isolation

    var index = 0; //grid off by default
    var states = ["none", "url(#grid)", "url(#dots)"];

    function toggleGrid(evt) {
        index = (index + 1) % states.length;
        gridContainer.setAttributeNS(null, "fill", states[index]);
    }

    function createPatterns() {
        // create patterns
        // small (inner) grid
        var smallGrid = Tools.createSVGElement("pattern", {
            id: "smallGrid",
            width: "30",
            height: "30",
            patternUnits: "userSpaceOnUse"
        });
        smallGrid.appendChild(
            Tools.createSVGElement("path", {
                d: "M 30 0 L 0 0 0 30",
                fill: "none",
                stroke: "gray",
                'stroke-width': "0.5"
            })
        );
        // (outer) grid
        var grid = Tools.createSVGElement("pattern", {
            id: "grid",
            width: "300",
            height: "300",
            patternUnits: "userSpaceOnUse"
        });
        grid.appendChild(Tools.createSVGElement("rect", {
            width: "300",
            height: "300",
            fill: "url(#smallGrid)"
        }));
        grid.appendChild(
            Tools.createSVGElement("path", {
                d: "M 300 0 L 0 0 0 300",
                fill: "none",
                stroke: "gray", 'stroke-width': "1"
            })
        );
        // dots
        var dots = Tools.createSVGElement("pattern", {
            id: "dots",
            width: "30",
            height: "30",
            x: "-10",
            y: "-10",
            patternUnits: "userSpaceOnUse"
        });
        dots.appendChild(Tools.createSVGElement("circle", {
            fill: "gray",
            cx: "10",
            cy: "10",
            r: "2"
        }));

        var defs = Tools.svg.getElementById("defs");
        defs.appendChild(smallGrid);
        defs.appendChild(grid);
        defs.appendChild(dots);
    }

    var gridContainer = (function init() {
        // initialize patterns
        createPatterns();
        // create grid container
        var gridContainer = Tools.createSVGElement("rect", {
            id: "gridContainer",
            width: "100%", height: "100%",
            fill: states[index]
        });
        Tools.svg.insertBefore(gridContainer, Tools.drawingArea);
        return gridContainer;
    })();

    Tools.add({ //The new tool
        "name": "Grid",
        "shortcut": "g",
        "listeners": {},
        "icon": "tools/grid/icon.svg",
        "oneTouch": true,
        "onstart": toggleGrid,
        "mouseCursor": "crosshair",
    });

})(); //End of code isolation