richrobber2 / canvas-zoom Goto Github PK
View Code? Open in Web Editor NEWzoom and pan functionality
zoom and pan functionality
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.
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.
As for now canvas-zoom is only for the img2img
Sketch, Inpaint, Inpaint sketch tabs,
any support for ControlNet Single Image tab?
Installed, extension in list but no any changes.
T = Tranparent (now it C)
ctrl/shift + T (now it V)
Q = Quick color
С = Color
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?
when clicking between 2 points make a strait line between the 2 points when holding shift
а можно добавить в контекстное меню функцию - сгенерировать чистый канвас?
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 !
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.
As for now it works in Inpaint and Inpaint sketch, but does not in ControlNet canvas.
While writing a prompt, the keyboard shortcuts are getting triggered as I type, and the canvas scales and unscales all over the place.
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.
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.
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...
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:
Or somehow override the right and middle mouse button actions, so as not to leave traces. I tried it, but it didn't work.
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
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?
not sure how to go about that just yet but just thought of it
1: Trojan:Win32/Phonzy.B!ml > index-4ad95a66.js
2: Trojan:Script/Wacatac.B!ml > dockerfile-d67bbd50.js
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
Small things, quiet annoying. But all in all it's already great.
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 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?
Я если что русский тоже знаю, так что мне можно и на русском объяснить, буду очень благодарен!
Zooming Out seems to relocate the canvas. I'm not sure how to put it back where it belongs.
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?
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!
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
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?
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
the extension is breaking the undo function (ctrl+z) in all text areas
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
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)
im working on a better version of the hotkey manager
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.
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.
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".
what do you think about adding a toast message to the code? i think we could make some use for one
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?
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
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'
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"?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.