whytofly
/
qt6-bb10
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wasm: move canvas configuration to Qt implementation 

The required canvas configuration is an implementation
detail; move it out of the .html file (which we expect
that users will replace), and into the QWasmScreen
constructor.

This also enables using a div element as the container
element (instead of a canvas), since Qt then can create
and configure the canvas during QWasmScreen construction.

Change-Id: Ia849517d00fa3e8ec307065a524c0c91296dd490
Reviewed-by: Lorn Potter <lorn.potter@gmail.com>
bb10
Morten Johan Sørvig 2021-11-29 09:26:50 +01:00
parent 97eeded5fc
commit 2ed3cc8e7a
3 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/plugins/platforms/wasm/qwasmscreen.cpp
View File

@ -57,6 +57,24 @@ QWasmScreen::QWasmScreen(const emscripten::val &canvas)
, m_compositor(new QWasmCompositor(this))
, m_eventTranslator(new QWasmEventTranslator())
{
// Configure canvas
emscripten::val style = m_canvas["style"];
style.set("border", std::string("0px none"));
style.set("background-color", std::string("white"));
// Set contenteditable so that the canvas gets clipboard events,
// then hide the resulting focus frame, and reset the cursor.
m_canvas.set("contentEditable", std::string("true"));
style.set("outline", std::string("0px solid transparent"));
style.set("caret-color", std::string("transparent"));
style.set("cursor", std::string("default"));
// Disable the default context menu; Qt applications typically
// provide custom right-click behavior.
m_onContextMenu = std::make_unique<qstdweb::EventCallback>(m_canvas, "contextmenu", [](emscripten::val event){
event.call<void>("preventDefault");
});
updateQScreenAndCanvasRenderSize();
m_canvas.call<void>("focus");
}

2
src/plugins/platforms/wasm/qwasmscreen.h
View File

@ -36,6 +36,7 @@
#include <QtCore/qscopedpointer.h>
#include <QtCore/qtextstream.h>
#include <QtCore/private/qstdweb_p.h>
#include <emscripten/val.h>
@ -93,6 +94,7 @@ private:
QImage::Format m_format = QImage::Format_RGB32;
QWasmCursor m_cursor;
static const char * m_canvasResizeObserverCallbackContextPropertyName;
std::unique_ptr<qstdweb::EventCallback> m_onContextMenu;
};
QT_END_NAMESPACE

10
src/plugins/platforms/wasm/wasm_shell.html
View File

@ -13,12 +13,8 @@
<style>
/* Make the html body cover the entire (visual) viewport with no scroll bars. */
html, body { padding: 0; margin: 0; overflow:hidden; height: 100vh }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas { border: 0px none; background-color: white; height:100%; width:100%; }
/* The contenteditable property is set to true for the canvas in order to support
clipboard events. Hide the resulting focus frame and set the cursor back to
the default cursor. */
canvas { outline: 0px solid transparent; caret-color: transparent; cursor:default }
/* Make the canvas cover the entire body */
canvas { height:100%; width:100%; }
</style>
</head>
<body onload="init()">
@ -30,7 +26,7 @@
<noscript>JavaScript is disabled. Please enable JavaScript to use this application.</noscript>
</center>
</figure>
<canvas id="qtcanvas" oncontextmenu="event.preventDefault()" contenteditable="true"></canvas>
<canvas id="qtcanvas"></canvas>
<script type='text/javascript'>
function init() {