fix: clip nodes with their rendered shape

Amp-Thread-ID: https://ampcode.com/threads/T-01a02705-02f3-70c9-ae5b-8ea6c2a3cac2

Author: ampagent

src/lib/litegraph/src/LGraphCanvas.titleButtons.test.ts

@@ -8,6 +8,7 @@ import {
   LGraphNode,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
+import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
 
 describe('LGraphCanvas Title Button Rendering', () => {
   let canvas: LGraphCanvas
@@ -86,6 +87,18 @@ describe('LGraphCanvas Title Button Rendering', () => {
   })
 
   describe('drawNode title button rendering', () => {
+    it('clips using the node rendering shape', () => {
+      Object.defineProperty(node, 'constructor', {
+        value: { shape: RenderShape.ROUND }
+      })
+      node.clip_area = true
+
+      canvas.drawNode(node, ctx)
+
+      expect(ctx.roundRect).toHaveBeenCalled()
+      expect(ctx.rect).not.toHaveBeenCalled()
+    })
+
     it('should render visible title buttons', () => {
       const button1 = node.addTitleButton({
         name: 'button1',

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5684,7 +5684,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       return
 
     // clip if required (mask)
-    const shape = node.shape || RenderShape.BOX
+    const shape = node.renderingShape
     const size = temp_vec2
     size[0] = node.renderingSize[0]
     size[1] = node.renderingSize[1]