cm-chessboard 8.13.0 → 8.14.1

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.1",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/extensions/promotion-dialog/PromotionDialog.js

@@ -34,6 +34,9 @@ export const PROMOTION_DIALOG_RESULT_TYPE = {
     canceled: "canceled"
 }
 
+// Keys the open dialog handles itself, see handleKeyDown
+const HANDLED_KEYS = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Enter", " ", "Escape", "Tab"]
+
 export class PromotionDialog extends Extension {
 
     /** @constructor */
@@ -259,8 +262,12 @@ export class PromotionDialog extends Extension {
                 this.promotionDialogOnClickPiece.bind(this))
             this.contextMenuListener = this.contextMenu.bind(this)
             this.chessboard.view.svg.addEventListener("contextmenu", this.contextMenuListener)
-            // Add keyboard listener
-            document.addEventListener("keydown", this.handleKeyDown)
+            // Keyboard listener in the capture phase: while the dialog is open its keys
+            // must not reach anything else. Applications commonly bind the arrow keys on
+            // document for history navigation (chess-console does), and those listeners
+            // are registered before the dialog opens, so in the bubble phase they would
+            // run first and change the position under the open dialog.
+            document.addEventListener("keydown", this.handleKeyDown, true)
         } else if (displayState === DISPLAY_STATE.hidden) {
             if (this.clickDelegate) {
                 this.clickDelegate.remove()
@@ -271,7 +278,7 @@ export class PromotionDialog extends Extension {
                 this.contextMenuListener = null
             }
             // Remove keyboard listener
-            document.removeEventListener("keydown", this.handleKeyDown)
+            document.removeEventListener("keydown", this.handleKeyDown, true)
             // Restore focus (only if the dialog was actually shown before)
             if (prevState === DISPLAY_STATE.shown &&
                 this.previouslyFocusedElement && this.previouslyFocusedElement.focus) {
@@ -292,6 +299,12 @@ export class PromotionDialog extends Extension {
         if (this.state.displayState !== DISPLAY_STATE.shown) {
             return
         }
+        // Keys the dialog owns are consumed here, they must not reach the page below.
+        // Without this the arrow keys would also drive an application's own history
+        // navigation and change the position while the dialog is waiting for an answer.
+        if (HANDLED_KEYS.includes(event.key)) {
+            event.stopPropagation()
+        }
         switch (event.key) {
             case "ArrowDown":
                 event.preventDefault()
@@ -395,7 +408,7 @@ export class PromotionDialog extends Extension {
             clearTimeout(this.announceTimeoutId)
             this.announceTimeoutId = null
         }
-        document.removeEventListener("keydown", this.handleKeyDown)
+        document.removeEventListener("keydown", this.handleKeyDown, true)
         if (this.liveRegion && this.liveRegion.parentNode) {
             this.liveRegion.parentNode.removeChild(this.liveRegion)
             this.liveRegion = null

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)