[gnome-weather/wip/ewlsh/gtk4] Fix thermometer scaling

[Evan Welsh <ewlsh src gnome org>]

commit 871beb1334ab921c56999c98f6023f364dd00632
Author: Evan Welsh <contact evanwelsh com>
Date:   Sun Jan 2 13:47:42 2022 -0600

    Fix thermometer scaling

 data/application.css   |  9 ------
 src/app/thermometer.js | 83 ++++++++++++++++++++------------------------------
 2 files changed, 33 insertions(+), 59 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 19d1959..f477fef 100644
--- a/data/application.css
+++ b/data/application.css
@@ -51,15 +51,6 @@
     color: #c89009;
 }
 
-WeatherThermometerScale {
-    margin: 12px;
-}
-
-WeatherThermometerScale > .inner {
-    border-radius: 50% / 12px;
-    background-image: linear-gradient(#2174d9, #c89009);
-}
-
 WeatherThermometer > label.high {
     font-weight: bold;
     color: #c89009;
diff --git a/src/app/thermometer.js b/src/app/thermometer.js
index e4100ec..3e3a733 100644
--- a/src/app/thermometer.js
+++ b/src/app/thermometer.js
@@ -24,6 +24,8 @@ const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
 const Gdk = imports.gi.Gdk;
 const Gtk = imports.gi.Gtk;
+const Graphene = imports.gi.Graphene;
+const Gsk = imports.gi.Gsk;
 
 const Util = imports.misc.util;
 
@@ -41,16 +43,6 @@ var TemperatureRange = class TemperatureRange {
   }
 }
 
-const ThermometerScaleInternal = GObject.registerClass(class extends Gtk.Widget {
-  _init() {
-    super._init({
-      vexpand: true,
-      hexpand: true,
-      cssClasses: ['inner'],
-    });
-  }
-});
-
 const ThermometerScale = GObject.registerClass({
   CssName: 'WeatherThermometerScale',
   Properties: {
@@ -66,25 +58,12 @@ const ThermometerScale = GObject.registerClass({
   _init({ range = null, ...params }) {
     super._init({
       vexpand: true,
-      halign: Gtk.Align.CENTER,
+      halign: Gtk.Align.FILL,
+      overflow: Gtk.Overflow.HIDDEN,
       ...params
     });
 
     this.range = range;
-
-    this.inner = new ThermometerScaleInternal();
-  }
-
-  vfunc_root() {
-    super.vfunc_root();
-
-    this.inner.set_parent(this);
-  }
-
-  vfunc_unroot() {
-    this.inner.unparent();
-
-    super.vfunc_unroot();
   }
 
   vfunc_map() {
@@ -101,42 +80,46 @@ const ThermometerScale = GObject.registerClass({
     super.vfunc_unmap();
   }
 
-  vfunc_size_allocate(width, height, baseline) {
-    super.vfunc_size_allocate(width, height, baseline);
+  vfunc_snapshot(snapshot) {
+    super.vfunc_snapshot(snapshot);
 
     if (!this.range) return;
+ 
+    const { width, height } = this.get_allocation();
 
-    const { dailyHigh, dailyLow, weeklyHigh, weeklyLow } = this.range;
+    const { dailyHigh, dailyLow, weeklyHigh, weeklyLow } = this.range;  
 
-    const { top, bottom, left, right } = this.get_style_context().get_padding();
+    const scaleFactor = height / (weeklyHigh - weeklyLow);
 
-    const temperatureRange = weeklyHigh - weeklyLow;
-    const yScale = (height - top - bottom) / temperatureRange;
+    const scaleWidth = 24;
+    const scaleHeight = scaleFactor * (dailyHigh - dailyLow);
+    const scaleRadius = 12;
 
-    const innerWidth = width - left - right;
-    const innerHeight = yScale * (dailyHigh - dailyLow) - bottom;
+    const x = (width - scaleWidth) / 2;
+    const y = scaleFactor * (weeklyHigh - dailyHigh);
 
-    const x = left;
-    const y = yScale * (weeklyHigh - dailyHigh) - top;
+    const bounds = new Graphene.Rect();
+    bounds.init(x, y, scaleWidth, scaleHeight);
 
-    this.inner.size_allocate(new Gdk.Rectangle({
-      x,
-      y,
-      width: innerWidth,
-      height: innerHeight
-    }), -1);
-  }
+    const outline = new Gsk.RoundedRect();
+    outline.init_from_rect(bounds, scaleRadius);
+
+    snapshot.push_rounded_clip(outline);
 
-  vfunc_measure(orientation, for_size) {
-    let minimum_baseline = -1, natural_baseline = - 1;
+    const [, warmColor] = this.get_style_context().lookup_color('thermometer_warm_color');
+    const [, coolColor] = this.get_style_context().lookup_color('thermometer_cold_color');
 
-    this.inner.measure(orientation, for_size);
+    snapshot.append_linear_gradient(
+      bounds,
+      new Graphene.Point({ x: x + scaleWidth / 2, y: 0 }),
+      new Graphene.Point({ x: x + scaleWidth / 2, y: height }),
+      [
+        new Gsk.ColorStop({ offset: 0.0, color: warmColor }),
+        new Gsk.ColorStop({ offset: 1.0, color: coolColor })
+      ]
+    );
 
-    if (orientation === Gtk.Orientation.HORIZONTAL) {
-      return [24, 24, minimum_baseline, natural_baseline];
-    } else {
-      return [36, 48, minimum_baseline, natural_baseline];
-    }
+    snapshot.pop();
   }
 });