cm-chessboard 8.12.18 → 8.12.19

package/README.md

@@ -247,6 +247,12 @@ chessboard.enableMoveInput((event) => {
 
 Disables moves via user input.
 
+### cancelMoveInput()
+
+Cancels a move input that is currently in progress (a piece picked up or a square selected), without disabling move
+input. Fires a `moveInputCanceled` event with `event.reason === "canceled"`. It is a no-op when no move input is in
+progress. Useful to abort a move from your own UI, e.g. on an "escape" key press or a cancel button.
+
 ### isMoveInputEnabled()
 
 Returns `true` if move input is currently enabled for white or black.

package/package.json

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

package/src/Chessboard.js

@@ -77,6 +77,7 @@ export class Chessboard {
     async setPiece(square, piece, animated = false) {
         const positionFrom = this.state.position.clone()
         this.state.position.setPiece(square, piece)
+        this.view.visualMoveInput.positionChanged()
         this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
@@ -84,6 +85,7 @@ export class Chessboard {
     async movePiece(squareFrom, squareTo, animated = false) {
         const positionFrom = this.state.position.clone()
         this.state.position.movePiece(squareFrom, squareTo)
+        this.view.visualMoveInput.positionChanged()
         this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
@@ -93,6 +95,7 @@ export class Chessboard {
         const positionTo = new Position(fen)
         if (positionFrom.getFen() !== positionTo.getFen()) {
             this.state.position.setFen(fen)
+            this.view.visualMoveInput.positionChanged()
             this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         }
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
@@ -131,6 +134,11 @@ export class Chessboard {
         this.view.disableMoveInput()
     }
 
+    // Cancel a move input that is currently in progress (leaves move input enabled).
+    cancelMoveInput() {
+        this.view.visualMoveInput.cancelMoveInput()
+    }
+
     isMoveInputEnabled() {
         return this.state.inputWhiteEnabled || this.state.inputBlackEnabled
     }

package/src/view/VisualMoveInput.js

@@ -24,7 +24,9 @@ export const MOVE_CANCELED_REASON = {
     movedOutOfBoard: "movedOutOfBoard",
     draggedBack: "draggedBack", // dragged to the start square
     clickedAnotherPiece: "clickedAnotherPiece", // of the same color
-    touchCanceled: "touchCanceled"
+    touchCanceled: "touchCanceled",
+    movedPieceChanged: "movedPieceChanged", // the held piece changed on the board, most likely got captured
+    canceled: "canceled" // cancelled programmatically via chessboard.cancelMoveInput()
 }
 
 const DRAG_THRESHOLD = 4
@@ -37,6 +39,7 @@ export class VisualMoveInput {
         this.moveInputState = null
         this.fromSquare = null
         this.toSquare = null
+        this.movedPiece = null
 
         this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
     }
@@ -432,6 +435,40 @@ export class VisualMoveInput {
         this.moveInputCanceledCallback(this.fromSquare, null, MOVE_CANCELED_REASON.secondaryClick)
     }
 
+    // Cancel a move input that is currently in progress. No-op when idle.
+    cancelMoveInput() {
+        if (this.moveInputState !== MOVE_INPUT_STATE.waitForInputStart) {
+            const moveStartSquare = this.fromSquare
+            this.view.redrawPieces()
+            this.setMoveInputState(MOVE_INPUT_STATE.reset)
+            this.moveInputCanceledCallback(moveStartSquare, null, MOVE_CANCELED_REASON.canceled)
+        }
+    }
+
+    // Called after the board position changed (setPosition/movePiece/setPiece).
+    // If the piece we are holding changed on its square — most likely captured
+    // by an external position update — cancel the in-progress move input.
+    positionChanged() {
+        // Only cancel while actually holding a piece. Never in moveDone/reset:
+        // completing a move itself goes through movePiece() and must not self-cancel.
+        const holdingStates = [
+            MOVE_INPUT_STATE.pieceClickedThreshold,
+            MOVE_INPUT_STATE.clickTo,
+            MOVE_INPUT_STATE.secondClickThreshold,
+            MOVE_INPUT_STATE.dragTo,
+            MOVE_INPUT_STATE.clickDragTo
+        ]
+        if (this.fromSquare && holdingStates.includes(this.moveInputState) &&
+            this.chessboard.getPiece(this.fromSquare) !== this.movedPiece) {
+            const moveStartSquare = this.fromSquare
+            // drop the stale held piece so the reset branch does not stamp it
+            // back onto the square, overwriting the piece just placed there
+            this.movedPiece = null
+            this.setMoveInputState(MOVE_INPUT_STATE.reset)
+            this.moveInputCanceledCallback(moveStartSquare, null, MOVE_CANCELED_REASON.movedPieceChanged)
+        }
+    }
+
     isDragging() {
         return this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo
     }

package/test/TestVisualMoveInput.js

@@ -231,4 +231,131 @@ describe("TestVisualMoveInput", () => {
         board.destroy()
     })
 
+    // Regression for https://github.com/shaack/cm-chessboard/pull/165
+    it("should cancel and keep the new position when the held piece is captured via setPosition", async () => {
+        const board = newBoard()
+        let canceled = null
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) canceled = {square: e.squareFrom, reason: e.reason}
+            return true
+        }, COLOR.white)
+        const vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        assert.equal(vmi.moveInputState, STATE_CLICK_TO)
+
+        // the opponent captures the held e2 pawn (e2 now holds a black knight)
+        const capturedFen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPnPPP/RNBQKBNR"
+        await board.setPosition(capturedFen)
+
+        assert.equal(canceled && canceled.reason, MOVE_CANCELED_REASON.movedPieceChanged)
+        assert.equal(canceled && canceled.square, "e2") // the real start square, not null
+        assert.equal(vmi.moveInputState, STATE_WAIT_FOR_INPUT_START)
+        // the position must not be corrupted back to the white pawn
+        assert.equal("" + board.getPosition(), capturedFen)
+        await tick()
+        board.destroy()
+    })
+
+    it("should not cancel a normal move completion", async () => {
+        const board = newBoard()
+        let canceledReason
+        let finished = 0
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) canceledReason = e.reason
+            if (e.type === INPUT_EVENT_TYPE.moveInputFinished) finished++
+            return true
+        }, COLOR.white)
+        const vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        vmi.onPointerDown(mouseDown("e4")) // completes via moveDone -> movePiece()
+        await tick()
+        assert.equal(board.getPiece("e4"), "wp")
+        assert.equal(canceledReason, undefined) // the guard must prevent a spurious cancel
+        assert.equal(finished, 1)
+        board.destroy()
+    })
+
+    it("should cancel when the held piece is captured via movePiece or setPiece", async () => {
+        // via setPiece
+        let board = newBoard()
+        let reason
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) reason = e.reason
+            return true
+        }, COLOR.white)
+        let vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        await board.setPiece("e2", "bn")
+        assert.equal(reason, MOVE_CANCELED_REASON.movedPieceChanged)
+        await tick()
+        board.destroy()
+
+        // via movePiece (a black pawn captures onto e2)
+        board = newBoard()
+        reason = undefined
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) reason = e.reason
+            return true
+        }, COLOR.white)
+        vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        await board.movePiece("d7", "e2")
+        assert.equal(reason, MOVE_CANCELED_REASON.movedPieceChanged)
+        await tick()
+        board.destroy()
+    })
+
+    it("should cancel an in-progress click selection via cancelMoveInput()", async () => {
+        const board = newBoard()
+        let canceled = null
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) canceled = {square: e.squareFrom, reason: e.reason}
+            return true
+        }, COLOR.white)
+        const vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2"))
+        vmi.onPointerUp(mouseUp("e2"))
+        assert.equal(vmi.moveInputState, STATE_CLICK_TO)
+
+        board.cancelMoveInput()
+        assert.equal(canceled && canceled.reason, MOVE_CANCELED_REASON.canceled)
+        assert.equal(canceled && canceled.square, "e2")
+        assert.equal(vmi.moveInputState, STATE_WAIT_FOR_INPUT_START)
+        await tick()
+        board.destroy()
+    })
+
+    it("should cancel a drag in progress via cancelMoveInput() without moving the piece", async () => {
+        const board = newBoard()
+        board.enableMoveInput(() => true, COLOR.white)
+        const vmi = board.view.visualMoveInput
+        vmi.onPointerDown(mouseDown("e2", 100, 100))
+        vmi.onPointerMove(mouseMove("e4", 100, 140)) // -> dragTo
+        assert.equal(vmi.moveInputState, STATE_DRAG_TO)
+
+        board.cancelMoveInput()
+        assert.equal(vmi.moveInputState, STATE_WAIT_FOR_INPUT_START)
+        assert.equal(board.getPiece("e2"), "wp")
+        assert.equal(board.getPiece("e4"), null)
+        await tick()
+        board.destroy()
+    })
+
+    it("should be a no-op when cancelMoveInput() is called with no move in progress", () => {
+        const board = newBoard()
+        let canceledCount = 0
+        board.enableMoveInput((e) => {
+            if (e.type === INPUT_EVENT_TYPE.moveInputCanceled) canceledCount++
+            return true
+        }, COLOR.white)
+        board.cancelMoveInput()
+        assert.equal(canceledCount, 0)
+        assert.equal(board.view.visualMoveInput.moveInputState, STATE_WAIT_FOR_INPUT_START)
+        board.destroy()
+    })
+
 })