Unsolved QWebEngine and leaflet
-
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 © <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>
-
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.
-
@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 -
@TonyN Don't know. The bug report I saw was about IE. Maybe the "fix" checks for the user agent or something like that.
-
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. -
@Wieland I just downloaded QupZilla version 2.2, and it behaves exactly like QWebEngine! (not working...)
-
Maybe this relates to this https://bugreports.qt.io/browse/QTBUG-43602