nosklo
/
DrawOnYourScreen
mirror of https://codeberg.org/som/DrawOnYourScreen
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

color and font 

* Pass Clutter color and Pango fontDescription objects to elements, not strings.
* Do not use the color format '#rrggbbaa' in svg since it is not supported in GNOME 3.24.
This commit is contained in:
abakkk 2020-09-15 00:29:02 +02:00
parent b63c1e9ffa
commit 42b4c9c00c
3 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
area.js
View File

@ -64,12 +64,14 @@ Object.defineProperty(Tools, 'getNameOf', { enumerable: false });
const getClutterColorFromString = function(string, fallback) {
let [success, color] = Clutter.Color.from_string(string);
color.string = string;
color.toString = () => string;
if (success)
return color;
log(`${Me.metadata.uuid}: "${string}" color cannot be parsed.`);
return Clutter.Color.get_static(Clutter.StaticColor[fallback]);
color = Clutter.Color.get_static(Clutter.StaticColor[fallback.toUpperCase()]);
color.toString = () => fallback.slice(0, 1).toUpperCase() + fallback.slice(1);
return color;
};
// DrawingArea is the widget in which we draw, thanks to Cairo.
@ -150,7 +152,7 @@ var DrawingArea = new Lang.Class({
set currentPalette(palette) {
this._currentPalette = palette;
this.colors = palette[1].map(colorString => getClutterColorFromString(colorString, 'WHITE'));
this.colors = palette[1].map(colorString => getClutterColorFromString(colorString, 'white'));
if (!this.colors[0])
this.colors.push(Clutter.Color.get_static(Clutter.StaticColor.WHITE));
},
@ -252,9 +254,9 @@ var DrawingArea = new Lang.Class({
this.squareAreaSize = Me.drawingSettings.get_uint('square-area-size');
}
this.areaBackgroundColor = getClutterColorFromString(Me.drawingSettings.get_string('background-color'), 'BLACK');
this.areaBackgroundColor = getClutterColorFromString(Me.drawingSettings.get_string('background-color'), 'black');
this.gridColor = getClutterColorFromString(Me.drawingSettings.get_string('grid-color'), 'GRAY');
this.gridColor = getClutterColorFromString(Me.drawingSettings.get_string('grid-color'), 'gray');
if (Me.drawingSettings.get_boolean('grid-line-auto')) {
this.gridLineSpacing = Math.round(this.monitor.width / (5 * GRID_TILES_HORIZONTAL_NUMBER));
this.gridLineWidth = this.gridLineSpacing / 20;
@ -601,9 +603,9 @@ var DrawingArea = new Lang.Class({
if (this.currentTool == Shapes.TEXT) {
this.currentElement = new Elements.DrawingElement({
shape: this.currentTool,
color: this.currentColor.to_string(),
color: this.currentColor,
eraser: eraser,
font: this.currentFont.to_string(),
font: this.currentFont.copy(),
// Translators: initial content of the text area
text: pgettext("text-area-content", "Text"),
textRightAligned: this.currentTextRightAligned,
@ -612,7 +614,7 @@ var DrawingArea = new Lang.Class({
} else if (this.currentTool == Shapes.IMAGE) {
this.currentElement = new Elements.DrawingElement({
shape: this.currentTool,
color: this.currentColor.to_string(),
color: this.currentColor,
eraser: eraser,
image: this.currentImage,
operator: this.currentOperator,
@ -621,7 +623,7 @@ var DrawingArea = new Lang.Class({
} else {
this.currentElement = new Elements.DrawingElement({
shape: this.currentTool,
color: this.currentColor.to_string(),
color: this.currentColor,
eraser: eraser,
fill: this.fill,
fillRule: this.currentFillRule,
@ -900,11 +902,11 @@ var DrawingArea = new Lang.Class({
this.currentColor = this.colors[index];
if (this.currentElement) {
this.currentElement.color = this.currentColor.to_string();
this.currentElement.color = this.currentColor;
this._redisplay();
}
// Foreground color markup is not displayed since 3.36, use style instead but the transparency is lost.
this.emit('show-osd', Files.Icons.COLOR, this.currentColor.string || this.currentColor.to_string(), this.currentColor.to_string().slice(0, 7), -1, false);
this.emit('show-osd', Files.Icons.COLOR, String(this.currentColor), this.currentColor.to_string().slice(0, 7), -1, false);
},
selectTool: function(tool) {
@ -1107,6 +1109,10 @@ var DrawingArea = new Lang.Class({
let elements = [];
elements.push(...JSON.parse(json.contents).map(object => {
if (object.color)
object.color = getClutterColorFromString(object.color, 'white');
if (object.font && typeof object.font == 'string')
object.font = Pango.FontDescription.from_string(object.font);
if (object.image)
object.image = new Files.Image(object.image);
return new Elements.DrawingElement(object);
@ -1137,7 +1143,7 @@ var DrawingArea = new Lang.Class({
let content = `<svg viewBox="0 0 ${this.width} ${this.height}" ${prefixes}>`;
if (SVG_DEBUG_EXTENDS)
content = `<svg viewBox="${-this.width} ${-this.height} ${2 * this.width} ${2 * this.height}" xmlns="http://www.w3.org/2000/svg">`;
let backgroundColorString = this.hasBackground ? this.areaBackgroundColor.to_string() : 'transparent';
let backgroundColorString = this.hasBackground ? String(this.areaBackgroundColor) : 'transparent';
if (backgroundColorString != 'transparent') {
content += `\n <rect id="background" width="100%" height="100%" fill="${backgroundColorString}"/>`;
}
@ -1219,6 +1225,10 @@ var DrawingArea = new Lang.Class({
return;
this.elements.push(...JSON.parse(json.contents).map(object => {
if (object.color)
object.color = getClutterColorFromString(object.color, 'white');
if (object.font && typeof object.font == 'string')
object.font = Pango.FontDescription.from_string(object.font);
if (object.image)
object.image = new Files.Image(object.image);
return new Elements.DrawingElement(object);

37
elements.js
View File

@ -81,20 +81,19 @@ const _DrawingElement = new Lang.Class({
if (params.transformations === undefined)
this.transformations = [];
if (params.font && typeof params.font != 'string') {
if (params.font && !(params.font instanceof Pango.FontDescription)) {
// compatibility with v6.2-
if (params.font.weight === 0)
this.font.weight = 400;
else if (params.font.weight === 1)
this.font.weight = 700;
let font = new Pango.FontDescription();
this.font = new Pango.FontDescription();
['family', 'weight', 'style', 'stretch', 'variant'].forEach(attribute => {
if (params.font[attribute] !== undefined)
try {
font[`set_${attribute}`](params.font[attribute]);
this.font[`set_${attribute}`](params.font[attribute]);
} catch(e) {}
});
this.font = font.to_string();
}
if (params.transform && params.transform.center) {
@ -114,7 +113,7 @@ const _DrawingElement = new Lang.Class({
toJSON: function() {
return {
shape: this.shape,
color: this.color,
color: this.color.toString(),
line: this.line,
dash: this.dash,
fill: this.fill,
@ -126,11 +125,8 @@ const _DrawingElement = new Lang.Class({
},
buildCairo: function(cr, params) {
if (this.color) {
let [success, color] = Clutter.Color.from_string(this.color);
if (success)
Clutter.cairo_set_source_color(cr, color);
}
if (this.color)
Clutter.cairo_set_source_color(cr, this.color);
if (this.showSymmetryElement) {
let transformation = this.lastTransformation;
@ -256,7 +252,7 @@ const _DrawingElement = new Lang.Class({
return inElement;
},
buildSVG: function(bgColor) {
buildSVG: function(bgcolorString) {
let transAttribute = '';
this.transformations.slice(0).reverse().forEach(transformation => {
transAttribute += transAttribute ? ' ' : ' transform="';
@ -284,13 +280,13 @@ const _DrawingElement = new Lang.Class({
});
transAttribute += transAttribute ? '"' : '';
return this._drawSvg(transAttribute);
return this._drawSvg(transAttribute, bgcolorString);
},
_drawSvg: function(transAttribute) {
_drawSvg: function(transAttribute, bgcolorString) {
let row = "\n ";
let points = this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100]);
let color = this.eraser ? bgColor : this.color;
let color = this.eraser ? bgcolorString : this.color.toString();
let fill = this.fill && !this.isStraightLine;
let attributes = '';
@ -605,18 +601,13 @@ const TextElement = new Lang.Class({
Name: 'DrawOnYourScreenTextElement',
Extends: _DrawingElement,
_init: function(params) {
this.parent(params);
this.font = Pango.FontDescription.from_string(this.font);
},
toJSON: function() {
// The font size is useless because it is always computed from the points during cairo/svg building.
this.font.unset_fields(Pango.FontMask.SIZE);
return {
shape: this.shape,
color: this.color,
color: this.color.toString(),
eraser: this.eraser,
transformations: this.transformations,
text: this.text,
@ -683,10 +674,10 @@ const TextElement = new Lang.Class({
return cr.inFill(x, y);
},
_drawSvg: function(transAttribute) {
_drawSvg: function(transAttribute, bgcolorString) {
let row = "\n ";
let [x, y, height] = [Math.round(this.x*100)/100, Math.round(this.y*100)/100, Math.round(this.height*100)/100];
let color = this.eraser ? bgColor : this.color;
let color = this.eraser ? bgcolorString : this.color.toString();
let attributes = '';
if (this.points.length == 2) {
@ -760,7 +751,7 @@ const ImageElement = new Lang.Class({
toJSON: function() {
return {
shape: this.shape,
color: this.color,
color: this.color.toString(),
fill: this.fill,
eraser: this.eraser,
transformations: this.transformations,

2
menu.js
View File

@ -495,7 +495,7 @@ var DrawingMenu = new Lang.Class({
this.colorSubMenu.removeAll();
GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
this.area.colors.forEach(color => {
let text = color.string || color.to_string();
let text = String(color);
let subItem = this.colorSubMenu.addAction(text, () => {
this.area.currentColor = color;
this.colorItem.icon.set_style(`color:${color.to_string().slice(0, 7)};`);