richrobber2 / canvas-zoom

zoom and pan functionality
351 stars 23 forks source link

i wanna help with the extension again #91

Closed richrobber2 closed 1 year ago

richrobber2 commented 1 year ago

is there anything that you are working on or are thinking of adding?

i see its moving to a new gradio thing, do you know where i can look at the new implementation? @daswer123

daswer123 commented 1 year ago

Hi, while I'm working and don't have time to do new things.

From the latest I added the ability to control the transparency level in the new webui 1.6 ( dev )

https://github.com/richrobber2/canvas-zoom/assets/22278673/f0f2ac6b-b726-41a7-91c1-99d65b5da6a9

https://github.com/richrobber2/canvas-zoom/commit/439c414c6cb50dcc0cda07b2279b6a81f26ae058 https://github.com/richrobber2/canvas-zoom/commit/439c414c6cb50dcc0cda07b2279b6a81f26ae058#diff-50bfa501dbd9d2abb86b2c15902b26872a40be796fb97906094f711d96fc0b3f

And so of the possible improvements, there was a request to be able to adjust the size of lines with a graphics tablet, I do not know how to do it yet.

richrobber2 commented 1 year ago

i have no way to test so im just gonna leave it here but i think this should be a way to implement it

// Adjust the brush size based on deltaY or pressure sensitivity
function adjustBrushSize(
  elemId,
  deltaY = null,
  pressure = null,
  withoutValue = false,
  percentage = 5
) {
  const input =
    gradioApp().querySelector(
      `${elemId} input[aria-label='Brush radius']`
    ) ||
    gradioApp().querySelector(`${elemId} button[aria-label="Use brush"]`);

  if (input) {
    input.click();
    if (!withoutValue) {
      const maxValue = parseFloat(input.getAttribute("max")) || 100;
      let changeAmount = 0;

      // If pressure is provided, adjust the changeAmount accordingly
      if (pressure !== null) {
        changeAmount = maxValue * pressure;  // We assume pressure is between 0 and 1
      } else if (deltaY !== null) {
        changeAmount = maxValue * (percentage / 100);
        changeAmount = deltaY > 0 ? -changeAmount : changeAmount;
      }

      const newValue = parseFloat(input.value) + changeAmount;
      input.value = Math.min(Math.max(newValue, 0), maxValue);
      input.dispatchEvent(new Event("change"));
    }
  }
}
targetElement.addEventListener('pointerdown', (event) => {
  if (event.pointerType !== 'pen') return; // Only respond to pen (tablet) input

  // Whenever the pen is used, adjust the brush size with the pressure value
  adjustBrushSize(elemId, null, event.pressure);
});

targetElement.addEventListener('pointermove', (event) => {
  if (event.pointerType !== 'pen') return; 

  adjustBrushSize(elemId, null, event.pressure);
});
richrobber2 commented 1 year ago

also what are you using to format your code since mine is different its causing me to have the whole file get formatted

daswer123 commented 1 year ago

Looked at it now, there is another idea to implement, might be interested.

Automatically switch to model -inpaint when switching to img2img tab and back.

About format, default settings, just a little more characters in 1 line, recently reinstalled VSCode the settings for prettier ones were not saved

richrobber2 commented 1 year ago

i use the default vscode formatter not sure why its different

richrobber2 commented 1 year ago

wow after that i became super busy lol

daswer123 commented 1 year ago

To be honest, I'm also very busy lately, I can't find time to make improvements. :)

richrobber2 commented 1 year ago

since you seem to have added a better way to install gradio changes i think we could make actual changes to the gradio, or does that still seem like a bad idea to you?

@daswer123

edit: also do you use discord?

daswer123 commented 1 year ago

Generally, the idea of changing gradio is quite complicated, but it offers a lot of advantages, since you have to carry over small changes with each change and still take into account the changes made by gradio.

We are lucky that AUTO1111 is also cautious about gradio changes and doesn't update it often.

Yes I have daswer123 , but I don't use it much )