From cb8c35c760351fcd4cecc3c9cd200a922662f8ee Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:21:17 +0000 Subject: [PATCH 1/7] Preventing slider from rendering outside its designated area if value it is based on is outside the expected range. --- src/litegraph.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/litegraph.js b/src/litegraph.js index bc1a34e86..4effe006e 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9732,6 +9732,8 @@ LGraphNode.prototype.executeAction = function(action) ctx.fillRect(margin, y, widget_width - margin * 2, H); var range = w.options.max - w.options.min; var nvalue = (w.value - w.options.min) / range; + if(nvalue < 0.0) nvalue = 0.0; + if(nvalue > 1.0) nvalue = 1.0; ctx.fillStyle = active_widget == w ? "#89A" : "#678"; ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H); if(show_text && !w.disabled) From 66e899643c25f02eaf5b09ba9d9b85e58d3565a8 Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:26:22 +0000 Subject: [PATCH 2/7] Made slider colours configurable --- src/litegraph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 4effe006e..53ebfc772 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9734,13 +9734,13 @@ LGraphNode.prototype.executeAction = function(action) var nvalue = (w.value - w.options.min) / range; if(nvalue < 0.0) nvalue = 0.0; if(nvalue > 1.0) nvalue = 1.0; - ctx.fillStyle = active_widget == w ? "#89A" : "#678"; + ctx.fillStyle = w.hasOwnProperty("slider_color") ? w.slider_color : (active_widget == w ? "#89A" : "#678"); ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H); if(show_text && !w.disabled) ctx.strokeRect(margin, y, widget_width - margin * 2, H); if (w.marker) { var marker_nvalue = (w.marker - w.options.min) / range; - ctx.fillStyle = "#AA9"; + ctx.fillStyle = w.hasOwnProperty("marker_color") ? w.marker_color : "#AA9"; ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H ); } if (show_text) { From b3c8427232199b3531883047623ae818b1955e7b Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:27:09 +0000 Subject: [PATCH 3/7] Make the marker also stay within the designated area --- src/litegraph.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/litegraph.js b/src/litegraph.js index 53ebfc772..9bdb5720f 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9740,6 +9740,8 @@ LGraphNode.prototype.executeAction = function(action) ctx.strokeRect(margin, y, widget_width - margin * 2, H); if (w.marker) { var marker_nvalue = (w.marker - w.options.min) / range; + if(marker_nvalue < 0.0) marker_nvalue = 0.0; + if(marker_nvalue > 1.0) marker_nvalue = 1.0; ctx.fillStyle = w.hasOwnProperty("marker_color") ? w.marker_color : "#AA9"; ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H ); } From f55bbacf02ed6827d029879d8c1875811ce1e17e Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:30:49 +0000 Subject: [PATCH 4/7] Made it possible for sliders to be read only --- src/litegraph.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/litegraph.js b/src/litegraph.js index 9bdb5720f..46924ca43 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9909,6 +9909,7 @@ LGraphNode.prototype.executeAction = function(action) case "slider": var range = w.options.max - w.options.min; var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1); + if(w.readonly) break; w.value = w.options.min + (w.options.max - w.options.min) * nvalue; if (w.callback) { setTimeout(function() { From d2c46d3e6dc413c3c111bc38d418fccc20570ed4 Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:41:07 +0000 Subject: [PATCH 5/7] Moved properties to the right place. --- src/litegraph.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 46924ca43..b5c95989d 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9734,7 +9734,7 @@ LGraphNode.prototype.executeAction = function(action) var nvalue = (w.value - w.options.min) / range; if(nvalue < 0.0) nvalue = 0.0; if(nvalue > 1.0) nvalue = 1.0; - ctx.fillStyle = w.hasOwnProperty("slider_color") ? w.slider_color : (active_widget == w ? "#89A" : "#678"); + ctx.fillStyle = w.options.hasOwnProperty("slider_color") ? w.slider_color : (active_widget == w ? "#89A" : "#678"); ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H); if(show_text && !w.disabled) ctx.strokeRect(margin, y, widget_width - margin * 2, H); @@ -9742,7 +9742,7 @@ LGraphNode.prototype.executeAction = function(action) var marker_nvalue = (w.marker - w.options.min) / range; if(marker_nvalue < 0.0) marker_nvalue = 0.0; if(marker_nvalue > 1.0) marker_nvalue = 1.0; - ctx.fillStyle = w.hasOwnProperty("marker_color") ? w.marker_color : "#AA9"; + ctx.fillStyle = w.options.hasOwnProperty("marker_color") ? w.marker_color : "#AA9"; ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H ); } if (show_text) { @@ -9909,7 +9909,7 @@ LGraphNode.prototype.executeAction = function(action) case "slider": var range = w.options.max - w.options.min; var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1); - if(w.readonly) break; + if(w.options.readonly) break; w.value = w.options.min + (w.options.max - w.options.min) * nvalue; if (w.callback) { setTimeout(function() { From 7675741f1acc0d0c0c90a6df2cefe4cc89f18c50 Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:42:01 +0000 Subject: [PATCH 6/7] renamed option --- src/litegraph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/litegraph.js b/src/litegraph.js index b5c95989d..e352e48ab 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9909,7 +9909,7 @@ LGraphNode.prototype.executeAction = function(action) case "slider": var range = w.options.max - w.options.min; var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1); - if(w.options.readonly) break; + if(w.options.read_only) break; w.value = w.options.min + (w.options.max - w.options.min) * nvalue; if (w.callback) { setTimeout(function() { From bc6c4948d826bbdbb9b872d886a16380051fb9a0 Mon Sep 17 00:00:00 2001 From: Baldur Gislason Date: Wed, 5 Apr 2023 15:46:23 +0000 Subject: [PATCH 7/7] Moving options --- src/litegraph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index e352e48ab..4538d7dd9 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -9734,7 +9734,7 @@ LGraphNode.prototype.executeAction = function(action) var nvalue = (w.value - w.options.min) / range; if(nvalue < 0.0) nvalue = 0.0; if(nvalue > 1.0) nvalue = 1.0; - ctx.fillStyle = w.options.hasOwnProperty("slider_color") ? w.slider_color : (active_widget == w ? "#89A" : "#678"); + ctx.fillStyle = w.options.hasOwnProperty("slider_color") ? w.options.slider_color : (active_widget == w ? "#89A" : "#678"); ctx.fillRect(margin, y, nvalue * (widget_width - margin * 2), H); if(show_text && !w.disabled) ctx.strokeRect(margin, y, widget_width - margin * 2, H); @@ -9742,7 +9742,7 @@ LGraphNode.prototype.executeAction = function(action) var marker_nvalue = (w.marker - w.options.min) / range; if(marker_nvalue < 0.0) marker_nvalue = 0.0; if(marker_nvalue > 1.0) marker_nvalue = 1.0; - ctx.fillStyle = w.options.hasOwnProperty("marker_color") ? w.marker_color : "#AA9"; + ctx.fillStyle = w.options.hasOwnProperty("marker_color") ? w.options.marker_color : "#AA9"; ctx.fillRect( margin + marker_nvalue * (widget_width - margin * 2), y, 2, H ); } if (show_text) {