[feat] Add node title buttons with icon-only rendering (#1186)

test/LGraphCanvas.titleButtons.test.ts

@@ -0,0 +1,274 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { LGraphCanvas } from "@/LGraphCanvas"
+import { LGraphNode, LiteGraph } from "@/litegraph"
+
+describe("LGraphCanvas Title Button Rendering", () => {
+  let canvas: LGraphCanvas
+  let ctx: CanvasRenderingContext2D
+  let node: LGraphNode
+
+  beforeEach(() => {
+    // Create a mock canvas element
+    const canvasElement = document.createElement("canvas")
+    ctx = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      translate: vi.fn(),
+      scale: vi.fn(),
+      fillRect: vi.fn(),
+      strokeRect: vi.fn(),
+      fillText: vi.fn(),
+      measureText: vi.fn().mockReturnValue({ width: 50 }),
+      beginPath: vi.fn(),
+      moveTo: vi.fn(),
+      lineTo: vi.fn(),
+      stroke: vi.fn(),
+      fill: vi.fn(),
+      closePath: vi.fn(),
+      arc: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      clearRect: vi.fn(),
+      setTransform: vi.fn(),
+      roundRect: vi.fn(),
+      font: "",
+      fillStyle: "",
+      strokeStyle: "",
+      lineWidth: 1,
+      globalAlpha: 1,
+      textAlign: "left" as CanvasTextAlign,
+      textBaseline: "alphabetic" as CanvasTextBaseline,
+    } as unknown as CanvasRenderingContext2D
+
+    canvasElement.getContext = vi.fn().mockReturnValue(ctx)
+
+    canvas = new LGraphCanvas(canvasElement, null, {
+      skip_render: true,
+      skip_events: true,
+    })
+
+    node = new LGraphNode("Test Node")
+    node.pos = [100, 200]
+    node.size = [200, 100]
+
+    // Mock required methods
+    node.drawTitleBarBackground = vi.fn()
+    node.drawTitleBarText = vi.fn()
+    node.drawBadges = vi.fn()
+    node.drawToggles = vi.fn()
+    node.drawNodeShape = vi.fn()
+    node.drawSlots = vi.fn()
+    node.drawContent = vi.fn()
+    node.drawWidgets = vi.fn()
+    node.drawCollapsedSlots = vi.fn()
+    node.drawTitleBox = vi.fn()
+    node.drawTitleText = vi.fn()
+    node.drawProgressBar = vi.fn()
+    node._setConcreteSlots = vi.fn()
+    node.arrange = vi.fn()
+    node.isSelectable = vi.fn().mockReturnValue(true)
+  })
+
+  describe("drawNode title button rendering", () => {
+    it("should render visible title buttons", () => {
+      const button1 = node.addTitleButton({
+        name: "button1",
+        text: "A",
+        visible: true,
+      })
+
+      const button2 = node.addTitleButton({
+        name: "button2",
+        text: "B",
+        visible: true,
+      })
+
+      // Mock button methods
+      const getWidth1 = vi.fn().mockReturnValue(20)
+      const getWidth2 = vi.fn().mockReturnValue(25)
+      const draw1 = vi.spyOn(button1, "draw")
+      const draw2 = vi.spyOn(button2, "draw")
+
+      button1.getWidth = getWidth1
+      button2.getWidth = getWidth2
+
+      // Draw the node (this is a simplified version of what drawNode does)
+      canvas.drawNode(node, ctx)
+
+      // Verify both buttons' getWidth was called
+      expect(getWidth1).toHaveBeenCalledWith(ctx)
+      expect(getWidth2).toHaveBeenCalledWith(ctx)
+
+      // Verify both buttons were drawn
+      expect(draw1).toHaveBeenCalled()
+      expect(draw2).toHaveBeenCalled()
+
+      // Check draw positions (right-aligned from node width)
+      // First button (rightmost): 200 - 5 = 195, then subtract width
+      // Second button: first button position - 5 - button width
+      const titleHeight = LiteGraph.NODE_TITLE_HEIGHT
+      const buttonY = -titleHeight + (titleHeight - 20) / 2 // Centered
+      expect(draw1).toHaveBeenCalledWith(ctx, 180, buttonY) // 200 - 20
+      expect(draw2).toHaveBeenCalledWith(ctx, 153, buttonY) // 180 - 2 - 25
+    })
+
+    it("should skip invisible title buttons", () => {
+      const visibleButton = node.addTitleButton({
+        name: "visible",
+        text: "V",
+        visible: true,
+      })
+
+      const invisibleButton = node.addTitleButton({
+        name: "invisible",
+        text: "", // Empty text makes it invisible
+      })
+
+      const getWidthVisible = vi.fn().mockReturnValue(30)
+      const getWidthInvisible = vi.fn().mockReturnValue(30)
+      const drawVisible = vi.spyOn(visibleButton, "draw")
+      const drawInvisible = vi.spyOn(invisibleButton, "draw")
+
+      visibleButton.getWidth = getWidthVisible
+      invisibleButton.getWidth = getWidthInvisible
+
+      canvas.drawNode(node, ctx)
+
+      // Only visible button should be measured and drawn
+      expect(getWidthVisible).toHaveBeenCalledWith(ctx)
+      expect(getWidthInvisible).not.toHaveBeenCalled()
+
+      expect(drawVisible).toHaveBeenCalled()
+      expect(drawInvisible).not.toHaveBeenCalled()
+    })
+
+    it("should handle nodes without title buttons", () => {
+      // Node has no title buttons
+      expect(node.title_buttons).toHaveLength(0)
+
+      // Should draw without errors
+      expect(() => canvas.drawNode(node, ctx)).not.toThrow()
+    })
+
+    it("should position multiple buttons with correct spacing", () => {
+      const buttons = []
+      const drawSpies = []
+
+      // Add 3 buttons
+      for (let i = 0; i < 3; i++) {
+        const button = node.addTitleButton({
+          name: `button${i}`,
+          text: String(i),
+          visible: true,
+        })
+        button.getWidth = vi.fn().mockReturnValue(15) // All same width for simplicity
+        const spy = vi.spyOn(button, "draw")
+        buttons.push(button)
+        drawSpies.push(spy)
+      }
+
+      canvas.drawNode(node, ctx)
+
+      const titleHeight = LiteGraph.NODE_TITLE_HEIGHT
+
+      // Check positions are correctly spaced (right to left)
+      // Starting position: 200
+      const buttonY = -titleHeight + (titleHeight - 20) / 2 // Button height is 20 (default)
+      expect(drawSpies[0]).toHaveBeenCalledWith(ctx, 185, buttonY) // 200 - 15
+      expect(drawSpies[1]).toHaveBeenCalledWith(ctx, 168, buttonY) // 185 - 2 - 15
+      expect(drawSpies[2]).toHaveBeenCalledWith(ctx, 151, buttonY) // 168 - 2 - 15
+    })
+
+    it("should render buttons in low quality mode", () => {
+      const button = node.addTitleButton({
+        name: "test",
+        text: "T",
+        visible: true,
+      })
+
+      button.getWidth = vi.fn().mockReturnValue(20)
+      const drawSpy = vi.spyOn(button, "draw")
+
+      // Set low quality rendering
+      canvas.lowQualityRenderingRequired = true
+
+      canvas.drawNode(node, ctx)
+
+      // Buttons should still be rendered in low quality mode
+      const buttonY = -LiteGraph.NODE_TITLE_HEIGHT + (LiteGraph.NODE_TITLE_HEIGHT - 20) / 2
+      expect(drawSpy).toHaveBeenCalledWith(ctx, 180, buttonY)
+    })
+
+    it("should handle buttons with different widths", () => {
+      const smallButton = node.addTitleButton({
+        name: "small",
+        text: "S",
+        visible: true,
+      })
+
+      const largeButton = node.addTitleButton({
+        name: "large",
+        text: "LARGE",
+        visible: true,
+      })
+
+      smallButton.getWidth = vi.fn().mockReturnValue(15)
+      largeButton.getWidth = vi.fn().mockReturnValue(50)
+
+      const drawSmall = vi.spyOn(smallButton, "draw")
+      const drawLarge = vi.spyOn(largeButton, "draw")
+
+      canvas.drawNode(node, ctx)
+
+      const titleHeight = LiteGraph.NODE_TITLE_HEIGHT
+
+      // Small button (rightmost): 200 - 15 = 185
+      const buttonY = -titleHeight + (titleHeight - 20) / 2
+      expect(drawSmall).toHaveBeenCalledWith(ctx, 185, buttonY)
+
+      // Large button: 185 - 2 - 50 = 133
+      expect(drawLarge).toHaveBeenCalledWith(ctx, 133, buttonY)
+    })
+  })
+
+  describe("Integration with node properties", () => {
+    it("should respect node size for button positioning", () => {
+      node.size = [300, 150] // Wider node
+
+      const button = node.addTitleButton({
+        name: "test",
+        text: "X",
+        visible: true,
+      })
+
+      button.getWidth = vi.fn().mockReturnValue(20)
+      const drawSpy = vi.spyOn(button, "draw")
+
+      canvas.drawNode(node, ctx)
+
+      const titleHeight = LiteGraph.NODE_TITLE_HEIGHT
+      // Should use new width: 300 - 20 = 280
+      const buttonY = -titleHeight + (titleHeight - 20) / 2
+      expect(drawSpy).toHaveBeenCalledWith(ctx, 280, buttonY)
+    })
+
+    it("should NOT render buttons on collapsed nodes", () => {
+      node.flags.collapsed = true
+
+      const button = node.addTitleButton({
+        name: "test",
+        text: "C",
+      })
+
+      button.getWidth = vi.fn().mockReturnValue(20)
+      const drawSpy = vi.spyOn(button, "draw")
+
+      canvas.drawNode(node, ctx)
+
+      // Title buttons should NOT be rendered on collapsed nodes
+      expect(drawSpy).not.toHaveBeenCalled()
+      expect(button.getWidth).not.toHaveBeenCalled()
+    })
+  })
+})