merge drawing into abstract class

src/extension.js

@@ -24,6 +24,7 @@ const Gettext        = imports.gettext;
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = ExtensionUtils.getCurrentExtension();
 const Utils          = Me.imports.utils;
+const Icon           = Me.imports.icon;
 
 const bUseGnome34Workarounds = imports.misc.extensionUtils.versionCheck( ["3.4"], imports.misc.config.PACKAGE_VERSION);
 
@@ -148,18 +149,13 @@ const TeaTime = new Lang.Class({
 
         this._settings = Utils.getSettings();
 
-        this._logo     = new Me.imports.icon.TeaPot(24);
+        this._logo     = new Icon.TwoColorIcon(24, Icon.TeaPot);
 
         // set timer widget
         this._textualTimer   = new St.Label({ text: "",
                                               x_align: Clutter.ActorAlign.END,
                                               y_align: Clutter.ActorAlign.CENTER  });
-        this._graphicalTimer = new St.DrawingArea({
+        this._graphicalTimer = new Icon.TwoColorIcon(24, Icon.Pie);
-            reactive : true
-        });
-        this._graphicalTimer.set_width(20);
-        this._graphicalTimer.set_height(20);
-        this._graphicalTimer.connect('repaint', Lang.bind(this, this._drawTimer));
 
         this.actor.add_actor(this._logo);
         this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
@@ -285,7 +281,6 @@ const TeaTime = new Lang.Class({
         this._startTime     = new Date();
         this._stopTime      = new Date();
         this._cntdownStart  = time;
-        this._progress      = 0;
 
         this._bGraphicalCountdown = this._settings.get_boolean(Utils.TEATIME_GRAPHICAL_COUNTDOWN_KEY);
 
@@ -310,8 +305,7 @@ const TeaTime = new Lang.Class({
     },
     _updateTimerDisplay: function(remainingTime) {
         if (  this._bGraphicalCountdown ) {
-            this._progress    = (this._cntdownStart - remainingTime) / this._cntdownStart;
+            this._graphicalTimer.setStatus((this._cntdownStart - remainingTime) / this._cntdownStart);
-            this._graphicalTimer.queue_repaint();
         } else {
             this._textualTimer.text =  Utils.formatTime(remainingTime);
         }
@@ -341,30 +335,6 @@ const TeaTime = new Lang.Class({
             return true; // continue timer
         }
     },
-    _drawTimer : function() {
-        let[width, height] = this._graphicalTimer.get_surface_size();
-        let cr = this._graphicalTimer.get_context();
-        let pi = Math.PI;
-        let  r = Math.min(width, height) * 0.5;;
-
-        cr.setSourceRGBA(0, 0, 0, 0);
-        cr.rectangle(0, 0, width, height);
-        cr.fill();
-
-        cr.translate(Math.floor(width / 2), Math.floor(height / 2));
-        cr.save();
-
-        Utils.setCairoColorFromClutter(cr, this._secondaryColor);
-        cr.moveTo(0, 0);
-        cr.arc(0, 0, r, 3 / 2 * pi + 2 * pi * this._progress, 3 / 2 * pi + 2
-                * pi);
-        cr.fill();
-
-        Utils.setCairoColorFromClutter(cr, this._primaryColor);
-        cr.moveTo(0, 0);
-        cr.arc(0, 0, r, 3 / 2 * pi, 3 / 2 * pi + 2 * pi * this._progress);
-        cr.fill();
-    },
     _playSound : function() {
         let bPlayAlarmSound = this._settings.get_boolean(Utils.TEATIME_USE_ALARM_SOUND_KEY);
         if (bPlayAlarmSound) {
@@ -385,7 +355,8 @@ const TeaTime = new Lang.Class({
             blue: color.blue,
             alpha: color.alpha*0.3
         });
-        this._logo.setColor(this._primaryColor);
+        this._logo.setColor(this._primaryColor, this._secondaryColor);
+        this._graphicalTimer.setColor(this._primaryColor, this._secondaryColor);
     }
 });
 

src/icon.js

@@ -17,14 +17,16 @@ const ExUt    = imports.misc.extensionUtils;
 const Me      = ExUt.getCurrentExtension();
 const Utils   = Me.imports.utils;
 
-const TeaPot = new Lang.Class({
+const TwoColorIcon = new Lang.Class({
-	Name: 'TeaPot',
+	Name: 'TwoColorIcon',
 	Extends: St.DrawingArea,
 
-	_init : function(size) {
+	_init : function(size, drawingObject) {
 		this.parent({ reactive : true });
         this.set_width(size);
         this.set_height(size);
+		this._drawingObject = drawingObject;
+
 		this.connect('repaint', Lang.bind(this, this._drawIcon));
 
 		// some fallback color
@@ -34,19 +36,24 @@ const TeaPot = new Lang.Class({
             blue: 150,
             alpha: 255
         });
+		this._secundaryColor = this._primaryColor;
+		this._currentStatus  = null;
 	},
-    setColor: function(col) {
+    setColor: function(primary, secundary) {
-		this._primaryColor = col;
+		this._primaryColor   = primary;
+		this._secundaryColor = secundary;
 		this.queue_repaint();
     },
+	setStatus: function(newStatus) {
+		this._customStatus = newStatus;
+		this.queue_repaint();
+	},
 	_drawIcon: function() {
 	  	let cr    = this.get_context();
-		let orWdt = 484; // from the svg file
+		let orWdt = this._drawingObject.width; 
-		let orHgt = 295;
+		let orHgt = this._drawingObject.height;
         let[width, height] = this.get_surface_size();
 
-		Utils.setCairoColorFromClutter(cr, this._primaryColor);
-
 		cr.save();
 
 		// layout object in box	
@@ -59,11 +66,23 @@ const TeaPot = new Lang.Class({
 			cr.translate(-(orWdt-orHgt)*0.5, 0);;	
 		}
 
+		this._drawingObject.draw(cr, this._customStatus, this._primaryColor, this._secundaryColor);
 
-		// draw TeaPot
+		cr.restore();
+	}
+
+});
+
+const TeaPot = {
+	width  : 484,
+	height : 295,
+	draw   : function(cr, stat, primary, secundary) {
+	// draw TeaPot
 		// cairo commands generated from svg2cairo
 		// https://github.com/akrinke/svg2cairo
 
+		Utils.setCairoColorFromClutter(cr, primary);
+
 		cr.moveTo(127.894531, 276.472656);
 		cr.curveTo(98.457031, 244.316406, 76.527344, 238.09375, 47.953125, 210.996094);
 		cr.curveTo(17.957031, 186.902344, -7.5625, 148.257812, 2.066406, 108.261719);
@@ -94,9 +113,31 @@ const TeaPot = new Lang.Class({
 		cr.fillPreserve();
 
 		// end of image
-		cr.restore();
+	} // draw
-	}
+}; // TeaPot
-
-});
 
 
+const Pie = {
+	width : 1,
+	height: 1,
+	draw   : function(cr, stat, primary, secundary) {
+        const pi = Math.PI;
+		const r  = 0.5;
+
+		if(stat == null) stat = 0;
+
+        cr.translate(0.5, 0.5);
+        cr.save();
+
+        Utils.setCairoColorFromClutter(cr, secundary);
+        cr.moveTo(0, 0);
+        cr.arc(0, 0, r, 3 / 2 * pi + 2 * pi * stat, 3 / 2 * pi + 2
+                * pi);
+        cr.fill();
+
+        Utils.setCairoColorFromClutter(cr, primary);
+        cr.moveTo(0, 0);
+        cr.arc(0, 0, r, 3 / 2 * pi, 3 / 2 * pi + 2 * pi * stat);
+        cr.fill();
+    } // draw
+}; // Pie