cm-chessboard 7.6.9 → 7.6.11

package/README.md

@@ -451,10 +451,12 @@ you can call `chessboard.removeArrows(undefined, "e2")` and so on...
 
 To get all arrows, call `chessboard.getArrows()` without parameters, as with `removeArrows(type, from, to)`.
 
-## Usage with React
+## Usage with JS Frameworks
 
-There exists a ticket from someone who is using cm-chessboard with react:
-https://github.com/shaack/cm-chessboard/issues/20
+- Works with **Vue** out of the box
+- Works with **Svelte** out of the box
+- I don't use **React**, but there exists a ticket from someone who is using cm-chessboard with react: https://github.com/shaack/cm-chessboard/issues/20
+- It should work also with **all other JS frameworks**, because cm-chessboard is written in standard ES6 and has **no dependencies**.
 
 ## Licenses
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "7.6.9",
+  "version": "7.6.11",
   "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/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)
@@ -64,7 +64,7 @@ export class ChessboardView {
     cacheSpriteToDiv(wrapperId, url) {
         if (!document.getElementById(wrapperId)) {
             const wrapper = document.createElement("div")
-            wrapper.style.display = "none"
+            wrapper.style.transform = "scale(0)"
             wrapper.id = wrapperId
             document.body.appendChild(wrapper)
             const xhr = new XMLHttpRequest()

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
             })