cm-chessboard 8.1.4 → 8.2.0

package/examples/responsive-board.html

@@ -23,7 +23,7 @@ new Chessboard(document.getElementById("board"), {
         extensions: [{class: AutoBorderNone}]
     })
 </pre>
-<p>Also uses the "AutoBorderNone" extension to switch off the frame border below 560px width.</p>
+<p>This example also uses the "AutoBorderNone" extension, which switches off the frame border on smaller boards.</p>
 <script type="module">
     import {BORDER_TYPE, Chessboard} from "../src/Chessboard.js"
     import {FEN} from "../src/model/Position.js"
@@ -32,6 +32,7 @@ new Chessboard(document.getElementById("board"), {
     new Chessboard(document.getElementById("board"), {
         position: FEN.start,
         assetsUrl: "../assets/",
+        debug: true,
         style: {
             aspectRatio: 0.9,
             pieces: {file: "pieces/staunty.svg"},

package/package.json

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

package/src/Chessboard.js

@@ -89,7 +89,7 @@ export class Chessboard {
         this.state.position = new Position(this.props.position)
         this.view.redrawPieces()
         this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
-        this.initialized = Promise.resolve()
+        this.initialized = Promise.resolve() // deprecated 2023-09-19 don't use this anymore
     }
 
     // API //

package/src/extensions/auto-border-none/AutoBorderNone.js

@@ -10,16 +10,21 @@ export class AutoBorderNone extends Extension {
         super(chessboard)
         this.props = {
             chessboardBorderType: chessboard.props.style.borderType,
-            borderNoneBelow: 550 // pixels width of the board, where the border is set to none
+            borderNoneBelow: 540 // pixels width of the board, where the border is set to none
         }
         Object.assign(this.props, props)
         this.registerExtensionPoint(EXTENSION_POINT.beforeRedrawBoard, this.extensionPointBeforeRedrawBoard.bind(this))
     }
     extensionPointBeforeRedrawBoard() {
+        let newBorderType
         if(this.chessboard.view.width < this.props.borderNoneBelow){
-            this.chessboard.props.style.borderType = "none"
+            newBorderType = "none"
         } else {
-            this.chessboard.props.style.borderType = this.props.chessboardBorderType
+            newBorderType = this.props.chessboardBorderType
+        }
+        if(newBorderType !== this.chessboard.props.style.borderType) {
+            this.chessboard.props.style.borderType = newBorderType
+            this.chessboard.view.updateMetrics()
         }
     }
 }

package/src/extensions/persistence/Persistence.js

@@ -11,9 +11,7 @@ export class Persistence extends Extension {
         console.warn("The Persistence extension is work in progress, don't use it in production.")
         this.props = props
         this.registerExtensionPoint(EXTENSION_POINT.positionChanged, this.savePosition.bind(this))
-        chessboard.initialized.then(() => {
-            this.loadPosition()
-        })
+        this.loadPosition()
     }
 
     savePosition() {
@@ -28,4 +26,4 @@ export class Persistence extends Extension {
             this.chessboard.setPosition(this.props.initialPosition)
         }
     }
-}
+}

package/src/view/ChessboardView.js

@@ -36,11 +36,7 @@ export class ChessboardView {
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.container.addEventListener("mousedown", this.pointerDownListener)
         this.container.addEventListener("touchstart", this.pointerDownListener, {passive: false})
-
         this.createSvgAndGroups()
-        // this.updateMetrics()
-        this.handleResize()
-        // this.redrawBoard()
     }
 
     pointerDownHandler(e) {