Handle Events

Svelte NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a LineEdit or even something like window being hidden and shown.

In order to do this we need to attach an event listener to the respective widget.

Technically, the event listener is a NodeJs EventEmitter instance that listens to events from the underlying Qt widget. The native Qt widget would send all the events to the event emitter in Svelte NodeGui world and the user can essentially subscribe to it.

Lets see an example to see how this looks in practice.

Event handling

The following example demonstrates how to add a clicked event listener to a button widget.

event example
<script lang="ts">
import { onMount } from "svelte";
let win;
function onClicked(checked){
console.log("the button was clicked", checked);
}
onMount(() => {
(window as any).win = win; // Prevent garbage collection.
win.nativeView.show();
return () => {
delete (window as any).win;
};
});
</script>
<window bind:this={win}>
<button on:clicked={onClicked} text="Click me"/>
</window>

The on: directive accepts an event name (e.g. "clicked") and a corresponding event handler function.

Internally, Qt widgets in nodegui has two types of events:

  • Signals: In short these are basically different for different widgets. So a button may have clicked and pressed signals, while a LineEdit may have, say, the textChanged signal.
  • QEvents: These are common set of events for all the widgets/qobjects in NodeGui world. These are also helpful at times but typically you would end up using signals more than these common events.

In Svelte NodeGui you can listen to both Signals and QEvents using the same on: directive.

How do I know which events are supported ?

In order to find all the supported events for a widget you can take a look at

All Signals for the widgets:

All common QEvents for the widgets

In nodegui all these common QEvents are represented under an enum type: WidgetEventTypes

You can subscribe to a QEvent like so:

<script lang="ts">
import { onMount } from "svelte";
import { QLabelSignals, QMouseEvent, WidgetEventTypes } from "@nodegui/nodegui";
let win;
function onMouseMove(checked){
const mouseEvt = new QMouseEvent(nativeEvt);
console.log("mouseMoved at: ", { x: mouseEvt.x(), y: mouseEvt.y() });
}
function onMouseButtonPress(checked){
console.log("mouse button was pressed");
}
onMount(() => {
(window as any).win = win; // Prevent garbage collection.
win.nativeView.show();
return () => {
delete (window as any).win;
};
});
</script>
<window bind:this={win}>
<!-- See the WidgetEventTypes interface for the names of all supported events. -->
<text
mouseTracking={true}
on:MouseMove={onMouseMove}
on:MouseButtonPress={onMouseButtonPress}
>
Move your mouse here
</text>
</window>
qevent example

Note here that every QEvent handler gives a reference to native QEvent in the handler callback. Not all native QEvent wrappers are implemented yet and we might need your help regarding those. Feel free to jump in and contribute to the nodegui core.

Also you can specify the QEvent type as a regular MouseMove string or use it directly from the enum WidgetEventTypes.MouseMove. They both achieve same things.