Gnome 47 support

area.js

@@ -25,6 +25,7 @@ import Cairo from 'cairo';
 import System from 'system';
 
 import Clutter from 'gi://Clutter';
+import Cogl from 'gi://Cogl'
 import Gio from 'gi://Gio';
 import GLib from 'gi://GLib';
 import GObject from 'gi://GObject';
@@ -1164,7 +1165,7 @@ export const DrawingArea = GObject.registerClass({
     }
 
     _onColorPicked(color) {
-        if (color instanceof Clutter.Color)
+        if (color instanceof Cogl.Color)
             color = color.to_string().slice(0, -2);
 
         this.currentColor = this.getColorFromString(color);
@@ -1209,7 +1210,7 @@ export const DrawingArea = GObject.registerClass({
 
             if (pickPixel.pickAsync) {
                 pickPixel.pickAsync().then(result => {
-                    if (result instanceof Clutter.Color) {
+                    if (result instanceof Cogl.Color) {
                         // GS 3.38+
                         this._onColorPicked(result);
                     } else {
@@ -1472,7 +1473,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] = Cogl.Color.from_string(colorString);
         color.toJSON = () => colorString;
         color.toString = () => displayName || colorString;
         if (success)

elements.js

@@ -24,19 +24,20 @@
 import Cairo from 'cairo';
 
 import Clutter from 'gi://Clutter';
+import Cogl from 'gi://Cogl'
 import GObject from 'gi://GObject';
 import Pango from 'gi://Pango';
 import PangoCairo from 'gi://PangoCairo';
 
 import { CURATED_UUID as UUID } from './utils.js';
 
 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: Cogl.Color.from_string('#ffffff')[1],
+    BLUE: Cogl.Color.from_string('#0000ff')[1],
+    TRANSPARENT: Cogl.Color.from_string('#00000000')[1],
+    BLACK: Cogl.Color.from_string('#000000')[1],
+    GRAY: Cogl.Color.from_string('#a0a0a4')[1],
+    RED: Cogl.Color.from_string('#ff0000')[1]
 }
 
 export const Shape = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 };

metadata.json

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