cm-chessboard 6.0.4 → 7.0.2

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

@@ -5,7 +5,8 @@
  */
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-import {Svg} from "../../view/ChessboardView.js"
+import {Svg} from "../../lib/Svg.js"
+import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
 
 export const MARKER_TYPE = {
     square: {class: "marker-square", slice: "markerSquare"},
@@ -15,27 +16,20 @@ export const MARKER_TYPE = {
 }
 
 export class Markers extends Extension {
-    constructor(chessboard, props) {
+    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 = {
+            autoMarkers: MARKER_TYPE.frame, // set to `null` to disable autoMarkers
+            sprite: "markers.svg" // the sprite file of the markers
         }
-        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.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)
@@ -43,6 +37,22 @@ export class Markers extends Extension {
         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)
+            this.registerExtensionPoint(EXTENSION_POINT.moveInput, (event) => {
+                this.removeMarkers(this.autoMarker)
+                if (event.type === INPUT_EVENT_TYPE.moveInputStarted ||
+                    event.type === INPUT_EVENT_TYPE.movingOverSquare ||
+                    event.type === INPUT_EVENT_TYPE.validateMoveInput) {
+                    if(event.squareFrom) {
+                        this.addMarker(this.autoMarker, event.squareFrom)
+                    }
+                    if(event.squareTo) {
+                        this.addMarker(this.autoMarker, event.squareTo)
+                    }
+                }
+            })
+        }
     }
 
     onRedrawBoard() {
@@ -70,7 +80,8 @@ export class Markers extends Extension {
         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 spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.props.assetsUrl +
+            "extensions/markers/" + this.props.sprite
         const markerUse = Svg.addElement(markerGroup, "use",
             {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
         const transformScale = (this.chessboard.view.svg.createSVGTransform())

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

@@ -5,17 +5,17 @@
  */
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {COLOR, PIECE} from "../../Chessboard.js"
-import {DomUtils, Svg} from "../../view/ChessboardView.js"
+import {Svg} from "../../lib/Svg.js"
+import {Utils} from "../../lib/Utils.js"
 
 export class PromotionDialog extends Extension {
 
-    constructor(chessboard, props) {
+    constructor(chessboard, props = {}) {
         super(chessboard, props)
-
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.redrawDialog.bind(this))
         this.registerMethod("showPromotionDialog", this.showPromotionDialog)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "promotion-dialog-group"})
-        DomUtils.delegate(this.promotionDialogGroup, "click", ".promotion-dialog-button",
+        Utils.delegate(this.promotionDialogGroup, "click", ".promotion-dialog-button",
             this.promotionDialogOnClickPiece.bind(this))
         this.state = {
             isShown: false,
@@ -23,7 +23,6 @@ export class PromotionDialog extends Extension {
             square: undefined,
             callback: undefined
         }
-
     }
 
     drawPieceButton(piece, point) {
@@ -121,7 +120,6 @@ export class PromotionDialog extends Extension {
         this.state.color = color
         this.state.callback = callback
         const mousedownListener = (event) => {
-            // console.log("98c265", event)
             if (!event.target.dataset.piece && this.state.isShown) {
                 this.state.isShown = false
                 this.state.callback({square: this.state.square, piece: null})

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

@@ -146,10 +146,13 @@ export class RenderVideo extends Extension {
         document.body.appendChild(wrapper)
         const svg = this.chessboard.view.svg
         const xhr = new XMLHttpRequest()
-        xhr.open("GET", this.chessboard.props.sprite.url, true)
+        xhr.open("GET", this.chessboard.view.getSpriteUrl(), true)
         xhr.onload = function () {
             const doc = new DOMParser().parseFromString(xhr.response, "text/xml")
-            svg.prepend(doc.getElementById("Sprite-PD"))
+            const pieces = doc.querySelectorAll("svg>g")
+            for (const piece of pieces) {
+                svg.prepend(piece)
+            }
         }
         xhr.send()
     }

package/src/cm-chessboard/lib/I18n.js

@@ -0,0 +1,44 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export const piecesTranslations = {
+    en: {
+        colors: {
+            w: "w", b: "b"
+        },
+        colors_long: {
+            w: "White", b: "Black"
+        },
+        pieces: {
+            p: "p", n: "n", b: "b", r: "r", q: "q", k: "k"
+        },
+        pieces_long: {
+            p: "Pawn", n: "Knight", b: "Bishop", r: "Rook", q: "Queen", k: "King"
+        }
+    },
+    de: {
+        colors: {
+            w: "w", b: "s"
+        },
+        colors_long: {
+            w: "Weiß", b: "Schwarz"
+        },
+        pieces: {
+            p: "b", n: "s", b: "l", r: "t", q: "d", k: "k"
+        },
+        pieces_long: {
+            p: "Bauer", n: "Springer", b: "Läufer", r: "Turm", q: "Dame", k: "König"
+        }
+    }
+}
+
+export function renderPieceTitle(lang, name, color = undefined) {
+    let title = piecesTranslations[lang].pieces_long[name]
+    if (color) {
+        title += " " + piecesTranslations[lang].colors_long[color]
+    }
+    return title
+}

package/src/cm-chessboard/lib/Svg.js

@@ -0,0 +1,69 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg"
+
+export class Svg {
+
+    /**
+     * create the Svg in the HTML DOM
+     * @param containerElement
+     * @returns {Element}
+     */
+    static createSvg(containerElement = undefined) {
+        let svg = document.createElementNS(SVG_NAMESPACE, "svg")
+        if (containerElement) {
+            svg.setAttribute("width", "100%")
+            svg.setAttribute("height", "100%")
+            containerElement.appendChild(svg)
+        }
+        return svg
+    }
+
+    /**
+     * Add an Element to a SVG DOM
+     * @param parent
+     * @param name
+     * @param attributes
+     * @param sibling
+     * @returns {Element}
+     */
+    static addElement(parent, name, attributes, sibling = undefined) {
+        let element = document.createElementNS(SVG_NAMESPACE, name)
+        if (name === "use") {
+            attributes["xlink:href"] = attributes["href"] // fix for safari
+        }
+        for (let attribute in attributes) {
+            if (attributes.hasOwnProperty(attribute)) {
+                if (attribute.indexOf(":") !== -1) {
+                    const value = attribute.split(":")
+                    element.setAttributeNS("http://www.w3.org/1999/" + value[0], value[1], attributes[attribute])
+                } else {
+                    element.setAttribute(attribute, attributes[attribute])
+                }
+            }
+        }
+        if (sibling !== undefined) {
+            parent.appendChild(element)
+        } else {
+            parent.insertBefore(element, sibling)
+        }
+        return element
+    }
+
+    /**
+     * Remove an Element from a SVG DOM
+     * @param element
+     */
+    static removeElement(element) {
+        if (element.parentNode) {
+            element.parentNode.removeChild(element)
+        } else {
+            console.warn(element, "without parentNode")
+        }
+    }
+
+}

package/src/cm-chessboard/lib/Utils.js

@@ -0,0 +1,41 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export class Utils {
+
+    static delegate(element, eventName, selector, handler) {
+        const eventListener = function (event) {
+            let target = event.target
+            while (target && target !== this) {
+                if (target.matches(selector)) {
+                    handler.call(target, event)
+                }
+                target = target.parentNode
+            }
+        }
+        element.addEventListener(eventName, eventListener)
+        return {
+            remove: function () {
+                element.removeEventListener(eventName, eventListener)
+            }
+        }
+    }
+
+    static mergeObjects(target, source) {
+        const isObject = (obj) => obj && typeof obj === 'object'
+        if (!isObject(target) || !isObject(source)) {
+            return source
+        }
+        for (const key of Object.keys(source)) {
+            if (source[key] instanceof Object) {
+                Object.assign(source[key], Utils.mergeObjects(target[key], source[key]))
+            }
+        }
+        Object.assign(target || {}, source)
+        return target
+    }
+
+}

package/src/cm-chessboard/model/Extension.js

@@ -8,9 +8,9 @@ export const EXTENSION_POINT = {
     positionChanged: "positionChanged", // the positions of the pieces was changed
     boardChanged: "boardChanged", // the board (orientation) was changed
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
-    moveInput: "moveInput", // move started, to validate or canceled
+    moveInput: "moveInput", // move started, moving over a square, validating or canceled
     redrawBoard: "redrawBoard", // called after redrawing the board
-    animation: "animation", // called on every animation frame
+    animation: "animation", // called on animation start, end and on every animation frame
     destroy: "destroy" // called, before the board is destroyed
 }
 

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

@@ -8,57 +8,18 @@ import {VisualMoveInput} from "./VisualMoveInput.js"
 import {BORDER_TYPE, COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
 import {Position} from "../model/Position.js"
 import {EXTENSION_POINT} from "../model/Extension.js"
-
-export const piecesTranslations = {
-    en: {
-        colors: {
-            w: "w", b: "b"
-        },
-        colors_long: {
-            w: "White", b: "Black"
-        },
-        pieces: {
-            p: "p", n: "n", b: "b", r: "r", q: "q", k: "k"
-        },
-        pieces_long: {
-            p: "Pawn", n: "Knight", b: "Bishop", r: "Rook", q: "Queen", k: "King"
-        }
-    },
-    de: {
-        colors: {
-            w: "w", b: "s"
-        },
-        colors_long: {
-            w: "Weiß", b: "Schwarz"
-        },
-        pieces: {
-            p: "b", n: "s", b: "l", r: "t", q: "d", k: "k"
-        },
-        pieces_long: {
-            p: "Bauer", n: "Springer", b: "Läufer", r: "Turm", q: "Dame", k: "König"
-        }
-    }
-}
-
-export function renderPieceTitle(lang, name, color = undefined) {
-    let title = piecesTranslations[lang].pieces_long[name]
-    if (color) {
-        title += " " + piecesTranslations[lang].colors_long[color]
-    }
-    return title
-}
+import {Svg} from "../lib/Svg.js"
 
 export class ChessboardView {
-
     constructor(chessboard) {
         this.chessboard = chessboard
         this.moveInput = new VisualMoveInput(this,
             this.moveInputStartedCallback.bind(this),
+            this.movingOverSquareCallback.bind(this),
             this.validateMoveInputCallback.bind(this),
-            this.moveInputCanceledCallback.bind(this)
-        )
-        if (chessboard.props.sprite.cache) {
-            this.cacheSpriteToDiv("chessboardSpriteCache", this.chessboard.props.sprite.url)
+            this.moveInputCanceledCallback.bind(this))
+        if (chessboard.props.assetsCache) {
+            this.cacheSpriteToDiv("cm-chessboard-sprite", this.getSpriteUrl())
         }
         this.context = document.createElement("div")
         this.chessboard.context.appendChild(this.context)
@@ -143,6 +104,7 @@ export class ChessboardView {
     }
 
     updateMetrics() {
+        const piecesTileSize = this.chessboard.props.style.pieces.tileSize
         this.width = this.context.clientWidth
         this.height = this.context.clientWidth * (this.chessboard.props.style.aspectRatio || 1)
         if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
@@ -156,16 +118,15 @@ export class ChessboardView {
         this.innerHeight = this.height - 2 * this.borderSize
         this.squareWidth = this.innerWidth / 8
         this.squareHeight = this.innerHeight / 8
-        this.scalingX = this.squareWidth / this.chessboard.props.sprite.size
-        this.scalingY = this.squareHeight / this.chessboard.props.sprite.size
-        this.pieceXTranslate = (this.squareWidth / 2 - this.chessboard.props.sprite.size * this.scalingY / 2)
+        this.scalingX = this.squareWidth / piecesTileSize
+        this.scalingY = this.squareHeight / piecesTileSize
+        this.pieceXTranslate = (this.squareWidth / 2 - piecesTileSize * this.scalingY / 2)
     }
 
     handleResize() {
         this.context.style.width = this.chessboard.context.clientWidth + "px"
         this.context.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
-        if (this.context.clientWidth !== this.width ||
-            this.context.clientHeight !== this.height) {
+        if (this.context.clientWidth !== this.width || this.context.clientHeight !== this.height) {
             this.updateMetrics()
             this.redrawBoard()
             this.redrawPieces()
@@ -193,10 +154,7 @@ export class ChessboardView {
         if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
             const innerPos = this.borderSize
             let borderInner = Svg.addElement(this.boardGroup, "rect", {
-                x: innerPos,
-                y: innerPos,
-                width: this.width - innerPos * 2,
-                height: this.height - innerPos * 2
+                x: innerPos, y: innerPos, width: this.width - innerPos * 2, height: this.height - innerPos * 2
             })
             borderInner.setAttribute("class", "border-inner")
         }
@@ -223,7 +181,7 @@ export class ChessboardView {
         }
         const inline = this.chessboard.props.style.borderType !== BORDER_TYPE.frame
         for (let file = 0; file < 8; file++) {
-            let x = this.borderSize + (17 + this.chessboard.props.sprite.size * file) * this.scalingX
+            let x = this.borderSize + (17 + this.chessboard.props.style.pieces.tileSize * file) * this.scalingX
             let y = this.height - this.scalingY * 3.5
             let cssClass = "coordinate file"
             if (inline) {
@@ -231,10 +189,7 @@ export class ChessboardView {
                 cssClass += file % 2 ? " white" : " black"
             }
             const textElement = Svg.addElement(this.coordinatesGroup, "text", {
-                class: cssClass,
-                x: x,
-                y: y,
-                style: `font-size: ${this.scalingY * 10}px`
+                class: cssClass, x: x, y: y, style: `font-size: ${this.scalingY * 10}px`
             })
             if (this.chessboard.state.orientation === COLOR.white) {
                 textElement.textContent = String.fromCharCode(97 + file)
@@ -257,10 +212,7 @@ export class ChessboardView {
                 }
             }
             const textElement = Svg.addElement(this.coordinatesGroup, "text", {
-                class: cssClass,
-                x: x,
-                y: y,
-                style: `font-size: ${this.scalingY * 10}px`
+                class: cssClass, x: x, y: y, style: `font-size: ${this.scalingY * 10}px`
             })
             if (this.chessboard.state.orientation === COLOR.white) {
                 textElement.textContent = "" + (8 - rank)
@@ -288,31 +240,20 @@ export class ChessboardView {
     drawPiece(parentGroup, pieceName, point) {
         const pieceGroup = Svg.addElement(parentGroup, "g", {})
         pieceGroup.setAttribute("data-piece", pieceName)
-        pieceGroup.setAttribute("class", "piece-group")
         const transform = (this.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         pieceGroup.transform.baseVal.appendItem(transform)
-        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
         const pieceUse = Svg.addElement(pieceGroup, "use", {
-            href: `${spriteUrl}#${pieceName}`,
-            class: "piece"
+            href: `${spriteUrl}#${pieceName}`, class: "piece"
         })
         const transformScale = (this.svg.createSVGTransform())
         transformScale.setScale(this.scalingY, this.scalingY)
         pieceUse.transform.baseVal.appendItem(transformScale)
-        const transformTranslate = (this.svg.createSVGTransform())
-        transformTranslate.setTranslate(this.pieceXTranslate, 0)
-        pieceUse.transform.baseVal.appendItem(transformTranslate)
         return pieceGroup
     }
 
     drawPieceOnSquare(square, pieceName) {
-        const point = this.squareToPoint(square)
-        const pieceGroup = this.drawPiece(this.piecesGroup, pieceName, point)
-        pieceGroup.setAttribute("data-square", square)
-        return pieceGroup
-
-        /*
         const pieceGroup = Svg.addElement(this.piecesGroup, "g", {})
         pieceGroup.setAttribute("data-piece", pieceName)
         pieceGroup.setAttribute("data-square", square)
@@ -320,24 +261,24 @@ export class ChessboardView {
         const transform = (this.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         pieceGroup.transform.baseVal.appendItem(transform)
-        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
         const pieceUse = Svg.addElement(pieceGroup, "use", {
-            href: `${spriteUrl}#${pieceName}`,
-            class: "piece"
+            href: `${spriteUrl}#${pieceName}`, class: "piece"
         })
         // center on square
         const transformTranslate = (this.svg.createSVGTransform())
         transformTranslate.setTranslate(this.pieceXTranslate, 0)
         pieceUse.transform.baseVal.appendItem(transformTranslate)
-
-         */
-
-        // return pieceGroup
+        // scale
+        const transformScale = (this.svg.createSVGTransform())
+        transformScale.setScale(this.scalingY, this.scalingY)
+        pieceUse.transform.baseVal.appendItem(transformScale)
+        return pieceGroup
     }
 
     setPieceVisibility(square, visible = true) {
         const piece = this.getPieceElement(square)
-        if(piece) {
+        if (piece) {
             if (visible) {
                 piece.setAttribute("visibility", "visible")
             } else {
@@ -391,17 +332,32 @@ export class ChessboardView {
         const data = {
             chessboard: this.chessboard,
             type: INPUT_EVENT_TYPE.moveInputStarted,
-            square: square,
+            square: square, // TODO this one is deprecated 2023-03-18
+            squareFrom: square,
             piece: this.chessboard.getPiece(square)
         }
         if (this.moveInputCallback) {
             // the "oldschool" move input validator
-            data.moveInputCallbackResult =  this.moveInputCallback(data)
+            data.moveInputCallbackResult = this.moveInputCallback(data)
         }
         // the new extension points
         const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
-        // validates, when moveInputCallbackResult and extensionPointsResult are true
-        return !(extensionPointsResult === false || !data.moveInputCallbackResult);
+        // validates, when moveInputCallbackResult and extensionPointsResults are true
+        return !(extensionPointsResult === false || !data.moveInputCallbackResult)
+    }
+
+    movingOverSquareCallback(squareFrom, squareTo) {
+        const data = {
+            chessboard: this.chessboard,
+            type: INPUT_EVENT_TYPE.movingOverSquare,
+            squareFrom: squareFrom,
+            squareTo: squareTo,
+            piece: this.chessboard.getPiece(squareFrom)
+        }
+        if (this.moveInputCallback) {
+            data.moveInputCallbackResult = this.moveInputCallback(data)
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
 
     validateMoveInputCallback(squareFrom, squareTo) {
@@ -413,16 +369,15 @@ export class ChessboardView {
             piece: this.chessboard.getPiece(squareFrom)
         }
         if (this.moveInputCallback) {
-            // the "oldschool" move input validator
             data.moveInputCallbackResult = this.moveInputCallback(data)
         }
         // the new extension points
         const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         // validates, when moveInputCallbackResult and extensionPointsResult are true
-        return !(extensionPointsResult === false || !data.moveInputCallbackResult);
+        return !(extensionPointsResult === false || !data.moveInputCallbackResult)
     }
 
-    moveInputCanceledCallback(reason, squareFrom, squareTo) {
+    moveInputCanceledCallback(squareFrom, squareTo, reason) {
         const data = {
             chessboard: this.chessboard,
             type: INPUT_EVENT_TYPE.moveInputCanceled,
@@ -465,88 +420,7 @@ export class ChessboardView {
         return this.indexToPoint(index)
     }
 
-}
-
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg"
-
-export class Svg {
-
-    /**
-     * create the Svg in the HTML DOM
-     * @param containerElement
-     * @returns {Element}
-     */
-    static createSvg(containerElement = undefined) {
-        let svg = document.createElementNS(SVG_NAMESPACE, "svg")
-        if (containerElement) {
-            svg.setAttribute("width", "100%")
-            svg.setAttribute("height", "100%")
-            containerElement.appendChild(svg)
-        }
-        return svg
-    }
-
-    /**
-     * Add an Element to a SVG DOM
-     * @param parent
-     * @param name
-     * @param attributes
-     * @param sibling
-     * @returns {Element}
-     */
-    static addElement(parent, name, attributes, sibling = undefined) {
-        let element = document.createElementNS(SVG_NAMESPACE, name)
-        if (name === "use") {
-            attributes["xlink:href"] = attributes["href"] // fix for safari
-        }
-        for (let attribute in attributes) {
-            if (attributes.hasOwnProperty(attribute)) {
-                if (attribute.indexOf(":") !== -1) {
-                    const value = attribute.split(":")
-                    element.setAttributeNS("http://www.w3.org/1999/" + value[0], value[1], attributes[attribute])
-                } else {
-                    element.setAttribute(attribute, attributes[attribute])
-                }
-            }
-        }
-        if (sibling !== undefined) {
-          parent.appendChild(element)
-        } else {
-          parent.insertBefore(element, sibling)
-        }
-        return element
-    }
-
-    /**
-     * Remove an Element from a SVG DOM
-     * @param element
-     */
-    static removeElement(element) {
-        if(element.parentNode) {
-            element.parentNode.removeChild(element)
-        } else {
-            console.warn(element, "without parentNode")
-        }
-    }
-
-}
-
-export class DomUtils {
-    static delegate(element, eventName, selector, handler) {
-        const eventListener = function (event) {
-            let target = event.target
-            while (target && target !== this) {
-                if (target.matches(selector)) {
-                    handler.call(target, event)
-                }
-                target = target.parentNode
-            }
-        }
-        element.addEventListener(eventName, eventListener)
-        return {
-            remove: function () {
-                element.removeEventListener(eventName, eventListener)
-            }
-        }
+    getSpriteUrl() {
+        return this.chessboard.props.assetsUrl + "chessboard/pieces/" + this.chessboard.props.style.pieces.file
     }
 }

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

@@ -4,7 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
 import {FEN, Position} from "../model/Position.js"
-import {Svg} from "./ChessboardView.js"
+import {Svg} from "../lib/Svg.js"
 import {EXTENSION_POINT} from "../model/Extension.js"
 
 /*
@@ -250,7 +250,7 @@ export class PositionAnimationsQueue extends PromiseQueue {
             return Promise.resolve()
         } else {
             return super.enqueue(() => new Promise((resolve) => {
-                let duration = animated ? this.chessboard.props.animationDuration : 0
+                let duration = animated ? this.chessboard.props.style.animationDuration : 0
                 if (this.queue.length > 0) {
                     duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
                 }
@@ -271,7 +271,7 @@ export class PositionAnimationsQueue extends PromiseQueue {
     async enqueueTurnBoard(position, color, animated) {
         return super.enqueue(() => new Promise((resolve) => {
             const emptyPosition = new Position(FEN.empty)
-            let duration = animated ? this.chessboard.props.animationDuration : 0
+            let duration = animated ? this.chessboard.props.style.animationDuration : 0
             if(this.queue.length > 0) {
                 duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
             }