Grid appearance setting

app/content/pencil/canvasHelper/canvasImpl.js

@@ -17,14 +17,35 @@ CanvasImpl.setupGrid = function () {
         var grid = Pencil.getGridSize();
         if (grid.w > 0 && grid.h > 0) {
             var z = this.zoom ? this.zoom : 1;
-            for (var i = 1; i < this.width * z; i += grid.w * z) {
-                var line = document.createElementNS(PencilNamespaces.svg, "svg:line");
-                line.setAttribute("x1", i);
-                line.setAttribute("y1", 0);
-                line.setAttribute("x2", i);
-                line.setAttribute("y2", this.height * z);
-                line.setAttribute("style", "stroke-dasharray: 1," + (grid.h - 1) * z + ";");
-                this.gridContainer.appendChild(line);
+
+            if (Config.get("edit.gridAppearance") === 'dots') {
+                for (var i = 1; i < this.width * z; i += grid.w * z) {
+                    var line = document.createElementNS(PencilNamespaces.svg, "svg:line");
+                    line.setAttribute("x1", i);
+                    line.setAttribute("y1", 0);
+                    line.setAttribute("x2", i);
+                    line.setAttribute("y2", this.height * z);
+                    line.setAttribute("style", "stroke-dasharray: 1," + (grid.h - 1) * z + ";");
+                    this.gridContainer.appendChild(line);
+                }
+            } else {
+                for (var i = 1; i < this.width * z; i += grid.w * z) {
+                    var line = document.createElementNS(PencilNamespaces.svg, "svg:line");
+                    line.setAttribute("x1", i);
+                    line.setAttribute("y1", 0);
+                    line.setAttribute("x2", i);
+                    line.setAttribute("y2", this.height * z);
+                    this.gridContainer.appendChild(line);
+                }
+
+                for (var i = 1; i < this.height * z; i += grid.h * z) {
+                    var line = document.createElementNS(PencilNamespaces.svg, "svg:line");
+                    line.setAttribute("x1", 0);
+                    line.setAttribute("y1", i);
+                    line.setAttribute("x2", this.width * z);
+                    line.setAttribute("y2", i);
+                    this.gridContainer.appendChild(line);
+                }
             }
         }
     }

app/content/pencil/settingDialog.js

@@ -16,6 +16,7 @@ handleOnLoad = function () {
     document.getElementById("undoEnabled").checked = Config.get("view.undoLevel") > 0;
     document.getElementById("labelGridSize").disabled = Config.get("grid.enabled") == false;
     document.getElementById("textboxGridSize").disabled = Config.get("grid.enabled") == false;
+    document.getElementById("menuGridAppearance").disabled = Config.get("grid.enabled") == false;
 
     document.getElementById("enableSnappingBackground").disabled = Config.get("object.snapping.enabled") == false;
 

app/content/pencil/settingDialog.xul

@@ -31,6 +31,8 @@
             name="pencil.config.edit.gridSize" type="int" instantApply="true" />
         <preference id="pencil-snapToGrid"
             name="pencil.config.edit.snap.grid" type="bool" instantApply="true" />
+        <preference id="pencil-gridAppearance"
+            name="pencil.config.edit.gridAppearance" type="string" instantApply="true" />
         <preference id="pencil-objectSnappingEnabled"
             name="pencil.config.object.snapping.enabled" type="bool" instantApply="true" />
         <preference id="pencil-objectSnappingBackground"
@@ -91,6 +93,12 @@
                                             preference="pencil-gridEnabled"/>
                                     <label value="&label.grid.size.value;" id="labelGridSize"/>
                                     <textbox id="textboxGridSize" size="1" type="number" min="1" max="256" preference="pencil-gridSize"/>
+                                    <menulist id="menuGridAppearance" preference="pencil-gridAppearance">
+                                      <menupopup>
+                                        <menuitem label="Dots" value="dots"/>
+                                        <menuitem label="Lines" value="lines"/>
+                                      </menupopup>
+                                    </menulist>
                                 </hbox>
                             </row>
                             <row align="center">

app/defaults/preferences/pencil.js

@@ -1,5 +1,6 @@
 pref("pencil.config.grid.enabled", true);
 pref("pencil.config.edit.gridSize", 8);
+pref("pencil.config.edit.gridAppearance", "dots");
 pref("pencil.config.edit.snap.grid", false);
 pref("pencil.config.object.snapping.enabled", true);
 pref("pencil.config.object.snapping.background", true);