cm-chessboard 8.5.8 → 8.6.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/examples/pointer-events.html +32 -0
- package/index.html +1 -0
- package/package.json +1 -1
- package/src/Chessboard.js +30 -1
- package/src/model/ChessboardState.js +1 -0
- package/src/view/ChessboardView.js +11 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>cm-chessboard</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
+
<link rel="stylesheet" href="./styles/examples.css"/>
|
|
8
|
+
<link rel="stylesheet" href="./../assets/chessboard.css"/>
|
|
9
|
+
<link rel="stylesheet" href="./../assets/extensions/markers/markers.css"/>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<h1><a href="../../">cm-chessboard</a></h1>
|
|
13
|
+
<h2>Example: Pointer Events</h2>
|
|
14
|
+
<p>Click on the board, the events are logged into the console.</p>
|
|
15
|
+
<div class="board" id="board"></div>
|
|
16
|
+
<script type="module">
|
|
17
|
+
import {Chessboard} from "./../src/Chessboard.js"
|
|
18
|
+
import {FEN, POINTER_EVENTS} from "../src/Chessboard.js"
|
|
19
|
+
|
|
20
|
+
const board = new Chessboard(document.getElementById("board"), {
|
|
21
|
+
position: FEN.start,
|
|
22
|
+
assetsUrl: "../assets/"
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
for (const pointerEvent in POINTER_EVENTS) {
|
|
26
|
+
console.log("pointerEvent", pointerEvent)
|
|
27
|
+
board.enableSquareSelect(pointerEvent, (event) => {
|
|
28
|
+
console.log(event)
|
|
29
|
+
})
|
|
30
|
+
}
|
|
31
|
+
</script>
|
|
32
|
+
</body>
|
package/index.html
CHANGED
|
@@ -23,6 +23,7 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
23
23
|
<li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
|
|
24
24
|
<li><a href="examples/extensions/markers-extension.html">Context input, mark squares and detect clicks on fields</a></li>
|
|
25
25
|
<li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
|
|
26
|
+
<li><a href="examples/pointer-events.html">Pointer events on squares</a> 🆕</li>
|
|
26
27
|
<li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
|
|
27
28
|
</ul>
|
|
28
29
|
<h3>Examples using the cm-chessboard extensions</h3>
|
package/package.json
CHANGED
package/src/Chessboard.js
CHANGED
|
@@ -8,7 +8,7 @@ import {ChessboardState} from "./model/ChessboardState.js"
|
|
|
8
8
|
import {FEN, Position} from "./model/Position.js"
|
|
9
9
|
import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
|
|
10
10
|
import {EXTENSION_POINT} from "./model/Extension.js"
|
|
11
|
-
import {ChessboardView, COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "./view/ChessboardView.js"
|
|
11
|
+
import {ChessboardView, COLOR, INPUT_EVENT_TYPE, BORDER_TYPE, POINTER_EVENTS} from "./view/ChessboardView.js"
|
|
12
12
|
import {Utils} from "./lib/Utils.js"
|
|
13
13
|
|
|
14
14
|
export const PIECE = {
|
|
@@ -20,6 +20,7 @@ export const PIECES_FILE_TYPE = {
|
|
|
20
20
|
}
|
|
21
21
|
export {COLOR}
|
|
22
22
|
export {INPUT_EVENT_TYPE}
|
|
23
|
+
export {POINTER_EVENTS}
|
|
23
24
|
export {BORDER_TYPE}
|
|
24
25
|
export {FEN}
|
|
25
26
|
|
|
@@ -131,6 +132,34 @@ export class Chessboard {
|
|
|
131
132
|
return this.state.inputWhiteEnabled || this.state.inputBlackEnabled
|
|
132
133
|
}
|
|
133
134
|
|
|
135
|
+
enableSquareSelect(eventType = POINTER_EVENTS.pointerdown, eventHandler) {
|
|
136
|
+
if (!this.squareSelectListener) {
|
|
137
|
+
this.squareSelectListener = function (e) {
|
|
138
|
+
const square = e.target.getAttribute("data-square")
|
|
139
|
+
eventHandler({
|
|
140
|
+
eventType: e.type,
|
|
141
|
+
event: e,
|
|
142
|
+
chessboard: this,
|
|
143
|
+
square: square
|
|
144
|
+
})
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
this.context.addEventListener(eventType, this.squareSelectListener)
|
|
148
|
+
this.state.squareSelectEnabled = true
|
|
149
|
+
this.view.visualizeInputState()
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
disableSquareSelect(eventType) {
|
|
153
|
+
this.context.removeEventListener(eventType, this.squareSelectListener)
|
|
154
|
+
this.squareSelectListener = undefined
|
|
155
|
+
this.state.squareSelectEnabled = false
|
|
156
|
+
this.view.visualizeInputState()
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
isSquareSelectEnabled() {
|
|
160
|
+
return this.state.squareSelectEnabled
|
|
161
|
+
}
|
|
162
|
+
|
|
134
163
|
addExtension(extensionClass, props) {
|
|
135
164
|
if (this.getExtension(extensionClass)) {
|
|
136
165
|
throw Error("extension \"" + extensionClass.name + "\" already added")
|
|
@@ -12,6 +12,7 @@ export class ChessboardState {
|
|
|
12
12
|
this.orientation = undefined
|
|
13
13
|
this.inputWhiteEnabled = false
|
|
14
14
|
this.inputBlackEnabled = false
|
|
15
|
+
this.squareSelectEnabled = false
|
|
15
16
|
this.moveInputCallback = null
|
|
16
17
|
this.extensionPoints = {}
|
|
17
18
|
this.moveInputProcess = Promise.resolve()
|
|
@@ -21,6 +21,16 @@ export const INPUT_EVENT_TYPE = {
|
|
|
21
21
|
moveInputCanceled: "moveInputCanceled",
|
|
22
22
|
moveInputFinished: "moveInputFinished"
|
|
23
23
|
}
|
|
24
|
+
export const POINTER_EVENTS = {
|
|
25
|
+
pointercancel: "pointercancel",
|
|
26
|
+
pointerdown: "pointerdown",
|
|
27
|
+
pointerenter: "pointerenter",
|
|
28
|
+
pointerleave: "pointerleave",
|
|
29
|
+
pointermove: "pointermove",
|
|
30
|
+
pointerout: "pointerout",
|
|
31
|
+
pointerover: "pointerover",
|
|
32
|
+
pointerup: "pointerup"
|
|
33
|
+
}
|
|
24
34
|
export const BORDER_TYPE = {
|
|
25
35
|
none: "none", // no border
|
|
26
36
|
thin: "thin", // thin border
|
|
@@ -51,6 +61,7 @@ export class ChessboardView {
|
|
|
51
61
|
}
|
|
52
62
|
this.positionsAnimationTask = Promise.resolve()
|
|
53
63
|
this.pointerDownListener = this.pointerDownHandler.bind(this)
|
|
64
|
+
this.pointerDownListener = this.pointerDownHandler.bind(this)
|
|
54
65
|
this.container.addEventListener("mousedown", this.pointerDownListener)
|
|
55
66
|
this.container.addEventListener("touchstart", this.pointerDownListener, {passive: false})
|
|
56
67
|
this.createSvgAndGroups()
|