From cb49c83799829e102203377b24b3eda16951c090 Mon Sep 17 00:00:00 2001 From: abakkk Date: Wed, 17 Feb 2021 14:27:35 +0100 Subject: [PATCH] add centered text alignment --- area.js | 16 +++++----- elements.js | 22 ++++++++++--- files.js | 2 +- locale/draw-on-your-screen.pot | 16 ++++++---- menu.js | 32 +++++++++++++++++-- ...extensions.draw-on-your-screen.gschema.xml | 2 +- 6 files changed, 67 insertions(+), 23 deletions(-) diff --git a/area.js b/area.js index b1975e8..57c2b68 100644 --- a/area.js +++ b/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; - if (this.currentElement && this.currentElement.textRightAligned !== undefined) { - this.currentElement.textRightAligned = this.currentTextRightAligned; + this.currentTextAlignment = this.currentTextAlignment == 2 ? 0 : this.currentTextAlignment + 1; + if (this.currentElement && this.currentElement.textAlignment != this.currentTextAlignment) { + this.currentElement.textAlignment = this.currentTextAlignment; this._redisplay(); } - let icon = Files.Icons[this.currentTextRightAligned ? 'RIGHT_ALIGNED' : 'LEFT_ALIGNED']; - this.emit('show-osd', icon, DisplayStrings.getTextAlignment(this.currentTextRightAligned), "", -1, false); + let icon = Files.Icons[this.currentTextAlignment == TextAlignment.RIGHT ? 'RIGHT_ALIGNED' : this.currentTextAlignment == TextAlignment.CENTER ? 'CENTERED' : 'LEFT_ALIGNED']; + this.emit('show-osd', icon, DisplayStrings.TextAlignment[this.currentTextAlignment], "", -1, false); }, switchImageFile: function(reverse) { diff --git a/elements.js b/elements.js index 1267826..4ed73e5 100644 --- a/elements.js +++ b/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; diff --git a/files.js b/files.js index 1f31691..d7fb60f 100644 --- a/files.js +++ b/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', }; diff --git a/locale/draw-on-your-screen.pot b/locale/draw-on-your-screen.pot index 5de5eaf..a36dc63 100644 --- a/locale/draw-on-your-screen.pot +++ b/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 \n" "Language-Team: LANGUAGE \n" @@ -44,7 +44,9 @@ msgstr "" #. Translators: %s is a key label #, javascript-format -msgid "Press %s\nto start a new line" +msgid "" +"Press %s\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 "Right aligned" +msgid "Left 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" diff --git a/menu.js b/menu.js index 909d668..6d58268 100644 --- a/menu.js +++ b/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 = () => { diff --git a/schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml b/schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml index 1b26430..456b144 100644 --- a/schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml +++ b/schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml @@ -315,7 +315,7 @@ ["<Primary><Alt>a"] - Toggle text alignment + Change text alignment ["<Primary>b"]