kokopu-react 1.11.0 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lib/impl/DraggableHandle.js +18 -9
  2. package/package.json +2 -2
  3. package/scripts/docker-compose.yml +1 -1
  4. package/src/impl/DraggableHandle.js +9 -6
package/dist/lib/impl/DraggableHandle.js CHANGED
@@ -31,6 +31,7 @@ var DraggableHandle = /*#__PURE__*/function (_React$Component) {
31
31
  _classCallCheck(this, DraggableHandle);
32
32
  _this = _super.call(this, props);
33
33
  _this.dragData = null;
34
+ _this.innerRef = /*#__PURE__*/_react["default"].createRef();
34
35
  return _this;
35
36
  }
36
37
  _createClass(DraggableHandle, [{
@@ -39,12 +40,18 @@ var DraggableHandle = /*#__PURE__*/function (_React$Component) {
39
40
  var _this2 = this;
40
41
  if (!this.windowListeners) {
41
42
  this.windowListeners = {
43
+ mouseDown: function mouseDown(evt) {
44
+ return _this2.handleMouseDown(evt);
45
+ },
42
46
  mouseMove: function mouseMove(evt) {
43
47
  return _this2.handleMouseMove(evt);
44
48
  },
45
49
  mouseUp: function mouseUp(evt) {
46
50
  return _this2.handleMouseUp(evt);
47
51
  },
52
+ touchStart: function touchStart(evt) {
53
+ return _this2.handleTouchStart(evt);
54
+ },
48
55
  touchMove: function touchMove(evt) {
49
56
  return _this2.handleTouchMove(evt);
50
57
  },
@@ -55,9 +62,15 @@ var DraggableHandle = /*#__PURE__*/function (_React$Component) {
55
62
  return _this2.handleTouchCancel(evt);
56
63
  }
57
64
  };
65
+ this.innerRef.current.addEventListener('mousedown', this.windowListeners.mouseDown);
58
66
  window.addEventListener('mousemove', this.windowListeners.mouseMove);
59
67
  window.addEventListener('mouseup', this.windowListeners.mouseUp);
60
- window.addEventListener('touchmove', this.windowListeners.touchMove);
68
+ this.innerRef.current.addEventListener('touchstart', this.windowListeners.touchStart, {
69
+ passive: false
70
+ });
71
+ window.addEventListener('touchmove', this.windowListeners.touchMove, {
72
+ passive: false
73
+ });
61
74
  window.addEventListener('touchend', this.windowListeners.touchEnd);
62
75
  window.addEventListener('touchcancel', this.windowListeners.touchCancel);
63
76
  }
@@ -67,8 +80,10 @@ var DraggableHandle = /*#__PURE__*/function (_React$Component) {
67
80
  key: "componentWillUnmount",
68
81
  value: function componentWillUnmount() {
69
82
  if (this.windowListeners) {
83
+ this.innerRef.current.removeEventListener('mousedown', this.windowListeners.mouseDown);
70
84
  window.removeEventListener('mousemove', this.windowListeners.mouseMove);
71
85
  window.removeEventListener('mouseup', this.windowListeners.mouseUp);
86
+ this.innerRef.current.removeEventListener('touchstart', this.windowListeners.touchStart);
72
87
  window.removeEventListener('touchmove', this.windowListeners.touchMove);
73
88
  window.removeEventListener('touchend', this.windowListeners.touchEnd);
74
89
  window.removeEventListener('touchcancel', this.windowListeners.touchCancel);
@@ -78,20 +93,14 @@ var DraggableHandle = /*#__PURE__*/function (_React$Component) {
78
93
  }, {
79
94
  key: "render",
80
95
  value: function render() {
81
- var _this3 = this;
82
96
  var classNames = ['kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable'];
83
97
  return /*#__PURE__*/_react["default"].createElement("rect", {
98
+ ref: this.innerRef,
84
99
  className: classNames.join(' '),
85
100
  x: this.props.x,
86
101
  y: this.props.y,
87
102
  width: this.props.width,
88
- height: this.props.height,
89
- onMouseDown: function onMouseDown(evt) {
90
- return _this3.handleMouseDown(evt);
91
- },
92
- onTouchStart: function onTouchStart(evt) {
93
- return _this3.handleTouchStart(evt);
94
- }
103
+ height: this.props.height
95
104
  });
96
105
  }
97
106
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kokopu-react",
3
- "version": "1.11.0",
3
+ "version": "1.11.1",
4
4
  "description": "A React-based library to create and display chessboard and chess-related components.",
5
5
  "keywords": [
6
6
  "chess",
@@ -60,7 +60,7 @@
60
60
  "react": "^18.2.0",
61
61
  "react-dom": "^18.2.0",
62
62
  "react-styleguidist": "^13.0.0",
63
- "selenium-webdriver": "^4.7.1",
63
+ "selenium-webdriver": "^4.8.0",
64
64
  "ssh2-sftp-client": "^9.0.4",
65
65
  "style-loader": "^3.3.1",
66
66
  "unit.js": "^2.1.1",
package/scripts/docker-compose.yml CHANGED
@@ -2,7 +2,7 @@ version: "3.7"
2
2
 
3
3
  services:
4
4
  web-client:
5
- image: selenium/standalone-firefox:4.7.1-20221208 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
5
+ image: selenium/standalone-firefox:4.8.0-20230131 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
6
6
  shm_size: '2gb'
7
7
  ports:
8
8
  - 4444:4444 # http://localhost:4444 (driver)
package/src/impl/DraggableHandle.js CHANGED
@@ -32,20 +32,25 @@ export default class DraggableHandle extends React.Component {
32
32
  constructor(props) {
33
33
  super(props);
34
34
  this.dragData = null;
35
+ this.innerRef = React.createRef();
35
36
  }
36
37
 
37
38
  componentDidMount() {
38
39
  if (!this.windowListeners) {
39
40
  this.windowListeners = {
41
+ mouseDown: evt => this.handleMouseDown(evt),
40
42
  mouseMove: evt => this.handleMouseMove(evt),
41
43
  mouseUp: evt => this.handleMouseUp(evt),
44
+ touchStart: evt => this.handleTouchStart(evt),
42
45
  touchMove: evt => this.handleTouchMove(evt),
43
46
  touchEnd: evt => this.handleTouchEnd(evt),
44
47
  touchCancel: evt => this.handleTouchCancel(evt),
45
48
  };
49
+ this.innerRef.current.addEventListener('mousedown', this.windowListeners.mouseDown);
46
50
  window.addEventListener('mousemove', this.windowListeners.mouseMove);
47
51
  window.addEventListener('mouseup', this.windowListeners.mouseUp);
48
- window.addEventListener('touchmove', this.windowListeners.touchMove);
52
+ this.innerRef.current.addEventListener('touchstart', this.windowListeners.touchStart, { passive: false });
53
+ window.addEventListener('touchmove', this.windowListeners.touchMove, { passive: false });
49
54
  window.addEventListener('touchend', this.windowListeners.touchEnd);
50
55
  window.addEventListener('touchcancel', this.windowListeners.touchCancel);
51
56
  }
@@ -54,8 +59,10 @@ export default class DraggableHandle extends React.Component {
54
59
 
55
60
  componentWillUnmount() {
56
61
  if (this.windowListeners) {
62
+ this.innerRef.current.removeEventListener('mousedown', this.windowListeners.mouseDown);
57
63
  window.removeEventListener('mousemove', this.windowListeners.mouseMove);
58
64
  window.removeEventListener('mouseup', this.windowListeners.mouseUp);
65
+ this.innerRef.current.removeEventListener('touchstart', this.windowListeners.touchStart);
59
66
  window.removeEventListener('touchmove', this.windowListeners.touchMove);
60
67
  window.removeEventListener('touchend', this.windowListeners.touchEnd);
61
68
  window.removeEventListener('touchcancel', this.windowListeners.touchCancel);
@@ -65,11 +72,7 @@ export default class DraggableHandle extends React.Component {
65
72
 
66
73
  render() {
67
74
  let classNames = [ 'kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
68
- return (
69
- <rect className={classNames.join(' ')} x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height}
70
- onMouseDown={evt => this.handleMouseDown(evt)} onTouchStart={evt => this.handleTouchStart(evt)}
71
- />
72
- );
75
+ return <rect ref={this.innerRef} className={classNames.join(' ')} x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} />;
73
76
  }
74
77
 
75
78
  handleTouchStart(evt) {