Fix new-frontend compat: graph.on_change hook + computeLayoutSize sizing

web/js/multi_bool_panel.js

@@ -89,15 +89,19 @@ function buildPanel(panelNode) {
   const listEl = document.createElement("div");
   container.appendChild(listEl);
 
-  // addDOMWidget
+  // addDOMWidget — the new frontend (comfyui_frontend_package) drops
+  // options.computeSize, so sizing must be attached to the widget instance.
+  // Provide both computeLayoutSize (new) and computeSize (legacy) paths.
+  let rowsHeight = 60;
   const domWidget = panelNode.addDOMWidget("multi_bool_panel", "multi_bool_panel", container, {
     serialize: false,
-    computeSize: () => {
-      const rows = listEl.children.length;
-      const h = rows * ROW_HEIGHT + HEADER_PAD;
-      return [panelNode.size[0], Math.max(h + HEADER_PAD, 60)];
-    },
   });
+  domWidget.computeLayoutSize = () => ({
+    minHeight: rowsHeight,
+    minWidth: 150,
+    maxHeight: rowsHeight,
+  });
+  domWidget.computeSize = (nodeWidth) => [nodeWidth, rowsHeight];
 
   // ── render ────────────────────────────────────────────
 
@@ -219,7 +223,8 @@ function buildPanel(panelNode) {
   function resizeNode() {
     const rows = listEl.children.length;
     const h = rows * ROW_HEIGHT + HEADER_PAD;
-    panelNode.size = [panelNode.size[0], Math.max(h + HEADER_PAD, 60)];
+    rowsHeight = Math.max(h + HEADER_PAD, 60);
+    panelNode.size = [panelNode.size[0], rowsHeight];
     panelNode.setDirtyCanvas(true, true);
   }
 
@@ -256,11 +261,15 @@ function buildPanel(panelNode) {
 
   // ── event hooks ───────────────────────────────────────
 
-  // Graph changes (add/remove/rename nodes)
-  const onGraphChange = () => scheduleRefresh();
-  if (panelNode.graph) {
-    panelNode.graph.on("change", onGraphChange);
-  }
+  // Graph changes (add/remove/rename nodes) — LiteGraph has no graph.on("change")
+  // event; chain the on_change property hook instead (works on old and new litegraph).
+  const graph = panelNode.graph;
+  const prevOnChange = graph ? graph.on_change : null;
+  const onGraphChangeWrapper = (g) => {
+    if (prevOnChange) prevOnChange(g);
+    scheduleRefresh();
+  };
+  if (graph) graph.on_change = onGraphChangeWrapper;
 
   // Title / property changes
   const origOnPropertyChanged = panelNode.onPropertyChanged;
@@ -285,8 +294,8 @@ function buildPanel(panelNode) {
   // Cleanup on removal
   const origOnRemoved = panelNode.onRemoved;
   panelNode.onRemoved = function () {
-    if (panelNode.graph) {
-      panelNode.graph.off("change", onGraphChange);
+    if (panelNode.graph && panelNode.graph.on_change === onGraphChangeWrapper) {
+      panelNode.graph.on_change = prevOnChange;
     }
     if (origOnRemoved) origOnRemoved.call(this);
   };