cm-chessboard 7.0.3 → 7.1.1

package/README.md

@@ -8,7 +8,7 @@ in [chess-console](https://shaack.com/projekte/chess-console/examples/load-pgn.h
 [cm-fen-editor](https://shaack.com/projekte/cm-fen-editor/). They are all nice written ES6 Modules to handle different
 aspects of chess games.
 
-> Note: With version 7, I made a heavy allover refactoring. The chessboard props have been changed and the files structure also. Version 7 of the chessboard will not work out of the box, after an update from a version lower than version 7.
+> Note: With version 7, I made a heavy allover refactoring. The chessboard props have been changed and the files structure also. Version 7 of the cm-chessboard will not work out of the box after an update from a previous version. Also with version 7 comes the move cancelling via secondary mouse button.
 
 ## Features
 

package/assets/extensions/markers/markers.css

@@ -1,26 +1,34 @@
 .cm-chessboard .markers {
   pointer-events: none; }
   .cm-chessboard .markers .marker.marker-frame {
-    stroke: black;
+    stroke: #000000;
     stroke-width: 1.8px;
     opacity: 0.5; }
-  .cm-chessboard .markers .marker.marker-frame-red {
+  .cm-chessboard .markers .marker.marker-frame-primary {
+    stroke: #0009bd;
+    stroke-width: 1.8px;
+    opacity: 0.4; }
+  .cm-chessboard .markers .marker.marker-frame-danger {
     stroke: #aa0000;
     stroke-width: 1.8px;
     opacity: 0.4; }
-  .cm-chessboard .markers .marker.marker-square {
-    fill: black;
-    opacity: 0.11; }
-  .cm-chessboard .markers .marker.marker-dot {
-    fill: black;
-    opacity: 0.3; }
   .cm-chessboard .markers .marker.marker-circle {
-    stroke: #000055;
+    stroke: #000000;
     stroke-width: 3px;
     opacity: 0.4; }
-  .cm-chessboard .markers .marker.marker-circle-red {
+  .cm-chessboard .markers .marker.marker-circle-primary {
+    stroke: #0009bd;
+    stroke-width: 3px;
+    opacity: 0.4; }
+  .cm-chessboard .markers .marker.marker-circle-danger {
     stroke: #aa0000;
     stroke-width: 3px;
     opacity: 0.4; }
+  .cm-chessboard .markers .marker.marker-square {
+    fill: black;
+    opacity: 0.11; }
+  .cm-chessboard .markers .marker.marker-dot {
+    fill: black;
+    opacity: 0.3; }
 
 /*# sourceMappingURL=markers.css.map */

package/assets/extensions/markers/markers.css.map

@@ -5,5 +5,5 @@
 		"markers.scss"
 	],
 	"names": [],
-	"mappings": "AAAA,AACE,cADY,CACZ,QAAQ,CAAC;EACP,cAAc,EAAE,IAAI,GAoCrB;EAtCH,AAIM,cAJQ,CACZ,QAAQ,CAEN,OAAO,AACJ,aAAa,CAAC;IACb,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EARP,AAUM,cAVQ,CACZ,QAAQ,CAEN,OAAO,AAOJ,iBAAiB,CAAC;IACjB,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EAdP,AAgBM,cAhBQ,CACZ,QAAQ,CAEN,OAAO,AAaJ,cAAc,CAAC;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,IAAI,GACd;EAnBP,AAqBM,cArBQ,CACZ,QAAQ,CAEN,OAAO,AAkBJ,WAAW,CAAC;IACX,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb;EAxBP,AA0BM,cA1BQ,CACZ,QAAQ,CAEN,OAAO,AAuBJ,cAAc,CAAC;IACd,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EA9BP,AAgCM,cAhCQ,CACZ,QAAQ,CAEN,OAAO,AA6BJ,kBAAkB,CAAC;IAClB,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb"
+	"mappings": "AAIA,AACE,cADY,CACZ,QAAQ,CAAC;EACP,cAAc,EAAE,IAAI,GAkDrB;EApDH,AAKM,cALQ,CACZ,QAAQ,CAGN,OAAO,AACJ,aAAa,CAAC;IACb,MAAM,EAVC,OAAO;IAWd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EATP,AAWM,cAXQ,CACZ,QAAQ,CAGN,OAAO,AAOJ,qBAAqB,CAAC;IACrB,MAAM,EAfS,OAAO;IAgBtB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EAfP,AAiBM,cAjBQ,CACZ,QAAQ,CAGN,OAAO,AAaJ,oBAAoB,CAAC;IACpB,MAAM,EApBQ,OAAO;IAqBrB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EArBP,AAuBM,cAvBQ,CACZ,QAAQ,CAGN,OAAO,AAmBJ,cAAc,CAAC;IACd,MAAM,EA5BC,OAAO;IA6Bd,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EA3BP,AA6BM,cA7BQ,CACZ,QAAQ,CAGN,OAAO,AAyBJ,sBAAsB,CAAC;IACtB,MAAM,EAjCS,OAAO;IAkCtB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAjCP,AAmCM,cAnCQ,CACZ,QAAQ,CAGN,OAAO,AA+BJ,qBAAqB,CAAC;IACrB,MAAM,EAtCQ,OAAO;IAuCrB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAvCP,AAyCM,cAzCQ,CACZ,QAAQ,CAGN,OAAO,AAqCJ,cAAc,CAAC;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,IAAI,GACd;EA5CP,AA8CM,cA9CQ,CACZ,QAAQ,CAGN,OAAO,AA0CJ,WAAW,CAAC;IACX,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb"
 }

package/assets/extensions/markers/markers.scss

@@ -1,40 +1,58 @@
+$marker-color: #000000;
+$marker-color-primary: #0009bd;
+$marker-color-danger: #aa0000;
+
 .cm-chessboard {
   .markers {
     pointer-events: none;
+
     .marker {
       &.marker-frame {
-        stroke: black;
+        stroke: $marker-color;
         stroke-width: 1.8px;
         opacity: 0.5;
       }
 
-      &.marker-frame-red {
-        stroke: #aa0000;
+      &.marker-frame-primary {
+        stroke: $marker-color-primary;
         stroke-width: 1.8px;
         opacity: 0.4;
       }
 
-      &.marker-square {
-        fill: black;
-        opacity: 0.11;
+      &.marker-frame-danger {
+        stroke: $marker-color-danger;
+        stroke-width: 1.8px;
+        opacity: 0.4;
       }
 
-      &.marker-dot {
-        fill: black;
-        opacity: 0.3;
+      &.marker-circle {
+        stroke: $marker-color;
+        stroke-width: 3px;
+        opacity: 0.4;
       }
 
-      &.marker-circle {
-        stroke: #000055;
+      &.marker-circle-primary {
+        stroke: $marker-color-primary;
         stroke-width: 3px;
         opacity: 0.4;
       }
 
-      &.marker-circle-red {
-        stroke: #aa0000;
+      &.marker-circle-danger {
+        stroke: $marker-color-danger;
         stroke-width: 3px;
         opacity: 0.4;
       }
+
+      &.marker-square {
+        fill: black;
+        opacity: 0.11;
+      }
+
+      &.marker-dot {
+        fill: black;
+        opacity: 0.3;
+      }
+
     }
   }
 }

package/examples/extensions/markers-extension.html

@@ -31,7 +31,7 @@
             if (event.type === SQUARE_SELECT_TYPE.primary) {
                 markerType = MARKER_TYPE.dot
             } else {
-                markerType = MARKER_TYPE.circle
+                markerType = MARKER_TYPE.circlePrimary
             }
             const markersOnSquare = board1.getMarkers(markerType, event.square)
             if (markersOnSquare.length > 0) {
@@ -54,14 +54,15 @@
     board2.enableMoveInput(() => {
         return true
     })
-    const marker = {class: "marker-circle-red", slice: "markerCircle"}
+    // define your own marker
+    const myOwnMarker = {class: "marker-circle-danger", slice: "markerCircle"}
     board2.enableSquareSelect((event) => {
         if (event.type === SQUARE_SELECT_TYPE.secondary && event.mouseEvent.type === "mousedown") {
-            const markersOnSquare = board2.getMarkers(marker, event.square)
+            const markersOnSquare = board2.getMarkers(myOwnMarker, event.square)
             if (markersOnSquare.length > 0) {
-                board2.removeMarkers(marker, event.square)
+                board2.removeMarkers(myOwnMarker, event.square)
             } else {
-                board2.addMarker(marker, event.square)
+                board2.addMarker(myOwnMarker, event.square)
             }
         }
     })

package/package.json

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

package/src/cm-chessboard/extensions/markers/Markers.js

@@ -9,10 +9,14 @@ import {Svg} from "../../lib/Svg.js"
 import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
 
 export const MARKER_TYPE = {
-    square: {class: "marker-square", slice: "markerSquare"},
     frame: {class: "marker-frame", slice: "markerFrame"},
-    dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
-    circle: {class: "marker-circle", slice: "markerCircle"}
+    framePrimary: {class: "marker-frame-primary", slice: "markerFrame"},
+    frameDanger: {class: "marker-frame-danger", slice: "markerFrame"},
+    circle: {class: "marker-circle", slice: "markerCircle"},
+    circlePrimary: {class: "marker-circle-primary", slice: "markerCircle"},
+    circleDanger: {class: "marker-circle-danger", slice: "markerCircle"},
+    square: {class: "marker-square", slice: "markerSquare"},
+    dot: {class: "marker-dot", slice: "markerDot", position: 'above'}
 }
 
 export class Markers extends Extension {

package/src/cm-chessboard/view/VisualMoveInput.js

@@ -19,10 +19,11 @@ const STATE = {
 }
 
 export const MOVE_CANCELED_REASON = {
-    secondClick: "secondClick",
+    secondClick: "secondClick", // clicked the same piece
+    secondaryClick: "secondaryClick", // right click while moving
     movedOutOfBoard: "movedOutOfBoard",
-    draggedBack: "draggedBack",
-    clickedAnotherPiece: "clickedAnotherPiece"
+    draggedBack: "draggedBack", // dragged to the start square
+    clickedAnotherPiece: "clickedAnotherPiece" // of the same color
 }
 
 const DRAG_THRESHOLD = 4
@@ -84,30 +85,29 @@ export class VisualMoveInput {
                 this.startPoint = params.point
                 if (!this.pointerMoveListener && !this.pointerUpListener) {
                     if (params.type === "mousedown") {
-
                         this.pointerMoveListener = this.onPointerMove.bind(this)
                         this.pointerMoveListener.type = "mousemove"
                         addEventListener("mousemove", this.pointerMoveListener)
-
                         this.pointerUpListener = this.onPointerUp.bind(this)
                         this.pointerUpListener.type = "mouseup"
                         addEventListener("mouseup", this.pointerUpListener)
-
                     } else if (params.type === "touchstart") {
-
                         this.pointerMoveListener = this.onPointerMove.bind(this)
                         this.pointerMoveListener.type = "touchmove"
                         addEventListener("touchmove", this.pointerMoveListener)
-
                         this.pointerUpListener = this.onPointerUp.bind(this)
                         this.pointerUpListener.type = "touchend"
                         addEventListener("touchend", this.pointerUpListener)
-
                     } else {
-                        throw Error("event type")
+                        throw Error("4b74af")
+                    }
+                    if(this.contextMenuListener) {
+                        throw Error("bd272c")
                     }
+                    this.contextMenuListener = this.onContextMenu.bind(this)
+                    addEventListener("contextmenu", this.contextMenuListener)
                 } else {
-                    throw Error("_pointerMoveListener or _pointerUpListener")
+                    throw Error("94ad0c")
                 }
                 break
 
@@ -189,18 +189,22 @@ export class VisualMoveInput {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
                     this.pointerUpListener = undefined
                 }
+                if (this.contextMenuListener) {
+                    removeEventListener("contextmenu", this.contextMenuListener)
+                    this.contextMenuListener = undefined
+                }
                 this.setMoveInputState(STATE.waitForInputStart)
                 break
 
             default:
-                throw Error(`moveInputState ${newState}`)
+                throw Error(`260b09: moveInputState ${newState}`)
         }
     }
 
     createDraggablePiece(pieceName) {
         // maybe I should use the existing piece from the board and don't create a new one
         if (this.draggablePiece) {
-            throw Error("draggablePiece exists")
+            throw Error("59c195")
         }
         this.draggablePiece = Svg.createSvg(document.body)
         this.draggablePiece.classList.add("cm-chessboard-draggable-piece")
@@ -268,7 +272,7 @@ export class VisualMoveInput {
                             const startPieceName = this.chessboard.getPiece(this.fromSquare)
                             const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : undefined
                             if (color && startPieceColor === pieceColor) {
-                                this.moveInputCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.fromSquare, square)
+                                this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
                                 if (this.moveInputStartedCallback(square)) {
                                     this.setMoveInputState(STATE.pieceClickedThreshold, {
                                         square: square,
@@ -353,7 +357,7 @@ export class VisualMoveInput {
                         if (this.moveInputState === STATE.clickDragTo) {
                             this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                             this.view.setPieceVisibility(this.fromSquare)
-                            this.moveInputCanceledCallback(MOVE_CANCELED_REASON.draggedBack, square, square)
+                            this.moveInputCanceledCallback(square, null, MOVE_CANCELED_REASON.draggedBack)
                             this.setMoveInputState(STATE.reset)
                         } else {
                             this.setMoveInputState(STATE.clickTo, {square: square})
@@ -365,13 +369,13 @@ export class VisualMoveInput {
                     this.setMoveInputState(STATE.clickTo, {square: square})
                 } else if (this.moveInputState === STATE.secondClickThreshold) {
                     this.setMoveInputState(STATE.reset)
-                    this.moveInputCanceledCallback(MOVE_CANCELED_REASON.secondClick, square, square)
+                    this.moveInputCanceledCallback(square, null, MOVE_CANCELED_REASON.secondClick)
                 }
             } else {
                 this.view.redrawPieces()
                 const moveStartSquare = this.fromSquare
                 this.setMoveInputState(STATE.reset)
-                this.moveInputCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartSquare, undefined)
+                this.moveInputCanceledCallback(moveStartSquare, null, MOVE_CANCELED_REASON.movedOutOfBoard)
             }
         } else {
             this.view.redrawPieces()
@@ -379,12 +383,15 @@ export class VisualMoveInput {
         }
     }
 
-    reset() {
+    onContextMenu(e) { // while moving
+        e.preventDefault()
+        this.view.redrawPieces()
         this.setMoveInputState(STATE.reset)
+        this.moveInputCanceledCallback(this.fromSquare, null, MOVE_CANCELED_REASON.secondaryClick)
     }
 
     destroy() {
-        this.reset()
+        this.setMoveInputState(STATE.reset)
     }
 
 }