kokopu-react 1.10.1 → 1.11.1

package/dist/lib/Chessboard.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _kokopu = require("kokopu");
 var _colorsets2 = _interopRequireDefault(require("./impl/colorsets"));
 var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
 var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
+var _DraggableHandle = _interopRequireDefault(require("./impl/DraggableHandle"));
 var _Motion = _interopRequireDefault(require("./impl/Motion"));
 var _TextSymbol = _interopRequireDefault(require("./impl/TextSymbol"));
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
@@ -68,10 +68,6 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       windowWidth: window.innerWidth
     };
     _this.arrowTipIdSuffix = (0, _util.generateRandomId)();
-    _this.handleRef = {};
-    (0, _kokopu.forEachSquare)(function (sq) {
-      _this.handleRef[sq] = /*#__PURE__*/_react["default"].createRef();
-    });
     return _this;
   }
   _createClass(Chessboard, [{
@@ -407,32 +403,26 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       var dragEnabledForEditArrows = this.isEditArrowModeEnabled();
       var dragEnabledForPlayMoves = this.isPlayMoveModeEnabled() && position.isLegal() && position.square(sq).startsWith(position.turn()) && !this.state.promotionDrawer;
       if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
-        var dragPosition = this.state.draggedSquare === sq ? this.state.dragPosition : {
-          x: 0,
-          y: 0
-        };
-        var classNames = ['kokopu-handle', this.isEditArrowModeEnabled() ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable'];
-        return /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_DraggableHandle["default"], {
           key: 'handle-' + sq,
-          position: dragPosition,
-          nodeRef: this.handleRef[sq],
-          onStart: function onStart(evt) {
-            return _this8.handleDragStart(sq, evt);
-          },
-          onDrag: function onDrag(_, dragData) {
-            return _this8.handleDrag(sq, dragData);
-          },
-          onStop: function onStop(_, dragData) {
-            return _this8.handleDragStop(sq, dragData);
-          }
-        }, /*#__PURE__*/_react["default"].createElement("rect", {
-          ref: this.handleRef[sq],
-          className: classNames.join(' '),
           x: x,
           y: y,
           width: squareSize,
-          height: squareSize
-        }));
+          height: squareSize,
+          isArrowHandle: this.isEditArrowModeEnabled(),
+          onDragStart: function onDragStart(x0, y0) {
+            return _this8.handleDragStart(sq, x0, y0);
+          },
+          onDrag: function onDrag(dx, dy) {
+            return _this8.handleDrag(sq, dx, dy);
+          },
+          onDragStop: function onDragStop(dx, dy) {
+            return _this8.handleDragStop(sq, dx, dy);
+          },
+          onDragCanceled: function onDragCanceled() {
+            return _this8.handleDragCanceled();
+          }
+        });
       } else if (this.props.interactionMode === 'clickSquares') {
         return /*#__PURE__*/_react["default"].createElement("rect", {
           key: 'handle-' + sq,
@@ -633,15 +623,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleDragStart",
-    value: function handleDragStart(sq, evt) {
-      var squareBoundary = evt.target.getBoundingClientRect();
+    value: function handleDragStart(sq, x0, y0) {
       this.setState({
         inhibitedSquare: this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled() ? sq : '-',
         draggedSquare: sq,
         hoveredSquare: sq,
         cursorOffset: {
-          x: evt.clientX - squareBoundary.left,
-          y: evt.clientY - squareBoundary.top
+          x: x0,
+          y: y0
         },
         dragPosition: {
           x: 0,
@@ -651,28 +640,28 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleDrag",
-    value: function handleDrag(sq, dragData) {
+    value: function handleDrag(sq, dx, dy) {
       var squareSize = this.getSquareSize();
       var _this$getSquareCoordi13 = this.getSquareCoordinates(squareSize, sq),
         x = _this$getSquareCoordi13.x,
         y = _this$getSquareCoordi13.y;
-      var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
+      var targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
       this.setState({
         hoveredSquare: targetSq,
         dragPosition: {
-          x: dragData.x,
-          y: dragData.y
+          x: dx,
+          y: dy
         }
       });
     }
   }, {
     key: "handleDragStop",
-    value: function handleDragStop(sq, dragData) {
+    value: function handleDragStop(sq, dx, dy) {
       var squareSize = this.getSquareSize();
       var _this$getSquareCoordi14 = this.getSquareCoordinates(squareSize, sq),
         x = _this$getSquareCoordi14.x,
         y = _this$getSquareCoordi14.y;
-      var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
+      var targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
       this.setState({
         inhibitedSquare: '-',
         draggedSquare: '-',
@@ -721,6 +710,15 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         }
       }
     }
+  }, {
+    key: "handleDragCanceled",
+    value: function handleDragCanceled() {
+      this.setState({
+        inhibitedSquare: '-',
+        draggedSquare: '-',
+        hoveredSquare: '-'
+      });
+    }
   }, {
     key: "handleDrawerCancelButtonClicked",
     value: function handleDrawerCancelButtonClicked() {

package/dist/lib/impl/DraggableHandle.js

@@ -0,0 +1,277 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+/**
+ * Invisible SVG rectangular handle that captures drag events.
+ */
+var DraggableHandle = /*#__PURE__*/function (_React$Component) {
+  _inherits(DraggableHandle, _React$Component);
+  var _super = _createSuper(DraggableHandle);
+  function DraggableHandle(props) {
+    var _this;
+    _classCallCheck(this, DraggableHandle);
+    _this = _super.call(this, props);
+    _this.dragData = null;
+    _this.innerRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  _createClass(DraggableHandle, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if (!this.windowListeners) {
+        this.windowListeners = {
+          mouseDown: function mouseDown(evt) {
+            return _this2.handleMouseDown(evt);
+          },
+          mouseMove: function mouseMove(evt) {
+            return _this2.handleMouseMove(evt);
+          },
+          mouseUp: function mouseUp(evt) {
+            return _this2.handleMouseUp(evt);
+          },
+          touchStart: function touchStart(evt) {
+            return _this2.handleTouchStart(evt);
+          },
+          touchMove: function touchMove(evt) {
+            return _this2.handleTouchMove(evt);
+          },
+          touchEnd: function touchEnd(evt) {
+            return _this2.handleTouchEnd(evt);
+          },
+          touchCancel: function touchCancel(evt) {
+            return _this2.handleTouchCancel(evt);
+          }
+        };
+        this.innerRef.current.addEventListener('mousedown', this.windowListeners.mouseDown);
+        window.addEventListener('mousemove', this.windowListeners.mouseMove);
+        window.addEventListener('mouseup', this.windowListeners.mouseUp);
+        this.innerRef.current.addEventListener('touchstart', this.windowListeners.touchStart, {
+          passive: false
+        });
+        window.addEventListener('touchmove', this.windowListeners.touchMove, {
+          passive: false
+        });
+        window.addEventListener('touchend', this.windowListeners.touchEnd);
+        window.addEventListener('touchcancel', this.windowListeners.touchCancel);
+      }
+      this.dragData = null;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.windowListeners) {
+        this.innerRef.current.removeEventListener('mousedown', this.windowListeners.mouseDown);
+        window.removeEventListener('mousemove', this.windowListeners.mouseMove);
+        window.removeEventListener('mouseup', this.windowListeners.mouseUp);
+        this.innerRef.current.removeEventListener('touchstart', this.windowListeners.touchStart);
+        window.removeEventListener('touchmove', this.windowListeners.touchMove);
+        window.removeEventListener('touchend', this.windowListeners.touchEnd);
+        window.removeEventListener('touchcancel', this.windowListeners.touchCancel);
+        this.windowListeners = null;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var classNames = ['kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable'];
+      return /*#__PURE__*/_react["default"].createElement("rect", {
+        ref: this.innerRef,
+        className: classNames.join(' '),
+        x: this.props.x,
+        y: this.props.y,
+        width: this.props.width,
+        height: this.props.height
+      });
+    }
+  }, {
+    key: "handleTouchStart",
+    value: function handleTouchStart(evt) {
+      if (this.dragData || evt.touches.length !== 1) {
+        return;
+      }
+      evt.preventDefault();
+      this.doInitDrag(evt.target, evt.touches[0]);
+    }
+  }, {
+    key: "handleTouchMove",
+    value: function handleTouchMove(evt) {
+      if (!this.dragData) {
+        return;
+      }
+      evt.preventDefault();
+      if (evt.touches.length === 1) {
+        this.doUpdateDrag(evt.touches[0]);
+      } else {
+        this.doCancelDrag();
+      }
+    }
+  }, {
+    key: "handleTouchEnd",
+    value: function handleTouchEnd(evt) {
+      if (!this.dragData) {
+        return;
+      }
+      evt.preventDefault();
+      if (evt.touches.length === 0 && evt.changedTouches.length === 1) {
+        this.doEndDrag(evt.changedTouches[0]);
+      } else {
+        this.doCancelDrag();
+      }
+    }
+  }, {
+    key: "handleTouchCancel",
+    value: function handleTouchCancel(evt) {
+      if (!this.dragData) {
+        return;
+      }
+      evt.preventDefault();
+      this.doCancelDrag();
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(evt) {
+      if (this.dragData || evt.button !== 0) {
+        return;
+      }
+      evt.preventDefault();
+      this.doInitDrag(evt.target, evt);
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(evt) {
+      if (!this.dragData) {
+        return;
+      }
+      evt.preventDefault();
+      this.doUpdateDrag(evt);
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp(evt) {
+      if (!this.dragData) {
+        return;
+      }
+      evt.preventDefault();
+      this.doEndDrag(evt);
+    }
+  }, {
+    key: "doInitDrag",
+    value: function doInitDrag(target, _ref) {
+      var pageX = _ref.pageX,
+        pageY = _ref.pageY,
+        clientX = _ref.clientX,
+        clientY = _ref.clientY;
+      this.dragData = {
+        originX: pageX,
+        originY: pageY
+      };
+      var handleBoundary = target.getBoundingClientRect();
+      var x0 = clientX - handleBoundary.left;
+      var y0 = clientY - handleBoundary.top;
+      if (this.props.onDragStart) {
+        this.props.onDragStart(x0, y0);
+      }
+    }
+  }, {
+    key: "doUpdateDrag",
+    value: function doUpdateDrag(_ref2) {
+      var pageX = _ref2.pageX,
+        pageY = _ref2.pageY;
+      var _this$dragData = this.dragData,
+        originX = _this$dragData.originX,
+        originY = _this$dragData.originY;
+      if (this.props.onDrag) {
+        this.props.onDrag(pageX - originX, pageY - originY);
+      }
+    }
+  }, {
+    key: "doEndDrag",
+    value: function doEndDrag(_ref3) {
+      var pageX = _ref3.pageX,
+        pageY = _ref3.pageY;
+      var _this$dragData2 = this.dragData,
+        originX = _this$dragData2.originX,
+        originY = _this$dragData2.originY;
+      this.dragData = null;
+      if (this.props.onDragStop) {
+        this.props.onDragStop(pageX - originX, pageY - originY);
+      }
+    }
+  }, {
+    key: "doCancelDrag",
+    value: function doCancelDrag() {
+      if (this.props.onDragCanceled) {
+        this.props.onDragCanceled();
+      }
+    }
+  }]);
+  return DraggableHandle;
+}(_react["default"].Component);
+exports["default"] = DraggableHandle;
+DraggableHandle.propTypes = {
+  /**
+   * Initial X coordinate of the handle.
+   */
+  x: _propTypes["default"].number.isRequired,
+  /**
+   * Initial Y coordinate of the handle.
+   */
+  y: _propTypes["default"].number.isRequired,
+  /**
+   * Width of the handle.
+   */
+  width: _propTypes["default"].number.isRequired,
+  /**
+   * Height of the handle.
+   */
+  height: _propTypes["default"].number.isRequired,
+  /**
+   * `true` if the handle corresponds to a draggable arrow, `false` if it corresponds to a draggable piece.
+   */
+  isArrowHandle: _propTypes["default"].bool.isRequired,
+  /**
+   * Callback invoked when the drag starts.
+   *
+   * @param {number} x0 X-coordinate (relative to the handle) at which the drag has been initiated.
+   * @param {number} y0 X-coordinate (relative to the handle) at which the drag has been initiated.
+   */
+  onDragStart: _propTypes["default"].func,
+  /**
+   * Callback invoked during the drag.
+   *
+   * @param {number} dx X-coordinate of the translation vector applied during the drag.
+   * @param {number} dy Y-coordinate of the translation vector applied during the drag.
+   */
+  onDrag: _propTypes["default"].func,
+  /**
+   * Callback invoked when the drag stops.
+   *
+   * @param {number} dx X-coordinate of the translation vector applied during the drag.
+   * @param {number} dy Y-coordinate of the translation vector applied during the drag.
+   */
+  onDragStop: _propTypes["default"].func,
+  /**
+   * Callback invoked when the drag is canceled.
+   */
+  onDragCanceled: _propTypes["default"].func
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.10.1",
+	"version": "1.11.1",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -35,8 +35,7 @@
 	},
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
-		"prop-types": "^15.8.1",
-		"react-draggable": "^4.4.5"
+		"prop-types": "^15.8.1"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.20.7",
@@ -61,7 +60,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-styleguidist": "^13.0.0",
-		"selenium-webdriver": "^4.7.1",
+		"selenium-webdriver": "^4.8.0",
 		"ssh2-sftp-client": "^9.0.4",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",

package/scripts/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.7.1-20221208 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
+    image: selenium/standalone-firefox:4.8.0-20230131 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444 (driver)

package/src/Chessboard.js

@@ -22,12 +22,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Draggable from 'react-draggable';
 import { exception, MoveDescriptor, Position, coordinatesToSquare, forEachSquare, oppositeColor, squareColor, squareToCoordinates } from 'kokopu';
 
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
+import DraggableHandle from './impl/DraggableHandle';
 import Motion from './impl/Motion';
 import TextSymbol from './impl/TextSymbol';
 import ErrorBox from './ErrorBox';
@@ -67,9 +67,6 @@ export default class Chessboard extends React.Component {
 			windowWidth: window.innerWidth,
 		};
 		this.arrowTipIdSuffix = generateRandomId();
-
-		this.handleRef = {};
-		forEachSquare(sq => { this.handleRef[sq] = React.createRef(); });
 	}
 
 	componentDidMount() {
@@ -313,18 +310,13 @@ export default class Chessboard extends React.Component {
 		let dragEnabledForEditArrows = this.isEditArrowModeEnabled();
 		let dragEnabledForPlayMoves = this.isPlayMoveModeEnabled() && position.isLegal() && position.square(sq).startsWith(position.turn()) && !this.state.promotionDrawer;
 		if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
-			let dragPosition = this.state.draggedSquare === sq ? this.state.dragPosition : { x: 0, y: 0 };
-			let classNames = [ 'kokopu-handle', this.isEditArrowModeEnabled() ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
 			return (
-				<Draggable
-					key={'handle-' + sq} position={dragPosition}
-					nodeRef={this.handleRef[sq]}
-					onStart={evt => this.handleDragStart(sq, evt)}
-					onDrag={(_, dragData) => this.handleDrag(sq, dragData)}
-					onStop={(_, dragData) => this.handleDragStop(sq, dragData)}
-				>
-					<rect ref={this.handleRef[sq]} className={classNames.join(' ')} x={x} y={y} width={squareSize} height={squareSize} />
-				</Draggable>
+				<DraggableHandle key={'handle-' + sq} x={x} y={y} width={squareSize} height={squareSize} isArrowHandle={this.isEditArrowModeEnabled()}
+					onDragStart={(x0, y0) => this.handleDragStart(sq, x0, y0)}
+					onDrag={(dx, dy) => this.handleDrag(sq, dx, dy)}
+					onDragStop={(dx, dy) => this.handleDragStop(sq, dx, dy)}
+					onDragCanceled={() => this.handleDragCanceled()}
+				/>
 			);
 		}
 		else if (this.props.interactionMode === 'clickSquares') {
@@ -443,31 +435,30 @@ export default class Chessboard extends React.Component {
 		this.setState({ windowWidth: window.innerWidth });
 	}
 
-	handleDragStart(sq, evt) {
-		let squareBoundary = evt.target.getBoundingClientRect();
+	handleDragStart(sq, x0, y0) {
 		this.setState({
 			inhibitedSquare: this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled() ? sq : '-',
 			draggedSquare: sq,
 			hoveredSquare: sq,
-			cursorOffset: { x: evt.clientX - squareBoundary.left, y: evt.clientY - squareBoundary.top },
+			cursorOffset: { x: x0, y: y0 },
 			dragPosition: { x: 0, y: 0 },
 		});
 	}
 
-	handleDrag(sq, dragData) {
+	handleDrag(sq, dx, dy) {
 		let squareSize = this.getSquareSize();
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
-		let targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
+		let targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
 		this.setState({
 			hoveredSquare: targetSq,
-			dragPosition: { x: dragData.x, y: dragData.y },
+			dragPosition: { x: dx, y: dy },
 		});
 	}
 
-	handleDragStop(sq, dragData) {
+	handleDragStop(sq, dx, dy) {
 		let squareSize = this.getSquareSize();
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
-		let targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
+		let targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
 		this.setState({
 			inhibitedSquare: '-',
 			draggedSquare: '-',
@@ -517,6 +508,14 @@ export default class Chessboard extends React.Component {
 		}
 	}
 
+	handleDragCanceled() {
+		this.setState({
+			inhibitedSquare: '-',
+			draggedSquare: '-',
+			hoveredSquare: '-',
+		});
+	}
+
 	handleDrawerCancelButtonClicked() {
 		this.setState({
 			inhibitedSquare: '-',

package/src/impl/DraggableHandle.js

@@ -0,0 +1,235 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 PropTypes from 'prop-types';
+import React from 'react';
+
+
+/**
+ * Invisible SVG rectangular handle that captures drag events.
+ */
+export default class DraggableHandle extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.dragData = null;
+		this.innerRef = React.createRef();
+	}
+
+	componentDidMount() {
+		if (!this.windowListeners) {
+			this.windowListeners = {
+				mouseDown: evt => this.handleMouseDown(evt),
+				mouseMove: evt => this.handleMouseMove(evt),
+				mouseUp: evt => this.handleMouseUp(evt),
+				touchStart: evt => this.handleTouchStart(evt),
+				touchMove: evt => this.handleTouchMove(evt),
+				touchEnd: evt => this.handleTouchEnd(evt),
+				touchCancel: evt => this.handleTouchCancel(evt),
+			};
+			this.innerRef.current.addEventListener('mousedown', this.windowListeners.mouseDown);
+			window.addEventListener('mousemove', this.windowListeners.mouseMove);
+			window.addEventListener('mouseup', this.windowListeners.mouseUp);
+			this.innerRef.current.addEventListener('touchstart', this.windowListeners.touchStart, { passive: false });
+			window.addEventListener('touchmove', this.windowListeners.touchMove, { passive: false });
+			window.addEventListener('touchend', this.windowListeners.touchEnd);
+			window.addEventListener('touchcancel', this.windowListeners.touchCancel);
+		}
+		this.dragData = null;
+	}
+
+	componentWillUnmount() {
+		if (this.windowListeners) {
+			this.innerRef.current.removeEventListener('mousedown', this.windowListeners.mouseDown);
+			window.removeEventListener('mousemove', this.windowListeners.mouseMove);
+			window.removeEventListener('mouseup', this.windowListeners.mouseUp);
+			this.innerRef.current.removeEventListener('touchstart', this.windowListeners.touchStart);
+			window.removeEventListener('touchmove', this.windowListeners.touchMove);
+			window.removeEventListener('touchend', this.windowListeners.touchEnd);
+			window.removeEventListener('touchcancel', this.windowListeners.touchCancel);
+			this.windowListeners = null;
+		}
+	}
+
+	render() {
+		let classNames = [ 'kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
+		return <rect ref={this.innerRef} className={classNames.join(' ')} x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} />;
+	}
+
+	handleTouchStart(evt) {
+		if (this.dragData || evt.touches.length !== 1) {
+			return;
+		}
+		evt.preventDefault();
+		this.doInitDrag(evt.target, evt.touches[0]);
+	}
+
+	handleTouchMove(evt) {
+		if (!this.dragData) {
+			return;
+		}
+		evt.preventDefault();
+		if (evt.touches.length === 1) {
+			this.doUpdateDrag(evt.touches[0]);
+		}
+		else {
+			this.doCancelDrag();
+		}
+	}
+
+	handleTouchEnd(evt) {
+		if (!this.dragData) {
+			return;
+		}
+		evt.preventDefault();
+		if (evt.touches.length === 0 && evt.changedTouches.length === 1) {
+			this.doEndDrag(evt.changedTouches[0]);
+		}
+		else {
+			this.doCancelDrag();
+		}
+	}
+
+	handleTouchCancel(evt) {
+		if (!this.dragData) {
+			return;
+		}
+		evt.preventDefault();
+		this.doCancelDrag();
+	}
+
+	handleMouseDown(evt) {
+		if (this.dragData || evt.button !== 0) {
+			return;
+		}
+		evt.preventDefault();
+		this.doInitDrag(evt.target, evt);
+	}
+
+	handleMouseMove(evt) {
+		if (!this.dragData) {
+			return;
+		}
+		evt.preventDefault();
+		this.doUpdateDrag(evt);
+	}
+
+	handleMouseUp(evt) {
+		if (!this.dragData) {
+			return;
+		}
+		evt.preventDefault();
+		this.doEndDrag(evt);
+	}
+
+	doInitDrag(target, { pageX, pageY, clientX, clientY }) {
+		this.dragData = {
+			originX: pageX,
+			originY: pageY,
+		};
+		let handleBoundary = target.getBoundingClientRect();
+		let x0 = clientX - handleBoundary.left;
+		let y0 = clientY - handleBoundary.top;
+		if (this.props.onDragStart) {
+			this.props.onDragStart(x0, y0);
+		}
+	}
+
+	doUpdateDrag({ pageX, pageY }) {
+		let { originX, originY } = this.dragData;
+		if (this.props.onDrag) {
+			this.props.onDrag(pageX - originX, pageY - originY);
+		}
+	}
+
+	doEndDrag({ pageX, pageY }) {
+		let { originX, originY } = this.dragData;
+		this.dragData = null;
+		if (this.props.onDragStop) {
+			this.props.onDragStop(pageX - originX, pageY - originY);
+		}
+	}
+
+	doCancelDrag() {
+		if (this.props.onDragCanceled) {
+			this.props.onDragCanceled();
+		}
+	}
+
+}
+
+DraggableHandle.propTypes = {
+
+	/**
+	 * Initial X coordinate of the handle.
+	 */
+	x: PropTypes.number.isRequired,
+
+	/**
+	 * Initial Y coordinate of the handle.
+	 */
+	y: PropTypes.number.isRequired,
+
+	/**
+	 * Width of the handle.
+	 */
+	width: PropTypes.number.isRequired,
+
+	/**
+	 * Height of the handle.
+	 */
+	height: PropTypes.number.isRequired,
+
+	/**
+	 * `true` if the handle corresponds to a draggable arrow, `false` if it corresponds to a draggable piece.
+	 */
+	isArrowHandle: PropTypes.bool.isRequired,
+
+	/**
+	 * Callback invoked when the drag starts.
+	 *
+	 * @param {number} x0 X-coordinate (relative to the handle) at which the drag has been initiated.
+	 * @param {number} y0 X-coordinate (relative to the handle) at which the drag has been initiated.
+	 */
+	onDragStart: PropTypes.func,
+
+	/**
+	 * Callback invoked during the drag.
+	 *
+	 * @param {number} dx X-coordinate of the translation vector applied during the drag.
+	 * @param {number} dy Y-coordinate of the translation vector applied during the drag.
+	 */
+	onDrag: PropTypes.func,
+
+	/**
+	 * Callback invoked when the drag stops.
+	 *
+	 * @param {number} dx X-coordinate of the translation vector applied during the drag.
+	 * @param {number} dy Y-coordinate of the translation vector applied during the drag.
+	 */
+	onDragStop: PropTypes.func,
+
+	/**
+	 * Callback invoked when the drag is canceled.
+	 */
+	onDragCanceled: PropTypes.func,
+};