🐛 fix never node rendering / add changeMode event

lenML · May 29, 2024 · b994fba · b994fba
1 parent d1573c9
commit b994fba
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@litegraph-ts/core",
-    "version": "0.2.25",
+    "version": "0.2.26",
     "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
     "source": "src/index.ts",
     "types": "src/index.ts",

diff --git a/packages/core/src/LGraphCanvas_Events.ts b/packages/core/src/LGraphCanvas_Events.ts
@@ -4,7 +4,7 @@ import LGraphCanvas, { IContextMenuTarget } from "./LGraphCanvas";
 import LGraphNode from "./LGraphNode";
 import LLink from "./LLink";
 import LiteGraph from "./LiteGraph";
-import { type Vector2 } from "./types";
+import { NodeMode, type Vector2 } from "./types";
 
 export default class LGraphCanvas_Events {
     processMouseDown(this: LGraphCanvas, _e: MouseEvent): boolean | undefined {
@@ -336,14 +336,19 @@ export default class LGraphCanvas_Events {
                     ];
 
                     //widgets
-                    var widget = this.processNodeWidgets(
-                        node,
-                        this.graph_mouse,
-                        e,
-                    );
-                    if (widget) {
-                        block_drag_node = true;
-                        this.node_widget = [node, widget];
+                    const skip_widget_action =
+                        node.mode === NodeMode.NEVER ||
+                        node.mode === NodeMode.BY_PASS;
+                    if (!skip_widget_action) {
+                        var widget = this.processNodeWidgets(
+                            node,
+                            this.graph_mouse,
+                            e,
+                        );
+                        if (widget) {
+                            block_drag_node = true;
+                            this.node_widget = [node, widget];
+                        }
                     }
 
                     //double clicking

diff --git a/packages/core/src/LGraphCanvas_Rendering.ts b/packages/core/src/LGraphCanvas_Rendering.ts
@@ -2490,6 +2490,9 @@ export default class LGraphCanvas_Rendering {
         var secondary_text_color = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR;
         var margin = 15;
 
+        const never_node =
+            node.mode === NodeMode.NEVER || node.mode === NodeMode.BY_PASS;
+
         for (var i = 0; i < widgets.length; ++i) {
             var w = widgets[i];
             if (w.hidden) continue;
@@ -2503,7 +2506,7 @@ export default class LGraphCanvas_Rendering {
             ctx.fillStyle = "#222";
             ctx.textAlign = "left";
             //ctx.lineWidth = 2;
-            if (w.disabled) ctx.globalAlpha *= 0.5;
+            if (w.disabled || never_node) ctx.globalAlpha *= 0.5;
             var widget_width = w.width || width;
 
             switch (w.type) {

diff --git a/packages/core/src/LGraphNode.ts b/packages/core/src/LGraphNode.ts
@@ -366,6 +366,7 @@ export default class LGraphNode {
         nodeOptionalOutputAdd: (slot: INodeOutputSlot) => void;
         resize: (size: Vector2) => void;
         propertyChanged: (k: string, v: any, prev_v: any) => void;
+        changeMode: (mode: NodeMode, before: NodeMode) => void;
     }>({
         signal: this.disposed.signal,
     });
@@ -1325,11 +1326,13 @@ export default class LGraphNode {
             default:
                 return false;
         }
+        const before = this.mode;
         this.mode = modeTo;
 
         this.widgets?.forEach((w) => {
             w.onNodeModeChange?.(this, this.mode);
         });
+        this.events.emit("changeMode", modeTo, before);
 
         return true;
     }

diff --git a/packages/core/src/widgets/DOMWidget.ts b/packages/core/src/widgets/DOMWidget.ts
@@ -329,7 +329,7 @@ export class DOMWidget implements IWidget {
             node.events.on(
                 "selected",
                 () => {
-                    this.$el.style.pointerEvents = "auto";
+                    this.$el.style.pointerEvents = "";
                 },
                 {
                     signal: this.disposed.signal,
@@ -348,6 +348,28 @@ export class DOMWidget implements IWidget {
             // default to disabled
             this.$el.style.pointerEvents = "none";
         }
+
+        node.events.on(
+            "changeMode",
+            (mode) => {
+                switch (mode) {
+                    case NodeMode.NEVER:
+                    case NodeMode.BY_PASS: {
+                        this.$el.style.pointerEvents = "none";
+                        this.$el.style.opacity = "0.5";
+                        break;
+                    }
+                    default: {
+                        this.$el.style.pointerEvents = "";
+                        this.$el.style.opacity = "";
+                        break;
+                    }
+                }
+            },
+            {
+                signal: this.disposed.signal,
+            },
+        );
     }
 
     get canvas() {