Merge pull request #489 from chrisgoringe/dev

1.6.1

Author: chrisgoringe

README.md

@@ -23,6 +23,7 @@ There will normally be one controller window created for you. If not, or to add
 right click on the background and select "New Controller" from the menu (if it isn't there, check the Controller is active!).
 
 At first, the Controller will be empty. To add nodes to it, right-click on the node and in the Controller Panel menu select "Include this node".
+You can also select multiple nodes and add them all at once.
 
 ![menu](images/menu.png)
 
@@ -37,14 +38,19 @@ as a panel with the same title and colour as the node, underneath which are all
 If you now edit the values in those widgets, the changes will be reflected in the workflow (and vica versa). 
 Combo boxes, toggle switches, buttons, and text fields all work just as you would expect. 
 
+### Sliders for numeric values
+
 Numeric fields (like width in the image) a represented using an editable slider. 
 Click on the slider and drag left or right, and the value will change between the minimum and maximum values.
 You can also just hover the mouse over the slider and move the value up or down with your mouse scrollwheel.
 To enter a precise value, double click and the slider turns into a text entry box where you can type the value you want.
+
 If the minimum and maximum values, or the step size, aren't convenient, shift-click on the slider to change them. 
 Note that changes made here will be reflected in the actual widget as well, however, if you set a value outside 
 of the original limits the workflow may fail to validate on the server.
 
+![edit](images/slider-edit.png)
+
 You can change the way the scrollwheel interacts with the sliders, and the keys required to edit the limits, in the main settings.
 
 ## Groups and Tabs
@@ -103,16 +109,18 @@ If you have a batch of images, you can click through them on the preview using t
 
 ### Mask Editor
 
-ctrl-click on an image in the controller to bring up a context menu, from which you can launch the mask editor.
+ctrl-click or right-click on an image in the controller to bring up a context menu, from which you can launch the mask editor.
 
 ### Selectively hide widgets
 
-ctrl-click on the title of a nodeblock and you can hide/show specific widgets. Note that hide/show is specific to the controller, 
+ctrl-click or right-click on the title of a nodeblock and you can hide/show specific widgets. Note that hide/show is specific to the controller, 
 so you can have the same node showing different widgets on different controllers if you want!
 
+![context](images/nodeblock-context.png)
+
 ### Hover and zoom
 
-If the magnifying glass in the top control is active ![image](images/top.png) then when you move you mouse over a node in 
+If the magnifying glass in the top control is active - ![image](images/top.png) - then when you move you mouse over a node in 
 the controller it will be highlighted in the workflow, and when you move your mouse over a group tab, the group will
 be highlighted.
 
@@ -157,7 +165,7 @@ There's also a debug setting that I might ask you to use if you report a problem
 There is a little drag box at the bottom right of the controller that you can use to resize it. 
 You can also move it around by dragging the header.
 
-## Snapping
+### Snapping
 
 Controllers will snap to each other and move around together. To break them apart, move the controller on the right or bottom.
 

__init__.py

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

images/nodeblock-context.png

@@ -0,0 +1,28 @@
+import { extension_hiding } from "./utilities.js"
+import { open_context_menu, close_context_menu } from "./context_menu.js"
+import { WidgetChangeManager } from "./widget_change_manager.js"
+
+export class ExtendedCombo extends HTMLSpanElement {
+    constructor(choices, target_widget, node) {
+        super()
+        this.classList.add('input')
+        this.classList.add('clickabletext')
+        this.innerText = extension_hiding(target_widget.value)
+        this.draggable = false
+        this.addEventListener('click', (e)=>{
+            e.stopPropagation()
+            open_context_menu(e, "", choices,  {
+                className: "dark",
+                callback: (v)=>{
+                    close_context_menu()
+                    target_widget.value=v; 
+                    this.innerText = extension_hiding(v)
+                    target_widget.callback(v, app.canvas, node)
+                    WidgetChangeManager.notify(target_widget)
+                },
+            }, node)
+        })
+    }
+}
+
+customElements.define('extended-combo-widget',  ExtendedCombo, {extends: 'span'})

images/slider-edit.png

@@ -1,5 +1,7 @@
 
-export const VERSION = "1.4.1"
+export const VERSION = "1.6.1"
+
+//export const MAXIMUM_UPSTREAM = 4
 
 export class SettingIds {
     static KEYBOARD_TOGGLE = "Controller.Display.keyboard"
@@ -10,23 +12,27 @@ export class SettingIds {
     static DEBUG_LEVEL = "Controller.Debug.level"
     static FONT_SIZE = "Controller.Display.font_size"
     static TOOLTIPS = "Controller.Display.tooltips"
+    static MINIMUM_TAB_WIDTH = "Controller.Display.minimum_tab_width"
     static DEFAULT_APPLY_TO_SIMILAR = "Controller.Sliders.default_apply_to_similar"
     static SHOW_SCROLLBARS = "Controller.Display.show_scrollbars"
     static SHOW_IN_FOCUS_MODE = "Controller.Display.show_in_focus_mode"
+    static HIDE_EXTENSIONS = "Controller.Display.hide_extensions"
 }
 
 export class SettingNames {
     static KEYBOARD_TOGGLE = "Toggle controller visibility:"
     static FONT_SIZE = "Base font size:"
     static CONTROL_AFTER_GENERATE = "Show 'control before/after generate'"
     static TOOLTIPS = "Show tooltips"
+    static MINIMUM_TAB_WIDTH = "Minimum tab width"
     static DEFAULT_APPLY_TO_SIMILAR = "Default apply to similar"
     static SHOW_IN_FOCUS_MODE = "Show controllers in focus mode"
     static SCROLL_MOVES_SLIDERS = "Scrollwheel changes sliders"
     static SCROLL_REVERSED = "Scrollwheel reversed for sliders"
     static SHOW_SCROLLBARS = "Controller scrollbars"
     static EDIT_SLIDERS = "Edit slider limits"
     static DEBUG_LEVEL = "Debug level"
+    static HIDE_EXTENSIONS = "Hide extensions"
 }
 
 export class Generic {
@@ -43,46 +49,56 @@ export class Generic {
     static D3 = "Verbose"
     static SHOW = "Show"
     static HIDE = "Hide"
+    static SHOW_ALL = "[Show all widgets]"
+    static HIDE_ALL = "[Hide all widgets]"
 }
 
 export class Tooltips {
     static FONT_SIZE = "All font sizes will be scaled relative to this value"
     static CONTROL_AFTER_GENERATE = "Allow the control_after_generate widget to be shown"
     static TOOLTIPS = "Refresh controller after changing"
+    static MINIMUM_TAB_WIDTH = "Minimum width of a tab before switching to stacked layout"
     static DEFAULT_APPLY_TO_SIMILAR =  "Default setting of 'apply to similar' checkbox"
     static SCROLL_REVERSED = "Scroll up to reduce value"
     static SHOW_SCROLLBARS = "If off, can still scroll with scrollwheel"
     static DEBUG_LEVEL = "Press f12 for js console"
+    static HIDE_EXTENSIONS = "Hide filename extensions"
 }
 
 export class InclusionOptions {
     static EXCLUDE   = "Don't include this node"
     static INCLUDE   = "Include this node"
     static ADVANCED  = "Include this node as advanced control"
-    static EXCLUDES  =  InclusionOptions.EXCLUDE.replace('this node', 'these nodes')
+    static FAVORITE  = "Include this node as favorite"
+    static EXCLUDES  = InclusionOptions.EXCLUDE.replace('this node', 'these nodes')
     static INCLUDES  = InclusionOptions.INCLUDE.replace('this node', 'these nodes')
     static ADVANCEDS = InclusionOptions.ADVANCED.replace('this node', 'these nodes')
+    static FAVORITES = InclusionOptions.FAVORITE.replace('this node', 'these nodes')
 }
 
 export class Timings { // ms
     static GENERIC_SHORT_DELAY = 20
     static GENERIC_LONGER_DELAY = 1000
     static GENERIC_MUCH_LONGER_DELAY = 5000
-    static PERIODIC_CHECK = 1000
+    static PERIODIC_CHECK = 1000              // on_change 'tick'
     static DRAG_PAUSE_OVER_BACKGROUND = 500
     static SLIDER_ACTIVE_DELAY = 300
     static UPDATE_EXCEPTION_WAITTIME = 10000
     static PAUSE_STACK_WAIT = 101
     static ACTIVE_ELEMENT_DELAY = 234
-    static ON_CHANGE_GAP = 200
-    static ON_WINDOW_RESIZE_GAP = 27
-    static GROUP_CHANGE_DELAY = 10
+    static ON_CHANGE_GAP = 200                 // must be less than PERIODIC_CHECK. How long to wait for gap in on_change calls
     static ALLOW_LAYOUT = 1000
 }
 
 export class Colors {
     static DARK_BACKGROUND = '#222222'
     static MENU_HIGHLIGHT = '#C08080'
+    static FAVORITES_FG = '#CC4444'
+    static FAVORITES_GROUP = '#223322'
+    static FOREGROUND = '#FFFFFF'
+    static OPTIONS = ['#FFFFFF', '#000000']
+    static UNSELECTED_DARKEN = 0.4
+    static HEADER_DARKEN = 0.666
 }
 
 export class Pixels {
@@ -93,6 +109,7 @@ export class Pixels {
 export class Texts {
     static ALL_GROUPS = "All"
     static UNGROUPED = "Ungrouped"
+    static FAVORITES = "❤"
     static CONTEXT_MENU = "Controller Panel"
     static MODE_TOOLTIP = {
         0 : "Click to bypass</br>ctrl&#8209;click to mute",
@@ -103,6 +120,15 @@ export class Texts {
     static REMOVE = "Remove from controllers"
     static EDIT_WV = "Edit widget visibility"
     static IMAGE_WIDGET_NAME = "image viewer"
+    static UNCONNECTED = "Unconnected Input"
+    static ACCEPT_UPSTREAM = "Show upstream images"
+    static REJECT_UPSTREAM = "Only show my images"
+    static STACK_ALWAYS = "Only show active tab"
+    static STACK_IF_NEEDED = "Show all tabs if space allows"
+}
+
+export const DisplayNames = {
+    "&#x2764;" : "&#x2764; Favorites"
 }
 
 export const BASE_PATH = "extensions/cg-controller"

images/top.png

@@ -1,6 +1,8 @@
 import { app } from "../../scripts/app.js"
+import { Timings } from "./constants.js"
 
 var context_menu
+var closable = false
 
 function autoclose(e) {
     if (context_menu?.root?.contains(e.target)) return
@@ -9,17 +11,30 @@ function autoclose(e) {
 
 export function close_context_menu() {
     context_menu?.close()
+    if (closable) {
+        Array.from(document.getElementsByClassName('litecontextmenu')).forEach((e)=>e.remove())
+    }
+    closable = false
     context_menu = null
 }
 
-function _open_context_menu(e, title, values) {
+export function register_closable() {
+    closable = true
+}
+
+function _open_context_menu(e, title, values, opts) {
     close_context_menu()
+    
     const options = {
         "title":title, 
         "event":e,
     }
+    if (opts) Object.assign(options, opts)
     context_menu = LiteGraph.ContextMenu(values, options, app.canvas.getCanvasWindow())
 }
-export function open_context_menu(e, title, values) { setTimeout(_open_context_menu, 10, e, title, values) }
+export function open_context_menu(e, title, values, opts, node) { 
+    if (node) app.canvas.current_node = node
+    setTimeout(_open_context_menu, Timings.GENERIC_SHORT_DELAY, e, title, values, opts) 
+}
 
 window.addEventListener('click',autoclose)