kokopu-react 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 ChangeLog
 =========
 
+1.4.0 (October 21, 2021)
+------------------------
+* Add support for plus/times/dot/circle in text markers.
+
 1.3.1 (September 27, 2021)
 --------------------------
 * Fix missing export for `ErrorBox`.

package/dist/lib/ArrowMarkerIcon.js

@@ -85,10 +85,8 @@ var ArrowMarkerIcon = /*#__PURE__*/function (_React$Component) {
         x2: size - halfThickness * 3,
         y2: size / 2,
         stroke: this.props.color,
-        style: {
-          'strokeWidth': halfThickness * 2,
-          'markerEnd': "url(#".concat(this.arrowTipId, ")")
-        }
+        strokeWidth: halfThickness * 2,
+        markerEnd: "url(#".concat(this.arrowTipId, ")")
       }));
     }
   }]);

package/dist/lib/Chessboard.js

@@ -21,6 +21,8 @@ var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
 
 var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
 
+var _TextSymbol = _interopRequireDefault(require("./impl/TextSymbol"));
+
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
 
 var _i18n = _interopRequireDefault(require("./i18n"));
@@ -408,10 +410,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         x2: xTo,
         y2: yTo,
         stroke: colorset[this.props.editedArrowColor],
-        style: {
-          'strokeWidth': strokeWidth,
-          'markerEnd': "url(#".concat(arrowTipId, ")")
-        }
+        strokeWidth: strokeWidth,
+        markerEnd: "url(#".concat(arrowTipId, ")")
       });
     }
   }, {
@@ -567,16 +567,16 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
         x += squareSize / 2;
         y += squareSize / 2;
-        result.push( /*#__PURE__*/_react["default"].createElement("text", {
+        result.push( /*#__PURE__*/_react["default"].createElement("g", {
           key: 'txtm-' + sq,
-          className: "kokopu-annotation kokopu-label",
+          className: "kokopu-annotation"
+        }, /*#__PURE__*/_react["default"].createElement(_TextSymbol["default"], {
           x: x,
           y: y,
-          fill: colorset[value.color],
-          style: {
-            'fontSize': squareSize
-          }
-        }, value.symbol));
+          size: squareSize,
+          symbol: value.symbol,
+          color: colorset[value.color]
+        })));
       });
       return result;
     }
@@ -624,10 +624,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           x2: xTo,
           y2: yTo,
           stroke: colorset[color],
-          style: {
-            'strokeWidth': strokeWidth,
-            'markerEnd': "url(#".concat(arrowTipId, ")")
-          }
+          strokeWidth: strokeWidth,
+          markerEnd: "url(#".concat(arrowTipId, ")")
         }));
       });
       return result;
@@ -663,10 +661,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         x2: x,
         y2: y,
         stroke: colorset['highlight'],
-        style: {
-          'strokeWidth': squareSize * STROKE_THICKNESS_FACTOR,
-          'markerEnd': "url(#".concat(this.getArrowTipId('highlight'), ")")
-        }
+        strokeWidth: squareSize * STROKE_THICKNESS_FACTOR,
+        markerEnd: "url(#".concat(this.getArrowTipId('highlight'), ")")
       });
     }
   }, {
@@ -702,9 +698,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-coordinate kokopu-label",
         x: x,
         y: y,
-        style: {
-          'fontSize': fontSize
-        }
+        fontSize: fontSize
       }, label);
     }
   }, {
@@ -718,9 +712,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-coordinate kokopu-label",
         x: x,
         y: y,
-        style: {
-          'fontSize': fontSize
-        }
+        fontSize: fontSize
       }, label);
     }
   }, {

package/dist/lib/TextMarkerIcon.js

@@ -9,10 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./css/label.css");
-
 var _util = require("./impl/util");
 
+var _TextSymbol = _interopRequireDefault(require("./impl/TextSymbol"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /******************************************************************************
@@ -52,15 +52,13 @@ function TextMarkerIcon(props) {
     viewBox: viewBox,
     width: size,
     height: size
-  }, /*#__PURE__*/_react["default"].createElement("text", {
-    className: "kokopu-label",
+  }, /*#__PURE__*/_react["default"].createElement(_TextSymbol["default"], {
     x: size / 2,
     y: size / 2,
-    fill: props.color,
-    style: {
-      'fontSize': size
-    }
-  }, props.symbol));
+    size: size,
+    symbol: props.symbol,
+    color: props.color
+  }));
 }
 
 TextMarkerIcon.propTypes = {
@@ -70,7 +68,10 @@ TextMarkerIcon.propTypes = {
   size: _propTypes["default"].number.isRequired,
 
   /**
-   * Symbol to represent on the icon. Must be either a letter (upper-case or lower-case) or a digit.
+   * Symbol to represent on the icon. Must be one of:
+   *  - any letter from A to Z (either upper-case or lower-case),
+   *  - any digit from 0 to 9,
+   *  - any symbol code among `'plus'`, `'times'`, `'dot'`, or `'circle'`.
    */
   symbol: _propTypes["default"].string.isRequired,
 

package/dist/lib/css/symbol.css

@@ -0,0 +1,25 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+.kokopu-symbolCircle {
+	fill: transparent;
+}

package/dist/lib/impl/ArrowTip.js

@@ -43,9 +43,7 @@ function ArrowTip(props) {
     refX: 2.5,
     refY: 2,
     orient: "auto",
-    style: {
-      fill: props.color
-    }
+    fill: props.color
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M 4,2 L 0,4 L 1,2 L 0,0 Z"
   }));
@@ -60,8 +58,5 @@ ArrowTip.propTypes = {
   /**
    * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
    */
-  color: _propTypes["default"].string
-};
-ArrowTip.defaultProps = {
-  color: 'currentcolor'
+  color: _propTypes["default"].string.isRequired
 };

package/dist/lib/impl/TextSymbol.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TextSymbol;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../css/label.css");
+
+require("../css/symbol.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+var SHAPE_THICKNESS_FACTOR = 0.1;
+var DOT_RADIUS_FACTOR = 0.15;
+var CIRCLE_RADIUS_FACTOR = 0.425;
+/**
+ * Symbol of a text marker.
+ */
+
+function TextSymbol(props) {
+  if (props.symbol === 'dot') {
+    return /*#__PURE__*/_react["default"].createElement("circle", {
+      cx: props.x,
+      cy: props.y,
+      r: props.size * DOT_RADIUS_FACTOR,
+      fill: props.color
+    });
+  } else if (props.symbol === 'circle') {
+    var thickness = props.size * SHAPE_THICKNESS_FACTOR;
+    return /*#__PURE__*/_react["default"].createElement("circle", {
+      className: "kokopu-symbolCircle",
+      cx: props.x,
+      cy: props.y,
+      r: props.size * CIRCLE_RADIUS_FACTOR,
+      stroke: props.color,
+      strokeWidth: thickness
+    });
+  } else {
+    var symbol = props.symbol === 'plus' ? '+' : props.symbol === 'times' ? "\xD7" : props.symbol;
+    return /*#__PURE__*/_react["default"].createElement("text", {
+      className: "kokopu-label",
+      x: props.x,
+      y: props.y,
+      fill: props.color,
+      fontSize: props.size
+    }, symbol);
+  }
+}
+
+TextSymbol.propTypes = {
+  /**
+   * X-coordinate of the center of the symbol.
+   */
+  x: _propTypes["default"].number.isRequired,
+
+  /**
+   * Y-coordinate of the center of the symbol.
+   */
+  y: _propTypes["default"].number.isRequired,
+
+  /**
+   * Size of the symbol (i.e. size of square in which the symbol is rendered).
+   */
+  size: _propTypes["default"].number.isRequired,
+
+  /**
+   * Symbol code.
+   */
+  symbol: _propTypes["default"].string.isRequired,
+
+  /**
+   * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+   */
+  color: _propTypes["default"].string.isRequired
+};

package/dist/lib/impl/util.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MIN_SQUARE_SIZE = exports.MAX_SQUARE_SIZE = void 0;
 exports.generateRandomId = generateRandomId;
-exports.sanitizeInteger = sanitizeInteger;
-exports.isValidSquare = isValidSquare;
-exports.isValidVector = isValidVector;
 exports.isValidColor = isValidColor;
+exports.isValidSquare = isValidSquare;
 exports.isValidSymbol = isValidSymbol;
-exports.MAX_SQUARE_SIZE = exports.MIN_SQUARE_SIZE = void 0;
+exports.isValidVector = isValidVector;
+exports.sanitizeInteger = sanitizeInteger;
 
 /******************************************************************************
  *                                                                            *
@@ -65,5 +65,5 @@ function isValidColor(color) {
 }
 
 function isValidSymbol(symbol) {
-  return /^[A-Za-z0-9]$/.test(symbol);
+  return /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
 }

package/dist/lib/index.js

@@ -3,76 +3,76 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "flattenSquareMarkers", {
+Object.defineProperty(exports, "ArrowMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenSquareMarkers;
+    return _ArrowMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "parseSquareMarkers", {
+Object.defineProperty(exports, "Chessboard", {
   enumerable: true,
   get: function get() {
-    return _markers.parseSquareMarkers;
+    return _Chessboard["default"];
   }
 });
-Object.defineProperty(exports, "flattenTextMarkers", {
+Object.defineProperty(exports, "ErrorBox", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenTextMarkers;
+    return _ErrorBox["default"];
   }
 });
-Object.defineProperty(exports, "parseTextMarkers", {
+Object.defineProperty(exports, "SquareMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.parseTextMarkers;
+    return _SquareMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "flattenArrowMarkers", {
+Object.defineProperty(exports, "TextMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenArrowMarkers;
+    return _TextMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "parseArrowMarkers", {
+Object.defineProperty(exports, "flattenArrowMarkers", {
   enumerable: true,
   get: function get() {
-    return _markers.parseArrowMarkers;
+    return _markers.flattenArrowMarkers;
   }
 });
-Object.defineProperty(exports, "i18n", {
+Object.defineProperty(exports, "flattenSquareMarkers", {
   enumerable: true,
   get: function get() {
-    return _i18n["default"];
+    return _markers.flattenSquareMarkers;
   }
 });
-Object.defineProperty(exports, "Chessboard", {
+Object.defineProperty(exports, "flattenTextMarkers", {
   enumerable: true,
   get: function get() {
-    return _Chessboard["default"];
+    return _markers.flattenTextMarkers;
   }
 });
-Object.defineProperty(exports, "ErrorBox", {
+Object.defineProperty(exports, "i18n", {
   enumerable: true,
   get: function get() {
-    return _ErrorBox["default"];
+    return _i18n["default"];
   }
 });
-Object.defineProperty(exports, "SquareMarkerIcon", {
+Object.defineProperty(exports, "parseArrowMarkers", {
   enumerable: true,
   get: function get() {
-    return _SquareMarkerIcon["default"];
+    return _markers.parseArrowMarkers;
   }
 });
-Object.defineProperty(exports, "TextMarkerIcon", {
+Object.defineProperty(exports, "parseSquareMarkers", {
   enumerable: true,
   get: function get() {
-    return _TextMarkerIcon["default"];
+    return _markers.parseSquareMarkers;
   }
 });
-Object.defineProperty(exports, "ArrowMarkerIcon", {
+Object.defineProperty(exports, "parseTextMarkers", {
   enumerable: true,
   get: function get() {
-    return _ArrowMarkerIcon["default"];
+    return _markers.parseTextMarkers;
   }
 });
 

package/dist/lib/markers.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.flattenArrowMarkers = flattenArrowMarkers;
 exports.flattenSquareMarkers = flattenSquareMarkers;
 exports.flattenTextMarkers = flattenTextMarkers;
-exports.flattenArrowMarkers = flattenArrowMarkers;
+exports.parseArrowMarkers = parseArrowMarkers;
 exports.parseSquareMarkers = parseSquareMarkers;
 exports.parseTextMarkers = parseTextMarkers;
-exports.parseArrowMarkers = parseArrowMarkers;
 
 var _util = require("./impl/util");
 
@@ -50,8 +50,8 @@ function flattenSquareMarkers(markers) {
 /**
  * Transform a set of text markers defined as a "square -> (symbol, color)" struct into a comma-separated string.
  *
- * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
- * @returns {string} For example: `'Rzd5,GAe4'`
+ * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
+ * @returns {string} For example: `'Rzd5,GAe4,Y(plus)h3'`
  */
 
 
@@ -69,7 +69,7 @@ function flattenTextMarkers(markers) {
         sq = _ref8[0],
         desc = _ref8[1];
 
-    return desc.color.toUpperCase() + desc.symbol + sq;
+    return desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : '(' + desc.symbol + ')') + sq;
   }).join(',');
 }
 /**
@@ -130,17 +130,17 @@ function parseSquareMarkers(markers) {
 /**
  * Parse a set of text markers defined as a comma-separated string into a "square -> (symbol, color)" struct.
  *
- * @param {string} markers For example: `'Rzd5,GAe4'`
- * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
+ * @param {string} markers For example: `'Rzd5,GAe4,Y(plus)h3'`
+ * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
  */
 
 
 function parseTextMarkers(markers) {
   return parseMarkers(markers, function (token) {
-    return /^([GRY])([A-Za-z0-9])([a-h][1-8])$/.test(token) ? {
-      key: RegExp.$3,
+    return /^([GRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ? {
+      key: RegExp.$4,
       value: {
-        symbol: RegExp.$2,
+        symbol: RegExp.$2 || RegExp.$3,
         color: RegExp.$1.toLowerCase()
       }
     } : undefined;

package/doc_src/demo/PageChessboardEdition.js

@@ -152,9 +152,10 @@ export default class Page extends React.Component {
 		if (this.state.interactionMode !== 'editTextMarkers') {
 			return undefined;
 		}
+		let availableSymbols = [ 'plus', 'times', 'dot', 'circle' ].concat([...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789']);
 		return (
 			<Select variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
-				{[...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'].map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
+				{availableSymbols.map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
 			</Select>
 		);
 	}

package/graphic_test_app/01_marker_icons.js

@@ -27,11 +27,13 @@ import { SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon } from '../src/index'
 testApp([ /* eslint-disable react/jsx-key */
 	<SquareMarkerIcon size={40} />,
 	<SquareMarkerIcon size={45} color="green" />,
-	<div style={{ color: 'purple' }} ><SquareMarkerIcon size={31} /></div>,
+	<div style={{ color: 'purple' }}><SquareMarkerIcon size={31} /></div>,
 	<TextMarkerIcon size={41} symbol="A" />,
 	<TextMarkerIcon size={29} symbol="b" color="#0ff" />,
-	<div style={{ color: 'red' }} ><TextMarkerIcon size={53} symbol="5" /></div>,
+	<div style={{ color: 'red' }}><TextMarkerIcon size={53} symbol="5" /></div>,
 	<ArrowMarkerIcon size={40} />,
 	<ArrowMarkerIcon size={24} color="#888" />,
-	<div style={{ color: '#f70' }} ><ArrowMarkerIcon size={48} /></div>,
+	<div style={{ color: '#f70' }}><ArrowMarkerIcon size={48} /></div>,
+	<TextMarkerIcon size={47} symbol="dot" color="#00f" />,
+	<div style={{ color: 'pink' }}><TextMarkerIcon size={48} symbol="circle" /></div>,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_app/04_chessboard_annotations.js

@@ -34,7 +34,7 @@ let textMarkers2 = { g3: { symbol: 'H', color: 'r' }, g5: { symbol: 'M', color:
 
 let squareMarkers3 = { b5: 'r', e4: 'g', h5: 'y' };
 let arrowMarkers3 = { d1h5: 'g', a5f4: 'r', c7c3: 'y', g7g7: 'g' };
-let textMarkers3 = 'G5c6';
+let textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,R(dot)a2,Y(circle)b2';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -37,33 +37,33 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.15.7",
-		"@babel/core": "^7.15.5",
-		"@babel/preset-env": "^7.15.6",
+		"@babel/core": "^7.15.8",
+		"@babel/preset-env": "^7.15.8",
 		"@babel/preset-react": "^7.14.5",
-		"@emotion/react": "^11.4.1",
+		"@emotion/react": "^11.5.0",
 		"@emotion/styled": "^11.3.0",
-		"@mui/material": "^5.0.1",
-		"babel-loader": "^8.2.2",
-		"babel-plugin-istanbul": "^6.0.0",
+		"@mui/material": "^5.0.4",
+		"babel-loader": "^8.2.3",
+		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^9.0.1",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.3.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.26.0",
-		"html-webpack-plugin": "^5.3.2",
+		"css-loader": "^6.4.0",
+		"eslint": "^8.0.1",
+		"eslint-plugin-react": "^7.26.1",
+		"html-webpack-plugin": "^5.4.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.1.2",
+		"mocha": "^9.1.3",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
 		"prompt": "^1.2.0",
 		"react-dom": "^17.0.2",
 		"react-styleguidist": "^11.1.7",
-		"selenium-webdriver": "^4.0.0-rc-1",
-		"ssh2-sftp-client": "^7.0.4",
+		"selenium-webdriver": "^4.0.0",
+		"ssh2-sftp-client": "^7.1.0",
 		"style-loader": "^3.3.0",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.54.0",
-		"webpack-cli": "^4.8.0"
+		"webpack": "^5.59.0",
+		"webpack-cli": "^4.9.1"
 	},
 	"scripts": {
 		"lint": "eslint doc_src graphic_test_app src test",

package/scripts/test_graphic/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.0.0-rc-1-prerelease-20210804
+    image: selenium/standalone-firefox:4.0.0-20211013
     shm_size: '2gb'
     ports:
       - 4444:4444 # Driver (http://localhost:4444)

package/scripts/test_graphic/webpack-config.js

@@ -47,6 +47,7 @@ module.exports = {
 	entry: entries,
 	output: {
 		path: path.resolve(__dirname, '../../build/test_graphic'),
+		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
 	},
 	plugins: plugins,
 	module: {

package/scripts/test_headless.webpack-config.js

@@ -32,6 +32,7 @@ module.exports = {
 		library: {
 			type: 'commonjs2',
 		},
+		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
 	},
 	module: {
 		rules: [

package/src/ArrowMarkerIcon.js

@@ -54,7 +54,7 @@ export default class ArrowMarkerIcon extends React.Component {
 					<ArrowTip id={this.arrowTipId} color={this.props.color} />
 				</defs>
 				<line className="kokopu-arrow" x1={halfThickness} y1={size / 2} x2={size - halfThickness * 3} y2={size / 2} stroke={this.props.color}
-					style={{ 'strokeWidth': halfThickness * 2, 'markerEnd': `url(#${this.arrowTipId})` }} />
+					strokeWidth={halfThickness * 2} markerEnd={`url(#${this.arrowTipId})`} />
 			</svg>
 		);
 	}

package/src/Chessboard.js

@@ -29,6 +29,7 @@ import kokopu from 'kokopu';
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
+import TextSymbol from './impl/TextSymbol';
 import ErrorBox from './ErrorBox';
 import i18n from './i18n';
 import { parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './markers';
@@ -272,7 +273,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow kokopu-arrowDraggable kokopu-dragging" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-				stroke={colorset[this.props.editedArrowColor]} style={{ 'strokeWidth': strokeWidth, 'markerEnd': `url(#${arrowTipId})` }}
+				stroke={colorset[this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 			/>
 		);
 	}
@@ -347,9 +348,9 @@ export default class Chessboard extends React.Component {
 			x += squareSize / 2;
 			y += squareSize / 2;
 			result.push(
-				<text key={'txtm-' + sq} className="kokopu-annotation kokopu-label" x={x} y={y} fill={colorset[value.color]} style={{ 'fontSize': squareSize }}>
-					{value.symbol}
-				</text>
+				<g key={'txtm-' + sq} className="kokopu-annotation">
+					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset[value.color]} />
+				</g>
 			);
 		});
 		return result;
@@ -376,7 +377,7 @@ export default class Chessboard extends React.Component {
 			result.push(
 				<line
 					key={'arm-' + vect} className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-					stroke={colorset[color]} style={{ 'strokeWidth': strokeWidth, 'markerEnd': `url(#${arrowTipId})` }}
+					stroke={colorset[color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 				/>
 			);
 		});
@@ -400,7 +401,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['highlight']}
-				style={{ 'strokeWidth': squareSize * STROKE_THICKNESS_FACTOR, 'markerEnd': `url(#${this.getArrowTipId('highlight')})` }}
+				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId('highlight')})`}
 			/>
 		);
 	}
@@ -419,14 +420,14 @@ export default class Chessboard extends React.Component {
 		let x = Math.round(-RANK_COORDINATE_WIDTH_FACTOR * fontSize) / 2;
 		let y = (this.props.flipped ? rank + 0.5 : 7.5 - rank) * squareSize;
 		let label = RANK_LABELS[rank];
-		return <text key={'rank-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} style={{ 'fontSize': fontSize }}>{label}</text>;
+		return <text key={'rank-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	renderFileCoordinate(squareSize, fontSize, file) {
 		let x = (this.props.flipped ? 7.5 - file : 0.5 + file) * squareSize;
 		let y = 8 * squareSize + Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize) / 2;
 		let label = FILE_LABELS[file];
-		return <text key={'file-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} style={{ 'fontSize': fontSize }}>{label}</text>;
+		return <text key={'file-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	handleWindowResize() {

package/src/TextMarkerIcon.js

@@ -23,9 +23,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import './css/label.css';
-
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, isValidSymbol } from './impl/util';
+import TextSymbol from './impl/TextSymbol';
 
 
 /**
@@ -39,9 +38,7 @@ export default function TextMarkerIcon(props) {
 	let viewBox = `0 0 ${size} ${size}`;
 	return (
 		<svg className="kokopu-textMarkerIcon" viewBox={viewBox} width={size} height={size}>
-			<text className="kokopu-label" x={size / 2} y={size / 2} fill={props.color} style={{ 'fontSize': size }}>
-				{props.symbol}
-			</text>
+			<TextSymbol x={size / 2} y={size / 2} size={size} symbol={props.symbol} color={props.color} />
 		</svg>
 	);
 }
@@ -54,7 +51,10 @@ TextMarkerIcon.propTypes = {
 	size: PropTypes.number.isRequired,
 
 	/**
-	 * Symbol to represent on the icon. Must be either a letter (upper-case or lower-case) or a digit.
+	 * Symbol to represent on the icon. Must be one of:
+	 *  - any letter from A to Z (either upper-case or lower-case),
+	 *  - any digit from 0 to 9,
+	 *  - any symbol code among `'plus'`, `'times'`, `'dot'`, or `'circle'`.
 	 */
 	symbol: PropTypes.string.isRequired,
 

package/src/css/symbol.css

@@ -0,0 +1,25 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+.kokopu-symbolCircle {
+	fill: transparent;
+}

package/src/impl/ArrowTip.js

@@ -29,7 +29,7 @@ import React from 'react';
  */
 export default function ArrowTip(props) {
 	return (
-		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" style={{ fill: props.color }}>
+		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" fill={props.color}>
 			<path d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
 		</marker>
 	);
@@ -45,9 +45,5 @@ ArrowTip.propTypes = {
 	/**
 	 * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
 	 */
-	color: PropTypes.string,
-};
-
-ArrowTip.defaultProps = {
-	color: 'currentcolor',
+	color: PropTypes.string.isRequired,
 };

package/src/impl/TextSymbol.js

@@ -0,0 +1,77 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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 PropTypes from 'prop-types';
+import React from 'react';
+
+import '../css/label.css';
+import '../css/symbol.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-label" x={props.x} y={props.y} fill={props.color} fontSize={props.size}>{symbol}</text>;
+	}
+}
+
+TextSymbol.propTypes = {
+
+	/**
+	 * X-coordinate of the center of the symbol.
+	 */
+	x: PropTypes.number.isRequired,
+
+	/**
+	 * Y-coordinate of the center of the symbol.
+	 */
+	y: PropTypes.number.isRequired,
+
+	/**
+	 * Size of the symbol (i.e. size of square in which the symbol is rendered).
+	 */
+	size: PropTypes.number.isRequired,
+
+	/**
+	 * Symbol code.
+	 */
+	symbol: PropTypes.string.isRequired,
+
+	/**
+	 * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+	 */
+	color: PropTypes.string.isRequired,
+};

package/src/impl/util.js

@@ -56,5 +56,5 @@ export function isValidColor(color) {
 
 
 export function isValidSymbol(symbol) {
-	return /^[A-Za-z0-9]$/.test(symbol);
+	return /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
 }

package/src/markers.js

@@ -41,14 +41,14 @@ export function flattenSquareMarkers(markers) {
 /**
  * Transform a set of text markers defined as a "square -> (symbol, color)" struct into a comma-separated string.
  *
- * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
- * @returns {string} For example: `'Rzd5,GAe4'`
+ * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
+ * @returns {string} For example: `'Rzd5,GAe4,Y(plus)h3'`
  */
 export function flattenTextMarkers(markers) {
 	return Object.entries(markers)
 		.filter(([ sq, desc ]) => isValidSquare(sq) && desc && isValidColor(desc.color) && isValidSymbol(desc.symbol))
 		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([ sq, desc ]) => desc.color.toUpperCase() + desc.symbol + sq)
+		.map(([ sq, desc ]) => desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : '(' + desc.symbol + ')') + sq)
 		.join(',');
 }
 
@@ -91,12 +91,13 @@ export function parseSquareMarkers(markers) {
 /**
  * Parse a set of text markers defined as a comma-separated string into a "square -> (symbol, color)" struct.
  *
- * @param {string} markers For example: `'Rzd5,GAe4'`
- * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
+ * @param {string} markers For example: `'Rzd5,GAe4,Y(plus)h3'`
+ * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
  */
 export function parseTextMarkers(markers) {
 	return parseMarkers(markers, token => {
-		return /^([GRY])([A-Za-z0-9])([a-h][1-8])$/.test(token) ? { key: RegExp.$3, value: { symbol: RegExp.$2, color: RegExp.$1.toLowerCase() } } : undefined;
+		return /^([GRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ?
+			{ key: RegExp.$4, value: { symbol: RegExp.$2 || RegExp.$3, color: RegExp.$1.toLowerCase() } } : undefined;
 	});
 }
 

package/test/1_markers.js

@@ -65,6 +65,13 @@ describe('Flatten text markers', () => {
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
 	})).is('G2a1,YMc5,RLd2,Rxh7,Ywh8'); });
+	it('Multi-character symbols', () => { test.value(flattenTextMarkers({
+		a1: { symbol: 'A', color: 'y' },
+		a7: { symbol: 'plus', color: 'g' },
+		b3: { symbol: 'times', color: 'r' },
+		g5: { symbol: 'dot', color: 'y' },
+		h3: { symbol: 'circle', color: 'g' },
+	})).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3'); });
 	it('<empty>', () => { test.value(flattenTextMarkers({})).is(''); });
 
 	it('Wrong square', () => { test.value(flattenTextMarkers({
@@ -83,6 +90,10 @@ describe('Flatten text markers', () => {
 		d8: { symbol: '-', color: 'r' },
 		c1: { symbol: 'abcd', color: 'r' },
 	})).is('G0a2'); });
+	it('Wrong multi-character symbol', () => { test.value(flattenTextMarkers({
+		a2: { symbol: '0', color: 'g' },
+		b5: { symbol: 'whatever', color: 'r' },
+	})).is('G0a2'); });
 });
 
 
@@ -100,6 +111,13 @@ describe('Parse text markers', () => {
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
 	}); });
+	it('Multi-character symbols', () => { test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
+		a1: { symbol: 'A', color: 'y' },
+		a7: { symbol: 'plus', color: 'g' },
+		b3: { symbol: 'times', color: 'r' },
+		g5: { symbol: 'dot', color: 'y' },
+		h3: { symbol: 'circle', color: 'g' },
+	}); });
 	it('<empty>', () => { test.value(parseTextMarkers('')).is({}); });
 	it('<blank>', () => { test.value(parseTextMarkers(' ')).is({}); });
 
@@ -107,6 +125,7 @@ describe('Parse text markers', () => {
 	it('Duplicated square', () => { test.value(parseTextMarkers('Rka3,Gba3')).is({ a3: { symbol: 'b', color: 'g' } }); });
 	it('Wrong color', () => { test.value(parseTextMarkers('G3a6,BAg5')).is({ a6: { symbol: '3', color: 'g' } }); });
 	it('Wrong symbol', () => { test.value(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7')).is({ g5: { symbol: 'A', color: 'r' } }); });
+	it('Wrong multi-character symbol', () => { test.value(parseTextMarkers('RZb2,Y(whatever)e4')).is({ b2: { symbol: 'Z', color: 'r' } }); });
 	it('Wrong format', () => { test.value(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3')).is({ e4: { symbol: 'q', color: 'y' } }); });
 });
 

package/test/3_marker_icons_graphic.js

@@ -36,5 +36,5 @@ describe('Marker icons graphic', function() {
 	});
 
 	itChecksScreenshots(browserContext, '01_marker_icons', [ 'default square', 'colorized square', 'wrapped square', 'default text', 'colorized text', 'wrapped text',
-		'default arrow', 'colorized arrow', 'wrapped arrow' ]);
+		'default arrow', 'colorized arrow', 'wrapped arrow', 'colorized symbol', 'wrapped symbol' ]);
 });