Update web content to release v1.2.60 (#5017)

* Update web content to release v1.2.60

* Remove dist.zip

web/assets/CREDIT.txt

@@ -0,0 +1 @@
+Thanks to OpenArt (https://openart.ai) for providing the sorted-custom-node-map data, captured in September 2024.

web/assets/GraphView-DXU9yRen.css

@@ -0,0 +1,158 @@
+
+.group-title-editor.node-title-editor[data-v-fc3f26e3] {
+  z-index: 9999;
+  padding: 0.25rem;
+}
+[data-v-fc3f26e3] .editable-text {
+  width: 100%;
+  height: 100%;
+}
+[data-v-fc3f26e3] .editable-text input {
+  width: 100%;
+  height: 100%;
+  /* Override the default font size */
+  font-size: inherit;
+}
+
+.side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+}
+.side-bar-button-selected .side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+  font-weight: bold;
+}
+
+.side-bar-button[data-v-caa3ee9c] {
+  width: var(--sidebar-width);
+  height: var(--sidebar-width);
+  border-radius: 0;
+}
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-left: 4px solid var(--p-button-text-primary-color);
+}
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-right: 4px solid var(--p-button-text-primary-color);
+}
+
+:root {
+  --sidebar-width: 64px;
+  --sidebar-icon-size: 1.5rem;
+}
+:root .small-sidebar {
+  --sidebar-width: 40px;
+  --sidebar-icon-size: 1rem;
+}
+
+.side-tool-bar-container[data-v-ed7a1148] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  pointer-events: auto;
+
+  width: var(--sidebar-width);
+  height: 100%;
+
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
+}
+.side-tool-bar-end[data-v-ed7a1148] {
+  align-self: flex-end;
+  margin-top: auto;
+}
+.sidebar-content-container[data-v-ed7a1148] {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.p-splitter-gutter {
+  pointer-events: auto;
+}
+.gutter-hidden {
+  display: none !important;
+}
+
+.side-bar-panel[data-v-edca8328] {
+  background-color: var(--bg-color);
+  pointer-events: auto;
+}
+.splitter-overlay[data-v-edca8328] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  pointer-events: none;
+  /* Set it the same as the ComfyUI menu */
+  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
+  999 should be sufficient to make sure splitter overlays on node's DOM
+  widgets */
+  z-index: 999;
+  border: none;
+}
+
+[data-v-37f672ab] .highlight {
+  background-color: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0rem 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+
+.comfy-vue-node-search-container[data-v-2d409367] {
+  display: flex;
+  width: 100%;
+  min-width: 26rem;
+  align-items: center;
+  justify-content: center;
+}
+.comfy-vue-node-search-container[data-v-2d409367] * {
+  pointer-events: auto;
+}
+.comfy-vue-node-preview-container[data-v-2d409367] {
+  position: absolute;
+  left: -350px;
+  top: 50px;
+}
+.comfy-vue-node-search-box[data-v-2d409367] {
+  z-index: 10;
+  flex-grow: 1;
+}
+._filter-button[data-v-2d409367] {
+  z-index: 10;
+}
+._dialog[data-v-2d409367] {
+  min-width: 26rem;
+}
+
+.invisible-dialog-root {
+  width: 30%;
+  min-width: 24rem;
+  max-width: 48rem;
+  border: 0 !important;
+  background-color: transparent !important;
+  margin-top: 25vh;
+}
+.node-search-box-dialog-mask {
+  align-items: flex-start !important;
+}
+
+.node-tooltip[data-v-e0597bf9] {
+  background: var(--comfy-input-bg);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  color: var(--input-text);
+  font-family: sans-serif;
+  left: 0;
+  max-width: 30vw;
+  padding: 4px 8px;
+  position: absolute;
+  top: 0;
+  transform: translate(5px, calc(-100% - 5px));
+  white-space: pre-wrap;
+  z-index: 99999;
+}

web/assets/index-BDBCRrlL.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { C as ComfyDialog, $ as $el, a as ComfyApp, b as app, L as LGraphCanvas, c as LiteGraph, d as LGraphNode, e as applyTextReplacements, f as ComfyWidgets, g as addValueControlWidgets, D as DraggableList, h as api, i as LGraphGroup, u as useToastStore } from "./index-Dfv2aLsq.js";
+import { aM as ComfyDialog, aN as $el, aO as ComfyApp, c as app, aH as LGraphCanvas, k as LiteGraph, e as LGraphNode, aP as applyTextReplacements, aQ as ComfyWidgets, aR as addValueControlWidgets, aS as DraggableList, av as useNodeDefStore, aT as api, L as LGraphGroup, aU as useToastStore, at as NodeSourceType, aV as NodeBadgeMode, u as useSettingStore, q as computed, w as watch, aW as BadgePosition, aJ as LGraphBadge$1, aX as _ } from "./index-Drc_oD2f.js";
 class ClipspaceDialog extends ComfyDialog {
   static {
     __name(this, "ClipspaceDialog");
@@ -213,7 +213,9 @@ const colorPalettes = {
         WIDGET_SECONDARY_TEXT_COLOR: "#999",
         LINK_COLOR: "#9A9",
         EVENT_LINK_COLOR: "#A86",
-        CONNECTING_LINK_COLOR: "#AFA"
+        CONNECTING_LINK_COLOR: "#AFA",
+        BADGE_FG_COLOR: "#FFF",
+        BADGE_BG_COLOR: "#0F1F0F"
       },
       comfy_base: {
         "fg-color": "#fff",
@@ -283,7 +285,9 @@ const colorPalettes = {
         WIDGET_SECONDARY_TEXT_COLOR: "#555",
         LINK_COLOR: "#4CAF50",
         EVENT_LINK_COLOR: "#FF9800",
-        CONNECTING_LINK_COLOR: "#2196F3"
+        CONNECTING_LINK_COLOR: "#2196F3",
+        BADGE_FG_COLOR: "#000",
+        BADGE_BG_COLOR: "#FFF"
       },
       comfy_base: {
         "fg-color": "#222",
@@ -621,6 +625,32 @@ const defaultColorPaletteId = "dark";
 const els = {
   select: null
 };
+const getCustomColorPalettes = /* @__PURE__ */ __name(() => {
+  return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
+}, "getCustomColorPalettes");
+const setCustomColorPalettes = /* @__PURE__ */ __name((customColorPalettes) => {
+  return app.ui.settings.setSettingValue(
+    idCustomColorPalettes,
+    customColorPalettes
+  );
+}, "setCustomColorPalettes");
+const defaultColorPalette = colorPalettes[defaultColorPaletteId];
+const getColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
+  if (!colorPaletteId) {
+    colorPaletteId = app.ui.settings.getSettingValue(id$4, defaultColorPaletteId);
+  }
+  if (colorPaletteId.startsWith("custom_")) {
+    colorPaletteId = colorPaletteId.substr(7);
+    let customColorPalettes = getCustomColorPalettes();
+    if (customColorPalettes[colorPaletteId]) {
+      return customColorPalettes[colorPaletteId];
+    }
+  }
+  return colorPalettes[colorPaletteId];
+}, "getColorPalette");
+const setColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
+  app.ui.settings.setSettingValue(id$4, colorPaletteId);
+}, "setColorPalette");
 app.registerExtension({
   name: id$4,
   init() {
@@ -695,28 +725,19 @@ app.registerExtension({
           comfy_base: {}
         }
       };
-      const defaultColorPalette = colorPalettes[defaultColorPaletteId];
+      const defaultColorPalette2 = colorPalettes[defaultColorPaletteId];
-      for (const key in defaultColorPalette.colors.litegraph_base) {
+      for (const key in defaultColorPalette2.colors.litegraph_base) {
         if (!colorPalette.colors.litegraph_base[key]) {
           colorPalette.colors.litegraph_base[key] = "";
         }
       }
-      for (const key in defaultColorPalette.colors.comfy_base) {
+      for (const key in defaultColorPalette2.colors.comfy_base) {
         if (!colorPalette.colors.comfy_base[key]) {
           colorPalette.colors.comfy_base[key] = "";
         }
       }
       return completeColorPalette(colorPalette);
     }, "getColorPaletteTemplate");
-    const getCustomColorPalettes = /* @__PURE__ */ __name(() => {
-      return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
-    }, "getCustomColorPalettes");
-    const setCustomColorPalettes = /* @__PURE__ */ __name((customColorPalettes) => {
-      return app.ui.settings.setSettingValue(
-        idCustomColorPalettes,
-        customColorPalettes
-      );
-    }, "setCustomColorPalettes");
     const addCustomColorPalette = /* @__PURE__ */ __name(async (colorPalette) => {
       if (typeof colorPalette !== "object") {
         alert("Invalid color palette.");
@@ -807,25 +828,6 @@ app.registerExtension({
         app.canvas.draw(true, true);
       }
     }, "loadColorPalette");
-    const getColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
-      if (!colorPaletteId) {
-        colorPaletteId = app.ui.settings.getSettingValue(
-          id$4,
-          defaultColorPaletteId
-        );
-      }
-      if (colorPaletteId.startsWith("custom_")) {
-        colorPaletteId = colorPaletteId.substr(7);
-        let customColorPalettes = getCustomColorPalettes();
-        if (customColorPalettes[colorPaletteId]) {
-          return customColorPalettes[colorPaletteId];
-        }
-      }
-      return colorPalettes[colorPaletteId];
-    }, "getColorPalette");
-    const setColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
-      app.ui.settings.setSettingValue(id$4, colorPaletteId);
-    }, "setColorPalette");
     const fileInput = $el("input", {
       type: "file",
       accept: ".json",
@@ -994,6 +996,10 @@ app.registerExtension({
     });
   }
 });
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.colorPalette = window.comfyAPI.colorPalette || {};
+window.comfyAPI.colorPalette.defaultColorPalette = defaultColorPalette;
+window.comfyAPI.colorPalette.getColorPalette = getColorPalette;
 const ext$2 = {
   name: "Comfy.ContextMenuFilter",
   init() {
@@ -1360,7 +1366,7 @@ class PrimitiveNode extends LGraphNode {
       this.#mergeWidgetConfig();
     }
   }
-  onConnectionsChange(_, index, connected) {
+  onConnectionsChange(_2, index, connected) {
     if (app.configuringGraph) {
       return;
     }
@@ -1806,7 +1812,7 @@ app.registerExtension({
       convertToInput(this, widget, config);
       return true;
     };
-    nodeType.prototype.getExtraMenuOptions = function(_, options) {
+    nodeType.prototype.getExtraMenuOptions = function(_2, options) {
       const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : void 0;
       if (this.widgets) {
         let toInput = [];
@@ -1862,6 +1868,7 @@ app.registerExtension({
     };
     nodeType.prototype.onGraphConfigured = function() {
       if (!this.inputs) return;
+      this.widgets ??= [];
       for (const input of this.inputs) {
         if (input.widget) {
           if (!input.widget[GET_CONFIG]) {
@@ -1919,7 +1926,7 @@ app.registerExtension({
       return r;
     };
     function isNodeAtPos(pos) {
-      for (const n of app2.graph._nodes) {
+      for (const n of app2.graph.nodes) {
         if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
           return true;
         }
@@ -2308,7 +2315,7 @@ class ManageGroupDialog extends ComfyDialog {
           "button.comfy-btn",
           {
             onclick: /* @__PURE__ */ __name((e) => {
-              const node = app.graph._nodes.find(
+              const node = app.graph.nodes.find(
                 (n) => n.type === "workflow/" + this.selectedGroup
               );
               if (node) {
@@ -2374,7 +2381,7 @@ class ManageGroupDialog extends ComfyDialog {
                 }
                 types[g] = type2;
                 if (!nodesByType) {
-                  nodesByType = app.graph._nodes.reduce((p, n) => {
+                  nodesByType = app.graph.nodes.reduce((p, n) => {
                     p[n.type] ??= [];
                     p[n.type].push(n);
                     return p;
@@ -2424,7 +2431,7 @@ const Workflow = {
   isInUseGroupNode(name) {
     const id2 = `workflow/${name}`;
     if (app.graph.extra?.groupNodes?.[name]) {
-      if (app.graph._nodes.find((n) => n.type === id2)) {
+      if (app.graph.nodes.find((n) => n.type === id2)) {
         return Workflow.InUse.InWorkflow;
       } else {
         return Workflow.InUse.Registered;
@@ -2576,6 +2583,8 @@ class GroupNodeConfig {
       display_name: this.name,
       category: "group nodes" + ("/" + source),
       input: { required: {} },
+      description: `Group node combining ${this.nodeData.nodes.map((n) => n.type).join(", ")}`,
+      python_module: "custom_nodes." + this.name,
       [GROUP]: this
     };
     this.inputs = [];
@@ -2591,6 +2600,7 @@ class GroupNodeConfig {
     }
     this.#convertedToProcess = null;
     await app.registerNodeDef("workflow/" + this.name, this.nodeDef);
+    useNodeDefStore().addNodeDef(this.nodeDef);
   }
   getLinks() {
     this.linksFrom = {};
@@ -2775,7 +2785,7 @@ class GroupNodeConfig {
   checkPrimitiveConnection(link, inputName, inputs) {
     const sourceNode = this.nodeData.nodes[link[0]];
     if (sourceNode.type === "PrimitiveNode") {
-      const [sourceNodeId, _, targetNodeId, __] = link;
+      const [sourceNodeId, _2, targetNodeId, __] = link;
       const primitiveDef = this.primitiveDefs[sourceNodeId];
       const targetWidget = inputs[inputName];
       const primitiveConfig = primitiveDef.input.required.value;
@@ -3177,7 +3187,7 @@ class GroupNodeHandler {
       return newNodes;
     };
     const getExtraMenuOptions = this.node.getExtraMenuOptions;
-    this.node.getExtraMenuOptions = function(_, options) {
+    this.node.getExtraMenuOptions = function(_2, options) {
       getExtraMenuOptions?.apply(this, arguments);
       let optionIndex = options.findIndex((o) => o.content === "Outputs");
       if (optionIndex === -1) optionIndex = options.length;
@@ -3353,7 +3363,7 @@ class GroupNodeHandler {
       } else if (innerNode.type === "Reroute") {
         const rerouteLinks = this.groupData.linksFrom[old.node.index];
         if (rerouteLinks) {
-          for (const [_, , targetNodeId, targetSlot] of rerouteLinks["0"]) {
+          for (const [_2, , targetNodeId, targetSlot] of rerouteLinks["0"]) {
             const node = this.innerNodes[targetNodeId];
             const input = node.inputs[targetSlot];
             if (input.widget) {
@@ -3599,7 +3609,7 @@ function addNodesToGroup(group, nodes = []) {
   var node;
   x1 = y1 = x2 = y2 = -1;
   nx1 = ny1 = nx2 = ny2 = -1;
-  for (var n of [group._nodes, nodes]) {
+  for (var n of [group.nodes, nodes]) {
     for (var i in n) {
       node = n[i];
       nx1 = node.pos[0];
@@ -3659,7 +3669,7 @@ app.registerExtension({
         return options;
       }
       group.recomputeInsideNodes();
-      const nodesInGroup = group._nodes;
+      const nodesInGroup = group.nodes;
       options.push({
         content: "Add Selected Nodes To Group",
         disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
@@ -4002,6 +4012,16 @@ function prepare_mask(image, maskCanvas, maskCtx, maskColor) {
   maskCtx.putImageData(maskData, 0, 0);
 }
 __name(prepare_mask, "prepare_mask");
+var PointerType = /* @__PURE__ */ ((PointerType2) => {
+  PointerType2["Arc"] = "arc";
+  PointerType2["Rect"] = "rect";
+  return PointerType2;
+})(PointerType || {});
+var CompositionOperation = /* @__PURE__ */ ((CompositionOperation2) => {
+  CompositionOperation2["SourceOver"] = "source-over";
+  CompositionOperation2["DestinationOut"] = "destination-out";
+  return CompositionOperation2;
+})(CompositionOperation || {});
 class MaskEditorDialog extends ComfyDialog {
   static {
     __name(this, "MaskEditorDialog");
@@ -4030,6 +4050,8 @@ class MaskEditorDialog extends ComfyDialog {
   mousedown_pan_x;
   mousedown_pan_y;
   last_pressure;
+  pointer_type;
+  brush_pointer_type_select;
   static getInstance() {
     if (!MaskEditorDialog.instance) {
       MaskEditorDialog.instance = new MaskEditorDialog();
@@ -4077,7 +4099,7 @@ class MaskEditorDialog extends ComfyDialog {
     divElement.style.borderColor = "var(--border-color)";
     divElement.style.borderStyle = "solid";
     divElement.style.fontSize = "15px";
-    divElement.style.height = "21px";
+    divElement.style.height = "25px";
     divElement.style.padding = "1px 6px";
     divElement.style.display = "flex";
     divElement.style.position = "relative";
@@ -4107,7 +4129,7 @@ class MaskEditorDialog extends ComfyDialog {
     divElement.style.borderColor = "var(--border-color)";
     divElement.style.borderStyle = "solid";
     divElement.style.fontSize = "15px";
-    divElement.style.height = "21px";
+    divElement.style.height = "25px";
     divElement.style.padding = "1px 6px";
     divElement.style.display = "flex";
     divElement.style.position = "relative";
@@ -4126,8 +4148,63 @@ class MaskEditorDialog extends ComfyDialog {
     self.opacity_slider_input.addEventListener("input", callback);
     return divElement;
   }
+  createPointerTypeSelect(self) {
+    const divElement = document.createElement("div");
+    divElement.id = "maskeditor-pointer-type";
+    divElement.style.cssFloat = "left";
+    divElement.style.fontFamily = "sans-serif";
+    divElement.style.marginRight = "4px";
+    divElement.style.color = "var(--input-text)";
+    divElement.style.backgroundColor = "var(--comfy-input-bg)";
+    divElement.style.borderRadius = "8px";
+    divElement.style.borderColor = "var(--border-color)";
+    divElement.style.borderStyle = "solid";
+    divElement.style.fontSize = "15px";
+    divElement.style.height = "25px";
+    divElement.style.padding = "1px 6px";
+    divElement.style.display = "flex";
+    divElement.style.position = "relative";
+    divElement.style.top = "2px";
+    divElement.style.pointerEvents = "auto";
+    const labelElement = document.createElement("label");
+    labelElement.textContent = "Pointer Type:";
+    const selectElement = document.createElement("select");
+    selectElement.style.borderRadius = "0";
+    selectElement.style.borderColor = "transparent";
+    selectElement.style.borderStyle = "unset";
+    selectElement.style.fontSize = "0.9em";
+    const optionArc = document.createElement("option");
+    optionArc.value = "arc";
+    optionArc.text = "Circle";
+    optionArc.selected = true;
+    const optionRect = document.createElement("option");
+    optionRect.value = "rect";
+    optionRect.text = "Square";
+    selectElement.appendChild(optionArc);
+    selectElement.appendChild(optionRect);
+    selectElement.addEventListener("change", (event) => {
+      const target = event.target;
+      self.pointer_type = target.value;
+      this.setBrushBorderRadius(self);
+    });
+    divElement.appendChild(labelElement);
+    divElement.appendChild(selectElement);
+    return divElement;
+  }
+  setBrushBorderRadius(self) {
+    if (self.pointer_type === "rect") {
+      this.brush.style.borderRadius = "0%";
+      this.brush.style.MozBorderRadius = "0%";
+      this.brush.style.WebkitBorderRadius = "0%";
+    } else {
+      this.brush.style.borderRadius = "50%";
+      this.brush.style.MozBorderRadius = "50%";
+      this.brush.style.WebkitBorderRadius = "50%";
+    }
+  }
   setlayout(imgCanvas, maskCanvas) {
     const self = this;
+    self.pointer_type = "arc";
     var bottom_panel = document.createElement("div");
     bottom_panel.style.position = "absolute";
     bottom_panel.style.bottom = "0px";
@@ -4140,13 +4217,11 @@ class MaskEditorDialog extends ComfyDialog {
     brush.style.backgroundColor = "transparent";
     brush.style.outline = "1px dashed black";
     brush.style.boxShadow = "0 0 0 1px white";
-    brush.style.borderRadius = "50%";
-    brush.style.MozBorderRadius = "50%";
-    brush.style.WebkitBorderRadius = "50%";
     brush.style.position = "absolute";
     brush.style.zIndex = "8889";
     brush.style.pointerEvents = "none";
     this.brush = brush;
+    this.setBrushBorderRadius(self);
     this.element.appendChild(imgCanvas);
     this.element.appendChild(maskCanvas);
     this.element.appendChild(bottom_panel);
@@ -4177,6 +4252,7 @@ class MaskEditorDialog extends ComfyDialog {
         }
       }
     );
+    this.brush_pointer_type_select = this.createPointerTypeSelect(self);
     this.colorButton = this.createLeftButton(this.getColorButtonText(), () => {
       if (self.brush_color_mode === "black") {
         self.brush_color_mode = "white";
@@ -4203,6 +4279,7 @@ class MaskEditorDialog extends ComfyDialog {
     bottom_panel.appendChild(cancelButton);
     bottom_panel.appendChild(this.brush_size_slider);
     bottom_panel.appendChild(this.brush_opacity_slider);
+    bottom_panel.appendChild(this.brush_pointer_type_select);
     bottom_panel.appendChild(this.colorButton);
     imgCanvas.style.position = "absolute";
     maskCanvas.style.position = "absolute";
@@ -4568,19 +4645,22 @@ class MaskEditorDialog extends ComfyDialog {
       }
       if (diff > 20 && !this.drawing_mode)
         requestAnimationFrame(() => {
-          self.maskCtx.beginPath();
+          self.init_shape(
-          self.maskCtx.fillStyle = this.getMaskFillStyle();
+            self,
-          self.maskCtx.globalCompositeOperation = "source-over";
+            "source-over"
-          self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+            /* SourceOver */
-          self.maskCtx.fill();
+          );
+          self.draw_shape(self, x, y, brush_size);
           self.lastx = x;
           self.lasty = y;
         });
       else
         requestAnimationFrame(() => {
-          self.maskCtx.beginPath();
+          self.init_shape(
-          self.maskCtx.fillStyle = this.getMaskFillStyle();
+            self,
-          self.maskCtx.globalCompositeOperation = "source-over";
+            "source-over"
+            /* SourceOver */
+          );
           var dx = x - self.lastx;
           var dy = y - self.lasty;
           var distance = Math.sqrt(dx * dx + dy * dy);
@@ -4589,8 +4669,7 @@ class MaskEditorDialog extends ComfyDialog {
           for (var i = 0; i < distance; i += 5) {
             var px = self.lastx + directionX * i;
             var py = self.lasty + directionY * i;
-            self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+            self.draw_shape(self, px, py, brush_size);
-            self.maskCtx.fill();
           }
           self.lastx = x;
           self.lasty = y;
@@ -4611,17 +4690,22 @@ class MaskEditorDialog extends ComfyDialog {
       }
       if (diff > 20 && !this.drawing_mode)
         requestAnimationFrame(() => {
-          self.maskCtx.beginPath();
+          self.init_shape(
-          self.maskCtx.globalCompositeOperation = "destination-out";
+            self,
-          self.maskCtx.arc(x2, y2, brush_size, 0, Math.PI * 2, false);
+            "destination-out"
-          self.maskCtx.fill();
+            /* DestinationOut */
+          );
+          self.draw_shape(self, x2, y2, brush_size);
           self.lastx = x2;
           self.lasty = y2;
         });
       else
         requestAnimationFrame(() => {
-          self.maskCtx.beginPath();
+          self.init_shape(
-          self.maskCtx.globalCompositeOperation = "destination-out";
+            self,
+            "destination-out"
+            /* DestinationOut */
+          );
           var dx = x2 - self.lastx;
           var dy = y2 - self.lasty;
           var distance = Math.sqrt(dx * dx + dy * dy);
@@ -4630,8 +4714,7 @@ class MaskEditorDialog extends ComfyDialog {
           for (var i = 0; i < distance; i += 5) {
             var px = self.lastx + directionX * i;
             var py = self.lasty + directionY * i;
-            self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+            self.draw_shape(self, px, py, brush_size);
-            self.maskCtx.fill();
           }
           self.lastx = x2;
           self.lasty = y2;
@@ -4665,20 +4748,47 @@ class MaskEditorDialog extends ComfyDialog {
       const maskRect = self.maskCanvas.getBoundingClientRect();
       const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
       const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
-      self.maskCtx.beginPath();
       if (!event.altKey && event.button == 0) {
-        self.maskCtx.fillStyle = this.getMaskFillStyle();
+        self.init_shape(
-        self.maskCtx.globalCompositeOperation = "source-over";
+          self,
+          "source-over"
+          /* SourceOver */
+        );
       } else {
-        self.maskCtx.globalCompositeOperation = "destination-out";
+        self.init_shape(
+          self,
+          "destination-out"
+          /* DestinationOut */
+        );
       }
-      self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+      self.draw_shape(self, x, y, brush_size);
-      self.maskCtx.fill();
       self.lastx = x;
       self.lasty = y;
       self.lasttime = performance.now();
     }
   }
+  init_shape(self, compositionOperation) {
+    self.maskCtx.beginPath();
+    if (compositionOperation == "source-over") {
+      self.maskCtx.fillStyle = this.getMaskFillStyle();
+      self.maskCtx.globalCompositeOperation = "source-over";
+    } else if (compositionOperation == "destination-out") {
+      self.maskCtx.globalCompositeOperation = "destination-out";
+    }
+  }
+  draw_shape(self, x, y, brush_size) {
+    if (self.pointer_type === "rect") {
+      self.maskCtx.rect(
+        x - brush_size,
+        y - brush_size,
+        brush_size * 2,
+        brush_size * 2
+      );
+    } else {
+      self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+    }
+    self.maskCtx.fill();
+  }
   async save() {
     const backupCanvas = document.createElement("canvas");
     const backupCtx = backupCanvas.getContext("2d", {
@@ -5264,7 +5374,7 @@ app.registerExtension({
                   updateNodes.push(node);
                 } else {
                   const nodeOutType = node.inputs && node.inputs[link?.target_slot] && node.inputs[link.target_slot].type ? node.inputs[link.target_slot].type : null;
-                  if (inputType && inputType !== "*" && nodeOutType !== inputType) {
+                  if (inputType && !LiteGraph.isValidConnection(inputType, nodeOutType)) {
                     node.disconnectInput(link.target_slot);
                   } else {
                     outputType = nodeOutType;
@@ -5300,6 +5410,7 @@ app.registerExtension({
                   }
                   if (!targetWidget) {
                     targetWidget = targetNode.widgets?.find(
+                      // @ts-expect-error fix widget types
                       (w) => w.name === targetInput.widget.name
                     );
                   }
@@ -5342,7 +5453,7 @@ app.registerExtension({
         };
         this.isVirtualNode = true;
       }
-      getExtraMenuOptions(_, options) {
+      getExtraMenuOptions(_2, options) {
         options.unshift(
           {
             content: (this.properties.showOutputText ? "Hide" : "Show") + " Type",
@@ -5564,8 +5675,7 @@ app.registerExtension({
   slot_types_default_in: {},
   async beforeRegisterNodeDef(nodeType, nodeData, app2) {
     var nodeId = nodeData.name;
-    var inputs = [];
+    const inputs = nodeData["input"]["required"];
-    inputs = nodeData["input"]["required"];
     for (const inputKey in inputs) {
       var input = inputs[inputKey];
       if (typeof input[0] !== "string") continue;
@@ -5637,7 +5747,7 @@ app.registerExtension({
       tooltip: "When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.",
       defaultValue: LiteGraph.CANVAS_GRID_SIZE,
       onChange(value) {
-        LiteGraph.CANVAS_GRID_SIZE = +value;
+        LiteGraph.CANVAS_GRID_SIZE = +value || 10;
       }
     });
     const onNodeMoved = app.canvas.onNodeMoved;
@@ -5697,7 +5807,7 @@ app.registerExtension({
       }
       if (app.canvas.last_mouse_dragging === false && app.shiftDown) {
         this.recomputeInsideNodes();
-        for (const node of this._nodes) {
+        for (const node of this.nodes) {
           node.alignToGrid();
         }
         LGraphNode.prototype.alignToGrid.apply(this);
@@ -5730,7 +5840,7 @@ app.registerExtension({
     LGraphCanvas.onGroupAdd = function() {
       const v = onGroupAdd.apply(app.canvas, arguments);
       if (app.shiftDown) {
-        const lastGroup = app.graph._groups[app.graph._groups.length - 1];
+        const lastGroup = app.graph.groups[app.graph.groups.length - 1];
         if (lastGroup) {
           roundVectorToGrid(lastGroup.pos);
           roundVectorToGrid(lastGroup.size);
@@ -6026,4 +6136,108 @@ app.registerExtension({
     };
   }
 });
-//# sourceMappingURL=index-CrROdkG4.js.map
+function getNodeSource(node) {
+  const nodeDef = node.constructor.nodeData;
+  if (!nodeDef) {
+    return null;
+  }
+  const nodeDefStore = useNodeDefStore();
+  return nodeDefStore.nodeDefsByName[nodeDef.name]?.nodeSource ?? null;
+}
+__name(getNodeSource, "getNodeSource");
+function isCoreNode(node) {
+  return getNodeSource(node)?.type === NodeSourceType.Core;
+}
+__name(isCoreNode, "isCoreNode");
+function badgeTextVisible(node, badgeMode) {
+  return badgeMode === NodeBadgeMode.None || isCoreNode(node) && badgeMode === NodeBadgeMode.HideBuiltIn;
+}
+__name(badgeTextVisible, "badgeTextVisible");
+function getNodeIdBadgeText(node, nodeIdBadgeMode) {
+  return badgeTextVisible(node, nodeIdBadgeMode) ? "" : `#${node.id}`;
+}
+__name(getNodeIdBadgeText, "getNodeIdBadgeText");
+function getNodeSourceBadgeText(node, nodeSourceBadgeMode) {
+  const nodeSource = getNodeSource(node);
+  return badgeTextVisible(node, nodeSourceBadgeMode) ? "" : nodeSource?.badgeText ?? "";
+}
+__name(getNodeSourceBadgeText, "getNodeSourceBadgeText");
+function getNodeLifeCycleBadgeText(node, nodeLifeCycleBadgeMode) {
+  let text = "";
+  const nodeDef = node.constructor.nodeData;
+  if (!nodeDef) {
+    return "";
+  }
+  if (nodeDef.deprecated) {
+    text = "[DEPR]";
+  }
+  if (nodeDef.experimental) {
+    text = "[BETA]";
+  }
+  return badgeTextVisible(node, nodeLifeCycleBadgeMode) ? "" : text;
+}
+__name(getNodeLifeCycleBadgeText, "getNodeLifeCycleBadgeText");
+class NodeBadgeExtension {
+  static {
+    __name(this, "NodeBadgeExtension");
+  }
+  constructor(nodeIdBadgeMode = null, nodeSourceBadgeMode = null, nodeLifeCycleBadgeMode = null, colorPalette = null) {
+    this.nodeIdBadgeMode = nodeIdBadgeMode;
+    this.nodeSourceBadgeMode = nodeSourceBadgeMode;
+    this.nodeLifeCycleBadgeMode = nodeLifeCycleBadgeMode;
+    this.colorPalette = colorPalette;
+  }
+  name = "Comfy.NodeBadge";
+  init(app2) {
+    const settingStore = useSettingStore();
+    this.nodeSourceBadgeMode = computed(
+      () => settingStore.get("Comfy.NodeBadge.NodeSourceBadgeMode")
+    );
+    this.nodeIdBadgeMode = computed(
+      () => settingStore.get("Comfy.NodeBadge.NodeIdBadgeMode")
+    );
+    this.nodeLifeCycleBadgeMode = computed(
+      () => settingStore.get(
+        "Comfy.NodeBadge.NodeLifeCycleBadgeMode"
+      )
+    );
+    this.colorPalette = computed(
+      () => getColorPalette(settingStore.get("Comfy.ColorPalette"))
+    );
+    watch(this.nodeSourceBadgeMode, () => {
+      app2.graph.setDirtyCanvas(true, true);
+    });
+    watch(this.nodeIdBadgeMode, () => {
+      app2.graph.setDirtyCanvas(true, true);
+    });
+    watch(this.nodeLifeCycleBadgeMode, () => {
+      app2.graph.setDirtyCanvas(true, true);
+    });
+  }
+  nodeCreated(node, app2) {
+    node.badgePosition = BadgePosition.TopRight;
+    node.badge_enabled = true;
+    const badge = computed(
+      () => new LGraphBadge$1({
+        text: _.truncate(
+          [
+            getNodeIdBadgeText(node, this.nodeIdBadgeMode.value),
+            getNodeLifeCycleBadgeText(
+              node,
+              this.nodeLifeCycleBadgeMode.value
+            ),
+            getNodeSourceBadgeText(node, this.nodeSourceBadgeMode.value)
+          ].filter((s) => s.length > 0).join(" "),
+          {
+            length: 31
+          }
+        ),
+        fgColor: this.colorPalette.value.colors.litegraph_base?.BADGE_FG_COLOR || defaultColorPalette.colors.litegraph_base.BADGE_FG_COLOR,
+        bgColor: this.colorPalette.value.colors.litegraph_base?.BADGE_BG_COLOR || defaultColorPalette.colors.litegraph_base.BADGE_BG_COLOR
+      })
+    );
+    node.badges.push(() => badge.value);
+  }
+}
+app.registerExtension(new NodeBadgeExtension());
+//# sourceMappingURL=index-BDBCRrlL.js.map

web/assets/userSelection-BM5u5JIA.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { j as createSpinner, h as api, $ as $el } from "./index-Dfv2aLsq.js";
+import { aY as createSpinner, aT as api, aN as $el } from "./index-Drc_oD2f.js";
 class UserSelectionScreen {
   static {
     __name(this, "UserSelectionScreen");
@@ -117,4 +117,4 @@ window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
 export {
   UserSelectionScreen
 };
-//# sourceMappingURL=userSelection-DSpF-zVD.js.map
+//# sourceMappingURL=userSelection-BM5u5JIA.js.map

web/extensions/core/colorPalette.js

@@ -0,0 +1,3 @@
+// Shim for extensions/core/colorPalette.ts
+export const defaultColorPalette = window.comfyAPI.colorPalette.defaultColorPalette;
+export const getColorPalette = window.comfyAPI.colorPalette.getColorPalette;

web/index.html

@@ -1,50 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
+  <head>
-		<meta charset="UTF-8">
+    <meta charset="UTF-8">
-		<title>ComfyUI</title>
+    <title>ComfyUI</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Browser Test Fonts -->
+    <!-- Browser Test Fonts -->
-		<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-		<style>
+    <style>
-			* {
+      * {
-				font-family: 'Roboto Mono', 'Noto Color Emoji';
+        font-family: 'Roboto Mono', 'Noto Color Emoji';
-			}
+      }
-		</style> -->
+    </style> -->
-		<link rel="stylesheet" type="text/css" href="user.css" />
+    <link rel="stylesheet" type="text/css" href="user.css" />
-		<link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+    <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
-		<script type="module" crossorigin src="./assets/index-Dfv2aLsq.js"></script>
+    <script type="module" crossorigin src="./assets/index-Drc_oD2f.js"></script>
-		<link rel="stylesheet" crossorigin href="./assets/index-W4jP-SrU.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-8NH3XvqK.css">
-	</head>
+  </head>
-	<body class="litegraph">
+  <body class="litegraph">
-		<div id="vue-app"></div>
+    <div id="vue-app"></div>
-		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
+    <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
-			<main class="comfy-user-selection-inner">
+      <main class="comfy-user-selection-inner">
-				<h1>ComfyUI</h1>
+        <h1>ComfyUI</h1>
-				<form>
+        <form>
-					<section>
+          <section>
-						<label>New user:
+            <label>New user:
-							<input placeholder="Enter a username" />
+              <input placeholder="Enter a username" />
-						</label>
+            </label>
-					</section>
+          </section>
-					<div class="comfy-user-existing">
+          <div class="comfy-user-existing">
-						<span class="or-separator">OR</span>
+            <span class="or-separator">OR</span>
-						<section>
+            <section>
-							<label>
+              <label>
-								Existing user:
+                Existing user:
-								<select>
+                <select>
-									<option hidden disabled selected value> Select a user </option>
+                  <option hidden disabled selected value> Select a user </option>
-								</select>
+                </select>
-							</label>
+              </label>
-						</section>
+            </section>
-					</div>
+          </div>
-					<footer>
+          <footer>
-						<span class="comfy-user-error">&nbsp;</span>
+            <span class="comfy-user-error">&nbsp;</span>
-						<button class="comfy-btn comfy-user-button-next">Next</button>
+            <button class="comfy-btn comfy-user-button-next">Next</button>
-					</footer>
+          </footer>
-				</form>
+        </form>
-			</main>
+      </main>
-		</div>
+    </div>
-	</body>
+  </body>
 </html>

web/scripts/workflows.js

@@ -1,4 +1,3 @@
 // Shim for scripts/workflows.ts
-export const trimJsonExt = window.comfyAPI.workflows.trimJsonExt;
 export const ComfyWorkflowManager = window.comfyAPI.workflows.ComfyWorkflowManager;
 export const ComfyWorkflow = window.comfyAPI.workflows.ComfyWorkflow;