Add text alignment

Left or right.
Replace unused `rtl`.
This commit is contained in:
abakkk 2020-06-27 15:10:01 +02:00
parent dc73000a1d
commit fbe044a2b9
7 changed files with 51 additions and 13 deletions

View File

@ -30,6 +30,8 @@
* 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.
*
* text-align: left or right.
*
*/
.draw-on-your-screen {
@ -50,6 +52,7 @@
font-family: Cantarell;
font-weight: normal;
font-style: normal;
text-align: left;
}
/* Palette */

41
draw.js
View File

@ -52,7 +52,6 @@ const CAIRO_DEBUG_EXTENDS = false;
const SVG_DEBUG_EXTENDS = false;
const SVG_DEBUG_SUPERPOSES_CAIRO = false;
const TEXT_CURSOR_TIME = 600; // ms
const ENABLE_RTL = false;
const ICON_DIR = Me.dir.get_child('data').get_child('icons');
const COLOR_ICON_PATH = ICON_DIR.get_child('color-symbolic.svg').get_path();
@ -227,6 +226,7 @@ var DrawingArea = new Lang.Class({
this.newThemeAttributes.FontStyle = font.get_style();
this.newThemeAttributes.FontStretch = font.get_stretch();
this.newThemeAttributes.FontVariant = font.get_variant();
this.newThemeAttributes.TextRightAligned = themeNode.get_text_align() == St.TextAlign.RIGHT;
this.newThemeAttributes.LineWidth = themeNode.get_length('-drawing-line-width');
this.newThemeAttributes.LineJoin = themeNode.get_double('-drawing-line-join');
this.newThemeAttributes.LineCap = themeNode.get_double('-drawing-line-cap');
@ -601,7 +601,7 @@ var DrawingArea = new Lang.Class({
stretch: this.currentFontStretch,
variant: this.currentFontVariant };
this.currentElement.text = _("Text");
this.currentElement.rtl = ENABLE_RTL && this.get_text_direction() == Clutter.TextDirection.RTL;
this.currentElement.textRightAligned = this.currentTextRightAligned;
}
this.currentElement.startDrawing(startX, startY);
@ -932,6 +932,15 @@ var DrawingArea = new Lang.Class({
this.emit('show-osd', null, `<span font_family="${currentFontFamily}">${_(currentFontFamily)}</span>`, "", -1);
},
toggleTextAlignment: function() {
this.currentTextRightAligned = !this.currentTextRightAligned;
if (this.currentElement && this.currentElement.textRightAligned !== undefined) {
this.currentElement.textRightAligned = this.currentTextRightAligned;
this._redisplay();
}
this.emit('show-osd', null, this.currentTextRightAligned ? _("Right aligned") : _("Left aligned"), "", -1);
},
toggleHelp: function() {
if (this.helper.visible) {
this.helper.hideHelp();
@ -1224,8 +1233,6 @@ const DrawingElement = new Lang.Class({
if (params.transformations === undefined)
this.transformations = [];
if (params.shape == Shapes.TEXT) {
if (params.rtl === undefined)
this.rtl = false;
if (params.font && params.font.weight === 0)
this.font.weight = 400;
if (params.font && params.font.weight === 1)
@ -1258,7 +1265,7 @@ const DrawingElement = new Lang.Class({
transformations: this.transformations,
text: this.text,
lineIndex: this.lineIndex !== undefined ? this.lineIndex : undefined,
rtl: this.rtl,
textRightAligned: this.textRightAligned,
font: this.font,
points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
};
@ -1384,7 +1391,7 @@ const DrawingElement = new Lang.Class({
layout.set_font_description(fontDescription);
layout.set_text(this.text, -1);
this.textWidth = layout.get_pixel_size()[0];
cr.moveTo(points[1][0] - (this.rtl ? this.textWidth : 0), Math.max(points[0][1],points[1][1]) - layout.get_baseline() / Pango.SCALE);
cr.moveTo(points[1][0] - (this.textRightAligned ? this.textWidth : 0), Math.max(points[0][1],points[1][1]) - layout.get_baseline() / Pango.SCALE);
layout.set_text(this.text, -1);
PangoCairo.show_layout(cr, layout);
@ -1392,13 +1399,13 @@ const DrawingElement = new Lang.Class({
let cursorPosition = this.cursorPosition == -1 ? this.text.length : this.cursorPosition;
layout.set_text(this.text.slice(0, cursorPosition), -1);
let width = layout.get_pixel_size()[0];
cr.rectangle(points[1][0] - (this.rtl ? this.textWidth : 0) + width, Math.max(points[0][1],points[1][1]),
cr.rectangle(points[1][0] - (this.textRightAligned ? this.textWidth : 0) + width, Math.max(points[0][1],points[1][1]),
Math.abs(points[1][1] - points[0][1]) / 25, - Math.abs(points[1][1] - points[0][1]));
cr.fill();
}
if (params.showTextRectangle || params.drawTextRectangle) {
cr.rectangle(points[1][0] - (this.rtl ? this.textWidth : 0), Math.max(points[0][1], points[1][1]),
cr.rectangle(points[1][0] - (this.textRightAligned ? this.textWidth : 0), Math.max(points[0][1], points[1][1]),
this.textWidth, - Math.abs(points[1][1] - points[0][1]));
if (params.showTextRectangle)
setDummyStroke(cr);
@ -1541,7 +1548,8 @@ const DrawingElement = new Lang.Class({
if (this.font.variant && FontVariantNames[this.font.variant])
attributes += ` font-variant="${FontVariantNames[this.font.variant].toLowerCase()}"`;
row += `<text ${attributes} x="${points[1][0] - this.rtl * this.textWidth}" `;
// this.textWidth is computed during Cairo building.
row += `<text ${attributes} x="${points[1][0] - (this.textRightAligned ? this.textWidth : 0)}" `;
row += `y="${Math.max(points[0][1], points[1][1])}"${transAttribute}>${this.text}</text>`;
}
@ -1747,6 +1755,7 @@ const DrawingElement = new Lang.Class({
},
// The figure rotation center before transformations (original).
// this.textWidth is computed during Cairo building.
_getOriginalCenter: function() {
if (!this._originalCenter) {
let points = this.points;
@ -2169,8 +2178,10 @@ const DrawingMenu = new Lang.Class({
this._addSubMenuItem(fontSection, 'font-x-generic-symbolic', FontGenericNamesCopy, this.area, 'currentFontGeneric');
this._addSubMenuItem(fontSection, 'format-text-bold-symbolic', FontWeightNames, this.area, 'currentFontWeight');
this._addSubMenuItem(fontSection, 'format-text-italic-symbolic', FontStyleNames, this.area, 'currentFontStyle');
this._addSwitchItem(fontSection, _("Right aligned"), 'format-justify-left-symbolic', 'format-justify-right-symbolic', this.area, 'currentTextRightAligned');
this._addSeparator(fontSection);
this.menu.addMenuItem(fontSection);
fontSection.itemActivated = () => {};
this.fontSection = fontSection;
let manager = Extension.manager;
@ -2215,11 +2226,19 @@ const DrawingMenu = new Lang.Class({
item.icon = new St.Icon({ style_class: 'popup-menu-icon' });
getActor(item).insert_child_at_index(item.icon, 1);
item.icon.set_gicon(target[targetProperty] ? iconTrue : iconFalse);
let icon = target[targetProperty] ? iconTrue : iconFalse;
if (icon && icon instanceof GObject.Object && GObject.type_is_a(icon, Gio.Icon))
item.icon.set_gicon(icon);
else if (icon)
item.icon.set_icon_name(icon);
item.connect('toggled', (item, state) => {
target[targetProperty] = state;
item.icon.set_gicon(target[targetProperty] ? iconTrue : iconFalse);
let icon = target[targetProperty] ? iconTrue : iconFalse;
if (icon && icon instanceof GObject.Object && GObject.type_is_a(icon, Gio.Icon))
item.icon.set_gicon(icon);
else if (icon)
item.icon.set_icon_name(icon);
if (onToggled)
onToggled();
});

View File

@ -214,6 +214,7 @@ var AreaManager = new Lang.Class({
'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),

View File

@ -108,6 +108,12 @@ msgstr ""
msgid "%d px"
msgstr ""
msgid "Right aligned"
msgstr ""
msgid "Left aligned"
msgstr ""
#: helper
msgid "Screenshot"
@ -239,7 +245,7 @@ msgstr ""
msgid "Change linecap"
msgstr ""
msgid "Change fill rule"
msgid "Toggle fill rule"
msgstr ""
#: already in draw.js
@ -255,6 +261,9 @@ msgstr ""
msgid "Change font style"
msgstr ""
msgid "Toggle text alignment"
msgstr ""
msgid "Hide panel and dock"
msgstr ""

View File

@ -59,7 +59,7 @@ var INTERNAL_KEYBINDINGS = {
'select-mirror-tool': "Select mirror",
'-separator-2': '',
'toggle-fill': "Toggle fill/stroke",
'toggle-fill-rule': "Change fill rule",
'toggle-fill-rule': "Toggle fill rule",
'-separator-3': '',
'increment-line-width': "Increment line width",
'decrement-line-width': "Decrement line width",
@ -72,6 +72,7 @@ var INTERNAL_KEYBINDINGS = {
'toggle-font-family': "Change font family (generic name)",
'toggle-font-weight': "Change font weight",
'toggle-font-style': "Change font style",
'toggle-text-alignment': "Toggle text alignment",
'-separator-5': '',
'toggle-panel-and-dock-visibility': "Hide panel and dock",
'toggle-background': "Add a drawing background",

Binary file not shown.

View File

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