cm-chessboard 6.0.2 → 6.0.3

package/README.md

@@ -8,7 +8,7 @@ in [chess-console](https://shaack.com/projekte/chess-console/examples/load-pgn.h
 [cm-fen-editor](https://shaack.com/projekte/cm-fen-editor/). They are all nice written ES6 Modules to handle different
 aspects of chess games.
 
-> Note: With Version 6 **markers** have been moves to an extension, see the [Input callbacks example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html).
+> Note: With Version 6 **markers** have been moved to an extension, see the [Input callbacks example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html).
 
 ## Features
 
@@ -24,7 +24,7 @@ aspects of chess games.
 - [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
 - [Markers Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-markers-extension.html)  🆕
 - [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-promotion-dialog-extension.html)
-- [RenderVideo](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-render-video-extension.html)  🆕
+- [RenderVideo Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-render-video-extension.html)  🆕
 
 ## Demo and repository
 
@@ -137,7 +137,7 @@ Returns the board position as `fen`.
 
 ### addMarker(type, square)
 
-> signature changed with V5.1 from (square, type) to (type, square)
+> Moved to the Markers extension with version 6
 
 Adds a marker on a square.
 
@@ -156,7 +156,7 @@ below.
 
 ### getMarkers(type = undefined, square = undefined)
 
-> signature changed with V5.1 from (square, type) to (type, square)
+> Moved to the Markers extension with version 6
 
 Returns the board's markers as an array.
 
@@ -166,7 +166,7 @@ Set `both` to `undefined` to get all markers on the board.
 
 ### removeMarkers(type = undefined, square = undefined)
 
-> signature changed with V5.1 from (square, type) to (type, square)
+> Moved to the Markers extension with version 6
 
 Removes markers from the board.
 

package/package.json

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

package/src/cm-chessboard/extensions/arrows/Arrows.js

@@ -1,5 +1,5 @@
 /**
- * Author and copyright: Barak Michener (@barakmich)
+ * Authors and copyright: Barak Michener (@barakmich) and Stefan Haack (@shaack)
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */

package/src/cm-chessboard/extensions/markers/Markers.js

@@ -1,132 +1,137 @@
+/**
+ * Authors and copyright: Laura Campo Alberca (@lauracampoalberca) and Stefan Haack (@shaack)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {Svg} from "../../view/ChessboardView.js"
 
 export const MARKER_TYPE = {
-	square: {class: "marker-square", slice: "markerSquare"},
-	frame: {class: "marker-frame", slice: "markerFrame"},
-	dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
-	circle: {class: "marker-circle", slice: "markerCircle"}
+    square: {class: "marker-square", slice: "markerSquare"},
+    frame: {class: "marker-frame", slice: "markerFrame"},
+    dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
+    circle: {class: "marker-circle", slice: "markerCircle"}
 }
 
 export class Markers extends Extension {
-	constructor(chessboard, props) {
-		super(chessboard, props)
-		this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
-			this.onRedrawBoard()
-		})
-		let defaultProps = {
-			style: {
-				moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
-				moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
-			},
-			sprite: chessboard.props.sprite
-		}
-		this.props = {}
-		Object.assign(this.props, defaultProps)
-		Object.assign(this.props, props)
-		this.props.sprite = defaultProps.sprite
-		if (props && props.sprite) {
-			Object.assign(this.props.sprite, props.sprite)
-		}
-		if (this.props.sprite.cache) {
-			this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
-		}
-		this.registerMethod("addMarker", this.addMarker)
-		this.registerMethod("getMarkers", this.getMarkers)
-		this.registerMethod("removeMarkers", this.removeMarkers)
-		this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
-		this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
-		this.markers = []
-	}
+    constructor(chessboard, props) {
+        super(chessboard, props)
+        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
+            this.onRedrawBoard()
+        })
+        let defaultProps = {
+            style: {
+                moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
+                moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
+            },
+            sprite: chessboard.props.sprite
+        }
+        this.props = {}
+        Object.assign(this.props, defaultProps)
+        Object.assign(this.props, props)
+        this.props.sprite = defaultProps.sprite
+        if (props && props.sprite) {
+            Object.assign(this.props.sprite, props.sprite)
+        }
+        if (this.props.sprite.cache) {
+            this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
+        }
+        this.registerMethod("addMarker", this.addMarker)
+        this.registerMethod("getMarkers", this.getMarkers)
+        this.registerMethod("removeMarkers", this.removeMarkers)
+        this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
+        this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
+        this.markers = []
+    }
 
-	onRedrawBoard() {
-		while (this.markerGroupUp.firstChild) {
-			this.markerGroupUp.removeChild(this.markerGroupUp.firstChild)
-		}
-		while (this.markerGroupDown.firstChild) {
-			this.markerGroupDown.removeChild(this.markerGroupDown.firstChild)
-		}
-		this.markers.forEach((marker) => {
-				this.drawMarker(marker)
-			}
-		)
-	}
+    onRedrawBoard() {
+        while (this.markerGroupUp.firstChild) {
+            this.markerGroupUp.removeChild(this.markerGroupUp.firstChild)
+        }
+        while (this.markerGroupDown.firstChild) {
+            this.markerGroupDown.removeChild(this.markerGroupDown.firstChild)
+        }
+        this.markers.forEach((marker) => {
+                this.drawMarker(marker)
+            }
+        )
+    }
 
-	drawMarker(marker) {
-		let markerGroup;
-		if (marker.type.position === 'above') {
-			markerGroup = Svg.addElement(this.markerGroupUp, "g")
-		} else {
-			markerGroup = Svg.addElement(this.markerGroupDown, "g")
-		}
-		markerGroup.setAttribute("data-square", marker.square)
-		const point = this.chessboard.view.squareToPoint(marker.square)
-		const transform = (this.chessboard.view.svg.createSVGTransform())
-		transform.setTranslate(point.x, point.y)
-		markerGroup.transform.baseVal.appendItem(transform)
-		const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
-		const markerUse = Svg.addElement(markerGroup, "use",
-			{href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
-		const transformScale = (this.chessboard.view.svg.createSVGTransform())
-		transformScale.setScale(this.chessboard.view.scalingX, this.chessboard.view.scalingY)
-		markerUse.transform.baseVal.appendItem(transformScale)
-		return markerGroup
-	}
+    drawMarker(marker) {
+        let markerGroup
+        if (marker.type.position === 'above') {
+            markerGroup = Svg.addElement(this.markerGroupUp, "g")
+        } else {
+            markerGroup = Svg.addElement(this.markerGroupDown, "g")
+        }
+        markerGroup.setAttribute("data-square", marker.square)
+        const point = this.chessboard.view.squareToPoint(marker.square)
+        const transform = (this.chessboard.view.svg.createSVGTransform())
+        transform.setTranslate(point.x, point.y)
+        markerGroup.transform.baseVal.appendItem(transform)
+        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const markerUse = Svg.addElement(markerGroup, "use",
+            {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
+        const transformScale = (this.chessboard.view.svg.createSVGTransform())
+        transformScale.setScale(this.chessboard.view.scalingX, this.chessboard.view.scalingY)
+        markerUse.transform.baseVal.appendItem(transformScale)
+        return markerGroup
+    }
 
-	addMarker(type, square) {
-		if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
-			console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
-			return
-		}
-		this.markers.push(new Marker(square, type))
-		this.onRedrawBoard()
-	}
+    addMarker(type, square) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
+            return
+        }
+        this.markers.push(new Marker(square, type))
+        this.onRedrawBoard()
+    }
 
-	getMarkers(type = undefined, square = undefined) {
-		if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
-			console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
-			return
-		}
-		let markersFound = []
-		this.markers.forEach((marker) => {
-			if (marker.matches(square, type)) {
-				markersFound.push(marker)
-			}
-		})
-		return markersFound
-	}
+    getMarkers(type = undefined, square = undefined) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
+            return
+        }
+        let markersFound = []
+        this.markers.forEach((marker) => {
+            if (marker.matches(square, type)) {
+                markersFound.push(marker)
+            }
+        })
+        return markersFound
+    }
 
-	removeMarkers(type = undefined, square = undefined) {
-		if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
-			console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
-			return
-		}
-		this.markers = this.markers.filter((marker) => !marker.matches(square, type))
-		this.onRedrawBoard()
-	}
+    removeMarkers(type = undefined, square = undefined) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
+            return
+        }
+        this.markers = this.markers.filter((marker) => !marker.matches(square, type))
+        this.onRedrawBoard()
+    }
 }
 
 class Marker {
-	constructor(square, type) {
-		this.square = square
-		this.type = type
-	}
+    constructor(square, type) {
+        this.square = square
+        this.type = type
+    }
 
-	matches(square = undefined, type = undefined) {
-		if (!type && !square) {
-			return true
-		} else if (!type) {
-			if (square === this.square) {
-				return true
-			}
-		} else if (!square) {
-			if (this.type === type) {
-				return true
-			}
-		} else if (this.type === type && square === this.square) {
-			return true
-		}
-		return false
-	}
+    matches(square = undefined, type = undefined) {
+        if (!type && !square) {
+            return true
+        } else if (!type) {
+            if (square === this.square) {
+                return true
+            }
+        } else if (!square) {
+            if (this.type === type) {
+                return true
+            }
+        } else if (this.type === type && square === this.square) {
+            return true
+        }
+        return false
+    }
 }

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

@@ -168,6 +168,9 @@ export class PositionsAnimation {
 
     animationStep(time) {
         // console.log("animationStep", time)
+        if(!this.view || !this.view.chessboard.state) { // board was destroyed
+            return
+        }
         if (!this.startTime) {
             this.startTime = time
             this.view.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.animation, {

package/test/TestMarkers.js

@@ -5,13 +5,15 @@
  */
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {Chessboard, MARKER_TYPE} from "../src/cm-chessboard/Chessboard.js"
+import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
 
 describe("TestMarkers", () => {
 
     it("should set and get markers", () => {
         const chessboard = new Chessboard(document.getElementById("TestMarkers"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"}
+            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            extensions: [{class: Markers}]
         })
         chessboard.addMarker(MARKER_TYPE.square, "e5")
         chessboard.addMarker(MARKER_TYPE.frame, "b6")