kokopu-react 1.5.0 → 1.5.1

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",
@@ -530,12 +529,15 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 
       var game = parseGame(this.props.game, this.props.gameIndex).game;
       var nodeId = false;
+      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';
         }
       } else {
         var currentNode = game.findById(this.props.selection);
@@ -546,17 +548,21 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 
         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';
         }
       }
 
       if (nodeId && this.props.onMoveSelected) {
-        this.props.onMoveSelected(nodeId);
+        this.props.onMoveSelected(nodeId, evtOrigin);
       }
     }
   }, {
@@ -565,7 +571,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       this.focusFieldRef.current.focus();
 
       if (this.props.onMoveSelected) {
-        this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId);
+        this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
       }
     }
     /**
@@ -675,10 +681,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
 };

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 */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"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>
 		);
@@ -338,12 +336,15 @@ export default class Movetext extends React.Component {
 		}
 		let game = parseGame(this.props.game, this.props.gameIndex).game;
 		let nodeId = false;
+		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';
 			}
 		}
 		else {
@@ -353,26 +354,30 @@ export default class Movetext extends React.Component {
 			}
 			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';
 			}
 		}
 		if (nodeId && this.props.onMoveSelected) {
-			this.props.onMoveSelected(nodeId);
+			this.props.onMoveSelected(nodeId, evtOrigin);
 		}
 	}
 
 	handleNodeClicked(nodeId) {
 		this.focusFieldRef.current.focus();
 		if (this.props.onMoveSelected) {
-			this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId);
+			this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
 		}
 	}
 
@@ -473,10 +478,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,
 };

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) {
@@ -90,10 +94,10 @@ describe('Movetext interaction', function() {
 	}
 
 	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', '', '', '', '');
 });