cm-chessboard 8.3.4 → 8.4.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.
- package/README.md +22 -35
- package/examples/enable-input.html +18 -5
- package/examples/validate-moves.html +3 -0
- package/package.json +1 -1
- package/src/view/ChessboardView.js +9 -4
package/README.md
CHANGED
|
@@ -94,22 +94,9 @@ const board = new Chessboard(document.getElementById("board"), {
|
|
|
94
94
|
|
|
95
95
|
function inputHandler(event) {
|
|
96
96
|
console.log(event)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return true // false cancels move
|
|
101
|
-
case INPUT_EVENT_TYPE.validateMoveInput:
|
|
102
|
-
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
|
|
103
|
-
return true // false cancels move
|
|
104
|
-
case INPUT_EVENT_TYPE.moveInputCanceled:
|
|
105
|
-
log(`moveInputCanceled`)
|
|
106
|
-
break
|
|
107
|
-
case INPUT_EVENT_TYPE.moveInputFinished:
|
|
108
|
-
log(`moveInputFinished`)
|
|
109
|
-
break
|
|
110
|
-
case INPUT_EVENT_TYPE.movingOverSquare:
|
|
111
|
-
log(`movingOverSquare: ${event.square}`)
|
|
112
|
-
break
|
|
97
|
+
if(event.type === INPUT_EVENT_TYPE.moveInputStarted ||
|
|
98
|
+
event.type === INPUT_EVENT_TYPE.validateMoveInput) {
|
|
99
|
+
return true // false cancels move
|
|
113
100
|
}
|
|
114
101
|
}
|
|
115
102
|
```
|
|
@@ -223,30 +210,30 @@ The event has the following **`event.type`**:
|
|
|
223
210
|
contain the coordinates. Return `true` or `false` to validate the move. `false` cancels the move.
|
|
224
211
|
- **`INPUT_EVENT_TYPE.moveInputCanceled`**: The user canceled the move with clicking again on the start square, clicking
|
|
225
212
|
outside the board or right click.
|
|
226
|
-
- **`INPUT_EVENT_TYPE.moveInputFinished`**: Fired after the move was made.
|
|
227
|
-
- **`INPUT_EVENT_TYPE.movingOverSquare`**: Fired, when the user moves the piece over a square. `event.
|
|
213
|
+
- **`INPUT_EVENT_TYPE.moveInputFinished`**: Fired after the move was made, also when canceled.
|
|
214
|
+
- **`INPUT_EVENT_TYPE.movingOverSquare`**: Fired, when the user moves the piece over a square. `event.squareTo` contains
|
|
228
215
|
the coordinates.
|
|
229
216
|
|
|
230
217
|
```javascript
|
|
231
218
|
chessboard.enableMoveInput((event) => {
|
|
232
219
|
console.log("move input", event)
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
220
|
+
switch (event.type) {
|
|
221
|
+
case INPUT_EVENT_TYPE.moveInputStarted:
|
|
222
|
+
console.log(`moveInputStarted: ${event.squareFrom}`)
|
|
223
|
+
return true // false cancels move
|
|
224
|
+
case INPUT_EVENT_TYPE.validateMoveInput:
|
|
225
|
+
console.log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
|
|
226
|
+
return true // false cancels move
|
|
227
|
+
case INPUT_EVENT_TYPE.moveInputCanceled:
|
|
228
|
+
console.log(`moveInputCanceled`)
|
|
229
|
+
break
|
|
230
|
+
case INPUT_EVENT_TYPE.moveInputFinished:
|
|
231
|
+
console.log(`moveInputFinished`)
|
|
232
|
+
break
|
|
233
|
+
case INPUT_EVENT_TYPE.movingOverSquare:
|
|
234
|
+
console.log(`movingOverSquare: ${event.squareTo}`)
|
|
235
|
+
break
|
|
236
|
+
}
|
|
250
237
|
}, COLOR.white)
|
|
251
238
|
```
|
|
252
239
|
|
|
@@ -27,16 +27,22 @@ const board = new Chessboard(document.getElementById("board"), {
|
|
|
27
27
|
board.enableMoveInput(inputHandler)
|
|
28
28
|
function inputHandler(event) {
|
|
29
29
|
console.log(event)
|
|
30
|
-
window.board.removeMarkers(MARKER_TYPE.frame)
|
|
31
30
|
switch (event.type) {
|
|
32
31
|
case INPUT_EVENT_TYPE.moveInputStarted:
|
|
33
32
|
log(`moveInputStarted: ${event.squareFrom}`)
|
|
34
|
-
return true
|
|
33
|
+
return true // false cancels move
|
|
35
34
|
case INPUT_EVENT_TYPE.validateMoveInput:
|
|
36
35
|
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
|
|
37
|
-
return true
|
|
36
|
+
return true // false cancels move
|
|
38
37
|
case INPUT_EVENT_TYPE.moveInputCanceled:
|
|
39
38
|
log(`moveInputCanceled`)
|
|
39
|
+
break
|
|
40
|
+
case INPUT_EVENT_TYPE.moveInputFinished:
|
|
41
|
+
log(`moveInputFinished`)
|
|
42
|
+
break
|
|
43
|
+
case INPUT_EVENT_TYPE.movingOverSquare:
|
|
44
|
+
log(`movingOverSquare: ${event.squareTo}`)
|
|
45
|
+
break
|
|
40
46
|
}
|
|
41
47
|
}
|
|
42
48
|
</pre>
|
|
@@ -63,12 +69,19 @@ function inputHandler(event) {
|
|
|
63
69
|
switch (event.type) {
|
|
64
70
|
case INPUT_EVENT_TYPE.moveInputStarted:
|
|
65
71
|
log(`moveInputStarted: ${event.squareFrom}`)
|
|
66
|
-
return true
|
|
72
|
+
return true // false cancels move
|
|
67
73
|
case INPUT_EVENT_TYPE.validateMoveInput:
|
|
68
74
|
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
|
|
69
|
-
return true
|
|
75
|
+
return true // false cancels move
|
|
70
76
|
case INPUT_EVENT_TYPE.moveInputCanceled:
|
|
71
77
|
log(`moveInputCanceled`)
|
|
78
|
+
break
|
|
79
|
+
case INPUT_EVENT_TYPE.moveInputFinished:
|
|
80
|
+
log(`moveInputFinished`)
|
|
81
|
+
break
|
|
82
|
+
case INPUT_EVENT_TYPE.movingOverSquare:
|
|
83
|
+
log(`movingOverSquare: ${event.squareTo}`)
|
|
84
|
+
break
|
|
72
85
|
}
|
|
73
86
|
}
|
|
74
87
|
|
|
@@ -45,6 +45,9 @@
|
|
|
45
45
|
|
|
46
46
|
function inputHandler(event) {
|
|
47
47
|
console.log("inputHandler", event)
|
|
48
|
+
if(event.type === INPUT_EVENT_TYPE.movingOverSquare) {
|
|
49
|
+
return // ignore this event
|
|
50
|
+
}
|
|
48
51
|
if(event.type !== INPUT_EVENT_TYPE.moveInputFinished) {
|
|
49
52
|
event.chessboard.removeMarkers(MARKER_TYPE.dot)
|
|
50
53
|
event.chessboard.removeMarkers(MARKER_TYPE.bevel)
|
package/package.json
CHANGED
|
@@ -23,7 +23,9 @@ export class ChessboardView {
|
|
|
23
23
|
if (chessboard.props.responsive) {
|
|
24
24
|
if (typeof ResizeObserver !== "undefined") {
|
|
25
25
|
this.resizeObserver = new ResizeObserver(() => {
|
|
26
|
-
|
|
26
|
+
setTimeout(() => { // prevents "ResizeObserver loop completed with undelivered notifications."
|
|
27
|
+
this.handleResize()
|
|
28
|
+
})
|
|
27
29
|
})
|
|
28
30
|
this.resizeObserver.observe(this.chessboard.context)
|
|
29
31
|
} else {
|
|
@@ -252,8 +254,8 @@ export class ChessboardView {
|
|
|
252
254
|
const pieceGroup = Svg.addElement(this.piecesGroup, "g", {})
|
|
253
255
|
pieceGroup.setAttribute("data-piece", pieceName)
|
|
254
256
|
pieceGroup.setAttribute("data-square", square)
|
|
255
|
-
if(hidden) {
|
|
256
|
-
pieceGroup.setAttribute("visibility","hidden")
|
|
257
|
+
if (hidden) {
|
|
258
|
+
pieceGroup.setAttribute("visibility", "hidden")
|
|
257
259
|
}
|
|
258
260
|
const point = this.squareToPoint(square)
|
|
259
261
|
const transform = (this.svg.createSVGTransform())
|
|
@@ -352,6 +354,9 @@ export class ChessboardView {
|
|
|
352
354
|
squareTo: squareTo,
|
|
353
355
|
piece: this.chessboard.getPiece(squareFrom)
|
|
354
356
|
}
|
|
357
|
+
if (this.chessboard.state.moveInputCallback) {
|
|
358
|
+
data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
|
|
359
|
+
}
|
|
355
360
|
this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
|
|
356
361
|
}
|
|
357
362
|
|
|
@@ -428,7 +433,7 @@ export class ChessboardView {
|
|
|
428
433
|
}
|
|
429
434
|
|
|
430
435
|
getSpriteUrl() {
|
|
431
|
-
if(Utils.isAbsoluteUrl(this.chessboard.props.style.pieces.file)) {
|
|
436
|
+
if (Utils.isAbsoluteUrl(this.chessboard.props.style.pieces.file)) {
|
|
432
437
|
return this.chessboard.props.style.pieces.file
|
|
433
438
|
} else {
|
|
434
439
|
return this.chessboard.props.assetsUrl + this.chessboard.props.style.pieces.file
|