cm-chessboard 8.9.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 (10) hide show
  1. package/assets/extensions/markers/markers.css +89 -45
  2. package/assets/extensions/markers/markers.css.map +1 -9
  3. package/assets/extensions/markers/markers.scss +60 -6
  4. package/assets/extensions/markers/markers.svg +3 -0
  5. package/examples/extensions/markers-extension.html +1 -1
  6. package/examples/validate-moves.html +3 -0
  7. package/package.json +1 -1
  8. package/src/extensions/arrows/Arrows.js +1 -0
  9. package/src/extensions/markers/Markers.js +1 -0
  10. package/src/extensions/right-click-annotator/RightClickAnnotator.js +35 -101
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/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.9.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
@@ -5,6 +5,7 @@
5
5
  */
6
6
 
7
7
  import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
8
+ import {Svg} from "../../lib/Svg.js"
8
9
  import {Utils} from "../../lib/Utils.js"
9
10
 
10
11
  export const ARROW_TYPE = {
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,14 +10,21 @@
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
- warning: { class: "arrow-warning", slice: "arrowDefault", headSize: 7}
17
+ success: { class: "arrow-success"},
18
+ warning: { class: "arrow-warning"},
19
+ info: { class: "arrow-info"},
20
+ danger: { class: "arrow-danger"}
18
21
  }
19
- export const MARKER_TYPE = {
20
22
 
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"},
21
28
  }
22
29
 
23
30
  export class RightClickAnnotator extends Extension {
@@ -39,7 +46,6 @@ export class RightClickAnnotator extends Extension {
39
46
  this.onMouseUp = this.onMouseUp.bind(this)
40
47
 
41
48
  this.dragStart = undefined // {square, modifiers}
42
- this.previewGroup = undefined
43
49
  this.previewActiveTo = undefined // cache last to-square for preview
44
50
 
45
51
  this.chessboard.context.addEventListener("contextmenu", this.onContextMenu)
@@ -48,11 +54,6 @@ export class RightClickAnnotator extends Extension {
48
54
  this.chessboard.context.addEventListener("mouseup", this.onMouseUp)
49
55
  this.chessboard.context.addEventListener("mouseleave", this.onMouseUp)
50
56
 
51
- // ensure preview group exists after redraws
52
- this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
53
- this.ensurePreviewGroup()
54
- })
55
-
56
57
  this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
57
58
  this.chessboard.context.removeEventListener("contextmenu", this.onContextMenu)
58
59
  this.chessboard.context.removeEventListener("mousedown", this.onMouseDown)
@@ -60,12 +61,9 @@ export class RightClickAnnotator extends Extension {
60
61
  this.chessboard.context.removeEventListener("mouseup", this.onMouseUp)
61
62
  this.chessboard.context.removeEventListener("mouseleave", this.onMouseUp)
62
63
  })
63
- // create preview group now
64
- this.ensurePreviewGroup()
65
64
  }
66
65
 
67
66
  onContextMenu(event) {
68
- // prevent default context menu on chessboard
69
67
  event.preventDefault()
70
68
  }
71
69
 
@@ -89,9 +87,9 @@ export class RightClickAnnotator extends Extension {
89
87
 
90
88
  onMouseUp(event) {
91
89
  // clear preview regardless of button, but only act on right-button release
90
+ this.removePreviewArrow()
92
91
  const start = this.dragStart
93
92
  this.dragStart = undefined
94
- this.clearPreview()
95
93
  if (!start || event.button !== 2) {
96
94
  return
97
95
  }
@@ -130,27 +128,6 @@ export class RightClickAnnotator extends Extension {
130
128
  return el ? el.getAttribute("data-square") : undefined
131
129
  }
132
130
 
133
- ensurePreviewGroup() {
134
- // create or reset preview group used for transient arrow drawing
135
- if (!this.chessboard?.view?.markersTopLayer) {
136
- return
137
- }
138
- if (this.previewGroup && this.previewGroup.parentNode) {
139
- // keep and clear existing
140
- this.clearPreview()
141
- return
142
- }
143
- this.previewGroup = Svg.addElement(this.chessboard.view.markersTopLayer, "g", {class: "right-click-annotator-preview"})
144
- }
145
-
146
- clearPreview() {
147
- if (!this.previewGroup) return
148
- while (this.previewGroup.firstChild) {
149
- this.previewGroup.removeChild(this.previewGroup.firstChild)
150
- }
151
- this.previewActiveTo = undefined
152
- }
153
-
154
131
  onMouseMove(event) {
155
132
  if (!this.dragStart) {
156
133
  return
@@ -159,7 +136,6 @@ export class RightClickAnnotator extends Extension {
159
136
  // We rely mainly on our dragStart flag and clear on mouseup/mouseleave
160
137
  const toSquare = this.findSquareFromEvent(event)
161
138
  if (!toSquare || toSquare === this.dragStart.square) {
162
- this.clearPreview()
163
139
  return
164
140
  }
165
141
  if (this.previewActiveTo === toSquare) {
@@ -172,80 +148,38 @@ export class RightClickAnnotator extends Extension {
172
148
  }
173
149
 
174
150
  drawPreviewArrow(from, to, type) {
175
- this.ensurePreviewGroup()
176
- this.clearPreview()
177
- const view = this.chessboard.view
178
- const arrowsGroup = Svg.addElement(this.previewGroup, "g", {class: "arrow " + type.class})
179
- const ptFrom = view.squareToPoint(from)
180
- const ptTo = view.squareToPoint(to)
181
- const defs = Svg.addElement(arrowsGroup, "defs")
182
- const id = "arrow-preview-" + from + to
183
- const marker = Svg.addElement(defs, "marker", {
184
- id: id,
185
- markerWidth: type.headSize,
186
- markerHeight: type.headSize,
187
- refX: 20,
188
- refY: 20,
189
- viewBox: "0 0 40 40",
190
- orient: "auto",
191
- class: "arrow-head",
192
- })
193
- const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.getExtension(Arrows)?.getSpriteUrl?.() || this.chessboard.props.assetsUrl + "extensions/arrows/arrows.svg"
194
- Svg.addElement(marker, "use", {href: `${spriteUrl}#${type.slice}`})
195
- // Compute centers of start and end squares
196
- const cx1 = ptFrom.x + view.squareWidth / 2
197
- const cy1 = ptFrom.y + view.squareHeight / 2
198
- const cx2 = ptTo.x + view.squareWidth / 2
199
- const cy2 = ptTo.y + view.squareHeight / 2
200
-
201
- // Offset the line so it starts/ends at the edge of an invisible circle inside each square
202
- const dx = cx2 - cx1
203
- const dy = cy2 - cy1
204
- const len = Math.hypot(dx, dy) || 1
205
- const ux = dx / len
206
- const uy = dy / len
207
- // get offsets from Arrows extension props to match final arrow rendering
208
- const arrowsExt = this.chessboard.getExtension(Arrows)
209
- const offsetFrom = arrowsExt?.props?.offsetFrom ?? 0.72
210
- const offsetTo = arrowsExt?.props?.offsetTo ?? 0.72
211
- const halfMin = Math.min(view.squareWidth, view.squareHeight) / 2
212
- const clamp01 = (v) => Math.max(0, Math.min(1, v))
213
- const rFrom = halfMin * clamp01(offsetFrom)
214
- const rTo = halfMin * clamp01(offsetTo)
215
- const x1 = cx1 + ux * rFrom
216
- const y1 = cy1 + uy * rFrom
217
- const x2 = cx2 - ux * rTo
218
- const y2 = cy2 - uy * rTo
219
-
220
- const width = ((view.scalingX + view.scalingY) / 2) * 8
221
- let lineFill = Svg.addElement(arrowsGroup, "line")
222
- lineFill.setAttribute('x1', x1.toString())
223
- lineFill.setAttribute('x2', x2.toString())
224
- lineFill.setAttribute('y1', y1.toString())
225
- lineFill.setAttribute('y2', y2.toString())
226
- lineFill.setAttribute('class', 'arrow-line')
227
- lineFill.setAttribute("marker-end", "url(#" + id + ")")
228
- lineFill.setAttribute('stroke-width', width + "px")
151
+ if(!this.previewArrowType) {
152
+ this.previewArrowType = {...type}
153
+ }
154
+ this.chessboard.removeArrows(this.previewArrowType)
155
+ this.chessboard.addArrow(this.previewArrowType, from, to)
156
+ }
157
+
158
+ removePreviewArrow() {
159
+ if(this.previewArrowType) {
160
+ this.chessboard.removeArrows(this.previewArrowType)
161
+ this.previewArrowType = undefined
162
+ }
229
163
  }
230
164
 
231
165
  modifiersToColorKey(modifiers) {
232
- if (modifiers.shift && modifiers.alt) return "orange"
233
- if (modifiers.shift) return "red"
234
- if (modifiers.alt) return "blue"
235
- return "orange"
166
+ if (modifiers.shift && modifiers.alt) return "warning"
167
+ if (modifiers.shift) return "danger"
168
+ if (modifiers.alt) return "info"
169
+ return "success"
236
170
  }
237
171
 
238
172
  typesForColorKey(colorKey) {
239
173
  switch (colorKey) {
240
- case "blue":
241
- return {arrowType: ARROW_TYPE.default, circleType: MARKER_TYPE.circlePrimary}
242
- case "red":
243
- return {arrowType: ARROW_TYPE.danger, circleType: MARKER_TYPE.circleDanger}
244
- case "orange":
245
- return {arrowType: ARROW_ORANGE, circleType: CIRCLE_ORANGE}
246
- 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":
247
181
  default:
248
- return {arrowType: ARROW_GREEN, circleType: CIRCLE_GREEN}
182
+ return {arrowType: ARROW_TYPE.success, circleType: MARKER_TYPE.success}
249
183
  }
250
184
  }
251
185
  }