cm-chessboard 8.13.0 → 8.14.0

package/README.md

@@ -214,6 +214,11 @@ The event has the following **`event.type`**:
   recapture premoves. Return `true` to commit it (e.g. castling by clicking the rook). When you return `false` here the
   clicked own piece simply becomes the new selection, so if you show illegal-move feedback, skip it when `event.squareTo`
   still holds one of the mover's own pieces.
+  A move made by click always plays its own move animation. Set `event.animate = false` before returning to skip it for this move only
+  (e.g. a premove made by click); this is read once, right after validation, so there is nothing to reset afterward.
+  The opt-out only applies to click moves. A drag move never animates its completion, so `event.animate = true` has no effect there.
+  Extensions receive a clone of the event and therefore opt out by setting `chessboard.state.moveInputAnimate = false`
+  in their `moveInput` extension point handler instead.
 - **`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, also when canceled.

package/package.json

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

package/src/model/ChessboardState.js

@@ -14,6 +14,9 @@ export class ChessboardState {
         this.inputBlackEnabled = false
         this.squareSelectEnabled = false
         this.moveInputCallback = null
+        // set per move from `event.animate` in the validateMoveInput callback; `false` skips
+        // the completion animation of a click move (see ChessboardView/VisualMoveInput)
+        this.moveInputAnimate = undefined
         this.extensionPoints = {}
         this.moveInputProcess = Promise.resolve()
     }

package/src/view/ChessboardView.js

@@ -421,6 +421,11 @@ export class ChessboardView {
         if (this.chessboard.state.moveInputCallback) {
             data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
         }
+        // A validator can set `event.animate = false` to skip this move's own completion animation
+        // (e.g. a premove made by click, which would otherwise always animate).
+        // Assigned before the extension points on purpose: extensions receive a clone of `data`,
+        // so they opt out by setting `state.moveInputAnimate` directly, which must not be clobbered here.
+        this.chessboard.state.moveInputAnimate = data.animate
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         return data.moveInputCallbackResult
     }

package/src/view/VisualMoveInput.js

@@ -178,7 +178,10 @@ export class VisualMoveInput {
                 const validated = params.validated !== undefined ? 
                     params.validated : this.validateMoveInputCallback(this.fromSquare, this.toSquare)
                 if (this.toSquare && validated) {
-                    this.chessboard.movePiece(this.fromSquare, this.toSquare, prevState === MOVE_INPUT_STATE.clickTo).then(() => {
+                    // A click move always completes with its own animation, unless the
+                    // validator opted out via `event.animate = false` (see ChessboardView).
+                    const animate = prevState === MOVE_INPUT_STATE.clickTo && this.chessboard.state.moveInputAnimate !== false
+                    this.chessboard.movePiece(this.fromSquare, this.toSquare, animate).then(() => {
                         if (prevState === MOVE_INPUT_STATE.clickTo) {
                             this.view.setPieceVisibility(this.toSquare, true)
                         }

package/test/TestVisualMoveInput.js

@@ -124,6 +124,58 @@ describe("TestVisualMoveInput", () => {
         board.destroy()
     })
 
+    // A click move always completes with its own animation (see the test above),
+    // which is unwanted for premoves made by click. `event.animate = false` in the
+    // validator lets a consumer opt out per-move instead of having to toggle
+    // `chessboard.props.style.animationDuration` around the move.
+    it("should skip a click move's own animation when the validator sets event.animate = false", async () => {
+        const board = newBoard()
+        let capturedAnimated = null
+        const originalMovePiece = board.movePiece.bind(board)
+        board.movePiece = (from, to, animated) => {
+            capturedAnimated = animated
+            return originalMovePiece(from, to, animated)
+        }
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.validateMoveInput) {
+                e.animate = false
+                return true
+            }
+            return true
+        }, COLOR.white)
+        const vmi = board.view.visualMoveInput
+
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        vmi.onPointerDown(mouseDown("e4"))
+        await tick()
+
+        assert.equal(capturedAnimated, false)
+        assert.equal(board.getPiece("e4"), "wp")
+        board.destroy()
+    })
+
+    it("should still animate a click move by default (event.animate untouched)", async () => {
+        const board = newBoard()
+        let capturedAnimated = null
+        const originalMovePiece = board.movePiece.bind(board)
+        board.movePiece = (from, to, animated) => {
+            capturedAnimated = animated
+            return originalMovePiece(from, to, animated)
+        }
+        board.enableMoveInput(() => true, COLOR.white)
+        const vmi = board.view.visualMoveInput
+
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        vmi.onPointerDown(mouseDown("e4"))
+        await tick()
+
+        assert.equal(capturedAnimated, true)
+        assert.equal(board.getPiece("e4"), "wp");
+        board.destroy()
+    })
+
     it("should complete a drag move to a new square", async () => {
         const board = newBoard()
         board.enableMoveInput(() => true, COLOR.white)