kokopu-react 1.5.3 → 1.5.4

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 ChangeLog
 =========
 
+1.5.4 (May 1, 2022)
+-------------------
+* Provide method `Chessboard#size(..)` to retrieve the width/height of a `Chessboard` component instance.
+
 1.5.3 (April 30, 2022)
 ----------------------
 * Add method `Movetext#focus()`.

package/README.md

@@ -3,7 +3,7 @@ Kokopu-React
 
 <img align="right" width="96" height="96" src="graphics/logo.svg" />
 
-Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard components.
+Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard and chess-related components.
 Kokopu-React is built on top of [Kokopu](https://www.npmjs.com/package/kokopu), a headless library that
 implements all the chess logic (game rules, parsing of [FEN](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
 and [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) formats...).

package/dist/lib/Chessboard.js

@@ -984,6 +984,46 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function getArrowTipId(color) {
       return 'kokopu-arrowTip-' + color + '-' + this.arrowTipIdSuffix;
     }
+    /**
+     * Return the size of the chessboard, assuming it is built with the given attributes.
+     *
+     * @param {number} squareSize
+     * @param {boolean} coordinateVisible
+     * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
+     * @returns {{width:number, height:number}}
+     * @public
+     */
+
+  }], [{
+    key: "size",
+    value: function size(squareSize, coordinateVisible, smallScreenLimits) {
+      // Enforce small-screen limits, if any.
+      if (typeof window !== 'undefined') {
+        var squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
+        var coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
+
+        if (!isNaN(squareSizeLimit)) {
+          squareSize = (0, _util.sanitizeInteger)(squareSizeLimit, _util.MIN_SQUARE_SIZE, squareSize);
+        }
+
+        coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
+      } // Compute the dimensions.
+
+
+      var width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+      var height = 8 * squareSize;
+
+      if (coordinateVisible) {
+        var fontSize = computeCoordinateFontSize(squareSize);
+        width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
+        height += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
+      }
+
+      return {
+        width: width,
+        height: height
+      };
+    }
     /**
      * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
      *
@@ -995,7 +1035,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      * @public
      */
 
-  }], [{
+  }, {
     key: "adaptSquareSize",
     value: function adaptSquareSize(width, height, coordinateVisible, smallScreenLimits) {
       var maxSquareSize = _util.MAX_SQUARE_SIZE; // Enforce small-screen limits, if any.

package/dist/lib/Movetext.js

@@ -96,7 +96,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-movetext"
-      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField());
+      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField(info.game));
     }
   }, {
     key: "renderHeaders",
@@ -233,7 +233,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderFocusField",
-    value: function renderFocusField() {
+    value: function renderFocusField(game) {
       var _this2 = this;
 
       if (this.props.interactionMode !== 'selectMove') {
@@ -247,7 +247,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         href: "#",
         ref: this.focusFieldRef,
         onKeyDown: function onKeyDown(evt) {
-          return _this2.handleKeyDownInFocusField(evt);
+          return _this2.handleKeyDownInFocusField(evt, game);
         }
       }));
     }
@@ -522,7 +522,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleKeyDownInFocusField",
-    value: function handleKeyDownInFocusField(evt) {
+    value: function handleKeyDownInFocusField(evt, game) {
       if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
         return;
       }
@@ -533,9 +533,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var _parseGame = parseGame(this.props.game, this.props.gameIndex),
-          game = _parseGame.game;
-
       var nodeId = undefined;
       var evtOrigin = '';
 

package/doc_src/home.md

@@ -1,4 +1,4 @@
-Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard components.
+Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard and chess-related components.
 Kokopu-React is built on top of [Kokopu](https://www.npmjs.com/package/kokopu), a headless library that
 implements all the chess logic (game rules, parsing of [FEN](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
 and [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) formats...).

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.3",
-	"description": "A React-based library to create and display chessboard components.",
+	"version": "1.5.4",
+	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
 		"react",

package/src/Chessboard.js

@@ -623,6 +623,38 @@ export default class Chessboard extends React.Component {
 		return 'kokopu-arrowTip-' + color + '-' + this.arrowTipIdSuffix;
 	}
 
+	/**
+	 * Return the size of the chessboard, assuming it is built with the given attributes.
+	 *
+	 * @param {number} squareSize
+	 * @param {boolean} coordinateVisible
+	 * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
+	 * @returns {{width:number, height:number}}
+	 * @public
+	 */
+	static size(squareSize, coordinateVisible, smallScreenLimits) {
+
+		// Enforce small-screen limits, if any.
+		if (typeof window !== 'undefined') {
+			let squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
+			let coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
+			if (!isNaN(squareSizeLimit)) {
+				squareSize = sanitizeInteger(squareSizeLimit, MIN_SQUARE_SIZE, squareSize);
+			}
+			coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
+		}
+
+		// Compute the dimensions.
+		let width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+		let height = 8 * squareSize;
+		if (coordinateVisible) {
+			let fontSize = computeCoordinateFontSize(squareSize);
+			width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
+			height += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
+		}
+		return { width: width, height: height };
+	}
+
 	/**
 	 * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
 	 *

package/src/Movetext.js

@@ -52,7 +52,7 @@ export default class Movetext extends React.Component {
 			<div className="kokopu-movetext">
 				{this.renderHeaders(info.game)}
 				{this.renderBody(info.game)}
-				{this.renderFocusField()}
+				{this.renderFocusField(info.game)}
 			</div>
 		);
 	}
@@ -132,13 +132,13 @@ export default class Movetext extends React.Component {
 		return <div className="kokopu-header-annotator" key="annotator">{sanitizeHtml(annotator)}</div>;
 	}
 
-	renderFocusField() {
+	renderFocusField(game) {
 		if (this.props.interactionMode !== 'selectMove') {
 			return undefined;
 		}
 		return (
 			<div className="kokopu-focusFieldContainer">
-				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDownInFocusField(evt)}></a>
+				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDownInFocusField(evt, game)}></a>
 			</div>
 		);
 	}
@@ -330,7 +330,7 @@ export default class Movetext extends React.Component {
 		return comment ? comment : undefined;
 	}
 
-	handleKeyDownInFocusField(evt) {
+	handleKeyDownInFocusField(evt, game) {
 		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
 			return;
 		}
@@ -338,7 +338,6 @@ export default class Movetext extends React.Component {
 		if (!this.props.selection) {
 			return;
 		}
-		let { game } = parseGame(this.props.game, this.props.gameIndex);
 		let nodeId = undefined;
 		let evtOrigin = '';
 		if (evt.key === 'Home') {

package/test/2_chessboard_util.js

@@ -24,19 +24,33 @@ let { Chessboard } = require('../build/test_headless/index');
 let test = require('unit.js');
 
 
+function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
+	test.value(Chessboard.adaptSquareSize(width, height, coordinateVisible, smallScreenLimits)).is(expectedSquareSize);
+
+	let actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
+	test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
+}
+
+function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
+	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits);
+
+	let actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
+	test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
+}
+
 describe('Adapt square-size', () => {
 
 	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, false)).is(Chessboard.minSquareSize()); });
 	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999, true)).is(Chessboard.maxSquareSize()); });
 
-	it('Size 185x300 with coordinates', () => { test.value(Chessboard.adaptSquareSize(185, 300, true)).is(19); });
-	it('Size 185x300 without coordinates', () => { test.value(Chessboard.adaptSquareSize(185, 300, false)).is(20); });
-	it('Size 300x200 with coordinates', () => { test.value(Chessboard.adaptSquareSize(300, 200, true)).is(23); });
-	it('Size 300x200 without coordinates', () => { test.value(Chessboard.adaptSquareSize(300, 200, false)).is(25); });
-	it('Size 375x500 with coordinates', () => { test.value(Chessboard.adaptSquareSize(375, 500, true)).is(40); });
-	it('Size 375x500 without coordinates', () => { test.value(Chessboard.adaptSquareSize(375, 500, false)).is(41); });
-	it('Size 600x450 with coordinates', () => { test.value(Chessboard.adaptSquareSize(600, 450, true)).is(54); });
-	it('Size 600x450 without coordinates', () => { test.value(Chessboard.adaptSquareSize(600, 450, false)).is(56); });
+	it('Size 185x300 with coordinates', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true));
+	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false));
+	it('Size 300x200 with coordinates', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true));
+	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false));
+	it('Size 375x500 with coordinates', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true));
+	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false));
+	it('Size 600x450 with coordinates', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true));
+	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false));
 });
 
 describe('Adapt square-size with small-screen limits', () => {
@@ -58,18 +72,18 @@ describe('Adapt square-size with small-screen limits', () => {
 
 	it('Window-limited', () => {
 		window.innerWidth = 640;
-		test.value(Chessboard.adaptSquareSize(9999, 9999, true, limits)).is(32);
+		testAdaptSquareSize(32, 9999, 9999, true, limits);
 	});
 	it('Available-space-limited 1', () => {
 		window.innerWidth = 800;
-		test.value(Chessboard.adaptSquareSize(375, 500, true, limits)).is(40);
+		testAdaptSquareSize(40, 375, 500, true, limits);
 	});
 	it('Available-space-limited 2', () => {
 		window.innerWidth = 800;
-		test.value(Chessboard.adaptSquareSize(375, 500, false, limits)).is(41);
+		testAdaptSquareSize(41, 375, 500, false, limits);
 	});
 	it('Force hidden coordinates', () => {
 		window.innerWidth = 600;
-		test.value(Chessboard.adaptSquareSize(185, 300, true, limits)).is(20);
+		testAdaptSquareSize(20, 185, 300, true, limits);
 	});
 });