cm-chessboard 8.8.0 → 8.9.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 (14) hide show
  1. package/assets/extensions/arrows/arrows.css +33 -35
  2. package/assets/extensions/arrows/arrows.css.map +1 -9
  3. package/assets/extensions/arrows/arrows.scss +27 -8
  4. package/assets/extensions/markers/markers.css +89 -45
  5. package/assets/extensions/markers/markers.css.map +1 -9
  6. package/assets/extensions/markers/markers.scss +60 -6
  7. package/assets/extensions/markers/markers.svg +3 -0
  8. package/examples/extensions/arrows-extension.html +4 -4
  9. package/examples/extensions/markers-extension.html +1 -1
  10. package/examples/validate-moves.html +3 -0
  11. package/package.json +1 -1
  12. package/src/extensions/arrows/Arrows.js +10 -10
  13. package/src/extensions/markers/Markers.js +1 -0
  14. package/src/extensions/right-click-annotator/RightClickAnnotator.js +35 -106
package/assets/extensions/arrows/arrows.css CHANGED
@@ -1,49 +1,47 @@
1
- .cm-chessboard .arrow-default .arrow-head {
2
- fill: blue;
1
+ .cm-chessboard .arrow-warning .arrow-head {
2
+ fill: orange;
3
3
  fill-rule: nonzero;
4
- fill-opacity: 1; }
5
-
6
- .cm-chessboard .arrow-default .arrow-line {
7
- stroke: blue;
4
+ }
5
+ .cm-chessboard .arrow-warning .arrow-line {
6
+ stroke: orange;
8
7
  stroke-linecap: round;
9
- opacity: 0.5; }
10
-
8
+ opacity: 0.6;
9
+ }
11
10
  .cm-chessboard .arrow-danger .arrow-head {
12
11
  fill: red;
13
12
  fill-rule: nonzero;
14
- fill-opacity: 1; }
15
-
13
+ }
16
14
  .cm-chessboard .arrow-danger .arrow-line {
17
15
  stroke: red;
18
16
  stroke-linecap: round;
19
- opacity: 0.5; }
20
-
21
- .cm-chessboard .arrow-pointy .arrow-head {
22
- fill: black;
17
+ opacity: 0.5;
18
+ }
19
+ .cm-chessboard .arrow-success .arrow-head {
20
+ fill: green;
23
21
  fill-rule: nonzero;
24
- fill-opacity: 1; }
25
-
26
- .cm-chessboard .arrow-pointy .arrow-line {
27
- stroke: black;
22
+ }
23
+ .cm-chessboard .arrow-success .arrow-line {
24
+ stroke: green;
28
25
  stroke-linecap: round;
29
- opacity: 0.5; }
30
-
31
- /* custom colors for RightClickAnnotator */
32
- .cm-chessboard .arrow-green .arrow-head {
33
- fill: #2e7d32; /* green */
26
+ opacity: 0.5;
27
+ }
28
+ .cm-chessboard .arrow-info .arrow-head {
29
+ fill: blue;
34
30
  fill-rule: nonzero;
35
- fill-opacity: 1; }
36
- .cm-chessboard .arrow-green .arrow-line {
37
- stroke: #2e7d32;
38
- stroke-linecap: round;
39
- opacity: 0.5; }
40
- .cm-chessboard .arrow-orange .arrow-head {
41
- fill: #ff9800; /* orange */
31
+ }
32
+ .cm-chessboard .arrow-info .arrow-line {
33
+ stroke: blue;
34
+ stroke-linecap: butt;
35
+ opacity: 0.4;
36
+ }
37
+ .cm-chessboard .arrow-neutral .arrow-head {
38
+ fill: black;
42
39
  fill-rule: nonzero;
43
- fill-opacity: 1; }
44
- .cm-chessboard .arrow-orange .arrow-line {
45
- stroke: #ff9800;
40
+ }
41
+ .cm-chessboard .arrow-neutral .arrow-line {
42
+ stroke: black;
46
43
  stroke-linecap: round;
47
- opacity: 0.5; }
44
+ opacity: 0.5;
45
+ }
48
46
 
49
- /*# sourceMappingURL=arrows.css.map */
47
+ /*# sourceMappingURL=arrows.css.map */
package/assets/extensions/arrows/arrows.css.map CHANGED
@@ -1,9 +1 @@
1
- {
2
- "version": 3,
3
- "file": "arrows.css",
4
- "sources": [
5
- "arrows.scss"
6
- ],
7
- "names": [],
8
- "mappings": "AAAA,AAEI,cAFU,CACZ,cAAc,CACZ,WAAW,CAAC;EACV,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AANL,AAOI,cAPU,CACZ,cAAc,CAMZ,WAAW,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb;;AAXL,AAcI,cAdU,CAaZ,aAAa,CACX,WAAW,CAAC;EACV,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AAlBL,AAmBI,cAnBU,CAaZ,aAAa,CAMX,WAAW,CAAC;EACV,MAAM,EAAE,GAAG;EACX,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb;;AAvBL,AA0BI,cA1BU,CAyBZ,aAAa,CACX,WAAW,CAAC;EACV,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AA9BL,AA+BI,cA/BU,CAyBZ,aAAa,CAMX,WAAW,CAAC;EACV,MAAM,EAAE,KAAK;EACb,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb"
9
- }
1
+ {"version":3,"sourceRoot":"","sources":["arrows.scss"],"names":[],"mappings":"AAEI;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;EACA","file":"arrows.css"}
package/assets/extensions/arrows/arrows.scss CHANGED
@@ -1,21 +1,19 @@
1
1
  .cm-chessboard {
2
- .arrow-default {
2
+ .arrow-warning {
3
3
  .arrow-head {
4
- fill: blue;
4
+ fill: orange;
5
5
  fill-rule: nonzero;
6
- fill-opacity: 1;
7
6
  }
8
7
  .arrow-line {
9
- stroke: blue;
8
+ stroke: orange;
10
9
  stroke-linecap: round;
11
- opacity: 0.5;
10
+ opacity: 0.6;
12
11
  }
13
12
  }
14
13
  .arrow-danger {
15
14
  .arrow-head {
16
15
  fill: red;
17
16
  fill-rule: nonzero;
18
- fill-opacity: 1;
19
17
  }
20
18
  .arrow-line {
21
19
  stroke: red;
@@ -23,11 +21,32 @@
23
21
  opacity: 0.5;
24
22
  }
25
23
  }
26
- .arrow-pointy {
24
+ .arrow-success {
25
+ .arrow-head {
26
+ fill: green;
27
+ fill-rule: nonzero;
28
+ }
29
+ .arrow-line {
30
+ stroke: green;
31
+ stroke-linecap: round;
32
+ opacity: 0.5;
33
+ }
34
+ }
35
+ .arrow-info {
36
+ .arrow-head {
37
+ fill: blue;
38
+ fill-rule: nonzero;
39
+ }
40
+ .arrow-line {
41
+ stroke: blue;
42
+ stroke-linecap: butt;
43
+ opacity: 0.4;
44
+ }
45
+ }
46
+ .arrow-neutral {
27
47
  .arrow-head {
28
48
  fill: black;
29
49
  fill-rule: nonzero;
30
- fill-opacity: 1;
31
50
  }
32
51
  .arrow-line {
33
52
  stroke: black;
package/assets/extensions/markers/markers.css CHANGED
@@ -1,47 +1,91 @@
1
1
  .cm-chessboard .markers {
2
- pointer-events: none; }
3
- .cm-chessboard .markers .marker.marker-frame {
4
- stroke: #000000;
5
- stroke-width: 1.8px;
6
- opacity: 0.5; }
7
- .cm-chessboard .markers .marker.marker-frame-primary {
8
- stroke: #0009bd;
9
- stroke-width: 1.8px;
10
- opacity: 0.4; }
11
- .cm-chessboard .markers .marker.marker-frame-danger {
12
- stroke: #aa0000;
13
- stroke-width: 1.8px;
14
- opacity: 0.4; }
15
- .cm-chessboard .markers .marker.marker-circle {
16
- stroke: #000000;
17
- stroke-width: 3px;
18
- opacity: 0.3; }
19
- .cm-chessboard .markers .marker.marker-circle-primary {
20
- stroke: #0009bd;
21
- stroke-width: 3px;
22
- opacity: 0.4; }
23
- .cm-chessboard .markers .marker.marker-circle-danger {
24
- stroke: #aa0000;
25
- stroke-width: 3px;
26
- opacity: 0.4; }
27
- .cm-chessboard .markers .marker.marker-square {
28
- fill: black;
29
- opacity: 0.11; }
30
- .cm-chessboard .markers .marker.marker-dot {
31
- fill: black;
32
- opacity: 0.2; }
33
- .cm-chessboard .markers .marker.marker-bevel {
34
- fill: black;
35
- opacity: 0.2; }
2
+ pointer-events: none;
3
+ }
4
+ .cm-chessboard .markers .marker.marker-frame {
5
+ stroke: black;
6
+ stroke-width: 1.8px;
7
+ opacity: 0.5;
8
+ }
9
+ .cm-chessboard .markers .marker.marker-frame-primary, .cm-chessboard .markers .marker.marker-frame-info {
10
+ stroke: blue;
11
+ stroke-width: 1.8px;
12
+ opacity: 0.4;
13
+ }
14
+ .cm-chessboard .markers .marker.marker-frame-danger {
15
+ stroke: red;
16
+ stroke-width: 1.8px;
17
+ opacity: 0.4;
18
+ }
19
+ .cm-chessboard .markers .marker.marker-frame-warning {
20
+ stroke: orange;
21
+ stroke-width: 1.8px;
22
+ opacity: 0.4;
23
+ }
24
+ .cm-chessboard .markers .marker.marker-circle {
25
+ stroke: black;
26
+ stroke-width: 3px;
27
+ opacity: 0.3;
28
+ }
29
+ .cm-chessboard .markers .marker.marker-circle-primary {
30
+ stroke: blue;
31
+ stroke-width: 3px;
32
+ opacity: 0.4;
33
+ }
34
+ .cm-chessboard .markers .marker.marker-circle-info {
35
+ stroke: blue;
36
+ stroke-width: 3px;
37
+ opacity: 0.4;
38
+ }
39
+ .cm-chessboard .markers .marker.marker-circle-info-filled {
40
+ stroke: blue;
41
+ fill: blue;
42
+ stroke-width: 3px;
43
+ opacity: 0.4;
44
+ }
45
+ .cm-chessboard .markers .marker.marker-circle-danger {
46
+ stroke: red;
47
+ stroke-width: 3px;
48
+ opacity: 0.4;
49
+ }
50
+ .cm-chessboard .markers .marker.marker-circle-danger-filled {
51
+ stroke: red;
52
+ fill: red;
53
+ stroke-width: 3px;
54
+ opacity: 0.4;
55
+ }
56
+ .cm-chessboard .markers .marker.marker-circle-warning {
57
+ stroke: orange;
58
+ stroke-width: 3px;
59
+ opacity: 0.4;
60
+ }
61
+ .cm-chessboard .markers .marker.marker-circle-warning-filled {
62
+ stroke: orange;
63
+ fill: orange;
64
+ stroke-width: 3px;
65
+ opacity: 0.4;
66
+ }
67
+ .cm-chessboard .markers .marker.marker-circle-success {
68
+ stroke: green;
69
+ stroke-width: 3px;
70
+ opacity: 0.4;
71
+ }
72
+ .cm-chessboard .markers .marker.marker-circle-success-filled {
73
+ stroke: green;
74
+ fill: green;
75
+ stroke-width: 3px;
76
+ opacity: 0.4;
77
+ }
78
+ .cm-chessboard .markers .marker.marker-square {
79
+ fill: black;
80
+ opacity: 0.11;
81
+ }
82
+ .cm-chessboard .markers .marker.marker-dot {
83
+ fill: black;
84
+ opacity: 0.2;
85
+ }
86
+ .cm-chessboard .markers .marker.marker-bevel {
87
+ fill: black;
88
+ opacity: 0.2;
89
+ }
36
90
 
37
- /* custom colors for RightClickAnnotator */
38
- .cm-chessboard .markers .marker.marker-circle-green {
39
- stroke: #2e7d32; /* green */
40
- stroke-width: 3px;
41
- opacity: 0.4; }
42
- .cm-chessboard .markers .marker.marker-circle-orange {
43
- stroke: #ff9800; /* orange */
44
- stroke-width: 3px;
45
- opacity: 0.4; }
46
-
47
- /*# sourceMappingURL=markers.css.map */
91
+ /*# sourceMappingURL=markers.css.map */
package/assets/extensions/markers/markers.css.map CHANGED
@@ -1,9 +1 @@
1
- {
2
- "version": 3,
3
- "file": "markers.css",
4
- "sources": [
5
- "markers.scss"
6
- ],
7
- "names": [],
8
- "mappings": "AAIA,AACE,cADY,CACZ,QAAQ,CAAC;EACP,cAAc,EAAE,IAAI,GAuDrB;EAzDH,AAKM,cALQ,CACZ,QAAQ,CAGN,OAAO,AACJ,aAAa,CAAC;IACb,MAAM,EAVC,OAAO;IAWd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EATP,AAWM,cAXQ,CACZ,QAAQ,CAGN,OAAO,AAOJ,qBAAqB,CAAC;IACrB,MAAM,EAfS,OAAO;IAgBtB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EAfP,AAiBM,cAjBQ,CACZ,QAAQ,CAGN,OAAO,AAaJ,oBAAoB,CAAC;IACpB,MAAM,EApBQ,OAAO;IAqBrB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,GAAG,GACb;EArBP,AAuBM,cAvBQ,CACZ,QAAQ,CAGN,OAAO,AAmBJ,cAAc,CAAC;IACd,MAAM,EA5BC,OAAO;IA6Bd,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EA3BP,AA6BM,cA7BQ,CACZ,QAAQ,CAGN,OAAO,AAyBJ,sBAAsB,CAAC;IACtB,MAAM,EAjCS,OAAO;IAkCtB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAjCP,AAmCM,cAnCQ,CACZ,QAAQ,CAGN,OAAO,AA+BJ,qBAAqB,CAAC;IACrB,MAAM,EAtCQ,OAAO;IAuCrB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,GAAG,GACb;EAvCP,AAyCM,cAzCQ,CACZ,QAAQ,CAGN,OAAO,AAqCJ,cAAc,CAAC;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,IAAI,GACd;EA5CP,AA8CM,cA9CQ,CACZ,QAAQ,CAGN,OAAO,AA0CJ,WAAW,CAAC;IACX,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb;EAjDP,AAmDM,cAnDQ,CACZ,QAAQ,CAGN,OAAO,AA+CJ,aAAa,CAAC;IACb,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,GAAG,GACb"
9
- }
1
+ {"version":3,"sourceRoot":"","sources":["markers.scss"],"names":[],"mappings":"AAOE;EACE;;AAGE;EACE,QAZO;EAaP;EACA;;AAGF;EACE,QAjBY;EAkBZ;EACA;;AAGF;EACE,QAtBc;EAuBd;EACA;;AAGF;EACE,QA3Be;EA4Bf;EACA;;AAGF;EACE,QApCO;EAqCP;EACA;;AAGF;EACE,QAzCY;EA0CZ;EACA;;AAGF;EACE,QA/CY;EAgDZ;EACA;;AAGF;EACE,QArDY;EAsDZ,MAtDY;EAuDZ;EACA;;AAGF;EACE,QA3Dc;EA4Dd;EACA;;AAGF;EACE,QAjEc;EAkEd,MAlEc;EAmEd;EACA;;AAGF;EACE,QAvEe;EAwEf;EACA;;AAGF;EACE,QA7Ee;EA8Ef,MA9Ee;EA+Ef;EACA;;AAGF;EACE,QAnFe;EAoFf;EACA;;AAGF;EACE,QAzFe;EA0Ff,MA1Fe;EA2Ff;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"markers.css"}
package/assets/extensions/markers/markers.scss CHANGED
@@ -1,6 +1,8 @@
1
- $marker-color: #000000;
2
- $marker-color-primary: #0009bd;
3
- $marker-color-danger: #aa0000;
1
+ $marker-color: black;
2
+ $marker-color-info: blue;
3
+ $marker-color-danger: red;
4
+ $marker-color-warning: orange;
5
+ $marker-color-success: green;
4
6
 
5
7
  .cm-chessboard {
6
8
  .markers {
@@ -13,8 +15,8 @@ $marker-color-danger: #aa0000;
13
15
  opacity: 0.5;
14
16
  }
15
17
 
16
- &.marker-frame-primary {
17
- stroke: $marker-color-primary;
18
+ &.marker-frame-primary, &.marker-frame-info {
19
+ stroke: $marker-color-info;
18
20
  stroke-width: 1.8px;
19
21
  opacity: 0.4;
20
22
  }
@@ -25,6 +27,12 @@ $marker-color-danger: #aa0000;
25
27
  opacity: 0.4;
26
28
  }
27
29
 
30
+ &.marker-frame-warning {
31
+ stroke: $marker-color-warning;
32
+ stroke-width: 1.8px;
33
+ opacity: 0.4;
34
+ }
35
+
28
36
  &.marker-circle {
29
37
  stroke: $marker-color;
30
38
  stroke-width: 3px;
@@ -32,7 +40,20 @@ $marker-color-danger: #aa0000;
32
40
  }
33
41
 
34
42
  &.marker-circle-primary {
35
- stroke: $marker-color-primary;
43
+ stroke: $marker-color-info;
44
+ stroke-width: 3px;
45
+ opacity: 0.4;
46
+ }
47
+
48
+ &.marker-circle-info {
49
+ stroke: $marker-color-info;
50
+ stroke-width: 3px;
51
+ opacity: 0.4;
52
+ }
53
+
54
+ &.marker-circle-info-filled {
55
+ stroke: $marker-color-info;
56
+ fill: $marker-color-info;
36
57
  stroke-width: 3px;
37
58
  opacity: 0.4;
38
59
  }
@@ -43,6 +64,39 @@ $marker-color-danger: #aa0000;
43
64
  opacity: 0.4;
44
65
  }
45
66
 
67
+ &.marker-circle-danger-filled {
68
+ stroke: $marker-color-danger;
69
+ fill: $marker-color-danger;
70
+ stroke-width: 3px;
71
+ opacity: 0.4;
72
+ }
73
+
74
+ &.marker-circle-warning {
75
+ stroke: $marker-color-warning;
76
+ stroke-width: 3px;
77
+ opacity: 0.4;
78
+ }
79
+
80
+ &.marker-circle-warning-filled {
81
+ stroke: $marker-color-warning;
82
+ fill: $marker-color-warning;
83
+ stroke-width: 3px;
84
+ opacity: 0.4;
85
+ }
86
+
87
+ &.marker-circle-success {
88
+ stroke: $marker-color-success;
89
+ stroke-width: 3px;
90
+ opacity: 0.4;
91
+ }
92
+
93
+ &.marker-circle-success-filled {
94
+ stroke: $marker-color-success;
95
+ fill: $marker-color-success;
96
+ stroke-width: 3px;
97
+ opacity: 0.4;
98
+ }
99
+
46
100
  &.marker-square {
47
101
  fill: black;
48
102
  opacity: 0.11;
package/assets/extensions/markers/markers.svg CHANGED
@@ -18,6 +18,9 @@ Author: shaack (https://shaack.com)
18
18
  <g id="markerCircle" fill="#000000" fill-opacity="0">
19
19
  <circle cx="20" cy="20" r="18"/>
20
20
  </g>
21
+ <g id="markerCircleFilled">
22
+ <circle cx="20" cy="20" r="18"/>
23
+ </g>
21
24
  <g id="markerDot">
22
25
  <circle cx="20" cy="20" r="7"/>
23
26
  </g>
package/examples/extensions/arrows-extension.html CHANGED
@@ -51,10 +51,10 @@ console.log(chessboard.getArrows())
51
51
  assetsUrl: "../../assets/",
52
52
  extensions: [{class: Arrows}]
53
53
  })
54
- chessboard.addArrow(ARROW_TYPE.default, "f3", "d5")
55
- chessboard.addArrow(ARROW_TYPE.default, "b8", "c6")
56
- chessboard.addArrow(ARROW_TYPE.pointy, "d2", "d3")
57
- chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6")
54
+ chessboard.addArrow(ARROW_TYPE.danger, "f3", "d5")
55
+ chessboard.addArrow(ARROW_TYPE.info, "b8", "c6")
56
+ chessboard.addArrow(ARROW_TYPE.success, "d2", "d3")
57
+ chessboard.addArrow(ARROW_TYPE.warning, "g5", "e6")
58
58
  console.log(chessboard.getArrows())
59
59
 
60
60
  </script>
package/examples/extensions/markers-extension.html CHANGED
@@ -59,7 +59,7 @@
59
59
  return true
60
60
  })
61
61
  // define your own marker
62
- const myOwnMarker = {class: "marker-circle-danger", slice: "markerCircle"}
62
+ const myOwnMarker = {class: "marker-circle-danger-filled", slice: "markerCircleFilled"}
63
63
  board2.context.addEventListener("contextmenu", (event) => {
64
64
  event.preventDefault()
65
65
  })
package/examples/validate-moves.html CHANGED
@@ -7,6 +7,7 @@
7
7
  <link rel="stylesheet" href="styles/examples.css"/>
8
8
  <link rel="stylesheet" href="../assets/chessboard.css"/>
9
9
  <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
10
+ <link rel="stylesheet" href="../assets/extensions/arrows/arrows.css"/>
10
11
  <link rel="stylesheet" href="../assets/extensions/promotion-dialog/promotion-dialog.css"/>
11
12
  </head>
12
13
  <body>
@@ -22,6 +23,7 @@
22
23
  import {PROMOTION_DIALOG_RESULT_TYPE, PromotionDialog} from "../src/extensions/promotion-dialog/PromotionDialog.js"
23
24
  import {Accessibility} from "../src/extensions/accessibility/Accessibility.js"
24
25
  import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
26
+ import {RightClickAnnotator} from "../src/extensions/right-click-annotator/RightClickAnnotator.js";
25
27
 
26
28
  const chess = new Chess()
27
29
 
@@ -101,6 +103,7 @@
101
103
  orientation: COLOR.white,
102
104
  extensions: [
103
105
  {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},
106
+ {class: RightClickAnnotator},
104
107
  {class: PromotionDialog},
105
108
  {class: Accessibility, props: {visuallyHidden: true}}
106
109
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "8.8.0",
3
+ "version": "8.9.1",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
package/src/extensions/arrows/Arrows.js CHANGED
@@ -9,9 +9,11 @@ import {Svg} from "../../lib/Svg.js"
9
9
  import {Utils} from "../../lib/Utils.js"
10
10
 
11
11
  export const ARROW_TYPE = {
12
- default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
13
- danger: {class: "arrow-danger", slice: "arrowDefault", headSize: 7},
14
- pointy: {class: "arrow-pointy", slice: "arrowPointy", headSize: 7},
12
+ default: {class: "arrow-success"},
13
+ success: {class: "arrow-success"},
14
+ warning: {class: "arrow-warning"},
15
+ info: {class: "arrow-info"},
16
+ danger: {class: "arrow-danger"}
15
17
  }
16
18
 
17
19
  export class Arrows extends Extension {
@@ -24,10 +26,8 @@ export class Arrows extends Extension {
24
26
  })
25
27
  this.props = {
26
28
  sprite: "extensions/arrows/arrows.svg",
27
- // offset factors relative to half the square size (0.0 .. 1.0)
28
- // 0.0 = start/end in the center; 1.0 = at the outer edge of the inscribed circle (half the square)
29
- // default chosen to preserve previous appearance where radius = 0.36 * min(squareWidth, squareHeight)
30
- // which corresponds to 0.72 of half the square size (0.36 / 0.5 = 0.72)
29
+ slice: "arrowDefault",
30
+ headSize: 7,
31
31
  offsetFrom: 0,
32
32
  offsetTo: 0.55
33
33
  }
@@ -63,8 +63,8 @@ export class Arrows extends Extension {
63
63
  const id = "arrow-" + arrow.from + arrow.to
64
64
  const marker = Svg.addElement(defs, "marker", {
65
65
  id: id,
66
- markerWidth: arrow.type.headSize,
67
- markerHeight: arrow.type.headSize,
66
+ markerWidth: this.props.headSize,
67
+ markerHeight: this.props.headSize,
68
68
  refX: 20,
69
69
  refY: 20,
70
70
  viewBox: "0 0 40 40",
@@ -73,7 +73,7 @@ export class Arrows extends Extension {
73
73
  })
74
74
 
75
75
  Svg.addElement(marker, "use", {
76
- href: `${spriteUrl}#${arrow.type.slice}`,
76
+ href: `${spriteUrl}#${this.props.slice}`,
77
77
  })
78
78
 
79
79
  // Compute centers of start and end squares
package/src/extensions/markers/Markers.js CHANGED
@@ -15,6 +15,7 @@ export const MARKER_TYPE = {
15
15
  circle: {class: "marker-circle", slice: "markerCircle"},
16
16
  circlePrimary: {class: "marker-circle-primary", slice: "markerCircle"},
17
17
  circleDanger: {class: "marker-circle-danger", slice: "markerCircle"},
18
+ circleDangerFilled: {class: "marker-circle-danger-filled", slice: "markerCircleFilled"},
18
19
  square: {class: "marker-square", slice: "markerSquare"},
19
20
  dot: {class: "marker-dot", slice: "markerDot", position: 'above'},
20
21
  bevel: {class: "marker-bevel", slice: "markerBevel"}
package/src/extensions/right-click-annotator/RightClickAnnotator.js CHANGED
@@ -10,20 +10,22 @@
10
10
  */
11
11
  import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
12
12
  import {Arrows} from "../arrows/Arrows.js"
13
- import {Markers, MARKER_TYPE} from "../markers/Markers.js"
13
+ import {Markers} from "../markers/Markers.js"
14
14
  import {Svg} from "../../lib/Svg.js"
15
15
 
16
16
  export const ARROW_TYPE = {
17
- default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
18
- danger: {class: "arrow-danger", slice: "arrowDefault", headSize: 7}
17
+ success: { class: "arrow-success"},
18
+ warning: { class: "arrow-warning"},
19
+ info: { class: "arrow-info"},
20
+ danger: { class: "arrow-danger"}
19
21
  }
20
22
 
21
- // Define persistent type objects for matching (strict equality used in core extensions)
22
- const ARROW_GREEN = {class: "arrow-green", slice: "arrowDefault", headSize: 7}
23
- const ARROW_ORANGE = {class: "arrow-orange", slice: "arrowDefault", headSize: 7}
24
-
25
- const CIRCLE_GREEN = {class: "marker-circle-green", slice: "markerCircle"}
26
- const CIRCLE_ORANGE = {class: "marker-circle-orange", slice: "markerCircle"}
23
+ export const MARKER_TYPE = {
24
+ success: {class: "marker-circle-success", slice: "markerCircle"},
25
+ warning: {class: "marker-circle-warning", slice: "markerCircle"},
26
+ info: {class: "marker-circle-info", slice: "markerCircle"},
27
+ danger: {class: "marker-circle-danger", slice: "markerCircle"},
28
+ }
27
29
 
28
30
  export class RightClickAnnotator extends Extension {
29
31
  constructor(chessboard, props = {}) {
@@ -44,7 +46,6 @@ export class RightClickAnnotator extends Extension {
44
46
  this.onMouseUp = this.onMouseUp.bind(this)
45
47
 
46
48
  this.dragStart = undefined // {square, modifiers}
47
- this.previewGroup = undefined
48
49
  this.previewActiveTo = undefined // cache last to-square for preview
49
50
 
50
51
  this.chessboard.context.addEventListener("contextmenu", this.onContextMenu)
@@ -53,11 +54,6 @@ export class RightClickAnnotator extends Extension {
53
54
  this.chessboard.context.addEventListener("mouseup", this.onMouseUp)
54
55
  this.chessboard.context.addEventListener("mouseleave", this.onMouseUp)
55
56
 
56
- // ensure preview group exists after redraws
57
- this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
58
- this.ensurePreviewGroup()
59
- })
60
-
61
57
  this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
62
58
  this.chessboard.context.removeEventListener("contextmenu", this.onContextMenu)
63
59
  this.chessboard.context.removeEventListener("mousedown", this.onMouseDown)
@@ -65,12 +61,9 @@ export class RightClickAnnotator extends Extension {
65
61
  this.chessboard.context.removeEventListener("mouseup", this.onMouseUp)
66
62
  this.chessboard.context.removeEventListener("mouseleave", this.onMouseUp)
67
63
  })
68
- // create preview group now
69
- this.ensurePreviewGroup()
70
64
  }
71
65
 
72
66
  onContextMenu(event) {
73
- // prevent default context menu on chessboard
74
67
  event.preventDefault()
75
68
  }
76
69
 
@@ -94,9 +87,9 @@ export class RightClickAnnotator extends Extension {
94
87
 
95
88
  onMouseUp(event) {
96
89
  // clear preview regardless of button, but only act on right-button release
90
+ this.removePreviewArrow()
97
91
  const start = this.dragStart
98
92
  this.dragStart = undefined
99
- this.clearPreview()
100
93
  if (!start || event.button !== 2) {
101
94
  return
102
95
  }
@@ -135,27 +128,6 @@ export class RightClickAnnotator extends Extension {
135
128
  return el ? el.getAttribute("data-square") : undefined
136
129
  }
137
130
 
138
- ensurePreviewGroup() {
139
- // create or reset preview group used for transient arrow drawing
140
- if (!this.chessboard?.view?.markersTopLayer) {
141
- return
142
- }
143
- if (this.previewGroup && this.previewGroup.parentNode) {
144
- // keep and clear existing
145
- this.clearPreview()
146
- return
147
- }
148
- this.previewGroup = Svg.addElement(this.chessboard.view.markersTopLayer, "g", {class: "right-click-annotator-preview"})
149
- }
150
-
151
- clearPreview() {
152
- if (!this.previewGroup) return
153
- while (this.previewGroup.firstChild) {
154
- this.previewGroup.removeChild(this.previewGroup.firstChild)
155
- }
156
- this.previewActiveTo = undefined
157
- }
158
-
159
131
  onMouseMove(event) {
160
132
  if (!this.dragStart) {
161
133
  return
@@ -164,7 +136,6 @@ export class RightClickAnnotator extends Extension {
164
136
  // We rely mainly on our dragStart flag and clear on mouseup/mouseleave
165
137
  const toSquare = this.findSquareFromEvent(event)
166
138
  if (!toSquare || toSquare === this.dragStart.square) {
167
- this.clearPreview()
168
139
  return
169
140
  }
170
141
  if (this.previewActiveTo === toSquare) {
@@ -177,80 +148,38 @@ export class RightClickAnnotator extends Extension {
177
148
  }
178
149
 
179
150
  drawPreviewArrow(from, to, type) {
180
- this.ensurePreviewGroup()
181
- this.clearPreview()
182
- const view = this.chessboard.view
183
- const arrowsGroup = Svg.addElement(this.previewGroup, "g", {class: "arrow " + type.class})
184
- const ptFrom = view.squareToPoint(from)
185
- const ptTo = view.squareToPoint(to)
186
- const defs = Svg.addElement(arrowsGroup, "defs")
187
- const id = "arrow-preview-" + from + to
188
- const marker = Svg.addElement(defs, "marker", {
189
- id: id,
190
- markerWidth: type.headSize,
191
- markerHeight: type.headSize,
192
- refX: 20,
193
- refY: 20,
194
- viewBox: "0 0 40 40",
195
- orient: "auto",
196
- class: "arrow-head",
197
- })
198
- const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.getExtension(Arrows)?.getSpriteUrl?.() || this.chessboard.props.assetsUrl + "extensions/arrows/arrows.svg"
199
- Svg.addElement(marker, "use", {href: `${spriteUrl}#${type.slice}`})
200
- // Compute centers of start and end squares
201
- const cx1 = ptFrom.x + view.squareWidth / 2
202
- const cy1 = ptFrom.y + view.squareHeight / 2
203
- const cx2 = ptTo.x + view.squareWidth / 2
204
- const cy2 = ptTo.y + view.squareHeight / 2
205
-
206
- // Offset the line so it starts/ends at the edge of an invisible circle inside each square
207
- const dx = cx2 - cx1
208
- const dy = cy2 - cy1
209
- const len = Math.hypot(dx, dy) || 1
210
- const ux = dx / len
211
- const uy = dy / len
212
- // get offsets from Arrows extension props to match final arrow rendering
213
- const arrowsExt = this.chessboard.getExtension(Arrows)
214
- const offsetFrom = arrowsExt?.props?.offsetFrom ?? 0.72
215
- const offsetTo = arrowsExt?.props?.offsetTo ?? 0.72
216
- const halfMin = Math.min(view.squareWidth, view.squareHeight) / 2
217
- const clamp01 = (v) => Math.max(0, Math.min(1, v))
218
- const rFrom = halfMin * clamp01(offsetFrom)
219
- const rTo = halfMin * clamp01(offsetTo)
220
- const x1 = cx1 + ux * rFrom
221
- const y1 = cy1 + uy * rFrom
222
- const x2 = cx2 - ux * rTo
223
- const y2 = cy2 - uy * rTo
151
+ if(!this.previewArrowType) {
152
+ this.previewArrowType = {...type}
153
+ }
154
+ this.chessboard.removeArrows(this.previewArrowType)
155
+ this.chessboard.addArrow(this.previewArrowType, from, to)
156
+ }
224
157
 
225
- const width = ((view.scalingX + view.scalingY) / 2) * 8
226
- let lineFill = Svg.addElement(arrowsGroup, "line")
227
- lineFill.setAttribute('x1', x1.toString())
228
- lineFill.setAttribute('x2', x2.toString())
229
- lineFill.setAttribute('y1', y1.toString())
230
- lineFill.setAttribute('y2', y2.toString())
231
- lineFill.setAttribute('class', 'arrow-line')
232
- lineFill.setAttribute("marker-end", "url(#" + id + ")")
233
- lineFill.setAttribute('stroke-width', width + "px")
158
+ removePreviewArrow() {
159
+ if(this.previewArrowType) {
160
+ this.chessboard.removeArrows(this.previewArrowType)
161
+ this.previewArrowType = undefined
162
+ }
234
163
  }
235
164
 
236
165
  modifiersToColorKey(modifiers) {
237
- if (modifiers.shift && modifiers.alt) return "orange"
238
- if (modifiers.shift) return "red"
239
- if (modifiers.alt) return "blue"
240
- return "green"
166
+ if (modifiers.shift && modifiers.alt) return "warning"
167
+ if (modifiers.shift) return "danger"
168
+ if (modifiers.alt) return "info"
169
+ return "success"
241
170
  }
242
171
 
243
172
  typesForColorKey(colorKey) {
244
173
  switch (colorKey) {
245
- case "blue":
246
- return {arrowType: ARROW_TYPE.default, circleType: MARKER_TYPE.circlePrimary}
247
- case "red":
248
- return {arrowType: ARROW_TYPE.danger, circleType: MARKER_TYPE.circleDanger}
249
- case "orange":
250
- return {arrowType: ARROW_ORANGE, circleType: CIRCLE_ORANGE}
251
- case "green":
174
+ case "info":
175
+ return {arrowType: ARROW_TYPE.info, circleType: MARKER_TYPE.info}
176
+ case "danger":
177
+ return {arrowType: ARROW_TYPE.danger, circleType: MARKER_TYPE.danger}
178
+ case "warning":
179
+ return {arrowType: ARROW_TYPE.warning, circleType: MARKER_TYPE.warning}
180
+ case "success":
252
181
  default:
253
- return {arrowType: ARROW_GREEN, circleType: CIRCLE_GREEN}
182
+ return {arrowType: ARROW_TYPE.success, circleType: MARKER_TYPE.success}
254
183
  }
255
184
  }
256
185
  }