cm-chessboard 6.0.3 → 7.0.1

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,29 @@ 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)
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
 
     validateMoveInputCallback(squareFrom, squareTo) {
@@ -419,10 +372,10 @@ export class ChessboardView {
         // 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 +418,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))
             }

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

@@ -4,7 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {Svg} from "./ChessboardView.js"
+import {Svg} from "../lib/Svg.js"
 import {createTask} from "../model/ChessboardState.js"
 
 const STATE = {
@@ -29,23 +29,26 @@ const DRAG_THRESHOLD = 4
 
 export class VisualMoveInput {
 
-    constructor(view, moveInputStartedCallback, validateMoveInputCallback, moveInputCanceledCallback) {
+    constructor(view, moveInputStartedCallback, movingOverSquareCallback, validateMoveInputCallback, moveInputCanceledCallback) {
         this.view = view
         this.chessboard = view.chessboard
         this.moveInputStartedCallback = (square) => {
             const result = moveInputStartedCallback(square)
-            if(result) {
+            if (result) {
                 this.chessboard.state.moveInputProcess = createTask()
             }
             return result
         }
+        this.movingOverSquareCallback = (fromSquare, toSquare) => {
+            movingOverSquareCallback(fromSquare, toSquare)
+        }
         this.validateMoveInputCallback = (fromSquare, toSquare) => {
             const result = validateMoveInputCallback(fromSquare, toSquare)
             this.chessboard.state.moveInputProcess.resolve(result)
             return result
         }
-        this.moveInputCanceledCallback = (reason, fromSquare, toSquare) => {
-            moveInputCanceledCallback(reason, fromSquare, toSquare)
+        this.moveInputCanceledCallback = (fromSquare, toSquare, reason) => {
+            moveInputCanceledCallback(fromSquare, toSquare, reason)
             this.chessboard.state.moveInputProcess.resolve()
         }
         this.setMoveInputState(STATE.waitForInputStart)
@@ -205,11 +208,11 @@ export class VisualMoveInput {
         this.draggablePiece.setAttribute("height", this.view.squareHeight)
         this.draggablePiece.setAttribute("style", "pointer-events: none")
         this.draggablePiece.name = pieceName
-        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.view.getSpriteUrl()
         const piece = Svg.addElement(this.draggablePiece, "use", {
             href: `${spriteUrl}#${pieceName}`
         })
-        const scaling = this.view.squareHeight / this.chessboard.props.sprite.size
+        const scaling = this.view.squareHeight / this.chessboard.props.style.pieces.tileSize
         const transformScale = (this.draggablePiece.createSVGTransform())
         transformScale.setScale(scaling, scaling)
         piece.transform.baseVal.appendItem(transformScale)
@@ -317,12 +320,15 @@ export class VisualMoveInput {
                 const square = target.getAttribute("data-square")
                 if (square !== this.fromSquare && square !== this.toSquare) {
                     this.toSquare = square
+                    this.movingOverSquareCallback(this.fromSquare, this.toSquare)
                 } else if (square === this.fromSquare && this.toSquare !== undefined) {
                     this.toSquare = undefined
+                    this.movingOverSquareCallback(this.fromSquare, null)
                 }
             } else {
                 if (this.toSquare !== undefined) {
                     this.toSquare = undefined
+                    this.movingOverSquareCallback(this.fromSquare, null)
                 }
             }
             if (this.view.chessboard.state.inputEnabled && (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo)) {

package/test/TestBoard.js

@@ -13,7 +13,7 @@ describe("TestBoard", () => {
     // https://github.com/shaack/cm-chessboard/issues/47
     it("should create and immediately destroy a board without failure", () => {
         const chessboard = new Chessboard(document.getElementById("TestBoard"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
             position: FEN.start
         })
         chessboard.destroy()
@@ -21,7 +21,7 @@ describe("TestBoard", () => {
 
     it("should create and destroy a board", () => {
         const chessboard = new Chessboard(document.getElementById("TestBoard"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
             position: FEN.start
         })
         assert.equal(chessboard.view.context.childNodes.length, 1)

package/test/TestChessboard.js

@@ -12,7 +12,7 @@ describe("TestChessboard", () => {
 
     it("should create and destroy a chessboard", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
             position: FEN.start
         })
         assert.equal(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
@@ -21,7 +21,7 @@ describe("TestChessboard", () => {
 
     it("should set and get the position", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"),
-            {sprite: {url: "../assets/images/chessboard-sprite.svg"},})
+            {assetsUrl: "../assets/"})
         chessboard.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11", false).then(() => {
             assert.equal(chessboard.getPosition(), "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
             chessboard.destroy()
@@ -30,7 +30,7 @@ describe("TestChessboard", () => {
 
     it("should get pieces on squares", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
             position: FEN.start
         })
         assert.equal(chessboard.getPiece("d1"), "wq")
@@ -41,7 +41,7 @@ describe("TestChessboard", () => {
 
     it("should set pieces on squares", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
         })
         chessboard.setPiece("a1", PIECE.bk)
         assert.equal(chessboard.getPiece("a1"), "bk")

package/test/TestMarkers.js

@@ -12,7 +12,7 @@ describe("TestMarkers", () => {
 
     it("should set and get markers", () => {
         const chessboard = new Chessboard(document.getElementById("TestMarkers"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            assetsUrl: "../assets/",
             extensions: [{class: Markers}]
         })
         chessboard.addMarker(MARKER_TYPE.square, "e5")

package/test/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Test cm-chessboard</title>
     <link rel="stylesheet" href="../examples/styles/examples.css"/>
-    <link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
+    <link rel="stylesheet" href="../assets/chessboard/chessboard.css"/>
     <style>
         .board {
             position: absolute;