Add grid overlay

data/default.css

@@ -46,6 +46,10 @@
     -drawing-color8: rgba(130, 130, 130, 0.3);
     -drawing-color9: rgb(0, 0, 0);
     -drawing-background-color: #2e3436;
+    -grid-overlay-gap: 10px;
+    -grid-overlay-line-width: 0.4px;
+    -grid-overlay-interline-width: 0.2px;
+    -grid-overlay-color: gray;
     /*-drawing-square-area-width: 512px;*/
     /*-drawing-square-area-height: 512px;*/
     font-family: Cantarell;

draw.js

@@ -123,6 +123,7 @@ var DrawingArea = new Lang.Class({
         this.currentElement = null;
         this.currentShape = Shapes.NONE;
         this.isSquareArea = false;
+        this.hasGrid = false;
         this.hasBackground = false;
         this.textHasCursor = false;
         this.dashedLine = false;
@@ -160,6 +161,10 @@ var DrawingArea = new Lang.Class({
             this.fontFamily = font.get_family();
             this.currentFontWeight = font.get_weight();
             this.currentFontStyle = font.get_style();
+            this.gridGap = themeNode.get_length('-grid-overlay-gap') || 10;
+            this.gridLineWidth = themeNode.get_length('-grid-overlay-line-width') || 0.4;
+            this.gridInterlineWidth = themeNode.get_length('-grid-overlay-interline-width') || 0.2;
+            this.gridColor = themeNode.get_color('-grid-overlay-color');
             this.squareAreaWidth = themeNode.get_length('-drawing-square-area-width');
             this.squareAreaHeight = themeNode.get_length('-drawing-square-area-height');
         } catch(e) {
@@ -178,6 +183,11 @@ var DrawingArea = new Lang.Class({
         this.currentFontWeight = this.currentFontWeight > 500 ? 1 : 0 ;
         // font style enum order of Cairo and Pango are different
         this.currentFontStyle = this.currentFontStyle == 2 ? 1 : ( this.currentFontStyle == 1 ? 2 : 0);
+        
+        this.gridGap = this.gridGap && this.gridGap >= 1 ? this.gridGap : 10;
+        this.gridLineWidth = this.gridLineWidth || 0.4;
+        this.gridInterlineWidth = this.gridInterlineWidth || 0.2;
+        this.gridColor = this.gridColor && this.gridColor.alpha ? this.gridColor : Clutter.Color.new(127, 127, 127, 255);
     },
     
     vfunc_repaint: function() {
@@ -207,6 +217,26 @@ var DrawingArea = new Lang.Class({
             cr.stroke();
         }
         
+        if (this.isInDrawingMode && this.hasGrid && this.gridGap && this.gridGap >= 1) {
+            Clutter.cairo_set_source_color(cr, this.gridColor);
+            
+            let [gridX, gridY] = [this.gridGap, this.gridGap];
+            while (gridX < this.monitor.width) {
+                cr.setLineWidth((gridX / this.gridGap) % 5 ? this.gridInterlineWidth : this.gridLineWidth);
+                cr.moveTo(gridX, 0);
+                cr.lineTo(gridX, this.monitor.height);
+                gridX += this.gridGap;
+                cr.stroke();
+            }
+            while (gridY < this.monitor.height) {
+                cr.setLineWidth((gridY / this.gridGap) % 5 ? this.gridInterlineWidth : this.gridLineWidth);
+                cr.moveTo(0, gridY);
+                cr.lineTo(this.monitor.width, gridY);
+                gridY += this.gridGap;
+                cr.stroke();
+            }
+        }
+        
         cr.$dispose();
     },
     
@@ -500,6 +530,11 @@ var DrawingArea = new Lang.Class({
         this.get_parent().set_background_color(this.hasBackground ? this.activeBackgroundColor : null);
     },
     
+    toggleGrid: function() {
+        this.hasGrid = !this.hasGrid;
+        this._redisplay();
+    },
+    
     toggleSquareArea: function() {
         this.isSquareArea = !this.isSquareArea;
         if (this.isSquareArea) {
@@ -596,6 +631,7 @@ var DrawingArea = new Lang.Class({
     },
     
     enterDrawingMode: function() {
+        this.isInDrawingMode = true;
         this.stageKeyPressedHandler = global.stage.connect('key-press-event', this._onStageKeyPressed.bind(this));
         this.stageKeyReleasedHandler = global.stage.connect('key-release-event', this._onStageKeyReleased.bind(this));
         this.keyPressedHandler = this.connect('key-press-event', this._onKeyPressed.bind(this));
@@ -607,6 +643,7 @@ var DrawingArea = new Lang.Class({
     },
     
     leaveDrawingMode: function(save) {
+        this.isInDrawingMode = false;
         if (this.stageKeyPressedHandler) {
             global.stage.disconnect(this.stageKeyPressedHandler);
             this.stageKeyPressedHandler = null;
@@ -1308,6 +1345,7 @@ const DrawingMenu = new Lang.Class({
         let manager = Extension.manager;
         this._addSwitchItemWithCallback(this.menu, _("Hide panel and dock"), manager.hiddenList ? true : false, manager.togglePanelAndDockOpacity.bind(manager));
         this._addSwitchItemWithCallback(this.menu, _("Add a drawing background"), this.area.hasBackground, this.area.toggleBackground.bind(this.area));
+        this._addSwitchItemWithCallback(this.menu, _("Add a grid overlay"), this.area.hasGrid, this.area.toggleGrid.bind(this.area));
         this._addSwitchItemWithCallback(this.menu, _("Square drawing area"), this.area.isSquareArea, this.area.toggleSquareArea.bind(this.area));
         this._addSeparator(this.menu);
         

extension.js

@@ -176,6 +176,7 @@ var AreaManager = new Lang.Class({
             'open-previous-json': this.activeArea.loadPreviousJson.bind(this.activeArea),
             'open-next-json': this.activeArea.loadNextJson.bind(this.activeArea),
             'toggle-background': this.activeArea.toggleBackground.bind(this.activeArea),
+            'toggle-grid': this.activeArea.toggleGrid.bind(this.activeArea),
             'toggle-square-area': this.activeArea.toggleSquareArea.bind(this.activeArea),
             'increment-line-width': () => this.activeArea.incrementLineWidth(1),
             'decrement-line-width': () => this.activeArea.incrementLineWidth(-1),

locale/draw-on-your-screen.pot

@@ -199,6 +199,9 @@ msgstr ""
 msgid "Add a drawing background"
 msgstr ""
 
+msgid "Add a grid overlay"
+msgstr ""
+
 msgid "Square drawing area"
 msgstr ""
 

prefs.js

@@ -65,6 +65,7 @@ var INTERNAL_KEYBINDINGS = {
     '-separator-4': '',
     'toggle-panel-and-dock-visibility': "Hide panel and dock",
     'toggle-background': "Add a drawing background",
+    'toggle-grid': "Add a grid overlay",
     'toggle-square-area': "Square drawing area",
     '-separator-5': '',
     'open-previous-json': "Open previous drawing",

schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml

@@ -53,8 +53,13 @@
     </key>
     <key type="as" name="toggle-background">
       <default>["&lt;Primary&gt;b"]</default>
-      <summary>toggle background</summary>
-      <description>toggle background</description>
+      <summary>toggle drawing background</summary>
+      <description>toggle drawing background</description>
+    </key>
+    <key type="as" name="toggle-grid">
+      <default>["&lt;Primary&gt;g"]</default>
+      <summary>toggle grid overlay</summary>
+      <description>toggle grid overlay</description>
     </key>
     <key type="as" name="toggle-panel-and-dock-visibility">
       <default>["&lt;Primary&gt;h"]</default>