cm-chessboard 7.2.7 → 7.3.1

package/README.md

@@ -25,7 +25,7 @@ The core of cm-chessboard is small, fast and reduced to the essentials. You can
 - [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/accessibility-extension.html) - makes the chessboard more accessible
 - [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html) - renders arrows on the chessboard
 - [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html)  🆕 - create markers on specific squares
-- [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/promotion-dialog-extension.html) - shows a dialog to select the piece to promote to
+- [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/promotion-dialog-extension.html)  🆕 - shows a dialog to select the piece to promote to
 - [RenderVideo Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/render-video-extension.html)  🆕 - renders a video from the pieces movement on the board
 
 ## Demo and repository

package/index.html

@@ -31,7 +31,7 @@ It works, it is cool and it is easy to use. 👍</p>
         <li><a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
         <li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
         <li><a href="examples/extensions/markers-extension.html">Markers extension</a> 🆕</li>
-        <li><a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
+        <li><a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a> 🆕</li>
         <li><a href="examples/extensions/render-video-extension.html">RenderVideo extension</a> 🆕</li>
     </ul>
 </div>

package/package.json

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

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

@@ -7,24 +7,54 @@ import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {COLOR, PIECE} from "../../Chessboard.js"
 import {Svg} from "../../lib/Svg.js"
 import {Utils} from "../../lib/Utils.js"
+import {ANIMATION_EVENT_TYPE} from "../../view/PositionAnimationsQueue.js"
+
+const DISPLAY_STATE = {
+    hidden: "hidden",
+    displayRequested: "displayRequested",
+    shown: "shown"
+}
 
 export class PromotionDialog extends Extension {
 
     constructor(chessboard, props = {}) {
         super(chessboard, props)
-        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.redrawDialog.bind(this))
+        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.extensionPointRedrawBoard.bind(this))
+        this.registerExtensionPoint(EXTENSION_POINT.animation, this.extensionPointAnimation.bind(this))
         this.registerMethod("showPromotionDialog", this.showPromotionDialog)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "promotion-dialog-group"})
-        Utils.delegate(this.promotionDialogGroup, "click", ".promotion-dialog-button",
-            this.promotionDialogOnClickPiece.bind(this))
         this.state = {
-            isShown: false,
-            color: undefined,
-            square: undefined,
-            callback: undefined
+            displayState: DISPLAY_STATE.hidden,
+            callback: undefined,
+            dialogParams: {
+                square: undefined,
+                color: undefined
+            }
+        }
+    }
+
+    // public (registerMethod)
+    showPromotionDialog(square, color, callback) {
+        this.state.dialogParams.square = square
+        this.state.dialogParams.color = color
+        this.state.callback = callback
+        this.setDisplayState(DISPLAY_STATE.displayRequested)
+    }
+
+    // private
+    extensionPointRedrawBoard() {
+        this.redrawDialog()
+    }
+
+    extensionPointAnimation(event) {
+        if (event.type === ANIMATION_EVENT_TYPE.end) {
+            if (this.state.displayState === DISPLAY_STATE.displayRequested) {
+                this.setDisplayState(DISPLAY_STATE.shown)
+            }
         }
     }
 
+
     drawPieceButton(piece, point) {
         const squareWidth = this.chessboard.view.squareWidth
         const squareHeight = this.chessboard.view.squareHeight
@@ -38,96 +68,109 @@ export class PromotionDialog extends Extension {
     }
 
     redrawDialog() {
-        if (!this.state.square) {
-            return
+        while (this.promotionDialogGroup.firstChild) {
+            this.promotionDialogGroup.removeChild(this.promotionDialogGroup.firstChild)
         }
-        clearTimeout(this.redrawDialogDebounce)
-        this.redrawDialogDebounce = setTimeout(() => {
+        if (this.state.displayState === DISPLAY_STATE.shown) {
             const squareWidth = this.chessboard.view.squareWidth
             const squareHeight = this.chessboard.view.squareHeight
-            const squareCenterPoint = this.chessboard.view.squareToPoint(this.state.square)
+            const squareCenterPoint = this.chessboard.view.squareToPoint(this.state.dialogParams.square)
             squareCenterPoint.x = squareCenterPoint.x + squareWidth / 2
             squareCenterPoint.y = squareCenterPoint.y + squareHeight / 2
-            while (this.promotionDialogGroup.firstChild) {
-                this.promotionDialogGroup.removeChild(this.promotionDialogGroup.firstChild)
+            let turned = false
+            const rank = parseInt(this.state.dialogParams.square.charAt(1), 10)
+            if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
+                this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
+                turned = true
             }
-            if (this.state.isShown) {
-                let turned = false
-                const rank = parseInt(this.state.square.charAt(1), 10)
-                if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
-                    this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
-                    turned = true
-                }
-                const offsetY = turned ? -4 * squareHeight : 0
-                const offsetX = squareCenterPoint.x + squareWidth > this.chessboard.view.width ? -squareWidth : 0
-                Svg.addElement(this.promotionDialogGroup,
-                    "rect", {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y + offsetY,
-                        width: squareWidth,
-                        height: squareHeight * 4,
-                        class: "promotion-dialog"
-                    })
-                if (turned) {
-                    this.drawPieceButton(PIECE[this.state.color + "q"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y - squareHeight
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "r"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y - squareHeight * 2
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "b"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y - squareHeight * 3
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "n"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y - squareHeight * 4
-                    })
-                } else {
-                    this.drawPieceButton(PIECE[this.state.color + "q"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "r"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y + squareHeight
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "b"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y + squareHeight * 2
-                    })
-                    this.drawPieceButton(PIECE[this.state.color + "n"], {
-                        x: squareCenterPoint.x + offsetX,
-                        y: squareCenterPoint.y + squareHeight * 3
-                    })
-                }
+            const offsetY = turned ? -4 * squareHeight : 0
+            const offsetX = squareCenterPoint.x + squareWidth > this.chessboard.view.width ? -squareWidth : 0
+            Svg.addElement(this.promotionDialogGroup,
+                "rect", {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + offsetY,
+                    width: squareWidth,
+                    height: squareHeight * 4,
+                    class: "promotion-dialog"
+                })
+            const dialogParams = this.state.dialogParams
+            if (turned) {
+                this.drawPieceButton(PIECE[dialogParams.color + "q"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "r"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 2
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "b"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 3
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "n"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 4
+                })
+            } else {
+                this.drawPieceButton(PIECE[dialogParams.color + "q"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "r"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "b"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight * 2
+                })
+                this.drawPieceButton(PIECE[dialogParams.color + "n"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight * 3
+                })
             }
-        }, 200)
+        }
     }
 
     promotionDialogOnClickPiece(event) {
-        this.state.isShown = false
-        this.chessboard.disableSquareSelect()
-        this.state.callback({square: this.state.square, piece: event.target.dataset.piece})
-        this.redrawDialog()
+        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)
+            } else {
+                this.promotionDialogOnCancel(event)
+            }
+        }
     }
 
-    showPromotionDialog(square, color, callback) {
-        this.state.isShown = true
-        this.state.square = square
-        this.state.color = color
-        this.state.callback = callback
-        const mousedownListener = (event) => {
-            if (!event.target.dataset.piece && this.state.isShown) {
-                this.state.isShown = false
-                this.state.callback({square: this.state.square, piece: null})
-                this.redrawDialog()
-            }
-            this.chessboard.view.svg.removeEventListener("mousedown", mousedownListener)
+    promotionDialogOnCancel(event) {
+        if(this.state.displayState === DISPLAY_STATE.shown) {
+            event.preventDefault()
+            this.setDisplayState(DISPLAY_STATE.hidden)
+            this.state.callback({square: this.state.square, piece: null})
+        }
+    }
+
+    contextMenu(event) {
+        event.preventDefault()
+        this.setDisplayState(DISPLAY_STATE.hidden)
+        this.state.callback({square: this.state.square, piece: null})
+    }
+
+    setDisplayState(displayState) {
+        this.state.displayState = displayState
+        if(displayState === DISPLAY_STATE.shown) {
+            this.clickDelegate = Utils.delegate(this.chessboard.context,
+                "mousedown",
+                "*",
+                this.promotionDialogOnClickPiece.bind(this))
+            this.contextMenuListener = this.contextMenu.bind(this)
+            this.chessboard.context.addEventListener("contextmenu", this.contextMenuListener)
+        } else if(displayState === DISPLAY_STATE.hidden) {
+            this.clickDelegate.remove()
+            console.log("e16536 removeEventListener")
+            this.chessboard.context.removeEventListener("contextmenu", this.contextMenuListener)
         }
-        this.chessboard.view.svg.addEventListener("mousedown", mousedownListener)
         this.redrawDialog()
     }
 

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

@@ -5,6 +5,7 @@
  */
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+import {ANIMATION_EVENT_TYPE} from "../../view/PositionAnimationsQueue.js"
 
 export class RenderVideo extends Extension {
 
@@ -31,7 +32,7 @@ export class RenderVideo extends Extension {
         console.log("recorder mediaType", this.props.mediaType)
         this.makeSpriteInline()
         this.registerExtensionPoint(EXTENSION_POINT.animation, async (event) => {
-            if(event.event === "frame") {
+            if(event.type === ANIMATION_EVENT_TYPE.frame) {
                 if (this.recorder && this.recorder.state === "recording") {
                     await this.cloneImageAndRender()
                 }

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

@@ -12,7 +12,7 @@ import {EXTENSION_POINT} from "../model/Extension.js"
 * https://medium.com/@karenmarkosyan/how-to-manage-promises-into-dynamic-queue-with-vanilla-javascript-9d0d1f8d4df5
 */
 
-export const ANIMATION_EVENT = {
+export const ANIMATION_EVENT_TYPE = {
     start: "start",
     frame: "frame",
     end: "end"
@@ -174,7 +174,7 @@ export class PositionsAnimation {
         if (!this.startTime) {
             this.startTime = time
             this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
-                event: ANIMATION_EVENT.start
+                type: ANIMATION_EVENT_TYPE.start
             })
         }
         const timeDiff = time - this.startTime
@@ -189,7 +189,7 @@ export class PositionsAnimation {
                 }
             })
             this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
-                event: ANIMATION_EVENT.end
+                type: ANIMATION_EVENT_TYPE.end
             })
             this.callback()
             return
@@ -200,7 +200,6 @@ export class PositionsAnimation {
             progress = 1
         }
         this.animatedElements.forEach((animatedItem) => {
-            // console.log("animatedItem", animatedItem)
             if (animatedItem.element) {
                 switch (animatedItem.type) {
                     case CHANGE_TYPE.move:
@@ -223,7 +222,7 @@ export class PositionsAnimation {
             }
         })
         this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
-            event: ANIMATION_EVENT.frame,
+            type: ANIMATION_EVENT_TYPE.frame,
             progress: progress
         })
     }
@@ -254,7 +253,6 @@ export class PositionAnimationsQueue extends PromiseQueue {
                 if (this.queue.length > 0) {
                     duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
                 }
-                // console.log("duration", duration, animated, "this.chessboard.props.animationDuration", this.chessboard.props.animationDuration)
                 new PositionsAnimation(this.chessboard.view,
                     positionFrom, positionTo, animated ? duration : 0,
                     () => {