QWebEngine and leaflet

TonyN

I make a simple test application to draw polygon and circle. Code are below. The Test.html file works perfectly on Google Chrome; however, it does not do anything when I change modeShape = ModeShape.circle to draw a circle! The line myMap.dragging.disable() in the script seem not working in that mousedown event. It works outside of the event. Even so, the circle code still not working.

The polygon works fine though... I tried to debug through Chrome developer mode (using --remote-debugging-port), but since the javascript run on Qt side, I cannot set a break point and see how it work. I have a feeling that the mouse down and mouse up event did not get registered with QWebEngine...Anyone has any idea?

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtWebEngine/qtwebengineglobal.h>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtWebEngine::initialize();
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Geo Location")

    MainForm {
        anchors.fill: parent

    }
}

MainForm.ui.qml

import QtQuick 2.6
import QtWebEngine 1.5
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0

Rectangle {

    width: 500
    height: 360

    GridLayout {
        id: grid
        rows: 2
        anchors.fill: parent

        Button {
            Layout.row: 0
            Layout.preferredHeight: 50
            text: "hi"
            Layout.fillWidth: true
        }

        WebEngineView {
            id: webView
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.row: 1
            url: "file:///debug/EMnetGeoCoding/Test.html"
            //url:"http://www.google.com"
        }
    }
}

Test.html

<html>
<head>
	
    <title>EMnet - GeoCoding</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
	    
</head>
<body>



<div id="mapid" style="width: 100%; height: 100%;"></div>

<script>
	var myMap = L.map('mapid').setView([28.0986386,-80.6644167], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
	
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(myMap);

	// Create new empty polyline and add it to the map
	var userDefinedPolygon = L.polygon([]).addTo(myMap);
	
	// Create new empty circle and add it to the map
	var userDefinedCircle = L.circle([28.0986386,-80.6644167],{radius:0, opacity:0}).addTo(myMap);
	
	ModeShape = {polygon:1, circle:2};
	
	//
	// Change mode here
	//
	var modeShape = ModeShape.circle;
	
	function onMapClick(e) {		
		if (modeShape == ModeShape.polygon)
		{		
			// Add coordinate to the polyline
			userDefinedPolygon.addLatLng(e.latlng);		
		}
	}
	
	myMap.on('click', onMapClick);
	
	myMap.on({
        mousedown: function (e) {
			if (modeShape == ModeShape.circle){
				//
				// Temporary stop map from panning when mouse dragging
				//
				myMap.dragging.disable();
				
				//
				// Reset the location of the circle
				//
				userDefinedCircle.setLatLng(e.latlng);
				userDefinedCircle.setRadius(0);
				
				isNewCircle = false;
				
				//
				// Register mouse move event to  change the circle radius
				//
				myMap.on('mousemove', function (e) {				  
					var newRadius = myMap.distance(userDefinedCircle.getLatLng(),e.latlng);					
					userDefinedCircle.setRadius(newRadius);
				});
			};
        }       
	});
	
	myMap.on('mouseup',function(e){
		if (modeShape == ModeShape.circle)
		{
			//
			// Unregister the mouse move event
			//
			myMap.removeEventListener('mousemove');
			
			//
			// Enable panning when mouse dragging
			//
			myMap.dragging.enable();
		}
	})
</script>

</body>
</html>

? Offline

Hi! I can reproduce that behavior. But mouse events work just fine (e.g. using jQuery). I googled "leaflet mousedown" and found a couple of bug reports from around 2014. So too me, this looks very much like a leaflet bug.

TonyN

@Wieland said in QWebEngine and leaflet:

"leaflet mousedown"

Thank your for your response. I will research more on the mouse event of leaflet...
However, the html file works perfectly on Chrome browser, and even better under IE11. Is this relate to the QWebEngine does not use latest Chromium? https://forum.qt.io/topic/82992/chromium-update

? Offline

@TonyN Don't know. The bug report I saw was about IE. Maybe the "fix" checks for the user agent or something like that.

? Offline

~~Oh, one more thing: just tested your HTML page with QupZilla browser, which is built on QWebEngine. And your page works with that.~~ Version 2 of QupZilla uses QWebEngine. But I have an older version installed (1.8.9) which is based on Webkit.

TonyN

@Wieland I just downloaded QupZilla version 2.2, and it behaves exactly like QWebEngine! (not working...)

TonyN

Maybe this relates to this https://bugreports.qt.io/browse/QTBUG-43602