Mouse Events WEB GPU Do not work

[Yash-Popcorn]

'use client';

import { useEffect, useRef, useState } from 'react';
import { Canvas, Circle, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-webgpu';

export default function Fuck() {
  const canvasRef = useRef<Canvas | null>(null);

  useEffect(() => {
    const initCanvas = async () => {
      try {
        const webgpuRenderer = new Renderer({
            shaderCompilerPath: 'https://unpkg.com/@antv/g-device-api@1.6.10/dist/pkg/glsl_wgsl_compiler_bg.wasm',
        });

        const canvas = new Canvas({
          container: 'container',
          width: 600,
          height: 500,
          renderer: webgpuRenderer,
          background: "red",
        });

        canvasRef.current = canvas;
        
        canvas.addEventListener(CanvasEvent.READY, () => {
            const circle = new Circle({
              style: {
                cx: 500 / 2,
                cy: 500 / 2,
                r: 100,
                fill: '#1890FF',
                stroke: '#F04864',
                lineWidth: 4,
                cursor: 'pointer',
              },
            });
            
            canvas.appendChild(circle);

            circle.addEventListener('mouseenter', () => {
              circle.attr('fill', '#2FC25B');
            });

            circle.addEventListener('mouseleave', () => {
              circle.attr('fill', '#1890FF');
            });
        });

      } catch (err: any) {
        console.error("Canvas initialization error:", err);
      }
    };

    initCanvas();

    const handleResize = () => {
      if (canvasRef.current) {
        canvasRef.current.resize(window.innerWidth, window.innerHeight);
        const circle = canvasRef.current.document.getElementsByTagName('circle')[0];
        if (circle) {
          circle.style.cx = window.innerWidth / 2;
          circle.style.cy = window.innerHeight / 2;
        }
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (canvasRef.current) {
        canvasRef.current.destroy();
      }
    };
  }, []);

  return (
    <div 
      className="w-full h-full"
      id="container"
    />
  );
}

DOM interactions are not working at all.

Expected Behavior
Mouse events (mouseenter, mouseleave, click) should fire when interacting with the Circle
The Circle's fill color should change on hover
Console logs should appear when events are triggered
The cursor should change to pointer when hovering over the Circle
Actual Behavior
No mouse events are triggered (no console logs, no visual changes)
Hovering over the Circle does not change the fill color
Clicking the Circle does not trigger any response
The cursor may not change to pointer as expected
DOM interactions appear completely non-functional
Environment Details
Browser: [Specify browser and version, e.g., Chrome 120, Firefox 121, Safari 17]
Operating System: macOS 24.6.0 (darwin)
Framework: Next.js 16.0.1
React Version: 19.2.0
@antv/g Version: 6.1.28
@antv/g-webgpu Version: 2.0.52
@antv/g-plugin-dom-interaction Version: 2.1.27 (installed but may not be registered)

[github-actions]

Based on the provided title and body, the bug report is missing the following elements:

1. Steps to Reproduce: The report does not clearly describe the steps to reproduce the issue.
2. Expected Behavior: The report does not specify what the expected behavior should be.
3. Actual Behavior: The report does not describe the actual behavior observed.
4. Environment Details: The report does not include details about the browser and operating system.

To provide a more helpful response, please include the following information in your bug report:

• Steps to Reproduce: Clearly describe the steps to reproduce the issue.
• Expected Behavior: Describe what you expected to happen.
• Actual Behavior: Describe what actually happened.
• Environment Details: Include the browser and operating system you are using.

Once you provide these details, I can help you further.

[github-actions]

@Yash-Popcorn Hello! Here is an automated response to your question:

👋 Hi! Thanks for reporting the issue with mouse events and the WebGPU renderer in AntV G.

Analysis

• Symptoms: Mouse events (mouseenter, mouseleave, etc.) do not work with shapes when using the WebGPU renderer.
• Code Review: You're initializing the canvas and event listeners correctly, but the events aren’t firing.

---

✅ Checklist for Mouse Events with WebGPU in AntV G

1. Container Mounting

• Ensure the container (id="container") exists before initializing the Canvas.
• In React, the DOM may not be ready when useEffect runs. Use a ref or ensure the element is present.

Recommended Approach:

const containerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (!containerRef.current) return;

  const canvas = new Canvas({
    container: containerRef.current, // Pass the DOM node, not the string "container"
    width: 600,
    height: 500,
    renderer: webgpuRenderer,
    background: "red",
  });
  // ...
}, []);
return <div ref={containerRef} className="w-full h-full" />;

---

2. WebGPU Renderer Requirements

• WebGPU is experimental. Ensure your browser supports it (Chrome Canary or latest Chrome/Edge with flags).
• AntV G version: Use the latest version; older versions may have incomplete event support for WebGPU.

---

3. Event Handling

• Interactive Property: Make sure shapes are interactive (default is true). If you set interactive: false or pointerEvents: 'none', mouse events won’t fire.
• Cursor Styling: Set cursor: 'pointer' in the shape’s style for better UX.

const circle = new Circle({
  style: {
    cx: 300,
    cy: 250,
    r: 100,
    fill: '#1890FF',
    stroke: '#F04864',
    lineWidth: 4,
    cursor: 'pointer',
  },
});

---

4. Event Listener Example

circle.addEventListener('mouseenter', () => {
  circle.attr('fill', '#2FC25B');
});
circle.addEventListener('mouseleave', () => {
  circle.attr('fill', '#1890FF');
});

---

5. Troubleshooting Steps

• Check Console: Any errors about WebGPU or canvas initialization?
• Canvas Size: Ensure the canvas is actually visible and sized correctly.
• Event Propagation: Avoid setting pointerEvents: 'none' on shapes.
• Renderer Bug: Try the same code with the Canvas2D or SVG renderer. If events work there, it's likely a WebGPU limitation or bug.

---

🛠️ Quick Fix Example (React)

import { useRef, useEffect } from 'react';
import { Canvas, Circle, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-webgpu';

export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const webgpuRenderer = new Renderer({
      shaderCompilerPath: 'https://unpkg.com/@antv/g-device-api@1.6.10/dist/pkg/glsl_wgsl_compiler_bg.wasm',
    });

    const canvas = new Canvas({
      container: containerRef.current,
      width: 600,
      height: 500,
      renderer: webgpuRenderer,
      background: 'red',
    });

    canvas.addEventListener(CanvasEvent.READY, () => {
      const circle = new Circle({
        style: {
          cx: 300,
          cy: 250,
          r: 100,
          fill: '#1890FF',
          stroke: '#F04864',
          lineWidth: 4,
          cursor: 'pointer',
        },
      });

      canvas.appendChild(circle);

      circle.addEventListener('mouseenter', () => {
        circle.attr('fill', '#2FC25B');
      });
      circle.addEventListener('mouseleave', () => {
        circle.attr('fill', '#1890FF');
      });
    });

    return () => {
      canvas.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
}

---

📖 References

• AntV G WebGPU Renderer Docs
• AntV G Events API
• AntV G Canvas Initialization

---

ℹ️ If Problems Persist

• Provide your AntV G version and browser info.
• Share any console errors.
• Try switching to the Canvas2D renderer to isolate the issue.

---

Let us know if this resolves your problem or if you need further assistance!

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.

[github-actions]

@Yash-Popcorn Hello! Here is an automated response to your question:

---

📝 Official Response: Mouse Events Not Working with @antv/g-webgpu in React/Next.js

Thank you for your detailed report and reproduction code!

Based on your description and the provided environment, the issue is mouse events (mouseenter, mouseleave, click) not firing on shapes rendered with @antv/g and @antv/g-webgpu inside a React/Next.js app. This is a common problem when using custom renderers and plugins in modern frameworks.

---

Root Cause Analysis

• @antv/g requires the @antv/g-plugin-dom-interaction plugin to bridge DOM events (like mouse/touch/pointer) to the G scene graph.
• The plugin must be explicitly registered with the renderer (not just installed via npm), especially for non-canvas renderers like WEBGPU.
• In React/Next.js, ensure the G Canvas is initialized after the container DOM node is available and plugins are registered before event listeners are added.

---

Recommended Solution Steps

1. Register the DOM Interaction Plugin

You must register @antv/g-plugin-dom-interaction with your WEBGPU renderer before initializing the Canvas:

import { Renderer } from '@antv/g-webgpu';
import { Plugin as DomInteractionPlugin } from '@antv/g-plugin-dom-interaction';

const webgpuRenderer = new Renderer({
  shaderCompilerPath: 'https://unpkg.com/@antv/g-device-api@1.6.10/dist/pkg/glsl_wgsl_compiler_bg.wasm',
});

// Register the plugin
webgpuRenderer.registerPlugin(new DomInteractionPlugin());

2. Ensure Container DOM Node Exists

React's rendering means your container <div id="container" /> might not exist when Canvas is created.

• Use a React ref for the container, or check for its existence before canvas creation.

Example:

const containerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (!containerRef.current) return;
  // Initialize canvas here, using containerRef.current as the container
}, []);

Then in JSX:

<div ref={containerRef} id="container" />

3. Attach Mouse Events After Canvas/Shape Creation

Once the plugin is registered and the Canvas/Shape are created, attach event listeners as shown:

circle.addEventListener('mouseenter', () => {
  circle.attr('fill', '#2FC25B');
});
circle.addEventListener('mouseleave', () => {
  circle.attr('fill', '#1890FF');
});
circle.addEventListener('click', () => {
  console.log('Circle clicked');
});

4. Verify Styling for Interactivity

Set cursor: 'pointer' in the style property of your shape, and handle fill changes in event listeners.

---

Full Example (React/Next.js, WebGPU Renderer)

'use client';

import { useEffect, useRef } from 'react';
import { Canvas, Circle, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-webgpu';
import { Plugin as DomInteractionPlugin } from '@antv/g-plugin-dom-interaction';

export default function InteractiveCircle() {
  const canvasRef = useRef<Canvas | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Create renderer & register plugin
    const webgpuRenderer = new Renderer({
      shaderCompilerPath: 'https://unpkg.com/@antv/g-device-api@1.6.10/dist/pkg/glsl_wgsl_compiler_bg.wasm',
    });
    webgpuRenderer.registerPlugin(new DomInteractionPlugin());

    // Create canvas
    const canvas = new Canvas({
      container: containerRef.current,
      width: 600,
      height: 500,
      renderer: webgpuRenderer,
      background: "red",
    });

    canvasRef.current = canvas;

    canvas.addEventListener(CanvasEvent.READY, () => {
      const circle = new Circle({
        style: {
          cx: 300,
          cy: 250,
          r: 100,
          fill: '#1890FF',
          stroke: '#F04864',
          lineWidth: 4,
          cursor: 'pointer',
        },
      });
      canvas.appendChild(circle);

      circle.addEventListener('mouseenter', () => {
        circle.attr('fill', '#2FC25B');
      });
      circle.addEventListener('mouseleave', () => {
        circle.attr('fill', '#1890FF');
      });
      circle.addEventListener('click', () => {
        console.log('Circle clicked');
      });
    });

    return () => {
      if (canvasRef.current) {
        canvasRef.current.destroy();
      }
    };
  }, []);

  return (
    <div ref={containerRef} id="container" className="w-full h-full" />
  );
}

---

Troubleshooting Checklist

• ✅ Is @antv/g-plugin-dom-interaction registered on renderer?
• ✅ Is Canvas container (div) available before initialization?
• ✅ Are events attached after shape is created?
• ✅ Are you using compatible versions of all packages?
• ✅ Check browser console for errors.

---

Further Resources

• G Event API FAQ
• Renderer & Plugin Registration Guide
• React Integration Example

If the issue persists after these fixes, please provide your exact browser version and any console errors for further investigation.

---

Let us know if this resolves your issue, or if you need further assistance!

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.