Comments (13)
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.
from react-nodegui.
Hi @danedavid
To help you out a bit. Qt doesnt have separate native code for building svg.
So few ways to do this:
- Use the QPainter (already available in Nodegui) and create a react api using that.
- Create a react api to generate svg string which would then be rendered as an svg image.
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.
from react-nodegui.
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.
from react-nodegui.
@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).
from react-nodegui.
Let me know if you face any issue regarding QPainter or wrapping any component in React. I can help out!
from react-nodegui.
An anonymous user has funded $20.00 to this issue.
- Submit pull request via IssueHunt to receive this reward.
- Want to contribute? Chip in to this issue via IssueHunt.
- Checkout the IssueHunt Issue Explorer to see more funded issues.
- Need help from developers? Add your repository on IssueHunt to raise funds.
from react-nodegui.
@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?
from react-nodegui.
@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?
from react-nodegui.
@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!
from react-nodegui.
@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 :)
from react-nodegui.
@master-atul
Some questions and thoughts on API design:
- What SVG components are we going to support? At least for the first cut, I was planning to include
<SVG/>, <Rect/>, <Circle/>, <Ellipse>, <Line/>, <Polygon/>
, along with their basic attributes. - All components except
SVG
are valid only as children ofSVG
. - The
SVG
will initialize an instance ofQWidget
( 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. - Each child component will use the instances received via context to draw its own part.
from react-nodegui.
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.
from react-nodegui.
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
from react-nodegui.
Related Issues (20)
- Bad URL Protocol C: when running on Windows.
- react nodegui call stack exceeded error when using GridView/ BoxView components HOT 5
- What should I use to manipulate audio in react nodegui? HOT 1
- Running for the second time no Macbook M1 HOT 3
- [Question] How do I use an SVG as an app background?
- It seems that react third-party component libraries are not supported HOT 1
- RNList and FlexLayout
- process dlopen: Cannot find symbol in flat namespace
- Can I create Intel windows binary on Apple Arm M1 machine ?
- libQt5Core.so.5: version `Qt_5.15' not found
- Cannot receive close event of FileDialog HOT 2
- Can I create submenus for System Tray Menu Actions?
- Is List component same as FlatList (efficient renderer)?
- Frameless window
- qmenubar.setCornerWidget
- Getting selected text in PlainTextEdit
- QTableWidget support
- This project is unmaintained
- Add windowGeometryChanged to QMainWindowSignals to track window changes. HOT 1
- was this project die?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-nodegui.