Merge pull request #3 from GeorgLegato/svg_backgrounds_toolbox

Svg backgrounds toolbox
GeorgLegato · Apr 1, 2023 · 6d14c6b · 6d14c6b
2 parents 2a5ec23 + 9f61f1f
commit 6d14c6b
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 55 deletions.
diff --git 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/__pycache__/vectorstudio.cpython-310.pyc b/scripts/__pycache__/vectorstudio.cpython-310.pyc
diff --git 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.Row():
+                            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
@@ -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;
+
+}
diff --git a/svgedit b/svgedit