kokopu-react 1.5.2 → 1.5.5

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 ChangeLog
 =========
 
+1.5.5 (May 18, 2022)
+--------------------
+* Upgrade dependencies.
+* Remove dependency with security issue.
+
+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()`.
+* Expose static methods `Movetext#firstNodeId(..)`, `Movetext#previousNodeId(..)`, `Movetext#nextNodeId(..)`
+and `Movetext#lastNodeId(..)`.
+
 1.5.2 (April 29, 2022)
 ----------------------
 * Prevent default actions when handling key events in component `Movetext`.

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,47 +522,33 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleKeyDownInFocusField",
-    value: function handleKeyDownInFocusField(evt) {
-      if (evt.key === 'Home' || evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'End') {
-        evt.preventDefault();
+    value: function handleKeyDownInFocusField(evt, game) {
+      if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
+        return;
       }
 
+      evt.preventDefault();
+
       if (!this.props.selection) {
         return;
       }
 
-      var game = parseGame(this.props.game, this.props.gameIndex).game;
-      var nodeId = false;
+      var nodeId = undefined;
       var evtOrigin = '';
 
-      if (this.props.selection === 'start') {
-        if (evt.key === 'ArrowRight') {
-          nodeId = getNextNodeId(game.mainVariation(), true);
-          evtOrigin = 'key-next';
-        } else if (evt.key === 'End') {
-          nodeId = getLastNodeId(game.mainVariation(), true);
-          evtOrigin = 'key-last';
-        }
+      if (evt.key === 'Home') {
+        nodeId = Movetext.firstNodeId(game, this.props.selection);
+        evtOrigin = 'key-first';
+      } else if (evt.key === 'ArrowLeft') {
+        nodeId = Movetext.previousNodeId(game, this.props.selection);
+        evtOrigin = 'key-previous';
+      } else if (evt.key === 'ArrowRight') {
+        nodeId = Movetext.nextNodeId(game, this.props.selection);
+        evtOrigin = 'key-next';
       } else {
-        var currentNode = game.findById(this.props.selection);
-
-        if (!currentNode) {
-          return;
-        }
-
-        if (evt.key === 'Home') {
-          nodeId = 'start';
-          evtOrigin = 'key-first';
-        } else if (evt.key === 'ArrowLeft') {
-          nodeId = getPreviousNodeId(currentNode);
-          evtOrigin = 'key-previous';
-        } else if (evt.key === 'ArrowRight') {
-          nodeId = getNextNodeId(currentNode, false);
-          evtOrigin = 'key-next';
-        } else if (evt.key === 'End') {
-          nodeId = getLastNodeId(currentNode, false);
-          evtOrigin = 'key-last';
-        }
+        // evt.key === 'End'
+        nodeId = Movetext.lastNodeId(game, this.props.selection);
+        evtOrigin = 'key-last';
       }
 
       if (nodeId && this.props.onMoveSelected) {
@@ -572,7 +558,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleNodeClicked",
     value: function handleNodeClicked(nodeId) {
-      this.focusFieldRef.current.focus();
+      this.focus();
 
       if (this.props.onMoveSelected) {
         this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
@@ -612,6 +598,139 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         };
       }
     }
+    /**
+     * Set the focus to the current component.
+     *
+     * @public
+     */
+
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.focusFieldRef.current.focus();
+    }
+    /**
+     * Return the ID of the main variation in the given chess game.
+     * If the given selection corresponds already at the main variation, `undefined` is returned.
+     *
+     * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
+     *
+     * @param {kokopu.Game} game Considered chess game.
+     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+     * @returns {string?}
+     * @public
+     */
+
+  }], [{
+    key: "firstNodeId",
+    value: function firstNodeId(game, selection) {
+      if (!game.findById(selection)) {
+        return undefined;
+      }
+
+      return selection === 'start' ? undefined : 'start';
+    }
+    /**
+     * Return the ID of the node immediately preceding the given selection in the given chess game.
+     * If no such node exists, `undefined` is returned.
+     *
+     * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
+     *
+     * @param {kokopu.Game} game Considered chess game.
+     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+     * @returns {string?}
+     * @public
+     */
+
+  }, {
+    key: "previousNodeId",
+    value: function previousNodeId(game, selection) {
+      var currentNode = game.findById(selection);
+
+      if (!currentNode) {
+        return undefined;
+      }
+
+      if (selection === 'start') {
+        return undefined;
+      } else if (selection.endsWith('start')) {
+        currentNode = currentNode.parentNode(); // `.parentNode()` returns always non-null ref here
+      }
+
+      while (currentNode) {
+        var previousNode = currentNode.previous();
+
+        if (previousNode) {
+          return previousNode.id();
+        }
+
+        currentNode = currentNode.parentVariation().parentNode();
+      }
+
+      return 'start';
+    }
+    /**
+     * Return the ID of the node immediately following the given selection in the given chess game.
+     * If no such node exists, `undefined` is returned.
+     *
+     * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
+     *
+     * @param {kokopu.Game} game Considered chess game.
+     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+     * @returns {string?}
+     * @public
+     */
+
+  }, {
+    key: "nextNodeId",
+    value: function nextNodeId(game, selection) {
+      var currentNode = game.findById(selection);
+
+      if (!currentNode) {
+        return undefined;
+      }
+
+      var nextNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
+      return nextNode ? nextNode.id() : undefined;
+    }
+    /**
+     * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
+     * If the selection is already at the end its variation, `undefined` is returned.
+     *
+     * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
+     *
+     * @param {kokopu.Game} game Considered chess game.
+     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+     * @returns {string?}
+     * @public
+     */
+
+  }, {
+    key: "lastNodeId",
+    value: function lastNodeId(game, selection) {
+      var currentNode = game.findById(selection);
+
+      if (!currentNode) {
+        return undefined;
+      }
+
+      currentNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
+
+      if (!currentNode) {
+        // Ensure that the input node is not already the last one.
+        return undefined;
+      }
+
+      while (true) {
+        var nextNode = currentNode.next();
+
+        if (!nextNode) {
+          return currentNode.id();
+        }
+
+        currentNode = nextNode;
+      }
+    }
   }]);
 
   return Movetext;
@@ -779,41 +898,6 @@ function figurineNotation(text, fontName) {
 
   return result;
 }
-
-function getPreviousNodeId(currentNode) {
-  var previousNode = currentNode.previous();
-
-  if (previousNode) {
-    return previousNode.id();
-  } else {
-    var parentNode = currentNode.parentVariation().parentNode();
-    return parentNode ? getPreviousNodeId(parentNode) : 'start';
-  }
-}
-
-function getNextNodeId(currentNode, isVariation) {
-  var nextNode = isVariation ? currentNode.first() : currentNode.next();
-  return nextNode ? nextNode.id() : false;
-}
-
-function getLastNodeId(currentNode, isVariation) {
-  currentNode = isVariation ? currentNode.first() : currentNode.next();
-
-  if (!currentNode) {
-    // Ensure that the input node is not already the last one.
-    return false;
-  }
-
-  while (true) {
-    var nextNode = currentNode.next();
-
-    if (!nextNode) {
-      return currentNode.id();
-    }
-
-    currentNode = nextNode;
-  }
-}
 /**
  * Try to interpret the given object as a chess game.
  */

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/graphic_test_app/16_movetext_interaction.js

@@ -39,4 +39,5 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1w" />,
 	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="6b" />,
 	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="invalid-id" />,
+	<Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-start" />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.2",
-	"description": "A React-based library to create and display chessboard components.",
+	"version": "1.5.5",
+	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
 		"react",
@@ -29,41 +29,40 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"htmlparser2": "^7.2.0",
-		"kokopu": "^2.7.0",
+		"htmlparser2": "^8.0.1",
+		"kokopu": "^2.8.0",
 		"prop-types": "^15.8.1",
 		"react": "^17.0.2",
 		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.6",
-		"@babel/core": "^7.17.9",
-		"@babel/preset-env": "^7.16.11",
-		"@babel/preset-react": "^7.16.7",
+		"@babel/cli": "^7.17.10",
+		"@babel/core": "^7.17.12",
+		"@babel/preset-env": "^7.17.12",
+		"@babel/preset-react": "^7.17.12",
 		"@emotion/react": "^11.9.0",
 		"@emotion/styled": "^11.8.1",
-		"@mui/material": "^5.6.3",
+		"@mui/material": "^5.8.0",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
-		"copy-webpack-plugin": "^10.2.4",
+		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.14.0",
+		"eslint": "^8.15.0",
 		"eslint-plugin-react": "^7.29.4",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.2.2",
+		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"prompt": "^1.3.0",
 		"react-dom": "^17.0.2",
 		"react-styleguidist": "^11.2.0",
 		"selenium-webdriver": "^4.1.2",
-		"ssh2-sftp-client": "^8.0.0",
+		"ssh2-sftp-client": "^8.1.0",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.72.0",
+		"webpack": "^5.72.1",
 		"webpack-cli": "^4.9.2"
 	},
 	"scripts": {

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,47 +330,31 @@ export default class Movetext extends React.Component {
 		return comment ? comment : undefined;
 	}
 
-	handleKeyDownInFocusField(evt) {
-		if (evt.key === 'Home' || evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'End') {
-			evt.preventDefault();
+	handleKeyDownInFocusField(evt, game) {
+		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
+			return;
 		}
+		evt.preventDefault();
 		if (!this.props.selection) {
 			return;
 		}
-		let game = parseGame(this.props.game, this.props.gameIndex).game;
-		let nodeId = false;
+		let nodeId = undefined;
 		let evtOrigin = '';
-		if (this.props.selection === 'start') {
-			if (evt.key === 'ArrowRight') {
-				nodeId = getNextNodeId(game.mainVariation(), true);
-				evtOrigin = 'key-next';
-			}
-			else if (evt.key === 'End') {
-				nodeId = getLastNodeId(game.mainVariation(), true);
-				evtOrigin = 'key-last';
-			}
+		if (evt.key === 'Home') {
+			nodeId = Movetext.firstNodeId(game, this.props.selection);
+			evtOrigin = 'key-first';
 		}
-		else {
-			let currentNode = game.findById(this.props.selection);
-			if (!currentNode) {
-				return;
-			}
-			if (evt.key === 'Home') {
-				nodeId = 'start';
-				evtOrigin = 'key-first';
-			}
-			else if (evt.key === 'ArrowLeft') {
-				nodeId = getPreviousNodeId(currentNode);
-				evtOrigin = 'key-previous';
-			}
-			else if (evt.key === 'ArrowRight') {
-				nodeId = getNextNodeId(currentNode, false);
-				evtOrigin = 'key-next';
-			}
-			else if (evt.key === 'End') {
-				nodeId = getLastNodeId(currentNode, false);
-				evtOrigin = 'key-last';
-			}
+		else if (evt.key === 'ArrowLeft') {
+			nodeId = Movetext.previousNodeId(game, this.props.selection);
+			evtOrigin = 'key-previous';
+		}
+		else if (evt.key === 'ArrowRight') {
+			nodeId = Movetext.nextNodeId(game, this.props.selection);
+			evtOrigin = 'key-next';
+		}
+		else { // evt.key === 'End'
+			nodeId = Movetext.lastNodeId(game, this.props.selection);
+			evtOrigin = 'key-last';
 		}
 		if (nodeId && this.props.onMoveSelected) {
 			this.props.onMoveSelected(nodeId, evtOrigin);
@@ -378,7 +362,7 @@ export default class Movetext extends React.Component {
 	}
 
 	handleNodeClicked(nodeId) {
-		this.focusFieldRef.current.focus();
+		this.focus();
 		if (this.props.onMoveSelected) {
 			this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
 		}
@@ -403,6 +387,114 @@ export default class Movetext extends React.Component {
 			return notation => notation;
 		}
 	}
+
+	/**
+	 * Set the focus to the current component.
+	 *
+	 * @public
+	 */
+	focus() {
+		this.focusFieldRef.current.focus();
+	}
+
+	/**
+	 * Return the ID of the main variation in the given chess game.
+	 * If the given selection corresponds already at the main variation, `undefined` is returned.
+	 *
+	 * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
+	 *
+	 * @param {kokopu.Game} game Considered chess game.
+	 * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+	 * @returns {string?}
+	 * @public
+	 */
+	static firstNodeId(game, selection) {
+		if (!game.findById(selection)) {
+			return undefined;
+		}
+		return selection === 'start' ? undefined : 'start';
+	}
+
+	/**
+	 * Return the ID of the node immediately preceding the given selection in the given chess game.
+	 * If no such node exists, `undefined` is returned.
+	 *
+	 * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
+	 *
+	 * @param {kokopu.Game} game Considered chess game.
+	 * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+	 * @returns {string?}
+	 * @public
+	 */
+	static previousNodeId(game, selection) {
+		let currentNode = game.findById(selection);
+		if (!currentNode) {
+			return undefined;
+		}
+		if (selection === 'start') {
+			return undefined;
+		}
+		else if (selection.endsWith('start')) {
+			currentNode = currentNode.parentNode(); // `.parentNode()` returns always non-null ref here
+		}
+		while (currentNode) {
+			let previousNode = currentNode.previous();
+			if (previousNode) {
+				return previousNode.id();
+			}
+			currentNode = currentNode.parentVariation().parentNode();
+		}
+		return 'start';
+	}
+
+	/**
+	 * Return the ID of the node immediately following the given selection in the given chess game.
+	 * If no such node exists, `undefined` is returned.
+	 *
+	 * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
+	 *
+	 * @param {kokopu.Game} game Considered chess game.
+	 * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+	 * @returns {string?}
+	 * @public
+	 */
+	static nextNodeId(game, selection) {
+		let currentNode = game.findById(selection);
+		if (!currentNode) {
+			return undefined;
+		}
+		let nextNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
+		return nextNode ? nextNode.id() : undefined;
+	}
+
+	/**
+	 * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
+	 * If the selection is already at the end its variation, `undefined` is returned.
+	 *
+	 * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
+	 *
+	 * @param {kokopu.Game} game Considered chess game.
+	 * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
+	 * @returns {string?}
+	 * @public
+	 */
+	static lastNodeId(game, selection) {
+		let currentNode = game.findById(selection);
+		if (!currentNode) {
+			return undefined;
+		}
+		currentNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
+		if (!currentNode) { // Ensure that the input node is not already the last one.
+			return undefined;
+		}
+		while (true) {
+			let nextNode = currentNode.next();
+			if (!nextNode) {
+				return currentNode.id();
+			}
+			currentNode = nextNode;
+		}
+	}
 }
 
 
@@ -569,39 +661,6 @@ function figurineNotation(text, fontName) {
 }
 
 
-function getPreviousNodeId(currentNode) {
-	let previousNode = currentNode.previous();
-	if (previousNode) {
-		return previousNode.id();
-	}
-	else {
-		let parentNode = currentNode.parentVariation().parentNode();
-		return parentNode ? getPreviousNodeId(parentNode) : 'start';
-	}
-}
-
-
-function getNextNodeId(currentNode, isVariation) {
-	let nextNode = isVariation ? currentNode.first() : currentNode.next();
-	return nextNode ? nextNode.id() : false;
-}
-
-
-function getLastNodeId(currentNode, isVariation) {
-	currentNode = isVariation ? currentNode.first() : currentNode.next();
-	if (!currentNode) { // Ensure that the input node is not already the last one.
-		return false;
-	}
-	while (true) {
-		let nextNode = currentNode.next();
-		if (!nextNode) {
-			return currentNode.id();
-		}
-		currentNode = nextNode;
-	}
-}
-
-
 /**
  * Try to interpret the given object as a chess game.
  */

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);
 	});
 });

package/test/8_movetext_interaction.js

@@ -90,6 +90,10 @@ describe('Movetext interaction', function() {
 			await setSandbox(browserContext, '');
 			await focusFieldElement.sendKeys(Key.END);
 			await compareSandbox(browserContext, expectedOnGoLast);
+
+			await setSandbox(browserContext, '');
+			await focusFieldElement.sendKeys(Key.ARROW_UP);
+			await compareSandbox(browserContext, '');
 		});
 	}
 
@@ -100,4 +104,5 @@ describe('Movetext interaction', function() {
 	itCheckKeyboardActions(5, 'key on first selected', tpl('start', 'key-first'), tpl('start', 'key-previous'), tpl('1b', 'key-next'), tpl('6b', 'key-last'));
 	itCheckKeyboardActions(6, 'key on last selected', tpl('start', 'key-first'), tpl('6w', 'key-previous'), '', '');
 	itCheckKeyboardActions(7, 'key on invalid selection', '', '', '', '');
+	itCheckKeyboardActions(8, 'key on sub-variation selected', tpl('start', 'key-first'), tpl('1w', 'key-previous'), tpl('1b-v0-1b', 'key-next'), tpl('1b-v0-3w', 'key-last'));
 });