cm-chessboard 8.12.12 → 8.12.15

package/.claude/settings.local.json

@@ -8,7 +8,19 @@
       "Bash(npm publish:*)",
       "Bash(gh search:*)",
       "Skill(schedule)",
-      "Bash(npm whoami *)"
+      "Bash(npm whoami *)",
+      "Bash(cat)",
+      "Bash(rm /tmp/pr165-comment.md)",
+      "Read(//Users/shaack/Development/repositories/MyProjects/**)",
+      "Bash(gh release *)",
+      "Bash(gh api *)",
+      "Bash(pkill -f \"http.server 8731\")",
+      "Bash(rm -f /tmp/bis-server.log)",
+      "Bash(rm /tmp/issue56.md)",
+      "Bash([ -d \"$d\" ])",
+      "Bash(pkill -f \"http.server 8732\")",
+      "Bash(rm -f /tmp/bsm-server.log)",
+      "Bash(rm -f c26.md c19.md)"
     ],
     "deny": [],
     "ask": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.12.12",
+  "version": "8.12.15",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",
@@ -29,6 +29,6 @@
   },
   "homepage": "https://github.com/shaack/cm-chessboard#readme",
   "devDependencies": {
-    "teevi": "^2.2.4"
+    "teevi": "^2.4.1"
   }
 }

package/src/extensions/right-click-annotator/RightClickAnnotator.js

@@ -3,7 +3,7 @@
  * Combines Arrows and Markers to draw/toggle arrows and circle markers with right-click + modifiers.
  * Colors:
  * - Green: Right-click
- * - Blue: Alt + Right-click
+ * - Blue: Alt, Cmd or AltGr + Right-click
  * - Red: Shift + Right-click
  * - Orange: Shift + Alt + Right-click
  * Redrawing the same arrow or marker removes it.
@@ -65,8 +65,8 @@ export class RightClickAnnotator extends Extension {
         })
 
         // register public API
-        this.chessboard.getAnnotations = this.getAnnotations.bind(this.chessboard)
-        this.chessboard.setAnnotations = this.setAnnotations.bind(this.chessboard)
+        this.chessboard.getAnnotations = this.getAnnotations.bind(this)
+        this.chessboard.setAnnotations = this.setAnnotations.bind(this)
     }
 
     getAnnotations() {
@@ -120,7 +120,7 @@ export class RightClickAnnotator extends Extension {
         this.dragStart = {
             square,
             modifiers: {
-                alt: event.altKey,
+                alt: event.altKey || event.metaKey || (event.getModifierState && event.getModifierState("AltGraph")),
                 shift: event.shiftKey || event.ctrlKey
             }
         }

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,6 +203,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
+                }
                 if (this.contextMenuListener) {
                     removeEventListener("contextmenu", this.contextMenuListener)
                     this.contextMenuListener = null
@@ -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>