cm-chessboard 7.6.3 → 7.6.5

package/README.md

@@ -380,6 +380,8 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 
 ### registerMethod(name, callback)
 
+> Deprecated 2023-05-18, just add methods directly to the chessboard class instance.
+
 Add methods to the main chessboard from your extension with `this.registerMethod("name", callback)`
 like `addArrow(type, from, to)` in the
 [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "7.6.3",
+  "version": "7.6.5",
   "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.2"
+    "teevi": "^2.2.4"
   }
 }

package/src/extensions/arrows/Arrows.js

@@ -14,6 +14,8 @@ export const ARROW_TYPE = {
 }
 
 export class Arrows extends Extension {
+
+    /** @constructor */
     constructor(chessboard, props = {}) {
         super(chessboard)
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
@@ -27,9 +29,9 @@ export class Arrows extends Extension {
             this.chessboard.view.cacheSpriteToDiv("cm-chessboard-arrows",
                 this.chessboard.props.assetsUrl + "extensions/arrows/" + this.props.sprite)
         }
-        this.registerMethod("addArrow", this.addArrow)
-        this.registerMethod("getArrows", this.getArrows)
-        this.registerMethod("removeArrows", this.removeArrows)
+        chessboard.addArrow = this.addArrow.bind(this)
+        chessboard.getArrows = this.getArrows.bind(this)
+        chessboard.removeArrows = this.removeArrows.bind(this)
         this.arrowGroup = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "arrows"})
         this.arrows = []
     }

package/src/extensions/markers/Markers.js

@@ -21,6 +21,8 @@ export const MARKER_TYPE = {
 }
 
 export class Markers extends Extension {
+
+    /** @constructor */
     constructor(chessboard, props = {}) {
         super(chessboard)
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
@@ -35,9 +37,9 @@ export class Markers extends Extension {
             chessboard.view.cacheSpriteToDiv("cm-chessboard-markers", this.chessboard.props.assetsUrl +
                 "extensions/markers/" + this.props.sprite)
         }
-        this.registerMethod("addMarker", this.addMarker)
-        this.registerMethod("getMarkers", this.getMarkers)
-        this.registerMethod("removeMarkers", this.removeMarkers)
+        chessboard.addMarker = this.addMarker.bind(this)
+        chessboard.getMarkers = this.getMarkers.bind(this)
+        chessboard.removeMarkers = this.removeMarkers.bind(this)
         this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
         this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
         this.markers = []

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

@@ -17,11 +17,13 @@ const DISPLAY_STATE = {
 
 export class PromotionDialog extends Extension {
 
+    /** @constructor */
     constructor(chessboard) {
         super(chessboard)
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.extensionPointRedrawBoard.bind(this))
         this.registerExtensionPoint(EXTENSION_POINT.animation, this.extensionPointAnimation.bind(this))
-        this.registerMethod("showPromotionDialog", this.showPromotionDialog)
+        chessboard.showPromotionDialog = this.showPromotionDialog.bind(this)
+        chessboard.isPromotionDialogShown = this.isPromotionDialogShown.bind(this)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.interactiveTopLayer, "g", {class: "promotion-dialog-group"})
         this.state = {
             displayState: DISPLAY_STATE.hidden,
@@ -41,6 +43,11 @@ export class PromotionDialog extends Extension {
         this.setDisplayState(DISPLAY_STATE.displayRequested)
     }
 
+    isPromotionDialogShown() {
+        return this.state.displayState === DISPLAY_STATE.shown ||
+            this.state.displayState === DISPLAY_STATE.displayRequested
+    }
+
     // private
     extensionPointRedrawBoard() {
         this.redrawDialog()
@@ -54,7 +61,6 @@ export class PromotionDialog extends Extension {
         }
     }
 
-
     drawPieceButton(piece, point) {
         const squareWidth = this.chessboard.view.squareWidth
         const squareHeight = this.chessboard.view.squareHeight
@@ -133,7 +139,7 @@ export class PromotionDialog extends Extension {
     }
 
     promotionDialogOnClickPiece(event) {
-        if(event.button !== 2) {
+        if (event.button !== 2) {
             if (event.target.dataset.piece) {
                 this.state.callback({square: this.state.dialogParams.square, piece: event.target.dataset.piece})
                 this.setDisplayState(DISPLAY_STATE.hidden)
@@ -144,7 +150,7 @@ export class PromotionDialog extends Extension {
     }
 
     promotionDialogOnCancel(event) {
-        if(this.state.displayState === DISPLAY_STATE.shown) {
+        if (this.state.displayState === DISPLAY_STATE.shown) {
             event.preventDefault()
             this.setDisplayState(DISPLAY_STATE.hidden)
             this.state.callback(null)
@@ -159,14 +165,14 @@ export class PromotionDialog extends Extension {
 
     setDisplayState(displayState) {
         this.state.displayState = displayState
-        if(displayState === DISPLAY_STATE.shown) {
+        if (displayState === DISPLAY_STATE.shown) {
             this.clickDelegate = Utils.delegate(this.chessboard.view.svg,
                 "mousedown",
                 "*",
                 this.promotionDialogOnClickPiece.bind(this))
             this.contextMenuListener = this.contextMenu.bind(this)
             this.chessboard.view.svg.addEventListener("contextmenu", this.contextMenuListener)
-        } else if(displayState === DISPLAY_STATE.hidden) {
+        } else if (displayState === DISPLAY_STATE.hidden) {
             this.clickDelegate.remove()
             this.chessboard.view.svg.removeEventListener("contextmenu", this.contextMenuListener)
         }

package/src/extensions/render-video/RenderVideo.js

@@ -9,6 +9,7 @@ import {ANIMATION_EVENT_TYPE} from "../../view/PositionAnimationsQueue.js"
 
 export class RenderVideo extends Extension {
 
+    /** @constructor */
     constructor(chessboard, props) {
         super(chessboard)
         this.props = {
@@ -38,7 +39,7 @@ export class RenderVideo extends Extension {
                 }
             }
         })
-        this.registerMethod("recorderInit", () => {
+        chessboard.recorderInit = () => {
             return new Promise((resolve) => {
                 let all = document.querySelectorAll("svg *")
                 for (let i = 0; i < all.length; i++) {
@@ -72,8 +73,8 @@ export class RenderVideo extends Extension {
                     resolve()
                 }, 100)
             })
-        })
-        this.registerMethod("recorderStart", () => {
+        }
+        chessboard.recorderStart = () => {
             return new Promise((resolve) => {
                 if (this.recorder && this.recorder.state === "recording") {
                     console.error("recorder is running")
@@ -84,11 +85,11 @@ export class RenderVideo extends Extension {
                 console.log("recorder", this.recorder.state)
                 resolve()
             })
-        })
+        }
         /**
          * returns the url of the recorded media
          */
-        this.registerMethod("recorderStop", () => {
+        chessboard.recorderStop = () => {
             return new Promise(async (resolve, reject) => {
                 if (!this.recorder || this.recorder.state !== "recording") {
                     reject("recorder is not recording")
@@ -100,8 +101,8 @@ export class RenderVideo extends Extension {
                     resolve(URL.createObjectURL(new Blob(this.recordedData, {type: this.props.mediaType})))
                 }, 200)
             })
-        })
-        this.registerMethod("recorderPause", (ms) => {
+        }
+        chessboard.recorderPause = (ms) => {
             return new Promise(async (resolve) => {
                 await this.cloneImageAndRender()
                 const interval = setInterval(async () => {
@@ -113,7 +114,7 @@ export class RenderVideo extends Extension {
                     resolve()
                 }, ms)
             })
-        })
+        }
     }
 
     async cloneImageAndRender() {

package/src/model/Extension.js

@@ -27,7 +27,9 @@ export class Extension {
         this.chessboard.state.extensionPoints[name].push(callback)
     }
 
+    /** @deprecated 2023-05-18 */
     registerMethod(name, callback) {
+        console.warn("registerMethod is deprecated, just add methods directly to the chessboard instance")
         if (!this.chessboard[name]) {
             this.chessboard[name] = (...args) => {
                 return callback.apply(this, args)