richrobber2 / canvas-zoom Goto Github PK

because my webui bugged i just rebooted my webui with auto updating extensions on and it updated canvas zoom, before zoom worked fine and after it doesnt zoom again. right mouseclick calls the menu but wheel shift zooming or strg brush size changing doesnt do anything. seems the update just broke it for me. guess this time the mistake not on my side. am in the middle of something, how would i downgrade to the previous version till you fixed it?

• Shift + Left or Right click to pan : generates a brush stroke. Can be deleted thanks to the very useful Ctrl+Z, and avoided if one has some empty spots around the image to click on before panning.
• Zooming in doesn't bring the image to full foreground. So it stays behind a lot of the User Interface elements. Especially the generated image on the right.
  
• Ctrl+Wheel : constantly resets the brush to the center of the image, no matter where was the mouse's cursor.

Small things, quiet annoying. But all in all it's already great.

• No context menu or shortcut keys work.
• I have tried Edge, Chrome, Brave, and Vivaldi. I don't have add-ons installed in anything but Edge.
• I have tried deleting and reinstalling the extension.
• I have only installed it via the official list.

I also removed all extensions but this one, same issue:

I get tons of these errors in the console. Not sure what's causing them (not this extension), but maybe they have something to do with it not working:

I'm not sure what else to check.

not sure how to go about that just yet but just thought of it

I have already written in another issue, but I want to speak out again.
When we move canvas, we have to hit the left, right or middle mouse button with the shift key, which makes drawing, which is very often unnecessary. And a lot of people try to grab not the image, but the edge so they don't leave traces. This creates a big inconvenience.

I thought about it, but I don't fully understand how to do it right. I have suggestions:

1. move the canvas on a combination of keys or on one key, for example "g", as it is done in blender. That way you can avoid accidental traces, which will make using the extension more pleasant. It will also be possible to assign hottkeys so that the user can change the canvas movement as he sees fit.

Or somehow override the right and middle mouse button actions, so as not to leave traces. I tried it, but it didn't work.

I love the extension, but I'd like to use undo button on mouse button 4, atm I can't set it, I even tried to modify hotkeys file but it didn't work. Also full screen/reset would be nice if it could be on same button like "O - Overlap all elements and back".

As the title says, when switched into Dark Mode the text of the context menu becomes unreadable.

I first noticed this issue when using the Kitchen theme, but it persisted when disabling the them and changing between light and dark mode.

This can be alleviated by making a few changes to canvas-zoom.js and style.css requiring a separate set of style rules for dark mode.

In canvas-zoom.js line 354 change:

menu.className = "context-menu";

to

/* the light theme uses rgba while dark uses rgb, this is absolutely a hack */
menu.className = (getComputedStyle( document.querySelector("body") ).backgroundColor.includes('rgba')) ? "context-menu cm-light" : "context-menu cm-dark";

This will check the body class for the light or dark class and set the appropriate class style for our mode.

Then in style.class change the following:

.context-menu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 8px;
  z-index: 1000;
  font-size: 14px;
}

.context-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.context-menu li {
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
}

.context-menu h3 {
  font-size: 14px;
  margin: 0;
  padding: 4px 8px;
}

.context-menu li:hover {
  background-color: #f1f1f1;
}

change to:

/* Context Menu */
.context-menu {
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  padding: 8px;
  z-index: 1000;
  font-size: 14px;
}

.context-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.context-menu li {
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
}

.context-menu h3 {
  font-size: 14px;
  margin: 0;
  padding: 4px 8px;
}

/* Light Theme Options */
.cm-light {
  background-color: #fff;
  color: #000;
}

.cm-light li:hover {
  background-color: #f1f1f1;
  color: #000;
}

/* dark theme options */
.cm-dark {
  background-color: #000;
  color: #fff;
}

.cm-dark li:hover {
  background-color: #fff;
  color: #000;
}

This will allow canvas-zoom's context menu to respect the theme and maintain visibility.

With the changes you'll see it act more like

Hello!
I get an error AssertionError: extension access disabled because of command line flags when I'm trying to install this extension. I guess it's because of AMD video card but have to try luck anyways.
So because of AMD card I use lshqqytiger's fork to run SD. Commands line flags are:

set COMMANDLINE_ARGS=--listen --medvram --precision full --opt-split-attention-v1 --no-half --no-half-vae --opt-sub-quad-attention --disable-nan-check --use-cpu interrogate gfpgan bsrgan esrgan scunet codeformer

End of log:

Error completing request
Arguments: ('https://github.com/richrobber2/canvas-zoom.git', ['ads', 'localization', 'installed'], 0, 'canvas') {}
Traceback (most recent call last):
  File "D:\stable-diffusion-webui-directml\modules\call_queue.py", line 56, in f
    res = list(func(*args, **kwargs))
  File "D:\stable-diffusion-webui-directml\modules\ui_extensions.py", line 178, in install_extension_from_index
    ext_table, message = install_extension_from_url(None, url)
  File "D:\stable-diffusion-webui-directml\modules\ui_extensions.py", line 133, in install_extension_from_url
    check_access()
  File "D:\stable-diffusion-webui-directml\modules\ui_extensions.py", line 21, in check_access
    assert not shared.cmd_opts.disable_extension_access, "extension access disabled because of command line flags"
AssertionError: extension access disabled because of command line flags

Maybe you have some thoughts how it can be fixed?

Every time I right click and select change hotkeys from the menu nothing happens. When I try any of the hotkeys they don't do anything either.

I have the latest WebUI installation so I don't know what I'm doing wrong tbh. I thought that if I'd messed something up right clicking wouldn't bring up the context menu but it does. It's just that nothing else seems to work.

when clicking between 2 points make a strait line between the 2 points when holding shift

T = Tranparent (now it C)
ctrl/shift + T (now it V)
Q = Quick color
С = Color

Hotkeys A and T don't work on Mac (I've tried multiple browsers). Sometime T does work, but "A" - never. Checked on Safari, Chrome, Firefox, Opera

Updated the extension and it reset the default brush color, but when I wanted to change it back I noticed right clicking on the canvas doesn't open the extension menu

The canvas-zoom extention causes an error in the browser console. And most importantly: blocks the right mouse click on the entire web interface!

1: Trojan:Win32/Phonzy.B!ml > index-4ad95a66.js
2: Trojan:Script/Wacatac.B!ml > dockerfile-d67bbd50.js

I downloaded Canvas zoom through the extentions in SD AUTOMATIC1111. I have the latest version and my gradio is allright. But it still doesn't work. Maybe I have to turn something on in settings? I use Google chrome and when I right click on image in inpaint it just gives out usuall menu. Also none of hotkeys work. I' ve read through the https://github.com/richrobber2/canvas-zoom/wiki/Troubleshooting and it seems like I have different issue. Maybe you can help me? or direct me to a guide that may help me to solve my problem?
Я если что русский тоже знаю, так что мне можно и на русском объяснить, буду очень благодарен!

the extension is breaking the undo function (ctrl+z) in all text areas

if it can be made using JavaScript i can make it

edit: if i have the time that is

im not really active here anymore it kinda got taken over lol you can still request and maybe i will work on it, other than that its up to the current maintainer now
daswer123

Hey 🖐
First of all ➜ Thank you for great solution!

The problem:

As for now it works in Inpaint and Inpaint sketch, but does not in ControlNet canvas.

I can't seem to use the tool after the most recent update in June 2023. I can still choose the inpainting color palette and adjust the brush size with scrolling but I can't zoom in or scroll in to zoom. Shortcut keys are not working and when you right click on the image it doesn't show you the options anymore.

I was previously able to copy paste from photoshop, chrome, etc. The new canvas seems to not like Copy/Paste in Windows 11/ Chrome at least.

Hi, you're setting .tooltip to be hidden in style.css but that element seems to never be used in your code.

.tooltip{
  display: none;
}

However, it interferes with tooltip in Vlad's Automatic UI.

Could you please remove the CSS code, if .tooltip is in fact never used as far as I can tell? Thank you (I can also create a PR if you want)

Context menu works in Incognito mode, on Vivaldi, and other clean browsers. But won't work on browsers with extensions (which most of us use), like Chrome, and Opera. I've tried disabling many extensions, but it still won't pop up.

Usually i inpaint something in iterative steps by send the inpaint output back and generating again. The mask usually stays by default (you can paint once, then press back to actually view it).

However with the extension enabled, this is not possible anymore, the mask needs to be completely painted again or i get an error message (something about "left" to "right").

Maybe there is a trick with this extension? But i could not find a setting.

version: v1.3.1

I cant get the dropper tool to work for some reasons. I have an updated webui but my color selector looks different too. I get an error saying I need to select a valid hotkey whenever I try to use it from right click menu.

Zooming Out seems to relocate the canvas. I'm not sure how to put it back where it belongs.

Hi, thanks.
Zoom out don't work, test on safari and chrome.
A open the dropper next to the icon, but after pressing T, A act like T
Ctr-Z or ALT-Z or OPTION-Z = nothing

Since the latest update, when I press F to Drag the image in Inpaint, the image keeps paning around even after I released "F".
Only way to get rid of that is to close the Tab and open a new one. I tried to Ctrl+F5 refresh the page, but the F was still stuck and the image was still moving...

im working on a better version of the hotkey manager

Hi, In Mac OS (M1) mouse wheel up or wheel down = zoom + / can't zoom -

Shift + "+" or Shift + "-" : OK

A or T : opens color panel

Q : leaves the round color at its place and I can mouse the cursor (cross) / Q another time make the round color move again over the image.

O : nothing

Ctr-Z or ALT-Z or OPTION-Z = nothing

Other Keys are ok.
Thanks for your work !

Every time my ass burns with the fact that when you press enter, everything is erased, and also that when you press the eraser, absolutely the entire mask is erased, every time I think that when I press the eraser, I can erase the mask in the right places, but all my fucking mask wears off and I sink into an endless depression. In fact, I have not even figured out if the eraser button is the functionality of your extension, but if you can change it, THEN PLEASE DO IT

what do you think about adding a toast message to the code? i think we could make some use for one

а можно добавить в контекстное меню функцию - сгенерировать чистый канвас?

i stumbled upon a situation where youre zoom feature and stuff would help too so, can you make your features work on other extensions canvas or maybe every canvas in general too? in my case its the regional prompter extensions "draw a mask region" canvas thats pretty small, and even tho it has already been adressed and will becoming a bit bigger in i guess the next update its still limited by the web ui extensions row which is the same problem for all extensions canvas, like controlnet for example which also has a too smal canvas to properly draw on if needed now. so would it be possible to make your zoom and hotkey stuff work on such canvas too, maybe by making it work on every canvas in general? i have no idea about the code so im just asking if it would work that way around.

While writing a prompt, the keyboard shortcuts are getting triggered as I type, and the canvas scales and unscales all over the place.

with some recent update inpainting broke when this extension is enabled, was away for some days and before the extension worked fine but when i came back and updated everything (except for torch 2) it didnt work anymore.

when i upload or drag and drop a picture to the inpainting canvas the whole canvas disappears, same on sketch and inpaint sketch (not on inpaint upload tho). after fiddeling around forever i got it to show the canvas once and when it did the zoom didnt work (neither key nor wheel) but the rightclick menu worked fine, couldnt reproduce it tho since i couldnt get the inpainting canvas to stay after pic upload. as soon as i disable this extension everything works again.

so since i would expect everybody to use this extension and i see no issue reports here, is it only me and some conflict or something missing or did some update break this extension? either way i need a fix or workaround asap since this extension became essential to me, so can somebody confirm or tell me its me and possibly come up with an idea whats wrong?

As for now canvas-zoom is only for the img2img
Sketch, Inpaint, Inpaint sketch tabs,
any support for ControlNet Single Image tab?

Can a similar extension be developed to transform the window in which generation occurs into a floating window that can be moved to a second monitor?

можно ли сделать подобный extension который бы превращал окно в котором происходит генерация, в плавающее окно, которое можно перенести на второй монитор?

I thought the extension was quite finished, and I think it's worthy of being on the official extension list.

@richrobber2 do you think it's worth doing?

From what I can tell, the pipette / eyedropper color grabbing feature does not grab the color exactly where the crosshair is on top of. Instead, it grabs color from the right(?) of the crosshair somewhere. I have not provided an example of reproducing this, because it seems simple to reproduce. If you cannot see the issue I am talking about, I am happy to provide an example.

Installed, extension in list but no any changes.

Error running install.py for extension E:\novelai-webui-aki-v3\extensions\canvas-zoom.
Command: "E:\novelai-webui-aki-v3\py310\python.exe" "E:\novelai-webui-aki-v3\extensions\canvas-zoom\install.py"
Error code: 1
stdout:
stderr:

install.py 4

import gradio

init.py 3

import gradio.components as components

components.py 22

import matplotlib.figure

figure.py 43

from matplotlib import _blocking_input, backend_bases, _docstring, projections

init.py 58

from mpl_toolkits.mplot3d import Axes3D

init.py 1

from .axes3d import Axes3D

axes3d.py 45

class Axes3D(Axes):

axes3d.py 718 Axes3D

set_zticklabels = _axis_method_wrapper(

_base.py 57 init

doc = inspect.getdoc(getattr(maxis.Axis, method_name))

AttributeError:
提示：Python 运行时抛出了一个异常。请检查疑难解答页面。

type object 'Axis' has no attribute '_set_ticklabels'

This might just be a me being dumb, but after the last update which changed zoom to Alt+scroll from Shift+scroll, I went to settings to see if I could change back that hotkey but Canvas Zoom is no where to be seen in my settings list. It is definitely still working and installed though since it still works in Inpainting its just the setting tab for this extension appears to be missing? Just me or actual bug?

I previously submitted a pull request that addressed the issue of failure to launch in my environment:
【There are two issues on my computer that caused the failure to launch. #35】
In the latest version, line 37 is missing "dist", which is causing it to fail to launch again.

Please fix it in a timely manner. Thank you!

When you are on img2img or inpaint or any UI that uses Upload image and can use a brush even on ctrlnet, it's always dragging the window of the UI where the image is attached, the image window is stuck to your mouse pointer and you can't do shit about it unless release it with shortcut key "F".

This behavior occurs when you press "Ctrl+F" for search something on any tab inside WebUi then and after that, the image window will start to attach to the mouse pointer so to release it need to press the "Esc" key to go out of the Search box windows and then press "F" key again. can you fix this in the future exclude "Ctrl+F"?

My windows defender got a "Severe" hit on a js file for canvas zoom:

I do some dual wallpaper generations lately and mostly, I don't need to edit them afterwards. But now I have a few where I'd like to inpaint some elements and noticed, that the image, when drag and dropped into the placeholder, is not fully displayed in the inpainting tab unlike in the img2img tab. It looks like, the element containing the image (id="img2masing") has a overflow: hidden applied. By removing this, the image becomes visible. maybe this switch could be combined with the moving (F key) and reset when resetting.

Win10, FF106