Add back enabled checkbox and sync (#30)

* Add back enabled checkbox and sync

* Better state management

extensions-builtin/sd_forge_controlnet/javascript/active_units.js

@@ -68,7 +68,8 @@
                 this.accordion = accordion;
                 this.isImg2Img = tab.querySelector('.cnet-mask-upload').id.includes('img2img');
 
-                this.enabledCheckbox = tab.querySelector('.input-accordion-checkbox');
+                this.enabledAccordionCheckbox = tab.querySelector('.input-accordion-checkbox');
+                this.enabledCheckbox = tab.querySelector('.cnet-unit-enabled input');
                 this.inputImage = tab.querySelector('.cnet-input-image-group .cnet-image input[type="file"]');
                 this.inputImageContainer = tab.querySelector('.cnet-input-image-group .cnet-image');
                 this.controlTypeRadios = tab.querySelectorAll('.controlnet_control_type_filter_group input[type="radio"]');
@@ -81,9 +82,10 @@
                 // By default the InputAccordion checkbox is linked with the state
                 // of accordion's open/close state. To disable this link, we can
                 // simulate click to check the checkbox and uncheck it.
-                this.enabledCheckbox.click();
+                this.enabledAccordionCheckbox.click();
-                this.enabledCheckbox.click();
+                this.enabledAccordionCheckbox.click();
 
+                this.sync_enabled_checkbox();
                 this.attachEnabledButtonListener();
                 this.attachControlTypeRadioListener();
                 this.attachImageUploadListener();
@@ -92,6 +94,21 @@
                 this.attachPresetDropdownObserver();
             }
 
+            /**
+             * Sync the states of enabledCheckbox and enabledAccordionCheckbox.
+             */
+            sync_enabled_checkbox() {
+                this.enabledCheckbox.addEventListener("change", () => {
+                    if (this.enabledAccordionCheckbox.checked != this.enabledCheckbox.checked) {
+                        this.enabledAccordionCheckbox.click();
+                    }
+                });
+                this.enabledAccordionCheckbox.addEventListener("change", () => {
+                    if (this.enabledCheckbox.checked != this.enabledAccordionCheckbox.checked) {
+                        this.enabledCheckbox.click();
+                    }
+                });
+            }
             /**
              * Get the span that has text "Unit {X}".
              */

extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py

@@ -151,7 +151,6 @@ class ControlNetUiGroup(object):
         self,
         is_img2img: bool,
         default_unit: external_code.ControlNetUnit,
-        unit_enabled: gr.Checkbox,
         photopea: Optional[Photopea] = None,
     ):
         # Whether callbacks have been registered.
@@ -165,12 +164,11 @@ class ControlNetUiGroup(object):
         self.webcam_enabled = False
         self.webcam_mirrored = False
 
-        # Now the enabled checkbox is moved to display on InputAccordion.
-        self.enabled = unit_enabled
         # Note: All gradio elements declared in `render` will be defined as member variable.
         # Update counter to trigger a force update of UiControlNetUnit.
         # This is useful when a field with no event subscriber available changes.
         # e.g. gr.Gallery, gr.State, etc.
+        self.enabled = None
         self.update_unit_counter = None
         self.upload_tab = None
         self.image = None
@@ -397,6 +395,12 @@ class ControlNetUiGroup(object):
                 )
 
         with FormRow(elem_classes=["controlnet_main_options"]):
+            self.enabled = gr.Checkbox(
+                label="Enable",
+                value=self.default_unit.enabled,
+                elem_id=f"{elem_id_tabname}_{tabname}_controlnet_enable_checkbox",
+                elem_classes=["cnet-unit-enabled"],
+            )
             self.pixel_perfect = gr.Checkbox(
                 label="Pixel Perfect",
                 value=self.default_unit.pixel_perfect,

extensions-builtin/sd_forge_controlnet/scripts/controlnet.py

@@ -80,9 +80,9 @@ class ControlNetForForgeOfficial(scripts.Script):
                         with InputAccordion(
                             value=False,
                             label=f"ControlNet Unit {i}",
-                            elem_classes=["cnet-unit-enabled"],
+                            elem_classes=["cnet-unit-enabled-accordion"],  # Class on accordion
-                        ) as enable_unit:
+                        ):
-                            group = ControlNetUiGroup(is_img2img, default_unit, enable_unit, photopea)
+                            group = ControlNetUiGroup(is_img2img, default_unit, photopea)
                             ui_groups.append(group)
                             controls.append(group.render(f"ControlNet-{i}", elem_id_tabname))