add centered text alignment

area.js

@@ -53,7 +53,7 @@ const GRID_TILES_HORIZONTAL_NUMBER = 30;
 const COLOR_PICKER_EXTENSION_UUID = 'color-picker@tuberry'; 
 const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
 
-const { Shapes, Transformations } = Elements;
+const { Shapes, TextAlignment, Transformations } = Elements;
 const { DisplayStrings } = Menu;
 
 const FontGenericFamilies = ['Sans-Serif', 'Serif', 'Monospace', 'Cursive', 'Fantasy'];
@@ -152,7 +152,7 @@ var DrawingArea = new Lang.Class({
         this.currentElement = null;
         this.currentTool = Shapes.NONE;
         this.currentImage = null;
-        this.currentTextRightAligned = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL;
+        this.currentTextAlignment = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL ? TextAlignment.RIGHT : TextAlignment.LEFT;
         let fontName = St.Settings && St.Settings.get().font_name || Convenience.getSettings('org.gnome.desktop.interface').get_string('font-name');
         this.currentFont = Pango.FontDescription.from_string(fontName);
         this.currentFont.unset_fields(Pango.FontMask.SIZE);
@@ -677,7 +677,7 @@ var DrawingArea = new Lang.Class({
                 font: this.currentFont.copy(),
                 // Translators: initial content of the text area
                 text: pgettext("text-area-content", "Text"),
-                textRightAligned: this.currentTextRightAligned,
+                textAlignment: this.currentTextAlignment,
                 points: []
             });
         } else if (this.currentTool == Shapes.IMAGE) {
@@ -1151,13 +1151,13 @@ var DrawingArea = new Lang.Class({
     },
     
     switchTextAlignment: function() {
-        this.currentTextRightAligned = !this.currentTextRightAligned;
+        this.currentTextAlignment = this.currentTextAlignment == 2 ? 0 : this.currentTextAlignment + 1;
-        if (this.currentElement && this.currentElement.textRightAligned !== undefined) {
+        if (this.currentElement && this.currentElement.textAlignment != this.currentTextAlignment) {
-            this.currentElement.textRightAligned = this.currentTextRightAligned;
+            this.currentElement.textAlignment = this.currentTextAlignment;
             this._redisplay();
         }
-        let icon = Files.Icons[this.currentTextRightAligned ? 'RIGHT_ALIGNED' : 'LEFT_ALIGNED'];
+        let icon = Files.Icons[this.currentTextAlignment == TextAlignment.RIGHT ? 'RIGHT_ALIGNED' : this.currentTextAlignment == TextAlignment.CENTER ? 'CENTERED' : 'LEFT_ALIGNED'];
-        this.emit('show-osd', icon, DisplayStrings.getTextAlignment(this.currentTextRightAligned), "", -1, false);
+        this.emit('show-osd', icon, DisplayStrings.TextAlignment[this.currentTextAlignment], "", -1, false);
     },
     
     switchImageFile: function(reverse) {

elements.js

@@ -31,6 +31,7 @@ const Me = imports.misc.extensionUtils.getCurrentExtension();
 const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
 
 var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 };
+var TextAlignment = { LEFT: 0, CENTER: 1, RIGHT: 2 };
 var Transformations = { TRANSLATION: 0, ROTATION: 1, SCALE_PRESERVE: 2, STRETCH: 3, REFLECTION: 4, INVERSION: 5, SMOOTH: 100 };
 
 var getAllFontFamilies = function() {
@@ -111,6 +112,11 @@ const _DrawingElement = new Lang.Class({
             this.points.push([ratio * (p1[0] - p0[0]) + p0[0], ratio * (p1[1] - p0[1]) + p0[1]]);
         }
         delete this.transform;
+        
+        // v10-
+        if (this.textRightAligned)
+            this.textAlignment = TextAlignment.RIGHT;
+        delete this.textRightAligned;
     },
     
     // toJSON is called by JSON.stringify
@@ -709,7 +715,7 @@ const TextElement = new Lang.Class({
             eraser: this.eraser,
             transformations: this.transformations,
             text: this.text,
-            textRightAligned: this.textRightAligned,
+            textAlignment: this.textAlignment,
             font: this.font.to_string(),
             points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
         };
@@ -717,7 +723,11 @@ const TextElement = new Lang.Class({
     
     get x() {
         // this.textWidth is computed during Cairo building.
-        return this.points[1][0] - (this.textRightAligned ? this.textWidth : 0);
+        let offset = this.textAlignment == TextAlignment.RIGHT ? this.textWidth :
+                     this.textAlignment == TextAlignment.CENTER ? this.textWidth / 2 :
+                     0;
+        
+        return this.points[1][0] - offset;
     },
     
     get y() {
@@ -730,7 +740,11 @@ const TextElement = new Lang.Class({
     
     // this.lineWidths is computed during Cairo building.
     _getLineX: function(index) {
-        return this.points[1][0] - (this.textRightAligned && this.lineWidths && this.lineWidths[index] ? this.lineWidths[index] : 0);
+        let offset = this.textAlignment == TextAlignment.RIGHT && this.lineWidths && this.lineWidths[index] ? this.lineWidths[index] :
+                     this.textAlignment == TextAlignment.CENTER && this.lineWidths && this.lineWidths[index] ? this.lineWidths[index] / 2 :
+                     0;
+        
+        return this.points[1][0] - offset;
     },
     
     _drawCairo: function(cr, params) {
@@ -807,7 +821,7 @@ const TextElement = new Lang.Class({
         // It is a fallback for thumbnails. The following layout is not the same than the Cairo one and
         // layoutLine.get_pixel_extents does not return the correct value with non-latin fonts.
         // An alternative would be to store this.lineWidths in the json.
-        if (this.textRightAligned && !this.lineWidths) {
+        if (this.textAlignment != TextAlignment.LEFT && !this.lineWidths) {
             let clutterText = new Clutter.Text({ text: this.text });
             let layout = clutterText.get_layout();
             let fontSize = height * Pango.SCALE;

files.js

@@ -47,7 +47,7 @@ const ThemedIconNames = {
     GRAB: 'input-touchpad', UNGRAB: 'touchpad-disabled',
     OPEN: 'document-open', SAVE: 'document-save',
     FONT_FAMILY: 'font-x-generic', FONT_STYLE: 'format-text-italic', FONT_WEIGHT:'format-text-bold',
-    LEFT_ALIGNED: 'format-justify-left', RIGHT_ALIGNED: 'format-justify-right',
+    LEFT_ALIGNED: 'format-justify-left', CENTERED: 'format-justify-center',RIGHT_ALIGNED: 'format-justify-right',
     TOOL_IMAGE: 'insert-image', TOOL_TEXT: 'insert-text',
 };
 

locale/draw-on-your-screen.pot

@@ -10,7 +10,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Draw On Your Screen\n"
 "Report-Msgid-Bugs-To: https://framagit.org/abakkk/DrawOnYourScreen/issues\n"
-"POT-Creation-Date: 2020-10-04 22:45+0200\n"
+"POT-Creation-Date: 2021-02-17 14:14+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"
@@ -44,7 +44,9 @@ msgstr ""
 
 #. Translators: %s is a key label
 #, javascript-format
-msgid "Press <i>%s</i>\nto start a new line"
+msgid ""
+"Press <i>%s</i>\n"
+"to start a new line"
 msgstr ""
 
 #. Translators: It is displayed in an OSD notification to ask the user to start picking, so it should use the imperative mood.
@@ -214,11 +216,13 @@ msgstr ""
 msgid "%f px"
 msgstr ""
 
-#. Translators: text alignment
+msgid "Left aligned"
-msgid "Right aligned"
 msgstr ""
 
-msgid "Left aligned"
+msgid "Centered"
+msgstr ""
+
+msgid "Right aligned"
 msgstr ""
 
 msgctxt "drawing-tool"
@@ -685,7 +689,7 @@ msgstr ""
 msgid "Change linejoin"
 msgstr ""
 
-msgid "Toggle text alignment"
+msgid "Change text alignment"
 msgstr ""
 
 msgid "Add a drawing background"

menu.js

@@ -47,6 +47,7 @@ const FONT_FAMILY_STYLE = true;
 // use 'login-dialog-message-warning' class in order to get GS theme warning color (default: #f57900)
 const WARNING_COLOR_STYLE_CLASS_NAME = 'login-dialog-message-warning';
 const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
+const TextAlignmentIcon = { 0: Files.Icons.LEFT_ALIGNED, 1: Files.Icons.CENTERED, 2: Files.Icons.RIGHT_ALIGNED };
 
 const getActor = function(object) {
     return GS_VERSION < '3.33.0' ? object.actor : object;
@@ -124,9 +125,12 @@ var DisplayStrings = {
         return _("%f px").format(value);
     },
     
-    getTextAlignment: function(rightAligned) {
+    get TextAlignment() {
         // Translators: text alignment
-        return rightAligned ? _("Right aligned") : _("Left aligned");
+        if (!this._textAlignments)
+            this._textAlignments = { 0: _("Left aligned"), 1: _("Centered"), 2: _("Right aligned") };
+        
+        return this._textAlignments;
     },
     
     get Tool() {
@@ -268,7 +272,7 @@ var DrawingMenu = new Lang.Class({
         this._addFontFamilySubMenuItem(fontSection, Files.Icons.FONT_FAMILY);
         this._addSubMenuItem(fontSection, Files.Icons.FONT_WEIGHT, DisplayStrings.FontWeight, this.area, 'currentFontWeight');
         this._addSubMenuItem(fontSection, Files.Icons.FONT_STYLE, DisplayStrings.FontStyle, this.area, 'currentFontStyle');
-        this._addSwitchItem(fontSection, DisplayStrings.getTextAlignment(true), Files.Icons.LEFT_ALIGNED, Files.Icons.RIGHT_ALIGNED, this.area, 'currentTextRightAligned');
+        this._addTextAlignmentSubMenuItem(fontSection);
         this._addSeparator(fontSection);
         this.menu.addMenuItem(fontSection);
         fontSection.itemActivated = () => {};
@@ -553,6 +557,28 @@ var DrawingMenu = new Lang.Class({
         menu.addMenuItem(item);
     },
     
+    _addTextAlignmentSubMenuItem: function(menu) {
+        let item = new PopupMenu.PopupSubMenuMenuItem(DisplayStrings.TextAlignment[this.area.currentTextAlignment], true);
+        item.icon.set_gicon(TextAlignmentIcon[this.area.currentTextAlignment]);
+        
+        item.menu.itemActivated = item.menu.close;
+        
+        GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+            Object.keys(TextAlignmentIcon).forEach(key => {
+                let subItem = item.menu.addAction(DisplayStrings.TextAlignment[key], () => {
+                    item.label.set_text(DisplayStrings.TextAlignment[key]);
+                    this.area.currentTextAlignment = key;
+                    item.icon.set_gicon(TextAlignmentIcon[key]);
+                });
+                
+                getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
+            });
+            return GLib.SOURCE_REMOVE;
+        });
+        
+        menu.addMenuItem(item);
+    },
+    
     _addImageSubMenuItem: function(menu, images) {
         let item = new PopupMenu.PopupSubMenuMenuItem('', true);
         item.update = () => {

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

@@ -315,7 +315,7 @@
     </key>
     <key type="as" name="switch-text-alignment">
       <default>["&lt;Primary&gt;&lt;Alt&gt;a"]</default>
-      <summary>Toggle text alignment</summary>
+      <summary>Change text alignment</summary>
     </key>
     <key type="as" name="toggle-background">
       <default>["&lt;Primary&gt;b"]</default>