kokopu-react 3.0.2 → 3.2.0

package/src/icons/TextMarkerIcon.tsx

@@ -33,25 +33,25 @@ import { AnnotationSymbolShape } from './AnnotationSymbolShape';
 
 export interface TextMarkerIconProps {
 
-	/**
-	 * Width and height (in pixels) of the icon.
-	 */
-	size: number;
-
-	/**
-	 * Symbol to represent on the icon.
-	 */
-	symbol: AnnotationSymbol;
-
-	/**
-	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
-	 */
-	color: string;
+    /**
+     * Width and height (in pixels) of the icon.
+     */
+    size: number;
+
+    /**
+     * Symbol to represent on the icon.
+     */
+    symbol: AnnotationSymbol;
+
+    /**
+     * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
+     */
+    color: string;
 }
 
 
 const defaultProps: Partial<TextMarkerIconProps> = {
-	color: 'currentcolor',
+    color: 'currentcolor',
 };
 
 
@@ -60,20 +60,20 @@ const defaultProps: Partial<TextMarkerIconProps> = {
  */
 export function TextMarkerIcon({ size, symbol, color }: TextMarkerIconProps) {
 
-	// Sanitize the inputs.
-	size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('TextMarkerIcon', 'size'));
-	if (!isAnnotationSymbol(symbol)) {
-		throw new IllegalArgument('TextMarkerIcon', 'symbol');
-	}
-	color = sanitizeString(color);
-
-	// Render the component.
-	const viewBox = `0 0 ${size} ${size}`;
-	return (
-		<svg className="kokopu-textMarkerIcon" viewBox={viewBox} width={size} height={size}>
-			<AnnotationSymbolShape x={size / 2} y={size / 2} size={size} symbol={symbol} color={color} />
-		</svg>
-	);
+    // Sanitize the inputs.
+    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('TextMarkerIcon', 'size'));
+    if (!isAnnotationSymbol(symbol)) {
+        throw new IllegalArgument('TextMarkerIcon', 'symbol');
+    }
+    color = sanitizeString(color);
+
+    // Render the component.
+    const viewBox = `0 0 ${size} ${size}`;
+    return (
+        <svg className="kokopu-textMarkerIcon" viewBox={viewBox} width={size} height={size}>
+            <AnnotationSymbolShape x={size / 2} y={size / 2} size={size} symbol={symbol} color={color} />
+        </svg>
+    );
 }
 
 TextMarkerIcon.defaultProps = defaultProps;

package/src/icons/arrow.css

@@ -23,5 +23,5 @@
 
 
 .kokopu-arrow {
-	stroke-linecap: round;
+    stroke-linecap: round;
 }

package/src/index.ts

@@ -26,8 +26,8 @@ export { i18n } from './i18n';
 export * as exception from './exception';
 
 export { ChessPieceIconType, Colorset, Pieceset, PieceSymbolMapping, AnnotationColor, AnnotationSymbol, SquareMarkerSet, TextMarkerSet, ArrowMarkerSet,
-	isChessPieceIconType, isPieceSymbolMapping, isAnnotationColor, isAnnotationSymbol, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers,
-	parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './types';
+    isChessPieceIconType, isPieceSymbolMapping, isAnnotationColor, isAnnotationSymbol, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers,
+    parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './types';
 
 export { ErrorBox, ErrorBoxProps } from './errorbox/ErrorBox';
 
@@ -36,7 +36,12 @@ export { TextMarkerIcon, TextMarkerIconProps } from './icons/TextMarkerIcon';
 export { ArrowMarkerIcon, ArrowMarkerIconProps } from './icons/ArrowMarkerIcon';
 export { ChessPieceIcon, ChessPieceIconProps } from './icons/ChessPieceIcon';
 
-export { Chessboard, ChessboardProps, SmallScreenLimit } from './chessboard/Chessboard';
+export { SmallScreenLimit } from './chessboard/BoardProperties';
+export { Chessboard, ChessboardProps } from './chessboard/Chessboard';
 
 export { formatMove, moveFormatter } from './movetext/moveFormatter';
 export { Movetext, MovetextProps, MoveSelectEventOrigin } from './movetext/Movetext';
+
+export { NavigationButton, NavigationButtonList, isNavigationButton } from './navigationboard/NavigationButton';
+export { firstNodeId, previousNodeId, nextNodeId, lastNodeId } from './navigationboard/NavigationField';
+export { NavigationBoard, NavigationBoardProps } from './navigationboard/NavigationBoard';

package/src/movetext/Movetext.css

@@ -23,101 +23,88 @@
 
 
 .kokopu-colorTag {
-	width : 1.2em;
-	height: 1.2em;
-	vertical-align: middle;
-	display: inline-block;
-	border: 1px solid black;
-	margin-right: 0.25em;
+    width : 1.2em;
+    height: 1.2em;
+    vertical-align: middle;
+    display: inline-block;
+    border: 1px solid black;
+    margin-right: 0.25em;
 }
 
 .kokopu-headerGroup-whitePlayer .kokopu-colorTag {
-	background-color: white;
+    background-color: white;
 } 
 
 .kokopu-headerGroup-blackPlayer .kokopu-colorTag {
-	background-color: black;
+    background-color: black;
 }
 
 .kokopu-headerGroup-titleRating:before,
 .kokopu-header-round:before {
-	content: "\a0("; /* \a0 ==   */
+    content: "\a0("; /* \a0 ==   */
 }
 
 .kokopu-headerGroup-titleRating:after,
 .kokopu-header-round:after {
-	content: ")";
+    content: ")";
 }
 
 .kokopu-header-round,
 .kokopu-header-annotator {
-	font-style: italic;
+    font-style: italic;
 }
 
 * + .kokopu-move:before,
 * + .kokopu-gameResult:before,
 * + span.kokopu-comment:before {
-	content: " ";
+    content: " ";
 }
 
 span.kokopu-variation:before {
-	content: " (";
+    content: " (";
 }
 
 span.kokopu-variation:after {
-	content: ")";
+    content: ")";
 }
 
 * + .kokopu-nag:before {
-	content: "\a0"; /* \a0 ==   */
+    content: "\a0"; /* \a0 ==   */
 }
 
 div.kokopu-subVariation {
-	margin-left: 1.5em;
+    margin-left: 1.5em;
 }
 
 .kokopu-move,
 .kokopu-gameResult {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .kokopu-subVariation .kokopu-move {
-	font-weight: inherit;
+    font-weight: inherit;
 }
 
 .kokopu-diagram {
-	text-align: center;
-	line-height: 0px;
+    text-align: center;
+    line-height: 0px;
 }
 
 .kokopu-moveContent {
-	display: inline-block;
-	padding-left: 1px;
-	padding-right: 1px;
+    display: inline-block;
+    padding-left: 1px;
+    padding-right: 1px;
 }
 
 .kokopu-selectedMove .kokopu-moveContent {
-	background-color: currentcolor;
+    background-color: currentcolor;
 }
 
 .kokopu-selectedMove .kokopu-moveContent > * {
-	filter: invert(1);
+    filter: invert(1);
 }
 
 .kokopu-clickableMove .kokopu-moveContent:hover {
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-.kokopu-focusFieldContainer {
-	position: fixed;
-	bottom: 0px;
-	right: 0px;
-	width: 0px;
-	height: 0px;
-	overflow: hidden;
-}
-
-.kokopu-focusField {
-	position: absolute; /* see #1 */
+    text-decoration: underline;
+    cursor: pointer;
 }

package/src/movetext/Movetext.tsx

@@ -24,17 +24,17 @@
 
 import * as React from 'react';
 
-import { exception as kokopuException, Database, Game, pgnRead } from 'kokopu';
+import { Database, Game } from 'kokopu';
 
 import { IllegalArgument } from '../exception';
-import { i18n } from '../i18n';
 import { sanitizeString, sanitizeBoolean, sanitizeOptional } from '../sanitization';
 import { PieceSymbolMapping } from '../types';
 
-import { ChessboardProps } from '../chessboard/Chessboard';
-import { ErrorBox } from '../errorbox/ErrorBox';
+import { StaticBoardGraphicProps } from '../chessboard/BoardProperties';
+import { parseGame } from '../errorbox/parsing';
+import { firstNodeId as firstNodeIdImpl, previousNodeId as previousNodeIdImpl, nextNodeId as nextNodeIdImpl, lastNodeId as lastNodeIdImpl } from '../navigationboard/NavigationField';
 import { moveFormatter } from './moveFormatter';
-import { MovetextImpl, firstNodeIdImpl, previousNodeIdImpl, nextNodeIdImpl, lastNodeIdImpl } from './MovetextImpl';
+import { MovetextImpl } from './MovetextImpl';
 
 import './Movetext.css';
 
@@ -47,75 +47,69 @@ export type MoveSelectEventOrigin = 'key-first' | 'key-previous' | 'key-next' |
 
 export interface MovetextProps {
 
-	/**
-	 * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
-	 * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
-	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
-	 */
-	game: Game | Database | string;
-
-	/**
-	 * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
-	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
-	 * If omitted, the first game of the database/PGN is displayed.
-	 */
-	gameIndex: number;
-
-	/**
-	 * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
-	 */
-	diagramOptions: {
-		flipped?: ChessboardProps['flipped'],
-		squareSize?: ChessboardProps['squareSize'],
-		coordinateVisible?: ChessboardProps['coordinateVisible'],
-		turnVisible?: ChessboardProps['turnVisible'],
-		colorset?: ChessboardProps['colorset'],
-		pieceset?: ChessboardProps['pieceset'],
-		smallScreenLimits?: ChessboardProps['smallScreenLimits'],
-	};
-
-	/**
-	 * Symbols to use for the chess pieces. See {@link moveFormatter}.
-	 */
-	pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping;
-
-	/**
-	 * Whether the diagrams within the comments (if any) are displayed or not.
-	 */
-	diagramVisible: boolean;
-
-	/**
-	 * Whether the game headers (if any) are displayed or not.
-	 */
-	headerVisible: boolean;
-
-	/**
-	 * ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
-	 */
-	selection?: string;
-
-	/**
-	 * Type of action allowed with the mouse/keys on the component. If undefined, then the user cannot interact with the component.
-	 *
-	 * - `'selectMove'` allows the user to select a move.
-	 */
-	interactionMode?: 'selectMove';
-
-	/**
-	 * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
-	 *
-	 * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
-	 *                 `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
-	 * @param 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),
-	 *                    - `'key-exit'`: the event has been triggered by the "unselect-move" key (aka. the escape key),
-	 *                    - `'click'`: the event has been triggered by a mouse click on a move.
-	 */
-	onMoveSelected?: (nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) => void;
+    /**
+     * Displayed game. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
+     * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
+     * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
+     */
+    game: Game | Database | string;
+
+    /**
+     * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
+     * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
+     * If omitted, the first game of the database/PGN is displayed.
+     */
+    gameIndex: number;
+
+    /**
+     * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
+     */
+    diagramOptions: Partial<StaticBoardGraphicProps> & {
+        flipped?: boolean,
+    };
+
+    /**
+     * Symbols to use for the chess pieces. See {@link moveFormatter}.
+     */
+    pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping;
+
+    /**
+     * Whether the diagrams within the comments (if any) are displayed or not.
+     */
+    diagramVisible: boolean;
+
+    /**
+     * Whether the game headers (if any) are displayed or not.
+     */
+    headerVisible: boolean;
+
+    /**
+     * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
+     * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
+     */
+    selection?: string;
+
+    /**
+     * Type of action allowed with the mouse/keys on the component. If undefined, then the user cannot interact with the component.
+     *
+     * - `'selectMove'` allows the user to select a move.
+     */
+    interactionMode?: 'selectMove';
+
+    /**
+     * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
+     *
+     * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
+     *                 `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
+     * @param 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),
+     *                    - `'key-exit'`: the event has been triggered by the "unselect-move" key (aka. the escape key),
+     *                    - `'click'`: the event has been triggered by a mouse click on a move.
+     */
+    onMoveSelected?: (nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) => void;
 }
 
 
@@ -124,159 +118,100 @@ export interface MovetextProps {
  */
 export class Movetext extends React.Component<MovetextProps> {
 
-	static defaultProps = {
-		game: new Game(),
-		gameIndex: 0,
-		diagramOptions: {},
-		pieceSymbols: 'native',
-		diagramVisible: true,
-		headerVisible: true,
-	};
-
-	private implRef: React.RefObject<MovetextImpl> = React.createRef();
-
-	render() {
-
-		// Validate the game and game-index attributes.
-		const info = parseGame(this.props.game, this.props.gameIndex);
-		if (info.error) {
-			return (
-				<ErrorBox
-					title={i18n.INVALID_PGN_ERROR_TITLE} message={info.pgnException.message} text={info.pgnException.pgn}
-					errorIndex={info.pgnException.index} lineNumber={info.pgnException.lineNumber}
-				/>
-			);
-		}
-
-		// Validate the appearance attributes.
-		if (typeof this.props.diagramOptions !== 'object' || this.props.diagramOptions === null) {
-			throw new IllegalArgument('Movetext', 'diagramOptions');
-		}
-		const formatter = moveFormatter(this.props.pieceSymbols);
-		const diagramVisible = sanitizeBoolean(this.props.diagramVisible);
-		const headerVisible = sanitizeBoolean(this.props.headerVisible);
-
-		// Validate the interaction attributes and the callbacks.
-		const selection = sanitizeOptional(this.props.selection, sanitizeString);
-		const interactionMode = this.getInteractionMode();
-		const { onMoveSelected } = this.props;
-
-		return (
-			<MovetextImpl ref={this.implRef}
-				game={info.game}
-				diagramOptions={this.props.diagramOptions} moveFormatter={formatter} diagramVisible={diagramVisible} headerVisible={headerVisible}
-				selection={selection} interactionMode={interactionMode} onMoveSelected={onMoveSelected}
-			/>
-		);
-	}
-
-	private getInteractionMode() {
-		const interactionMode = sanitizeOptional(this.props.interactionMode, sanitizeString);
-		if (interactionMode === undefined || interactionMode === 'selectMove') {
-			return interactionMode;
-		}
-		else {
-			throw new IllegalArgument('Movetext', 'interactionMode');
-		}
-	}
-
-	/**
-	 * Set the focus to the current component.
-	 *
-	 * @public
-	 */
-	focus() {
-		const movetextImpl = this.implRef.current;
-		if (movetextImpl) {
-			movetextImpl.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 game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
-	 */
-	static firstNodeId(game: Game, selection: string): string | undefined {
-		return firstNodeIdImpl(game, selection);
-	}
-
-	/**
-	 * 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 game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
-	 */
-	static previousNodeId(game: Game, selection: string): string | undefined {
-		return previousNodeIdImpl(game, selection);
-	}
-
-	/**
-	 * 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 game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
-	 */
-	static nextNodeId(game: Game, selection: string): string | undefined {
-		return nextNodeIdImpl(game, selection);
-	}
-
-	/**
-	 * 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 game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
-	 */
-	static lastNodeId(game: Game, selection: string): string | undefined {
-		return lastNodeIdImpl(game, selection);
-	}
+    static defaultProps = {
+        game: new Game(),
+        gameIndex: 0,
+        diagramOptions: {},
+        pieceSymbols: 'native',
+        diagramVisible: true,
+        headerVisible: true,
+    };
+
+    private implRef: React.RefObject<MovetextImpl> = React.createRef();
+
+    render() {
+
+        // Validate the game and game-index attributes.
+        const info = parseGame(this.props.game, this.props.gameIndex, 'Movetext');
+        if (info.error) {
+            return info.errorBox;
+        }
+
+        // Validate the appearance attributes.
+        if (typeof this.props.diagramOptions !== 'object' || this.props.diagramOptions === null) {
+            throw new IllegalArgument('Movetext', 'diagramOptions');
+        }
+        const formatter = moveFormatter(this.props.pieceSymbols);
+        const diagramVisible = sanitizeBoolean(this.props.diagramVisible);
+        const headerVisible = sanitizeBoolean(this.props.headerVisible);
+
+        // Validate the interaction attributes and the callbacks.
+        const selection = sanitizeOptional(this.props.selection, sanitizeString);
+        const interactionMode = this.getInteractionMode();
+        const { onMoveSelected } = this.props;
+
+        return (
+            <MovetextImpl ref={this.implRef}
+                game={info.game}
+                diagramOptions={this.props.diagramOptions} moveFormatter={formatter} diagramVisible={diagramVisible} headerVisible={headerVisible}
+                selection={selection} interactionMode={interactionMode} onMoveSelected={onMoveSelected}
+            />
+        );
+    }
+
+    private getInteractionMode() {
+        const interactionMode = sanitizeOptional(this.props.interactionMode, sanitizeString);
+        if (interactionMode === undefined || interactionMode === 'selectMove') {
+            return interactionMode;
+        }
+        else {
+            throw new IllegalArgument('Movetext', 'interactionMode');
+        }
+    }
+
+    /**
+     * Set the focus to the current component.
+     *
+     * @public
+     */
+    focus() {
+        const movetextImpl = this.implRef.current;
+        // istanbul ignore else
+        if (movetextImpl) {
+            movetextImpl.focus();
+        }
+    }
+
+    /**
+     * @deprecated
+     */
+    // istanbul ignore next
+    static firstNodeId(game: Game, selection: string): string | undefined {
+        return firstNodeIdImpl(game, selection);
+    }
+
+    /**
+     * @deprecated
+     */
+    // istanbul ignore next
+    static previousNodeId(game: Game, selection: string): string | undefined {
+        return previousNodeIdImpl(game, selection);
+    }
+
+    /**
+     * @deprecated
+     */
+    // istanbul ignore next
+    static nextNodeId(game: Game, selection: string): string | undefined {
+        return nextNodeIdImpl(game, selection);
+    }
+
+    /**
+     * @deprecated
+     */
+    // istanbul ignore next
+    static lastNodeId(game: Game, selection: string): string | undefined {
+        return lastNodeIdImpl(game, selection);
+    }
 
 }
-
-
-/**
- * Try to interpret the given object as a chess game.
- */
-function parseGame(game: Game | Database | string, gameIndex: number): { error: true, pgnException: kokopuException.InvalidPGN } | { error: false, game: Game } {
-	if (game instanceof Game) {
-		return { error: false, game: game };
-	}
-	else if (game instanceof Database || typeof game === 'string') {
-		if (!Number.isInteger(gameIndex) || gameIndex < 0) {
-			throw new IllegalArgument('Movetext', 'gameIndex');
-		}
-		try {
-			const result = game instanceof Database ? game.game(gameIndex) : pgnRead(game, gameIndex);
-			return { error: false, game: result };
-		}
-		catch (e) {
-			// istanbul ignore else
-			if (e instanceof kokopuException.InvalidPGN) {
-				return { error: true, pgnException: e };
-			}
-			else {
-				throw e;
-			}
-		}
-	}
-	else {
-		throw new IllegalArgument('Movetext', 'game');
-	}
-}