[gnome-maps/wip/mlundblad/transit-routing: 2/5] WIP: Add label widget for route labels

[Marcus Lundblad <mlundblad src gnome org>]

commit 659cc3737e40bd7cf2164dc97e3646ed64e2d647
Author: Marcus Lundblad <ml update uu se>
Date:   Tue May 31 23:26:26 2016 +0200

    WIP: Add label widget for route labels

 data/gnome-maps.css                    |   15 ++++
 data/org.gnome.Maps.data.gresource.xml |    2 +
 src/org.gnome.Maps.src.gresource.xml   |    1 +
 src/transitRouteLabel.js               |  119 ++++++++++++++++++++++++++++++++
 4 files changed, 137 insertions(+), 0 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 0f7c8ce..a8e4954 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -81,3 +81,18 @@
 .maps-check-in GtkTextView {
     font-size: large;
 }
+
+.shaded {
+    background-color: alpha(black, 0.1);
+    border-bottom: 1px solid alpha(black, 0.2);
+}
+
+.route-label {
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    min-width: 16px;
+    min-height: 16px;
+    font-size: smaller;
+}
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index 2c9c82d..33cbea1 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -31,6 +31,8 @@
     <file preprocess="xml-stripblanks">ui/sidebar.ui</file>
     <file preprocess="xml-stripblanks">ui/social-place-more-results-row.ui</file>
     <file preprocess="xml-stripblanks">ui/social-place-row.ui</file>
+    <file preprocess="xml-stripblanks">ui/transit-itinerary-row.ui</file>
+    <file preprocess="xml-stripblanks">ui/transit-route-label.ui</file>
     <file preprocess="xml-stripblanks">ui/user-location-bubble.ui</file>
     <file preprocess="xml-stripblanks">ui/zoom-control.ui</file>
     <file preprocess="xml-stripblanks">ui/zoom-in-notification.ui</file>
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index 8a9a218..7fc9174 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -74,6 +74,7 @@
     <file>togeojson/togeojson.js</file>
     <file>transitOptions.js</file>
     <file>transitPlan.js</file>
+    <file>transitRouteLabel.js</file>
     <file>translations.js</file>
     <file>turnPointMarker.js</file>
     <file>userLocationBubble.js</file>
diff --git a/src/transitRouteLabel.js b/src/transitRouteLabel.js
new file mode 100644
index 0000000..5aaea18
--- /dev/null
+++ b/src/transitRouteLabel.js
@@ -0,0 +1,119 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2016 Marcus Lundblad.
+ *
+ * GNOME Maps is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * GNOME Maps is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with GNOME Maps; if not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Marcus Lundblad <ml update uu se>
+ */
+
+const Lang = imports.lang;
+
+const Cairo = imports.cairo;
+const Gtk = imports.gi.Gtk;
+
+const Utils = imports.utils;
+
+/* default route label colors */
+const DEFAULT_COLOR = "3465a4";
+const DEFAULT_TEXT_COLOR = "ffffff";
+
+/* threashhold for route color luminance when we consider it more or less
+ * as white, and draw an outline around the label */
+const OUTLINE_LUMINANCE_THREASHHOLD = 0.9;
+
+const MIN_CONTRAST_RATIO = 4.0;
+
+const TransitRouteLabel = new Lang.Class({
+    Name: 'TransitRouteLabel',
+    Extends: Gtk.Label,
+    Template: 'resource:///org/gnome/Maps/ui/transit-route-label.ui',
+
+    _init: function(params) {
+        this._leg = params.leg;
+        delete params.leg;
+
+        this._compact = params.compact;
+        delete params.compact;
+
+        this.parent(params);
+
+        this._setLabel();
+        this.connect('draw', this._onDraw.bind(this));
+    },
+
+    _setLabel: function() {
+        let color = this._leg.color;
+        let textColor = this._leg.textColor;
+        let route = this._leg.route;
+
+        if (!color)
+            color = DEFAULT_COLOR;
+
+        if (!textColor)
+            textColor = DEFAULT_TEXT_COLOR;
+
+        if (Utils.contrastRatio(color, textColor) < MIN_CONTRAST_RATIO) {
+            let contrastAgainstWhite = Utils.contrastRatio(color, 'ffffff');
+            let contrastAgainstBlack = Utils.contrastRatio(color, '000000');
+
+            if (contrastAgainstWhite > contrastAgainstBlack)
+                textColor = 'ffffff';
+            else
+                textColor = '000000';
+        }
+
+        this._bgRed = parseInt(color.substring(0, 2), 16) / 255;
+        this._bgGreen = parseInt(color.substring(2, 4), 16) / 255;
+        this._bgBlue = parseInt(color.substring(4, 6), 16) / 255;
+
+        if (Utils.relativeLuminance(color) > OUTLINE_LUMINANCE_THREASHHOLD)
+            this._hasOutline = true;
+
+        /* TODO: take the "compact" parameter in consideration and produce a
+         * shortend variant in case the route is too long for overview use
+         * (can be the case for i.e. train lines)
+         */
+        this.label =
+            '<span foreground="#%s">%s</span>'.format(textColor, route);
+    },
+
+    /* I didn't find any easy/obvious way to override widget background color
+     * and getting rounded corner just using CSS styles, so doing a custom
+     * Cairo drawing of a "roundrect" */
+    _onDraw: function(widget, cr) {
+        let width = widget.get_allocated_width();
+        let height = widget.get_allocated_height();
+        let radius = 3;
+
+        cr.newSubPath();
+        cr.arc(width - radius, radius, radius, -Math.PI / 2, 0);
+        cr.arc(width - radius, height - radius, radius, 0 , Math.PI / 2);
+        cr.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
+        cr.arc(radius, radius, radius, Math.PI, 3 * Math.PI / 2);
+        cr.closePath();
+
+        cr.setSourceRGB(this._bgRed, this._bgGreen, this._bgBlue);
+        cr.fillPreserve();
+
+        if (this._hasOutline) {
+            cr.setSourceRGB(0, 0, 0);
+            cr.setLineWidth(1);
+            cr.stroke();
+        }
+
+        return false;
+    }
+});