As stated in the Title I'm trying to port legacy code of a webapp that mostly relies on fabricJS and canvas manipulation to ReactJS.
The way I intend to port it (after reading some blog posts on the topic) is by putting the old application in one big component and building new components for future features. I don't have weeks to do this refactoring and therefor decided on this process where I might take some downtime in the future to continue with the modularization of the legacy code into components.
The app does run now, but the fabric.js Canvas functionality is broken in weird ways without throwing any errors.
While debugging I noticed that the fabric.js mouseover-event targets do not work as intended anymore - when multiple fabric objects are rendered on top of each other on the canvas the "target" found in the mouseEvent object is always the one in the background. Before the transition fabric was able to discern between the background and the Shapes (Circles, Squares) rendered in front of it. A huge part of the functionality relies on being able to discern what fabric Object was clicked on.
My current understanding is (I might be wrong here) that these errors have to do with the fact that react and fabric both try to handle mouseEvents and somehow don't like working alongside each other.
The fix using redux I found here How can I use Fabric.js with React? is no option because the product owner does not want to add any further complexity.
Does anyone have a clue how one might get fabric and react to work with each other or has maybe even come across the same problem?
