Can I migrate from react-konva to react-pixi-fiber?

[Siva-at-OFS]

Hi, I recently upgraded the react version to 17.0.0 in the application. Previous developers used 'react-konva' but it no longer works with react 17 (even with latest konva and react-konva-rc.1 version suggested in react-konva discussions).

Coding in JS style in react solved part of the problem but created issues on mobile part of our application.

The requirement is simple.

Need to dynamically create a rectangle (as shown in the above picture with text on mouse click.

The issue is we are importing the APIs like Stage, Layer, Group, Rect, Text from react-konva.

Though I can adjust Stage with different props in react-pixi-fiber, I'm not sure about the replacement for the "Layer" api of react-konva.

Any doubts/suggestions are welcome.

[michalochman]

Hi @Siva-at-OFS, in PixiJS you can use layers by installing additional package.

There's an example for react-pixi-fiber here: https://github.com/michalochman/react-pixi-fiber/blob/master/examples/src/LayersExample/index.js

Note that it uses older version, but you should be able to upgrade with ease.

[Siva-at-OFS]

Hi @michalochman , Thanks for your support.

I made a rough model of what we're implementing in react using Javascript here: https://github.com/Siva-at-OFS/PIXI-in-JS

Please have a look at the rough model in javascript.

Any advice how to achieve similar behavior with react-pixi?

Synthetic events like the ones below are not working. Any advice or need clarification?
<Stage options={{width, height}}>
{_renderFieldTypes(fields, scale)}

[michalochman]

@Siva-at-OFS there is a template provided on codesandbox that you can use as a starting point:

https://codesandbox.io/s/react-pixi-fiber-template-ohk6z

[Siva-at-OFS]

@michalochman , that is really helpful. Thanks a LOT. It helped me solve some blockers and able to detect clicks in my application.

Here's the sandbox with minor modifications: https://codesandbox.io/s/react-pixi-addfieldonclick-gt23j.

Need to implement 2 features to the codesandbox :

1. Display a Rectangle in a layer below the text. (similar to the image I attached in my first description of the issue)
2. Add styles to the text (the style attribute in the codesandbox doesn't seem to have an impact)

Is that possible?

[michalochman]

Hi @Siva-at-OFS,

1. You can implement rectangle using Graphics, see https://pixijs.download/dev/docs/PIXI.Graphics.html. You will most likely want to implement it as a custom component, though. There is a simple example for implementing Rectangle in README.
2. For text styles please refer to PixiJS documentation: https://pixijs.download/dev/docs/PIXI.TextStyle.html. Also there is an editor available: https://pixijs.io/pixi-text-style/

[Siva-at-OFS]

Hi @michalochman ,

Thanks for your quick response.

Regarding Rectangle, you are right.

I need a custom component.

So in the codeSandBox I shared, I used CustomPixiComponent from your library.

But its not displayed at all. You can have a quick look at the codeSandbox (App.js). I believe I missed adding a "Layer" or something essential.

Didn't face this issue when I implemented using PIXI.Graphics() in Javascript version.

Correct me if I'm wrong.

Regarding the text styling, let me clarify...

I implemented Text styling in the JS file without any issues.

But in the above comment I was referring to the Text I imported from 'react-pixi-fiber'.

You can find it in the "TextComponent.js" in the codeSandBox I shared above.

[michalochman]

Hi @Siva-at-OFS, sorry for long delay.

Regarding the rectangle, in line 60 of App.js file you have {...RectProps} but RectProps is not exported from constants, rectProps is. Once you fix it, the rectangle will show.

Regarding Text styles, there is no backgroundColor property, have a look at all properties described here: https://pixijs.download/release/docs/PIXI.TextStyle.html.