Support for hidden & advanced widgets (#250)

src/LGraphCanvas.ts

@@ -1009,6 +1009,22 @@ export class LGraphCanvas {
 
         node.graph.afterChange( /*?*/)
     }
+    static onMenuToggleAdvanced(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void {
+        node.graph.beforeChange( /*?*/)
+        const fApplyMultiNode = function (node: LGraphNode) {
+            node.toggleAdvanced()
+        }
+
+        const graphcanvas = LGraphCanvas.active_canvas
+        if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) {
+            fApplyMultiNode(node)
+        } else {
+            for (const i in graphcanvas.selected_nodes) {
+                fApplyMultiNode(graphcanvas.selected_nodes[i])
+            }
+        }
+        node.graph.afterChange( /*?*/)
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     static onMenuNodePin(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void {
     }
@@ -1623,6 +1639,8 @@ export class LGraphCanvas {
         const y = graphPos[1] - node.pos[1]
 
         for (const widget of node.widgets) {
+            if(widget.hidden || (widget.advanced && !node.showAdvanced)) continue;
+
             let widgetWidth, widgetHeight
             if (widget.computeSize) {
                 ([widgetWidth, widgetHeight] = widget.computeSize(node.size[0]))
@@ -5418,6 +5436,7 @@ export class LGraphCanvas {
 
         for (let i = 0; i < widgets.length; ++i) {
             const w = widgets[i]
+            if(w.hidden || (w.advanced && !node.showAdvanced)) continue;
             const y = w.y || posY
 
             if (w === this.link_over_widget) {
@@ -5671,7 +5690,7 @@ export class LGraphCanvas {
         let values_list
         for (let i = 0; i < node.widgets.length; ++i) {
             const w = node.widgets[i]
-            if (!w || w.disabled)
+            if (!w || w.disabled || w.hidden || (w.advanced && !node.showAdvanced))
                 continue
             const widget_height = w.computeSize ? w.computeSize(width)[1] : LiteGraph.NODE_WIDGET_HEIGHT
             const widget_width = w.width || width
@@ -7613,6 +7632,12 @@ export class LGraphCanvas {
                     callback: LGraphCanvas.onMenuNodeCollapse
                 })
             }
+            if (node.widgets?.some(w => w.advanced)) {
+                options.push({
+                    content: node.showAdvanced ? "Hide Advanced" : "Show Advanced",
+                    callback: LGraphCanvas.onMenuToggleAdvanced
+                })
+            }
             options.push(
                 {
                     content: node.pinned ? "Unpin" : "Pin",

src/LGraphNode.ts

@@ -180,6 +180,7 @@ export class LGraphNode {
     has_errors?: boolean
     removable?: boolean
     block_delete?: boolean
+    showAdvanced?: boolean
 
     _pos: Point
     public get pos() {
@@ -408,7 +409,8 @@ export class LGraphNode {
             size: this.size,
             flags: LiteGraph.cloneObject(this.flags),
             order: this.order,
-            mode: this.mode
+            mode: this.mode,
+            showAdvanced: this.showAdvanced
         }
 
         //special case for when there were errors
@@ -1265,6 +1267,7 @@ export class LGraphNode {
         if (this.widgets?.length) {
             for (let i = 0, l = this.widgets.length; i < l; ++i) {
                 const widget = this.widgets[i]
+                if (widget.hidden || (widget.advanced && !this.showAdvanced)) continue;
 
                 widgets_height += widget.computeSize
                     ? widget.computeSize(size[0])[1] + 4
@@ -2297,6 +2300,20 @@ export class LGraphNode {
         this.setDirtyCanvas(true, true)
     }
 
+    /**
+     * Toggles advanced mode of the node, showing advanced widgets
+     */
+    toggleAdvanced() {
+        if (!this.widgets?.some(w => w.advanced)) return
+        this.graph._version++
+        this.showAdvanced = !this.showAdvanced
+        const prefSize = this.computeSize()
+        if (this.size[0] < prefSize[0] || this.size[1] < prefSize[1]) {
+            this.setSize([Math.max(this.size[0], prefSize[0]), Math.max(this.size[1], prefSize[1])])
+        }
+        this.setDirtyCanvas(true, true)
+    }
+
     get pinned() {
         return !!this.flags.pinned
     }

src/types/serialisation.ts

@@ -24,6 +24,7 @@ export interface ISerialisedNode {
     boxcolor?: string
     color?: string
     bgcolor?: string
+    showAdvanced?: boolean
     widgets_values?: TWidgetValue[]
 }
 

src/types/widgets.ts

@@ -107,6 +107,9 @@ export interface IBaseWidget<TElement extends HTMLElement = HTMLElement> {
     last_y?: number
     width?: number
     disabled?: boolean
+    
+    hidden?: boolean
+    advanced?: boolean
 
     tooltip?: string