Spaces:
Running
Running
File size: 3,394 Bytes
34e0b30 | 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | /**
* 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
|