cm-chessboard 8.3.3 → 8.4.0

package/README.md

@@ -87,29 +87,16 @@ To enable the user to move the pieces, you have to enable the move input.
 const board = new Chessboard(document.getElementById("board"), {
         position: FEN.start,
         assetsUrl: "../assets/",
-        extensions: [{class: Markers}] // Looks better with markers
+        extensions: [{class: Markers}] // Looks better with markers. (Don't forget to also include the CSS for the markers)
     })
 
     board.enableMoveInput(inputHandler) // This enables the move input
 
     function inputHandler(event) {
         console.log(event)
-        switch (event.type) {
-            case INPUT_EVENT_TYPE.moveInputStarted:
-                log(`moveInputStarted: ${event.squareFrom}`)
-                return true // false cancels move
-            case INPUT_EVENT_TYPE.validateMoveInput:
-                log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-                return true // false cancels move
-            case INPUT_EVENT_TYPE.moveInputCanceled:
-                log(`moveInputCanceled`)
-                break
-            case INPUT_EVENT_TYPE.moveInputFinished:
-                log(`moveInputFinished`)
-                break
-            case INPUT_EVENT_TYPE.movingOverSquare:
-                log(`movingOverSquare: ${event.square}`)
-                break
+        if(event.type === INPUT_EVENT_TYPE.moveInputStarted || 
+                event.type === INPUT_EVENT_TYPE.validateMoveInput) {
+            return true // false cancels move
         }
     }
 ```
@@ -223,30 +210,30 @@ The event has the following **`event.type`**:
   contain the coordinates. Return `true` or `false` to validate the move. `false` cancels the move.
 - **`INPUT_EVENT_TYPE.moveInputCanceled`**: The user canceled the move with clicking again on the start square, clicking
   outside the board or right click.
-- **`INPUT_EVENT_TYPE.moveInputFinished`**: Fired after the move was made.
-- **`INPUT_EVENT_TYPE.movingOverSquare`**: Fired, when the user moves the piece over a square. `event.square` contains
+- **`INPUT_EVENT_TYPE.moveInputFinished`**: Fired after the move was made, also when canceled.
+- **`INPUT_EVENT_TYPE.movingOverSquare`**: Fired, when the user moves the piece over a square. `event.squareTo` contains
   the coordinates.
 
 ```javascript
 chessboard.enableMoveInput((event) => {
     console.log("move input", event)
-    switch (event.type) {
-        case INPUT_EVENT_TYPE.moveInputStarted:
-            log(`moveInputStarted: ${event.squareFrom}`)
-            return true // false cancels move
-        case INPUT_EVENT_TYPE.validateMoveInput:
-            log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-            return true // false cancels move
-        case INPUT_EVENT_TYPE.moveInputCanceled:
-            log(`moveInputCanceled`)
-            break
-        case INPUT_EVENT_TYPE.moveInputFinished:
-            log(`moveInputFinished`)
-            break
-        case INPUT_EVENT_TYPE.movingOverSquare:
-            log(`movingOverSquare: ${event.square}`)
-            break
-    }
+  switch (event.type) {
+      case INPUT_EVENT_TYPE.moveInputStarted:
+          console.log(`moveInputStarted: ${event.squareFrom}`)
+          return true // false cancels move
+      case INPUT_EVENT_TYPE.validateMoveInput:
+          console.log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
+          return true // false cancels move
+      case INPUT_EVENT_TYPE.moveInputCanceled:
+          console.log(`moveInputCanceled`)
+          break
+      case INPUT_EVENT_TYPE.moveInputFinished:
+          console.log(`moveInputFinished`)
+          break
+      case INPUT_EVENT_TYPE.movingOverSquare:
+          console.log(`movingOverSquare: ${event.squareTo}`)
+          break
+  }
 }, COLOR.white)
 ```
 

package/examples/enable-input.html

@@ -27,16 +27,22 @@ const board = new Chessboard(document.getElementById("board"), {
 board.enableMoveInput(inputHandler)
 function inputHandler(event) {
     console.log(event)
-    window.board.removeMarkers(MARKER_TYPE.frame)
     switch (event.type) {
         case INPUT_EVENT_TYPE.moveInputStarted:
             log(`moveInputStarted: ${event.squareFrom}`)
-            return true
+            return true // false cancels move
         case INPUT_EVENT_TYPE.validateMoveInput:
             log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-            return true
+            return true // false cancels move
         case INPUT_EVENT_TYPE.moveInputCanceled:
             log(`moveInputCanceled`)
+            break
+        case INPUT_EVENT_TYPE.moveInputFinished:
+            log(`moveInputFinished`)
+            break
+        case INPUT_EVENT_TYPE.movingOverSquare:
+            log(`movingOverSquare: ${event.squareTo}`)
+            break
     }
 }
 </pre>
@@ -63,12 +69,19 @@ function inputHandler(event) {
         switch (event.type) {
             case INPUT_EVENT_TYPE.moveInputStarted:
                 log(`moveInputStarted: ${event.squareFrom}`)
-                return true
+                return true // false cancels move
             case INPUT_EVENT_TYPE.validateMoveInput:
                 log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-                return true
+                return true // false cancels move
             case INPUT_EVENT_TYPE.moveInputCanceled:
                 log(`moveInputCanceled`)
+                break
+            case INPUT_EVENT_TYPE.moveInputFinished:
+                log(`moveInputFinished`)
+                break
+            case INPUT_EVENT_TYPE.movingOverSquare:
+                log(`movingOverSquare: ${event.squareTo}`)
+                break
         }
     }
 

package/examples/validate-moves.html

@@ -45,6 +45,9 @@
 
     function inputHandler(event) {
         console.log("inputHandler", event)
+        if(event.type === INPUT_EVENT_TYPE.movingOverSquare) {
+            return // ignore this event
+        }
         if(event.type !== INPUT_EVENT_TYPE.moveInputFinished) {
             event.chessboard.removeMarkers(MARKER_TYPE.dot)
             event.chessboard.removeMarkers(MARKER_TYPE.bevel)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.3.3",
+  "version": "8.4.0",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/model/Extension.js

@@ -12,7 +12,7 @@ export const EXTENSION_POINT = {
     beforeRedrawBoard: "beforeRedrawBoard", // called before redrawing the board
     afterRedrawBoard: "afterRedrawBoard", // called after redrawing the board
     redrawBoard: "redrawBoard", // called after redrawing the board, DEPRECATED, use afterRedrawBoard 2023-09-18
-    animation: "animation", // called on animation start, end and on every animation frame
+    animation: "animation", // called on animation start, end, and on every animation frame
     destroy: "destroy" // called, before the board is destroyed
 }
 
@@ -23,7 +23,7 @@ export class Extension {
     }
 
     registerExtensionPoint(name, callback) {
-        if(name === EXTENSION_POINT.redrawBoard) {
+        if(name === EXTENSION_POINT.redrawBoard) { // deprecated 2023-09-18
             console.warn("EXTENSION_POINT.redrawBoard is deprecated, use EXTENSION_POINT.afterRedrawBoard")
             name = EXTENSION_POINT.afterRedrawBoard
         }

package/src/view/ChessboardView.js

@@ -352,6 +352,9 @@ export class ChessboardView {
             squareTo: squareTo,
             piece: this.chessboard.getPiece(squareFrom)
         }
+        if (this.chessboard.state.moveInputCallback) {
+            data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
+        }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }