Merge pull request #331 from chrisgoringe/dev

Update main to 1.3.1

README.md

@@ -19,13 +19,11 @@ The Controller is toggled using a button in the top menu. When the sliders icon
 
 ![top](images/top.png)
 
-To create a Controller window, right click on the background and select "New Controller" from the menu (if it isn't there, check the Controller is active!).
+There will normally be one controller window created for you. If not, or to add more, 
+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".
 
-The button next to the Controller toggle is the refresh. Not all changes in the workflow are automatically picked up by the controller, 
-so sometimes after you make a change you will need to click this.
-
 ![menu](images/menu.png)
 
 When you include a node, it appears on the Controller panel, and it also gains a coloured dot in the top-right hand corner, 
@@ -34,15 +32,12 @@ so when you look at the workflow you can easily see which nodes are included.
 The node, with all standard widgets (we'll work to include the most popular custom widgets in future releases!) will now appear in the controller
 as a panel with the same title and colour as the node, underneath which are all the widgets. 
 
-|Controller|Node|
-|-|-|
-|![nodeblock](images/nodeblock.png)|![node](images/ksampler.png)|
-||Where is the control_before_generate? It's hidden, but you can change that in the settings|
+![widgets](images/widgets.png)
 
 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. 
 
-Numeric fields (like cfg in the image) a represented using an editable slider. 
+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.
@@ -69,39 +64,44 @@ doesn't bring up the menu any more). If you want to get rid of a tab, switch to
 
 ## The other icons
 
-The little lightning bolt icon is used to show/hide any nodes that were added as advanced controls. 
-If there are no advanced control, this icon won't be shown.
+![other icons](images/other_icons.png)
 
-The no-entry sign (circle with slash) is a placeholder - in a forthcoming release it will be
-used to toggle the group between active and bypassed.
+The play button indicates that all of the nodes in this group are currently active (not bypassed or muted).
+You can use it to bypass or mute a group. (Mute is refered to as 'never' in some places)
 
-In the top right there is a minimise button, and a close button which can be used to minimise or close
-this controller window. A minimised controller just shows the tab name and the 'X':
+|Icon|Meaning|Click will...|Ctrl-click will...|
+|-|-|-|-|
+|![0](images/0.png)|Group nodes active|Bypass group|Mute group|
+|![2](images/2.png)|Group nodes muted|Activate group|Activate group|
+|![4](images/4.png)|Group nodes bypassed|Activate group|Mute group|
+|![29](images/9.png)|Mixed state in group|Activate group|Activate group|
 
-![minimised](images/minimised.png)
+The little lightning bolt icon is used to show/hide any nodes that were added as advanced controls. 
+If there are no advanced control, this icon won't be shown.
 
-click the tab name to restore the controller to full size.
+Nodes which include an image also have a pin in the top right corner: ![pin](images/pin.png)
+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).
 
 ## Other things to explore
 
-### Rearrange the nodes
+### Multiple controllers
 
-<img src="images/drag.png" style="padding-right:8px;"/>
+Remember, you can add more controllers any time by right clicking on the canvas. You can also close controllers with the 'X',
+or minimise them with the '_'.
+
+### Rearrange the nodes
 
 You can rearrange the node panels in the controller by clicking on the node panel title bar and dragging it up or down.
 
 ### Collapse nodes
 
-<img src="images/collapse.png" style="padding-right:8px;"/>
-
-You can save space by collapsing the node panels, just like you can collapse nodes in the workflow. Just click the square
-at the left-hand side of the title bar, click it again to expand.
+You can save space by collapsing the node panels, just like you can collapse nodes in the workflow. 
+Click on the title bar without dragging to collapse, click it again to expand.
 
 ### Resize text and images
 
-<img src="images/resize.png" style="padding-right:8px;"/>
-
-Multiline text fields and image displays can be rescaled up or down using the resize handle in the bottom right hand corner of the widget.
+Multiline text fields and (unpinned) image displays can be rescaled up or down using the resize handle in the bottom right hand corner of the widget.
 As you drag the height is shown as an overlay, in case you want to make things the same size.
 
 ### The workflow is still there
@@ -112,11 +112,6 @@ The Controller is just a way of viewing it (and changing widgets values).
 Some changes that you make will not be immediately reflected in the Controller (for instance, if you change the colour of a node), 
 but you just need to click the refresh button (top right of the Controller) to bring it up to date.
 
-### Images
-
-The Controller works with Load, Save and Preview image nodes. The image preview nodes also show the interim images shown in the sampler, if you
-have that feature turned on.
-
 ### 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,
@@ -142,12 +137,12 @@ in future releases, probably starting with rgthree's Power Lora Loader.
 Future features will depend on community feedback, but some of the top contenders right now are...
 
 - Visual links between the controller and workflow (highlight node on hover)
-- Toggling bypass 
 - Selecting which widgets on a node to show
+- 'Snapping' controller windows to each other and the edges of the display
 
 For more details of what's under consideration, take a look at the [issues list](https://github.com/chrisgoringe/cg-controller/issues), 
 and feel free to add your ideas there, or 
-jump into the discussion [here](https://github.com/chrisgoringe/cg-controller/discussions/210).
+jump into the discussion [here](https://github.com/chrisgoringe/cg-controller/discussions).
 
 # Bug reports
 

__init__.py

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

js/_notes.md

@@ -0,0 +1,16 @@
+# Capturing changes
+
+|Change|code|detection|response|
+|-|-|-|-|
+|Node created|controller.js|nodeCreated|UpdateController|
+|Node destroyed|controller.js|node_Created adds to onRemove|UpdateController|
+|Input change|controller.js|beforeRegisterNodeDef|ControllerPanel.node_change|
+|Mode change|controller.js|beforeRegisterNodeDef|ControllerPanel.node_change|
+|Imgs changed|controller.js|nodeCreated adds to onDrawForeground|ImageManager.node_img_change|
+|Definitions refreshed|controller.js|refreshComboInNodes|UpdateController|
+|Dialog boxes|controller.js|setup, MutationObserver|UpdateController|
+|Focus mode|controller.js|setup, MutationObserver|ControllerPanel.focus_mode_changed|
+|read_only|controller.js|setup, hijack of read_only|UpdateController|
+|load|controller.js|afterConfigureGraph|ControllerPanel.new_workflow|
+|node inclusion|node_inclusion.js|cp_callback_submenu|UpdateController|
+|title, color, group membership|controller.js|UpdateController.on_change|

js/constants.js

@@ -6,6 +6,9 @@ export class SettingIds {
     static DEBUG_LEVEL = "Controller.debug.level"
     static FONT_SIZE = "Controller.options.font_size"
     static TOOLTIPS = "Controller.options.tooltips"
+    static DEFAULT_APPLY_TO_SIMILAR = "Controller.options.default_apply_to_similar"
+    static SHOW_SCROLLBARS = "Controller.options.show_scrollbars"
+    static SHOW_IN_FOCUS_MODE = "Controller.options.show_in_focus_mode"
 }
 
 export class InclusionOptions {
@@ -27,6 +30,8 @@ export class Timings { // ms
     static GROUP_SELECT_NOSELECT_WAIT = 5000
     static PAUSE_STACK_WAIT = 101
     static HOLDER_RESIZED_WAIT = 2000
+
+    static ON_CHANGE = 200
 }
 
 export class Colors {
@@ -38,6 +43,12 @@ export class Texts {
     static ALL_GROUPS = "All"
     static UNGROUPED = "Ungrouped"
     static CONTEXT_MENU = "Controller Panel"
+    static MODE_TOOLTIP = {
+        0 : "Click to bypass</br>ctrl&#8209;click to mute",
+        2 : "Group muted.</br>Click to activate",
+        4 : "Group bypassed.</br>Click to activate",
+        9 : "Some nodes muted or bypassed.</br>Click to activate"
+    }
 }
 
 export const BASE_PATH = "extensions/cg-controller"

js/controller.css

@@ -32,8 +32,11 @@
     --overlay-background:  #ffffff66;
     --overlay-foreground: #353535;
 
+    --mute-button-color:red;
     --bypass-button-color: #d179ff;
-    --bypass-overlay-color: #d179ff80;
+
+    --mute-overlay-color: #ffffff30;
+    --bypass-overlay-color: #d179ff30;
 
     --toggle-on: #8899aa;
     --toggle-off: #333333;
@@ -59,12 +62,21 @@
     border-radius: 4px;
     resize: both;
     z-index:999;
-    scrollbar-width: thin;
+    scrollbar-width: auto;
     scrollbar-color: var(--third-back-color) var(--main-back-color);
     pointer-events: all;
     user-select: none;
 }
 
+.controller.small_scrollbars {
+    scrollbar-width: thin;
+}
+
+.controller.hide_scrollbars {
+    scrollbar-width: none;
+    padding-right: 2px;
+}
+
 .controller.collapsed {
     overflow: clip;
     min-width: 0px;
@@ -93,8 +105,7 @@
     display: flex;
     border-bottom: 1px solid var(--third-back-color);
     padding: 0px 4px 0px 4px;
-    cursor: grab;
-    cursor: grab;
+    /*cursor: grab;*/
     padding: 4px 0px 0px 0px;
     border-bottom: 1px solid var(--main-back-color);
     margin-bottom: 2px;
@@ -200,15 +211,24 @@
     padding-top: 8px;
 }
 
-.header_button.none_bypassed {
+.header_button.mode {
 
 }
-.header_button.some_bypassed {
-
+.header_button.mode:before {
+    content: "\ea14";
 }
-.header_button.all_bypassed {
-    color: var(--bypass-button-color)
+.header_button.mode_2:before {
+    content: "\e90c";
+    color: var(--mute-button-color);
 }
+.header_button.mode_4:before {
+    content: "\ea10";
+    color: var(--bypass-button-color)  
+}
+.header_button.mode_9:before {
+    content: "\e959";
+}
+
 
 .clicked {
     color: var(--p-button-text-primary-color);
@@ -247,6 +267,13 @@
     border: 1px solid transparent;
 }
 
+.nodeblock.mode_2 {
+    opacity: 0.5;
+}
+.nodeblock.mode_4 {
+    opacity: 0.5;
+}
+
 .nodeblock.active {
     border-color: var(--active-color);
 }
@@ -264,21 +291,21 @@
     color: var(--mid-fore-color);
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
 }
 
 .nodeblock_titlebar_right .pi {
     font-size:1.25em;
 }
 
-.minimised .nodeblock_titlebar {
-    color: var(--muted-fore-color);
+.nodeblock_titlebar_left .pi {
+    font-size:0.95em;
 }
 
 .minimised .entry { display: none; }
 
 .minimisedot {
-    padding: 0px 4px 0px 0px;
+    padding: 0px 0px 0px 0px;
     cursor: url(collapse.png) 8 8, zoom-out;
     position: relative;
     font-size: 125%;
@@ -300,27 +327,15 @@
     padding-bottom: 0px;
 }
 
-.nodeblock.minimised .titlebar_nocolor {
-    /*border-bottom: 2px solid var(--third-back-color);
-    background-color: var(--third-back-color);
-    height: 16px;*/
-}
-
-.nodeblock.minimised .nodeblock_titlebar_right {
-    display:none;
-}
-
 .nodeblock_draghandle {
-    cursor: grab;
-    position: absolute;
-    height: 20px;
-    width: calc(var(--element_width) - 32px);
-    left: 16px;
+    /*cursor: grab;*/
+    flex-grow:1;
 }
 
 .nodeblock_title {
     text-align: left;
     pointer-events: none;
+    padding-left: 3px;
 }
 
 .nodeblock_image_panel {
@@ -346,15 +361,18 @@
     height:0px !important;
 }
 
-.nodeblock.bypassed {
-    opacity: 0.5;
+.nodeblock .mode_button:before {
+    content: "\ea14";
 }
 
-.bypass_overlay {
-    position:absolute;
-    width: 100%;
-    height: 100%;
-    background-color: var(--bypass-overlay-color);
+.nodeblock .mode_button_2:before {
+    content: "\e90c";
+    color: var(--mute-button-color);
+}
+
+.nodeblock .mode_button_4:before {
+    content: "\ea10";
+    color: var(--bypass-button-color)
 }
 
 /* Entry (widget) */
@@ -507,6 +525,10 @@ textarea.input {
     display:none !important;
 }
 
+i {
+    cursor: pointer;
+}
+
 .overlay {
     position: absolute;
     text-align: right;