@alepot55/chessboardjs 2.3.6 → 2.3.8

package/src/services/CoordinateService.js

@@ -1,5 +1,5 @@
 /**
- * Service for managing coordinate conversions and board orientation
+ * CoordinateService - Handles coordinate conversions and board orientation logic
  * @module services/CoordinateService
  * @since 2.0.0
  */
@@ -10,19 +10,20 @@ import { ERROR_MESSAGES } from '../errors/messages.js';
 
 /**
  * Service responsible for coordinate conversions and board orientation
- * @class
+ * @class CoordinateService
  */
 export class CoordinateService {
     /**
-     * Creates a new CoordinateService instance
-     * @param {ChessboardConfig} config - Board configuration
+     * Create a new CoordinateService instance
+     * @param {Object} config - Board configuration
      */
     constructor(config) {
+        /** @type {Object} */
         this.config = config;
     }
 
     /**
-     * Converts logical coordinates to real coordinates based on board orientation
+     * Convert logical coordinates to real coordinates based on board orientation
      * @param {number} row - Row index (0-7)
      * @param {number} col - Column index (0-7)
      * @returns {Array<number>} Real coordinates [row, col] (1-8)
@@ -30,18 +31,16 @@ export class CoordinateService {
     realCoord(row, col) {
         let realRow = row;
         let realCol = col;
-        
         if (this.isWhiteOriented()) {
             realRow = 7 - row;
         } else {
             realCol = 7 - col;
         }
-        
         return [realRow + 1, realCol + 1];
     }
 
     /**
-     * Converts board coordinates to square ID
+     * Convert board coordinates to square ID
      * @param {number} row - Row index (0-7)
      * @param {number} col - Column index (0-7)
      * @returns {string} Square ID (e.g., 'e4')
@@ -49,7 +48,6 @@ export class CoordinateService {
     getSquareID(row, col) {
         row = parseInt(row);
         col = parseInt(col);
-        
         if (this.isWhiteOriented()) {
             row = 8 - row;
             col = col + 1;
@@ -57,7 +55,6 @@ export class CoordinateService {
             row = row + 1;
             col = 8 - col;
         }
-        
         if (col < 1 || col > 8 || row < 1 || row > 8) {
             throw new ValidationError(
                 `Invalid board coordinates: row=${row}, col=${col}`,
@@ -65,13 +62,12 @@ export class CoordinateService {
                 { row, col }
             );
         }
-        
         const letter = BOARD_LETTERS[col - 1];
         return letter + row;
     }
 
     /**
-     * Converts square ID to board coordinates
+     * Convert square ID to board coordinates
      * @param {string} squareId - Square ID (e.g., 'e4')
      * @returns {Array<number>} Board coordinates [row, col] (0-7)
      */
@@ -83,10 +79,8 @@ export class CoordinateService {
                 squareId
             );
         }
-        
         const letter = squareId[0];
         const number = parseInt(squareId[1]);
-        
         const col = BOARD_LETTERS.indexOf(letter);
         if (col === -1) {
             throw new ValidationError(
@@ -95,7 +89,6 @@ export class CoordinateService {
                 squareId
             );
         }
-        
         if (number < 1 || number > 8) {
             throw new ValidationError(
                 ERROR_MESSAGES.invalid_square + squareId,
@@ -103,9 +96,7 @@ export class CoordinateService {
                 squareId
             );
         }
-        
         let row, boardCol;
-        
         if (this.isWhiteOriented()) {
             row = 8 - number;
             boardCol = col;
@@ -113,12 +104,11 @@ export class CoordinateService {
             row = number - 1;
             boardCol = 7 - col;
         }
-        
         return [row, boardCol];
     }
 
     /**
-     * Converts pixel coordinates to square ID
+     * Convert pixel coordinates to square ID
      * @param {number} x - X coordinate in pixels
      * @param {number} y - Y coordinate in pixels
      * @param {HTMLElement} boardElement - Board DOM element
@@ -126,21 +116,15 @@ export class CoordinateService {
      */
     pixelToSquareID(x, y, boardElement) {
         if (!boardElement) return null;
-        
         const rect = boardElement.getBoundingClientRect();
         const { width, height } = rect;
-        
-        // Check if coordinates are within board bounds
         if (x < 0 || x >= width || y < 0 || y >= height) {
             return null;
         }
-        
         const squareWidth = width / 8;
         const squareHeight = height / 8;
-        
         const col = Math.floor(x / squareWidth);
         const row = Math.floor(y / squareHeight);
-        
         try {
             return this.getSquareID(row, col);
         } catch (error) {
@@ -149,25 +133,21 @@ export class CoordinateService {
     }
 
     /**
-     * Converts square ID to pixel coordinates
+     * Convert square ID to pixel coordinates
      * @param {string} squareId - Square ID (e.g., 'e4')
      * @param {HTMLElement} boardElement - Board DOM element
      * @returns {Object|null} Pixel coordinates {x, y} or null if invalid
      */
     squareIDToPixel(squareId, boardElement) {
         if (!boardElement) return null;
-        
         try {
             const [row, col] = this.getCoordinatesFromSquareID(squareId);
             const rect = boardElement.getBoundingClientRect();
             const { width, height } = rect;
-            
             const squareWidth = width / 8;
             const squareHeight = height / 8;
-            
             const x = col * squareWidth;
             const y = row * squareHeight;
-            
             return { x, y };
         } catch (error) {
             return null;
@@ -175,7 +155,7 @@ export class CoordinateService {
     }
 
     /**
-     * Gets the center pixel coordinates of a square
+     * Get the center pixel coordinates of a square
      * @param {string} squareId - Square ID (e.g., 'e4')
      * @param {HTMLElement} boardElement - Board DOM element
      * @returns {Object|null} Center coordinates {x, y} or null if invalid
@@ -183,11 +163,9 @@ export class CoordinateService {
     getSquareCenter(squareId, boardElement) {
         const coords = this.squareIDToPixel(squareId, boardElement);
         if (!coords) return null;
-        
         const rect = boardElement.getBoundingClientRect();
         const squareWidth = rect.width / 8;
         const squareHeight = rect.height / 8;
-        
         return {
             x: coords.x + squareWidth / 2,
             y: coords.y + squareHeight / 2
@@ -195,7 +173,7 @@ export class CoordinateService {
     }
 
     /**
-     * Calculates the distance between two squares
+     * Calculate the distance between two squares
      * @param {string} fromSquare - Source square ID
      * @param {string} toSquare - Target square ID
      * @returns {number} Distance between squares
@@ -204,10 +182,8 @@ export class CoordinateService {
         try {
             const [fromRow, fromCol] = this.getCoordinatesFromSquareID(fromSquare);
             const [toRow, toCol] = this.getCoordinatesFromSquareID(toSquare);
-            
             const rowDiff = Math.abs(toRow - fromRow);
             const colDiff = Math.abs(toCol - fromCol);
-            
             return Math.sqrt(rowDiff * rowDiff + colDiff * colDiff);
         } catch (error) {
             return 0;
@@ -215,7 +191,7 @@ export class CoordinateService {
     }
 
     /**
-     * Checks if the board is oriented from white's perspective
+     * Check if the board is oriented from white's perspective
      * @returns {boolean} True if white-oriented
      */
     isWhiteOriented() {
@@ -223,7 +199,7 @@ export class CoordinateService {
     }
 
     /**
-     * Checks if the board is oriented from black's perspective
+     * Check if the board is oriented from black's perspective
      * @returns {boolean} True if black-oriented
      */
     isBlackOriented() {
@@ -231,31 +207,31 @@ export class CoordinateService {
     }
 
     /**
-     * Flips the board orientation
+     * Flip the board orientation
      */
     flipOrientation() {
         this.config.orientation = this.isWhiteOriented() ? 'b' : 'w';
     }
 
     /**
-     * Sets the board orientation
-     * @param {string} orientation - 'w' for white, 'b' for black
-     * @throws {ValidationError} When orientation is invalid
+     * Set the board orientation
+     * @param {string} orientation - 'w', 'b', 'white', or 'black'
+     * @throws {ValidationError} If orientation is invalid
      */
     setOrientation(orientation) {
-        if (orientation !== 'w' && orientation !== 'b') {
+        const normalized = orientation === 'white' ? 'w' : orientation === 'black' ? 'b' : orientation;
+        if (normalized !== 'w' && normalized !== 'b') {
             throw new ValidationError(
                 ERROR_MESSAGES.invalid_orientation + orientation,
                 'orientation',
                 orientation
             );
         }
-        
-        this.config.orientation = orientation;
+        this.config.orientation = normalized;
     }
 
     /**
-     * Gets the current orientation
+     * Get the current orientation
      * @returns {string} Current orientation ('w' or 'b')
      */
     getOrientation() {
@@ -263,50 +239,21 @@ export class CoordinateService {
     }
 
     /**
-     * Sets the orientation
-     * @param {string} orientation - New orientation ('w', 'b', 'white', 'black')
-     */
-    setOrientation(orientation) {
-        // Normalize orientation
-        const normalizedOrientation = orientation === 'white' ? 'w' : 
-                                     orientation === 'black' ? 'b' : orientation;
-        
-        if (normalizedOrientation !== 'w' && normalizedOrientation !== 'b') {
-            throw new ValidationError(
-                ERROR_MESSAGES.invalid_orientation + orientation,
-                'orientation',
-                orientation
-            );
-        }
-        
-        this.config.orientation = normalizedOrientation;
-    }
-
-    /**
-     * Flips the board orientation
-     */
-    flipOrientation() {
-        this.config.orientation = this.isWhiteOriented() ? 'b' : 'w';
-    }
-
-    /**
-     * Gets all square IDs in order
+     * Get all square IDs in order
      * @returns {Array<string>} Array of all square IDs
      */
     getAllSquareIDs() {
         const squares = [];
-        
         for (let row = 0; row < 8; row++) {
             for (let col = 0; col < 8; col++) {
                 squares.push(this.getSquareID(row, col));
             }
         }
-        
         return squares;
     }
 
     /**
-     * Gets squares in a specific rank (row)
+     * Get all squares in a specific rank (row)
      * @param {number} rank - Rank number (1-8)
      * @returns {Array<string>} Array of square IDs in the rank
      */
@@ -318,19 +265,16 @@ export class CoordinateService {
                 rank
             );
         }
-        
         const squares = [];
-        
         for (let col = 0; col < 8; col++) {
             const row = this.isWhiteOriented() ? 8 - rank : rank - 1;
             squares.push(this.getSquareID(row, col));
         }
-        
         return squares;
     }
 
     /**
-     * Gets squares in a specific file (column)
+     * Get all squares in a specific file (column)
      * @param {string} file - File letter (a-h)
      * @returns {Array<string>} Array of square IDs in the file
      */
@@ -343,13 +287,10 @@ export class CoordinateService {
                 file
             );
         }
-        
         const squares = [];
-        
         for (let row = 0; row < 8; row++) {
             squares.push(this.getSquareID(row, col));
         }
-        
         return squares;
     }
 }

package/src/services/EventService.js

@@ -9,6 +9,7 @@ import { DragOptimizations } from '../utils/cross-browser.js';
 import { ValidationError } from '../errors/ChessboardError.js';
 import Move from '../components/Move.js';
 import Piece from '../components/Piece.js';
+import { ListenerManager } from '../utils/listenerManager.js';
 
 /**
  * Service responsible for event handling and user interactions
@@ -35,8 +36,8 @@ export class EventService {
         this.promoting = false;
         this.isAnimating = false;
 
-        // Event listeners storage for cleanup
-        this.eventListeners = new Map();
+        // Listener manager per gestione centralizzata
+        this.listenerManager = new ListenerManager();
     }
 
     /**
@@ -46,8 +47,8 @@ export class EventService {
      * @param {Function} onPieceLeave - Callback for piece leave
      */
     addListeners(onSquareClick, onPieceHover, onPieceLeave) {
-        // Remove existing listeners to avoid duplicates
-        this.removeListeners();
+        // Rimuovi tutti i listener esistenti
+        this.listenerManager.removeAll();
 
         const squares = this.boardService.getAllSquares();
 
@@ -65,8 +66,6 @@ export class EventService {
      * @param {Function} onPieceLeave - Leave callback
      */
     _addSquareListeners(square, onSquareClick, onPieceHover, onPieceLeave) {
-        const listeners = [];
-
         // Throttled hover handlers for performance
         const throttledHover = rafThrottle((e) => {
             if (!this.clicked && this.config.hints) {
@@ -136,26 +135,13 @@ export class EventService {
             }
         };
 
-        // Add listeners
-        square.element.addEventListener('mouseover', throttledHover);
-        square.element.addEventListener('mouseout', throttledLeave);
-        square.element.addEventListener('click', handleClick);
-        // Touch: separa tap e drag
-        square.element.addEventListener('touchstart', handleTouchStart);
-        square.element.addEventListener('touchmove', handleTouchMove);
-        square.element.addEventListener('touchend', handleTouchEnd);
-
-        // Store listeners for cleanup
-        listeners.push(
-            { element: square.element, type: 'mouseover', handler: throttledHover },
-            { element: square.element, type: 'mouseout', handler: throttledLeave },
-            { element: square.element, type: 'click', handler: handleClick },
-            { element: square.element, type: 'touchstart', handler: handleTouchStart },
-            { element: square.element, type: 'touchmove', handler: handleTouchMove },
-            { element: square.element, type: 'touchend', handler: handleTouchEnd }
-        );
-
-        this.eventListeners.set(square.id, listeners);
+        // Usa ListenerManager per aggiungere tutti i listener
+        this.listenerManager.add(square.element, 'mouseover', throttledHover);
+        this.listenerManager.add(square.element, 'mouseout', throttledLeave);
+        this.listenerManager.add(square.element, 'click', handleClick);
+        this.listenerManager.add(square.element, 'touchstart', handleTouchStart);
+        this.listenerManager.add(square.element, 'touchmove', handleTouchMove);
+        this.listenerManager.add(square.element, 'touchend', handleTouchEnd);
     }
 
     /**
@@ -172,8 +158,6 @@ export class EventService {
      */
     createDragFunction(square, piece, onDragStart, onDragMove, onDrop, onSnapback, onMove, onRemove) {
         return (event) => {
-            event.preventDefault();
-
             if (!this.config.draggable || !piece || this.isAnimating) {
                 return;
             }
@@ -183,7 +167,6 @@ export class EventService {
             let from = originalFrom;
             let to = square;
             let previousHighlight = null;
-
             const img = piece.element;
 
             if (!this.moveService.canMove(from)) {
@@ -194,6 +177,15 @@ export class EventService {
             const isTouch = event.type && event.type.startsWith('touch');
             const startX = event.clientX || (event.touches && event.touches[0]?.clientX) || 0;
             const startY = event.clientY || (event.touches && event.touches[0]?.clientY) || 0;
+            let dragStarted = false;
+
+            // --- Calculate offset between cursor/finger and piece top-left at drag start ---
+            const pieceRect = img.getBoundingClientRect();
+            const boardElement = this.boardService.element;
+            const boardRect = boardElement.getBoundingClientRect();
+            // Offset from cursor/finger to top-left of piece
+            const offsetX = startX - pieceRect.left;
+            const offsetY = startY - pieceRect.top;
 
             // --- Touch scroll lock helper ---
             const addScrollLock = () => {
@@ -205,10 +197,6 @@ export class EventService {
 
             // --- MOVE HANDLER (mouse + touch unified) ---
             const moveAt = (event) => {
-                const boardElement = this.boardService.element;
-                const squareSize = boardElement.offsetWidth / 8;
-
-                // Get mouse/touch coordinates
                 let clientX, clientY;
                 if (event.touches && event.touches[0]) {
                     clientX = event.touches[0].clientX;
@@ -217,77 +205,55 @@ export class EventService {
                     clientX = event.clientX;
                     clientY = event.clientY;
                 }
-
-                // Calculate position relative to board
-                const boardRect = boardElement.getBoundingClientRect();
-                const x = clientX - boardRect.left - (squareSize / 2);
-                const y = clientY - boardRect.top - (squareSize / 2);
-
+                // Position the piece so the cursor/finger stays at the same relative point
+                const x = clientX - boardRect.left - offsetX;
+                const y = clientY - boardRect.top - offsetY;
                 img.style.left = x + 'px';
                 img.style.top = y + 'px';
-
                 return true;
             };
 
             // --- DRAG MOVE (mouse + touch) ---
+            const moveThreshold = 5; // px
             const onPointerMove = (event) => {
-                // For touch, only handle the first finger
                 if (event.touches && event.touches.length > 1) return;
                 if (event.touches && !event.touches[0]) return;
-                if (event.type && event.type.startsWith('touch')) event.preventDefault();
-
                 const currentX = event.clientX || (event.touches && event.touches[0]?.clientX) || 0;
                 const currentY = event.clientY || (event.touches && event.touches[0]?.clientY) || 0;
                 const deltaX = Math.abs(currentX - startX);
                 const deltaY = Math.abs(currentY - startY);
-
-                // Start dragging if mouse/touch moved enough
-                if (!isDragging && (deltaX > 3 || deltaY > 3)) {
+                if (!dragStarted && (deltaX > moveThreshold || deltaY > moveThreshold)) {
+                    dragStarted = true;
                     isDragging = true;
-                    // Inizio drag: blocca update board
+                    if (isTouch) addScrollLock();
                     if (this.chessboard) this.chessboard._isDragging = true;
-
-                    // Mostra hint all'inizio del drag se attivi
                     if (this.config.hints && typeof this.chessboard._boundOnPieceHover === 'function') {
                         this.chessboard._boundOnPieceHover(from);
                     }
-
-                    // Set up drag state
                     if (!this.config.clickable) {
                         this.clicked = null;
                         this.clicked = from;
                     } else if (!this.clicked) {
                         this.clicked = from;
                     }
-
-                    // Visual feedback
                     if (this.config.clickable) {
                         from.select();
                     }
-
-                    // Prepare piece for dragging
                     img.style.position = 'absolute';
                     img.style.zIndex = '100';
                     img.classList.add('dragging');
-
                     DragOptimizations.enableForDrag(img);
-
-                    // Lock scroll for touch
-                    if (isTouch) addScrollLock();
-
-                    // Call drag start callback
                     if (!onDragStart(square, piece)) {
                         return;
                     }
                 }
-
-                if (!isDragging) return;
-
+                // Only block scroll and call preventDefault after drag has started
+                if (dragStarted && isTouch && event.cancelable) {
+                    event.preventDefault();
+                }
+                if (!dragStarted) return;
                 if (!moveAt(event)) return;
-
                 // Update target square
-                const boardElement = this.boardService.element;
-                const boardRect = boardElement.getBoundingClientRect();
                 let clientX, clientY;
                 if (event.touches && event.touches[0]) {
                     clientX = event.touches[0].clientX;
@@ -298,22 +264,16 @@ export class EventService {
                 }
                 const x = clientX - boardRect.left;
                 const y = clientY - boardRect.top;
-
                 let newTo = null;
                 if (x >= 0 && x <= boardRect.width && y >= 0 && y <= boardRect.height) {
                     const squareId = this.coordinateService.pixelToSquareID(x, y, boardElement);
                     newTo = squareId ? this.boardService.getSquare(squareId) : null;
                 }
-
                 to = newTo;
                 onDragMove(from, to, piece);
-
-                // Update visual feedback
-                if (to !== previousHighlight) {
-                    to?.highlight();
-                    previousHighlight?.dehighlight();
-                    previousHighlight = to;
-                }
+                if (to) to.highlight();
+                if (previousHighlight && previousHighlight !== to) previousHighlight.dehighlight();
+                previousHighlight = to;
             };
 
             // --- DRAG END (mouse + touch) ---
@@ -324,26 +284,19 @@ export class EventService {
                 document.removeEventListener('touchmove', onPointerMove);
                 window.removeEventListener('touchend', onPointerUp);
                 if (isTouch) removeScrollLock();
-                // Fine drag: sblocca update board
                 if (this.chessboard) this.chessboard._isDragging = false;
-
-                // Rimuovi hint alla fine del drag se attivi
                 if (this.config.hints && typeof this.chessboard._boundOnPieceLeave === 'function') {
                     this.chessboard._boundOnPieceLeave(from);
                 }
-
-                if (!isDragging) {
+                if (!dragStarted) {
                     return;
                 }
-
                 img.style.zIndex = '20';
                 img.classList.remove('dragging');
                 img.style.willChange = 'auto';
-
                 // Handle drop
                 const dropResult = onDrop(originalFrom, to, piece);
                 const isTrashDrop = !to && (this.config.dropOffBoard === 'trash' || dropResult === 'trash');
-
                 if (isTrashDrop) {
                     this._handleTrashDrop(originalFrom, onRemove);
                 } else if (!to) {
@@ -357,16 +310,12 @@ export class EventService {
                 }
             };
 
-            // --- Attach listeners (mouse + touch) ---
+            // Attach listeners (mouse + touch)
             window.addEventListener('mouseup', onPointerUp, { once: true });
             document.addEventListener('mousemove', onPointerMove);
             img.addEventListener('mouseup', onPointerUp, { once: true });
-            // Touch events
             window.addEventListener('touchend', onPointerUp, { once: true });
             document.addEventListener('touchmove', onPointerMove, { passive: false });
-
-            // Per robustezza: se il drag parte da touch, blocca subito lo scroll
-            if (isTouch) addScrollLock();
         };
     }
 
@@ -859,33 +808,21 @@ export class EventService {
      * Removes all existing event listeners
      */
     removeListeners() {
-        this.eventListeners.forEach((listeners, squareId) => {
-            listeners.forEach(({ element, type, handler }) => {
-                element.removeEventListener(type, handler);
-            });
-        });
-
-        this.eventListeners.clear();
+        this.listenerManager.removeAll();
     }
 
     /**
      * Removes all event listeners
      */
     removeAllListeners() {
-        this.eventListeners.forEach((listeners, squareId) => {
-            listeners.forEach(({ element, type, handler }) => {
-                element.removeEventListener(type, handler);
-            });
-        });
-
-        this.eventListeners.clear();
+        this.listenerManager.removeAll();
     }
 
     /**
      * Cleans up resources
      */
     destroy() {
-        this.removeAllListeners();
+        this.listenerManager.destroy();
         this.clicked = null;
         this.promoting = false;
         this.isAnimating = false;