[gnome-maps/wip/mlundblad/transit-routing: 15/32] Add label widget for route labels

[Marcus Lundblad <mlundblad src gnome org>]

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

    Add label widget for route labels
    
    This adds a label widget for representing parts of transit
    journeys.
    The label can use "long" or "compact" mode, where the latter
    is suited for presenting in an overview and the former
    for a detailed view of an itinerary.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=755808

 data/gnome-maps.css                    |   10 +++
 data/org.gnome.Maps.data.gresource.xml |    2 +
 data/ui/transit-route-label.ui         |   13 +++
 src/org.gnome.Maps.src.gresource.xml   |    1 +
 src/transitRouteLabel.js               |  129 ++++++++++++++++++++++++++++++++
 5 files changed, 155 insertions(+), 0 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 7639f47..5ff11b5 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -85,3 +85,13 @@
 .printing-text {
     color: rgb(0, 0, 0);
 }
+
+.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/data/ui/transit-route-label.ui b/data/ui/transit-route-label.ui
new file mode 100644
index 0000000..b5479a1
--- /dev/null
+++ b/data/ui/transit-route-label.ui
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<interface>
+  <requires lib="gtk+" version="3.14"/>
+  <template class="Gjs_TransitRouteLabel" parent="GtkLabel">
+    <property name="visible">True</property>
+    <property name="use-markup">True</property>
+    <property name="max-width-chars">12</property>
+    <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+    <style>
+      <class name="route-label"/>
+    </style>
+  </template>
+</interface>
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index 9353b7d..5f853d7 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -77,6 +77,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..70d8265
--- /dev/null
+++ b/src/transitRouteLabel.js
@@ -0,0 +1,129 @@
+/* -*- 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;
+
+/* 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 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 label = this._leg.route;
+
+        textColor = Utils.getContrastingForegroundColor(color, textColor);
+
+        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;
+        this._fgRed = parseInt(textColor.substring(0, 2), 16) / 255;
+        this._fgGreen = parseInt(textColor.substring(2, 4), 16) / 255;
+        this._fgBlue = parseInt(textColor.substring(4, 6), 16) / 255;
+
+        if (Utils.relativeLuminance(color) > OUTLINE_LUMINANCE_THREASHHOLD)
+            this._hasOutline = true;
+
+        /* for compact (overview) mode, try to shorten the label if the route
+         * name was more than 6 characters */
+        if (this._compact && label.length > 6) {
+            if (this._leg.route.startsWith(this._leg.agencyName)) {
+                /* if the agency name is a prefix of the route name, display the
+                 * agency name in the overview, this way we get a nice "transition"
+                 * into the expanded route showing the full route name */
+                label = this._leg.agencyName;
+            } else if (this._leg.tripShortName &&
+                       (this._leg.agencyName.length <
+                        this._leg.tripShortName.length)) {
+                /* if the agency name is shorter than the trip short name,
+                 * which can sometimes be a more "internal" number, like a
+                 * "train number", which is less known by the general public,
+                 * prefer the agency name */
+                label = this._leg.agencyName;
+            } else if (this._leg.tripShortName &&
+                       this._leg.tripShortName.length <= 6) {
+                /* if the above conditions are unmet, use the trip short name
+                 * as a fallback if it was shorter than the original route name */
+                label = this._leg.tripShortName;
+            }
+            /* if none of the above is true, use the original route name,
+             * and rely on label ellipsization */
+        }
+
+        /* restrict number of characters shown in the label when compact mode
+         * is requested */
+        if (this._compact)
+            this.max_width_chars = 6;
+
+        this.label =
+            '<span foreground="#%s">%s</span>'.format(textColor, label);
+    },
+
+    /* 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(this._fgRed, this._fgGreen, this._fgBlue);
+            cr.setLineWidth(1);
+            cr.stroke();
+        }
+
+        return false;
+    }
+});