Konva demo dapp

[jagodarybacka]

What

Demo for test purposes of react-konva library.

Features covered

• full screen canvas, adjusting size on window resize
• adding images .jpg and .png to the canvas
• dragging whole stage with mouse drag and drop, all objects on the stage are staying in their positions relative to each other, adding boundaries to the drag and drop
• zooming in and out with boundaries
• adding .svg images as a paths objects, adding effects on hover and on click
• adding .gif animations

Pros of react-konva

• library is actively maintained and seems to be a popular choice for 2D canvas use cases
• very good documentation with a lot of examples covering most of the things we would like to implement
• no major hacks were needed to implement any of the features for this demo - followed what they suggest in the docs
• works well with React ecosystem
• we can probably opt for a smaller bundle of that library - depends on which components we will use

Cons of react-konva

• we need to update to a higher React version (not claiming it is bad, seems like everything is working fine)
• gif support is a little bit tricky, needs another lib to serialize gif to canvas, used the one they suggested but not really liking it - no typescript support out of the box, we can maybe choose a different one
• for loading images I used use-image package as they suggested in the docs but we can write our own hook for that
• gatsby is not a fan of canvas - some hacks were needed to make it go through the building with SSR turned on

About demo

I just implemented basics of each functionality, we can spend more time polishing it if needed but I can already tell if something will be possible and how much effort is needed so all questions are welcomed 😉

Also - background is super large file and on the demo it is loading for 30-60s 😞 We will need to break it down to smaller images.

https://github.com/tahowallet/taho.xyz/assets/20949277/103f4930-d577-478d-8b41-74f2056085dc

[VladUXUI]

Looking good! I have a couple of questions, but will leave those for after the build :D

[rjamalijam]

👏