cm-chessboard 8.7.9 → 8.7.11

package/assets/extensions/arrows/arrows.svg

@@ -1,19 +1,14 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!--
-License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
-https://creativecommons.org/licenses/by-sa/3.0/
-
-Author: Barak Michener
--->
-
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <title>cm-chessboard arrowheads</title>
-    <desc>Arrowheads for cm-chessboard (https://shaack.com/projekte/cm-chessboard/)</desc>
-    <g id="arrowDefault" transform="matrix(5.1931792,0,0,5.1931792,3.5980168,-0.83225447)">
-        <path d="M 0.535156,0.398438 C 0.398438,0.507812 0.316406,0.671875 0.3125,0.847656 0.316406,1.02344 0.398438,1.1875 0.535156,1.29688 L 3.01172,3.35938 3.72266,4.01563 3.01172,4.64453 0.535156,6.67969 C 0.394531,6.79297 0.3125,6.96094 0.3125,7.13672 c 0,0.17578 0.082031,0.34375 0.222656,0.45703 0.328125,0.25781 0.792974,0.25781 1.117184,0 L 5.45703,4.46094 C 5.59766,4.34766 5.68359,4.17969 5.69141,4 5.69141,3.82031 5.60547,3.65234 5.45703,3.54297 L 1.64453,0.394531 C 1.31641,0.148438 0.859375,0.148438 0.535156,0.398438 Z m 0,0"
-              class="head-fill"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>arrows</title>
+    <g id="arrows" stroke="none" fill="none" fill-rule="evenodd" stroke-width="1">
+        <g id="cm-chessboard-arrowheads" transform="translate(5, 1)" fill="#000000">
+            <g id="arrowPointy" fill-rule="nonzero">
+                <path d="M13.5896955,18.4060262 L3.04774642,4.12789972 C2.71970374,3.68359527 2.81395252,3.05748421 3.25825697,2.72944153 C3.58591001,2.48752592 4.02754261,2.46849386 4.37479285,2.68132465 L29.6089137,18.1473987 C30.0797924,18.4360018 30.227556,19.0516834 29.9389529,19.5225621 C29.8565135,19.6570685 29.7434202,19.7701618 29.6089137,19.8526013 L4.37479285,35.3186754 C3.90391418,35.6072784 3.28823259,35.4595148 2.99962954,34.9886362 C2.78679874,34.6413859 2.80583081,34.1997533 3.04774642,33.8721003 L13.5896955,19.5939738 C13.850383,19.2408959 13.850383,18.7591041 13.5896955,18.4060262 Z" id="Path"></path>
+            </g>
+            <g id="arrowDefault" transform="translate(3, 0)" fill-rule="nonzero">
+                <path d="M13.6380471,11.3573439 L23.0265544,19.1369941 C23.4518122,19.4893778 23.5108883,20.1197808 23.1585046,20.5450386 C23.1090352,20.6047384 23.0527907,20.6584826 22.9909045,20.705188 L13.6023972,27.7906743 C13.1615654,28.1233691 12.5344983,28.0357067 12.2018035,27.594875 C12.0708444,27.4213498 12,27.2098744 12,26.9924778 L12,12.1273413 C12,11.5750565 12.4477153,11.1273413 13,11.1273413 C13.2329818,11.1273413 13.4586517,11.2086906 13.6380471,11.3573439 Z" id="Path"></path>
+            </g>
+        </g>
     </g>
-    <g id="arrowPointy">
-        <path d="M 20,20 5,5 35,20 5,35 Z" class="head-fill"/>
-    </g>
-</svg>
+</svg>

package/package.json

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

package/src/extensions/arrows/Arrows.js

@@ -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.55
         }
         Object.assign(this.props, props)
         if (this.chessboard.props.assetsCache) {
@@ -70,12 +76,29 @@ 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
 
-        const width = ((view.scalingX + view.scalingY) / 2) * 4
+        // 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) * 8
         let lineFill = Svg.addElement(arrowsGroup, "line")
         lineFill.setAttribute('x1', x1.toString())
         lineFill.setAttribute('x2', x2.toString())

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

@@ -9,8 +9,14 @@
  * 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 {Arrows} from "../arrows/Arrows.js"
 import {Markers, MARKER_TYPE} from "../markers/Markers.js"
+import {Svg} from "../../lib/Svg.js"
+
+export const ARROW_TYPE = {
+    default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
+    danger: {class: "arrow-danger", slice: "arrowDefault", headSize: 7}
+}
 
 // Define persistent type objects for matching (strict equality used in core extensions)
 const ARROW_GREEN = {class: "arrow-green", slice: "arrowDefault", headSize: 7}
@@ -34,19 +40,33 @@ export class RightClickAnnotator extends Extension {
 
         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) {
@@ -73,12 +93,11 @@ export class RightClickAnnotator extends Extension {
     }
 
     onMouseUp(event) {
-        if (event.button !== 2) {
-            return
-        }
+        // clear preview regardless of button, but only act on right-button release
         const start = this.dragStart
         this.dragStart = undefined
-        if (!start) {
+        this.clearPreview()
+        if (!start || event.button !== 2) {
             return
         }
         const endSquare = this.findSquareFromEvent(event) || start.square
@@ -91,6 +110,7 @@ export class RightClickAnnotator extends Extension {
             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) {
@@ -99,6 +119,7 @@ export class RightClickAnnotator extends Extension {
             if (existingMarkers && existingMarkers.length > 0) {
                 this.chessboard.removeMarkers(circleType, start.square)
             } else {
+                this.chessboard.removeMarkers(undefined, start.square)
                 this.chessboard.addMarker(circleType, start.square)
             }
         }
@@ -114,6 +135,104 @@ export class RightClickAnnotator extends Extension {
         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) * 8
+        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"