Merge branch 'dev' into 'master'

v6.1

Closes #28, #31, #30, #27, #34, and #29

See merge request abakkk/DrawOnYourScreen!12

NEWS

@@ -1,3 +1,24 @@
+v6.1 - June 2020
+=================
+
+* Fix empty media-keys settings case #28
+* Fix label color in OSD and menu #31
+* Fix OSD width
+* Fix "Hide panel and dock"
+* Small menu on small monitor
+* Start a new text line with the `Enter` key #30
+* IBus inputs #29 #34
+* Non-latin and emoji characters rendered
+* GS keyboard is now available to type text
+* Grid overlay
+* Polygon and polyline shapes
+* Move, resize and mirror tools
+* Fill rule and text alignment style attributes
+* An optional fourth control point for Bézier curves
+* Keybinding to toggle modeless/modal #6 #9 #20 #24 #33
+  (ungrabs keyboard and mouse while drawing remains at the top)
+* Attributes are now persistent through drawing mode toggling #27
+
 v6 - March 2020
 =================
 

README.md

@@ -8,6 +8,7 @@ Then save your beautiful work by taking a screenshot.
 ## Features
 
 * Basic shapes (rectangle, circle, ellipse, line, curve, text, free)
+* Basic transformations (move, rotate, resize, stretch, mirror, inverse)
 * Smooth stroke
 * Draw over applications
 * Keep drawings on desktop background with persistence (notes, children's art ...)
@@ -33,7 +34,13 @@ Then save your beautiful work by taking a screenshot.
 
  ![How to draw an arrow](https://framagit.org/abakkk/DrawOnYourScreen/uploads/af8f96d33cfeff49bb922a1ef9f4a4ce/arrow-screencast.webm)
 
+* Duplicate an element:
+
+ Hold the `Shift` key while starting moving.
+ 
+ ![How to duplicate an element](https://framagit.org/abakkk/DrawOnYourScreen/-/raw/ressources/duplicate.webm)
+
 * Screenshot Tool extension:
 
- [Screenshot Tool](https://extensions.gnome.org/extension/1112/screenshot-tool/) is a convenient extension to “create, copy, store and upload screenshots”. To use it while drawing mode is active, toggle the area selection mode thanks to the Screenshot Tool shortcut (`Super + F11` by default, see its preferences) and **hold** the `space` key when selecting the area with pointer to avoid drawing.
+ [Screenshot Tool](https://extensions.gnome.org/extension/1112/screenshot-tool/) is a convenient extension to “create, copy, store and upload screenshots”. In order to select a screenshoot area with your pointer while keeping the drawing in place, you need first to tell DrawOnYourScreen to ungrab the pointer (`Ctrl + Super + Alt + D`).
 

data/default.css

@@ -1,18 +1,24 @@
 /*
- * Except for the font, you don't need to restart the extension.
+ * WARNING : user.css may be obsolete after an extension update.
- * Just save this file as ~/.local/share/drawOnYourScreen/user.css and the changes will be applied for your next brushstroke.
  *
  * ~/.local/share/drawOnYourScreen/user.css file is automatically generated by activating "Edit style".
- * Delete ~/.local/share/drawOnYourScreen/user.css file to retrieve default drawing style.
+ * Delete ~/.local/share/drawOnYourScreen/user.css file to retrieve the default drawing style.
+ *
+ * Except for the font, you don't need to restart the extension.
+ * Just save this file as ~/.local/share/drawOnYourScreen/user.css and the changes will be applied for your next brushstroke.
+ * Some attributes are modifiable in the user interface.
  *
  * line-join (no string):
  * 0 : miter, 1 : round, 2 : bevel
  * line-cap (no string):
  * 0 : butt, 1 : round, 2 : square
+ * fill-rule (no string):
+ * 0 : nonzero (winding in Cairo), 1 : evenodd
  *
  * dash:
- * dash-array-on is the length of dashes (no dashes if 0, you can put 0.1 to get dots or square according to line-cap).
+ * By default, it is computed from the line width.
- * dash-array-off is the length of gaps (no dashes if 0).
+ * dash-array-on is the length of dashes (put 0.1 to get dots or squares according to line-cap).
+ * dash-array-off is the length of gaps.
  *
  * square area:
  * Drawing in a square area is convenient when using the extension as a vector graphics editor. By default,
@@ -23,9 +29,8 @@
  * Only one family : no comma separated list of families like "font1, font2, ..., Sans-Serif".
  * Font family can be any font installed, or a generic family name (Serif, Sans-Serif, Monospace, Cursive, Fantasy).
  * Font weight and font style : no upper case when string.
- * Weight <= 500 (or lighter, normal, medium) is rendered as normal.
+ *
- * Weight > 500 (or bolder, bold) is rendered as bold.
+ * text-align: left or right.
- * Oblique and italic style supports depend on the font family and seem to be rendered identically.
  *
  */
 
@@ -33,22 +38,114 @@
     -drawing-line-width: 5px;
     -drawing-line-join: 1;
     -drawing-line-cap: 1;
-    -drawing-dash-array-on: 5px;
+    -drawing-fill-rule: 0;
-    -drawing-dash-array-off: 15px;
+    /*-drawing-dash-array-on: 5px;*/
-    -drawing-dash-offset: 0px;
+    /*-drawing-dash-array-off: 15px;*/
+    /*-drawing-dash-offset: 0px;*/
+    -drawing-background-color: #2e2e2e;
+    -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;
+    font-weight: normal;
+    font-style: normal;
+    text-align: left;
+}
+
+/* Palette */
+.draw-on-your-screen {
     -drawing-color1: HotPink;
     -drawing-color2: Cyan;
     -drawing-color3: yellow;
     -drawing-color4: Orangered;
     -drawing-color5: Chartreuse;
     -drawing-color6: DarkViolet;
-    -drawing-color7: #ffffff;
+    -drawing-color7: White;
-    -drawing-color8: rgba(130, 130, 130, 0.3);
+    -drawing-color8: Gray;
-    -drawing-color9: rgb(0, 0, 0);
+    -drawing-color9: Black;
-    -drawing-background-color: #2e3436;
-    /*-drawing-square-area-width: 512px;*/
-    /*-drawing-square-area-height: 512px;*/
-    font-family: Cantarell;
-    font-weight: normal;
-    font-style: normal;
 }
+
+/*
+Example of alternative palettes from GNOME HIG Colors.
+https://developer.gnome.org/hig/stable/icon-design.html
+
+The last uncommented palette wins.
+*/
+
+/* lighter */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb(153, 193, 241);
+    -drawing-color2: rgb(143, 240, 164);
+    -drawing-color3: rgb(249, 240, 107);
+    -drawing-color4: rgb(255, 190, 111);
+    -drawing-color5: rgb(246,  97,  81);
+    -drawing-color6: rgb(220, 138, 221);
+    -drawing-color7: rgb(205, 171, 143);
+    -drawing-color8: rgb(255, 255, 255);
+    -drawing-color9: rgb(119, 118, 123);
+}
+*/
+
+/* light */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 98, 160, 241);
+    -drawing-color2: rgb( 87, 227, 137);
+    -drawing-color3: rgb(248, 228,  92);
+    -drawing-color4: rgb(255, 163,  72);
+    -drawing-color5: rgb(237,  51,  59);
+    -drawing-color6: rgb(192,  97, 203);
+    -drawing-color7: rgb(181, 131,  90);
+    -drawing-color8: rgb(246, 245, 244);
+    -drawing-color9: rgb( 94,  92, 100);
+}
+*/
+
+/* normal */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 53, 132, 228);
+    -drawing-color2: rgb( 51, 209, 122);
+    -drawing-color3: rgb(246, 211,  45);
+    -drawing-color4: rgb(255, 120,   0);
+    -drawing-color5: rgb(224,  27,  36);
+    -drawing-color6: rgb(145,  65, 172);
+    -drawing-color7: rgb(152, 106,  68);
+    -drawing-color8: rgb(222, 221, 218);
+    -drawing-color9: rgb( 61,  56,  70);
+}
+*/
+
+/* dark */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 28, 113, 216);
+    -drawing-color2: rgb( 46, 194, 126);
+    -drawing-color3: rgb(245, 194,  17);
+    -drawing-color4: rgb(230,  97,   0);
+    -drawing-color5: rgb(192,  28,  40);
+    -drawing-color6: rgb(129,  61, 156);
+    -drawing-color7: rgb(134,  94,  60);
+    -drawing-color8: rgb(192, 191, 188);
+    -drawing-color9: rgb( 36,  31,  49);
+}
+*/
+
+/* darker */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 26, 095, 180);
+    -drawing-color2: rgb( 38, 162, 105);
+    -drawing-color3: rgb(229, 165,  10);
+    -drawing-color4: rgb(198,  70,   0);
+    -drawing-color5: rgb(165,  29,  45);
+    -drawing-color6: rgb( 97,  53, 131);
+    -drawing-color7: rgb( 99,  69,  44);
+    -drawing-color8: rgb(154, 153, 150);
+    -drawing-color9: rgb(  0,   0,   0);
+}
+*/

data/icons/color-symbolic.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+https://svgsilh.com/image/1745699.html
+https://creativecommons.org/publicdomain/zero/1.0
+</metadata>
+<g fill="#555" stroke="none">
+<path d="M63.3 115.3 c-8.1 -9.8 -16.3 -21.4 -22.0 -31.2 -7.3 -12.5 -11.6
+-23.5 -12.7 -32.2 -0.7 -5.2 -0.3 -9.1 1.3 -14.3 1.2 -4.0 3.1 -7.8 5.5 -11.5
+1.6 -2.4 3.0 -4.1 5.1 -6.2 3.1 -3.1 5.7 -5.0 9.3 -6.8 3.8 -1.9 7.5 -3.0
+12.0 -3.5 1.4 -0.2 5.4 -0.2 6.8 0 8.4 0.9 15.5 4.4 21.6 10.7 5.6 5.7 9.7 13.5
+11.3 21.5 0.7 3.4 0.7 7.5 0 11.8 -2.3 14.3 -13.1 34.4 -30.0 56.3 -2.4 3.1
+-6.1 7.7 -6.3 7.7 0 0 -0.9 -1.0 -1.8 -2.1z"/>
+</g>
+</svg>

data/icons/fillrule-evenodd-symbolic.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <polygon fill="#555" stroke="transparent" fill-rule="evenodd" points="100,10 40,190 190,74 10,74 160,190"/>
+</svg>

data/icons/fillrule-nonzero-symbolic.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <polygon fill="#555" stroke="transparent" fill-rule="nonzero" points="100,10 40,190 190,74 10,74 160,190"/>
+</svg>

extension.js

@@ -39,9 +39,11 @@ const Draw = Me.imports.draw;
 const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 
 const GS_VERSION = Config.PACKAGE_VERSION;
+const HIDE_TIMEOUT_LONG = 2500; // ms, default is 1500 ms
 
-// DRAWING_ACTION_MODE is a custom Shell.ActionMode
+// custom Shell.ActionMode, assuming that they are unused
-var DRAWING_ACTION_MODE = Math.pow(2,14);
+const DRAWING_ACTION_MODE = Math.pow(2,14);
+const WRITING_ACTION_MODE = Math.pow(2,15);
 // use 'login-dialog-message-warning' class in order to get GS theme warning color (default: #f57900)
 var WARNING_COLOR_STYLE_CLASS_NAME = 'login-dialog-message-warning';
 
@@ -79,6 +81,12 @@ var AreaManager = new Lang.Class({
                               Shell.ActionMode.ALL,
                               this.toggleDrawing.bind(this));
         
+        Main.wm.addKeybinding('toggle-modal',
+                              this.settings,
+                              Meta.KeyBindingFlags.NONE,
+                              Shell.ActionMode.ALL,
+                              this.toggleModal.bind(this));
+        
         Main.wm.addKeybinding('erase-drawing',
                               this.settings,
                               Meta.KeyBindingFlags.NONE,
@@ -159,51 +167,74 @@ var AreaManager = new Lang.Class({
             container.set_position(monitor.x, monitor.y);
             container.set_size(monitor.width, monitor.height);
             area.set_size(monitor.width, monitor.height);
-            area.stopDrawingHandler = area.connect('stop-drawing', this.toggleDrawing.bind(this));
+            area.leaveDrawingHandler = area.connect('leave-drawing-mode', this.toggleDrawing.bind(this));
+            area.updateActionModeHandler = area.connect('update-action-mode', this.updateActionMode.bind(this));
             area.showOsdHandler = area.connect('show-osd', this.showOsd.bind(this));
             this.areas.push(area);
         }
     },
     
     addInternalKeybindings: function() {
-        this.internalKeybindings = {
+        // unavailable when writing
+        this.internalKeybindings1 = {
             'undo': this.activeArea.undo.bind(this.activeArea),
             'redo': this.activeArea.redo.bind(this.activeArea),
             'delete-last-element': this.activeArea.deleteLastElement.bind(this.activeArea),
             'smooth-last-element': this.activeArea.smoothLastElement.bind(this.activeArea),
-            'save-as-svg': this.activeArea.saveAsSvg.bind(this.activeArea),
-            'save-as-json': this.activeArea.saveAsJson.bind(this.activeArea),
-            '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-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),
             'decrement-line-width-more': () => this.activeArea.incrementLineWidth(-5),
             'toggle-linejoin': this.activeArea.toggleLineJoin.bind(this.activeArea),
             'toggle-linecap': this.activeArea.toggleLineCap.bind(this.activeArea),
+            'toggle-fill-rule': this.activeArea.toggleFillRule.bind(this.activeArea),
             'toggle-dash' : this.activeArea.toggleDash.bind(this.activeArea),
             'toggle-fill' : this.activeArea.toggleFill.bind(this.activeArea),
-            'select-none-shape': () => this.activeArea.selectShape(Draw.Shapes.NONE),
+            'select-none-shape': () => this.activeArea.selectTool(Draw.Tools.NONE),
-            'select-line-shape': () => this.activeArea.selectShape(Draw.Shapes.LINE),
+            'select-line-shape': () => this.activeArea.selectTool(Draw.Tools.LINE),
-            'select-ellipse-shape': () => this.activeArea.selectShape(Draw.Shapes.ELLIPSE),
+            'select-ellipse-shape': () => this.activeArea.selectTool(Draw.Tools.ELLIPSE),
-            'select-rectangle-shape': () => this.activeArea.selectShape(Draw.Shapes.RECTANGLE),
+            'select-rectangle-shape': () => this.activeArea.selectTool(Draw.Tools.RECTANGLE),
-            'select-text-shape': () => this.activeArea.selectShape(Draw.Shapes.TEXT),
+            'select-text-shape': () => this.activeArea.selectTool(Draw.Tools.TEXT),
+            'select-polygon-shape': () => this.activeArea.selectTool(Draw.Tools.POLYGON),
+            'select-polyline-shape': () => this.activeArea.selectTool(Draw.Tools.POLYLINE),
+            'select-move-tool': () => this.activeArea.selectTool(Draw.Tools.MOVE),
+            'select-resize-tool': () => this.activeArea.selectTool(Draw.Tools.RESIZE),
+            'select-mirror-tool': () => this.activeArea.selectTool(Draw.Tools.MIRROR)
+        };
+        
+        // available when writing
+        this.internalKeybindings2 = {
+            'save-as-svg': this.activeArea.saveAsSvg.bind(this.activeArea),
+            'save-as-json': this.activeArea.saveAsJson.bind(this.activeArea),
+            '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),
             'toggle-font-family': this.activeArea.toggleFontFamily.bind(this.activeArea),
             'toggle-font-weight': this.activeArea.toggleFontWeight.bind(this.activeArea),
             'toggle-font-style': this.activeArea.toggleFontStyle.bind(this.activeArea),
+            'toggle-text-alignment': this.activeArea.toggleTextAlignment.bind(this.activeArea),
             'toggle-panel-and-dock-visibility': this.togglePanelAndDockOpacity.bind(this),
             'toggle-help': this.activeArea.toggleHelp.bind(this.activeArea),
-            'open-user-stylesheet': this.openUserStyleFile.bind(this)
+            'open-user-stylesheet': this.openUserStyleFile.bind(this),
+            'open-preferences': this.openPreferences.bind(this)
         };
         
-        for (let key in this.internalKeybindings) {
+        for (let key in this.internalKeybindings1) {
             Main.wm.addKeybinding(key,
                                   this.settings,
                                   Meta.KeyBindingFlags.NONE,
                                   DRAWING_ACTION_MODE,
-                                  this.internalKeybindings[key]);
+                                  this.internalKeybindings1[key]);
+        }
+        
+        for (let key in this.internalKeybindings2) {
+            Main.wm.addKeybinding(key,
+                                  this.settings,
+                                  Meta.KeyBindingFlags.NONE,
+                                  DRAWING_ACTION_MODE | WRITING_ACTION_MODE,
+                                  this.internalKeybindings2[key]);
         }
         
         for (let i = 1; i < 10; i++) {
@@ -211,18 +242,28 @@ var AreaManager = new Lang.Class({
             Main.wm.addKeybinding('select-color' + i,
                                   this.settings,
                                   Meta.KeyBindingFlags.NONE,
-                                  DRAWING_ACTION_MODE,
+                                  DRAWING_ACTION_MODE | WRITING_ACTION_MODE,
                                   () => this.activeArea.selectColor(iCaptured));
         }
     },
     
     removeInternalKeybindings: function() {
-        for (let key in this.internalKeybindings) {
+        for (let key in this.internalKeybindings1)
             Main.wm.removeKeybinding(key);
-        }
         
-        for (let i = 1; i < 10; i++) {
+        for (let key in this.internalKeybindings2)
+            Main.wm.removeKeybinding(key);
+        
+        for (let i = 1; i < 10; i++)
             Main.wm.removeKeybinding('select-color' + i);
+    },
+    
+    openPreferences: function() {
+        // since GS 3.36
+        if (ExtensionUtils.openPrefs) {
+            if (this.activeArea)
+                this.toggleDrawing();
+            ExtensionUtils.openPrefs();
         }
     },
     
@@ -262,19 +303,23 @@ var AreaManager = new Lang.Class({
             // dash-to-dock
             let dtdContainers = Main.uiGroup.get_children().filter((actor) => {
                 return actor.name && actor.name == 'dashtodockContainer' &&
-                       actor._delegate &&
+                       ((actor._delegate &&
                        actor._delegate._monitorIndex !== undefined &&
-                       actor._delegate._monitorIndex == activeIndex;
+                       actor._delegate._monitorIndex == activeIndex) ||
+                       // dtd v68+
+                       (actor._monitorIndex !== undefined &&
+                       actor._monitorIndex == activeIndex));
             });
             
             // for simplicity, we assume that main dash-to-panel panel is displayed on primary monitor
             // and we hide all secondary panels together if the active area is not on the primary
             let name = activeIndex == Main.layoutManager.primaryIndex ? 'panelBox' : 'dashtopanelSecondaryPanelBox';
             let panelBoxes = Main.uiGroup.get_children().filter((actor) => {
-                return actor.name && actor.name == name;
+                return actor.name && actor.name == name ||
+                       // dtp v37+
+                       actor.get_children().length && actor.get_children()[0].name && actor.get_children()[0].name == name;
             });
             
-            
             let actorToHide = dtdContainers.concat(panelBoxes);
             this.hiddenList = [];
             for (let i = 0; i < actorToHide.length; i++) {
@@ -284,66 +329,107 @@ var AreaManager = new Lang.Class({
         }
     },
     
-    toggleDrawing: function() {
+    toggleContainer: function() {
-        if (this.activeArea) {
+        if (!this.activeArea)
-            let activeIndex = this.areas.indexOf(this.activeArea);
+            return;
+        
         let activeContainer = this.activeArea.get_parent();
-            let save = activeIndex == Main.layoutManager.primaryIndex && this.settings.get_boolean('persistent-drawing');
+        let activeIndex = this.areas.indexOf(this.activeArea);
         
-            if (this.hiddenList)
+        if (activeContainer.get_parent() == Main.uiGroup) {
-                this.togglePanelAndDockOpacity();
+            Main.uiGroup.set_child_at_index(Main.layoutManager.keyboardBox, this.oldKeyboardIndex);
-            
+            Main.uiGroup.remove_actor(activeContainer);
-            Main.popModal(this.activeArea);
-            this.removeInternalKeybindings();
-            this.activeArea.reactive = false;
-            this.activeArea.leaveDrawingMode(save);
-            this.activeArea = null;
-            
-            activeContainer.get_parent().remove_actor(activeContainer);
             Main.layoutManager._backgroundGroup.insert_child_above(activeContainer, Main.layoutManager._bgManagers[activeIndex].backgroundActor);
             if (!this.settings.get_boolean("drawing-on-desktop")) 
                 activeContainer.hide();
+        } else {
+            Main.layoutManager._backgroundGroup.remove_actor(activeContainer);
+            Main.uiGroup.add_child(activeContainer);
+            // move the keyboard above the area to make it available with text entries
+            this.oldKeyboardIndex = Main.uiGroup.get_children().indexOf(Main.layoutManager.keyboardBox);
+            Main.uiGroup.set_child_above_sibling(Main.layoutManager.keyboardBox, activeContainer);
+        }
+    },
     
+    toggleModal: function(source) {
+        if (!this.activeArea)
+            return;
+        
+        this.activeArea.closeMenu();
+        
+        if (Main._findModal(this.activeArea) != -1) {
+            Main.popModal(this.activeArea);
+            if (source && source == global.display)
+                this.showOsd(null, 'touchpad-disabled-symbolic', _("Keyboard and pointer released"), null, null, false);
             setCursor('DEFAULT');
-            if (!this.osdDisabled)
+            this.activeArea.reactive = false;
-                Main.osdWindowManager.show(activeIndex, this.leaveGicon, _("Leaving drawing mode"), null);
+            this.removeInternalKeybindings();
+        } else {
+            // add Shell.ActionMode.NORMAL to keep system keybindings enabled (e.g. Alt + F2 ...)
+            let actionMode = (this.activeArea.isWriting ? WRITING_ACTION_MODE : DRAWING_ACTION_MODE) | Shell.ActionMode.NORMAL;
+            if (!Main.pushModal(this.activeArea, { actionMode: actionMode }))
+                return false;
+            this.addInternalKeybindings();
+            this.activeArea.reactive = true;
+            this.activeArea.initPointerCursor();
+            if (source && source == global.display)
+                this.showOsd(null, 'input-touchpad-symbolic', _("Keyboard and pointer grabbed"), null, null, false);
+        }
+        
+        return true;
+    },
+    
+    toggleDrawing: function() {
+        if (this.activeArea) {
+            let activeIndex = this.areas.indexOf(this.activeArea);
+            let save = activeIndex == Main.layoutManager.primaryIndex && this.settings.get_boolean('persistent-drawing');
+            
+            this.showOsd(null, this.leaveGicon, _("Leaving drawing mode"));
+            this.activeArea.leaveDrawingMode(save);
+            if (this.hiddenList)
+                this.togglePanelAndDockOpacity();
+            
+            if (Main._findModal(this.activeArea) != -1)
+                this.toggleModal();
+            this.toggleContainer();
+            this.activeArea = null;
         } else {
             // avoid to deal with Meta changes (global.display/global.screen)
             let currentIndex = Main.layoutManager.monitors.indexOf(Main.layoutManager.currentMonitor);
-            let activeContainer = this.areas[currentIndex].get_parent();
-            
-            activeContainer.get_parent().remove_actor(activeContainer);
-            Main.uiGroup.add_child(activeContainer);
-            
-            // add Shell.ActionMode.NORMAL to keep system keybindings enabled (e.g. Alt + F2 ...)
-            if (!Main.pushModal(this.areas[currentIndex], { actionMode: DRAWING_ACTION_MODE | Shell.ActionMode.NORMAL }))
-                return;
             this.activeArea = this.areas[currentIndex];
-            this.addInternalKeybindings();
+            this.toggleContainer();
-            this.activeArea.reactive = true;
+            if (!this.toggleModal()) {
-            this.activeArea.enterDrawingMode();
+                this.toggleContainer();
-            
+                this.activeArea = null;
-            setCursor('POINTING_HAND');
+                return;
-            this.osdDisabled = this.settings.get_boolean('osd-disabled');
-            if (!this.osdDisabled) {
-                // increase OSD display time
-                let hideTimeoutSave = OsdWindow.HIDE_TIMEOUT;
-                try { OsdWindow.HIDE_TIMEOUT = 2000; } catch(e) { /* HIDE_TIMEOUT is not exported with 'var' */ }
-                Main.osdWindowManager.show(currentIndex, this.enterGicon, _("Press Ctrl + F1 for help") + "\n\n" + _("Entering drawing mode"), null);
-                try { OsdWindow.HIDE_TIMEOUT = hideTimeoutSave; } catch(e) {}
             }
+            
+            this.activeArea.enterDrawingMode();
+            this.osdDisabled = this.settings.get_boolean('osd-disabled');
+            let label = _("<small>Press <i>%s</i> for help</small>").format(this.activeArea.helper.helpKeyLabel) + "\n\n" + _("Entering drawing mode");
+            this.showOsd(null, this.enterGicon, label, null, null, true);
         }
         
         if (this.indicator)
-            this.indicator.sync(this.activeArea != null);
+            this.indicator.sync(Boolean(this.activeArea));
     },
     
-    // use level -1 to set no level (null)
+    updateActionMode: function() {
-    showOsd: function(emitter, iconName, label, level) {
+        Main.actionMode = (this.activeArea.isWriting ? WRITING_ACTION_MODE : DRAWING_ACTION_MODE) | Shell.ActionMode.NORMAL;
-        if (this.osdDisabled)
+    },
-            return;
+    
+    // Use level -1 to set no level through a signal.
+    showOsd: function(emitter, icon, label, color, level, long) {
         let activeIndex = this.areas.indexOf(this.activeArea);
-        if (activeIndex != -1) {
+        if (activeIndex == -1 || this.osdDisabled)
+            return;
+        
+        let hideTimeoutSave;
+        if (long && GS_VERSION >= '3.28.0') {
+            hideTimeoutSave = OsdWindow.HIDE_TIMEOUT;
+            OsdWindow.HIDE_TIMEOUT = HIDE_TIMEOUT_LONG;
+        }
+        
         let maxLevel;
         if (level == -1)
             level = null;
@@ -355,29 +441,71 @@ var AreaManager = new Lang.Class({
         if (level && GS_VERSION > '3.33.0')
             level = level / 100;
         
-            let icon = iconName && new Gio.ThemedIcon({ name: iconName });
+        if (icon && typeof icon == 'string')
-            Main.osdWindowManager.show(activeIndex, icon || this.enterGicon, label, level, maxLevel);
+            icon = new Gio.ThemedIcon({ name: icon });
-            Main.osdWindowManager._osdWindows[activeIndex]._label.get_clutter_text().set_use_markup(true);
+        else if (!icon)
+            icon = this.enterGicon;
         
-            if (level === 0) {
+        let osdWindow = Main.osdWindowManager._osdWindows[activeIndex];
-                Main.osdWindowManager._osdWindows[activeIndex]._label.add_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME);
+        
-                // the same label is shared by all GS OSD so the style must be removed after being used
+        try {
-                let osdLabelChangedHandler = Main.osdWindowManager._osdWindows[activeIndex]._label.connect('notify::text', () => {
+            if (!this.osdWindowConstraint)
-                    Main.osdWindowManager._osdWindows[activeIndex]._label.remove_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME);
+                this.osdWindowConstraint = new OsdWindowConstraint();
-                    Main.osdWindowManager._osdWindows[activeIndex]._label.disconnect(osdLabelChangedHandler);
+            
+            if (!osdWindow._box.get_constraint(this.osdWindowConstraint.constructor.name)) {
+                osdWindow._box.remove_constraint(osdWindow._boxConstraint);
+                osdWindow._box.add_constraint_with_name(this.osdWindowConstraint.constructor.name, this.osdWindowConstraint);
+                this.osdWindowConstraint._minSize = osdWindow._boxConstraint._minSize;
+                osdWindow._boxConstraintOld = osdWindow._boxConstraint;
+                osdWindow._boxConstraint = this.osdWindowConstraint;
+                let osdConstraintHandler = osdWindow._box.connect('notify::mapped', (box) => {
+                    if (!box.mapped) {
+                        osdWindow._boxConstraint = osdWindow._boxConstraintOld;
+                        osdWindow._boxConstraint._minSize = this.osdWindowConstraint._minSize;
+                        osdWindow._box.remove_constraint(this.osdWindowConstraint);
+                        osdWindow._box.add_constraint(osdWindow._boxConstraint);
+                        osdWindow._box.disconnect(osdConstraintHandler);
+                    }
                 });
             }
+        } catch(e) {
+            logError(e);
         }
+        
+        Main.osdWindowManager.show(activeIndex, icon, label, level, maxLevel);
+        osdWindow._label.get_clutter_text().set_use_markup(true);
+        
+        if (color) {
+            osdWindow._icon.set_style(`color:${color};`);
+            osdWindow._label.set_style(`color:${color};`);
+            let osdColorChangedHandler = osdWindow._label.connect('notify::text', () => {
+                osdWindow._icon.set_style(`color:;`);
+                osdWindow._label.set_style(`color:;`);
+                osdWindow._label.disconnect(osdColorChangedHandler);
+            });
+        }
+        
+        if (level === 0) {
+            osdWindow._label.add_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME);
+            // the same label is shared by all GS OSD so the style must be removed after being used
+            let osdLabelChangedHandler = osdWindow._label.connect('notify::text', () => {
+                osdWindow._label.remove_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME);
+                osdWindow._label.disconnect(osdLabelChangedHandler);
+            });
+        }
+        
+        if (hideTimeoutSave)
+            OsdWindow.HIDE_TIMEOUT = hideTimeoutSave;
     },
     
     removeAreas: function() {
         for (let i = 0; i < this.areas.length; i++) {
             let area = this.areas[i];
+            area.disconnect(area.leaveDrawingHandler);
+            area.disconnect(area.updateActionModeHandler);
+            area.disconnect(area.showOsdHandler);
             let container = area.get_parent();
             container.get_parent().remove_actor(container);
-            area.disconnect(area.stopDrawingHandler);
-            area.disconnect(area.showOsdHandler);
-            area.disable();
             container.destroy();
         }
         this.areas = [];
@@ -412,6 +540,7 @@ var AreaManager = new Lang.Class({
         if (this.activeArea)
             this.toggleDrawing();
         Main.wm.removeKeybinding('toggle-drawing');
+        Main.wm.removeKeybinding('toggle-modal');
         Main.wm.removeKeybinding('erase-drawing');
         this.removeAreas();
         if (this.indicator)
@@ -419,7 +548,30 @@ var AreaManager = new Lang.Class({
     }
 });
 
-var DrawingIndicator = new Lang.Class({
+// The same as the original, without forcing a ratio of 1.
+const OsdWindowConstraint = new Lang.Class({
+    Name: 'DrawOnYourScreenOsdWindowConstraint',
+    Extends: OsdWindow.OsdWindowConstraint,
+
+    vfunc_update_allocation: function(actor, actorBox) {
+        // Clutter will adjust the allocation for margins,
+        // so add it to our minimum size
+        let minSize = this._minSize + actor.margin_top + actor.margin_bottom;
+        let [width, height] = actorBox.get_size();
+
+        // DO NOT Enforce a ratio of 1
+        let newWidth = Math.ceil(Math.max(minSize, width, height));
+        let newHeight = Math.ceil(Math.max(minSize, height));
+        actorBox.set_size(newWidth, newHeight);
+
+        // Recenter
+        let [x, y] = actorBox.get_origin();
+        actorBox.set_origin(Math.ceil(x + width / 2 - newWidth / 2),
+                            Math.ceil(y + height / 2 - newHeight / 2));
+    }
+});
+
+const DrawingIndicator = new Lang.Class({
     Name: 'DrawOnYourScreenIndicator',
 
     _init: function() {

locale/draw-on-your-screen.pot

@@ -4,11 +4,13 @@
 # This file is distributed under the same license as Draw On Your Screen.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
+# Some words refer to SVG attributes (font, line, fill rule ...).
+# You are free to translate them or not.
 msgid ""
 msgstr ""
 "Project-Id-Version: Draw On Your Screen VERSION\n"
 "Report-Msgid-Bugs-To: https://framagit.org/abakkk/DrawOnYourScreen/issues\n"
-"POT-Creation-Date: 2020-01-03 08:00+0100\n"
+"POT-Creation-Date: 2019-03-04 16:40+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,6 +19,19 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
+msgid "About"
+msgstr ""
+
+# You are free to translate the extension name, that is displayed in About page, or not.
+msgid "Draw On You Screen"
+msgstr ""
+
+msgid "Version %d"
+msgstr ""
+
+msgid "Start drawing with Super+Alt+D and save your beautiful work by taking a screenshot"
+msgstr ""
+
 # Add your name here, for example:
 # (add "\n" as separator if there is many translators)
 # msgid "translator-credits"
@@ -32,47 +47,225 @@ msgstr ""
 msgid "translator-credits"
 msgstr ""
 
-#: extension.js
+msgid "Preferences"
-msgid "Leaving drawing mode"
 msgstr ""
 
-msgid "Press Ctrl + F1 for help"
+msgid "Global"
 msgstr ""
 
-msgid "Entering drawing mode"
+msgid "Enter/leave drawing mode"
 msgstr ""
 
-#: draw.js
+# There is a similar text in GNOME Boxes (https://gitlab.gnome.org/GNOME/gnome-boxes/tree/master/po)
-msgid "Free drawing"
+msgid "Grab/ungrab keyboard and pointer"
 msgstr ""
 
-msgid "Line"
+msgid "Erase all drawings"
 msgstr ""
 
-msgid "Ellipse"
+msgid "Persistent"
 msgstr ""
 
-msgid "Rectangle"
+msgid "Persistent drawing through session restart"
 msgstr ""
 
-msgid "Text"
+msgid "Drawing on the desktop"
 msgstr ""
 
-msgid "Fill"
+msgid "<i>Draw On Your Screen</i> becomes <i>Draw On Your Desktop</i>"
 msgstr ""
 
-msgid "Stroke"
+msgid "Disable on-screen notifications"
 msgstr ""
 
-msgid "Dashed line"
+msgid "Disable panel indicator"
 msgstr ""
 
-msgid "Full line"
+msgid "Draw"
+msgstr ""
+
+msgid "Left click"
+msgstr ""
+
+msgid "Menu"
+msgstr ""
+
+msgid "Right click"
+msgstr ""
+
+msgid "Center click"
+msgstr ""
+
+msgid "Increment/decrement line width"
+msgstr ""
+
+msgid "Scroll"
+msgstr ""
+
+msgid "Select color"
+msgstr ""
+
+# %s are key labels (Ctrl+F1 and Ctrl+F9)
+msgid "%s … %s"
+msgstr ""
+
+msgid "Ignore pointer movement"
+msgstr ""
+
+# %s is a key label
+msgid "%s held"
+msgstr ""
+
+msgid "Leave"
+msgstr ""
+
+msgid "Select eraser <span alpha=\"50%\">(while starting drawing)</span>"
+msgstr ""
+
+msgid "Duplicate <span alpha=\"50%\">(while starting handling)</span>"
+msgstr ""
+
+msgid "Rotate rectangle, polygon, polyline"
+msgstr ""
+
+msgid "Extend circle to ellipse"
+msgstr ""
+
+msgid "Curve line"
+msgstr ""
+
+msgid "Smooth free drawing stroke"
+msgstr ""
+
+msgid "Rotate <span alpha=\"50%\">(while moving)</span>"
+msgstr ""
+
+msgid "Stretch <span alpha=\"50%\">(while resizing)</span>"
+msgstr ""
+
+msgid "Inverse <span alpha=\"50%\">(while mirroring)</span>"
+msgstr ""
+
+msgid "Internal"
+msgstr ""
+
+msgid "(in drawing mode)"
+msgstr ""
+
+msgid "Undo last brushstroke"
+msgstr ""
+
+msgid "Redo last brushstroke"
+msgstr ""
+
+msgid "Erase last brushstroke"
+msgstr ""
+
+msgid "Smooth last brushstroke"
+msgstr ""
+
+msgid "Select line"
+msgstr ""
+
+msgid "Select ellipse"
+msgstr ""
+
+msgid "Select rectangle"
+msgstr ""
+
+msgid "Select polygon"
+msgstr ""
+
+msgid "Select polyline"
+msgstr ""
+
+msgid "Select text"
+msgstr ""
+
+msgid "Select move"
+msgstr ""
+
+msgid "Select resize"
+msgstr ""
+
+msgid "Select mirror"
+msgstr ""
+
+msgid "Toggle fill/stroke"
+msgstr ""
+
+msgid "Increment line width"
+msgstr ""
+
+msgid "Decrement line width"
+msgstr ""
+
+msgid "Increment line width even more"
+msgstr ""
+
+msgid "Decrement line width even more"
+msgstr ""
+
+msgid "Change linejoin"
+msgstr ""
+
+msgid "Change linecap"
+msgstr ""
+
+msgid "Toggle fill rule"
+msgstr ""
+
+msgid "Change font family (generic name)"
+msgstr ""
+
+msgid "Change font weight"
+msgstr ""
+
+msgid "Change font style"
+msgstr ""
+
+msgid "Toggle text alignment"
+msgstr ""
+
+msgid "Hide panel and dock"
+msgstr ""
+
+msgid "Add a drawing background"
+msgstr ""
+
+msgid "Add a grid overlay"
+msgstr ""
+
+msgid "Square drawing area"
+msgstr ""
+
+msgid "Open previous drawing"
+msgstr ""
+
+msgid "Open next drawing"
+msgstr ""
+
+msgid "Save drawing as a SVG file"
+msgstr ""
+
+msgid "Edit style"
+msgstr ""
+
+msgid "Open preferences"
+msgstr ""
+
+msgid "Show help"
 msgstr ""
 
 msgid ""
-"Type your text\n"
+"<b>Default</b> drawing style attributes (color palette, font, line, dash) are defined in an editable <b>css</b> file.\n"
-"and press Enter"
+"See <i>“%s”</i>."
+msgstr ""
+
+msgid ""
+"When you save elements made with <b>eraser</b> in a <b>SVG</b> file, "
+"they are colored with background color, transparent if it is disabled.\n"
+"See <i>“%s”</i> or edit the SVG file afterwards."
 msgstr ""
 
 msgid "Screenshot"
@@ -102,284 +295,206 @@ msgstr ""
 msgid "Smooth"
 msgstr ""
 
-msgid "Dashed"
+msgid "Free drawing"
+msgstr ""
+
+msgid "Line"
+msgstr ""
+
+msgid "Ellipse"
+msgstr ""
+
+msgid "Rectangle"
+msgstr ""
+
+msgid "Text"
+msgstr ""
+
+msgid "Polygon"
+msgstr ""
+
+msgid "Polyline"
+msgstr ""
+
+msgid "Move"
+msgstr ""
+
+msgid "Resize"
+msgstr ""
+
+msgid "Mirror"
 msgstr ""
 
 msgid "Color"
 msgstr ""
 
+msgid "Fill"
+msgstr ""
+
+# fill-rule SVG attribute
+msgid "Evenodd"
+msgstr ""
+
+msgid "%d px"
+msgstr ""
+
+# stroke-linejoin SVG attribute
+msgid "Miter"
+msgstr ""
+
+# stroke-linejoin and stroke-linecap SVG attribute
+msgid "Round"
+msgstr ""
+
+# stroke-linejoin SVG attribute
+msgid "Bevel"
+msgstr ""
+
+# stroke-linecap SVG attribute
+msgid "Butt"
+msgstr ""
+
+# stroke-linecap SVG attribute
+msgid "Square"
+msgstr ""
+
+msgid "Dashed"
+msgstr ""
+
+# generic font-family SVG attribute
+msgid "Sans-Serif"
+msgstr ""
+
+# generic font-family SVG attribute
+msgid "Serif"
+msgstr ""
+
+# generic font-family SVG attribute
+msgid "Monospace"
+msgstr ""
+
+# generic font-family SVG attribute
+msgid "Cursive"
+msgstr ""
+
+# generic font-family SVG attribute
+msgid "Fantasy"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Thin"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Ultra-light"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Light"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Semi-light"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Book"
+msgstr ""
+
+# font-weight and font-style SVG attribute
+msgid "Normal"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Medium"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Semi-bold"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Bold"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Ultra-bold"
+msgstr ""
+
+# font-weight SVG attribute
+msgid "Heavy"
+msgstr ""
+
+# font-style SVG attribute
+msgid "Italic"
+msgstr ""
+
+# font-style SVG attribute
+msgid "Oblique"
+msgstr ""
+
+msgid "Right aligned"
+msgstr ""
+
 msgid "Open drawing"
 msgstr ""
 
 msgid "Save drawing"
 msgstr ""
 
-#: prefs.js
+msgid "Leaving drawing mode"
-
-msgid "Preferences"
 msgstr ""
 
-msgid "About"
+# %s is a key label
+msgid "<small>Press <i>%s</i> for help</small>"
 msgstr ""
 
-# GLOBAL_KEYBINDINGS
+msgid "Entering drawing mode"
-
-msgid "Enter/leave drawing mode"
 msgstr ""
 
-msgid "Erase all drawings"
+# "released" as the opposite of "grabbed"
+msgid "Keyboard and pointer released"
 msgstr ""
 
-# INTERNAL_KEYBINDINGS
+msgid "Keyboard and pointer grabbed"
-
-msgid "Undo last brushstroke"
-msgstr ""
-
-msgid "Redo last brushstroke"
-msgstr ""
-
-msgid "Erase last brushstroke"
-msgstr ""
-
-msgid "Smooth last brushstroke"
-msgstr ""
-
-msgid "Select line"
-msgstr ""
-
-msgid "Select ellipse"
-msgstr ""
-
-msgid "Select rectangle"
-msgstr ""
-
-msgid "Select text"
-msgstr ""
-
-msgid "Unselect shape (free drawing)"
-msgstr ""
-
-msgid "Toggle fill/stroke"
-msgstr ""
-
-msgid "Increment line width"
-msgstr ""
-
-msgid "Decrement line width"
-msgstr ""
-
-msgid "Increment line width even more"
-msgstr ""
-
-msgid "Decrement line width even more"
-msgstr ""
-
-msgid "Change linejoin"
-msgstr ""
-
-msgid "Change linecap"
-msgstr ""
-
-# already in draw.js
-#msgid "Dashed line"
-#msgstr ""
-
-msgid "Change font family (generic name)"
-msgstr ""
-
-msgid "Change font weight"
-msgstr ""
-
-msgid "Change font style"
-msgstr ""
-
-msgid "Hide panel and dock"
-msgstr ""
-
-msgid "Add a drawing background"
-msgstr ""
-
-msgid "Square drawing area"
-msgstr ""
-
-msgid "Open previous drawing"
-msgstr ""
-
-msgid "Open next drawing"
-msgstr ""
-
-# already in draw.js
-#msgid "Save drawing"
-#msgstr ""
-
-msgid "Save drawing as a SVG file"
-msgstr ""
-
-msgid "Edit style"
-msgstr ""
-
-msgid "Show help"
-msgstr ""
-
-# OTHER_SHORTCUTS
-
-msgid "Draw"
-msgstr ""
-
-msgid "Left click"
-msgstr ""
-
-msgid "Menu"
-msgstr ""
-
-msgid "Right click"
-msgstr ""
-
-msgid "Center click"
-msgstr ""
-
-msgid "Transform shape (when drawing)"
-msgstr ""
-
-msgid "Ctrl key"
-msgstr ""
-
-msgid "Increment/decrement line width"
-msgstr ""
-
-msgid "Scroll"
-msgstr ""
-
-msgid "Select color"
-msgstr ""
-
-msgid "Ctrl+1...9"
-msgstr ""
-
-msgid "Select eraser"
-msgstr ""
-
-msgid "Shift key held"
-msgstr ""
-
-msgid "Ignore pointer movement"
-msgstr ""
-
-msgid "Space key held"
-msgstr ""
-
-msgid "Leave"
-msgstr ""
-
-msgid "Escape key"
-msgstr ""
-
-# About page
-
-# you are free to translate the extension name
-#msgid "Draw On You Screen"
-#msgstr ""
-
-msgid "Version %d"
-msgstr ""
-
-msgid "Start drawing with Super+Alt+D and save your beautiful work by taking a screenshot"
-msgstr ""
-
-# Prefs page
-
-msgid "Global"
-msgstr ""
-
-msgid "Persistent"
-msgstr ""
-
-msgid "Persistent drawing through session restart"
-msgstr ""
-
-msgid "Drawing on the desktop"
-msgstr ""
-
-msgid "<i>Draw On Your Screen</i> becomes <i>Draw On Your Desktop</i>"
-msgstr ""
-
-msgid "Disable on-screen notifications"
-msgstr ""
-
-msgid "Disable panel indicator"
-msgstr ""
-
-msgid "Internal"
-msgstr ""
-
-msgid "(in drawing mode)"
 msgstr ""
 
+# %s is a key label
 msgid ""
-"By pressing <b>Ctrl</b> key <b>during</b> the drawing process, you can:\n"
+"Press <i>%s</i> to get\n"
-" . rotate a rectangle or a text area\n"
+"a fourth control point"
-" . extend and rotate an ellipse\n"
-" . curve a line (cubic Bezier curve)\n"
-" . smooth a free drawing stroke (you may prefer to smooth the stroke afterward, see <i>“%s”</i>)"
 msgstr ""
 
+msgid "Mark a point of symmetry"
+msgstr ""
+
+msgid "Draw a line of symmetry"
+msgstr ""
+
+# %s is a key label
 msgid ""
-"<b>Default</b> drawing style attributes (color palette, font, line, dash) are defined in an editable <b>css</b> file.\n"
+"Press <i>%s</i> to mark vertices"
-"See <i>“%s”</i>."
 msgstr ""
 
+# %s is a key label
 msgid ""
-"<u>Note</u>: When you save elements made with <b>eraser</b> in a <b>SVG</b> file, "
+"Type your text and press <i>%s</i>"
-"they are colored with background color, transparent if it is disabled.\n"
+msgstr ""
-"See <i>“%s”</i> or edit the SVG file afterwards."
+
+# as the alternative to "Fill"
+msgid "Outline"
+msgstr ""
+
+msgid "Dashed line"
+msgstr ""
+
+msgid "Full line"
+msgstr ""
+
+msgid "Left aligned"
+msgstr ""
+
+msgid "Nonzero"
 msgstr ""
 
 
-# The following words refer to SVG attributes.
-# You are free to translate them or not.
-
-#msgid "Butt"
-#msgstr ""
-
-#msgid "Round"
-#msgstr ""
-
-#msgid "Square"
-#msgstr ""
-
-#msgid "Miter"
-#msgstr ""
-
-#msgid "Bevel"
-#msgstr ""
-
-#msgid "Normal"
-#msgstr ""
-
-#msgid "Bold"
-#msgstr ""
-
-#msgid "Italic"
-#msgstr ""
-
-#msgid "Oblique"
-#msgstr ""
-
-#msgid "Sans-Serif"
-#msgstr ""
-
-#msgid "Serif"
-#msgstr ""
-
-#msgid "Monospace"
-#msgstr ""
-
-#msgid "Cursive"
-#msgstr ""
-
-#msgid "Fantasy"
-#msgstr ""
-
-#msgid "px"
-#msgstr ""
-

metadata.json

@@ -17,5 +17,5 @@
         "3.34",
         "3.36"
     ],
-    "version": 6
+    "version": 6.1
 }

prefs.js

@@ -20,21 +20,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
-const Mainloop = imports.mainloop;
 
+const Config = imports.misc.config;
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = ExtensionUtils.getSettings && ExtensionUtils.initTranslations ? ExtensionUtils : Me.imports.convenience;
 const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 const _GTK = imports.gettext.domain('gtk30').gettext;
 
+const GS_VERSION = Config.PACKAGE_VERSION;
 const MARGIN = 10;
 
 var GLOBAL_KEYBINDINGS = {
     'toggle-drawing': "Enter/leave drawing mode",
+    'toggle-modal': "Grab/ungrab keyboard and pointer",
     'erase-drawing': "Erase all drawings"
 };
 
@@ -44,13 +47,20 @@ var INTERNAL_KEYBINDINGS = {
     'delete-last-element' : "Erase last brushstroke",
     'smooth-last-element': "Smooth last brushstroke",
     '-separator-1': '',
+    'select-none-shape': "Free drawing",
     'select-line-shape': "Select line",
     'select-ellipse-shape': "Select ellipse",
     'select-rectangle-shape': "Select rectangle",
+    'select-polygon-shape': "Select polygon",
+    'select-polyline-shape': "Select polyline",
     'select-text-shape': "Select text",
-    'select-none-shape': "Unselect shape (free drawing)",
+    'select-move-tool': "Select move",
-    'toggle-fill': "Toggle fill/stroke",
+    'select-resize-tool': "Select resize",
+    'select-mirror-tool': "Select mirror",
     '-separator-2': '',
+    'toggle-fill': "Toggle fill/outline",
+    'toggle-fill-rule': "Toggle fill rule",
+    '-separator-3': '',
     'increment-line-width': "Increment line width",
     'decrement-line-width': "Decrement line width",
     'increment-line-width-more': "Increment line width even more",
@@ -58,33 +68,52 @@ var INTERNAL_KEYBINDINGS = {
     'toggle-linejoin': "Change linejoin",
     'toggle-linecap': "Change linecap",
     'toggle-dash': "Dashed line",
-    '-separator-3': '',
+    '-separator-4': '',
     'toggle-font-family': "Change font family (generic name)",
     'toggle-font-weight': "Change font weight",
     'toggle-font-style': "Change font style",
-    '-separator-4': '',
+    'toggle-text-alignment': "Toggle text alignment",
+    '-separator-5': '',
     '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': '',
+    '-separator-6': '',
     'open-previous-json': "Open previous drawing",
     'open-next-json': "Open next drawing",
     'save-as-json': "Save drawing",
     'save-as-svg': "Save drawing as a SVG file",
     'open-user-stylesheet': "Edit style",
+    'open-preferences': "Open preferences",
     'toggle-help': "Show help"
 };
 
+if (GS_VERSION < "3.36")
+    delete INTERNAL_KEYBINDINGS['open-preferences'];
+
+function getKeyLabel(accel) {
+    let [keyval, mods] = Gtk.accelerator_parse(accel);
+    return Gtk.accelerator_get_label(keyval, mods);
+}
+
 var OTHER_SHORTCUTS = [
-    { desc: "Draw", shortcut: "Left click" },
+    { desc: "Draw", get shortcut() { return _("Left click"); } },
-    { desc: "Menu", shortcut: "Right click" },
+    { desc: "Menu", get shortcut() { return _("Right click"); } },
-    { desc: "Toggle fill/stroke", shortcut: "Center click" },
+    { desc: "Toggle fill/outline", get shortcut() { return _("Center click"); } },
-    { desc: "Transform shape (when drawing)", shortcut: "Ctrl key" },
+    { desc: "Increment/decrement line width", get shortcut() { return _("Scroll"); } },
-    { desc: "Increment/decrement line width", shortcut: "Scroll" },
+    { desc: "Select color", get shortcut() { return _("%s … %s").format(getKeyLabel('<Primary>1'), getKeyLabel('<Primary>9')); } },
-    { desc: "Select color", shortcut: "Ctrl+1...9" },
+    { desc: "Ignore pointer movement", get shortcut() { return _("%s held").format(getKeyLabel('space')); } },
-    { desc: "Select eraser", shortcut: "Shift key held" },
+    { desc: "Leave", shortcut: getKeyLabel('Escape') },
-    { desc: "Ignore pointer movement", shortcut: "Space key held" },
+    { desc: "-separator-1", shortcut: "" },
-    { desc: "Leave", shortcut: "Escape key" }
+    { desc: "Select eraser <span alpha=\"50%\">(while starting drawing)</span>", shortcut: getKeyLabel('<Shift>') },
+    { desc: "Duplicate <span alpha=\"50%\">(while starting handling)</span>", shortcut: getKeyLabel('<Shift>') },
+    { desc: "Rotate rectangle, polygon, polyline", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Extend circle to ellipse", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Curve line", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Smooth free drawing stroke", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Rotate <span alpha=\"50%\">(while moving)</span>", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Stretch <span alpha=\"50%\">(while resizing)</span>", shortcut: getKeyLabel('<Primary>') },
+    { desc: "Inverse <span alpha=\"50%\">(while mirroring)</span>", shortcut: getKeyLabel('<Primary>') }
 ];
 
 function init() {
@@ -94,7 +123,7 @@ function init() {
 function buildPrefsWidget() {
     let topStack = new TopStack();
     let switcher = new Gtk.StackSwitcher({halign: Gtk.Align.CENTER, visible: true, stack: topStack});
-    Mainloop.timeout_add(0, () => {
+    GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
         let window = topStack.get_toplevel();
         window.resize(720,500);
         let headerBar = window.get_titlebar();
@@ -266,30 +295,14 @@ const PrefsPage = new GObject.Class({
                 continue;
             }
             let otherBox = new Gtk.Box({ margin_left: MARGIN, margin_right: MARGIN });
-            let otherLabel = new Gtk.Label({ label: _(OTHER_SHORTCUTS[i].desc) });
+            let otherLabel = new Gtk.Label({ label: _(OTHER_SHORTCUTS[i].desc), use_markup: true });
             otherLabel.set_halign(1);
-            let otherLabel2 = new Gtk.Label({ label: _(OTHER_SHORTCUTS[i].shortcut) });
+            let otherLabel2 = new Gtk.Label({ label: OTHER_SHORTCUTS[i].shortcut });
             otherBox.pack_start(otherLabel, true, true, 4);
             otherBox.pack_start(otherLabel2, false, false, 4);
             listBox.add(otherBox);
         }
         
-        let controlBox = new Gtk.Box({ margin: MARGIN, margin_top: 2*MARGIN });
-        let controlLabel = new Gtk.Label({
-            wrap: true,
-            xalign: 0,
-            use_markup: true,
-            label: _("By pressing <b>Ctrl</b> key <b>during</b> the drawing process, you can:\n" +
-                     " . rotate a rectangle or a text area\n" +
-                     " . extend and rotate an ellipse\n" +
-                     " . curve a line (cubic Bezier curve)\n" +
-                     " . smooth a free drawing stroke (you may prefer to smooth the stroke afterward, see <i>“%s”</i>)").format(_("Smooth last brushstroke"))
-        });
-        controlLabel.set_halign(1);
-        controlLabel.get_style_context().add_class('dim-label');
-        controlBox.pack_start(controlLabel, true, true, 4);
-        listBox.add(controlBox);
-        
         let internalKeybindingsWidget = new KeybindingsWidget(INTERNAL_KEYBINDINGS, this.settings);
         internalKeybindingsWidget.margin = MARGIN;
         listBox.add(internalKeybindingsWidget);
@@ -312,7 +325,7 @@ const PrefsPage = new GObject.Class({
             wrap: true,
             xalign: 0,
             use_markup: true,
-            label: _("<u>Note</u>: When you save elements made with <b>eraser</b> in a <b>SVG</b> file, " +
+            label: _("When you save elements made with <b>eraser</b> in a <b>SVG</b> file, " +
                      "they are colored with background color, transparent if it is disabled.\n" +
                      "See <i>“%s”</i> or edit the SVG file afterwards.").format(_("Add a drawing background"))
         });

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

@@ -26,6 +26,11 @@
       <summary>toggle drawing</summary>
       <description>enter or leave drawing mode</description>
     </key>
+    <key type="as" name="toggle-modal">
+      <default>["&lt;Primary&gt;&lt;Alt&gt;&lt;Super&gt;d"]</default>
+      <summary>toggle modeless/modal</summary>
+      <description>toggle modeless/modal</description>
+    </key>
     <key type="as" name="erase-drawing">
       <default>["&lt;Alt&gt;&lt;Super&gt;e"]</default>
       <summary>erase drawing</summary>
@@ -53,8 +58,13 @@
     </key>
     <key type="as" name="toggle-background">
       <default>["&lt;Primary&gt;b"]</default>
-      <summary>toggle background</summary>
+      <summary>toggle drawing background</summary>
-      <description>toggle background</description>
+      <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>
@@ -76,6 +86,16 @@
       <summary>select rectangle</summary>
       <description>select rectangle</description>
     </key>
+    <key type="as" name="select-polygon-shape">
+      <default>["&lt;Primary&gt;y"]</default>
+      <summary>select polygon</summary>
+      <description>select polygon</description>
+    </key>
+    <key type="as" name="select-polyline-shape">
+      <default>["&lt;Primary&gt;u"]</default>
+      <summary>select polyline</summary>
+      <description>select polyline</description>
+    </key>
     <key type="as" name="select-line-shape">
       <default>["&lt;Primary&gt;l"]</default>
       <summary>select line</summary>
@@ -91,13 +111,28 @@
       <summary>unselect shape (free drawing)</summary>
       <description>unselect shape (free drawing)</description>
     </key>
+    <key type="as" name="select-move-tool">
+      <default>["&lt;Primary&gt;m"]</default>
+      <summary>select move tool</summary>
+      <description>select move tool</description>
+    </key>
+    <key type="as" name="select-resize-tool">
+      <default>["&lt;Primary&gt;x"]</default>
+      <summary>select resize tool</summary>
+      <description>select resize tool</description>
+    </key>
+    <key type="as" name="select-mirror-tool">
+      <default>["&lt;Primary&gt;c"]</default>
+      <summary>select mirror tool</summary>
+      <description>select mirror tool</description>
+    </key>
     <key type="as" name="increment-line-width">
-      <default>["&lt;Primary&gt;KP_Add"]</default>
+      <default><![CDATA[['<Primary>KP_Add','<Primary><Shift>plus']]]></default>
       <summary>increment the line width</summary>
       <description>increment the line width</description>
     </key>
     <key type="as" name="decrement-line-width">
-      <default>["&lt;Primary&gt;KP_Subtract"]</default>
+      <default><![CDATA[['<Primary>KP_Subtract','<Primary>minus','<Primary><Shift>minus']]]></default>
       <summary>decrement the line width</summary>
       <description>decrement the line width</description>
     </key>
@@ -121,6 +156,11 @@
       <summary>toggle linecap</summary>
       <description>toggle linecap</description>
     </key>
+    <key type="as" name="toggle-fill-rule">
+      <default><![CDATA[['<Primary>KP_Multiply','<Primary>asterisk','<Primary><Shift>asterisk']]]></default>
+      <summary>toggle fill rule</summary>
+      <description>toggle fill rule</description>
+    </key>
     <key type="as" name="toggle-dash">
       <default>["&lt;Primary&gt;period"]</default>
       <summary>toggle dash</summary>
@@ -191,6 +231,11 @@
       <summary>toggle font style</summary>
       <description>toggle font style</description>
     </key>
+    <key type="as" name="toggle-text-alignment">
+      <default>["&lt;Primary&gt;&lt;Shift&gt;a"]</default>
+      <summary>toggle text alignment</summary>
+      <description>toggle text alignment</description>
+    </key>
     <key type="as" name="open-user-stylesheet">
       <default>["&lt;Primary&gt;o"]</default>
       <summary>open user stylesheet to edit style</summary>
@@ -216,6 +261,11 @@
       <summary>Open next json file</summary>
       <description>Open next json file</description>
     </key>
+    <key type="as" name="open-preferences">
+      <default>["&lt;Primary&gt;comma"]</default>
+      <summary>Open preferences</summary>
+      <description>Open preferences</description>
+    </key>
     <key type="as" name="toggle-help">
       <default>["&lt;Primary&gt;F1"]</default>
       <summary>toggle help</summary>