Merge branch 'dev'

README.md

@@ -64,10 +64,14 @@ doesn't bring up the menu any more). If you want to get rid of a tab, switch to
 
 ## The other icons
 
+### On the controller
+
 ![other icons](images/other_icons.png)
 
 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)
+You can use it to bypass or mute a group. (Mute is refered to as 'never' in some places).
+
+Clicking the play button will bypass or unbypass the group, ctrl-clicking will mute or unmute.
 
 |Icon|Meaning|Click will...|Ctrl-click will...|
 |-|-|-|-|
@@ -79,12 +83,26 @@ You can use it to bypass or mute a group. (Mute is refered to as 'never' in some
 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.
 
+### On each nodeblock
+
+![other icons](images/nodeblock_icons.png)
+
+Each node can be independantly bypassed or muted using the arrow on the nodeblock.
+
 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
 
+### 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 
+the controller it will be highlighted in the workflow, and when you move your mouse over a group tab, the group will
+be highlighted.
+
+Control-click a tab and the workflow will zoom to show the group.
+
 ### Multiple controllers
 
 Remember, you can add more controllers any time by right clicking on the canvas. You can also close controllers with the 'X',
@@ -124,6 +142,10 @@ 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
+
+Controllers will snap to each other and move around together. To break them apart, move the controller on the right or bottom.
+
 ## Known Limitations
 
 ### Custom widgets
@@ -134,11 +156,11 @@ in future releases, probably starting with rgthree's Power Lora Loader.
 
 # The road ahead...
 
-Future features will depend on community feedback, but some of the top contenders right now are...
+Future features will depend on community feedback, but the aim for the 1.5 release is to include
 
-- Visual links between the controller and workflow (highlight node on hover)
-- Selecting which widgets on a node to show
-- 'Snapping' controller windows to each other and the edges of the display
+- Support for some popular custom node widgets
+- Support for batches of images
+- Open the mask editor directly from the controller on an image load node
 
 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 

__init__.py

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

js/constants.js

@@ -1,3 +1,6 @@
+
+export const VERSION = "1.4.1"
+
 export class SettingIds {
     static KEYBOARD_TOGGLE = "Controller.options.keyboard"
     static CONTROL_AFTER_GENERATE = "Controller.options.control_after_generate"
@@ -12,6 +15,44 @@ export class SettingIds {
     static SHOW_IN_FOCUS_MODE = "Controller.options.show_in_focus_mode"
 }
 
+export class SettingNames {
+    static KEYBOARD_TOGGLE = "Toggle controller visibility:"
+    static FONT_SIZE = "Controller font base size:"
+    static CONTROL_AFTER_GENERATE = "Show control after generate"
+    static TOOLTIPS = "Show tooltips"
+    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"
+}
+
+export class Generic {
+    static NEVER = "Never"
+    static ALWAYS = "Always"
+    static SHIFT = "When shift key pressed"
+    static CTRL = "When ctrl key pressed"
+    static OFF = "Off"
+    static THIN = "Thing"
+    static NORMAL = "Normal"
+    static D0 = "Only show errors"
+    static D1 = "Normal debugging"
+    static D2 = "Extra information"
+    static D3 = "Maximum information"
+}
+
+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 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"
+}
+
 export class InclusionOptions {
     static EXCLUDE   = "Don't include this node"
     static INCLUDE   = "Include this node"
@@ -28,6 +69,9 @@ export class Timings { // ms
     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 ALLOW_LAYOUT = 1000
 }
 
 export class Colors {
@@ -52,4 +96,5 @@ export class Texts {
     }
 }
 
-export const BASE_PATH = "extensions/cg-controller"
+export const BASE_PATH = "extensions/cg-controller"
+

js/controller.js

@@ -1,8 +1,7 @@
 import { app } from "../../scripts/app.js"
 import { api } from "../../scripts/api.js" 
 import { ControllerPanel } from "./controller_panel.js"
-//import { CGControllerNode } from "./controller_node.js"   
-import { create, defineProperty } from "./utilities.js"
+import { create, defineProperty, mouse_change } from "./utilities.js"
 import { add_controls } from "./controller_controls.js"
 import { add_control_panel_options, NodeInclusionManager,  } from "./node_inclusion.js"
 import { OnChangeController, UpdateController } from "./update_controller.js"
@@ -12,8 +11,9 @@ import { ImageManager } from "./image_manager.js"
 import { global_settings } from "./settings.js"
 import { NodeBlock } from "./nodeblock.js"
 import { FancySlider } from "./input_slider.js"
-import { SnapManager } from "./snap_manager.js"
+import { SnapManager, WindowResizeManager } from "./snap_manager.js"
 import { Highlighter } from "./highlighter.js"
+import { GroupManager } from "./groups.js"
 
 const MINIMUM_UE = 500006
 async function check_ue() {
@@ -32,8 +32,9 @@ async function check_ue() {
 
 function on_setup() {
     UpdateController.setup(ControllerPanel.redraw, ControllerPanel.can_refresh, ControllerPanel.node_change)
-    SnapManager.setup()
     NodeInclusionManager.node_change_callback = UpdateController.make_request
+    GroupManager.change_callback = ControllerPanel.on_group_details_change
+
     api.addEventListener('graphCleared', ControllerPanel.graph_cleared) 
 
     api.addEventListener('executed', ImageManager.on_executed)
@@ -44,13 +45,15 @@ function on_setup() {
     api.addEventListener('progress', ControllerPanel.on_progress)
     api.addEventListener('executing', ControllerPanel.on_executing)
 
-    window.addEventListener("resize", ControllerPanel.onWindowResize)
+    window.addEventListener("resize", WindowResizeManager.onWindowResize)
+    window.addEventListener('mousedown', (e)=>{mouse_change(true)})
     window.addEventListener('mouseup', (e)=>{
-        ControllerPanel.mouse_up_anywhere(e)
+        mouse_change(false)
+        ControllerPanel.handle_mouse_up(e)
         FancySlider.handle_mouse_up(e)
     })
     window.addEventListener('mousemove', (e)=>{
-        ControllerPanel.mouse_move_anywhere(e)
+        ControllerPanel.handle_mouse_move(e)
         FancySlider.handle_mouse_move(e)
     })
 

js/controller_controls.js

@@ -1,11 +1,11 @@
 import { app } from "../../scripts/app.js"
-import { SettingIds } from "./constants.js";
+import { SettingIds, SettingNames, Tooltips, Generic } from "./constants.js";
 import { ControllerPanel } from "./controller_panel.js";
 
 export function add_controls() {
     app.ui.settings.addSetting({
         id: SettingIds.KEYBOARD_TOGGLE,
-        name: "Toggle controller visibility:",
+        name: SettingNames.KEYBOARD_TOGGLE,
         type: "combo",
         options: [ {value:0, text:"Off"}, {value:"c", text:"c"}, {value:"C", text:"shift-C"}, 
                                           {value:"o", text:"o"}, {value:"O", text:"shift-O"}],
@@ -14,8 +14,8 @@ export function add_controls() {
 
     app.ui.settings.addSetting({
         id: SettingIds.FONT_SIZE,
-        name: "Controller font base size:",
-        tooltip: "All font sizes will be scaled relative to this value",
+        name: SettingNames.FONT_SIZE,
+        tooltip: Tooltips.FONT_SIZE,
         type: "slider",
         attrs: {
             min: 10,
@@ -26,70 +26,70 @@ export function add_controls() {
 
     app.ui.settings.addSetting({
         id: SettingIds.CONTROL_AFTER_GENERATE,
-        name: "Show control after generate",
-        tooltip: "Allow the control_after_generate widget to be shown",
+        name: SettingNames.CONTROL_AFTER_GENERATE,
+        tooltip: Tooltips.CONTROL_AFTER_GENERATE,
         type: "boolean",
         defaultValue: true
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.TOOLTIPS,
-        name: "Show tooltips",
-        tooltip: "Refresh controller after changing",
+        name: SettingNames.TOOLTIPS,   
+        tooltip: Tooltips.TOOLTIPS, 
         type: "boolean",
         defaultValue: true
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.DEFAULT_APPLY_TO_SIMILAR,
-        name: "Default apply to similar",
-        tooltip: "Default setting of 'apply to similar' checkbox",
+        name: SettingNames.DEFAULT_APPLY_TO_SIMILAR,
+        tooltip: Tooltips.DEFAULT_APPLY_TO_SIMILAR,
         type: "boolean",
         defaultValue: true        
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.SHOW_IN_FOCUS_MODE,
-        name: "Show controllers in focus mode",
+        name: SettingNames.SHOW_IN_FOCUS_MODE,
         type: "boolean",
         defaultValue: false        
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.SCROLL_MOVES_SLIDERS,
-        name: "Scrollwheel changes sliders",
+        name: SettingNames.SCROLL_MOVES_SLIDERS,
         type: "combo",
-        options: [ {value:"no", text:"Never"}, 
-                {value:"yes", text:"Always"}, 
-                {value:"shift", text:"When shift key pressed"},
-                {value:"ctrl", text:"When ctrl key pressed"},
+        options: [ {value:"no", text:Generic.NEVER}, 
+                {value:"yes", text:Generic.ALWAYS}, 
+                {value:"shift", text:Generic.SHIFT},
+                {value:"ctrl", text:Generic.CTRL},
              ],
         defaultValue: "yes",
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.SCROLL_REVERSED,
-        name: "Scrollwheel reversed for sliders",
-        tooltip: "Scroll up to reduce value",
+        name: SettingNames.SCROLL_REVERSED,
+        tooltip: Tooltips.SCROLL_REVERSED,
         type: "boolean",
         defaultValue: false           
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.SHOW_SCROLLBARS,
-        name: "Controller scrollbars",
-        tooltip: "If off, can still scroll with scrollwheel",
+        name: SettingNames.SHOW_SCROLLBARS,
+        tooltip: Tooltips.SHOW_SCROLLBARS,
         type: "combo",
-        options: [ {value:"no", text:"Off"}, 
-                {value:"thin", text:"Thin"}, 
-                {value:"full", text:"Normal"},
+        options: [ {value:"no", text:Generic.OFF}, 
+                {value:"thin", text:Generic.THIN}, 
+                {value:"full", text:Generic.NORMAL},
              ],
         defaultValue: "thin",     
     })
 
     app.ui.settings.addSetting({
         id: SettingIds.EDIT_SLIDERS,
-        name: "Edit slider limits",
+        name: SettingNames.EDIT_SLIDERS,
         type: "combo",
         options: [ 
                 {value:"shift", text:"shift-click"},
@@ -100,13 +100,13 @@ export function add_controls() {
 
     app.ui.settings.addSetting({
         id: SettingIds.DEBUG_LEVEL,
-        name: "Debug level",
-        tooltip: "Press f12 for js console",
+        name: SettingNames.DEBUG_LEVEL,
+        tooltip: Tooltips.DEBUG_LEVEL,
         type: "combo",
-        options: [ {value:0, text:"Critical only"}, 
-                   {value:1, text:"Important messages"}, 
-                   {value:2, text:"Extra information"}, 
-                                          {value:3, text:"Verbose"} ],
+        options: [ {value:0, text:Generic.D0}, 
+                   {value:1, text:Generic.D1}, 
+                   {value:2, text:Generic.D2}, 
+                   {value:3, text:Generic.D3} ],
         defaultValue: "1"
     })