Added support for GNOME v47 (Backwards compatible with v46)

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,17 +27,20 @@ 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 TextAlignment = { LEFT: 0, CENTER: 1, RIGHT: 2 };

metadata.json

@@ -9,7 +9,8 @@
     "persistent-file-name": "persistent",
     "svg-file-name": "DrawOnYourScreen",
     "shell-version": [
-        "46"
+        "46",
+        "47"
     ],
     "version": 12.7
 }