npm - cm-chessboard - Versions diffs - 8.7.7 → 8.7.9 - Mend

cm-chessboard 8.7.7 → 8.7.9

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 (9) hide show

package/assets/extensions/arrows/arrows.css +18 -0
package/assets/extensions/markers/markers.css +11 -1
package/examples/extensions/markers-extension.html +1 -1
package/examples/extensions/right-click-annotator.html +29 -0
package/examples/sandbox/arrows-extension-multiple.html +59 -0
package/index.html +1 -0
package/package.json +1 -1
package/src/extensions/arrows/Arrows.js +8 -9
package/src/extensions/right-click-annotator/RightClickAnnotator.js +137 -0

package/assets/extensions/arrows/arrows.css CHANGED Viewed

@@ -28,4 +28,22 @@
   stroke-linecap: round;
   opacity: 0.5; }
+/* custom colors for RightClickAnnotator */
+.cm-chessboard .arrow-green .arrow-head {
+  fill: #2e7d32; /* green */
+  fill-rule: nonzero;
+  fill-opacity: 1; }
+.cm-chessboard .arrow-green .arrow-line {
+  stroke: #2e7d32;
+  stroke-linecap: round;
+  opacity: 0.5; }
+.cm-chessboard .arrow-orange .arrow-head {
+  fill: #ff9800; /* orange */
+  fill-rule: nonzero;
+  fill-opacity: 1; }
+.cm-chessboard .arrow-orange .arrow-line {
+  stroke: #ff9800;
+  stroke-linecap: round;
+  opacity: 0.5; }
 /*# sourceMappingURL=arrows.css.map */

package/assets/extensions/markers/markers.css CHANGED Viewed

@@ -34,4 +34,14 @@
     fill: black;
     opacity: 0.2; }
-/*# sourceMappingURL=markers.css.map */
+  /* custom colors for RightClickAnnotator */
+  .cm-chessboard .markers .marker.marker-circle-green {
+    stroke: #2e7d32; /* green */
+    stroke-width: 3px;
+    opacity: 0.4; }
+  .cm-chessboard .markers .marker.marker-circle-orange {
+    stroke: #ff9800; /* orange */
+    stroke-width: 3px;
+    opacity: 0.4; }
+  /*# sourceMappingURL=markers.css.map */

package/examples/extensions/markers-extension.html CHANGED Viewed

@@ -53,7 +53,7 @@
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
         assetsUrl: "../../assets/",
         style: {pieces: {file: "pieces/staunty.svg"}},
-        extensions: [{class: Markers, autoMarkers: MARKER_TYPE.frame}]
+        extensions: [{class: Markers, props: {autoMarkers: MARKER_TYPE.frame}}]
     })
     board2.enableMoveInput(() => {
         return true

package/examples/extensions/right-click-annotator.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>cm-chessboard</title>
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <link rel="stylesheet" href="../styles/examples.css"/>
+    <link rel="stylesheet" href="../../assets/chessboard.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css"/>
+</head>
+<body>
+<h1><a href="../..">cm-chessboard</a></h1>
+<h2>Example: RightClickAnnotator extension</h2>
+<p>Right-click to toggle green markers. Right-click + drag to draw green arrows. Use Alt for blue, Shift for red, Shift+Alt for orange.</p>
+<div class="board" id="board"></div>
+<script type="module">
+    import {Chessboard} from "../../src/Chessboard.js"
+    import {FEN} from "../../src/model/Position.js"
+    import {RightClickAnnotator} from "../../src/extensions/right-click-annotator/RightClickAnnotator.js"
+    const board = new Chessboard(document.getElementById("board"), {
+        position: FEN.start,
+        assetsUrl: "../../assets/",
+        extensions: [{class: RightClickAnnotator}]
+    })
+</script>
+</body>
+</html>

package/examples/sandbox/arrows-extension-multiple.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+Testpage for https://github.com/shaack/cm-chessboard/pull/149
+-->
+<html lang="en">
+<head>
+    <title>Arrows Example</title>
+    <link rel="stylesheet" href="../../assets/chessboard.css">
+    <link rel="stylesheet" href="../styles/examples.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css">
+    <style>
+        #board1 { width: 30%; }
+        #board2 { width: 30%; }
+    </style>
+    <script type='module'>
+        import {Chessboard} from '../../src/Chessboard.js'
+        import {Arrows, ARROW_TYPE} from "../../src/extensions/arrows/Arrows.js"
+        window.Chessboard = Chessboard;
+        window.Arrows = Arrows;
+        window.ARROW_TYPE = ARROW_TYPE;
+    </script>
+    <script type='text/javascript'>
+        let brd1;
+        let brd2;
+        function init() {
+            brd1 = new Chessboard(document.getElementById('board1'), {
+                assetsUrl: "../../assets/",
+                extensions: [
+                    {class: Arrows},
+                ]
+            });
+            brd1.addArrow(ARROW_TYPE.pointy, 'a1', 'b3')
+            brd1.setPiece('a1', 'wn')
+            brd2 = new Chessboard(document.getElementById('board2'), {
+                assetsUrl: "../../assets/",
+                extensions: [
+                    {class: Arrows},
+                ]
+            });
+            brd2.setOrientation('b');
+            brd2.addArrow(ARROW_TYPE.pointy, 'a1', 'b3')
+            brd2.setPiece('a1', 'wn')
+        }
+    </script>
+</head>
+<body onload='init()'>
+<div id='board1' style="margin-bottom: 0.5rem"></div>
+<button onclick="brd1.setOrientation(brd1.getOrientation() === 'w' ? 'b' : 'w')">Toggle1</button>
+<div id='board2' style="margin-bottom: 0.5rem"></div>
+<button onclick="brd2.setOrientation(brd2.getOrientation() === 'w' ? 'b' : 'w')">Toggle2</button>
+</body>
+</html>

package/index.html CHANGED Viewed

@@ -33,6 +33,7 @@ It works, it is cool and it is easy to use. 👍</p>
         <li><a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
         <li><a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
         <li><a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
+        <li><a href="examples/extensions/right-click-annotator.html">RightClickAnnotator extension</a></li>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.7.7",
+  "version": "8.7.9",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/extensions/arrows/Arrows.js CHANGED Viewed

@@ -46,12 +46,12 @@ export class Arrows extends Extension {
     }
     drawArrow(arrow) {
+        const view = this.chessboard.view
         const arrowsGroup = Svg.addElement(this.arrowGroup, "g")
         arrowsGroup.setAttribute("data-arrow", arrow.from + arrow.to)
         arrowsGroup.setAttribute("class", "arrow " + arrow.type.class)
-        const view = this.chessboard.view
-        const sqfrom = document.querySelectorAll('[data-square="' + arrow.from + '"]')[0]
-        const sqto = document.querySelectorAll('[data-square="' + arrow.to + '"]')[0]
+        const ptFrom = view.squareToPoint(arrow.from)
+        const ptTo = view.squareToPoint(arrow.to)
         const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
         const defs = Svg.addElement(arrowsGroup, "defs")
         const id = "arrow-" + arrow.from + arrow.to
@@ -59,7 +59,6 @@ export class Arrows extends Extension {
             id: id,
             markerWidth: arrow.type.headSize,
             markerHeight: arrow.type.headSize,
-            //markerUnits: "userSpaceOnUse",
             refX: 20,
             refY: 20,
             viewBox: "0 0 40 40",
@@ -67,14 +66,14 @@ export class Arrows extends Extension {
             class: "arrow-head",
         })
-        const ignored = Svg.addElement(marker, "use", {
+        Svg.addElement(marker, "use", {
             href: `${spriteUrl}#${arrow.type.slice}`,
         })
-        const x1 = sqfrom.x.baseVal.value + (sqfrom.width.baseVal.value / 2)
-        const x2 = sqto.x.baseVal.value + (sqto.width.baseVal.value / 2)
-        const y1 = sqfrom.y.baseVal.value + (sqfrom.height.baseVal.value / 2)
-        const y2 = sqto.y.baseVal.value + (sqto.height.baseVal.value / 2)
+        const x1 = ptFrom.x + view.squareWidth / 2
+        const x2 = ptTo.x + view.squareHeight / 2
+        const y1 = ptFrom.y + view.squareWidth / 2
+        const y2 = ptTo.y + view.squareHeight / 2
         const width = ((view.scalingX + view.scalingY) / 2) * 4
         let lineFill = Svg.addElement(arrowsGroup, "line")

package/src/extensions/right-click-annotator/RightClickAnnotator.js ADDED Viewed

@@ -0,0 +1,137 @@
+/**
+ * Extension: RightClickAnnotator
+ * Combines Arrows and Markers to draw/toggle arrows and circle markers with right-click + modifiers.
+ * Colors:
+ * - Green: Right-click
+ * - Blue: Alt + Right-click
+ * - Red: Shift + Right-click
+ * - Orange: Shift + Alt + Right-click
+ * Redrawing the same arrow or marker removes it.
+ */
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+import {Arrows, ARROW_TYPE} from "../arrows/Arrows.js"
+import {Markers, MARKER_TYPE} from "../markers/Markers.js"
+// Define persistent type objects for matching (strict equality used in core extensions)
+const ARROW_GREEN = {class: "arrow-green", slice: "arrowDefault", headSize: 7}
+const ARROW_ORANGE = {class: "arrow-orange", slice: "arrowDefault", headSize: 7}
+const CIRCLE_GREEN = {class: "marker-circle-green", slice: "markerCircle"}
+const CIRCLE_ORANGE = {class: "marker-circle-orange", slice: "markerCircle"}
+export class RightClickAnnotator extends Extension {
+    constructor(chessboard, props = {}) {
+        super(chessboard)
+        this.props = props || {}
+        // Ensure Arrows and Markers extensions are available
+        if (!this.chessboard.getExtension(Arrows)) {
+            this.chessboard.addExtension(Arrows)
+        }
+        if (!this.chessboard.getExtension(Markers)) {
+            this.chessboard.addExtension(Markers)
+        }
+        this.onContextMenu = this.onContextMenu.bind(this)
+        this.onMouseDown = this.onMouseDown.bind(this)
+        this.onMouseUp = this.onMouseUp.bind(this)
+        this.dragStart = undefined // {square, modifiers}
+        this.chessboard.context.addEventListener("contextmenu", this.onContextMenu)
+        this.chessboard.context.addEventListener("mousedown", this.onMouseDown)
+        this.chessboard.context.addEventListener("mouseup", this.onMouseUp)
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.chessboard.context.removeEventListener("contextmenu", this.onContextMenu)
+            this.chessboard.context.removeEventListener("mousedown", this.onMouseDown)
+            this.chessboard.context.removeEventListener("mouseup", this.onMouseUp)
+        })
+    }
+    onContextMenu(event) {
+        // prevent default context menu on chessboard
+        event.preventDefault()
+    }
+    onMouseDown(event) {
+        // right button only
+        if (event.button !== 2) {
+            return
+        }
+        const square = this.findSquareFromEvent(event)
+        if (!square) {
+            return
+        }
+        this.dragStart = {
+            square,
+            modifiers: {
+                alt: event.altKey,
+                shift: event.shiftKey
+            }
+        }
+    }
+    onMouseUp(event) {
+        if (event.button !== 2) {
+            return
+        }
+        const start = this.dragStart
+        this.dragStart = undefined
+        if (!start) {
+            return
+        }
+        const endSquare = this.findSquareFromEvent(event) || start.square
+        const colorKey = this.modifiersToColorKey(start.modifiers)
+        const {arrowType, circleType} = this.typesForColorKey(colorKey)
+        if (start.square && endSquare && start.square !== endSquare) {
+            // toggle arrow
+            const existing = this.chessboard.getArrows(arrowType, start.square, endSquare)
+            if (existing && existing.length > 0) {
+                this.chessboard.removeArrows(arrowType, start.square, endSquare)
+            } else {
+                this.chessboard.addArrow(arrowType, start.square, endSquare)
+            }
+        } else if (start.square) {
+            // toggle marker on start square
+            const existingMarkers = this.chessboard.getMarkers(circleType, start.square)
+            if (existingMarkers && existingMarkers.length > 0) {
+                this.chessboard.removeMarkers(circleType, start.square)
+            } else {
+                this.chessboard.addMarker(circleType, start.square)
+            }
+        }
+    }
+    findSquareFromEvent(event) {
+        const target = /** @type {HTMLElement} */(event.target)
+        if (!target) return undefined
+        if (target.getAttribute && target.getAttribute("data-square")) {
+            return target.getAttribute("data-square")
+        }
+        const el = target.closest && target.closest("[data-square]")
+        return el ? el.getAttribute("data-square") : undefined
+    }
+    modifiersToColorKey(modifiers) {
+        if (modifiers.shift && modifiers.alt) return "orange"
+        if (modifiers.shift) return "red"
+        if (modifiers.alt) return "blue"
+        return "green"
+    }
+    typesForColorKey(colorKey) {
+        switch (colorKey) {
+            case "blue":
+                return {arrowType: ARROW_TYPE.default, circleType: MARKER_TYPE.circlePrimary}
+            case "red":
+                return {arrowType: ARROW_TYPE.danger, circleType: MARKER_TYPE.circleDanger}
+            case "orange":
+                return {arrowType: ARROW_ORANGE, circleType: CIRCLE_ORANGE}
+            case "green":
+            default:
+                return {arrowType: ARROW_GREEN, circleType: CIRCLE_GREEN}
+        }
+    }
+}