diff --git a/area.js b/area.js index f66705c..845a1da 100644 --- a/area.js +++ b/area.js @@ -1,5 +1,5 @@ /* jslint esversion: 6 */ -/* exported Tools, ToolNames, FontGenericFamilies, DrawingArea */ +/* exported Tools, DrawingArea */ /* * Copyright 2019 Abakkk @@ -49,13 +49,12 @@ const TEXT_CURSOR_TIME = 600; // ms const ELEMENT_GRABBER_TIME = 80; // ms, default is about 16 ms const GRID_TILES_HORIZONTAL_NUMBER = 30; -const { Shapes, ShapeNames, Transformations, LineCapNames, LineJoinNames, FillRuleNames, FontWeightNames, FontStyleNames } = Elements; -const Manipulations = { MOVE: 100, RESIZE: 101, MIRROR: 102 }; -const ManipulationNames = { 100: "Move", 101: "Resize", 102: "Mirror" }; -var Tools = Object.assign({}, Shapes, Manipulations); -var ToolNames = Object.assign({}, ShapeNames, ManipulationNames); +const { Shapes, Transformations } = Elements; +const { DisplayStrings } = Menu; -var FontGenericFamilies = ['Sans-Serif', 'Serif', 'Monospace', 'Cursive', 'Fantasy']; +const FontGenericFamilies = ['Sans-Serif', 'Serif', 'Monospace', 'Cursive', 'Fantasy']; +const Manipulations = { MOVE: 100, RESIZE: 101, MIRROR: 102 }; +var Tools = Object.assign({}, Shapes, Manipulations); const getClutterColorFromString = function(string, fallback) { let [success, color] = Clutter.Color.from_string(string); @@ -115,7 +114,7 @@ var DrawingArea = new Lang.Class({ get menu() { if (!this._menu) - this._menu = new Menu.DrawingMenu(this, this.monitor); + this._menu = new Menu.DrawingMenu(this, this.monitor, Tools); return this._menu; }, @@ -898,18 +897,18 @@ var DrawingArea = new Lang.Class({ selectTool: function(tool) { this.currentTool = tool; - this.emit('show-osd', null, _(ToolNames[tool]), "", -1, false); + this.emit('show-osd', null, DisplayStrings.Tool[tool], "", -1, false); this.updatePointerCursor(); }, switchFill: function() { this.fill = !this.fill; - this.emit('show-osd', null, this.fill ? _("Fill") : _("Outline"), "", -1, false); + this.emit('show-osd', null, DisplayStrings.getFill(this.fill), "", -1, false); }, switchFillRule: function() { this.currentFillRule = this.currentFillRule == 1 ? 0 : this.currentFillRule + 1; - this.emit('show-osd', null, _(FillRuleNames[this.currentFillRule]), "", -1, false); + this.emit('show-osd', null, DisplayStrings.FillRule[this.currentFillRule], "", -1, false); }, switchColorPalette: function(reverse) { @@ -923,26 +922,26 @@ var DrawingArea = new Lang.Class({ switchDash: function() { this.dashedLine = !this.dashedLine; - this.emit('show-osd', null, this.dashedLine ? _("Dashed line") : _("Full line"), "", -1, false); + this.emit('show-osd', null, DisplayStrings.getDashedLine(this.dashedLine), "", -1, false); }, incrementLineWidth: function(increment) { this.currentLineWidth = Math.max(this.currentLineWidth + increment, 0); - this.emit('show-osd', null, _("%d px").format(this.currentLineWidth), "", 2 * this.currentLineWidth, false); + this.emit('show-osd', null, DisplayStrings.getPixels(this.currentLineWidth), "", 2 * this.currentLineWidth, false); }, switchLineJoin: function() { this.currentLineJoin = this.currentLineJoin == 2 ? 0 : this.currentLineJoin + 1; - this.emit('show-osd', null, _(LineJoinNames[this.currentLineJoin]), "", -1, false); + this.emit('show-osd', null, DisplayStrings.LineJoin[this.currentLineJoin], "", -1, false); }, switchLineCap: function() { this.currentLineCap = this.currentLineCap == 2 ? 0 : this.currentLineCap + 1; - this.emit('show-osd', null, _(LineCapNames[this.currentLineCap]), "", -1, false); + this.emit('show-osd', null, DisplayStrings.LineCap[this.currentLineCap], "", -1, false); }, switchFontWeight: function() { - let fontWeights = Object.keys(FontWeightNames).map(key => Number(key)); + let fontWeights = Object.keys(DisplayStrings.FontWeight).map(key => Number(key)); let index = fontWeights.indexOf(this.currentFontWeight); this.currentFontWeight = index == fontWeights.length - 1 ? fontWeights[0] : fontWeights[index + 1]; if (this.currentElement && this.currentElement.font) { @@ -950,7 +949,7 @@ var DrawingArea = new Lang.Class({ this._redisplay(); } this.emit('show-osd', null, `` + - `${_(FontWeightNames[this.currentFontWeight])}`, "", -1, false); + `${DisplayStrings.FontWeight[this.currentFontWeight]}`, "", -1, false); }, switchFontStyle: function() { @@ -959,8 +958,8 @@ var DrawingArea = new Lang.Class({ this.currentElement.font.set_style(this.currentFontStyle); this._redisplay(); } - this.emit('show-osd', null, `` + - `${_(FontStyleNames[this.currentFontStyle])}`, "", -1, false); + this.emit('show-osd', null, `` + + `${DisplayStrings.FontStyle[this.currentFontStyle]}`, "", -1, false); }, switchFontFamily: function(reverse) { @@ -973,7 +972,7 @@ var DrawingArea = new Lang.Class({ this.currentElement.font.set_family(this.currentFontFamily); this._redisplay(); } - this.emit('show-osd', null, `${_(this.currentFontFamily)}`, "", -1, false); + this.emit('show-osd', null, `${DisplayStrings.getFontFamily(this.currentFontFamily)}`, "", -1, false); }, switchTextAlignment: function() { @@ -982,7 +981,7 @@ var DrawingArea = new Lang.Class({ this.currentElement.textRightAligned = this.currentTextRightAligned; this._redisplay(); } - this.emit('show-osd', null, this.currentTextRightAligned ? _("Right aligned") : _("Left aligned"), "", -1, false); + this.emit('show-osd', null, DisplayStrings.getTextAlignment(this.currentTextRightAligned), "", -1, false); }, switchImageFile: function() { diff --git a/elements.js b/elements.js index e84fccc..e7b5905 100644 --- a/elements.js +++ b/elements.js @@ -19,7 +19,7 @@ */ /* jslint esversion: 6 */ -/* exported Shapes, ShapeNames, Transformations, LineCapNames, LineJoinNames, FillRuleNames, FontWeightNames, FontStyleNames, getPangoFontFamilies, DrawingElement */ +/* exported Shapes, Transformations, getPangoFontFamilies, DrawingElement */ const Cairo = imports.cairo; const Clutter = imports.gi.Clutter; @@ -27,28 +27,29 @@ const Lang = imports.lang; const Pango = imports.gi.Pango; const PangoCairo = imports.gi.PangoCairo; -const reverseEnumeration = function(obj) { - let reversed = {}; - Object.keys(obj).forEach(key => { - reversed[obj[key]] = key.slice(0,1) + key.slice(1).toLowerCase().replace('_', '-'); - }); - return reversed; -}; - var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 }; -var ShapeNames = { 0: "Free drawing", 1: "Line", 2: "Ellipse", 3: "Rectangle", 4: "Text", 5: "Polygon", 6: "Polyline", 7: "Image" }; var Transformations = { TRANSLATION: 0, ROTATION: 1, SCALE_PRESERVE: 2, STRETCH: 3, REFLECTION: 4, INVERSION: 5 }; -var LineCapNames = Object.assign(reverseEnumeration(Cairo.LineCap), { 2: 'Square' }); -var LineJoinNames = reverseEnumeration(Cairo.LineJoin); -var FillRuleNames = { 0: 'Nonzero', 1: 'Evenodd' }; -var FontWeightNames = Object.assign(reverseEnumeration(Pango.Weight), { 200: "Ultra-light", 350: "Semi-light", 600: "Semi-bold", 800: "Ultra-bold" }); -delete FontWeightNames[Pango.Weight.ULTRAHEAVY]; -var FontStyleNames = reverseEnumeration(Pango.Style); var getPangoFontFamilies = function() { return PangoCairo.font_map_get_default().list_families().map(fontFamily => fontFamily.get_name()).sort((a,b) => a.localeCompare(b)); }; +const getFillRuleSvgName = function(fillRule) { + return fillRule == Pango.FillRule.EVEN_ODD ? 'evenodd' : 'nonzero'; +}; + +const getLineCapSvgName = function(lineCap) { + return lineCap == Pango.LineCap.BUTT ? 'butt' : + lineCap == Pango.LineCap.SQUASH ? 'square' : + 'round'; +}; + +const getLineJoinSvgName = function(lineJoin) { + return lineJoin == Pango.LineJoin.MITER ? 'miter' : + lineJoin == Pango.LineJoin.BEVEL ? 'bevel' : + 'round'; +}; + const SVG_DEBUG_SUPERPOSES_CAIRO = false; const RADIAN = 180 / Math.PI; // degree const INVERSION_CIRCLE_RADIUS = 12; // px @@ -295,7 +296,7 @@ const _DrawingElement = new Lang.Class({ if (fill) { attributes = `fill="${color}"`; if (this.fillRule) - attributes += ` fill-rule="${FillRuleNames[this.fillRule].toLowerCase()}"`; + attributes += ` fill-rule="${getFillRuleSvgName(this.fillRule)}"`; } else { attributes = `fill="none"`; } @@ -304,9 +305,9 @@ const _DrawingElement = new Lang.Class({ attributes += ` stroke="${color}"` + ` stroke-width="${this.line.lineWidth}"`; if (this.line.lineCap) - attributes += ` stroke-linecap="${LineCapNames[this.line.lineCap].toLowerCase()}"`; + attributes += ` stroke-linecap="${getLineCapSvgName(this.line.lineCap)}"`; if (this.line.lineJoin && !this.isStraightLine) - attributes += ` stroke-linejoin="${LineJoinNames[this.line.lineJoin].toLowerCase()}"`; + attributes += ` stroke-linejoin="${getLineJoinSvgName(this.line.lineJoin)}"`; if (this.dash && this.dash.active && this.dash.array && this.dash.array[0] && this.dash.array[1]) attributes += ` stroke-dasharray="${this.dash.array[0]} ${this.dash.array[1]}" stroke-dashoffset="${this.dash.offset}"`; } else { diff --git a/files.js b/files.js index 8315c20..484a78c 100644 --- a/files.js +++ b/files.js @@ -1,5 +1,5 @@ /* jslint esversion: 6 */ -/* exported Image, getImages, getJsons, getDateString */ +/* exported Image, getImages, Json, getJsons, getDateString */ /* * Copyright 2019 Abakkk diff --git a/locale/draw-on-your-screen.pot b/locale/draw-on-your-screen.pot index b05d3be..3881e79 100644 --- a/locale/draw-on-your-screen.pot +++ b/locale/draw-on-your-screen.pot @@ -500,9 +500,6 @@ msgstr "" msgid "Square" msgstr "" -msgid "Dashed" -msgstr "" - # generic font-family SVG attribute msgid "Sans-Serif" msgstr "" diff --git a/menu.js b/menu.js index ba3f660..5483be8 100644 --- a/menu.js +++ b/menu.js @@ -1,5 +1,5 @@ /* jslint esversion: 6 */ -/* exported DrawingMenu */ +/* exported DisplayStrings, DrawingMenu */ /* * Copyright 2019 Abakkk @@ -37,8 +37,6 @@ const Slider = imports.ui.slider; const ExtensionUtils = imports.misc.extensionUtils; const Me = ExtensionUtils.getCurrentExtension(); -const Area = Me.imports.area; -const Elements = Me.imports.elements; const Files = Me.imports.files; const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext; @@ -70,11 +68,81 @@ const getSummary = function(settingKey) { return Me.internalShortcutSettings.settings_schema.get_key(settingKey).get_summary(); }; +// Used by both menu and osd notifications. +var DisplayStrings = { + getDashedLine: function(dashed) { + return dashed ? _("Dashed line") : _("Full line"); + }, + + getFill: function(fill) { + return fill ? _("Fill") : _("Outline"); + }, + + get FillRule() { + if (!this._fillRules) + this._fillRules = { 0: _("Nonzero"), 1: _("Evenodd") }; + return this._fillRules; + }, + + getFontFamily: function(family) { + if (!this._fontGenericFamilies) + this._fontGenericFamilies = { 'Sans-Serif': _("Sans-Serif"), 'Serif': _("Serif"), 'Monospace': _("Monospace"), + 'Cursive': _("Cursive"), 'Fantasy': _("Fantasy") }; + return this._fontGenericFamilies[family] || family; + }, + + get FontStyle() { + if (!this._fontStyles) + this._fontStyles = { 0: _("Normal"), 1: _("Oblique"), 2: _("Italic") }; + return this._fontStyles; + }, + + FontStyleMarkup: { 0: 'normal', 1: 'oblique', 2: 'italic' }, + + get FontWeight() { + if (!this._fontWeights) + this._fontWeights = { 100: _("Thin"), 200: _("Ultra Light"), 300: _("Light"), 350: _("Semi Light"), + 380: _("Book"), 400: _("Normal"), 500: _("Medium"), 600: _("Semi Bold"), + 700: _("Bold"), 800: _("Ultra Bold"), 900: _("Heavy"), 1000:_("Ultra Heavy") }; + return this._fontWeights; + }, + + get LineCap() { + if (!this._lineCaps) + this._lineCaps = { 0: _("Butt"), 1: _("Round"), 2: _("Square") }; + return this._lineCaps; + }, + + get LineJoin() { + if (!this._lineJoins) + this._lineJoins = { 0: _("Miter"), 1: _("Round"), 2: _("Bevel") }; + return this._lineJoins; + }, + + getPixels(value) { + return _("%d px").format(value); + }, + + getTextAlignment: function(rightAligned) { + return rightAligned ? _("Right aligned") : _("Left aligned"); + }, + + get Tool() { + if (!this._tools) + this._tools = { 0: _("Free drawing"), 1: _("Line"), 2: _("Ellipse"), 3: _("Rectangle"), + 4: _("Text"), 5: _("Polygon"), 6: _("Polyline"), 7: _("Image"), + 100: _("Move"), 101: _("Resize"), 102: _("Mirror") }; + return this._tools; + } +}; + var DrawingMenu = new Lang.Class({ Name: 'DrawOnYourScreenDrawingMenu', - _init: function(area, monitor) { + _init: function(area, monitor, drawingTools) { this.area = area; + this.drawingTools = drawingTools; + let side = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL ? St.Side.RIGHT : St.Side.LEFT; this.menu = new PopupMenu.PopupMenu(Main.layoutManager.dummyCursor, 0.25, side); this.menuManager = new PopupMenu.PopupMenuManager(GS_VERSION < '3.33.0' ? { actor: this.area } : this.area); @@ -116,6 +184,8 @@ var DrawingMenu = new Lang.Class({ }, disable: function() { + delete this.area; + delete this.drawingTools; this.menuManager.removeMenu(this.menu); Main.layoutManager.uiGroup.remove_actor(this.menu.actor); this.menu.destroy(); @@ -171,21 +241,21 @@ var DrawingMenu = new Lang.Class({ this.menu.addMenuItem(groupItem); this._addSeparator(this.menu, true); - this._addSubMenuItem(this.menu, 'document-edit-symbolic', Area.ToolNames, this.area, 'currentTool', this._updateSectionVisibility.bind(this)); + this._addSubMenuItem(this.menu, 'document-edit-symbolic', DisplayStrings.Tool, this.area, 'currentTool', this._updateSectionVisibility.bind(this)); this.paletteItem = this._addPaletteSubMenuItem(this.menu); this.colorItem = this._addColorSubMenuItem(this.menu); - this.fillItem = this._addSwitchItem(this.menu, _("Fill"), this.strokeIcon, this.fillIcon, this.area, 'fill', this._updateSectionVisibility.bind(this)); + this.fillItem = this._addSwitchItem(this.menu, DisplayStrings.getFill(true), this.strokeIcon, this.fillIcon, this.area, 'fill', this._updateSectionVisibility.bind(this)); this.fillSection = new PopupMenu.PopupMenuSection(); this.fillSection.itemActivated = () => {}; - this.fillRuleItem = this._addSwitchItem(this.fillSection, _("Evenodd"), this.fillRuleNonzeroIcon, this.fillRuleEvenoddIcon, this.area, 'currentEvenodd'); + this.fillRuleItem = this._addSwitchItem(this.fillSection, DisplayStrings.FillRule[1], this.fillRuleNonzeroIcon, this.fillRuleEvenoddIcon, this.area, 'currentEvenodd'); this.menu.addMenuItem(this.fillSection); this._addSeparator(this.menu); let lineSection = new PopupMenu.PopupMenuSection(); this._addSliderItem(lineSection, this.area, 'currentLineWidth'); - this._addSubMenuItem(lineSection, this.linejoinIcon, Elements.LineJoinNames, this.area, 'currentLineJoin'); - this._addSubMenuItem(lineSection, this.linecapIcon, Elements.LineCapNames, this.area, 'currentLineCap'); - this._addSwitchItem(lineSection, _("Dashed"), this.fullLineIcon, this.dashedLineIcon, this.area, 'dashedLine'); + this._addSubMenuItem(lineSection, this.linejoinIcon, DisplayStrings.LineJoin, this.area, 'currentLineJoin'); + this._addSubMenuItem(lineSection, this.linecapIcon, DisplayStrings.LineCap, this.area, 'currentLineCap'); + this._addSwitchItem(lineSection, DisplayStrings.getDashedLine(true), this.fullLineIcon, this.dashedLineIcon, this.area, 'dashedLine'); this._addSeparator(lineSection); this.menu.addMenuItem(lineSection); lineSection.itemActivated = () => {}; @@ -193,9 +263,9 @@ var DrawingMenu = new Lang.Class({ let fontSection = new PopupMenu.PopupMenuSection(); this._addFontFamilySubMenuItem(fontSection, 'font-x-generic-symbolic'); - this._addSubMenuItem(fontSection, 'format-text-bold-symbolic', Elements.FontWeightNames, this.area, 'currentFontWeight'); - this._addSubMenuItem(fontSection, 'format-text-italic-symbolic', Elements.FontStyleNames, this.area, 'currentFontStyle'); - this._addSwitchItem(fontSection, _("Right aligned"), 'format-justify-left-symbolic', 'format-justify-right-symbolic', this.area, 'currentTextRightAligned'); + this._addSubMenuItem(fontSection, 'format-text-bold-symbolic', DisplayStrings.FontWeight, this.area, 'currentFontWeight'); + this._addSubMenuItem(fontSection, 'format-text-italic-symbolic', DisplayStrings.FontStyle, this.area, 'currentFontStyle'); + this._addSwitchItem(fontSection, DisplayStrings.getTextAlignment(true), 'format-justify-left-symbolic', 'format-justify-right-symbolic', this.area, 'currentTextRightAligned'); this._addSeparator(fontSection); this.menu.addMenuItem(fontSection); fontSection.itemActivated = () => {}; @@ -254,11 +324,11 @@ var DrawingMenu = new Lang.Class({ undoButton.reactive = this.area.elements.length > 0; redoButton.reactive = this.area.undoneElements.length > 0; eraseButton.reactive = this.area.elements.length > 0; - smoothButton.reactive = this.area.elements.length > 0 && this.area.elements[this.area.elements.length - 1].shape == Area.Tools.NONE; + smoothButton.reactive = this.area.elements.length > 0 && this.area.elements[this.area.elements.length - 1].shape == this.drawingTools.NONE; }, _updateSectionVisibility: function() { - let [isText, isImage] = [this.area.currentTool == Area.Tools.TEXT, this.area.currentTool == Area.Tools.IMAGE]; + let [isText, isImage] = [this.area.currentTool == this.drawingTools.TEXT, this.area.currentTool == this.drawingTools.IMAGE]; this.lineSection.actor.visible = !isText && !isImage; this.fontSection.actor.visible = isText; this.imageSection.actor.visible = isImage; @@ -306,13 +376,13 @@ var DrawingMenu = new Lang.Class({ _addSliderItem: function(menu, target, targetProperty) { let item = new PopupMenu.PopupBaseMenuItem({ activate: false }); - let label = new St.Label({ text: _("%d px").format(target[targetProperty]), style_class: 'draw-on-your-screen-menu-slider-label' }); + let label = new St.Label({ text: DisplayStrings.getPixels(target[targetProperty]), style_class: 'draw-on-your-screen-menu-slider-label' }); let slider = new Slider.Slider(target[targetProperty] / 50); if (GS_VERSION < '3.33.0') { slider.connect('value-changed', (slider, value, property) => { target[targetProperty] = Math.max(Math.round(value * 50), 0); - label.set_text(_("%d px").format(target[targetProperty])); + label.set_text(DisplayStrings.getPixels(target[targetProperty])); if (target[targetProperty] === 0) label.add_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME); else @@ -321,7 +391,7 @@ var DrawingMenu = new Lang.Class({ } else { slider.connect('notify::value', () => { target[targetProperty] = Math.max(Math.round(slider.value * 50), 0); - label.set_text(_("%d px").format(target[targetProperty])); + label.set_text(DisplayStrings.getPixels(target[targetProperty])); if (target[targetProperty] === 0) label.add_style_class_name(WARNING_COLOR_STYLE_CLASS_NAME); else @@ -340,7 +410,7 @@ var DrawingMenu = new Lang.Class({ _addSubMenuItem: function(menu, icon, obj, target, targetProperty, callback) { if (targetProperty == 'currentImage') icon = obj[target[targetProperty]].gicon; - let item = new PopupMenu.PopupSubMenuMenuItem(_(String(obj[target[targetProperty]])), icon ? true : false); + let item = new PopupMenu.PopupSubMenuMenuItem(String(obj[target[targetProperty]]), icon ? true : false); if (icon && icon instanceof GObject.Object && GObject.type_is_a(icon, Gio.Icon)) item.icon.set_gicon(icon); else if (icon) @@ -354,15 +424,15 @@ var DrawingMenu = new Lang.Class({ for (let i in obj) { let text; if (targetProperty == 'currentFontWeight') - text = `${_(obj[i])}`; + text = `${obj[i]}`; else if (targetProperty == 'currentFontStyle') - text = `${_(obj[i])}`; + text = `${obj[i]}`; else - text = _(String(obj[i])); + text = String(obj[i]); let iCaptured = Number(i); let subItem = item.menu.addAction(text, () => { - item.label.set_text(_(String(obj[iCaptured]))); + item.label.set_text(String(obj[iCaptured])); target[targetProperty] = iCaptured; if (targetProperty == 'currentImage') item.icon.set_gicon(obj[iCaptured].gicon); @@ -374,9 +444,9 @@ var DrawingMenu = new Lang.Class({ getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment); // change the display order of tools - if (obj == Area.ToolNames && i == Area.Tools.POLYGON) + if (obj == DisplayStrings.Tool && i == this.drawingTools.POLYGON) item.menu.moveMenuItem(subItem, 4); - else if (obj == Area.ToolNames && i == Area.Tools.POLYLINE) + else if (obj == DisplayStrings.Tool && i == this.drawingTools.POLYLINE) item.menu.moveMenuItem(subItem, 5); } return GLib.SOURCE_REMOVE; @@ -445,7 +515,7 @@ var DrawingMenu = new Lang.Class({ }, _addFontFamilySubMenuItem: function(menu, icon) { - let item = new PopupMenu.PopupSubMenuMenuItem(this.area.currentFontFamily, true); + let item = new PopupMenu.PopupSubMenuMenuItem(DisplayStrings.getFontFamily(this.area.currentFontFamily), true); item.icon.set_icon_name(icon); item.menu.itemActivated = () => { @@ -456,8 +526,8 @@ var DrawingMenu = new Lang.Class({ item.menu.open = (animate) => { if (!item.menu.isOpen && item.menu.isEmpty()) { this.area.fontFamilies.forEach(family => { - let subItem = item.menu.addAction(_(family), () => { - item.label.set_text(_(family)); + let subItem = item.menu.addAction(DisplayStrings.getFontFamily(family), () => { + item.label.set_text(DisplayStrings.getFontFamily(family)); this.area.currentFontFamily = family; }); if (FONT_FAMILY_STYLE)