add centered text alignment

This commit is contained in:
abakkk 2021-02-17 14:27:35 +01:00
parent 3223a6fdca
commit cb49c83799
6 changed files with 67 additions and 23 deletions

16
area.js
View File

@ -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) {

View File

@ -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;

View File

@ -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',
};

View File

@ -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 "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"

32
menu.js
View File

@ -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 = () => {

View File

@ -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>