cm-chessboard 7.6.8 → 7.6.10

package/package.json

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

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

@@ -7,7 +7,6 @@ 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",
@@ -21,7 +20,6 @@ export class PromotionDialog extends Extension {
     constructor(chessboard) {
         super(chessboard)
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.extensionPointRedrawBoard.bind(this))
-        this.registerExtensionPoint(EXTENSION_POINT.animation, this.extensionPointAnimation.bind(this))
         chessboard.showPromotionDialog = this.showPromotionDialog.bind(this)
         chessboard.isPromotionDialogShown = this.isPromotionDialogShown.bind(this)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.interactiveTopLayer, "g", {class: "promotion-dialog-group"})
@@ -35,14 +33,21 @@ export class PromotionDialog extends Extension {
         }
     }
 
-    // public (registerMethod)
+    // public (chessboard.showPromotionDialog)
     showPromotionDialog(square, color, callback) {
         this.state.dialogParams.square = square
         this.state.dialogParams.color = color
         this.state.callback = callback
         this.setDisplayState(DISPLAY_STATE.displayRequested)
+        setTimeout(() => {
+                this.chessboard.view.positionsAnimationTask.then(() => {
+                    this.setDisplayState(DISPLAY_STATE.shown)
+                })
+            }
+        )
     }
 
+    // public (chessboard.isPromotionDialogShown)
     isPromotionDialogShown() {
         return this.state.displayState === DISPLAY_STATE.shown ||
             this.state.displayState === DISPLAY_STATE.displayRequested
@@ -53,14 +58,6 @@ export class PromotionDialog extends Extension {
         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

package/src/lib/Svg.js

@@ -28,10 +28,9 @@ export class Svg {
      * @param parent
      * @param name
      * @param attributes
-     * @param sibling // TODO remove this parameter (2023-05-22)
      * @returns {Element}
      */
-    static addElement(parent, name, attributes = {}, sibling = undefined) {
+    static addElement(parent, name, attributes = {}) {
         let element = document.createElementNS(SVG_NAMESPACE, name)
         if (name === "use") {
             attributes["xlink:href"] = attributes["href"] // fix for safari
@@ -46,11 +45,7 @@ export class Svg {
                 }
             }
         }
-        if (sibling !== undefined) {
-            parent.appendChild(element)
-        } else {
-            parent.insertBefore(element, sibling)
-        }
+        parent.appendChild(element)
         return element
     }
 

package/src/view/ChessboardView.js

@@ -30,7 +30,7 @@ export class ChessboardView {
                 window.addEventListener("resize", this.resizeListener)
             }
         }
-
+        this.positionsAnimationTask = Promise.resolve()
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.context.addEventListener("mousedown", this.pointerDownListener)

package/src/view/PositionAnimationsQueue.js

@@ -6,6 +6,7 @@
 import {FEN, Position} from "../model/Position.js"
 import {Svg} from "../lib/Svg.js"
 import {EXTENSION_POINT} from "../model/Extension.js"
+import {Utils} from "../lib/Utils.js"
 
 /*
 * Thanks to markosyan for the idea of the PromiseQueue
@@ -92,6 +93,10 @@ export class PositionsAnimation {
         } else {
             console.error("fromPosition", fromPosition, "toPosition", toPosition)
         }
+        this.view.positionsAnimationTask = Utils.createTask()
+        this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
+            type: ANIMATION_EVENT_TYPE.start
+        })
     }
 
     static seekChanges(fromSquares, toSquares) {
@@ -173,21 +178,18 @@ export class PositionsAnimation {
         }
         if (!this.startTime) {
             this.startTime = time
-            this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
-                type: ANIMATION_EVENT_TYPE.start
-            })
         }
         const timeDiff = time - this.startTime
         if (timeDiff <= this.duration) {
             this.frameHandle = requestAnimationFrame(this.animationStep.bind(this))
         } else {
             cancelAnimationFrame(this.frameHandle)
-            // console.log("ANIMATION FINISHED")
             this.animatedElements.forEach((animatedItem) => {
                 if (animatedItem.type === CHANGE_TYPE.disappear) {
                     Svg.removeElement(animatedItem.element)
                 }
             })
+            this.view.positionsAnimationTask.resolve()
             this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {
                 type: ANIMATION_EVENT_TYPE.end
             })