richrobber2 / canvas-zoom

zoom and pan functionality
350 stars 23 forks source link

Pen pressure support & mobile zoom and pan #105

Open richrobber2 opened 6 months ago

richrobber2 commented 6 months ago

added pen pressure support for pressure based devices.

Current state of pressure support:


added touch support for mobile devices.

Mobile touch usage:


i also left some TODO messages for the future

daswer123 commented 6 months ago

Hi, sorry I didn't reply earlier, I'm working and will be free by the end of the week.

richrobber2 commented 6 months ago

thank you. just leaving merging to you its okay. finish whatever you need. its not all that important just new features but still want you to look at it since i dont know everything you are working on with the actual repos (the main ones)

also might be misunderstanding things in the code base and could potentially have used other functions (you can see in the new function i added that it looks like there is a function i could have modified to work with it seamlessly but i just made a new function to handle it, in turn i might be missing something)

thanks again

daswer123 commented 6 months ago

I took the time to test everything. Overall, the idea is a good one, and I too tried earlier to make using the extension more phone-friendly. I remembered why I postponed this issue until a better version of gradio.

Unfortunately, to test all this properly you need at least a tablet, which I don't have, just a regular phone. It's difficult to use SD on a normal phone, and even more difficult with the img2img feature.

In the extension settings there is an option "Add a button to switch to full screen mode. May be useful for devices without keyboard" which adds a button for full screen mode.

On the changes themselves, everything works, but the SD-forge still fires the push event despite stopPropagation. I assume this can be fixed by modifying the gradio sources.

The function for changing the brush size depending on the pressure force should be adjusted at the moment of creating the canvas and the function for processing the pressure, which is implemented in the gradio. Accordingly, in order to do such a thing you need to modify the gradio sources.

Also with the move function there is a problem: on my phone on 3 fingers triggers a screenshot, this can be a definite problem as it is called from under the phone system and there is no way to fix it via js.