kokopu-react 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 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`.

package/dist/lib/Movetext.js

@@ -523,46 +523,35 @@ 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();
+      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 _parseGame = parseGame(this.props.game, this.props.gameIndex),
+          game = _parseGame.game;
+
+      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 +561,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 +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;
@@ -779,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/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,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.2",
+	"version": "1.5.3",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",

package/src/Movetext.js

@@ -331,46 +331,31 @@ export default class Movetext extends React.Component {
 	}
 
 	handleKeyDownInFocusField(evt) {
-		if (evt.key === 'Home' || evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'End') {
-			evt.preventDefault();
+		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 { game } = parseGame(this.props.game, this.props.gameIndex);
+		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 +363,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 +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;
+		}
+	}
 }
 
 
@@ -569,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

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