diff --git a/draw.js b/draw.js
index 7fbf66b..27f3d6d 100644
--- a/draw.js
+++ b/draw.js
@@ -56,9 +56,9 @@ const LINECAP_ICON_PATH = Me.dir.get_child('data').get_child('icons').get_child(
const DASHED_LINE_ICON_PATH = Me.dir.get_child('data').get_child('icons').get_child('dashed-line-symbolic.svg').get_path();
const FULL_LINE_ICON_PATH = Me.dir.get_child('data').get_child('icons').get_child('full-line-symbolic.svg').get_path();
-var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4 };
+var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5 };
const TextState = { DRAWING: 0, WRITING: 1 };
-const ShapeNames = { 0: "Free drawing", 1: "Line", 2: "Ellipse", 3: "Rectangle", 4: "Text" };
+const ShapeNames = { 0: "Free drawing", 1: "Line", 2: "Ellipse", 3: "Rectangle", 4: "Text", 5: "Polygon" };
const LineCapNames = { 0: 'Butt', 1: 'Round', 2: 'Square' };
const LineJoinNames = { 0: 'Miter', 1: 'Round', 2: 'Bevel' };
const FontWeightNames = { 0: 'Normal', 1: 'Bold' };
@@ -325,7 +325,16 @@ var DrawingArea = new Lang.Class({
}
this._redisplay();
return Clutter.EVENT_STOP;
-
+
+ } else if (this.currentElement && this.currentElement.shape == Shapes.POLYGON &&
+ (event.get_key_symbol() == Clutter.KEY_Return || event.get_key_symbol() == 65421)) {
+ // copy last point
+ let lastPoint = this.currentElement.points[this.currentElement.points.length - 1];
+ let secondToLastPoint = this.currentElement.points[this.currentElement.points.length - 2];
+ if (!getNearness(secondToLastPoint, lastPoint, 3))
+ this.currentElement.points.push([lastPoint[0], lastPoint[1]]);
+ return Clutter.EVENT_STOP;
+
} else if (event.get_key_symbol() == Clutter.KEY_Escape) {
if (this.helper.visible)
this.helper.hideHelp();
@@ -382,6 +391,11 @@ var DrawingArea = new Lang.Class({
this.currentElement.state = TextState.DRAWING;
}
+ if (this.currentShape == Shapes.POLYGON) {
+ this.currentElement.points.push([startX, startY]);
+ this.emit('show-osd', null, _("Press Enter\nto mark vertices"), "", -1);
+ }
+
this.motionHandler = this.connect('motion-event', (actor, event) => {
if (this.spaceKeyPressed)
return;
@@ -405,11 +419,19 @@ var DrawingArea = new Lang.Class({
this.buttonReleasedHandler = null;
}
+ // skip when a polygon has not at least 3 points
+ if (this.currentElement && this.currentElement.shape == Shapes.POLYGON && this.currentElement.points.length < 3)
+ this.currentElement = null;
+
// skip when the size is too small to be visible (3px) (except for free drawing)
- if (this.currentElement && this.currentElement.points.length >= 2 &&
- (this.currentShape == Shapes.NONE ||
- Math.hypot(this.currentElement.points[1][0] - this.currentElement.points[0][0], this.currentElement.points[1][1] - this.currentElement.points[0][1]) > 3)) {
-
+ if (this.currentElement && this.currentElement.shape != Shapes.NONE && this.currentElement.points.length >= 2) {
+ let lastPoint = this.currentElement.points[this.currentElement.points.length - 1];
+ let secondToLastPoint = this.currentElement.points[this.currentElement.points.length - 2];
+ if (getNearness(secondToLastPoint, lastPoint, 3))
+ this.currentElement.points.pop();
+ }
+
+ if (this.currentElement && this.currentElement.points.length >= 2) {
if (this.currentElement.shape == Shapes.TEXT && this.currentElement.state == TextState.DRAWING) {
// start writing
this.currentElement.state = TextState.WRITING;
@@ -436,11 +458,15 @@ var DrawingArea = new Lang.Class({
if (this.currentElement.shape == Shapes.NONE)
this.currentElement.addPoint(x, y, controlPressed);
else if ((this.currentElement.shape == Shapes.RECTANGLE || this.currentElement.shape == Shapes.TEXT) && (controlPressed || this.currentElement.transform.active))
- this.currentElement.transformRectangle(x, y);
+ this.currentElement.transformPolygon(x, y);
else if (this.currentElement.shape == Shapes.ELLIPSE && (controlPressed || this.currentElement.transform.active))
this.currentElement.transformEllipse(x, y);
else if (this.currentElement.shape == Shapes.LINE && (controlPressed || this.currentElement.transform.active))
this.currentElement.transformLine(x, y);
+ else if (this.currentElement.shape == Shapes.POLYGON && (controlPressed || this.currentElement.transform.active))
+ this.currentElement.transformPolygon(x, y);
+ else if (this.currentElement.shape == Shapes.POLYGON)
+ this.currentElement.points[this.currentElement.points.length - 1] = [x, y];
else
this.currentElement.points[1] = [x, y];
@@ -928,6 +954,7 @@ const DrawingElement = new Lang.Class({
if (shape == Shapes.LINE && points.length == 3) {
cr.moveTo(points[0][0], points[0][1]);
cr.curveTo(points[0][0], points[0][1], points[1][0], points[1][1], points[2][0], points[2][1]);
+
} else if (shape == Shapes.NONE || shape == Shapes.LINE) {
cr.moveTo(points[0][0], points[0][1]);
for (let j = 1; j < points.length; j++) {
@@ -946,6 +973,16 @@ const DrawingElement = new Lang.Class({
this.rotate(cr, trans.angle, trans.center[0], trans.center[1]);
cr.rectangle(points[0][0], points[0][1], points[1][0] - points[0][0], points[1][1] - points[0][1]);
this.rotate(cr, - trans.angle, trans.center[0], trans.center[1]);
+
+ } else if (shape == Shapes.POLYGON && points.length >= 2) {
+ this.rotate(cr, trans.angle, trans.center[0], trans.center[1]);
+ cr.moveTo(points[0][0], points[0][1]);
+ for (let j = 1; j < points.length; j++) {
+ cr.lineTo(points[j][0], points[j][1]);
+ }
+ if (shape == Shapes.POLYGON)
+ cr.closePath();
+ this.rotate(cr, - trans.angle, trans.center[0], trans.center[1]);
} else if (shape == Shapes.TEXT && points.length == 2) {
this.rotate(cr, trans.angle, trans.center[0], trans.center[1]);
@@ -982,9 +1019,8 @@ const DrawingElement = new Lang.Class({
} else if (this.shape == Shapes.NONE || this.shape == Shapes.LINE) {
row += ``;
} else if (this.shape == Shapes.ELLIPSE && points.length == 2 && this.transform.ratio != 1) {
@@ -1006,6 +1042,17 @@ const DrawingElement = new Lang.Class({
row += ``;
+ } else if (this.shape == Shapes.POLYGON && points.length >= 3) {
+ let transAttribute = "";
+ if (this.transform.angle != 0) {
+ let angle = this.transform.angle * 180 / Math.PI;
+ transAttribute = ` transform="rotate(${angle}, ${this.transform.center[0]}, ${this.transform.center[1]})"`;
+ }
+ row += ``;
+
} else if (this.shape == Shapes.TEXT && points.length == 2) {
let transAttribute = "";
if (this.transform.angle != 0) {
@@ -1060,14 +1107,13 @@ const DrawingElement = new Lang.Class({
cr.translate(-x, -y);
},
- transformRectangle: function(x, y) {
+ transformPolygon: function(x, y) {
let points = this.points;
if (points.length < 2 || points[0][0] == points[1][0] || points[0][1] == points[1][1])
return;
- this.transform.center = [points[0][0] + (points[1][0] - points[0][0]) / 2, points[0][1] + (points[1][1] - points[0][1]) / 2];
-
- this.transform.angle = getAngle(this.transform.center[0], this.transform.center[1], points[1][0], points[1][1], x, y);
+ this.transform.center = points.length >= 3 ? getCentroid(points) : getNaiveCenter(points);
+ this.transform.angle = getAngle(this.transform.center[0], this.transform.center[1], points[points.length - 1][0], points[points.length - 1][1], x, y);
this.transform.active = true;
},
@@ -1096,9 +1142,36 @@ const DrawingElement = new Lang.Class({
this.points[2] = this.points[1];
this.points[1] = [x, y];
this.transform.active = true;
- },
+ }
});
+const getNearness = function(pointA, pointB, distance) {
+ return Math.hypot(pointB[0] - pointA[0], pointB[1] - pointA[1]) < distance;
+};
+
+// mean of the vertices, ok for regular polygons
+const getNaiveCenter = function(points) {
+ return points.reduce((accumulator, point) => accumulator = [accumulator[0] + point[0], accumulator[1] + point[1]])
+ .map(coord => coord / points.length);
+};
+
+// https://en.wikipedia.org/wiki/Centroid#Of_a_polygon
+const getCentroid = function(points) {
+ let n = points.length;
+ points.push(points[0]);
+
+ let [sA, sX, sY] = [0, 0, 0];
+ for (let i = 0; i <= n-1; i++) {
+ let a = points[i][0]*points[i+1][1] - points[i+1][0]*points[i][1];
+ sA += a;
+ sX += (points[i][0] + points[i+1][0]) * a;
+ sY += (points[i][1] + points[i+1][1]) * a;
+ }
+
+ points.pop();
+ return [sX / (3 * sA), sY / (3 * sA)];
+};
+
const getAngle = function(xO, yO, xA, yA, xB, yB) {
// calculate angle of rotation in absolute value
// cos(AOB) = (OA.OB)/(||OA||*||OB||) where OA.OB = (xA-xO)*(xB-xO) + (yA-yO)*(yB-yO)
@@ -1477,6 +1550,10 @@ const DrawingMenu = new Lang.Class({
});
subItem.label.get_clutter_text().set_use_markup(true);
+
+ // change the display order of shapes
+ if (obj == ShapeNames && i == Shapes.POLYGON)
+ item.menu.moveMenuItem(subItem, 4);
}
return GLib.SOURCE_REMOVE;
});
diff --git a/extension.js b/extension.js
index 8fa8ad2..bc628a8 100644
--- a/extension.js
+++ b/extension.js
@@ -191,6 +191,7 @@ var AreaManager = new Lang.Class({
'select-ellipse-shape': () => this.activeArea.selectShape(Draw.Shapes.ELLIPSE),
'select-rectangle-shape': () => this.activeArea.selectShape(Draw.Shapes.RECTANGLE),
'select-text-shape': () => this.activeArea.selectShape(Draw.Shapes.TEXT),
+ 'select-polygon-shape': () => this.activeArea.selectShape(Draw.Shapes.POLYGON),
'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),
diff --git a/locale/draw-on-your-screen.pot b/locale/draw-on-your-screen.pot
index 8452fe8..9863ac1 100644
--- a/locale/draw-on-your-screen.pot
+++ b/locale/draw-on-your-screen.pot
@@ -58,6 +58,9 @@ msgstr ""
msgid "Text"
msgstr ""
+msgid "Polygon"
+msgstr ""
+
msgid "Fill"
msgstr ""
@@ -70,6 +73,11 @@ msgstr ""
msgid "Full line"
msgstr ""
+msgid ""
+"Press Enter\n"
+"to mark vertices"
+msgstr ""
+
msgid ""
"Type your text\n"
"and press Escape"
@@ -153,6 +161,9 @@ msgstr ""
msgid "Select rectangle"
msgstr ""
+msgid "Select polygon"
+msgstr ""
+
msgid "Select text"
msgstr ""
diff --git a/prefs.js b/prefs.js
index 114c7f3..b7ff66e 100644
--- a/prefs.js
+++ b/prefs.js
@@ -47,6 +47,7 @@ var INTERNAL_KEYBINDINGS = {
'select-line-shape': "Select line",
'select-ellipse-shape': "Select ellipse",
'select-rectangle-shape': "Select rectangle",
+ 'select-polygon-shape': "Select polygon",
'select-text-shape': "Select text",
'select-none-shape': "Unselect shape (free drawing)",
'toggle-fill': "Toggle fill/stroke",
diff --git a/schemas/gschemas.compiled b/schemas/gschemas.compiled
index 1cd66c5..ab895c7 100644
Binary files a/schemas/gschemas.compiled and b/schemas/gschemas.compiled differ
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 1454195..616e3f7 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
@@ -81,6 +81,11 @@
select rectangle
select rectangle
+
+ ["<Primary>y"]
+ select polygon
+ select polygon
+
["<Primary>l"]
select line