All merged

area.js

@@ -32,6 +32,9 @@ import Gtk from 'gi://Gtk';
 import Pango from 'gi://Pango';
 import Shell from 'gi://Shell';
 import St from 'gi://St';
+import Cogl from 'gi://Cogl';
+
+const Color = Clutter.Color ?? Cogl.Color;
 
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import * as Screenshot from 'resource:///org/gnome/shell/ui/screenshot.js';
@@ -1164,7 +1167,7 @@ export const DrawingArea = GObject.registerClass({
     }
 
     _onColorPicked(color) {
-        if (color instanceof Clutter.Color)
+        if (color instanceof Color)
             color = color.to_string().slice(0, -2);
 
         this.currentColor = this.getColorFromString(color);
@@ -1209,7 +1212,7 @@ export const DrawingArea = GObject.registerClass({
 
             if (pickPixel.pickAsync) {
                 pickPixel.pickAsync().then(result => {
-                    if (result instanceof Clutter.Color) {
+                    if (result instanceof Color) {
                         // GS 3.38+
                         this._onColorPicked(result);
                     } else {
@@ -1472,7 +1475,7 @@ export const DrawingArea = GObject.registerClass({
     // toString provides a string suitable for displaying the color name to the user.
     getColorFromString(string, fallback) {
         let [colorString, displayName] = string.split(':');
-        let [success, color] = Clutter.Color.from_string(colorString);
+        let [success, color] = Color.from_string(colorString);
         color.toJSON = () => colorString;
         color.toString = () => displayName || colorString;
         if (success)

elements.js

@@ -27,19 +27,22 @@ import Clutter from 'gi://Clutter';
 import GObject from 'gi://GObject';
 import Pango from 'gi://Pango';
 import PangoCairo from 'gi://PangoCairo';
+import Cogl from 'gi://Cogl';
 
 import { CURATED_UUID as UUID } from './utils.js';
 
+const Color = Clutter.Color ?? Cogl.Color;
+
 export const StaticColor = {
-    WHITE: Clutter.Color.new(255, 255, 255, 255),
-    BLUE: Clutter.Color.new(0, 0, 255, 255),
-    TRANSPARENT: Clutter.Color.new(0, 0, 0, 0),
-    BLACK: Clutter.Color.new(0, 0, 0, 255),
-    GRAY: Clutter.Color.new(160, 160, 164, 255),
-    RED: Clutter.Color.new(255, 0, 0, 255)
-}
+    WHITE: Color.from_string('#ffffff'),
+    BLUE: Color.from_string('#0000ff'),
+    TRANSPARENT: Color.from_string('#00000000'),
+    BLACK: Color.from_string('#000000'),
+    GRAY: Color.from_string('#a0a0a4'),
+    RED: Color.from_string('#ff0000')
+};
 
-export const Shape = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 };
+export const Shape = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7, ARROW: 8 };
 export const TextAlignment = { LEFT: 0, CENTER: 1, RIGHT: 2 };
 export const Transformation = { TRANSLATION: 0, ROTATION: 1, SCALE_PRESERVE: 2, STRETCH: 3, REFLECTION: 4, INVERSION: 5, SMOOTH: 100 };
 
@@ -255,8 +258,7 @@ const _DrawingElement = GObject.registerClass({
             cr.moveTo(points[0][0], points[0][1]);
             for (let j = 1; j < points.length; j++) {
                 cr.lineTo(points[j][0], points[j][1]);
-            }
-
+            }     
         } else if (shape == Shape.ELLIPSE && points.length >= 2) {
             let radius = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]);
             let ratio = 1;
@@ -284,6 +286,21 @@ const _DrawingElement = GObject.registerClass({
             if (shape == Shape.POLYGON)
                 cr.closePath();
 
+        } else if (shape == Shape.ARROW && points.length >= 2) {
+            // Draw the main line
+            cr.moveTo(points[0][0], points[0][1]);
+            cr.lineTo(points[1][0], points[1][1]);
+
+            // Draw arrowhead
+            let angle = Math.atan2(points[1][1] - points[0][1], points[1][0] - points[0][0]);
+            let arrowSize = this.line.lineWidth * 5; // Adjust this multiplier to change arrow size
+
+            cr.moveTo(points[1][0], points[1][1]);
+            cr.lineTo(points[1][0] - arrowSize * Math.cos(angle - Math.PI/6),
+                    points[1][1] - arrowSize * Math.sin(angle - Math.PI/6));
+            cr.moveTo(points[1][0], points[1][1]);
+            cr.lineTo(points[1][0] - arrowSize * Math.cos(angle + Math.PI/6),
+                    points[1][1] - arrowSize * Math.sin(angle + Math.PI/6));
         }
     }
 
@@ -427,6 +444,17 @@ const _DrawingElement = GObject.registerClass({
                 row += ` ${points[i][0]},${points[i][1]}`;
             row += `"${transAttribute}/>`;
 
+        } else if (this.shape == Shape.ARROW && points.length >= 2) {
+            let angle = Math.atan2(points[1][1] - points[0][1], points[1][0] - points[0][0]);
+            let arrowSize = this.line.lineWidth * 5; // Should match the Cairo version
+
+            row += `<path ${attributes} d="M${points[0][0]},${points[0][1]} `;
+            row += `L${points[1][0]},${points[1][1]} `;
+            row += `M${points[1][0]},${points[1][1]} `;
+            row += `L${points[1][0] - arrowSize * Math.cos(angle - Math.PI/6)},${points[1][1] - arrowSize * Math.sin(angle - Math.PI/6)} `;
+            row += `M${points[1][0]},${points[1][1]} `;
+            row += `L${points[1][0] - arrowSize * Math.cos(angle + Math.PI/6)},${points[1][1] - arrowSize * Math.sin(angle + Math.PI/6)}"`;
+            row += `${transAttribute}/>`;
         }
 
         return row;

files.js

@@ -37,7 +37,7 @@ class Icons {
     constructor(extension) {
         const ICON_NAMES = [
             'arc', 'color', 'dashed-line', 'document-export', 'fillrule-evenodd', 'fillrule-nonzero', 'fill', 'full-line', 'linecap', 'linejoin', 'palette', 'smooth', 'stroke',
-            'tool-ellipse', 'tool-line', 'tool-mirror', 'tool-move', 'tool-none', 'tool-polygon', 'tool-polyline', 'tool-rectangle', 'tool-resize',
+            'tool-ellipse', 'tool-line', 'tool-mirror', 'tool-move', 'tool-none', 'tool-polygon', 'tool-polyline', 'tool-rectangle', 'tool-resize', 'tool-arrow',
         ];
         const ICON_DIR = extension.dir.get_child('data').get_child('icons');
         const THEMED_ICON_NAMES = {

locale/de/LC_MESSAGES/draw-on-your-screen.po

@@ -241,6 +241,10 @@ msgctxt "drawing-tool"
 msgid "Line"
 msgstr "Linie"
 
+msgctxt "drawing-tool"
+msgid "Arrow"
+msgstr "Pfeil"
+
 msgctxt "drawing-tool"
 msgid "Ellipse"
 msgstr "Ellipse"
@@ -643,6 +647,9 @@ msgstr "Werkzeug Bild auswählen"
 msgid "Select line tool"
 msgstr "Werkzeug Linie auswählen"
 
+msgid "Select arrow tool"
+msgstr "Werkzeug Pfeil auswählen"
+
 msgid "Select mirror tool"
 msgstr "Werkzeug Spiegeln auswählen"
 

locale/draw-on-your-screen.po

@@ -230,6 +230,10 @@ msgctxt "drawing-tool"
 msgid "Line"
 msgstr ""
 
+msgctxt "drawing-tool"
+msgid "Arrow"
+msgstr ""
+
 msgctxt "drawing-tool"
 msgid "Ellipse"
 msgstr ""
@@ -648,6 +652,9 @@ msgstr ""
 msgid "Select line tool"
 msgstr ""
 
+msgid "Select arrow tool"
+msgstr ""
+
 msgid "Select mirror tool"
 msgstr ""