From 968742ce8a8009f1df73bc012c067f79e4075202 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Sat, 1 Apr 2023 15:16:24 +0300
Subject: [PATCH] Fix double init of zoom pan image edit component and toolbar
 is in the way #38

---
 javascript/imageMaskFix.js | 39 ++++++++++++++++++++++++++------------
 style.css                  | 11 ++++++++---
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js
index a3b38308..6a5aaf74 100644
--- a/javascript/imageMaskFix.js
+++ b/javascript/imageMaskFix.js
@@ -52,6 +52,8 @@ onUiLoaded(function(){
 	const brush_size = '<input type="range" min="0.75" max="110.0">';
 	
 	let img_src = [];
+	let spl_instances = [];
+	let spl_pan_instances = [];
 	const container = gradioApp().querySelector(".gradio-container");
     const observer  = new MutationObserver(() => 
 		gradioApp().querySelectorAll('div[data-testid="image"]').forEach(function (elem, i){			
@@ -61,20 +63,33 @@ onUiLoaded(function(){
 				if(img_src[i] != img.src){
 					let tool_buttons = img_parent.querySelectorAll('button');
 					if(tool_buttons.length > 2){
+						let spl_parent = elem.parentElement;
+						let spl;
+						let spl_pan;
+						let isPanning;
+						
+						if(spl_parent.className != "spl-pane"){							
+							spl = new Spotlight();	
+							spl.init(spl_parent, "-"+spl_parent.id);
+							
+							spl.addControl("undo", spl_undo_handler);
+							spl_pan = spl.addControl("pan", spl_pan_handler);	
+							spl.addControl("brush", spl_brush_handler, brush_size);
+							if(tool_buttons.length == 4){
+								spl.addControl("color", spl_color_handler, color_box);
+							}
+							spl.addControl("clear",spl_clear_handler);
+							
+							spl_instances[i] = spl;
+							spl_pan_instances[i] = spl_pan;
+							
+						}else{
+							spl = spl_instances[i];							
+							spl_pan = spl_pan_instances[i];							
+						}
+						
 						img_src[i] = img.src;						
 						//console.log("NEWIMAGE");
-						let spl_parent = elem.parentElement;
-						let spl = new Spotlight();	
-						spl.init(spl_parent, "-"+spl_parent.id);
-						
-						spl.addControl("undo", spl_undo_handler);
-						let spl_pan = spl.addControl("pan", spl_pan_handler);	
-						spl.addControl("brush", spl_brush_handler, brush_size);
-						if(tool_buttons.length == 4){
-							spl.addControl("color", spl_color_handler, color_box);
-						}
-						spl.addControl("clear",spl_clear_handler);
-						let isPanning;
 
 						function spl_undo_handler(e) {
 							tool_buttons[0].click();
diff --git a/style.css b/style.css
index 093ae374..1aedef92 100644
--- a/style.css
+++ b/style.css
@@ -4221,9 +4221,14 @@ input[type=range]::-ms-fill-upper {
 [id^="spotlight"].relative {
 	position: relative !important;
 	width:auto;
-	height:50vh;
-	z-index:99;
-	margin-bottom: 1px;
+	height: calc(50vh + 40px);
+    z-index: 99;
+    margin-bottom: 1px;
+    padding-top: 40px;
+}
+
+[id^="spotlight"].relative .spl-pane {
+	top: -20px;
 }
 
 [id^="spotlight"].relative .spl-pane > * {