cm-chessboard 8.12.14 → 8.12.16

package/package.json

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

package/src/view/ChessboardView.js

@@ -68,6 +68,10 @@ export class ChessboardView {
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.container.addEventListener("mousedown", this.pointerDownListener)
         this.container.addEventListener("touchstart", this.pointerDownListener, {passive: false})
+        // Suppress the native context menu on the whole board
+        // VisualMoveInput triggers a move cancel with a transient listener on right click
+        this.contextMenuListener = (e) => e.preventDefault()
+        this.container.addEventListener("contextmenu", this.contextMenuListener)
         this.createSvgAndGroups()
         this.handleResize()
     }
@@ -91,8 +95,9 @@ export class ChessboardView {
         if (this.resizeListener) {
             window.removeEventListener("resize", this.resizeListener)
         }
-        this.chessboard.context.removeEventListener("mousedown", this.pointerDownListener)
-        this.chessboard.context.removeEventListener("touchstart", this.pointerDownListener)
+        this.container.removeEventListener("mousedown", this.pointerDownListener)
+        this.container.removeEventListener("touchstart", this.pointerDownListener)
+        this.container.removeEventListener("contextmenu", this.contextMenuListener)
         Svg.removeElement(this.svg)
         this.container.remove()
     }

package/src/view/VisualMoveInput.js

@@ -23,7 +23,8 @@ export const MOVE_CANCELED_REASON = {
     secondaryClick: "secondaryClick", // right click while moving
     movedOutOfBoard: "movedOutOfBoard",
     draggedBack: "draggedBack", // dragged to the start square
-    clickedAnotherPiece: "clickedAnotherPiece" // of the same color
+    clickedAnotherPiece: "clickedAnotherPiece", // of the same color
+    touchCanceled: "touchCanceled"
 }
 
 const DRAG_THRESHOLD = 4
@@ -90,6 +91,10 @@ export class VisualMoveInput {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
                     this.pointerUpListener = null
                 }
+                if (this.pointerCancelListener) {
+                    removeEventListener(this.pointerCancelListener.type, this.pointerCancelListener)
+                    this.pointerCancelListener = null
+                }
                 this.fromSquare = params.square
                 this.toSquare = null
                 this.movedPiece = params.piece
@@ -109,6 +114,9 @@ export class VisualMoveInput {
                         this.pointerUpListener = this.onPointerUp.bind(this)
                         this.pointerUpListener.type = "touchend"
                         addEventListener("touchend", this.pointerUpListener)
+                        this.pointerCancelListener = this.onPointerCancel.bind(this)
+                        this.pointerCancelListener.type = "touchcancel"
+                        addEventListener("touchcancel", this.pointerCancelListener)
                     } else {
                         throw Error("4b74af")
                     }
@@ -195,8 +203,12 @@ export class VisualMoveInput {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
                     this.pointerUpListener = null
                 }
+                if (this.pointerCancelListener) {
+                    removeEventListener(this.pointerCancelListener.type, this.pointerCancelListener)
+                    this.pointerCancelListener = null
+                }
                 if (this.contextMenuListener) {
-                    removeEventListener("contextmenu", this.contextMenuListener)
+                    this.chessboard.view.svg.removeEventListener("contextmenu", this.contextMenuListener)
                     this.contextMenuListener = null
                 }
                 this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
@@ -401,6 +413,13 @@ export class VisualMoveInput {
         }
     }
 
+    onPointerCancel() {
+        this.view.redrawPieces()
+        const moveStartSquare = this.fromSquare
+        this.setMoveInputState(MOVE_INPUT_STATE.reset)
+        this.moveInputCanceledCallback(moveStartSquare, null, MOVE_CANCELED_REASON.touchCanceled)
+    }
+
     onContextMenu(e) { // while moving
         e.preventDefault()
         this.view.redrawPieces()

package/test/TestVisualMoveInput.js

@@ -0,0 +1,40 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
+import {Chessboard} from "../src/Chessboard.js"
+import {FEN} from "../src/model/Position.js"
+
+const STATE_WAIT_FOR_INPUT_START = "waitForInputStart"
+const STATE_PIECE_CLICKED_THRESHOLD = "pieceClickedThreshold"
+
+describe("TestVisualMoveInput", () => {
+
+    it("should reset move input state on touchcancel", async () => {
+        const chessboard = new Chessboard(document.getElementById("TestBoard"), {
+            assetsUrl: "../assets/",
+            position: FEN.start
+        })
+        chessboard.enableMoveInput(() => true)
+        const visualMoveInput = chessboard.view.visualMoveInput
+
+        visualMoveInput.onPointerDown({
+            type: "touchstart",
+            target: {getAttribute: (name) => (name === "data-square" ? "e2" : null)},
+            touches: [{clientX: 100, clientY: 100}],
+            preventDefault: () => {}
+        })
+        assert.equal(visualMoveInput.moveInputState, STATE_PIECE_CLICKED_THRESHOLD)
+
+        window.dispatchEvent(new Event("touchcancel"))
+
+        assert.equal(visualMoveInput.moveInputState, STATE_WAIT_FOR_INPUT_START)
+
+        await new Promise((resolve) => setTimeout(resolve))
+        chessboard.destroy()
+    })
+
+})

package/test/index.html

@@ -26,6 +26,7 @@
     import "./TestPiecesAnimation.js"
     import "./TestMarkers.js"
     import "./TestPosition.js"
+    import "./TestVisualMoveInput.js"
     teevi.run()
 </script>
 </body>