Add LGraphBadge support on node (#130)

* Add badge

* Add badge support

package.json

@@ -49,6 +49,7 @@
     "ts-jest": "^29.2.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vite-plugin-dts": "^4.2.1"
   }
 }

public/litegraph.d.ts

@@ -2,6 +2,8 @@
 // Project: litegraph.js
 // Definitions by: NateScarlet <https://github.com/NateScarlet>
 
+import { LGraphBadge, BadgePosition } from './LGraphBadge';
+
 export type Vector2 = [number, number];
 export type Vector4 = [number, number, number, number];
 export type widgetTypes =
@@ -658,6 +660,8 @@ export declare class LGraphNode {
     title: string;
     type: null | string;
     size: Vector2;
+    badges: (LGraphBadge | (() => LGraphBadge))[];
+    badgePosition: BadgePosition;
     graph: null | LGraph;
     graph_version: number;
     pos: Vector2;
@@ -1624,3 +1628,5 @@ declare class ContextMenu {
 }
 
 declare function clamp(v: number, min: number, max: number): number;
+
+export { LGraphBadge, BadgePosition } from "./LGraphBadge";

src/LGraphBadge.ts

@@ -0,0 +1,84 @@
+export enum BadgePosition {
+  TopLeft = "top-left",
+  TopRight = "top-right",
+}
+
+export interface LGraphBadgeOptions {
+  text: string;
+  fgColor?: string;
+  bgColor?: string;
+  fontSize?: number;
+  padding?: number;
+  height?: number;
+  cornerRadius?: number;
+}
+
+export class LGraphBadge {
+  text: string;
+  fgColor: string;
+  bgColor: string;
+  fontSize: number;
+  padding: number;
+  height: number;
+  cornerRadius: number;
+
+  constructor({
+    text,
+    fgColor = "white",
+    bgColor = "#0F1F0F",
+    fontSize = 12,
+    padding = 6,
+    height = 20,
+    cornerRadius = 5,
+  }: LGraphBadgeOptions) {
+    this.text = text;
+    this.fgColor = fgColor;
+    this.bgColor = bgColor;
+    this.fontSize = fontSize;
+    this.padding = padding;
+    this.height = height;
+    this.cornerRadius = cornerRadius;
+  }
+
+  getWidth(ctx: CanvasRenderingContext2D) {
+    ctx.save();
+    ctx.font = `${this.fontSize}px sans-serif`;
+    const textWidth = ctx.measureText(this.text).width;
+    ctx.restore();
+    return textWidth + this.padding * 2;
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+  ): void {
+    if (!this.text) return;
+
+    ctx.save();
+    ctx.font = `${this.fontSize}px sans-serif`;
+    const badgeWidth = this.getWidth(ctx);
+    const badgeX = 0;
+
+    // Draw badge background
+    ctx.fillStyle = this.bgColor;
+    ctx.beginPath();
+    if (ctx.roundRect) {
+      ctx.roundRect(x + badgeX, y, badgeWidth, this.height, this.cornerRadius);
+    } else {
+      // Fallback for browsers that don't support roundRect
+      ctx.rect(x + badgeX, y, badgeWidth, this.height);
+    }
+    ctx.fill();
+
+    // Draw badge text
+    ctx.fillStyle = this.fgColor;
+    ctx.fillText(
+      this.text,
+      x + badgeX + this.padding,
+      y + this.height - this.padding
+    );
+
+    ctx.restore();
+  }
+}

src/litegraph.js

@@ -1,3 +1,5 @@
+import { BadgePosition } from "./LGraphBadge";
+
 const globalExport = {};
 
 (function (globalThis) {
@@ -2375,6 +2377,8 @@ const globalExport = {};
             this.inputs = [];
             this.outputs = [];
             this.connections = [];
+            this.badges = [];
+            this.badgePosition = BadgePosition.TopLeft;
 
             //local data
             this.properties = {}; //for the values
@@ -4814,6 +4818,27 @@ const globalExport = {};
                 (y + this.pos[1]) * graphcanvas.scale + graphcanvas.offset[1]
             ];
         }
+
+        get width() {
+            return this.size[0];
+        }
+
+        get height() {
+            return this.size[1];
+        }
+
+        drawBadges(ctx, {gap = 2} = {}) {
+            const badgeInstances = this.badges.map(badge => badge instanceof LGraphBadge ? badge : badge());
+            const isLeftAligned = this.badgePosition === BadgePosition.TopLeft;
+
+            let currentX = isLeftAligned ? 0 : this.width - badgeInstances.reduce((acc, badge) => acc + badge.getWidth(ctx) + gap, 0);
+            const y = - (LiteGraph.NODE_TITLE_HEIGHT + gap);
+
+            for (const badge of badgeInstances) {
+                badge.draw(ctx, currentX, y - badge.height);
+                currentX += badge.getWidth(ctx) + gap;
+            }
+        }
     }
 
     globalThis.LGraphNode = LiteGraph.LGraphNode = LGraphNode;
@@ -9466,6 +9491,8 @@ const globalExport = {};
                 node.is_selected,
                 node.mouseOver
             );
+            node.drawBadges(ctx);
+
             ctx.shadowColor = "transparent";
 
             //draw foreground
@@ -14379,3 +14406,4 @@ export const LGraphGroup = globalExport.LGraphGroup;
 export const DragAndScale = globalExport.DragAndScale;
 export const LGraphCanvas = globalExport.LGraphCanvas;
 export const ContextMenu = globalExport.ContextMenu;
+export { LGraphBadge, BadgePosition } from "./LGraphBadge";

vite.config.mts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import path from 'path'
+import dts from 'vite-plugin-dts'
 
 export default defineConfig({
   build: {
@@ -12,4 +13,12 @@ export default defineConfig({
     minify: false,
     sourcemap: true,
   },
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      insertTypesEntry: true,
+      include: ['src/**/*.ts'],
+      outDir: 'dist',
+    }),
+  ],
 })