Support for svg in React code.

[ColeTownsend]

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

import React from 'react';
import { letterFrequency } from '@vx/mock-data';
import { Group } from '@vx/group';
import { Bar } from '@vx/shape';
import { scaleLinear, scaleBand } from '@vx/scale';

const data = letterFrequency;

const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

const x = (d: any) => d.letter;
const y = (d: any) => +d.frequency * 100;

const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  rangeRound: [yMax, 0],
  domain: [0, Math.max(...data.map(y))],
});

const compose = (scale: any, accessor: any) => (data: any) => scale(accessor(data));
const xPoint = compose(
  xScale,
  x,
);
const yPoint = compose(
  yScale,
  y,
);

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>
  );
}
export default BarGraph;
``


<!-- Issuehunt content -->

---

<details>
<summary>
<b>IssueHunt Summary</b>
</summary>


### Backers (Total: $20.00)

- $20.00 have been anonymously funded.

#### [Become a backer now!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
#### [Or submit a pull request to get the deposits!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
### Tips

- Checkout the [Issuehunt explorer](https://issuehunt.io/r/nodegui/react-nodegui/) to discover more funded issues.
- Need some help from other developers? [Add your repositories](https://issuehunt.io/r/new) on IssueHunt to raise funds.
---
IssueHunt has been backed by the following sponsors. [Become a sponsor](https://issuehunt.io/membership/members)
</details>
<!-- /Issuehunt content-->

[issuehunt-oss[bot]]

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.

[danedavid]

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.

[a7ul]

Hi @danedavid To help you out a bit. Qt doesnt have separate native code for building svg. So few ways to do this:

1. Use the QPainter (already available in Nodegui) and create a react api using that.
2. 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.

[danedavid]

@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?

[a7ul]

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.

[danedavid]

@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?

[Ty3uK]

@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).

[danedavid]

@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!

[Ty3uK]

@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 :)

[danedavid]

@master-atul Some questions and thoughts on API design:

1. 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.
2. All components except SVG are valid only as children of SVG.
3. The 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.
4. Each child component will use the instances received via context to draw its own part.

[a7ul]

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.

[a7ul]

Let me know if you face any issue regarding QPainter or wrapping any component in React. I can help out!

[jswhisperer]

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