kokopu-react 1.5.0 → 1.5.3

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 ChangeLog
 =========
 
+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`.
+
+1.5.1 (April 29, 2022)
+----------------------
+* Add argument `evtOrigin` in `onMoveSelected(..)` callback in component `Movetext`.
+
 1.5.0 (April 27, 2022)
 ----------------------
 * Add component `Movetext` to display chess games.

package/dist/lib/Movetext.js

@@ -94,10 +94,9 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var game = info.game;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-movetext"
-      }, this.renderHeaders(game), this.renderBody(game), this.renderFocusField());
+      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField());
     }
   }, {
     key: "renderHeaders",
@@ -524,48 +523,48 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleKeyDownInFocusField",
     value: function handleKeyDownInFocusField(evt) {
-      if (!this.props.selection) {
+      if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
         return;
       }
 
-      var game = parseGame(this.props.game, this.props.gameIndex).game;
-      var nodeId = false;
-
-      if (this.props.selection === 'start') {
-        if (evt.key === 'ArrowRight') {
-          nodeId = getNextNodeId(game.mainVariation(), true);
-        } else if (evt.key === 'End') {
-          nodeId = getLastNodeId(game.mainVariation(), true);
-        }
-      } else {
-        var currentNode = game.findById(this.props.selection);
+      evt.preventDefault();
 
-        if (!currentNode) {
-          return;
-        }
+      if (!this.props.selection) {
+        return;
+      }
 
-        if (evt.key === 'Home') {
-          nodeId = 'start';
-        } else if (evt.key === 'ArrowLeft') {
-          nodeId = getPreviousNodeId(currentNode);
-        } else if (evt.key === 'ArrowRight') {
-          nodeId = getNextNodeId(currentNode, false);
-        } else if (evt.key === 'End') {
-          nodeId = getLastNodeId(currentNode, false);
-        }
+      var _parseGame = parseGame(this.props.game, this.props.gameIndex),
+          game = _parseGame.game;
+
+      var nodeId = undefined;
+      var evtOrigin = '';
+
+      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 {
+        // evt.key === 'End'
+        nodeId = Movetext.lastNodeId(game, this.props.selection);
+        evtOrigin = 'key-last';
       }
 
       if (nodeId && this.props.onMoveSelected) {
-        this.props.onMoveSelected(nodeId);
+        this.props.onMoveSelected(nodeId, evtOrigin);
       }
     }
   }, {
     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);
+        this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
       }
     }
     /**
@@ -602,6 +601,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;
@@ -675,10 +807,16 @@ Movetext.propTypes = {
   interactionMode: _propTypes["default"].oneOf(['selectMove']),
 
   /**
-   * Callback invoked when the user clicks on a move (only if `interactionMode` is set to `'selectMove'`).
+   * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
    *
    * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id)),
    *                         `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
+   * @param {string} evtOrigin Origin of the event. Can be:
+   *                        - `'key-first'`: the event has been triggered by the "go-to-first-move" key (aka. the home key),
+   *                        - `'key-previous'`: the event has been triggered by the "go-to-previous-move" key (aka. the arrow left key),
+   *                        - `'key-next'`: the event has been triggered by the "go-to-next-move" key (aka. the arrow right key),
+   *                        - `'key-last'`: the event has been triggered by the "go-to-last-move" key (aka. the end key),
+   *                        - `'click'`: the event has been triggered by a mouse click on a move.
    */
   onMoveSelected: _propTypes["default"].func
 };
@@ -763,41 +901,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/demo/PageMovetextInteraction.js

@@ -50,6 +50,7 @@ export default class Page extends React.Component {
 			selection: '28b',
 			interactionMode: 'selectMove',
 			withPopup: true,
+			withMove: false,
 		};
 	}
 
@@ -91,7 +92,7 @@ export default class Page extends React.Component {
 					pieceSymbols="figurines"
 					diagramVisible={false}
 					interactionMode={this.state.interactionMode}
-					onMoveSelected={nodeId => this.handleMoveSelected(nodeId)}
+					onMoveSelected={(nodeId, evtOrigin) => this.handleMoveSelected(nodeId, evtOrigin)}
 				/>
 			</Box>
 		);
@@ -117,14 +118,14 @@ export default class Page extends React.Component {
 
 	renderNavigationBoard() {
 		let button = <Button size="small" onClick={() => this.handlePopupToggled()}>{this.state.withPopup ? 'Reduce' : 'Open'}</Button>;
-		let { position, csl, cal } = this.getCurrentPositionAndAnnotations();
-		let content = this.state.withPopup ? <Stack><Chessboard position={position} squareMarkers={csl} arrowMarkers={cal} />{button}</Stack> : button;
+		let { position, move, csl, cal } = this.getCurrentPositionAndAnnotations();
+		let content = this.state.withPopup ? <Stack><Chessboard position={position} move={move} squareMarkers={csl} arrowMarkers={cal} animated={true} />{button}</Stack> : button;
 		return <Paper className="kokopu-fixedPopup" elevation={3}>{content}</Paper>;
 	}
 
-	handleMoveSelected(nodeId) {
+	handleMoveSelected(nodeId, evtOrigin) {
 		if (nodeId) {
-			this.set('selection', nodeId);
+			this.set('selection', nodeId, 'withMove', evtOrigin === 'key-next');
 		}
 	}
 
@@ -149,7 +150,10 @@ export default class Page extends React.Component {
 		}
 		else {
 			let node = game.findById(this.state.selection);
-			return { position: node.position(), csl: node.tag('csl'), cal: node.tag('cal') };
+			let result = this.state.withMove ? { position: node.positionBefore(), move: node.notation() } : { position: node.position() };
+			result.csl = node.tag('csl');
+			result.cal = node.tag('cal');
+			return result;
 		}
 	}
 }

package/graphic_test_app/16_movetext_interaction.js

@@ -26,8 +26,8 @@ import { Movetext } from '../src/index';
 
 import pgn from './common/games.pgn';
 
-function onMoveSelected(nodeId) {
-	setSandbox(`move selected: ${nodeId}`);
+function onMoveSelected(nodeId, evtOrigin) {
+	setSandbox(`move selected: ${nodeId}\norigin: ${evtOrigin}`);
 }
 
 testApp([ /* eslint-disable react/jsx-key */
@@ -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,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.0",
+	"version": "1.5.3",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -33,7 +33,7 @@
 		"kokopu": "^2.7.0",
 		"prop-types": "^15.8.1",
 		"react": "^17.0.2",
-		"react-draggable": "^4.4.4",
+		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
@@ -43,13 +43,13 @@
 		"@babel/preset-react": "^7.16.7",
 		"@emotion/react": "^11.9.0",
 		"@emotion/styled": "^11.8.1",
-		"@mui/material": "^5.6.2",
+		"@mui/material": "^5.6.3",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^10.2.4",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.13.0",
+		"eslint": "^8.14.0",
 		"eslint-plugin-react": "^7.29.4",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
@@ -59,7 +59,7 @@
 		"prompt": "^1.3.0",
 		"react-dom": "^17.0.2",
 		"react-styleguidist": "^11.2.0",
-		"selenium-webdriver": "^4.1.1",
+		"selenium-webdriver": "^4.1.2",
 		"ssh2-sftp-client": "^8.0.0",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",

package/scripts/test_graphic/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.1.1-20220121
+    image: selenium/standalone-firefox:4.1.4-20220427
     shm_size: '2gb'
     ports:
       - 4444:4444 # Driver (http://localhost:4444)

package/src/Chessboard.js

@@ -83,10 +83,10 @@ export default class Chessboard extends React.Component {
 		// Compute the current position.
 		let info = this.getPositionAndMoveInfo();
 		if (info.positionError) {
-			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message} />;
 		}
 		else if (info.moveError) {
-			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message} />;
 		}
 		let { position, move, positionBefore } = info;
 

package/src/Movetext.js

@@ -46,14 +46,12 @@ export default class Movetext extends React.Component {
 	render() {
 		let info = parseGame(this.props.game, this.props.gameIndex);
 		if (info.error) {
-			return <ErrorBox title={i18n.INVALID_PGN_ERROR_TITLE} message={info.message} text={info.text} errorIndex={info.errorIndex} lineNumber={info.lineNumber}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_PGN_ERROR_TITLE} message={info.message} text={info.text} errorIndex={info.errorIndex} lineNumber={info.lineNumber} />;
 		}
-		let game = info.game;
-
 		return (
 			<div className="kokopu-movetext">
-				{this.renderHeaders(game)}
-				{this.renderBody(game)}
+				{this.renderHeaders(info.game)}
+				{this.renderBody(info.game)}
 				{this.renderFocusField()}
 			</div>
 		);
@@ -333,46 +331,41 @@ export default class Movetext extends React.Component {
 	}
 
 	handleKeyDownInFocusField(evt) {
+		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;
-		if (this.props.selection === 'start') {
-			if (evt.key === 'ArrowRight') {
-				nodeId = getNextNodeId(game.mainVariation(), true);
-			}
-			else if (evt.key === 'End') {
-				nodeId = getLastNodeId(game.mainVariation(), true);
-			}
+		let { game } = parseGame(this.props.game, this.props.gameIndex);
+		let nodeId = undefined;
+		let evtOrigin = '';
+		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';
-			}
-			else if (evt.key === 'ArrowLeft') {
-				nodeId = getPreviousNodeId(currentNode);
-			}
-			else if (evt.key === 'ArrowRight') {
-				nodeId = getNextNodeId(currentNode, false);
-			}
-			else if (evt.key === 'End') {
-				nodeId = getLastNodeId(currentNode, false);
-			}
+		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);
+			this.props.onMoveSelected(nodeId, evtOrigin);
 		}
 	}
 
 	handleNodeClicked(nodeId) {
-		this.focusFieldRef.current.focus();
+		this.focus();
 		if (this.props.onMoveSelected) {
-			this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId);
+			this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
 		}
 	}
 
@@ -395,6 +388,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;
+		}
+	}
 }
 
 
@@ -473,10 +574,16 @@ Movetext.propTypes = {
 	interactionMode: PropTypes.oneOf([ 'selectMove' ]),
 
 	/**
-	 * Callback invoked when the user clicks on a move (only if `interactionMode` is set to `'selectMove'`).
+	 * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
 	 *
 	 * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id)),
 	 *                         `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
+	 * @param {string} evtOrigin Origin of the event. Can be:
+	 *                        - `'key-first'`: the event has been triggered by the "go-to-first-move" key (aka. the home key),
+	 *                        - `'key-previous'`: the event has been triggered by the "go-to-previous-move" key (aka. the arrow left key),
+	 *                        - `'key-next'`: the event has been triggered by the "go-to-next-move" key (aka. the arrow right key),
+	 *                        - `'key-last'`: the event has been triggered by the "go-to-last-move" key (aka. the end key),
+	 *                        - `'click'`: the event has been triggered by a mouse click on a move.
 	 */
 	onMoveSelected: PropTypes.func,
 };
@@ -555,39 +662,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/8_movetext_interaction.js

@@ -53,18 +53,22 @@ describe('Movetext interaction', function() {
 		});
 	}
 
+	function tpl(nodeId, evtOrigin) {
+		return `move selected: ${nodeId}\norigin: ${evtOrigin}`;
+	}
+
 	itCheckClickMove(0, 'click on disabled', [
 		{ searchedText: 'Nf6', expectedText: '' },
 		{ searchedText: 'Qc2', expectedText: '' },
 	]);
 
 	itCheckClickMove(1, 'click on unselected', [
-		{ searchedText: 'cxd5', expectedText: 'move selected: 5w' },
+		{ searchedText: 'cxd5', expectedText: tpl('5w', 'click') },
 	]);
 
 	itCheckClickMove(2, 'click on with variations 1', [
-		{ searchedText: 'Bb5', expectedText: 'move selected: undefined' },
-		{ searchedText: 'Nc6', expectedText: 'move selected: 1b-v0-2b' },
+		{ searchedText: 'Bb5', expectedText: tpl(undefined, 'click') },
+		{ searchedText: 'Nc6', expectedText: tpl('1b-v0-2b', 'click') },
 	]);
 
 	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
@@ -86,14 +90,19 @@ 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, '');
 		});
 	}
 
 	itCheckKeyboardActions(1, 'key on unselected', '', '', '', '');
-	itCheckKeyboardActions(2, 'key on with variations 1', 'move selected: start', 'move selected: 1b-v0-2b', 'move selected: 1b-v0-3w-v0-3b', 'move selected: 1b-v0-3w-v0-4w');
-	itCheckKeyboardActions(3, 'key on with variations 2', 'move selected: start', 'move selected: 1b-v0-2w', 'move selected: 1b-v0-3w', 'move selected: 1b-v0-3w');
-	itCheckKeyboardActions(4, 'key on start selected', '', '', 'move selected: 1w', 'move selected: 6b');
-	itCheckKeyboardActions(5, 'key on first selected', 'move selected: start', 'move selected: start', 'move selected: 1b', 'move selected: 6b');
-	itCheckKeyboardActions(6, 'key on last selected', 'move selected: start', 'move selected: 6w', '', '');
+	itCheckKeyboardActions(2, 'key on with variations 1', tpl('start', 'key-first'), tpl('1b-v0-2b', 'key-previous'), tpl('1b-v0-3w-v0-3b', 'key-next'), tpl('1b-v0-3w-v0-4w', 'key-last'));
+	itCheckKeyboardActions(3, 'key on with variations 2', tpl('start', 'key-first'), tpl('1b-v0-2w', 'key-previous'), tpl('1b-v0-3w', 'key-next'), tpl('1b-v0-3w', 'key-last'));
+	itCheckKeyboardActions(4, 'key on start selected', '', '', tpl('1w', 'key-next'), tpl('6b', 'key-last'));
+	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'));
 });