Add zoom and rotation buttons class

Container with zoom controls and a rotation
button revealing when the map view is rotated
relative to "north is up". Clicking the rotation
button resets rotation to "north is up".

5 files changed, 146 insertions, 0 deletions

diff --git a/data/org.gnome.Maps.data.gresource.xml.in b/data/org.gnome.Maps.data.gresource.xml.in
index 4782ac07..5c4a307a 100644
--- a/data/org.gnome.Maps.data.gresource.xml.in
+++ b/data/org.gnome.Maps.data.gresource.xml.in
@@ -36,6 +36,7 @@
     <file preprocess="xml-stripblanks">ui/transit-options-panel.ui</file>
     <file preprocess="xml-stripblanks">ui/transit-route-label.ui</file>
     <file preprocess="xml-stripblanks">ui/transit-stop-row.ui</file>
+    <file preprocess="xml-stripblanks">ui/zoom-and-rotate-controls.ui</file>
     <file preprocess="xml-stripblanks">ui/zoom-in-dialog.ui</file>
     <file alias="application.css">gnome-maps.css</file>
     <file alias="osm-types.json" compressed="true">osm-types.json</file>
diff --git a/data/ui/zoom-and-rotate-controls.ui b/data/ui/zoom-and-rotate-controls.ui
new file mode 100644
index 00000000..c6652209
--- /dev/null
+++ b/data/ui/zoom-and-rotate-controls.ui
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="Gjs_ZoomAndRotateControls" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkButton">
+            <property name="focusable">1</property>
+            <property name="valign">center</property>
+            <property name="action-name">win.zoom-in</property>
+            <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Zoom In</property>
+            <property name="icon-name">value-increase-symbolic</property>
+            <style>
+              <class name="osd"/>
+              <class name="circular"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="focusable">1</property>
+            <property name="valign">center</property>
+            <property name="action-name">win.zoom-out</property>
+            <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Zoom Out</property>
+            <property name="icon-name">value-decrease-symbolic</property>
+             <style>
+               <class name="osd"/>
+               <class name="circular"/>
+            </style>
+          </object>
+        </child>
+        <style>
+          <class name="linked"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkRevealer" id="revealer">
+        <property name="transition-type">crossfade</property>
+        <child>
+          <object class="Gjs_RotationButton" id="rotationButton">
+            <property name="focusable">1</property>
+            <property name="valign">center</property>
+            <property name="action-name">win.reset-rotation</property>
+            <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Reset Rotation</property>
+            <property name="icon-name">navigate-north-symbolic</property>
+             <style>
+               <class name="osd"/>
+               <class name="circular"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 42d09049..f3ed7565 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -26,6 +26,7 @@ data/ui/transit-options-panel.ui
 data/ui/place-bar.ui
 data/ui/place-buttons.ui
 data/ui/place-view.ui
+data/ui/zoom-and-rotate-controls.ui
 data/ui/zoom-in-dialog.ui
 lib/maps-file-data-source.c
 lib/maps-osm.c
diff --git a/src/org.gnome.Maps.src.gresource.xml.in b/src/org.gnome.Maps.src.gresource.xml.in
index d09081f3..4299e181 100644
--- a/src/org.gnome.Maps.src.gresource.xml.in
+++ b/src/org.gnome.Maps.src.gresource.xml.in
@@ -103,6 +103,7 @@
     <file>xmldom/dom.js</file>
     <file>xmldom/domparser.js</file>
     <file>xmldom/sax.js</file>
+    <file>zoomAndRotateControls.js</file>
     <file>zoomInDialog.js</file>
     <file alias="geojsonvt/clip.js">clip.js</file>
     <file alias="geojsonvt/convert.js">convert.js</file>
diff --git a/src/zoomAndRotateControls.js b/src/zoomAndRotateControls.js
new file mode 100644
index 00000000..6745ed21
--- /dev/null
+++ b/src/zoomAndRotateControls.js
@@ -0,0 +1,83 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2023 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, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * Author: Marcus Lundblad <ml@dfupdate.se>
+ */
+
+import Gtk from 'gi://Gtk';
+import GObject from 'gi://GObject';
+import Graphene from 'gi://Graphene';
+
+class RotationButton extends Gtk.Button {
+
+    vfunc_snapshot(snapshot) {
+        let mapView = this.parent.parent.mapView;
+
+        snapshot.save();
+
+        if (mapView?.map.viewport.rotation != 0.0) {
+            // rotate around the center of the icon
+            let width = this.get_width();
+            let height = this.get_height();
+            let point = new Graphene.Point();
+
+            point.init(width / 2, height / 2);
+            snapshot.translate(point);
+            snapshot.rotate(mapView.map.viewport.rotation * 180 / Math.PI);
+            point.init(-width / 2, -height / 2);
+            snapshot.translate(point);
+        }
+
+        super.vfunc_snapshot(snapshot);
+        snapshot.restore();
+    }
+}
+GObject.registerClass(RotationButton);
+
+export class ZoomAndRotateControls extends Gtk.Box {
+    constructor({ mapView, ...params }) {
+        super(params);
+
+        this._mapView = mapView;
+
+        this._mapView.map.viewport.connect('notify::rotation', () => {
+            this._updateRotationButton();
+        });
+
+        this._updateRotationButton();
+    }
+
+    _updateRotationButton() {
+        let rotation = this._mapView.map.viewport.rotation;
+
+        if (rotation != 0)
+            this._rotationButton.queue_draw();
+
+        this._revealer.reveal_child = rotation != 0;
+    }
+
+    get mapView() {
+        return this._mapView;
+    }
+}
+GObject.registerClass({
+    Template: 'resource:///org/gnome/Maps/ui/zoom-and-rotate-controls.ui',
+    InternalChildren: ['rotationButton',
+                       'revealer']
+}, ZoomAndRotateControls);