npm - cm-chessboard - Versions diffs - 8.7.8 → 8.7.10 - Mend

cm-chessboard 8.7.8 → 8.7.10

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

package/assets/extensions/arrows/arrows.css +18 -0
package/assets/extensions/markers/markers.css +11 -1
package/examples/extensions/right-click-annotator.html +29 -0
package/index.html +1 -0
package/package.json +1 -1
package/src/extensions/arrows/Arrows.js +28 -5
package/src/extensions/right-click-annotator/RightClickAnnotator.js +251 -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/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/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.8",
+  "version": "8.7.10",
   "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

@@ -23,7 +23,13 @@ export class Arrows extends Extension {
             this.onRedrawBoard()
         })
         this.props = {
-            sprite: "extensions/arrows/arrows.svg"
+            sprite: "extensions/arrows/arrows.svg",
+            // offset factors relative to half the square size (0.0 .. 1.0)
+            // 0.0 = start/end in the center; 1.0 = at the outer edge of the inscribed circle (half the square)
+            // default chosen to preserve previous appearance where radius = 0.36 * min(squareWidth, squareHeight)
+            // which corresponds to 0.72 of half the square size (0.36 / 0.5 = 0.72)
+            offsetFrom: 0,
+            offsetTo: 0.72
         }
         Object.assign(this.props, props)
         if (this.chessboard.props.assetsCache) {
@@ -70,10 +76,27 @@ export class Arrows extends Extension {
             href: `${spriteUrl}#${arrow.type.slice}`,
         })
-        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
+        // Compute centers of start and end squares
+        const cx1 = ptFrom.x + view.squareWidth / 2
+        const cy1 = ptFrom.y + view.squareHeight / 2
+        const cx2 = ptTo.x + view.squareWidth / 2
+        const cy2 = ptTo.y + view.squareHeight / 2
+        // Offset the line so it starts/ends at the edge of an invisible circle inside each square
+        const dx = cx2 - cx1
+        const dy = cy2 - cy1
+        const len = Math.hypot(dx, dy) || 1
+        const ux = dx / len
+        const uy = dy / len
+        // compute radii from props: factor relative to half of the square size
+        const halfMin = Math.min(view.squareWidth, view.squareHeight) / 2
+        const clamp01 = (v) => Math.max(0, Math.min(1, v))
+        const rFrom = halfMin * clamp01(this.props.offsetFrom)
+        const rTo = halfMin * clamp01(this.props.offsetTo)
+        const x1 = cx1 + ux * rFrom
+        const y1 = cy1 + uy * rFrom
+        const x2 = cx2 - ux * rTo
+        const y2 = cy2 - uy * rTo
         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,251 @@
+/**
+ * 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"
+import {Svg} from "../../lib/Svg.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.onMouseMove = this.onMouseMove.bind(this)
+        this.onMouseUp = this.onMouseUp.bind(this)
+        this.dragStart = undefined // {square, modifiers}
+        this.previewGroup = undefined
+        this.previewActiveTo = undefined // cache last to-square for preview
+        this.chessboard.context.addEventListener("contextmenu", this.onContextMenu)
+        this.chessboard.context.addEventListener("mousedown", this.onMouseDown)
+        this.chessboard.context.addEventListener("mousemove", this.onMouseMove)
+        this.chessboard.context.addEventListener("mouseup", this.onMouseUp)
+        this.chessboard.context.addEventListener("mouseleave", this.onMouseUp)
+        // ensure preview group exists after redraws
+        this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
+            this.ensurePreviewGroup()
+        })
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.chessboard.context.removeEventListener("contextmenu", this.onContextMenu)
+            this.chessboard.context.removeEventListener("mousedown", this.onMouseDown)
+            this.chessboard.context.removeEventListener("mousemove", this.onMouseMove)
+            this.chessboard.context.removeEventListener("mouseup", this.onMouseUp)
+            this.chessboard.context.removeEventListener("mouseleave", this.onMouseUp)
+        })
+        // create preview group now
+        this.ensurePreviewGroup()
+    }
+    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) {
+        // clear preview regardless of button, but only act on right-button release
+        const start = this.dragStart
+        this.dragStart = undefined
+        this.clearPreview()
+        if (!start || event.button !== 2) {
+            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.removeArrows(undefined, start.square, endSquare)
+                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.removeMarkers(undefined, start.square)
+                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
+    }
+    ensurePreviewGroup() {
+        // create or reset preview group used for transient arrow drawing
+        if (!this.chessboard?.view?.markersTopLayer) {
+            return
+        }
+        if (this.previewGroup && this.previewGroup.parentNode) {
+            // keep and clear existing
+            this.clearPreview()
+            return
+        }
+        this.previewGroup = Svg.addElement(this.chessboard.view.markersTopLayer, "g", {class: "right-click-annotator-preview"})
+    }
+    clearPreview() {
+        if (!this.previewGroup) return
+        while (this.previewGroup.firstChild) {
+            this.previewGroup.removeChild(this.previewGroup.firstChild)
+        }
+        this.previewActiveTo = undefined
+    }
+    onMouseMove(event) {
+        if (!this.dragStart) {
+            return
+        }
+        // Only show preview for right-button drag if still pressed (best-effort); some browsers may not keep buttons state reliably
+        // We rely mainly on our dragStart flag and clear on mouseup/mouseleave
+        const toSquare = this.findSquareFromEvent(event)
+        if (!toSquare || toSquare === this.dragStart.square) {
+            this.clearPreview()
+            return
+        }
+        if (this.previewActiveTo === toSquare) {
+            return // no change
+        }
+        this.previewActiveTo = toSquare
+        const colorKey = this.modifiersToColorKey(this.dragStart.modifiers)
+        const {arrowType} = this.typesForColorKey(colorKey)
+        this.drawPreviewArrow(this.dragStart.square, toSquare, arrowType)
+    }
+    drawPreviewArrow(from, to, type) {
+        this.ensurePreviewGroup()
+        this.clearPreview()
+        const view = this.chessboard.view
+        const arrowsGroup = Svg.addElement(this.previewGroup, "g", {class: "arrow " + type.class})
+        const ptFrom = view.squareToPoint(from)
+        const ptTo = view.squareToPoint(to)
+        const defs = Svg.addElement(arrowsGroup, "defs")
+        const id = "arrow-preview-" + from + to
+        const marker = Svg.addElement(defs, "marker", {
+            id: id,
+            markerWidth: type.headSize,
+            markerHeight: type.headSize,
+            refX: 20,
+            refY: 20,
+            viewBox: "0 0 40 40",
+            orient: "auto",
+            class: "arrow-head",
+        })
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.getExtension(Arrows)?.getSpriteUrl?.() || this.chessboard.props.assetsUrl + "extensions/arrows/arrows.svg"
+        Svg.addElement(marker, "use", {href: `${spriteUrl}#${type.slice}`})
+        // Compute centers of start and end squares
+        const cx1 = ptFrom.x + view.squareWidth / 2
+        const cy1 = ptFrom.y + view.squareHeight / 2
+        const cx2 = ptTo.x + view.squareWidth / 2
+        const cy2 = ptTo.y + view.squareHeight / 2
+        // Offset the line so it starts/ends at the edge of an invisible circle inside each square
+        const dx = cx2 - cx1
+        const dy = cy2 - cy1
+        const len = Math.hypot(dx, dy) || 1
+        const ux = dx / len
+        const uy = dy / len
+        // get offsets from Arrows extension props to match final arrow rendering
+        const arrowsExt = this.chessboard.getExtension(Arrows)
+        const offsetFrom = arrowsExt?.props?.offsetFrom ?? 0.72
+        const offsetTo = arrowsExt?.props?.offsetTo ?? 0.72
+        const halfMin = Math.min(view.squareWidth, view.squareHeight) / 2
+        const clamp01 = (v) => Math.max(0, Math.min(1, v))
+        const rFrom = halfMin * clamp01(offsetFrom)
+        const rTo = halfMin * clamp01(offsetTo)
+        const x1 = cx1 + ux * rFrom
+        const y1 = cy1 + uy * rFrom
+        const x2 = cx2 - ux * rTo
+        const y2 = cy2 - uy * rTo
+        const width = ((view.scalingX + view.scalingY) / 2) * 4
+        let lineFill = Svg.addElement(arrowsGroup, "line")
+        lineFill.setAttribute('x1', x1.toString())
+        lineFill.setAttribute('x2', x2.toString())
+        lineFill.setAttribute('y1', y1.toString())
+        lineFill.setAttribute('y2', y2.toString())
+        lineFill.setAttribute('class', 'arrow-line')
+        lineFill.setAttribute("marker-end", "url(#" + id + ")")
+        lineFill.setAttribute('stroke-width', width + "px")
+    }
+    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}
+        }
+    }
+}