@ -119,7 +119,15 @@ async function install_checked_custom_node(grid_rows, target_i, caller, mode) {
if ( ! grid _rows [ i ] . checkbox . checked && i != target _i )
if ( ! grid _rows [ i ] . checkbox . checked && i != target _i )
continue ;
continue ;
let target = grid _rows [ i ] . data ;
var target ;
if ( grid _rows [ i ] . data . custom _node ) {
target = grid _rows [ i ] . data . custom _node ;
}
else {
target = grid _rows [ i ] . data ;
}
caller . startInstall ( target ) ;
caller . startInstall ( target ) ;
try {
try {
@ -491,8 +499,13 @@ class CustomNodesInstaller extends ComfyDialog {
// uncheck all
// uncheck all
for ( let i in this . grid _rows ) {
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . checked = false ;
checkbox . checked = false ;
checkbox . disabled = false ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
}
this . checkbox _all . disabled = true ;
this . checkbox _all . disabled = true ;
@ -507,7 +520,15 @@ class CustomNodesInstaller extends ComfyDialog {
let self = this ;
let self = this ;
var thead = document . createElement ( 'thead' ) ;
var tbody = document . createElement ( 'tbody' ) ;
var headerRow = document . createElement ( 'tr' ) ;
var headerRow = document . createElement ( 'tr' ) ;
thead . style . position = "sticky" ;
thead . style . top = "0px" ;
thead . style . borderCollapse = "collapse" ;
thead . style . tableLayout = "fixed" ;
var header0 = document . createElement ( 'th' ) ;
var header0 = document . createElement ( 'th' ) ;
header0 . style . width = "20px" ;
header0 . style . width = "20px" ;
this . checkbox _all = $el ( "input" , { type : 'checkbox' , id : 'check_all' } , [ ] ) ;
this . checkbox _all = $el ( "input" , { type : 'checkbox' , id : 'check_all' } , [ ] ) ;
@ -532,6 +553,21 @@ class CustomNodesInstaller extends ComfyDialog {
var header5 = document . createElement ( 'th' ) ;
var header5 = document . createElement ( 'th' ) ;
header5 . innerHTML = 'Install' ;
header5 . innerHTML = 'Install' ;
header5 . style . width = "130px" ;
header5 . style . width = "130px" ;
header0 . style . position = "sticky" ;
header0 . style . top = "0px" ;
header1 . style . position = "sticky" ;
header1 . style . top = "0px" ;
header2 . style . position = "sticky" ;
header2 . style . top = "0px" ;
header3 . style . position = "sticky" ;
header3 . style . top = "0px" ;
header4 . style . position = "sticky" ;
header4 . style . top = "0px" ;
header5 . style . position = "sticky" ;
header5 . style . top = "0px" ;
thead . appendChild ( headerRow ) ;
headerRow . appendChild ( header0 ) ;
headerRow . appendChild ( header0 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header2 ) ;
headerRow . appendChild ( header2 ) ;
@ -544,7 +580,9 @@ class CustomNodesInstaller extends ComfyDialog {
headerRow . style . textAlign = "center" ;
headerRow . style . textAlign = "center" ;
headerRow . style . width = "100%" ;
headerRow . style . width = "100%" ;
headerRow . style . padding = "0" ;
headerRow . style . padding = "0" ;
grid . appendChild ( headerRow ) ;
grid . appendChild ( thead ) ;
grid . appendChild ( tbody ) ;
if ( this . data )
if ( this . data )
for ( var i = 0 ; i < this . data . length ; i ++ ) {
for ( var i = 0 ; i < this . data . length ; i ++ ) {
@ -672,7 +710,7 @@ class CustomNodesInstaller extends ComfyDialog {
dataRow . appendChild ( data3 ) ;
dataRow . appendChild ( data3 ) ;
dataRow . appendChild ( data4 ) ;
dataRow . appendChild ( data4 ) ;
dataRow . appendChild ( data5 ) ;
dataRow . appendChild ( data5 ) ;
grid . appendChild ( dataRow ) ;
tbody . appendChild ( dataRow ) ;
let buttons = [ ] ;
let buttons = [ ] ;
if ( installBtn ) {
if ( installBtn ) {
@ -690,12 +728,11 @@ class CustomNodesInstaller extends ComfyDialog {
const panel = document . createElement ( 'div' ) ;
const panel = document . createElement ( 'div' ) ;
panel . style . width = "100%" ;
panel . style . width = "100%" ;
panel . style . overflowY = "scroll" ;
panel . appendChild ( grid ) ;
panel . appendChild ( grid ) ;
function handleResize ( ) {
function handleResize ( ) {
const parentHeight = self . element . clientHeight ;
const parentHeight = self . element . clientHeight ;
const gridHeight = parentHeight - 4 00;
const gridHeight = parentHeight - 2 00;
grid . style . height = gridHeight + "px" ;
grid . style . height = gridHeight + "px" ;
}
}
@ -704,7 +741,8 @@ class CustomNodesInstaller extends ComfyDialog {
grid . style . position = "relative" ;
grid . style . position = "relative" ;
grid . style . display = "inline-block" ;
grid . style . display = "inline-block" ;
grid . style . width = "100%" ;
grid . style . width = "100%" ;
grid . style . marginBottom = "200px" ;
grid . style . height = "100%" ;
grid . style . overflowY = "scroll" ;
this . element . style . height = "85%" ;
this . element . style . height = "85%" ;
this . element . style . width = "80%" ;
this . element . style . width = "80%" ;
this . element . appendChild ( panel ) ;
this . element . appendChild ( panel ) ;
@ -843,7 +881,9 @@ class AlternativesInstaller extends ComfyDialog {
const self = AlternativesInstaller . instance ;
const self = AlternativesInstaller . instance ;
self . updateMessage ( ` <BR><font color="green">Installing ' ${ target . title } '</font> ` ) ;
self . updateMessage ( ` <BR><font color="green">Installing ' ${ target . title } '</font> ` ) ;
}
disableButtons ( ) {
for ( let i in self . install _buttons ) {
for ( let i in self . install _buttons ) {
self . install _buttons [ i ] . disabled = true ;
self . install _buttons [ i ] . disabled = true ;
self . install _buttons [ i ] . style . backgroundColor = 'gray' ;
self . install _buttons [ i ] . style . backgroundColor = 'gray' ;
@ -912,11 +952,115 @@ class AlternativesInstaller extends ComfyDialog {
this . message _box . innerHTML = msg ;
this . message _box . innerHTML = msg ;
}
}
invalidate _checks ( is _checked , install _state ) {
if ( is _checked ) {
for ( let i in this . grid _rows ) {
let data = this . grid _rows [ i ] . data ;
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = data . custom _node . installed != install _state ;
if ( checkbox . disabled ) {
for ( let j in buttons ) {
buttons [ j ] . style . display = 'none' ;
}
}
else {
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
}
this . checkbox _all . disabled = false ;
}
else {
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . check )
return ; // do nothing
}
// every checkbox is unchecked -> enable all checkbox
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
}
}
check _all ( is _checked ) {
if ( is _checked ) {
// lookup first checked item's state
let check _state = null ;
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( checkbox . checked ) {
check _state = this . grid _rows [ i ] . data . custom _node . installed ;
}
}
if ( check _state == null )
return ;
// check only same state items
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
if ( this . grid _rows [ i ] . data . custom _node . installed == check _state )
checkbox . checked = true ;
}
}
else {
// uncheck all
for ( let i in this . grid _rows ) {
let checkbox = this . grid _rows [ i ] . checkbox ;
let buttons = this . grid _rows [ i ] . buttons ;
checkbox . checked = false ;
checkbox . disabled = false ;
for ( let j in buttons ) {
buttons [ j ] . style . display = null ;
}
}
this . checkbox _all . disabled = true ;
}
}
async createGrid ( ) {
async createGrid ( ) {
var grid = document . createElement ( 'table' ) ;
var grid = document . createElement ( 'table' ) ;
grid . setAttribute ( 'id' , 'alternatives-grid' ) ;
grid . setAttribute ( 'id' , 'alternatives-grid' ) ;
this . grid _rows = { } ;
let self = this ;
var thead = document . createElement ( 'thead' ) ;
var tbody = document . createElement ( 'tbody' ) ;
var headerRow = document . createElement ( 'tr' ) ;
var headerRow = document . createElement ( 'tr' ) ;
thead . style . position = "sticky" ;
thead . style . top = "0px" ;
thead . style . borderCollapse = "collapse" ;
thead . style . tableLayout = "fixed" ;
var header0 = document . createElement ( 'th' ) ;
header0 . style . width = "20px" ;
this . checkbox _all = $el ( "input" , { type : 'checkbox' , id : 'check_all' } , [ ] ) ;
header0 . appendChild ( this . checkbox _all ) ;
this . checkbox _all . checked = false ;
this . checkbox _all . disabled = true ;
this . checkbox _all . addEventListener ( 'change' , function ( ) { self . check _all . call ( self , self . checkbox _all . checked ) ; } ) ;
var header1 = document . createElement ( 'th' ) ;
var header1 = document . createElement ( 'th' ) ;
header1 . innerHTML = ' ID ' ;
header1 . innerHTML = ' ID ' ;
header1 . style . width = "20px" ;
header1 . style . width = "20px" ;
@ -935,6 +1079,20 @@ class AlternativesInstaller extends ComfyDialog {
var header6 = document . createElement ( 'th' ) ;
var header6 = document . createElement ( 'th' ) ;
header6 . innerHTML = 'Install' ;
header6 . innerHTML = 'Install' ;
header6 . style . width = "130px" ;
header6 . style . width = "130px" ;
header1 . style . position = "sticky" ;
header1 . style . top = "0px" ;
header2 . style . position = "sticky" ;
header2 . style . top = "0px" ;
header3 . style . position = "sticky" ;
header3 . style . top = "0px" ;
header4 . style . position = "sticky" ;
header4 . style . top = "0px" ;
header5 . style . position = "sticky" ;
header5 . style . top = "0px" ;
thead . appendChild ( headerRow ) ;
headerRow . appendChild ( header0 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header2 ) ;
headerRow . appendChild ( header2 ) ;
headerRow . appendChild ( header3 ) ;
headerRow . appendChild ( header3 ) ;
@ -947,14 +1105,21 @@ class AlternativesInstaller extends ComfyDialog {
headerRow . style . textAlign = "center" ;
headerRow . style . textAlign = "center" ;
headerRow . style . width = "100%" ;
headerRow . style . width = "100%" ;
headerRow . style . padding = "0" ;
headerRow . style . padding = "0" ;
grid . appendChild ( headerRow ) ;
this . grid _rows = { } ;
grid . appendChild ( thead ) ;
grid . appendChild ( tbody ) ;
if ( this . data )
if ( this . data )
for ( var i = 0 ; i < this . data . length ; i ++ ) {
for ( var i = 0 ; i < this . data . length ; i ++ ) {
const data = this . data [ i ] ;
const data = this . data [ i ] ;
var dataRow = document . createElement ( 'tr' ) ;
var dataRow = document . createElement ( 'tr' ) ;
let data0 = document . createElement ( 'td' ) ;
let checkbox = $el ( "input" , { type : 'checkbox' , id : ` check_ ${ i } ` } , [ ] ) ;
data0 . appendChild ( checkbox ) ;
checkbox . checked = false ;
checkbox . addEventListener ( 'change' , function ( ) { self . invalidate _checks . call ( self , checkbox . checked , data . custom _node ? . installed ) ; } ) ;
var data1 = document . createElement ( 'td' ) ;
var data1 = document . createElement ( 'td' ) ;
data1 . style . textAlign = "center" ;
data1 . style . textAlign = "center" ;
data1 . innerHTML = i + 1 ;
data1 . innerHTML = i + 1 ;
@ -975,11 +1140,11 @@ class AlternativesInstaller extends ComfyDialog {
var data6 = document . createElement ( 'td' ) ;
var data6 = document . createElement ( 'td' ) ;
data6 . style . textAlign = "center" ;
data6 . style . textAlign = "center" ;
if ( data . custom _node ) {
var installBtn = document . createElement ( 'button' ) ;
var installBtn = document . createElement ( 'button' ) ;
var installBtn2 = null ;
var installBtn2 = null ;
var installBtn3 = null ;
var installBtn3 = null ;
if ( data . custom _node ) {
this . install _buttons . push ( installBtn ) ;
this . install _buttons . push ( installBtn ) ;
switch ( data . custom _node . installed ) {
switch ( data . custom _node . installed ) {
@ -1033,10 +1198,11 @@ class AlternativesInstaller extends ComfyDialog {
installBtn . style . color = 'white' ;
installBtn . style . color = 'white' ;
}
}
let j = i ;
if ( installBtn2 != null ) {
if ( installBtn2 != null ) {
installBtn2 . style . width = "120px" ;
installBtn2 . style . width = "120px" ;
installBtn2 . addEventListener ( 'click' , function ( ) {
installBtn2 . addEventListener ( 'click' , function ( ) {
install _custom _node ( data . custom _node , AlternativesInstaller . instance , 'update' ) ;
install _checked _c ustom _node ( self . grid _rows , j , AlternativesInstaller . instance , 'update' ) ;
} ) ;
} ) ;
data6 . appendChild ( installBtn2 ) ;
data6 . appendChild ( installBtn2 ) ;
@ -1045,7 +1211,7 @@ class AlternativesInstaller extends ComfyDialog {
if ( installBtn3 != null ) {
if ( installBtn3 != null ) {
installBtn3 . style . width = "120px" ;
installBtn3 . style . width = "120px" ;
installBtn3 . addEventListener ( 'click' , function ( ) {
installBtn3 . addEventListener ( 'click' , function ( ) {
install _custom _node ( data , CustomNod esInstaller. instance , 'toggle_active' ) ;
install _checked _c ustom _node ( self . grid _rows , j , Alternativ esInstaller. instance , 'toggle_active' ) ;
} ) ;
} ) ;
data6 . appendChild ( installBtn3 ) ;
data6 . appendChild ( installBtn3 ) ;
@ -1056,11 +1222,11 @@ class AlternativesInstaller extends ComfyDialog {
installBtn . addEventListener ( 'click' , function ( ) {
installBtn . addEventListener ( 'click' , function ( ) {
if ( this . innerHTML == 'Uninstall' ) {
if ( this . innerHTML == 'Uninstall' ) {
if ( confirm ( ` Are you sure uninstall ${ data . title } ? ` ) ) {
if ( confirm ( ` Are you sure uninstall ${ data . title } ? ` ) ) {
install _custom _node ( data . custom _node , AlternativesInstaller . instance , 'uninstall' ) ;
install _checked _c ustom _node ( self . grid _rows , j , AlternativesInstaller . instance , 'uninstall' ) ;
}
}
}
}
else {
else {
install _custom _node ( data . custom _node , AlternativesInstaller . instance , 'install' ) ;
install _checked _c ustom _node ( self . grid _rows , j , AlternativesInstaller . instance , 'install' ) ;
}
}
} ) ;
} ) ;
@ -1071,26 +1237,36 @@ class AlternativesInstaller extends ComfyDialog {
dataRow . style . color = "var(--fg-color)" ;
dataRow . style . color = "var(--fg-color)" ;
dataRow . style . textAlign = "left" ;
dataRow . style . textAlign = "left" ;
dataRow . appendChild ( data0 ) ;
dataRow . appendChild ( data1 ) ;
dataRow . appendChild ( data1 ) ;
dataRow . appendChild ( data2 ) ;
dataRow . appendChild ( data2 ) ;
dataRow . appendChild ( data3 ) ;
dataRow . appendChild ( data3 ) ;
dataRow . appendChild ( data4 ) ;
dataRow . appendChild ( data4 ) ;
dataRow . appendChild ( data5 ) ;
dataRow . appendChild ( data5 ) ;
dataRow . appendChild ( data6 ) ;
dataRow . appendChild ( data6 ) ;
grid . appendChild ( dataRow ) ;
tbody . appendChild ( dataRow ) ;
this . grid _rows [ i ] = { data : data , control : dataRow } ;
let buttons = [ ] ;
if ( installBtn ) {
buttons . push ( installBtn ) ;
}
if ( installBtn2 ) {
buttons . push ( installBtn2 ) ;
}
if ( installBtn3 ) {
buttons . push ( installBtn3 ) ;
}
this . grid _rows [ i ] = { data : data , buttons : buttons , checkbox : checkbox , control : dataRow } ;
}
}
const panel = document . createElement ( 'div' ) ;
const panel = document . createElement ( 'div' ) ;
panel . style . width = "100%" ;
panel . style . width = "100%" ;
panel . style . overflowY = "scroll" ;
panel . appendChild ( grid ) ;
panel . appendChild ( grid ) ;
let self = this ;
function handleResize ( ) {
function handleResize ( ) {
const parentHeight = self . element . clientHeight ;
const parentHeight = self . element . clientHeight ;
const gridHeight = parentHeight - 400 ;
const gridHeight = parentHeight - 2 00;
grid . style . height = gridHeight + "px" ;
grid . style . height = gridHeight + "px" ;
}
}
@ -1099,7 +1275,8 @@ class AlternativesInstaller extends ComfyDialog {
grid . style . position = "relative" ;
grid . style . position = "relative" ;
grid . style . display = "inline-block" ;
grid . style . display = "inline-block" ;
grid . style . width = "100%" ;
grid . style . width = "100%" ;
grid . style . marginBottom = "200px" ;
grid . style . height = "100%" ;
grid . style . overflowY = "scroll" ;
this . element . style . height = "85%" ;
this . element . style . height = "85%" ;
this . element . style . width = "80%" ;
this . element . style . width = "80%" ;
this . element . appendChild ( panel ) ;
this . element . appendChild ( panel ) ;
@ -1305,7 +1482,15 @@ class ModelInstaller extends ComfyDialog {
var grid = document . createElement ( 'table' ) ;
var grid = document . createElement ( 'table' ) ;
grid . setAttribute ( 'id' , 'external-models-grid' ) ;
grid . setAttribute ( 'id' , 'external-models-grid' ) ;
var thead = document . createElement ( 'thead' ) ;
var tbody = document . createElement ( 'tbody' ) ;
var headerRow = document . createElement ( 'tr' ) ;
var headerRow = document . createElement ( 'tr' ) ;
thead . style . position = "sticky" ;
thead . style . top = "0px" ;
thead . style . borderCollapse = "collapse" ;
thead . style . tableLayout = "fixed" ;
var header1 = document . createElement ( 'th' ) ;
var header1 = document . createElement ( 'th' ) ;
header1 . innerHTML = ' ID ' ;
header1 . innerHTML = ' ID ' ;
header1 . style . width = "20px" ;
header1 . style . width = "20px" ;
@ -1328,6 +1513,7 @@ class ModelInstaller extends ComfyDialog {
header _down . innerHTML = 'Download' ;
header _down . innerHTML = 'Download' ;
header _down . style . width = "50px" ;
header _down . style . width = "50px" ;
thead . appendChild ( headerRow ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header1 ) ;
headerRow . appendChild ( header2 ) ;
headerRow . appendChild ( header2 ) ;
headerRow . appendChild ( header3 ) ;
headerRow . appendChild ( header3 ) ;
@ -1341,7 +1527,9 @@ class ModelInstaller extends ComfyDialog {
headerRow . style . textAlign = "center" ;
headerRow . style . textAlign = "center" ;
headerRow . style . width = "100%" ;
headerRow . style . width = "100%" ;
headerRow . style . padding = "0" ;
headerRow . style . padding = "0" ;
grid . appendChild ( headerRow ) ;
grid . appendChild ( thead ) ;
grid . appendChild ( tbody ) ;
this . grid _rows = { } ;
this . grid _rows = { } ;
@ -1404,7 +1592,7 @@ class ModelInstaller extends ComfyDialog {
dataRow . appendChild ( data5 ) ;
dataRow . appendChild ( data5 ) ;
dataRow . appendChild ( data6 ) ;
dataRow . appendChild ( data6 ) ;
dataRow . appendChild ( data _install ) ;
dataRow . appendChild ( data _install ) ;
grid . appendChild ( dataRow ) ;
tbody . appendChild ( dataRow ) ;
this . grid _rows [ i ] = { data : data , control : dataRow } ;
this . grid _rows [ i ] = { data : data , control : dataRow } ;
}
}
@ -1412,12 +1600,11 @@ class ModelInstaller extends ComfyDialog {
let self = this ;
let self = this ;
const panel = document . createElement ( 'div' ) ;
const panel = document . createElement ( 'div' ) ;
panel . style . width = "100%" ;
panel . style . width = "100%" ;
panel . style . overflowY = "scroll" ;
panel . appendChild ( grid ) ;
panel . appendChild ( grid ) ;
function handleResize ( ) {
function handleResize ( ) {
const parentHeight = self . element . clientHeight ;
const parentHeight = self . element . clientHeight ;
const gridHeight = parentHeight - 4 00;
const gridHeight = parentHeight - 2 00;
grid . style . height = gridHeight + "px" ;
grid . style . height = gridHeight + "px" ;
}
}
@ -1426,7 +1613,8 @@ class ModelInstaller extends ComfyDialog {
grid . style . position = "relative" ;
grid . style . position = "relative" ;
grid . style . display = "inline-block" ;
grid . style . display = "inline-block" ;
grid . style . width = "100%" ;
grid . style . width = "100%" ;
grid . style . marginBottom = "200px" ;
grid . style . height = "100%" ;
grid . style . overflowY = "scroll" ;
this . element . style . height = "85%" ;
this . element . style . height = "85%" ;
this . element . style . width = "80%" ;
this . element . style . width = "80%" ;
this . element . appendChild ( panel ) ;
this . element . appendChild ( panel ) ;