cm-chessboard 8.5.7 → 8.6.0
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.
|
@@ -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/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(event = 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(event, this.squareSelectListener)
|
|
148
|
+
this.state.squareSelectEnabled = true
|
|
149
|
+
this.view.visualizeInputState()
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
disableSquareSelect(event) {
|
|
153
|
+
this.context.removeEventListener(event, 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
|