How do I render a QSvgWidget?

[LukeyBeachBoy]

Hi, I am new to nodegui and am trying to render an svg with the end goal being that I can add mouse event handlers for specific paths. I want to be able to change the colour of certain parts of the svg on mouseover and get the id of the target on click.

In the browser I know how to achieve this but I'm struggling to figure it out in nodegui, although I have been looking into the QSvgWidget.

Is this possible? Is it possible to access the Svg paths and apply inline styling to them? Can this be done with an <image> tag?

Here is what I have at the moment. I see in devtools that my QSvgWidget correctly has the parentNode set as the window element, but nothing is rendered.

onMount(() => {
(window as any).win = win; // Prevent garbage collection, otherwise the window quickly disappears!
(win as NSVElement).nativeView.show();
svg = new QSvgWidget();
svg.load('assets/cat.svg');

(win as NSVElement<RNWindow>).appendChild(svg)

console.log(svg);

return () => {
  delete (window as any).win;
};

});

[shirakaba]

It looks like QSvgWidget is supported in NodeGUI, but not in React NodeGUI, meaning that nobody has made a DOM interface for it yet and therefore we don't support it via HTML syntax in Svelte NodeGUI.

How to use it via imperative APIs?

The imperative APIs are all documented here, as you'll probably have seen: https://docs.nodegui.org/docs/api/generated/classes/qsvgwidget/

Calling the NSVElement.prototype.appendChild() API will only work when appending another NSVElement, e.g. NSVElement<RNSvg> (which doesn't exist – see the next section on how to implement it).

To add an SVG to the window, you'd need to check how it normally appends children under-the-hood, which appears to be via setCentralWidget:

svelte-nodegui/src/dom/react-nodegui/src/components/Window/RNWindow.ts

Line 54 in 0079b06

this.setCentralWidget(child);

So to add it directly as the content of the window, I think you'd call:

svg = new QSvgWidget();
svg.load('assets/cat.svg');
(win as NSVElement<RNWindow>).nativeView.setCentralWidget(svg);

But you'd probably rather have a container view (<view>) as the permanent base element of the <window>, and instead just add your SVG into that. To do that, grab a ref to your RNView in the same way as you got a ref to the RNWindow, and append the child by doing the same steps that it does under-the-hood here:

svelte-nodegui/src/dom/react-nodegui/src/components/View/RNView.ts

Lines 256 to 265 in 0079b06

	if (!child) {
	return;
	}
	if (!this.layout) {
	const flexLayout = new FlexLayout();
	flexLayout.setFlexNode(this.getFlexNode());
	this.setLayout(flexLayout);
	this.layout = flexLayout;
	}
	this.layout.addWidget(child);

... But what would be even better (and more comfortable down-the-line) would be to add it as a HTML element to Svelte NodeGUI!

How to add support for QSvgElement as a HTML element to Svelte NodeGUI

For now, Svelte NodeGUI carries a copy of React NodeGUI's DOM implementation within its own source code (the reason we don't import from the @nodegui/react-nodegui package directly would mean having to install react-reconciler as well, which I'd rather keep out of people's Svelte NodeGUI projects).

For example, React NodeGUI's DOM interface for its main QWidget that supports flexbox layout can be found here in the Svelte NodeGUI repo, named RNView: https://github.com/nodegui/svelte-nodegui/blob/main/src/dom/react-nodegui/src/components/View/RNView.ts

To support QSvgWidget as a Svelte NodeGUI primitive element (e.g. <svg>), one would first have to create a DOM interface for it, in the same format that the React NodeGUI components have been written. We could merge it into this repo and ideally also React NodeGUI's repo.

Then it would need registering into the supported components, just as we do here to map <view> to RNView:

svelte-nodegui/src/dom/nativescript-vue-next/runtime/registry.ts

Lines 156 to 159 in 0079b06

	registerElement<RNView, ViewProps<any>>(
	'view',
	() => new RNView(),
	)

And finally it would need adding to Svelte NodeGUI's typings, as we do here:

svelte-nodegui/src/svelte-nodegui.ts

Lines 70 to 73 in 0079b06

	view: SvelteNodeGUIProps<
	import("./dom/react-nodegui/src").ViewProps<any>,
	import("./dom/react-nodegui/src").RNView
	>;

For reference, we recently received a PR that did all of these steps to implement <scrollArea>, apart from implementing the React NodeGUI interface (which was already implemented): https://github.com/nodegui/svelte-nodegui/pull/53/files

[LukeyBeachBoy]

Thanks for the detailed reply! I will certainly look into adding support for to Svelte NodeGui as I think it would be great to be able to use the html element syntax wherever possible.