cm-chessboard 7.6.2 → 7.6.4

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/examples/enable-input.html

@@ -47,7 +47,7 @@ function inputHandler(event) {
 <script type="module">
     import {INPUT_EVENT_TYPE, Chessboard} from "../src/Chessboard.js"
     import {FEN} from "../src/model/Position.js"
-    import {MARKER_TYPE, Markers} from "../src/extensions/markers/Markers.js"
+    import {Markers} from "../src/extensions/markers/Markers.js"
 
     window.board = new Chessboard(document.getElementById("board"), {
         position: FEN.start,
@@ -59,8 +59,7 @@ function inputHandler(event) {
     window.board.enableMoveInput(inputHandler)
 
     function inputHandler(event) {
-        console.log(event)
-        window.board.removeMarkers(MARKER_TYPE.frame)
+        // console.log(event)
         switch (event.type) {
             case INPUT_EVENT_TYPE.moveInputStarted:
                 log(`moveInputStarted: ${event.square}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "7.6.2",
+  "version": "7.6.4",
   "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, () => {
@@ -31,19 +33,18 @@ export class Markers extends Extension {
             sprite: "markers.svg" // the sprite file of the markers
         }
         Object.assign(this.props, props)
-        this.autoMarker = {}
         if (chessboard.props.assetsCache) {
             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 = []
         if (this.props.autoMarkers) {
-            Object.assign(this.autoMarker, this.props.autoMarkers)
+            Object.assign(this.props.autoMarkers, this.props.autoMarkers)
             this.registerExtensionPoint(EXTENSION_POINT.moveInput, (event) => {
                 this.drawAutoMarkers(event)
             })
@@ -51,7 +52,9 @@ export class Markers extends Extension {
     }
 
     drawAutoMarkers(event) {
-        this.removeMarkers(this.autoMarker)
+        if(event.type !== INPUT_EVENT_TYPE.moveInputFinished) {
+            this.removeMarkers(this.props.autoMarkers)
+        }
         if (event.type === INPUT_EVENT_TYPE.moveInputStarted &&
             !event.moveInputCallbackResult) {
             return
@@ -59,10 +62,10 @@ export class Markers extends Extension {
         if (event.type === INPUT_EVENT_TYPE.moveInputStarted ||
             event.type === INPUT_EVENT_TYPE.movingOverSquare) {
             if (event.squareFrom) {
-                this.addMarker(this.autoMarker, event.squareFrom)
+                this.addMarker(this.props.autoMarkers, event.squareFrom)
             }
             if (event.squareTo) {
-                this.addMarker(this.autoMarker, event.squareTo)
+                this.addMarker(this.props.autoMarkers, event.squareTo)
             }
         }
     }

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

@@ -17,11 +17,12 @@ 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)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.interactiveTopLayer, "g", {class: "promotion-dialog-group"})
         this.state = {
             displayState: DISPLAY_STATE.hidden,

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)