From 9b3172b561c0f0f725140ca3650197498443881a Mon Sep 17 00:00:00 2001 From: GeorgLegato Date: Wed, 29 Mar 2023 04:52:04 +0200 Subject: [PATCH 1/2] added Toolbox and cycle background function --- javascript/vectorstudio-ext.js | 130 +++++++++++++++++++++++---------- scripts/vectorstudio.py | 21 +++++- style.css | 33 ++++++--- 3 files changed, 130 insertions(+), 54 deletions(-) diff --git a/javascript/vectorstudio-ext.js b/javascript/vectorstudio-ext.js index 51a8a2f..78ae14e 100644 --- a/javascript/vectorstudio-ext.js +++ b/javascript/vectorstudio-ext.js @@ -73,64 +73,116 @@ async function image_browser_controlnet_send(toTab, controlnetNum) { var svgCode = svgE.svgCanvas.getSvgString(); var dataUrl = "data:image/svg+xml;base64," + btoa(svgCode); - const blob = await (await fetch(dataUrl)).blob() - const dt = new DataTransfer() - dt.items.add(new File([blob], "ImageBrowser.png", { type: blob.type })) - const container = gradioApp().querySelector( - toTab === "txt2img" ? "#txt2img_script_container" : "#img2img_script_container" - ) - const accordion = container.querySelector("#controlnet .transition") - if (accordion.classList.contains("rotate-90")) accordion.click() - - const tab = container.querySelectorAll( - "#controlnet > div:nth-child(2) > .tabs > .tabitem, #controlnet > div:nth-child(2) > div:not(.tabs)" - )[controlnetNum] - if (tab.classList.contains("tabitem")) - tab.parentElement.firstElementChild.querySelector(`:nth-child(${Number(controlnetNum) + 1})`).click() - - const input = tab.querySelector("input[type='file']") - try { - input.previousElementSibling.previousElementSibling.querySelector("button[aria-label='Clear']").click() - } catch (e) {} - - input.value = "" - input.files = dt.files - input.dispatchEvent(new Event("change", { bubbles: true, composed: true })) - - image_browser_gototab(toTab) + const blob = await (await fetch(dataUrl)).blob() + const dt = new DataTransfer() + dt.items.add(new File([blob], "ImageBrowser.png", { type: blob.type })) + const container = gradioApp().querySelector( + toTab === "txt2img" ? "#txt2img_script_container" : "#img2img_script_container" + ) + const accordion = container.querySelector("#controlnet .transition") + if (accordion.classList.contains("rotate-90")) accordion.click() + + const tab = container.querySelectorAll( + "#controlnet > div:nth-child(2) > .tabs > .tabitem, #controlnet > div:nth-child(2) > div:not(.tabs)" + )[controlnetNum] + if (tab.classList.contains("tabitem")) + tab.parentElement.firstElementChild.querySelector(`:nth-child(${Number(controlnetNum) + 1})`).click() + + const input = tab.querySelector("input[type='file']") + try { + input.previousElementSibling.previousElementSibling.querySelector("button[aria-label='Clear']").click() + } catch (e) { } + + input.value = "" + input.files = dt.files + input.dispatchEvent(new Event("change", { bubbles: true, composed: true })) + + image_browser_gototab(toTab) } function image_browser_controlnet_send_txt2img(controlnetNum) { - image_browser_controlnet_send("txt2img", controlnetNum) + image_browser_controlnet_send("txt2img", controlnetNum) } - + function image_browser_controlnet_send_img2img(controlnetNum) { - image_browser_controlnet_send("img2img", controlnetNum) + image_browser_controlnet_send("img2img", controlnetNum) +} + + +let vs_bg_count=0 +const vs_bg_max=3 +const vs_bg_class_pre="vs_svg_bg_" + +function vectorstudio_cycle_svg_bg() { + allsvgs = gradioApp().querySelectorAll ('img[src$=".svg"], img[src^="data:image/svg"]') + if (allsvgs) { + + const newClass = vs_bg_class_pre+""+vs_bg_count + vs_bg_count += 1 + vs_bg_count %= vs_bg_max+1 + + allsvgs.forEach(s => { + s.classList.forEach(cle => { + if (cle.startsWith(vs_bg_class_pre)) { + s.classList.remove(cle) + } + }); + s.classList.add(newClass) + }); + } } -/* need to be in iframe-html + + +const VS_SCRIPTLIST_NAME = "Vector Studio" + +/* need to be in iframe-html*/ document.addEventListener("DOMContentLoaded", () => { const onload = () => { if (gradioApp) { + st2i = gradioApp().querySelector("#txt2img_script_container #script_list select") + si2i = gradioApp().querySelector("#img2img_script_container #script_list select") + if (st2i && si2i) { + const txtToolbox = gradioApp().querySelector("#txt2img_results #VectorStudio_ToolBox"); + const imgToolbox = gradioApp().querySelector("#img2img_results #VectorStudio_ToolBox"); + /* display the Toolboxes (sendto etc) only when the script is selected */ + st2i.addEventListener("change", () => { + txtToolbox.style.display = st2i.value == VS_SCRIPTLIST_NAME ? "flex" : "none" + }) + si2i.addEventListener("change", () => { + imgToolbox.style.display = si2i.value == VS_SCRIPTLIST_NAME ? "flex" : "none" + }) + + // set initial state on start + txtToolbox.style.display = st2i.value == VS_SCRIPTLIST_NAME ? "flex" : "none" + imgToolbox.style.display = si2i.value == VS_SCRIPTLIST_NAME ? "flex" : "none" - vs-frame = gradioApp().querySelector("#" + VS_IFRAME_NAME).contentWindow.svgEditor - if (!Editor) { - setTimeout(onload, 10); - return } - // change layout: bottom color swatches to top. - TOP = document.getElementById("tools_top") - BOTTOM = document.getElementById("tools_bottom") - TOP.appendChild(BOTTOM) + else { + setTimeout(onload, 3000); + } } + /* later: move color panel up + vsframe = gradioApp().querySelector("#" + VS_IFRAME_NAME).contentWindow.svgEditor + if (!Editor) { + setTimeout(onload, 10); + return + } + // change layout: bottom color swatches to top. + TOP = document.getElementById("tools_top") + BOTTOM = document.getElementById("tools_bottom") + TOP.appendChild(BOTTOM) + */ else { - setTimeout(onload, 3); + setTimeout(onload, 3000); } }; + onload(); + }); -*/ + diff --git a/scripts/vectorstudio.py b/scripts/vectorstudio.py index a6cd4ad..4cfa1b7 100644 --- a/scripts/vectorstudio.py +++ b/scripts/vectorstudio.py @@ -54,6 +54,7 @@ usefulDirs = scripts.basedir().split(os.sep)[-2:] iframesrc = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/editor/iife-index.html" +script_list_component = None def check_ext(ext): found = False @@ -220,16 +221,28 @@ def add_tab(): def after_component(component, **kwargs): - + global script_list_component + # Add our buttons after each "send to extras" button if kwargs.get("elem_id") == "extras_tab": suffix = component.parent.elem_id if (suffix): - edit_svg_button = gr.Button ("Edit SVG", elem_id="sendto_svgedit_button_"+suffix) - edit_svg_button.click (None, [],None, _js="vectorstudio_send_gallery()" ) - + with gr.Accordion("Vector Studio", open=False, elem_id="VectorStudio_ToolBox", visible=False): + with gr.Column(): + edit_svg_button = gr.Button ("Edit SVG", elem_id="sendto_svgedit_button_"+suffix) + cycle_svg_bg_button = gr.Button("Cycle BG", elem_id="svg_cycle_bg", visible=True) + + cycle_svg_bg_button.click(None,[],None,_js="vectorstudio_cycle_svg_bg") + edit_svg_button.click (None, [],None, _js="vectorstudio_send_gallery()" ) + + # get the dropdown component to depend on selected/active script. + if kwargs.get("elem_id") == "script_list": + script_list_component = component + + + script_callbacks.on_ui_tabs(add_tab) script_callbacks.on_after_component(after_component) diff --git a/style.css b/style.css index ca580ff..c30dd7c 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,31 @@ .vectorstudio-iframe body { - overflow: hidden; + overflow: hidden; } #vectorstudio-iframe { - width:100%; - height:100vh; - overflow: hidden; + width: 100%; + height: 100vh; + overflow: hidden; } -img[src$=".svg"], img[src^="data:image/svg"] { -/* background: white; */ +/*img[src$=".svg"], img[src^="data:image/svg"] {*/ +.vs_svg_bg_0 { + background: none; +} -background-image: - linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.2) 75%, rgba(255,255,255,.2)), - linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.2) 75%, rgba(255,255,255,.2)); -background-size: 20px 20px; -background-position: 0 0, 10px 10px; +.vs_svg_bg_1 { + background: white; +} +.vs_svg_bg_2 { + background: black; } + +.vs_svg_bg_3 { + background-image: + linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .2) 75%, rgba(255, 255, 255, .2)), + linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .2) 75%, rgba(255, 255, 255, .2)); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + +} \ No newline at end of file From 9f61f1fb26058f51d133437e68a650bf1ace85d2 Mon Sep 17 00:00:00 2001 From: GeorgLegato Date: Sun, 2 Apr 2023 01:13:01 +0200 Subject: [PATCH 2/2] using row in toolbox --- .../__pycache__/vectorstudio.cpython-310.pyc | Bin 7469 -> 8649 bytes scripts/vectorstudio.py | 12 ++++++------ svgedit | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/scripts/__pycache__/vectorstudio.cpython-310.pyc b/scripts/__pycache__/vectorstudio.cpython-310.pyc index 3340b939b4d78dc43dc9e2ffbe836d5543163538..6ae34d316cec9ea33b91c0121e682d9ded16340a 100644 GIT binary patch delta 3001 zcmai0O>7&-72erhl1qxDM2Zqcijvp1WSe$mCvK6nPMRMpwxh(6)k;ZPw$5V7SyD?a zxy80N+rrlI3A;GWs+j;tF`JHr$RNp!GWkf()Q%1f1#G;7Y$ z89IAgs?1-L=rO9_mZ)xJny2=Z$|-uBo`9Lt^dy~w>ltfiP_|AV5V+aQ;H-59C7NB8 z%Jb$vk)%Y|v)c`Q<;L1Ko?E=4n}3G$3wE1Y z+vnH)mQ#c1dp{K<9E&i##{nqWCB8HuRHn*-yes$Q=cSwJU8N`Wl%_mT4x~+qO;L3h z(&>>^>5T+pIkJ3}>H=8c#a5=NrR(c&uuAkQ3t($KA46S>=kg?ej?8 z?Y1dT4&4ll;fYYI+m7{PiRr-~wbt2qZQZJE7!dO$rke#&Ns?$JO;jS|__wOC6JQP= z)xI~!bdbt~tDfc5g%ZMXF!P9S`;K)rcsYLY$vO0sm)F7onVmw1gzXu2t8o#=gR!c& z?rtrC6FYPG^SGjr`QTT{-;qax{Zxr81RtiJ7<&X~A49l^un_zs^>!53W#wQmy*sX> zC_rQ*ckSzki*nU&*WL1Dm?`P7Yv?O7 zdJ(0U5UwM$aW4k@2TV^gB3nGq{nPAZB3YE}0_l z|GD})x;qFi!W#%p0Ir&>;c>ZhktfWm*D?KdZ}Y*uWHs;%KAw1=>Xbub>=4 z@XN^;UwH=gw-ELao&(^qn%myAn9pMk%crJqGE|k zjK24af)t0b2*ZODMe>1qdt_JgNmB;$^_6{cXA8JUn!r7(g0@I-Ql$~012=^h9cqdn zX+{Sz8lxKUR)smukNb(9x(CbBI8D%zp5#8>Q>nJ0(&T<*H`0@vBUI`|8l)l76ix4| zz-cA4RfKUgG`=QLI3-kRPa#rUdrb0P+XDLI|64G8GDsdscd{bA6dm)^@4-R*1BGVy z!Rw*eZt$0pLLXPTeg7&wLdR*Yt~BsCnONotc)dPzowns)1rle>w&~pR?V4v;ZL{iF z6pXP=+p|I5DXv;=s{5|)Z~MqteK8DPw)~^HA)CcqA6AA*UL4-VfZG@?bK7XS)N(wd z-EA=}$eqm5N;(*;7USemJl_Pv7r=#&*lpipX3e*u9N$CByxlSzmQiKymS-{J=t&F@ z@-!gHYnUY*fO5Ufqjno=*5fg^>kC0Kn%@6gWB4#ZqR^^g7Hl4~O>J5=IPw=fze{Zw zsvi$Sb_sKeUUuBthR41ZDqY`q+boNUisa!6u!v##G9(+1FtgpTc%W!O@B%)R@818I!`JZNriO|0^nJSm8_y>mUIkx*ju{C!-p9ORCWQ?& ztDk`4eHj2we>n{u0RMADl|>(bZV>%UjeRa_pOrpM`#nI941kc(+vN?J-RwzC((H?N$Zq-ykWisOL>SS1_0BU;`N|*y95{zkGm0ea z$?y#j-^O3OAi?&~mvkzc#9_^US0{V+IuzcB52w1!9M+hGRK*@*? z9T5rD*Xp=!2r5T-{GP(28(X3cMZIplZg2BZ{3tR+4uS%&^YJkCFfF4R5<|zE2*9JA zkD7I$_|ZN73`TDjAgyY$D(6UoWXTxGf>in!)Y#p0TqEjT_DS&4^z&z)1xMCH5UuqV zNL*Q2y3Vjs@Ys&s!Ot8v8vJ_t{5kCXl{6efUB~jyi-W{t6?BX);i=;BXoH!+Zgwe{ zElqt1zY16e=kEo1>#%z?BzJ7M5*tUq34~%`mrBKtQ2YggI3uum30gqT@0R9H>Zl)q y*ahvWaIvSMT}j?b@TbzksiX{j4*p3QKg7lWb7V>`!N-^;XA@dan@vom$$tPi{r?*P delta 1856 zcmZ`(O>7%Q6rR~#|I~Ht#7^QQc4FtJY2B&`O(p1`3jJ?NDOH=cVhgp_p0TseuGgAb zr$0CZ)N%k3Mb(N@sX|IXNFYHkIdJ4kFGz^n9=L;$5J$L__tqh;DzT&a_RV|q_r7`W zJvs5+p@h@b6(jIn`!>sNjNMP~r;v%2hro(SZWmDH1yvj?eUcT}=slwEWMga`{=0a7t;lz-Q#c^Mwwv!liKQ-+;)Jn635m6&*{BsRzBza4 z*v6OiuTWYM31G(GZrVnTm)zS;E5~?O>(O$hG7FS?EM_IBO%vxEq=tCh|L_%g1V?&m<#MhMU3D%F;kXIyEX%Ta~&?u zqe+wV&dpbGIJ$8^rm8gOecJWY$PTncY_nn7EgJ;mRv>87fif2zwAF zy&n^wgz-2r=IP0$bmxLN4h~XU=JAc+laH0&gQ)8R@FQhIf}=vDysuLQdft1I(r0_n z0zPu)Yi6VB6#F|)(583|R~|<=fp8Mx6vAnQGYDr9jv>r?R{BQo3%5{3t5M$gHGP!k zuHvL?0DeSp=~#>04_6&w8?LzS9q2n`1it+5X=PkqMKBQ-5Ey{38KNeAr8(orjIwMR z?z~)lk#_M8%=~EMm%guPW)N4t1W?q(K9oD)t!B<$Ie_D3ge8PS0Dh$6G#0sV{YZ_w z%y12HJy17Wosk2hVlv>Y!v@}}bJIFXv)0A5gjgE~!&SnX*DxCzpsj zP1clkvYMi3P?_p#j|kH~S6OHUlIj{^M1yu$rKAzvM`XeKbNlej^i8l~dkcD-urP~M z)f$Baj9xem8Pj7l4C}UQR%D4cjIza<_aJL8Pr~sc2XLorkyjwy_DZ+KOs5zU`$6l6 zk6TVNsiwr+vFjjJn^7pVNAS6L!w4dglD(~l> z##Qkd=qpG9A^5KFY0$&aUxzM{^EO>0j6!u%78Ehs27cmu%_q<+hHw>%c-EYN->8M!?Rdur5~;d z10GoH_Z}Ap_G6_HDYS1blJnp*6KPaNHg^)eIIkb!lJ|EZ*ZlxRjQZd;;oj4u6XVa~ t;8`$4k94*;iVrR?c#ETZC%Tn5g%p7n4