feat(renderer): Expand Event Listener Support for Pointer, Mouse, Drag, and Touch Interactions

docs/API.md

@@ -2082,13 +2082,18 @@ addEventListener(eventType, listener, options = {});
 
 **Description:**
 
-Adds an event listener for specific renderer interaction events (drag/drop, mouse move, click) or resize events.
+Adds an event listener for renderer interaction events (pointer, mouse, drag/drop, touch, or resize events).
 
 **Parameters:**
 
-- `eventType` (string): The type of event to listen for:
-  - `'dragover'`, `'drop'`, `'mousemove'`, `'click'`: Triggered for interactions anywhere on the canvas. The listener receives the index of the piece at the event coordinates (-1 if none).
-  - `'resize'`: Triggered when the container element is resized. The listener receives an object with canvas and container dimensions.
+- `eventType` (string): The type of event to listen for. Supported event types:
+  - `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`
+  - `'dragenter'`, `'dragover'`, `'dragend'`, `'drop'`
+  - `'touchstart'`, `'touchmove'`, `'touchend'`, `'touchcancel'`
+  - `'pointerdown'`, `'pointermove'`, `'pointerup'`
+  - `'resize'`
+  - For pointer/mouse/touch/drag events: The listener receives the index of the piece at the event coordinates (`-1` if none).
+  - For `'resize'`: The listener receives an object with canvas and container dimensions.
 - `listener` (Function): The function to execute when the event occurs. Receives event-specific arguments (usually the piece index or dimension info).
 - `options` (Object, optional): Optional parameters.
   - `onlyAvailable` (boolean): If `true`, the listener will only be triggered for drop events on available positions. Defaults to `false`. This is useful for distinguishing between general drop events and those specifically on available positions. (`resize` events do not use this option.)
@@ -2137,7 +2142,12 @@ Removes a previously added event listener for a specific renderer event type.
 
 **Parameters:**
 
-- `eventType` (string): The event type from which to remove the listener.
+- `eventType` (string): The event type from which to remove the listener. Supported event types:
+  - `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`
+  - `'dragenter'`, `'dragover'`, `'dragend'`, `'drop'`
+  - `'touchstart'`, `'touchmove'`, `'touchend'`, `'touchcancel'`
+  - `'pointerdown'`, `'pointermove'`, `'pointerup'`
+  - `'resize'`
 - `listener` (Function): The listener function that was originally added.
 
 **Throws:**

src/renderer.js

@@ -565,15 +565,39 @@
     this._canvasEventHandlers = [];
 
     this._eventListeners = {
-      dragover: new Set(), // Listeners for dragover events
-      dragoverAvailable: new Set(), // Listeners for dragover events with available positions
-      drop: new Set(), // Listeners for drop events
-      dropAvailable: new Set(), // Listeners for drop events with available positions
-      mousemove: new Set(), // Listeners for hover events
-      mousemoveAvailable: new Set(), // Listeners for hover events with available positions
-      click: new Set(), // Listeners for click events
-      clickAvailable: new Set(), // Listeners for click events with available positions
-      resize: new Set(), // Listeners for resize events
+      click: new Set(),
+      clickAvailable: new Set(),
+      dblclick: new Set(),
+      dblclickAvailable: new Set(),
+      mousedown: new Set(),
+      mousedownAvailable: new Set(),
+      mousemove: new Set(),
+      mousemoveAvailable: new Set(),
+      mouseup: new Set(),
+      mouseupAvailable: new Set(),
+      dragstart: new Set(),
+      dragstartAvailable: new Set(),
+      dragover: new Set(),
+      dragoverAvailable: new Set(),
+      dragend: new Set(),
+      dragendAvailable: new Set(),
+      drop: new Set(),
+      dropAvailable: new Set(),
+      touchstart: new Set(),
+      touchstartAvailable: new Set(),
+      touchmove: new Set(),
+      touchmoveAvailable: new Set(),
+      touchend: new Set(),
+      touchendAvailable: new Set(),
+      touchcancel: new Set(),
+      touchcancelAvailable: new Set(),
+      pointerdown: new Set(),
+      pointerdownAvailable: new Set(),
+      pointermove: new Set(),
+      pointermoveAvailable: new Set(),
+      pointerup: new Set(),
+      pointerupAvailable: new Set(),
+      resize: new Set(),
     };
 
     this._eventHandlers = new Map();
@@ -646,10 +670,22 @@
    */
   _initEventListeners() {
     const eventConfigs = [
-      { type: 'dragover', preventDefault: true },
-      { type: 'drop', preventDefault: true },
       { type: 'click', preventDefault: false },
+      { type: 'dblclick', preventDefault: false },
+      { type: 'mousedown', preventDefault: false },
       { type: 'mousemove', preventDefault: false },
+      { type: 'mouseup', preventDefault: false },
+      { type: 'dragstart', preventDefault: true },
+      { type: 'dragover', preventDefault: true },
+      { type: 'dragend', preventDefault: true },
+      { type: 'drop', preventDefault: true },
+      { type: 'touchstart', preventDefault: true },
+      { type: 'touchmove', preventDefault: true },
+      { type: 'touchend', preventDefault: true },
+      { type: 'touchcancel', preventDefault: true },
+      { type: 'pointerdown', preventDefault: true },
+      { type: 'pointermove', preventDefault: true },
+      { type: 'pointerup', preventDefault: true },
     ];
 
     eventConfigs.forEach(({ type, preventDefault }) => {
@@ -1319,10 +1355,10 @@
    */
   _renderPreviewingPiecePositions(context) {
     for (const [index, value] of this._previewingPositions) {
       const [_, piece, fillColor = DEFAULT_PREVIEW_FILL_COLOR] = value;
       this._renderPreviewPiece(context, index, piece, fillColor);
     }
   }
 
   /**
    * @method _renderPreviewingHexagonPositions - Renders all previewing hexagon positions on the canvas context.
@@ -1883,17 +1919,17 @@
       this._layersManager.clear('pieces');
       this._renderPlacedPieces(context);
     });
     this._layersManager.requestAnimationFrame('preview-pieces', (context) => {
       this._layersManager.clear('preview-pieces');
     });
     this._layersManager.requestAnimationFrame('preview-hexagons', (context) => {
       this._layersManager.clear('preview-hexagons');
     });
   }
 
   /**
    * @method addEventListener - Adds an event listener for a specific event type.
-   * @param {string} eventType - The event type to listen for (dragover, drop, mousemove, click, resize).
+   * @param {string} eventType - The event type to listen for.
    * @param {Function} listener - The callback function to be executed when the event is triggered.
    * @param {Object} [options] - Optional parameters, including `onlyAvailable: true` to filter events to available positions only.
    * @throws {Error} - If the event type is invalid.
@@ -1912,7 +1948,7 @@
 
   /**
    * @method removeEventListener - Removes an event listener for a specific event type.
-   * @param {string} eventType - The event type to stop listening for (dragover, drop, mousemove, click, resize).
+   * @param {string} eventType - The event type to stop listening for.
    * @param {Function} listener - The callback function to be removed.
    * @throws {Error} - If the event type is invalid.
    */
@@ -1954,17 +1990,17 @@
     if (this._resizeObserver) {
       try {
         this._resizeObserver.disconnect();
       } catch (e) {}
       this._resizeObserver = null;
     }
 
     if (this._mutationObserver) {
       try {
         this._mutationObserver.disconnect();
       } catch (e) {}
       this._mutationObserver = null;
     }
 
     if (this._eventListeners) {
       Object.values(this._eventListeners).forEach(
         (set) => set.clear && set.clear(),
@@ -2019,10 +2055,10 @@
     ) {
       try {
         this._container.removeChild(this._canvas);
       } catch (e) {}
     }
     this._canvas = null;
     this._context = null;
     this._container = null;
 
     this._board = null;