Update main to 1.7 from dev

Update main to 1.7

Author: chrisgoringe

README.md

@@ -13,6 +13,14 @@ When you want to edit the workflow, it's still there, untouched.
 The controller gets saved with the workflow, so once you've set it up, it's always there for you.
 And if you share the workflow with someone else, they get your controller as well...
 
+## Latest update - v1.7, 14th Feb 2025
+
+- Added workspaces (WIP)
+- Image viewers now work with batches
+- Better support for some rgthree COMBO features
+- Option to hide file types such as .safetensors in loader nodes (main settings)
+- Option to specify that a node shouldn't show images in controller (right-click nodeblock title)
+
 ## Getting started
 
 The Controller is toggled using a button in the top menu. When the sliders icon is blue, the Controller is active.
@@ -99,8 +107,14 @@ Nodes which include an image also have a pin in the top right corner: ![pin](ima
 When this is active (blue, the default) the image will be shown at the full width of the controller. 
 If you unpin the image, you will find a handle at the bottom right of the image that can be used to resize it (vertically).
 
+Right-clicking the title of a nodeblock brings up options to control which widgets should be shown, and which images (if any) should be shown, in this nodeblock.
+
 ## Other things to explore
 
+### Workspaces
+
+WIP - you can save and then reload the setup of your controllers from the dropdown triangle ![screenshot](images/dropdown.png). This may be useful if you use the same workflow in different ways. There are plans to make this feature more useful!
+
 ### Batches
 
 ![image](images/batch.png)
@@ -155,8 +169,12 @@ but you just need to click the refresh button (top right of the Controller) to b
 
 ### Settings
 
-In the main settings menu are a few things you can tweak - hiding control_after_generate, a keyboard shortcut to show or hide the Controller,
-and settings to control how you can interact with the sliders.
+In the main settings menu are a few things you can tweak such as:
+
+- hiding control_after_generate 
+- keyboard shortcut to show or hide the Controller
+- settings to control how you can interact with the sliders
+- option to hide filename extensions
 
 There's also a debug setting that I might ask you to use if you report a problem!
 

__init__.py

@@ -1,4 +1,4 @@
-VERSION = "1.6.1"
+VERSION = "1.7"
 WEB_DIRECTORY = "./js"
 
 NODE_CLASS_MAPPINGS= {}

images/dropdown.png

@@ -121,8 +121,10 @@ export class Texts {
     static EDIT_WV = "Edit widget visibility"
     static IMAGE_WIDGET_NAME = "image viewer"
     static UNCONNECTED = "Unconnected Input"
+    static EDIT_IMAGE_SETTING = "Images"
     static ACCEPT_UPSTREAM = "Show upstream images"
     static REJECT_UPSTREAM = "Only show my images"
+    static NO_IMAGES = "Don't show images"
     static STACK_ALWAYS = "Only show active tab"
     static STACK_IF_NEEDED = "Show all tabs if space allows"
 }

js/constants.js

@@ -391,13 +391,35 @@
     display:none;
 }
 
+
+.nodeblock_image_grid {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+    align-content: center;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+}
+
+.nodeblock_image_grid_image {
+    max-width: 100%;
+    max-height: 100%;
+    padding: 1px;
+}
+
 .nodeblock_image_overlay {
     position: absolute;
-    width: calc(100% - 8px);
-    left: 4px;
-    clip: rect(0, 0, 0, 0);
-  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
+    pointer-events: none;
+    height: auto;
+}
+
 
+.overlay.overlay_show_grid {
+    padding: 2px 4px;
+    bottom: unset;
+    top: 2.5em;
 }
 
 .nodeblock.minimised .nodeblock_image_panel {
@@ -476,13 +498,24 @@
     background: #00000000;
 }
 
+.combo_label_wrapper {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    display: flex
+;
+    width: 100%;
+    height: 100%;
+}
+
 .entry_label.combo {
-    width: 20%;
     background-color: var(--second-back-color);
     padding: 4px 0px 4px 4px;
-    top: 4px;
+    position: unset;
+    width: unset;
     height: 20px;
-    left: 4px;
+    flex-shrink:0;
+    min-width: 0;
 }
 
 .entry_label.value {
@@ -504,16 +537,17 @@
     text-align: right;
 }
 .input.clickabletext {
-    display: block;
+    /*display:block;*/
     text-align: right;
-    padding:  4px;
+    padding: 4px;
     font-size: 70%;
-    width: 80%;
-    left: 20%;
-    position: relative;
     overflow: clip;
     text-wrap-mode: nowrap;
     text-overflow: ellipsis;
+    width: unset;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 0;
 }
 select.input {
     height: calc(var(--font-size) + 4px)
@@ -648,6 +682,10 @@ textarea.input {
     display:none !important;
 }
 
+.blank {
+    color: transparent;
+}
+
 i {
     cursor: pointer;
 }
@@ -669,6 +707,7 @@ i {
     padding-bottom: 1px;
     bottom: unset;
     top: 2.5em;
+    right: 2em;
 }
 
 .overlay_paging_icon {

js/controller.css

@@ -62,6 +62,10 @@ function on_setup() {
         mouse_change(true)
         if (e.button==2) e.target.handle_right_click?.(e)
     })
+    window.addEventListener('click', (e)=>{
+        mouse_change(true)
+        if (e.ctrlKey) e.target.handle_right_click?.(e)
+    })
     window.addEventListener('mouseup', (e)=>{
         mouse_change(false)
         ControllerPanel.handle_mouse_up(e)
@@ -80,7 +84,7 @@ function on_setup() {
     })
     window.addEventListener('keypress', (e) => {
         if (e.target.tagName=="CANVAS" || e.target.tagName=="BODY") {
-            const keysetting = app.ui.settings.getSettingValue(SettingIds.KEYBOARD_TOGGLE, "C") 
+            const keysetting = app.ui.settings.getSettingValue(SettingIds.KEYBOARD_TOGGLE) 
             if (keysetting==e.key) {
                 ControllerPanel.toggle()
                 e.preventDefault()
@@ -121,7 +125,7 @@ app.registerExtension({
     async afterConfigureGraph() {
         UpdateController.configuring(false)
         try {
-            ControllerPanel.new_workflow()
+            ControllerPanel.on_new_workflow()
             ImageManager.analyse_graph()
             ImageManager.send_all()
             send_graph_changed(true)

js/controller.js

@@ -10,7 +10,7 @@ import { observe_resizables, clear_resize_managers } from "./resize_manager.js";
 import { Debug } from "./debug.js";
 
 import { NodeInclusionManager } from "./node_inclusion.js";
-import { get_all_setting_indices, getSettingValue, global_settings, new_controller_setting_index, get_settings, delete_settings, initialise_settings, valid_settings } from "./settings.js";
+import { get_all_setting_indices, getSettingValue, global_settings, new_controller_setting_index, get_settings, delete_settings, initialise_settings, valid_settings, clear_settings } from "./settings.js";
 import { update_node_order, add_missing_nodes } from "./settings.js"
 import { SettingIds, Timings, Texts, Pixels } from "./constants.js";
 import { FancySlider } from "./input_slider.js";
@@ -218,7 +218,7 @@ export class ControllerPanel extends HTMLDivElement {
         this.build_controllerPanel()
     }
 
-    static new_workflow() {
+    static on_new_workflow() {
         Debug.extended('new_workflow')
         Object.keys(ControllerPanel.instances).forEach((k)=>{ControllerPanel.instances[k]._remove()})
         ControllerPanel.instances = {}
@@ -284,35 +284,16 @@ export class ControllerPanel extends HTMLDivElement {
             ControllerPanel.search_button.addEventListener('click', ()=>{ 
                 global_settings.highlight = !global_settings.highlight;
                 classSet(ControllerPanel.search_button, 'litup', global_settings.highlight) 
-             })
+            })
+
+            ControllerPanel.dropdown_button = create('i', 'pi pi-caret-down controller_menu_button', ControllerPanel.buttons)
+            ControllerPanel.dropdown_button.addEventListener('click', ControllerPanel.top_context_menu)
+
 
             const exit_focus_button = document.getElementsByTagName('main')[0].getElementsByTagName('button')[0]
             exit_focus_button.addEventListener('click', () => {
                 UpdateController.make_request('exit focus', 10)
             })
-/* removed from 1.6, will return in 1.7
-            ControllerPanel.save_button = create('i', 'pi pi-file-export controller_menu_button', ControllerPanel.buttons)
-            add_tooltip(ControllerPanel.save_button, 'save controller workspace')
-            ControllerPanel.save_button.addEventListener('click', ()=>{ 
-                download_workspace_as_json(ControllerPanel.instances, "workspace.json")
-            })
-            
-            ControllerPanel.load_button = create('i', 'pi pi-file-import controller_menu_button', ControllerPanel.buttons)
-            add_tooltip(ControllerPanel.load_button, 'load controller workspace')
-            ControllerPanel.load_button.addEventListener('click', async function() { 
-                await load_workspace((new_instances)=>{
-                    if (new_instances.length>0) {
-                        Object.values(ControllerPanel.instances).forEach((instance)=>{instance.delete_controller()})
-                        new_instances.forEach((instance)=>{
-                            const newcp = ControllerPanel.create_new()
-                            set_settings_for_instance(newcp.settings, instance)
-                        })
-                        global_settings.hidden = false
-                        UpdateController.make_request("loaded workspace")
-                    }
-                }, (e)=>{Debug.error("Load_button",e)})                
-            })
-*/
 
             ControllerPanel.update_buttons()
 
@@ -321,9 +302,26 @@ export class ControllerPanel extends HTMLDivElement {
         }
     }
 
+    static top_context_menu(e)  {
+        open_context_menu(e, "Workspace", [ 
+            { 
+                "title": "Save workspace", 
+                "callback":()=>{
+                    download_workspace_as_json(ControllerPanel.instances, "workspace.json")
+                }
+            },
+            {
+                "title": "Load workspace",
+                "callback": async ()=>{
+                    await load_workspace( ControllerPanel.on_new_workflow )
+                }
+            }
+        ])
+    }
+
     static redraw(c) { 
         if (!valid_settings()) {
-            ControllerPanel.new_workflow()
+            ControllerPanel.on_new_workflow()
             return
         }
         if (Object.values(ControllerPanel.instances).length>0 && !document.body.contains(Object.values(ControllerPanel.instances)[0])) {
@@ -633,7 +631,7 @@ export class ControllerPanel extends HTMLDivElement {
 
     _build_controllerPanel() {
         classSet(this, 'hidden', global_settings.hidden)
-        this.style.setProperty('--font-size',`${1.333*getSettingValue(SettingIds.FONT_SIZE, 12)}px`)
+        this.style.setProperty('--font-size',`${1.333*getSettingValue(SettingIds.FONT_SIZE)}px`)
         classSet(this, 'read_only', app.canvas.read_only)
         add_missing_nodes(this.settings.node_order)
 
@@ -695,7 +693,7 @@ export class ControllerPanel extends HTMLDivElement {
 
         this.add_button_actions()
 
-        const bars = getSettingValue(SettingIds.SHOW_SCROLLBARS, "thin")
+        const bars = getSettingValue(SettingIds.SHOW_SCROLLBARS)
         classSet(this, "hide_scrollbars", bars == "no")
         classSet(this, "small_scrollbars", bars == "thin")
 
@@ -748,7 +746,7 @@ export class ControllerPanel extends HTMLDivElement {
                 tab.style.flexShrink = `${nm.length + 2}`
                 tab.style.flexGrow = `${nm.length + 2}`
                 tab.style.flexBasis = `${nm.length * 20}px`
-                tab.style.minWidth = `${getSettingValue(SettingIds.MINIMUM_TAB_WIDTH, 50)}px`
+                tab.style.minWidth = `${getSettingValue(SettingIds.MINIMUM_TAB_WIDTH)}px`
                 tab.addEventListener('mouseenter', ()=>{Highlighter.group(nm)})
                 tab.addEventListener('mouseleave', ()=>{Highlighter.group(null)})
                 tab.addEventListener('mousedown', (e) => {

js/controller_panel.js

@@ -12,7 +12,7 @@ export class _Debug {
 
     _log(message, level, repeatok) {
         if ((message == this.last_message && !repeatok) ||
-            level > app.ui.settings.getSettingValue(SettingIds.DEBUG_LEVEL, 1)) return
+            level > app.ui.settings.getSettingValue(SettingIds.DEBUG_LEVEL)) return
         this.last_message = message
         console.log(`${VERSION} ${(this.prefix instanceof Function) ? this.prefix() : this.prefix}: (${level}) ${message}`)
     }

js/debug.js

@@ -1,6 +1,7 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 import { Debug } from "./debug.js";
+import { Timings } from "./constants.js";
 import { pim } from "./prompt_id_manager.js";
 
 export function is_image_upload_node(node) {
@@ -31,7 +32,9 @@ export class ImageManager {
     static node_listener_map  = {}  // map to Set: node_id (listened to) to node_id's (listeners)
     static node_urls_map      = {}  // map to urls: node_id to list[str]
     static executing_node     = null
-    static last_preview_node = null
+    static just_finished      = false
+    static last_preview_node  = null
+    static last_preview_image = null
     static node_image_change = (node_id)=>{}
 
     static reset() {
@@ -89,7 +92,7 @@ export class ImageManager {
     }
 
     static node_reported_images(node_id, imgs) {
-        if (ImageManager.executing_node) return
+        if (ImageManager.executing_node || ImageManager.just_finished) return
         const urls = []
         imgs.filter((i)=>(i.src && ! i.src.endsWith('undefined'))).forEach((i)=>{urls.push(i.src)})
         this._set_urls(node_id, urls, node_id)
@@ -99,16 +102,25 @@ export class ImageManager {
         // TODO if (!pim.ours(e)) return
         ImageManager.executing_node = e.detail
         if (!ImageManager.executing_node) {
+            ImageManager.just_finished = true
             Array.from(app.graph._nodes).filter((node)=>(node.imgs && node.imgs.length>0)).forEach((node)=>{
                 ImageManager.node_reported_images(node.id, node.imgs)
             })
+            setTimeout(()=>{ImageManager.just_finished = false}, Timings.GENERIC_LONGER_DELAY)
         }
+
     }
 
     static on_b_preview(e) {
         // TODO if (!pim.ours(e)) return
+        const blob_url = window.URL.createObjectURL(e.detail)
         ImageManager.last_preview_node = ImageManager.executing_node
-        ImageManager._images_received( ImageManager.executing_node, [window.URL.createObjectURL(e.detail),], "b_preview" )
+        const i = new Image()
+        i.onload = ()=>{
+            ImageManager.last_preview_image = {width: i.width, height: i.height}
+        }
+        i.src = blob_url
+        ImageManager._images_received( ImageManager.executing_node, [blob_url,], "b_preview" )
     }
 
     static on_executed(e) {