cm-chessboard 7.11.0 → 8.0.0

package/README.md

@@ -246,32 +246,6 @@ chessboard.enableMoveInput((event) => {
 
 Disables moves via user input.
 
-### enableSquareSelect(eventHandler)
-
-> `enableSquareSelect` is deprecated and will be removed in future versions, because you can directly add events to the `chessboard.context` and then read the square from `event.target.getAttribute("data-square")`.
-
-Enables primary and secondary pointer events on squares.
-On desktop devices this means left and right click on squares.
-
-```javascript
-board.enableSquareSelect((event) => {
-    switch (event.type) {
-        case SQUARE_SELECT_TYPE.primary:
-        // left click
-        case SQUARE_SELECT_TYPE.secondary:
-        // right click
-    }
-})
-```
-
-[Example for pointer events handling](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html)
-
-**`event.square`** contains the coordinates of the user input.
-
-### disableSquareSelect()
-
-Disables the square select.
-
 ## Piece sets
 
 cm-chessboard supports alternative piece sets. A piece set is defined in an SVG sprite. cm-chessboard is shipped with

package/examples/validate-moves.html

@@ -61,8 +61,8 @@
             const move = {from: event.squareFrom, to: event.squareTo, promotion: event.promotion}
             const result = chess.move(move)
             if (result) {
-                this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
-                    this.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
+                event.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
+                    event.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
                         makeEngineMove(event.chessboard)
                     })
                 })

package/package.json

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

package/src/Chessboard.js

@@ -153,54 +153,6 @@ export class Chessboard {
         this.view.disableMoveInput()
     }
 
-    /**
-     * This will be removed in the future, because you can directly assign events
-     * to the `chessboard.context` and then read the square from the `event.target`
-     * @deprecated
-     */
-    enableSquareSelect(eventHandler) {
-        console.warn("chessboard.enableSquareSelect() is deprecated will be removed in future versions");
-        if (this.squareSelectListener) {
-            console.warn("squareSelectListener already existing")
-            return
-        }
-        this.squareSelectListener = function (e) {
-            const square = e.target.getAttribute("data-square")
-            if (e.type === "contextmenu") {
-                // disable context menu
-                e.preventDefault()
-                return
-            }
-            eventHandler({
-                mouseEvent: e,
-                chessboard: this,
-                type: e.button === 2 ? SQUARE_SELECT_TYPE.secondary : SQUARE_SELECT_TYPE.primary,
-                square: square
-            })
-        }
-        this.context.addEventListener("contextmenu", this.squareSelectListener)
-        this.context.addEventListener("mousedown", this.squareSelectListener)
-        this.context.addEventListener("mouseup", this.squareSelectListener)
-        this.context.addEventListener("touchstart", this.squareSelectListener, {passive: false})
-        this.context.addEventListener("touchend", this.squareSelectListener)
-        this.state.squareSelectEnabled = true
-        this.view.visualizeInputState()
-    }
-
-    /**
-     * @deprecated
-     */
-    disableSquareSelect() {
-        this.context.removeEventListener("contextmenu", this.squareSelectListener)
-        this.context.removeEventListener("mousedown", this.squareSelectListener)
-        this.context.removeEventListener("mouseup", this.squareSelectListener)
-        this.context.removeEventListener("touchstart", this.squareSelectListener)
-        this.context.removeEventListener("touchend", this.squareSelectListener)
-        this.squareSelectListener = undefined
-        this.state.squareSelectEnabled = false
-        this.view.visualizeInputState()
-    }
-
     addExtension(extensionClass, props) {
         if(this.getExtension(extensionClass)) {
             throw Error("extension \"" + extensionClass.name + "\" already added")
@@ -219,9 +171,6 @@ export class Chessboard {
 
     destroy() {
         this.state.invokeExtensionPoints(EXTENSION_POINT.destroy)
-        if (this.state.squareSelectEnabled) {
-            this.disableSquareSelect()
-        }
         this.positionAnimationsQueue.destroy()
         this.view.destroy()
         this.view = undefined

package/src/extensions/accessibility/Accessibility.js

@@ -121,7 +121,7 @@ class MovePieceForm {
         this.moveButton = this.form.querySelector(".button-move")
         this.form.addEventListener("submit", (evt) => {
             evt.preventDefault()
-            if (this.chessboard.view.moveInputCallback({
+            if (this.chessboard.state.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.validateMoveInput,
                 squareFrom: this.inputFrom.value,

package/src/model/ChessboardState.js

@@ -12,12 +12,15 @@ export class ChessboardState {
         this.orientation = undefined
         this.inputWhiteEnabled = false
         this.inputBlackEnabled = false
-        this.inputEnabled = false
-        this.squareSelectEnabled = false
+        this.moveInputCallback = null
         this.extensionPoints = {}
         this.moveInputProcess = Promise.resolve()
     }
 
+    inputEnabled() {
+        return this.inputWhiteEnabled || this.inputBlackEnabled
+    }
+
     invokeExtensionPoints(name, data = {}) {
         const extensionPoints = this.extensionPoints[name]
         const dataCloned = Object.assign({}, data)

package/src/view/ChessboardView.js

@@ -306,7 +306,7 @@ export class ChessboardView {
     // enable and disable move input //
 
     enableMoveInput(eventHandler, color = null) {
-        if (this.moveInputCallback) {
+        if (this.chessboard.state.moveInputCallback) {
             throw Error("moveInput already enabled")
         }
         if (color === COLOR.white) {
@@ -317,8 +317,7 @@ export class ChessboardView {
             this.chessboard.state.inputWhiteEnabled = true
             this.chessboard.state.inputBlackEnabled = true
         }
-        this.chessboard.state.inputEnabled = true
-        this.moveInputCallback = eventHandler
+        this.chessboard.state.moveInputCallback = eventHandler
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: true, color: color})
         this.visualizeInputState()
     }
@@ -326,8 +325,7 @@ export class ChessboardView {
     disableMoveInput() {
         this.chessboard.state.inputWhiteEnabled = false
         this.chessboard.state.inputBlackEnabled = false
-        this.chessboard.state.inputEnabled = false
-        this.moveInputCallback = null
+        this.chessboard.state.moveInputCallback = null
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
         this.visualizeInputState()
     }
@@ -342,8 +340,8 @@ export class ChessboardView {
             squareFrom: square,
             piece: this.chessboard.getPiece(square)
         }
-        if (this.moveInputCallback) {
-            data.moveInputCallbackResult = this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         return data.moveInputCallbackResult
@@ -368,8 +366,8 @@ export class ChessboardView {
             squareTo: squareTo,
             piece: this.chessboard.getPiece(squareFrom)
         }
-        if (this.moveInputCallback) {
-            data.moveInputCallbackResult = this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         return data.moveInputCallbackResult
@@ -383,8 +381,8 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        if (this.moveInputCallback) {
-            this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
@@ -397,8 +395,8 @@ export class ChessboardView {
             squareTo: squareTo,
             legalMove: legalMove
         }
-        if (this.moveInputCallback) {
-            this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
@@ -407,7 +405,7 @@ export class ChessboardView {
 
     visualizeInputState() {
         if (this.chessboard.state) { // fix https://github.com/shaack/cm-chessboard/issues/47
-            if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled || this.chessboard.state.squareSelectEnabled) {
+            if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled) {
                 this.boardGroup.setAttribute("class", "board input-enabled")
             } else {
                 this.boardGroup.setAttribute("class", "board")

package/src/view/VisualMoveInput.js

@@ -142,7 +142,7 @@ export class VisualMoveInput {
                 if (MOVE_INPUT_STATE.pieceClickedThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
@@ -152,7 +152,7 @@ export class VisualMoveInput {
                 if (MOVE_INPUT_STATE.secondClickThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
@@ -334,7 +334,7 @@ export class VisualMoveInput {
                 } else {
                     this.setMoveInputState(MOVE_INPUT_STATE.dragTo, {square: this.fromSquare, piece: this.movedPiece})
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.moveDraggablePiece(pageX, pageY)
                 }
             }
@@ -353,7 +353,7 @@ export class VisualMoveInput {
                 this.movingOverSquareCallback(this.fromSquare, null)
             }
 
-            if (this.view.chessboard.state.inputEnabled && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
+            if (this.view.chessboard.state.inputEnabled() && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
                 this.moveDraggablePiece(pageX, pageY)
             }
         }