cm-chessboard 8.7.6 → 8.7.8
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.
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
|
|
54
54
|
assetsUrl: "../../assets/",
|
|
55
55
|
style: {pieces: {file: "pieces/staunty.svg"}},
|
|
56
|
-
extensions: [{class: Markers, autoMarkers: MARKER_TYPE.frame}]
|
|
56
|
+
extensions: [{class: Markers, props: {autoMarkers: MARKER_TYPE.frame}}]
|
|
57
57
|
})
|
|
58
58
|
board2.enableMoveInput(() => {
|
|
59
59
|
return true
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--
|
|
3
|
+
Testpage for https://github.com/shaack/cm-chessboard/pull/149
|
|
4
|
+
-->
|
|
5
|
+
<html lang="en">
|
|
6
|
+
<head>
|
|
7
|
+
<title>Arrows Example</title>
|
|
8
|
+
<link rel="stylesheet" href="../../assets/chessboard.css">
|
|
9
|
+
<link rel="stylesheet" href="../styles/examples.css"/>
|
|
10
|
+
<link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css">
|
|
11
|
+
<style>
|
|
12
|
+
#board1 { width: 30%; }
|
|
13
|
+
#board2 { width: 30%; }
|
|
14
|
+
</style>
|
|
15
|
+
|
|
16
|
+
<script type='module'>
|
|
17
|
+
import {Chessboard} from '../../src/Chessboard.js'
|
|
18
|
+
import {Arrows, ARROW_TYPE} from "../../src/extensions/arrows/Arrows.js"
|
|
19
|
+
window.Chessboard = Chessboard;
|
|
20
|
+
window.Arrows = Arrows;
|
|
21
|
+
window.ARROW_TYPE = ARROW_TYPE;
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<script type='text/javascript'>
|
|
25
|
+
let brd1;
|
|
26
|
+
let brd2;
|
|
27
|
+
function init() {
|
|
28
|
+
brd1 = new Chessboard(document.getElementById('board1'), {
|
|
29
|
+
assetsUrl: "../../assets/",
|
|
30
|
+
extensions: [
|
|
31
|
+
{class: Arrows},
|
|
32
|
+
]
|
|
33
|
+
});
|
|
34
|
+
brd1.addArrow(ARROW_TYPE.pointy, 'a1', 'b3')
|
|
35
|
+
brd1.setPiece('a1', 'wn')
|
|
36
|
+
|
|
37
|
+
brd2 = new Chessboard(document.getElementById('board2'), {
|
|
38
|
+
assetsUrl: "../../assets/",
|
|
39
|
+
extensions: [
|
|
40
|
+
{class: Arrows},
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
brd2.setOrientation('b');
|
|
44
|
+
brd2.addArrow(ARROW_TYPE.pointy, 'a1', 'b3')
|
|
45
|
+
brd2.setPiece('a1', 'wn')
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
</head>
|
|
50
|
+
<body onload='init()'>
|
|
51
|
+
|
|
52
|
+
<div id='board1' style="margin-bottom: 0.5rem"></div>
|
|
53
|
+
<button onclick="brd1.setOrientation(brd1.getOrientation() === 'w' ? 'b' : 'w')">Toggle1</button>
|
|
54
|
+
|
|
55
|
+
<div id='board2' style="margin-bottom: 0.5rem"></div>
|
|
56
|
+
<button onclick="brd2.setOrientation(brd2.getOrientation() === 'w' ? 'b' : 'w')">Toggle2</button>
|
|
57
|
+
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
package/package.json
CHANGED
|
@@ -46,12 +46,12 @@ export class Arrows extends Extension {
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
drawArrow(arrow) {
|
|
49
|
+
const view = this.chessboard.view
|
|
49
50
|
const arrowsGroup = Svg.addElement(this.arrowGroup, "g")
|
|
50
51
|
arrowsGroup.setAttribute("data-arrow", arrow.from + arrow.to)
|
|
51
52
|
arrowsGroup.setAttribute("class", "arrow " + arrow.type.class)
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const sqto = document.querySelectorAll('[data-square="' + arrow.to + '"]')[0]
|
|
53
|
+
const ptFrom = view.squareToPoint(arrow.from)
|
|
54
|
+
const ptTo = view.squareToPoint(arrow.to)
|
|
55
55
|
const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
|
|
56
56
|
const defs = Svg.addElement(arrowsGroup, "defs")
|
|
57
57
|
const id = "arrow-" + arrow.from + arrow.to
|
|
@@ -59,7 +59,6 @@ export class Arrows extends Extension {
|
|
|
59
59
|
id: id,
|
|
60
60
|
markerWidth: arrow.type.headSize,
|
|
61
61
|
markerHeight: arrow.type.headSize,
|
|
62
|
-
//markerUnits: "userSpaceOnUse",
|
|
63
62
|
refX: 20,
|
|
64
63
|
refY: 20,
|
|
65
64
|
viewBox: "0 0 40 40",
|
|
@@ -67,14 +66,14 @@ export class Arrows extends Extension {
|
|
|
67
66
|
class: "arrow-head",
|
|
68
67
|
})
|
|
69
68
|
|
|
70
|
-
|
|
69
|
+
Svg.addElement(marker, "use", {
|
|
71
70
|
href: `${spriteUrl}#${arrow.type.slice}`,
|
|
72
71
|
})
|
|
73
72
|
|
|
74
|
-
const x1 =
|
|
75
|
-
const x2 =
|
|
76
|
-
const y1 =
|
|
77
|
-
const y2 =
|
|
73
|
+
const x1 = ptFrom.x + view.squareWidth / 2
|
|
74
|
+
const x2 = ptTo.x + view.squareHeight / 2
|
|
75
|
+
const y1 = ptFrom.y + view.squareWidth / 2
|
|
76
|
+
const y2 = ptTo.y + view.squareHeight / 2
|
|
78
77
|
|
|
79
78
|
const width = ((view.scalingX + view.scalingY) / 2) * 4
|
|
80
79
|
let lineFill = Svg.addElement(arrowsGroup, "line")
|
|
@@ -44,7 +44,7 @@ The markerCircle is defined in the SVG as a circle with a radius of 18:
|
|
|
44
44
|
</g>
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
Has this CSS, where
|
|
47
|
+
Has this CSS, where stroke color, width and opacity are defined:
|
|
48
48
|
|
|
49
49
|
```css
|
|
50
50
|
marker.marker-circle-red {
|