kokopu-react 1.11.1 → 2.0.1

package/src/chessboard/piecesets.ts

@@ -0,0 +1,229 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import { Pieceset } from '../types';
+
+/* eslint-disable camelcase */
+
+/*
+ * Source: https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces
+ * Authors: Cburnett <https://en.wikipedia.org/wiki/User:Cburnett>, Antonsusi <https://commons.wikimedia.org/wiki/User:Antonsusi>
+ * License: Creative Commons Attribution ShareAlike [CC-BY-SA]
+ */
+import cburnett_bb from './sprites/cburnett-bb.png';
+import cburnett_bk from './sprites/cburnett-bk.png';
+import cburnett_bn from './sprites/cburnett-bn.png';
+import cburnett_bp from './sprites/cburnett-bp.png';
+import cburnett_bq from './sprites/cburnett-bq.png';
+import cburnett_br from './sprites/cburnett-br.png';
+import cburnett_wb from './sprites/cburnett-wb.png';
+import cburnett_wk from './sprites/cburnett-wk.png';
+import cburnett_wn from './sprites/cburnett-wn.png';
+import cburnett_wp from './sprites/cburnett-wp.png';
+import cburnett_wq from './sprites/cburnett-wq.png';
+import cburnett_wr from './sprites/cburnett-wr.png';
+
+import cburnett_bx from './sprites/cburnett-bx.png';
+import cburnett_wx from './sprites/cburnett-wx.png';
+
+/*
+ * Source: http://poisson.phc.unipi.it/~monge/chess_art.php
+ * Author: Maurizio Monge <http://poisson.phc.unipi.it/~monge/>
+ * License: ?? (give credit to the author and notify him by mail when using his work in a chess program)
+ */
+import celtic_bb from './sprites/celtic-bb.png';
+import celtic_bk from './sprites/celtic-bk.png';
+import celtic_bn from './sprites/celtic-bn.png';
+import celtic_bp from './sprites/celtic-bp.png';
+import celtic_bq from './sprites/celtic-bq.png';
+import celtic_br from './sprites/celtic-br.png';
+import celtic_wb from './sprites/celtic-wb.png';
+import celtic_wk from './sprites/celtic-wk.png';
+import celtic_wn from './sprites/celtic-wn.png';
+import celtic_wp from './sprites/celtic-wp.png';
+import celtic_wq from './sprites/celtic-wq.png';
+import celtic_wr from './sprites/celtic-wr.png';
+import eyes_bb from './sprites/eyes-bb.png';
+import eyes_bk from './sprites/eyes-bk.png';
+import eyes_bn from './sprites/eyes-bn.png';
+import eyes_bp from './sprites/eyes-bp.png';
+import eyes_bq from './sprites/eyes-bq.png';
+import eyes_br from './sprites/eyes-br.png';
+import eyes_wb from './sprites/eyes-wb.png';
+import eyes_wk from './sprites/eyes-wk.png';
+import eyes_wn from './sprites/eyes-wn.png';
+import eyes_wp from './sprites/eyes-wp.png';
+import eyes_wq from './sprites/eyes-wq.png';
+import eyes_wr from './sprites/eyes-wr.png';
+import fantasy_bb from './sprites/fantasy-bb.png';
+import fantasy_bk from './sprites/fantasy-bk.png';
+import fantasy_bn from './sprites/fantasy-bn.png';
+import fantasy_bp from './sprites/fantasy-bp.png';
+import fantasy_bq from './sprites/fantasy-bq.png';
+import fantasy_br from './sprites/fantasy-br.png';
+import fantasy_wb from './sprites/fantasy-wb.png';
+import fantasy_wk from './sprites/fantasy-wk.png';
+import fantasy_wn from './sprites/fantasy-wn.png';
+import fantasy_wp from './sprites/fantasy-wp.png';
+import fantasy_wq from './sprites/fantasy-wq.png';
+import fantasy_wr from './sprites/fantasy-wr.png';
+import skulls_bb from './sprites/skulls-bb.png';
+import skulls_bk from './sprites/skulls-bk.png';
+import skulls_bn from './sprites/skulls-bn.png';
+import skulls_bp from './sprites/skulls-bp.png';
+import skulls_bq from './sprites/skulls-bq.png';
+import skulls_br from './sprites/skulls-br.png';
+import skulls_wb from './sprites/skulls-wb.png';
+import skulls_wk from './sprites/skulls-wk.png';
+import skulls_wn from './sprites/skulls-wn.png';
+import skulls_wp from './sprites/skulls-wp.png';
+import skulls_wq from './sprites/skulls-wq.png';
+import skulls_wr from './sprites/skulls-wr.png';
+import spatial_bb from './sprites/spatial-bb.png';
+import spatial_bk from './sprites/spatial-bk.png';
+import spatial_bn from './sprites/spatial-bn.png';
+import spatial_bp from './sprites/spatial-bp.png';
+import spatial_bq from './sprites/spatial-bq.png';
+import spatial_br from './sprites/spatial-br.png';
+import spatial_wb from './sprites/spatial-wb.png';
+import spatial_wk from './sprites/spatial-wk.png';
+import spatial_wn from './sprites/spatial-wn.png';
+import spatial_wp from './sprites/spatial-wp.png';
+import spatial_wq from './sprites/spatial-wq.png';
+import spatial_wr from './sprites/spatial-wr.png';
+
+import celtic_bx from './sprites/celtic-bx.png';
+import celtic_wx from './sprites/celtic-wx.png';
+import eyes_spatial_bx from './sprites/eyes-spatial-bx.png';
+import eyes_spatial_wx from './sprites/eyes-spatial-wx.png';
+import fantasy_bx from './sprites/fantasy-bx.png';
+import fantasy_wx from './sprites/fantasy-wx.png';
+import skulls_bx from './sprites/skulls-bx.png';
+import skulls_wx from './sprites/skulls-wx.png';
+
+
+/**
+ * Available piecesets.
+ */
+export const piecesets: Record<string, Pieceset> = {};
+
+piecesets.cburnett = {
+	bb: cburnett_bb,
+	bk: cburnett_bk,
+	bn: cburnett_bn,
+	bp: cburnett_bp,
+	bq: cburnett_bq,
+	br: cburnett_br,
+	bx: cburnett_bx,
+	wb: cburnett_wb,
+	wk: cburnett_wk,
+	wn: cburnett_wn,
+	wp: cburnett_wp,
+	wq: cburnett_wq,
+	wr: cburnett_wr,
+	wx: cburnett_wx,
+};
+
+piecesets.celtic = {
+	bb: celtic_bb,
+	bk: celtic_bk,
+	bn: celtic_bn,
+	bp: celtic_bp,
+	bq: celtic_bq,
+	br: celtic_br,
+	bx: celtic_bx,
+	wb: celtic_wb,
+	wk: celtic_wk,
+	wn: celtic_wn,
+	wp: celtic_wp,
+	wq: celtic_wq,
+	wr: celtic_wr,
+	wx: celtic_wx,
+};
+
+piecesets.eyes = {
+	bb: eyes_bb,
+	bk: eyes_bk,
+	bn: eyes_bn,
+	bp: eyes_bp,
+	bq: eyes_bq,
+	br: eyes_br,
+	bx: eyes_spatial_bx,
+	wb: eyes_wb,
+	wk: eyes_wk,
+	wn: eyes_wn,
+	wp: eyes_wp,
+	wq: eyes_wq,
+	wr: eyes_wr,
+	wx: eyes_spatial_wx,
+};
+
+piecesets.fantasy = {
+	bb: fantasy_bb,
+	bk: fantasy_bk,
+	bn: fantasy_bn,
+	bp: fantasy_bp,
+	bq: fantasy_bq,
+	br: fantasy_br,
+	bx: fantasy_bx,
+	wb: fantasy_wb,
+	wk: fantasy_wk,
+	wn: fantasy_wn,
+	wp: fantasy_wp,
+	wq: fantasy_wq,
+	wr: fantasy_wr,
+	wx: fantasy_wx,
+};
+
+piecesets.skulls = {
+	bb: skulls_bb,
+	bk: skulls_bk,
+	bn: skulls_bn,
+	bp: skulls_bp,
+	bq: skulls_bq,
+	br: skulls_br,
+	bx: skulls_bx,
+	wb: skulls_wb,
+	wk: skulls_wk,
+	wn: skulls_wn,
+	wp: skulls_wp,
+	wq: skulls_wq,
+	wr: skulls_wr,
+	wx: skulls_wx,
+};
+
+piecesets.spatial = {
+	bb: spatial_bb,
+	bk: spatial_bk,
+	bn: spatial_bn,
+	bp: spatial_bp,
+	bq: spatial_bq,
+	br: spatial_br,
+	bx: eyes_spatial_bx,
+	wb: spatial_wb,
+	wk: spatial_wk,
+	wn: spatial_wn,
+	wp: spatial_wp,
+	wq: spatial_wq,
+	wr: spatial_wr,
+	wx: eyes_spatial_wx,
+};

package/src/decs.d.ts

@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+declare module '*.png' {
+	const path: string;
+	export default path;
+}

package/src/{css/error_box.css → errorbox/ErrorBox.css}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 .kokopu-errorBox {

package/src/errorbox/ErrorBox.tsx

@@ -0,0 +1,129 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import { i18n } from '../i18n';
+import { sanitizeString, sanitizeOptional } from '../sanitization';
+import { fillPlaceholder } from '../util';
+
+import './ErrorBox.css';
+
+const BACKWARD_CHARACTER_COUNT = 5;
+const FORWARD_CHARACTER_COUNT = 36;
+const ELLIPSIS_SYMBOL_LENGTH = 4; // Symbol is ... + space (before or after)
+
+
+export interface ErrorBoxProps {
+
+	/**
+	 * Title of the error box.
+	 */
+	title: string;
+
+	/**
+	 * Additional message providing details about the error.
+	 */
+	message: string;
+
+	/**
+	 * Raw text whose processing results in the error.
+	 */
+	text?: string;
+
+	/**
+	 * Index of the character within `text` that results in the error.
+	 */
+	errorIndex?: number;
+
+	/**
+	 * Index (1-based) of the line in which is the character that results in the error.
+	 */
+	lineNumber?: number;
+}
+
+
+/**
+ * Display an error message.
+ */
+export function ErrorBox({ title, message, text, errorIndex, lineNumber }: ErrorBoxProps) {
+
+	// Sanitize the inputs.
+	title = sanitizeString(title);
+	message = sanitizeString(message);
+	text = sanitizeOptional(text, sanitizeString);
+	errorIndex = Number.isInteger(errorIndex) ? errorIndex : undefined;
+	lineNumber = Number.isInteger(lineNumber) ? lineNumber : undefined;
+
+	// Render the component.
+	let excerpt: React.ReactNode = undefined;
+	if (text && errorIndex !== undefined && errorIndex >= 0 && errorIndex < text.length) {
+		excerpt = <div className="kokopu-errorExcerpt">{ellipsisAt(text, errorIndex, lineNumber)}</div>;
+	}
+	return (
+		<div className="kokopu-errorBox">
+			<div className="kokopu-errorTitle">{title}</div>
+			<div className="kokopu-errorMessage">{message}</div>
+			{excerpt}
+		</div>
+	);
+}
+
+
+/**
+ * Cut the given text around character at position `pos`, keeping `BACKWARD_CHARACTER_COUNT` before it, and `FORWARD_CHARACTER_COUNT` after.
+ */
+function ellipsisAt(text: string, pos: number, lineNumber?: number) {
+
+	// Compute the number of characters to keep before `pos`.
+	let cutBeginningAt = pos - BACKWARD_CHARACTER_COUNT;
+	let isBeginningEllipsed = true;
+	for (let keptCharacterCount = 0; keptCharacterCount <= BACKWARD_CHARACTER_COUNT + ELLIPSIS_SYMBOL_LENGTH; ++keptCharacterCount) {
+		const p = pos - keptCharacterCount - 1;
+		if (p < 0 || text.charAt(p) === '\n' || text.charAt(p) === '\r') {
+			cutBeginningAt = p + 1;
+			isBeginningEllipsed = false;
+			break;
+		}
+	}
+
+	// Compute the number of characters to keep after `pos`.
+	let cutEndAt = pos + FORWARD_CHARACTER_COUNT;
+	let isEndEllipsed = true;
+	for (let keptCharacterCount = 0; keptCharacterCount <= FORWARD_CHARACTER_COUNT + ELLIPSIS_SYMBOL_LENGTH; ++keptCharacterCount) {
+		const p = pos + keptCharacterCount + 1;
+		if (p >= text.length || text.charAt(p) === '\n' || text.charAt(p) === '\r') {
+			cutEndAt = p - 1;
+			isEndEllipsed = false;
+			break;
+		}
+	}
+
+	// Extract the sub-string around the requested position.
+	let excerpt = (isBeginningEllipsed ? '... ' : '') + text.substring(cutBeginningAt, cutEndAt + 1) + (isEndEllipsed ? ' ...' : '');
+	excerpt = excerpt.replace(/\s/g, ' ');
+	let secondLine = ' '.repeat(pos - cutBeginningAt + (isBeginningEllipsed ? ELLIPSIS_SYMBOL_LENGTH : 0)) + '^';
+	if (lineNumber && lineNumber >= 1) {
+		secondLine += ` (${fillPlaceholder(i18n.LINE, lineNumber)})`;
+	}
+	return excerpt + '\n' + secondLine;
+}

package/src/exception.ts

@@ -0,0 +1,51 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+/**
+ * This module contains the exceptions used by the library.
+ * @module
+ */
+
+
+/**
+ * Exception thrown when an invalid argument is passed to a function or a component.
+ */
+export class IllegalArgument {
+
+	/** Name of the function or component that raises the exception. */
+	functionOrComponentName: string;
+
+	/** Name of the argument that causes the error. */
+	argumentName: string;
+
+	constructor(functionOrComponentName: string, argumentName: string) {
+		this.functionOrComponentName = functionOrComponentName;
+		this.argumentName = argumentName;
+	}
+
+	/**
+	 * @ignore
+	 */
+	toString(): string {
+		return `Illegal argument '${this.argumentName}' in function or component ${this.functionOrComponentName}`;
+	}
+}

package/src/i18n.ts

@@ -0,0 +1,43 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+/**
+ * This module defines the localizable strings used by the library.
+ */
+export namespace i18n {
+
+/* eslint-disable prefer-const */
+// WARNING: all those constants must be declared with "let" to allow them to be re-defined if necessary by consumer codes.
+
+// Error box
+export let LINE = 'line {0}';
+
+// Chessboard
+export let INVALID_FEN_ERROR_TITLE = 'Invalid FEN string.';
+export let INVALID_NOTATION_ERROR_TITLE = 'Invalid move notation.';
+
+// Movetext
+export let PIECE_SYMBOLS = { 'K':'K', 'Q':'Q', 'R':'R', 'B':'B', 'N':'N', 'P':'P' };
+export let ANNOTATED_BY = 'Annotated by {0}';
+export let INVALID_PGN_ERROR_TITLE = 'Invalid PGN string.';
+
+}

package/{dist/lib/css/symbol.css → src/icons/AnnotationSymbolShape.css}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 .kokopu-symbolCircle {

package/src/{impl/TextSymbol.js → icons/AnnotationSymbolShape.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,60 +17,62 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 
-import '../css/symbol.css';
+import { AnnotationSymbol } from '../types';
+
+import './AnnotationSymbolShape.css';
 
 const SHAPE_THICKNESS_FACTOR = 0.1;
 const DOT_RADIUS_FACTOR = 0.15;
 const CIRCLE_RADIUS_FACTOR = 0.425;
 
 
-/**
- * Symbol of a text marker.
- */
-export default function TextSymbol(props) {
-	if (props.symbol === 'dot') {
-		return <circle cx={props.x} cy={props.y} r={props.size * DOT_RADIUS_FACTOR} fill={props.color} />;
-	}
-	else if (props.symbol === 'circle') {
-		let thickness = props.size * SHAPE_THICKNESS_FACTOR;
-		return <circle className="kokopu-symbolCircle" cx={props.x} cy={props.y} r={props.size * CIRCLE_RADIUS_FACTOR} stroke={props.color} strokeWidth={thickness} />;
-	}
-	else {
-		let symbol = props.symbol === 'plus' ? '+' : props.symbol === 'times' ? '\u00d7' : props.symbol;
-		return <text className="kokopu-symbolText" x={props.x} y={props.y} fill={props.color} fontSize={props.size}>{symbol}</text>;
-	}
-}
-
-TextSymbol.propTypes = {
+interface AnnotationSymbolShapeProps {
 
 	/**
 	 * X-coordinate of the center of the symbol.
 	 */
-	x: PropTypes.number.isRequired,
+	x: number;
 
 	/**
 	 * Y-coordinate of the center of the symbol.
 	 */
-	y: PropTypes.number.isRequired,
+	y: number;
 
 	/**
 	 * Size of the symbol (i.e. size of square in which the symbol is rendered).
 	 */
-	size: PropTypes.number.isRequired,
+	size: number;
 
 	/**
 	 * Symbol code.
 	 */
-	symbol: PropTypes.string.isRequired,
+	symbol: AnnotationSymbol;
 
 	/**
-	 * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
 	 */
-	color: PropTypes.string.isRequired,
-};
+	color: string;
+}
+
+
+/**
+ * Symbol of a text marker.
+ */
+export function AnnotationSymbolShape({ x, y, size, symbol, color }: AnnotationSymbolShapeProps) {
+	if (symbol === 'dot') {
+		return <circle cx={x} cy={y} r={size * DOT_RADIUS_FACTOR} fill={color} />;
+	}
+	else if (symbol === 'circle') {
+		const thickness = size * SHAPE_THICKNESS_FACTOR;
+		return <circle className="kokopu-symbolCircle" cx={x} cy={y} r={size * CIRCLE_RADIUS_FACTOR} stroke={color} strokeWidth={thickness} />;
+	}
+	else {
+		const text = symbol === 'plus' ? '+' : symbol === 'times' ? '\u00d7' : symbol;
+		return <text className="kokopu-symbolText" x={x} y={y} fill={color} fontSize={size}>{text}</text>;
+	}
+}