Gtk smooth panning issue - c++

Question

I am in a project where map and other information are displayed in a Gtk window. There are several map layers, that I draw into a Cairo surface and save in a .png (plotRect() function in code below). That .png is displayed in a Gtk image when there is a Gtk draw signal (draw()).
I now want to accomplish smooth grabbing and panning. When the mouse button is pressed, I want the whole image to be translated within the window area, follow the movements of the mouse. When the button is released the image should be Cairo remade and redrawn with new bounds. During the drag/pan procedure itself there is no need to draw areas that where previously out of the window borders -- it is OK to wait for that to be done when the mouse button is released.
Enclosed you find a simplified version of my code. The main has a loop going until the windows is closed, redrawing the image after each panning. The problem is in the pan() function. After the translation in line 21 I woould expect the draw statement in line 128 to successively draw panned images while moving the mouse, but the visible image is unaffected. Uncommenting line 23 shows that graph->image has really been modified, and I can see that the draw signal of line 25 is invoking the draw() callback function. After button release, the translated image is correctly displayed.
Can anyone please give me some advice?
I'm using gcc, Cairo, Gtk3 and Ubuntu 18.04 on a double-booted MacBook Pro 64 bit i5.
#include <cairo.h>
#include <chrono>
#include <cmath>
#include <gtk/gtk.h>
#include <iostream>
#include <mutex>
#include <thread>
using namespace std;
mutex mtx;
bool gtkMainLoopRunning = false;
#define SLEEP(d) this_thread::sleep_for(chrono::milliseconds(d))
template <class T>
inline T sqr(T x) {
return x * x;
}
//-----------------------------------------------------------------------------
class Graph {
double toplat, leftlon; // upper left corner
double dydlat, dxdlon; // pixels / degree lon/lat
public:
int size; // window x = y
GtkWidget *window;
GtkImage *image;
const char *png = "/tmp/image.png";
cairo_surface_t *surface{};
cairo_t *cr{};
bool closed = false;
bool leftbuttondown = false;
int mousex = 0, mousey = 0;
Graph(const double, const double, const double, const double);
~Graph();
void plotRect(const double, const double, const double, const double);
bool pan();
};
//-----------------------------------------------------------------------------
static gboolean draw(GtkWidget *widget, cairo_t *cr, gpointer data) {
Graph *graph = (Graph *)data;
if (!graph->leftbuttondown) {
mtx.lock();
gtk_image_set_from_file(graph->image, graph->png);
mtx.unlock();
}
return FALSE;
}
//-----------------------------------------------------------------------------
static gboolean clicked(GtkWidget *widget, GdkEventButton *button, gpointer data) {
Graph *graph = (Graph *)data;
if (button->button == 1) {
if (button->type == GDK_BUTTON_PRESS) {
graph->leftbuttondown = true;
} else if (button->type == GDK_BUTTON_RELEASE) {
graph->leftbuttondown = false;
}
}
graph->mousex = button->x;
graph->mousey = button->y;
return FALSE;
}
//-----------------------------------------------------------------------------
Graph::~Graph() {
do {
SLEEP(100);
} while (gtkMainLoopRunning); // wait until gtk main loop has stopped
cairo_destroy(cr);
cairo_surface_destroy(surface);
}
//-----------------------------------------------------------------------------
void destroyWindow(GtkWidget *widget, gpointer data) {
gtk_main_quit();
gtkMainLoopRunning = false;
Graph *graph = (Graph *)data;
graph->closed = true; // signal gtkThread to finish
gtk_widget_destroy((GtkWidget *)graph->image);
gtk_widget_destroy(graph->window);
}
//-----------------------------------------------------------------------------
Graph::Graph(const double minlat, const double minlon, const double maxlat, const double maxlon) {
gtk_init(NULL, NULL);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
size = 800;
gtk_widget_show(window);
image = (GtkImage *)gtk_image_new();
gtk_widget_set_size_request((GtkWidget *)image, size, size);
gtk_container_add(GTK_CONTAINER(window), (GtkWidget *)image);
gtk_widget_show((GtkWidget *)image);
g_signal_connect(image, "draw", G_CALLBACK(draw), this);
g_signal_connect(window, "destroy", G_CALLBACK(destroyWindow), this);
surface = cairo_image_surface_create(CAIRO_FORMAT_RGB24, size, size);
cr = cairo_create(surface);
gtk_widget_add_events(window, GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK | GDK_BUTTON1_MOTION_MASK);
g_signal_connect(window, "button-press-event", G_CALLBACK(clicked), this);
g_signal_connect(window, "button-release-event", G_CALLBACK(clicked), this);
g_signal_connect(window, "motion-notify-event", G_CALLBACK(clicked), this);
const double coslat = cos((minlat + maxlat) / 2 * M_PI / 180);
const double extension = max(maxlat - minlat, (maxlon - minlon) * coslat); // [lat degrees]
toplat = (minlat + maxlat + extension) / 2;
leftlon = (minlon + maxlon - extension / coslat) / 2;
dydlat = -size / extension; // [pixels/degree]
dxdlon = size / extension * coslat;
gtkMainLoopRunning = true;
thread(gtk_main).detach();
}
//-----------------------------------------------------------------------------
bool Graph::pan() {
const int sqrSignifPan = sqr(4);
while (!closed) {
if (leftbuttondown) {
int x0 = mousex;
int y0 = mousey;
int dx = 0, dy = 0;
GdkPixbuf *origPixbuf = gdk_pixbuf_new_from_file("/tmp/image.png", NULL);
char *origPixels = (char *)gdk_pixbuf_get_pixels(origPixbuf);
const int rowstride = gdk_pixbuf_get_rowstride(origPixbuf);
const int nChannels = gdk_pixbuf_get_n_channels(origPixbuf);
char *imagePixels = (char *)gdk_pixbuf_get_pixels(gtk_image_get_pixbuf(image));
while (leftbuttondown) {
const int dx0 = dx, dy0 = dy;
dx = mousex - x0, dy = mousey - y0;
if (sqr(dx - dx0) + sqr(dy - dy0) >= sqrSignifPan) {
const int minx = max(0, -dx);
const int nx = max(0, size - abs(dx));
if (nx > 0) {
for (int y = max(0, -dy); y < min(size, size - dy); ++y) {
memcpy(imagePixels + (y + dy) * rowstride + (minx + dx) * nChannels, origPixels + y * rowstride + minx * nChannels, nx * nChannels);
}
// gdk_pixbuf_save(gtk_image_get_pixbuf(image), "/tmp/imagePixbuf.png", "png", NULL, NULL);
gtk_widget_queue_draw((GtkWidget *)image);
SLEEP(10); // pause for drawing
}
}
SLEEP(100);
}
// rescale graph
toplat -= (mousey - y0) / dydlat;
leftlon -= (mousex - x0) / dxdlon;
dxdlon = -dydlat * cos((toplat + size / dydlat / 2) * M_PI / 180);
gtk_widget_queue_draw((GtkWidget *)image);
return true;
}
SLEEP(100);
}
return false;
}
//-----------------------------------------------------------------------------
void Graph::plotRect(const double minlat, const double minlon, const double maxlat, const double maxlon) {
cairo_set_source_rgb(cr, 1, 1, 1);
cairo_paint(cr);
cairo_rectangle(cr, (minlon - leftlon) * dxdlon, (minlat - toplat) * dydlat, (maxlon - minlon) * dxdlon, (maxlat - minlat) * dydlat);
cairo_set_source_rgb(cr, 0, 1, 0);
cairo_fill(cr);
mtx.lock();
remove(png);
cairo_surface_write_to_png(surface, png);
mtx.unlock();
}
//-----------------------------------------------------------------------------
int main() {
const double minlat = 59, minlon = 16, maxlat = 60, maxlon = 18;
Graph *graph = new Graph(minlat - 0.5, minlon - 1, maxlat + 0.5, maxlon + 1);
do {
graph->plotRect(minlat, minlon, maxlat, maxlon);
} while (graph->pan());
delete graph;
}