add square area

draw.js

@@ -52,7 +52,7 @@ var DrawingArea = new Lang.Class({
     Name: 'DrawingArea',
     Extends: St.DrawingArea,
 
-    _init: function(params, helper) {
+    _init: function(params, monitor, helper) {
         this.parent({ style_class: 'draw-on-your-screen', name: params && params.name ? params.name : ""});
         
         // 'style-changed' is emitted when 'this' is added to an actor
@@ -62,12 +62,14 @@ var DrawingArea = new Lang.Class({
         
         this.settings = Convenience.getSettings();
         this.emitter = new DrawingAreaEmitter();
+        this.monitor = monitor;
         this.helper = helper;
         
         this.elements = [];
         this.undoneElements = [];
         this.currentElement = null;
         this.currentShape = Shapes.NONE;
+        this.isSquareArea = false;
         this.hasBackground = false;
         this.textHasCursor = false;
         this.dashedLine = false;
@@ -362,6 +364,20 @@ var DrawingArea = new Lang.Class({
         this.get_parent().set_background_color(this.hasBackground ? this.activeBackgroundColor : null);
     },
     
+    toggleSquareArea: function() {
+        this.isSquareArea = !this.isSquareArea;
+        if (this.isSquareArea) {
+            let squareWidth = Math.min(this.monitor.width, this.monitor.height) * 3 / 4;
+            this.set_position(Math.floor(this.monitor.width / 2 - squareWidth / 2), Math.floor(this.monitor.width / 2 - squareWidth / 2));
+            this.set_size(squareWidth, squareWidth);
+            this.add_style_class_name('draw-on-your-screen-square-area');
+        } else {
+            this.set_position(this.monitor.x, this.monitor.y);
+            this.set_size(this.monitor.width, this.monitor.height);
+            this.remove_style_class_name('draw-on-your-screen-square-area');
+        }
+    },
+    
     toggleColor: function() {
         this.selectColor((this.currentColor == this.colors[1]) ? 2 : 1);
     },

extension.js

@@ -98,7 +98,7 @@ var AreaManager = new Lang.Class({
             let monitor = this.monitors[i];
             let helper = new Draw.DrawingHelper({ name: 'drawOnYourSreenHelper' + i }, monitor);
             let bgContainer = new St.Bin({ name: 'drawOnYourSreenContainer' + i });
-            let area = new Draw.DrawingArea({ name: 'drawOnYourSreenArea' + i }, helper);
+            let area = new Draw.DrawingArea({ name: 'drawOnYourSreenArea' + i }, monitor, helper);
             bgContainer.set_child(area);
             Main.uiGroup.add_actor(bgContainer);
             Main.uiGroup.add_actor(helper);
@@ -120,6 +120,7 @@ var AreaManager = new Lang.Class({
             'smooth-last-element': this.activeArea.smoothLastElement.bind(this.activeArea),
             'save-as-svg': this.activeArea.save.bind(this.activeArea),
             'toggle-background': this.activeArea.toggleBackground.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),
             'increment-line-width-more': () => this.activeArea.incrementLineWidth(5),

locale/draw-on-your-screen.pot

@@ -130,6 +130,9 @@ msgstr ""
 msgid "Add a drawing background"
 msgstr ""
 
+msgid "Square drawing area"
+msgstr ""
+
 msgid "Save drawing as a SVG file"
 msgstr ""
 

prefs.js

@@ -63,6 +63,7 @@ var INTERNAL_KEYBINDINGS = {
     '-separator-4': '',
     'toggle-panel-and-dock-visibility': "Hide panel and dock",
     'toggle-background': "Add a drawing background",
+    'toggle-square-area': "Square drawing area",
     '-separator-5': '',
     'save-as-svg': "Save drawing as a SVG file",
     'open-stylesheet': "Open stylesheet.css",

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

@@ -46,6 +46,11 @@
       <summary>hide or show panel and dock</summary>
       <description>hide or show panel and dock</description>
     </key>
+    <key type="as" name="toggle-square-area">
+      <default>["&lt;Primary&gt;n"]</default>
+      <summary>toggle square area</summary>
+      <description>toggle square area</description>
+    </key>
     <key type="as" name="select-ellipse-shape">
       <default>["&lt;Primary&gt;e"]</default>
       <summary>select cercle</summary>

stylesheet.css

@@ -46,11 +46,18 @@
 
 /*********************************************/
 
-/*
- * The following styles don't affect the drawing,
- * but the "Ctrl + F1" on-screen-display
- *
- */
+/* square area */
+
+.draw-on-your-screen-square-area {
+    outline: 2px solid rgba(255, 0, 0, 0.7);
+}
+
+.draw-on-your-screen-square-area:insensitive {
+    outline: none;
+}
+
+/* The following styles don't affect the drawing,
+ * but the "Ctrl + F1" on-screen-display */
 
  .draw-on-your-screen-helper {
     margin: 0;