Merge pull request #364 from chrisgoringe/dev

1.4
chrisgoringe · Nov 19, 2024 · 431cebe · 431cebe
2 parents 03ef54b + b288e42
commit 431cebe
Show file tree

Hide file tree

Showing 21 changed files with 758 additions and 218 deletions.
diff --git a/__init__.py b/__init__.py
@@ -1,4 +1,4 @@
-VERSION = "1.3.1"
+VERSION = "1.4"
 WEB_DIRECTORY = "./js"
 
 NODE_CLASS_MAPPINGS= {}

diff --git a/js/constants.js b/js/constants.js
@@ -2,6 +2,7 @@ export class SettingIds {
     static KEYBOARD_TOGGLE = "Controller.options.keyboard"
     static CONTROL_AFTER_GENERATE = "Controller.options.control_after_generate"
     static SCROLL_MOVES_SLIDERS = "Controller.options.scroll_moves_slider"
+    static SCROLL_REVERSED = "Controller.options.scroll_reversed_for_slider"
     static EDIT_SLIDERS = "Controller.options.edit_slider"
     static DEBUG_LEVEL = "Controller.debug.level"
     static FONT_SIZE = "Controller.options.font_size"
@@ -21,24 +22,24 @@ export class InclusionOptions {
 }
 
 export class Timings { // ms
-    static RESIZE_DELAY_BEFORE_REDRAW = 200
-    static SETTINGS_TRY_RELOAD = 1000
     static DRAG_PAUSE_OVER_BACKGROUND = 500
-    static END_HEIGHT_CHANGE_PAUSE = 10
-    static UPDATE_GENERAL_WAITTIME = 1234
+    static SLIDER_ACTIVE_DELAY = 300
     static UPDATE_EXCEPTION_WAITTIME = 10000
-    static GROUP_SELECT_NOSELECT_WAIT = 5000
     static PAUSE_STACK_WAIT = 101
-    static HOLDER_RESIZED_WAIT = 2000
-
-    static ON_CHANGE = 200
+    static ACTIVE_ELEMENT_DELAY = 234
+    static ON_CHANGE_GAP = 200
 }
 
 export class Colors {
     static DARK_BACKGROUND = '#222222'
     static MENU_HIGHLIGHT = '#C08080'
 }
 
+export class Pixels {
+    static BORDER_WIDTH = 4
+    static FOOTER = 4
+}
+
 export class Texts {
     static ALL_GROUPS = "All"
     static UNGROUPED = "Ungrouped"

diff --git a/js/controller.css b/js/controller.css
@@ -12,10 +12,14 @@
     border-radius: 6px;
 }
 
-.showing {
+.controller_menu_button.litup {
     color: var(--p-button-text-primary-color);
 }
 
+.hide .hideable {
+    display: none;
+}
+
 .controller {
     --font-size: 12px;
     --element_width: 100%;
@@ -25,42 +29,42 @@
     --muted-fore-color: #999999;
 
     --deep-back-color: #000000;
-    --main-back-color: #1c1c1cee;
+    --main-back-color: #1c1c1cfa;
     --second-back-color: #222222;
     --third-back-color:  #353535;
 
     --overlay-background:  #ffffff66;
     --overlay-foreground: #353535;
 
-    --mute-button-color:red;
+    --mute-button-color:#ff6e6e;
     --bypass-button-color: #d179ff;
+    --mixed-button-color:#99aa99;
 
     --mute-overlay-color: #ffffff30;
     --bypass-overlay-color: #d179ff30;
 
     --toggle-on: #8899aa;
     --toggle-off: #333333;
 
-    --main-border-color: rgb(83 83 83);
+    --main-border-color: rgb(53 53 53);
 
     --progress-color: green;
     --active-color: green;
-
-
 
+    --border_width: 4px;
+
     font-size: var(--font-size);
     height:100%;
     min-height: 42px;
     background: var(--main-back-color);
-    padding: 0 0 0 2px;
+    padding: 0 4px 0 4px;
     position: absolute;
     min-width: 130px;
     overflow: clip scroll;
-    border-width: 4px;
+    border-width: var(--border_width);
     border-style: solid;
     border-color: var(--main-border-color);
     border-radius: 4px;
-    resize: both;
     z-index:999;
     scrollbar-width: auto;
     scrollbar-color: var(--third-back-color) var(--main-back-color);
@@ -74,7 +78,6 @@
 
 .controller.hide_scrollbars {
     scrollbar-width: none;
-    padding-right: 2px;
 }
 
 .controller.collapsed {
@@ -83,6 +86,22 @@
     padding: 0px;
 }
 
+.gutter_overlay {
+    position: absolute;
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index:999;
+}
+
+.gutter_overlap {
+    position:absolute;
+    pointer-events: none;
+    background-color: #999999;
+    border-radius: 2px;
+}
+
 
 /* Header */
 
@@ -94,7 +113,7 @@
     display: flex;
     width: var(--element_width);
     justify-content: space-between;
-    margin: 0px;
+    margin: 0px 0px 4px 0px;
     align-items: center;
     flex-wrap: wrap;
     z-index:1;
@@ -118,6 +137,7 @@
 
 .subheader2 {
     padding-top:2px;
+    margin-bottom:0px;
 }
 
 .subheader .left {
@@ -193,6 +213,8 @@
     flex-shrink: 0;
 }
 
+
+
 .header_button {
     cursor: pointer;
     font-size: 12pt;
@@ -227,6 +249,7 @@
 }
 .header_button.mode_9:before {
     content: "\e959";
+    color: var(--mixed-button-color);
 }
 
 
@@ -263,7 +286,7 @@
     width: var(--element_width);
     min-height: 40px;
     display:block;
-    padding-bottom: 4px;
+    padding-bottom: 3px;
     border: 1px solid transparent;
 }
 
@@ -287,7 +310,7 @@
 .nodeblock_titlebar {
     font-size: 80%;
     display: block;
-    padding: 1px 3px 2px 2px;
+    padding: 2px 3px 2px 2px;
     color: var(--mid-fore-color);
     display: flex;
     justify-content: space-between;
@@ -296,10 +319,13 @@
 
 .nodeblock_titlebar_right .pi {
     font-size:1.25em;
+    vertical-align: middle;
 }
 
 .nodeblock_titlebar_left .pi {
-    font-size:0.95em;
+    font-size:1.05em;
+    top: 0.05em;
+    position: relative;
 }
 
 .minimised .entry { display: none; }
@@ -335,7 +361,13 @@
 .nodeblock_title {
     text-align: left;
     pointer-events: none;
-    padding-left: 3px;
+    padding-left: 4px;
+    position: relative;
+    bottom: 1px;
+}
+.nodeblock_title::after {
+    content: " ";
+    font-size: 1.25em;
 }
 
 .nodeblock_image_panel {
@@ -361,6 +393,8 @@
     height:0px !important;
 }
 
+
+
 .nodeblock .mode_button:before {
     content: "\ea14";
 }
@@ -379,7 +413,7 @@
 
 .entry {
     position: relative;
-    padding:4px 4px 0px 4px;
+    padding:4px 3px 0px 3px;
 }
 
 .entry_label {
@@ -390,7 +424,7 @@
     background: var(--second-back-color);
     color: var(--mid-fore-color);
     text-align: left;
-    left: 8px;
+    left: 6px;
     font-size: 70%;
     pointer-events: none;
     width: calc(var(--element_width) - 40px);
@@ -435,6 +469,7 @@ textarea.input {
     font-size: 85%;
     text-align: left;
     margin-bottom: -4px;
+    padding: 3px 4px 3px 4px;
 }
 
 .input option {
@@ -580,4 +615,14 @@ i {
   /* Show the tooltip text when you mouse over the tooltip container */
   .tooltip:hover .tooltiptext {
     visibility: visible;
-  }
+  }
+
+.read_only .mode_button {
+    opacity: 0.5;
+    cursor: unset;
+}
+
+.read_only .header_button {
+    opacity: 0.5;
+    cursor: unset;
+}
diff --git a/js/controller.js b/js/controller.js
@@ -11,6 +11,9 @@ import { BASE_PATH } from "./constants.js"
 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 { Highlighter } from "./highlighter.js"
 
 const MINIMUM_UE = 500006
 async function check_ue() {
@@ -28,7 +31,8 @@ async function check_ue() {
 }
 
 function on_setup() {
-    UpdateController.setup(ControllerPanel.redraw, ControllerPanel.can_refresh, ControllerPanel.node_change)  
+    UpdateController.setup(ControllerPanel.redraw, ControllerPanel.can_refresh, ControllerPanel.node_change)
+    SnapManager.setup()
     NodeInclusionManager.node_change_callback = UpdateController.make_request
     api.addEventListener('graphCleared', ControllerPanel.graph_cleared) 
 
@@ -41,8 +45,14 @@ function on_setup() {
     api.addEventListener('executing', ControllerPanel.on_executing)
 
     window.addEventListener("resize", ControllerPanel.onWindowResize)
-    window.addEventListener('mouseup', ControllerPanel.mouse_up_anywhere)
-    window.addEventListener('mousemove', ControllerPanel.mouse_move_anywhere)
+    window.addEventListener('mouseup', (e)=>{
+        ControllerPanel.mouse_up_anywhere(e)
+        FancySlider.handle_mouse_up(e)
+    })
+    window.addEventListener('mousemove', (e)=>{
+        ControllerPanel.mouse_move_anywhere(e)
+        FancySlider.handle_mouse_move(e)
+    })
 
 
     const original_getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions;
@@ -92,12 +102,12 @@ app.registerExtension({
         // Allow our elements to do any setup they want
         try {
         on_setup()
-        } catch (e) { Debug.error("on setup");console.error(e) }
+        } catch (e) { Debug.error("on setup", e) }
 
         // add to the canvas menu, and keyboard shortcuts
         try {
         add_controls()
-        } catch (e) { Debug.error("add controls");console.error(e) }
+        } catch (e) { Debug.error("add controls", e) }
 
         try {
             const on_change = app.graph.on_change
@@ -106,20 +116,23 @@ app.registerExtension({
                     on_change?.apply(this,arguments)
                     OnChangeController.on_change()
                 } catch (e) {
-                    Debug.error("*** EXCEPTION HANDLING on_change")
-                    console.error(e)
+                    Debug.error("on==_change", e)
                 }
             }
             Debug.trivia("*** in setup, ADDED on_change")
         } catch (e) {
-            Debug.error("*** EXCEPTION ADDING on_change")
+            Debug.error("ADDING on_change", e)
             console.error(e)
         }
 
         const draw = app.canvas.onDrawForeground;
         app.canvas.onDrawForeground = function(ctx, visible) {
             draw?.apply(this,arguments);
-            NodeBlock.on_draw(ctx);
+            try {
+                Highlighter.on_draw(ctx);
+            } catch (e) {
+                Debug.error('onDrawForeground', e)
+            }
         }
 
         /* look for dialog boxes appearing or disappearing */

diff --git a/js/controller_controls.js b/js/controller_controls.js
@@ -67,6 +67,14 @@ export function add_controls() {
         defaultValue: "yes",
     })
 
+    app.ui.settings.addSetting({
+        id: SettingIds.SCROLL_REVERSED,
+        name: "Scrollwheel reversed for sliders",
+        tooltip: "Scroll up to reduce value",
+        type: "boolean",
+        defaultValue: false           
+    })
+
     app.ui.settings.addSetting({
         id: SettingIds.SHOW_SCROLLBARS,
         name: "Controller scrollbars",