User should be able to position image by dragging and pinching

[haffi96]

https://developers.printify.com/#image-positioning

I guess we need an edit mode, which allows users to drag and drop.

We'd have to then keep track of the position based on the x - y axis which printify is able to print with

[Bilalm354]

Yep the way I imagine it is

• [ ] An overlay appears over the product with a box for the printable area
  • [ ] I believe this is accessible on the printing product called print areas or something. It will be different for front and back.
• [ ] The user can drag and drop and pinch the image to resize, position and rotate
• [ ] this is al done on the client and when finished this is then passed through search params and rerouted to the same page which then produces a printify product looking how they positioned things.

This could be done by creating our own functionality of all of this or reusing an image editor we can find online. We could also add text etc via the image editor.

We could use something like these for resizing

• https://pixijs.com/8.x/examples/events/dragging
• https://konvajs.org/docs/drag_and_drop/Drag_Events.html

[haffi96]

so in the edit mode

we need an empty variant with an overlay image which can be dragged? cause atm the its all one image right?

[haffi96]

also theres

framer motion and dnd-kit that do drag and drop stuff. Can use any

https://www.framer.com/motion/examples/#drag https://codesandbox.io/s/dndkit-sortable-image-grid-tjy09b?file=/src/App.jsx