Open ColeTownsend opened 4 years ago
An anonymous user has funded $20.00 to this issue.
I reckon this should first be added as a class in nodegui
, right?
I'd like to work on this, if nobody is already working on it.
Hi @danedavid To help you out a bit. Qt doesnt have separate native code for building svg. So few ways to do this:
So most probably you would only need to add missing methods in QPainter in Nodegui.
If you have more ideas feel free to discuss them.
@master-atul Thank you for your quick reply!
I was checking Qt docs yesterday ( first ever time ), and saw the QSvgWidget
class which can load an SVG in serialized XML format as a QByteArray and can render the SVG. So at first look I was under the impression that was the way to go. Or am I completely off the tracks here?
Hello @danedavid First of all Christmasintae ashamshakal 😄.
As per the issue, we need Svg react components which we can use like this:
function BarGraph() {
return (
<svg width={width} height={height}>
{data.map((d: any, i: any) => {
const barHeight = yMax - yPoint(d);
return (
<Group key={`bar-${i}`}>
<Bar x={xPoint(d)} y={yMax - barHeight} height={barHeight} width={xScale.bandwidth()} fill="#fc2e1c" />
</Group>
);
})}
</svg>
);
}
So if you see here we would need Group, Bar, SVG components. But, SVGWidget as you said takes a svg string (serialized xml).
So what we can do is : when a user writes:
<svg width={width} height={height}>
{data.map((d: any, i: any) => {
const barHeight = yMax - yPoint(d);
return (
<Group key={`bar-${i}`}>
<Bar x={xPoint(d)} y={yMax - barHeight} height={barHeight} width={xScale.bandwidth()} fill="#fc2e1c" />
</Group>
);
})}
</svg>
we can generate an xml string and then finally pass it to QSvgWidget.
But the caveat is that any change in a prop we would need to regenerate entire svg string and pass it to SvgWidget which kindof defeats the purpose of React but is okay for initial mvp i think.
The preferred way would be to create Svg, Group, Bar ,etc components that are based of QPainter (which is Qt's 2d drawing API). so when a user creates a tree of react components based on Svg, Group and Bar, etc we would actually draw it usnig QPainter. so any change in any of the prop react will just edit only that part.
This is trickier but I can help you out all the way.
PS: QSvgWidget class has been exported already via https://github.com/Ty3uK/nodegui-plugin-svg by @Ty3uK. It has both react and nodegui versions.
@master-atul, Merry Christmas to you too! 😁
So basically, we're not going to support inline SVG in react code, but we're going to provide SVG-like components that'll allow the user to draw.
Are we going to start by porting basic elements like <path>
, <circle>
, <rect>
? Or should it be a different API?
@danedavid yep, you're right. In my plugin I want to implement those elements in next step :)
Also i've tried to use react-dom/server
package to simply render components to string, but this approach not worked (crashes inside qode
environment).
@Ty3uK Thanks for the input! And great work on the plugin! For someone to right away inject SVG into node-gui
environment, your plugin is the way to go!
@danedavid thank you :) At this moment, plugin is only MVP, but I want to develop it further. If you want to contribute - you're welcome, let's do this together :)
@master-atul Some questions and thoughts on API design:
<SVG/>, <Rect/>, <Circle/>, <Ellipse>, <Line/>, <Polygon/>
, along with their basic attributes.SVG
are valid only as children of SVG
.SVG
will initialize an instance of QWidget
( or is there any other, more appropriate, canvas-like element in Qt? ). It will initialize a QPainter instance. Both instances will be passed down to all its children via context.Yep, This seems like a good solution. Using Context on Svg component would ensure that Rect, Circle Ellipse and Line can only exist inside it.
Let me know if you face any issue regarding QPainter or wrapping any component in React. I can help out!
that fork doesn't seem to work anymore... :( Error: Cannot find module 'got'
I just want a circle in my application, and css border-radius: 50% doesnt seem to work either
Supporting inline SVG
React by default can support inline svg code. Because NodeGUI does not render to a browser window though, we can't use that.
Possible Solutions One solution might be to bridge QTSvg albeit I am not savvy enough to do this.
Sample code that triggered error