@bedard/hexboard 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.0.11
+
+- Add `dragstart-position` and `dragend-position` events
+
 # 0.0.10
 
 - Fix autoselect not updating targets (https://github.com/scottbedard/hexboard/issues/3)

package/dist/index.d.ts

@@ -12,12 +12,16 @@ import { VNode } from 'vue';
 
 declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 clickPosition: (position: number) => any;
+dragendPosition: (position: number) => any;
+dragstartPosition: (position: number) => any;
 move: (san: San) => any;
 "update:mouseover-position": (value: number | null) => any;
 "update:selected": (value: number | null) => any;
 "update:targets": (value: number[]) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
 onClickPosition?: ((position: number) => any) | undefined;
+onDragendPosition?: ((position: number) => any) | undefined;
+onDragstartPosition?: ((position: number) => any) | undefined;
 onMove?: ((san: San) => any) | undefined;
 "onUpdate:mouseover-position"?: ((value: number | null) => any) | undefined;
 "onUpdate:selected"?: ((value: number | null) => any) | undefined;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as fo, createElementBlock as C, openBlock as x, createElementVNode as vo, toDisplayString as ho, mergeModels as uo, useModel as Zt, shallowRef as et, useTemplateRef as Co, computed as W, onBeforeMount as Eo, onMounted as Lo, onUnmounted as Bo, watch as jt, createCommentVNode as tt, unref as a, normalizeStyle as ct, Fragment as ot, renderList as nt, mergeProps as Mo, createBlock as io, resolveDynamicComponent as co, withModifiers as $o, renderSlot as To, h as Fo } from "vue";
+import { defineComponent as fo, openBlock as x, createElementBlock as C, createElementVNode as vo, toDisplayString as ho, useModel as Zt, shallowRef as et, useTemplateRef as Co, computed as W, onBeforeMount as Eo, onMounted as Lo, onUnmounted as Bo, watch as jt, unref as a, normalizeStyle as ct, Fragment as tt, renderList as ot, mergeProps as Mo, createCommentVNode as nt, createBlock as uo, resolveDynamicComponent as io, withModifiers as $o, renderSlot as To, mergeModels as co, h as Fo } from "vue";
 import { Hexchess as ao, position as ae, San as at, isPromotionPosition as Ro } from "@bedard/hexchess";
 function r(i, B, v) {
   return [i[0] + v * (B[0] - i[0]), i[1] + v * (B[1] - i[1])];
@@ -8,19 +8,19 @@ function n(i) {
 }
 function e(i) {
   return [
-    k(i, -300, ue),
-    k(i, 0, ue),
-    k(i, -60, ue),
-    k(i, -120, ue),
-    k(i, -180, ue),
-    k(i, -240, ue)
+    P(i, -300, ue),
+    P(i, 0, ue),
+    P(i, -60, ue),
+    P(i, -120, ue),
+    P(i, -180, ue),
+    P(i, -240, ue)
   ];
 }
-function k(i, B, v) {
-  const Q = So(B);
+function P(i, B, v) {
+  const X = So(B);
   return [
-    v * Math.cos(Q) + i[0],
-    v * Math.sin(Q) + i[1]
+    v * Math.cos(X) + i[0],
+    v * Math.sin(X) + i[1]
   ];
 }
 function So(i) {
@@ -57,7 +57,7 @@ const de = 23.6, qo = {
   // red-500
   targetColor: "oklch(63.7% 0.237 25.331)"
   // red-500
-}, No = "b/qbk/n1b1n/r5r/ppppppppp/11/5P5/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 w - 0 1", u = 1.7, V = 1.7, ue = 2 / Math.sqrt(3), p = ue * (Math.sqrt(3) / 2) * 2, y = p * 2, w = p * 3, P = p * 4, L = p * 5, m = [0, 0], A = k(m, 150, L), S = k(m, 150, P), D = k(m, 150, w), q = k(m, 150, y), $ = k(m, 150, p), T = k(m, 30, p), N = k(m, 30, y), H = k(m, 30, w), z = k(m, 30, P), O = k(m, 30, L), U = l(A, [0, -L]), Z = l(S, [0, -L]), he = l(D, [0, -L]), pe = l(q, [0, -L]), me = l($, [0, -L]), ge = l(m, [0, -L]), ye = l(T, [0, -L]), we = l(N, [0, -L]), be = l(H, [0, -L]), j = l(z, [0, -L]), G = l(O, [0, -L]), I = l(A, [0, -P]), J = l(S, [0, -P]), xe = l(D, [0, -P]), ke = l(q, [0, -P]), Pe = l($, [0, -P]), Ce = l(m, [0, -P]), Ee = l(T, [0, -P]), Le = l(N, [0, -P]), Be = l(H, [0, -P]), _ = l(z, [0, -P]), ee = l(O, [0, -P]), Me = l(A, [0, -w]), $e = l(S, [0, -w]), ft = l(D, [0, -w]), vt = l(q, [0, -w]), dt = l($, [0, -w]), ht = l(m, [0, -w]), pt = l(T, [0, -w]), mt = l(N, [0, -w]), gt = l(H, [0, -w]), Te = l(z, [0, -w]), Fe = l(O, [0, -w]), Re = l(A, [0, -y]), Se = l(S, [0, -y]), yt = l(D, [0, -y]), wt = l(q, [0, -y]), bt = l($, [0, -y]), xt = l(m, [0, -y]), kt = l(T, [0, -y]), Pt = l(N, [0, -y]), Ct = l(H, [0, -y]), qe = l(z, [0, -y]), Ne = l(O, [0, -y]), ze = l(A, [0, -p]), We = l(S, [0, -p]), Et = l(D, [0, -p]), Lt = l(q, [0, -p]), Bt = l($, [0, -p]), Mt = l(m, [0, -p]), $t = l(T, [0, -p]), Tt = l(N, [0, -p]), Ft = l(H, [0, -p]), Ae = l(z, [0, -p]), De = l(O, [0, -p]), He = l(S, [0, p]), Oe = l(D, [0, p]), Rt = l(q, [0, p]), St = l($, [0, p]), qt = l(m, [0, p]), Nt = l(T, [0, p]), zt = l(N, [0, p]), Xe = l(H, [0, p]), Ye = l(z, [0, p]), Ke = l(D, [0, y]), Qe = l(q, [0, y]), Wt = l($, [0, y]), At = l(m, [0, y]), Dt = l(T, [0, y]), Ve = l(N, [0, y]), Ue = l(H, [0, y]), Ze = l(q, [0, w]), je = l($, [0, w]), Ht = l(m, [0, w]), Ge = l(T, [0, w]), Ie = l(N, [0, w]), te = l($, [0, P]), oe = l(m, [0, P]), ne = l(T, [0, P]), le = l(m, [0, L]), o = [
+}, No = "b/qbk/n1b1n/r5r/ppppppppp/11/5P5/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 w - 0 1", u = 1.7, V = 1.7, ue = 2 / Math.sqrt(3), p = ue * (Math.sqrt(3) / 2) * 2, y = p * 2, w = p * 3, k = p * 4, L = p * 5, m = [0, 0], A = P(m, 150, L), S = P(m, 150, k), D = P(m, 150, w), q = P(m, 150, y), $ = P(m, 150, p), T = P(m, 30, p), N = P(m, 30, y), H = P(m, 30, w), z = P(m, 30, k), O = P(m, 30, L), U = l(A, [0, -L]), Z = l(S, [0, -L]), he = l(D, [0, -L]), pe = l(q, [0, -L]), me = l($, [0, -L]), ge = l(m, [0, -L]), ye = l(T, [0, -L]), we = l(N, [0, -L]), be = l(H, [0, -L]), j = l(z, [0, -L]), G = l(O, [0, -L]), I = l(A, [0, -k]), J = l(S, [0, -k]), xe = l(D, [0, -k]), Pe = l(q, [0, -k]), ke = l($, [0, -k]), Ce = l(m, [0, -k]), Ee = l(T, [0, -k]), Le = l(N, [0, -k]), Be = l(H, [0, -k]), _ = l(z, [0, -k]), ee = l(O, [0, -k]), Me = l(A, [0, -w]), $e = l(S, [0, -w]), ft = l(D, [0, -w]), vt = l(q, [0, -w]), dt = l($, [0, -w]), ht = l(m, [0, -w]), pt = l(T, [0, -w]), mt = l(N, [0, -w]), gt = l(H, [0, -w]), Te = l(z, [0, -w]), Fe = l(O, [0, -w]), Re = l(A, [0, -y]), Se = l(S, [0, -y]), yt = l(D, [0, -y]), wt = l(q, [0, -y]), bt = l($, [0, -y]), xt = l(m, [0, -y]), Pt = l(T, [0, -y]), kt = l(N, [0, -y]), Ct = l(H, [0, -y]), qe = l(z, [0, -y]), Ne = l(O, [0, -y]), ze = l(A, [0, -p]), We = l(S, [0, -p]), Et = l(D, [0, -p]), Lt = l(q, [0, -p]), Bt = l($, [0, -p]), Mt = l(m, [0, -p]), $t = l(T, [0, -p]), Tt = l(N, [0, -p]), Ft = l(H, [0, -p]), Ae = l(z, [0, -p]), De = l(O, [0, -p]), He = l(S, [0, p]), Oe = l(D, [0, p]), Rt = l(q, [0, p]), St = l($, [0, p]), qt = l(m, [0, p]), Nt = l(T, [0, p]), zt = l(N, [0, p]), Xe = l(H, [0, p]), Ye = l(z, [0, p]), Ke = l(D, [0, y]), Qe = l(q, [0, y]), Wt = l($, [0, y]), At = l(m, [0, y]), Dt = l(T, [0, y]), Ve = l(N, [0, y]), Ue = l(H, [0, y]), Ze = l(q, [0, w]), je = l($, [0, w]), Ht = l(m, [0, w]), Ge = l(T, [0, w]), Ie = l(N, [0, w]), te = l($, [0, k]), oe = l(m, [0, k]), ne = l(T, [0, k]), le = l(m, [0, L]), o = [
   [2, le, t(le), e(le), n(e(le))],
   [1, te, t(te), e(te), n(e(te))],
   [0, oe, t(oe), e(oe), n(e(oe))],
@@ -111,8 +111,8 @@ const de = 23.6, qo = {
   [2, wt, t(wt), e(wt), n(e(wt))],
   [1, bt, t(bt), e(bt), n(e(bt))],
   [0, xt, t(xt), e(xt), n(e(xt))],
-  [1, kt, t(kt), e(kt), n(e(kt))],
-  [2, Pt, t(Pt), e(Pt), n(e(Pt))],
+  [1, Pt, t(Pt), e(Pt), n(e(Pt))],
+  [2, kt, t(kt), e(kt), n(e(kt))],
   [0, Ct, t(Ct), e(Ct), n(e(Ct))],
   [1, qe, t(qe), e(qe), n(e(qe))],
   [2, Ne, t(Ne), e(Ne), n(e(Ne))],
@@ -130,8 +130,8 @@ const de = 23.6, qo = {
   [1, I, t(I), e(I), n(e(I))],
   [0, J, t(J), e(J), n(e(J))],
   [2, xe, t(xe), e(xe), n(e(xe))],
-  [1, ke, t(ke), e(ke), n(e(ke))],
-  [0, Pe, t(Pe), e(Pe), n(e(Pe))],
+  [1, Pe, t(Pe), e(Pe), n(e(Pe))],
+  [0, ke, t(ke), e(ke), n(e(ke))],
   [2, Ce, t(Ce), e(Ce), n(e(Ce))],
   [0, Ee, t(Ee), e(Ee), n(e(Ee))],
   [1, Le, t(Le), e(Le), n(e(Le))],
@@ -164,8 +164,8 @@ const de = 23.6, qo = {
   ["a", r(I, U, u), t(r(I, U, u))],
   ["b", r(J, Z, u), t(r(J, Z, u))],
   ["c", r(xe, he, u), t(r(xe, he, u))],
-  ["d", r(ke, pe, u), t(r(ke, pe, u))],
-  ["e", r(Pe, me, u), t(r(Pe, me, u))],
+  ["d", r(Pe, pe, u), t(r(Pe, pe, u))],
+  ["e", r(ke, me, u), t(r(ke, me, u))],
   ["f", r(Ce, ge, u), t(r(Ce, ge, u))],
   ["g", r(Ee, ye, u), t(r(Ee, ye, u))],
   ["h", r(Le, we, u), t(r(Le, we, u))],
@@ -561,10 +561,10 @@ function Ot(i) {
   if (i.length === 0)
     return "";
   const [B, ...v] = i;
-  let Q = `M ${R(fe(B[0]))} ${R(ve(B[1]))} L `;
+  let X = `M ${R(fe(B[0]))} ${R(ve(B[1]))} L `;
   for (const F of v)
-    Q += `${R(fe(F[0]))} ${R(ve(F[1]))} `;
-  return `${Q} Z`;
+    X += `${R(fe(F[0]))} ${R(ve(F[1]))} `;
+  return `${X} Z`;
 }
 function R(i) {
   return i.toFixed(8);
@@ -596,7 +596,7 @@ const Ao = {
   }
 }), Oo = ["viewBox"], Xo = ["d", "fill"], Yo = ["d", "data-hexboard-position", "fill"], Ko = ["d", "fill"], Qo = ["d", "fill"], Vo = ["textContent", "x", "y"], Uo = ["cx", "cy", "fill"], Zo = ["viewBox"], Io = /* @__PURE__ */ fo({
   __name: "Hexboard",
-  props: /* @__PURE__ */ uo({
+  props: /* @__PURE__ */ co({
     active: { type: Boolean, default: !1 },
     autoselect: { type: Boolean, default: !1 },
     flipped: { type: Boolean, default: !1 },
@@ -624,17 +624,17 @@ const Ao = {
     },
     targetsModifiers: {}
   }),
-  emits: /* @__PURE__ */ uo(["clickPosition", "move"], ["update:mouseover-position", "update:selected", "update:targets"]),
+  emits: /* @__PURE__ */ co(["clickPosition", "dragendPosition", "dragstartPosition", "move"], ["update:mouseover-position", "update:selected", "update:targets"]),
   setup(i, { emit: B }) {
-    const v = i, Q = B, F = Zt(i, "mouseover-position"), b = Zt(i, "selected"), X = Zt(i, "targets"), Je = et({ x: 0, y: 0 }), M = et(null), ie = et(se()), h = et({
+    const v = i, X = B, F = Zt(i, "mouseover-position"), b = Zt(i, "selected"), Y = Zt(i, "targets"), Je = et({ x: 0, y: 0 }), M = et(null), ie = et(se()), h = et({
       hexchess: null,
       promotionEl: null,
       promotionFrom: null,
       promotionTo: null,
       selected: null
-    }), Xt = Co("svgEl"), Y = et(se());
+    }), Xt = Co("svgEl"), K = et(se());
     let Yt = !1;
-    const po = W(() => h.value.hexchess ? [] : X.value), ce = W(() => h.value.hexchess ? h.value.hexchess : v.hexchess ? v.hexchess : ao.init()), mo = W(() => ce.value.board.reduce(
+    const po = W(() => h.value.hexchess ? [] : Y.value), ce = W(() => h.value.hexchess ? h.value.hexchess : v.hexchess ? v.hexchess : ao.init()), mo = W(() => ce.value.board.reduce(
       (s, f, c) => (f && c !== M.value && s.push({ piece: f, index: c }), s),
       []
     )), Kt = W(() => typeof h.value.selected == "number" ? null : b.value), Gt = W(() => {
@@ -642,7 +642,7 @@ const Ao = {
       if (Qt.value)
         return "grabbing";
       if (!(!v.active || F.value === null || h.value.hexchess)) {
-        if (b.value !== null && X.value.includes(F.value)) {
+        if (b.value !== null && Y.value.includes(F.value)) {
           const d = (s = ce.value) == null ? void 0 : s.board[b.value];
           if (d) {
             const g = d === d.toLowerCase() ? "b" : "w", E = ((f = ce.value) == null ? void 0 : f.turn) === g;
@@ -654,9 +654,9 @@ const Ao = {
           return v.playing === !0 || v.playing && Jt.value === ((c = ce.value) == null ? void 0 : c.turn) && v.playing === Jt.value ? "grab" : "pointer";
       }
     }), It = W(() => ({
-      x: Je.value.x - Y.value.width / 2,
-      y: Je.value.y - Y.value.height / 2
-    })), Qt = W(() => !v.hexchess || h.value.hexchess || M.value === null ? null : v.hexchess.board[M.value]), K = W(() => ({ ...qo, ...v.options })), Jt = W(() => lt.value ? lt.value === lt.value.toLowerCase() ? "b" : "w" : null), lt = W(() => {
+      x: Je.value.x - K.value.width / 2,
+      y: Je.value.y - K.value.height / 2
+    })), Qt = W(() => !v.hexchess || h.value.hexchess || M.value === null ? null : v.hexchess.board[M.value]), Q = W(() => ({ ...qo, ...v.options })), Jt = W(() => lt.value ? lt.value === lt.value.toLowerCase() ? "b" : "w" : null), lt = W(() => {
       var s;
       return F.value === null ? null : ((s = ce.value) == null ? void 0 : s.board[F.value]) ?? null;
     }), st = W(() => {
@@ -684,7 +684,7 @@ const Ao = {
     ), jt(b, so);
     function Vt(s, f) {
       var E, re;
-      if (!X.value.includes(s.to))
+      if (!Y.value.includes(s.to))
         return;
       const c = (E = v.hexchess) == null ? void 0 : E.board[s.from];
       if (!c)
@@ -715,7 +715,7 @@ const Ao = {
     }
     function go(s) {
       var f, c;
-      return F.value === null ? K.value.labelColor : (f = ae(F.value)) != null && f.startsWith(s) || (c = ae(F.value)) != null && c.endsWith(s) ? K.value.labelActiveColor : K.value.labelInactiveColor;
+      return F.value === null ? Q.value.labelColor : (f = ae(F.value)) != null && f.startsWith(s) || (c = ae(F.value)) != null && c.endsWith(s) ? Q.value.labelActiveColor : Q.value.labelInactiveColor;
     }
     function rt(s) {
       var d;
@@ -742,12 +742,12 @@ const Ao = {
           h.value.selected !== s && _e();
           return;
         }
-        if (b.value !== null && X.value.includes(s)) {
+        if (b.value !== null && Y.value.includes(s)) {
           const c = new at({ from: b.value, to: s });
           Vt(c, f);
           return;
         }
-        v.autoselect && !v.hexchess.board[s] && (b.value = null), Q("clickPosition", s);
+        v.autoselect && !v.hexchess.board[s] && (b.value = null), X("clickPosition", s);
       }
     }
     function eo(s) {
@@ -766,22 +766,22 @@ const Ao = {
       F.value = null;
     }
     function to(s) {
-      Q("move", s), it();
+      X("move", s), it();
     }
     function xo(s, f) {
       var E, re;
-      if (f.preventDefault(), h.value.hexchess || b.value !== null && X.value.includes(s))
+      if (f.preventDefault(), h.value.hexchess || b.value !== null && Y.value.includes(s))
         return;
       const c = (E = v.hexchess) == null ? void 0 : E.board[s];
       if (!c || (v.autoselect && (b.value = s), !rt(s)))
         return;
       const d = c === c.toLowerCase() ? "b" : "w", g = ((re = v.hexchess) == null ? void 0 : re.turn) === d;
-      !v.ignoreTurn && !g || (M.value = s, Je.value = { x: f.clientX, y: f.clientY }, Xt.value instanceof Element && (Y.value = Xt.value.getBoundingClientRect()));
+      !v.ignoreTurn && !g || (M.value = s, Je.value = { x: f.clientX, y: f.clientY }, Xt.value instanceof Element && (K.value = Xt.value.getBoundingClientRect()), X("dragstartPosition", s));
     }
     function oo(s) {
       v.active && (Je.value = { x: s.clientX, y: s.clientY });
     }
-    function ko(s, f) {
+    function Po(s, f) {
       var c;
       if (f.stopPropagation(), M.value !== null) {
         let d = s;
@@ -789,14 +789,14 @@ const Ao = {
           f.clientX,
           f.clientY
         ), E = g == null ? void 0 : g.getAttribute("data-hexboard-position");
-        E !== null && (d = Number(E));
+        E !== null && (d = Number(E)), X("dragendPosition", d);
         const re = new at({ from: M.value, to: d });
         if (Vt(re, f), h.value.hexchess)
           return;
-        M.value = null, Y.value = se();
+        M.value = null, K.value = se();
         return;
       }
-      if (b.value !== null && X.value.includes(s)) {
+      if (b.value !== null && Y.value.includes(s)) {
         const d = new at({ from: b.value, to: s });
         return Vt(d, f), h.value.hexchess, void 0;
       }
@@ -805,7 +805,7 @@ const Ao = {
         return;
       }
       if ((c = v.hexchess) != null && c.board[s]) {
-        M.value = null, Y.value = se();
+        M.value = null, K.value = se();
         return;
       }
       it();
@@ -816,7 +816,7 @@ const Ao = {
         return;
       }
       if (M.value !== null) {
-        M.value = null, Y.value = se();
+        M.value = null, K.value = se();
         return;
       }
       it();
@@ -824,7 +824,7 @@ const Ao = {
     function lo(s) {
       M.value !== null && s.preventDefault();
     }
-    function Po(s) {
+    function ko(s) {
       if (typeof h.value.promotionFrom == "number" && rt(h.value.promotionFrom)) {
         const f = new at({
           from: h.value.promotionFrom ?? 0,
@@ -853,11 +853,11 @@ const Ao = {
         promotionFrom: null,
         promotionTo: null,
         selected: null
-      }, Y.value = se(), X.value = [];
+      }, K.value = se(), Y.value = [];
     }
     function so() {
       var s;
-      typeof b.value == "number" ? X.value = ((s = v.hexchess) == null ? void 0 : s.movesFrom(b.value).map((f) => f.to)) ?? [] : X.value = [];
+      typeof b.value == "number" ? Y.value = ((s = v.hexchess) == null ? void 0 : s.movesFrom(b.value).map((f) => f.to)) ?? [] : Y.value = [];
     }
     function ro() {
       it(), window.removeEventListener("keyup", eo), window.removeEventListener("pointermove", oo), window.removeEventListener("pointerup", no), window.removeEventListener("resize", ut), window.removeEventListener("scroll", ut), window.removeEventListener("touchmove", lo);
@@ -872,39 +872,39 @@ const Ao = {
       }, [
         vo("path", {
           d: a(Ot)(a(Wo)),
-          fill: K.value.colors[1],
+          fill: Q.value.colors[1],
           style: { pointerEvents: "none" }
         }, null, 8, Xo),
-        (x(!0), C(ot, null, nt(a(o), (c, d) => (x(), C("path", Mo(
+        (x(!0), C(tt, null, ot(a(o), (c, d) => (x(), C("path", Mo(
           { ref_for: !0 },
           i.active ? {
             onClick: (g) => yo(d, g),
             onMouseenter: () => wo(d),
             onMouseleave: () => bo(),
             onPointerdown: (g) => xo(d, g),
-            onPointerup: (g) => ko(d, g)
+            onPointerup: (g) => Po(d, g)
           } : {},
           {
             d: a(Ot)(i.flipped ? c[4] : c[3]),
             "data-hexboard-position": d,
-            fill: K.value.colors[a(o)[d][0]],
+            fill: Q.value.colors[a(o)[d][0]],
             key: d
           }
         ), null, 16, Yo))), 128)),
-        (x(!0), C(ot, null, nt(i.highlight, (c) => (x(), C("path", {
+        (x(!0), C(tt, null, ot(i.highlight, (c) => (x(), C("path", {
           d: a(Ot)(i.flipped ? a(o)[c][4] : a(o)[c][3]),
-          fill: K.value.highlightColor,
+          fill: Q.value.highlightColor,
           key: `highlight-${c}`,
           style: { pointerEvents: "none" }
         }, null, 8, Ko))), 128)),
         typeof Kt.value == "number" ? (x(), C("path", {
           key: 0,
           d: a(Ot)(i.flipped ? a(o)[Kt.value][4] : a(o)[Kt.value][3]),
-          fill: K.value.selectedColor,
+          fill: Q.value.selectedColor,
           ref: "selectedEl",
           style: { pointerEvents: "none" }
-        }, null, 8, Qo)) : tt("", !0),
-        K.value.labels ? (x(!0), C(ot, { key: 1 }, nt(a(zo), ([c, d, g], E) => (x(), C("text", {
+        }, null, 8, Qo)) : nt("", !0),
+        Q.value.labels ? (x(!0), C(tt, { key: 1 }, ot(a(zo), ([c, d, g], E) => (x(), C("text", {
           textContent: ho(c),
           "dominant-baseline": "central",
           "text-anchor": "middle",
@@ -917,8 +917,8 @@ const Ao = {
           }),
           x: a(R)(a(fe)(i.flipped ? g[0] : d[0])),
           y: a(R)(a(ve)(i.flipped ? g[1] : d[1]))
-        }, null, 12, Vo))), 128)) : tt("", !0),
-        ce.value ? (x(!0), C(ot, { key: 2 }, nt(mo.value, ({ piece: c, index: d }) => (x(), io(co(i.pieces), {
+        }, null, 12, Vo))), 128)) : nt("", !0),
+        ce.value ? (x(!0), C(tt, { key: 2 }, ot(mo.value, ({ piece: c, index: d }) => (x(), uo(io(i.pieces), {
           "data-piece-type": c,
           height: a(V),
           key: `piece-${a(ae)(d)}`,
@@ -927,11 +927,11 @@ const Ao = {
           width: a(V),
           x: a(R)(a(fe)(a(o)[d][i.flipped ? 2 : 1][0] - a(V) / 2)),
           y: a(R)(a(ve)(a(o)[d][i.flipped ? 2 : 1][1] + a(V) / 2))
-        }, null, 8, ["data-piece-type", "height", "type", "width", "x", "y"]))), 128)) : tt("", !0),
-        (x(!0), C(ot, null, nt(po.value, (c) => (x(), C("circle", {
+        }, null, 8, ["data-piece-type", "height", "type", "width", "x", "y"]))), 128)) : nt("", !0),
+        (x(!0), C(tt, null, ot(po.value, (c) => (x(), C("circle", {
           cx: a(R)(a(fe)(a(o)[c][i.flipped ? 2 : 1][0])),
           cy: a(R)(a(ve)(a(o)[c][i.flipped ? 2 : 1][1])),
-          fill: K.value.targetColor,
+          fill: Q.value.targetColor,
           key: `target-${a(ae)(c)}`,
           r: 0.3,
           style: { pointerEvents: "none" }
@@ -941,18 +941,18 @@ const Ao = {
         key: 0,
         xmlns: "http://www.w3.org/2000/svg",
         style: ct({
-          height: Y.value.height + "px",
+          height: K.value.height + "px",
           left: "0px",
           pointerEvents: "none",
           position: "fixed",
           top: "0px",
           transform: `translate(${It.value.x}px, ${It.value.y}px) scale(1.1)`,
-          width: Y.value.width + "px",
+          width: K.value.width + "px",
           willChange: "transform"
         }),
         viewBox: `0 0 ${a(de)} ${a(de)}`
       }, [
-        (x(), io(co(i.pieces), {
+        (x(), uo(io(i.pieces), {
           height: a(V),
           style: { pointerEvents: "none" },
           type: Qt.value,
@@ -960,7 +960,7 @@ const Ao = {
           x: a(R)(a(fe)(a(V) / -2)),
           y: a(R)(a(ve)(a(V) / 2))
         }, null, 8, ["height", "type", "width", "x", "y"]))
-      ], 12, Zo)) : tt("", !0),
+      ], 12, Zo)) : nt("", !0),
       typeof h.value.selected == "number" ? (x(), C("div", {
         key: 1,
         style: ct({
@@ -978,12 +978,12 @@ const Ao = {
           cancel: _e,
           file: a(ae)(h.value.selected)[0],
           n: st.value.n,
-          promote: Po,
+          promote: ko,
           q: st.value.q,
           r: st.value.r,
           rank: Number(a(ae)(h.value.selected).slice(1))
         })
-      ], 36)) : tt("", !0)
+      ], 36)) : nt("", !0)
     ]));
   }
 });

package/package.json

@@ -3,34 +3,34 @@
   "description": "Component library for hexchess.club",
   "devDependencies": {
     "@bedard/hexchess": "^2.5.1",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.3",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
-    "@stylistic/eslint-plugin": "^5.6.1",
-    "@tailwindcss/vite": "^4.1.17",
-    "@types/node": "^22.19.2",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vitejs/plugin-vue-jsx": "^5.1.2",
-    "@vitest/browser": "^4.0.15",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
-    "@vitest/ui": "^4.0.15",
+    "@stylistic/eslint-plugin": "^5.9.0",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^22.19.12",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.4",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^10.6.2",
+    "eslint-plugin-vue": "^10.8.0",
     "globals": "^16.5.0",
-    "jsdom": "^27.3.0",
-    "playwright": "^1.57.0",
-    "tailwindcss": "^4.1.17",
+    "jsdom": "^27.4.0",
+    "playwright": "^1.58.2",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15",
-    "vitest-browser-vue": "^2.0.1",
-    "vue": "^3.5.25",
-    "vue-tsc": "^3.1.8"
+    "vitest": "^4.0.18",
+    "vitest-browser-vue": "^2.0.2",
+    "vue": "^3.5.29",
+    "vue-tsc": "^3.2.5"
   },
   "keywords": [
     "hexchess"
@@ -58,5 +58,5 @@
   "license": "MIT",
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "0.0.10"
+  "version": "0.0.11"
 }

package/src/lib/components/hexboard/Hexboard.vue

@@ -231,6 +231,8 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   clickPosition: [position: number]
+  dragendPosition: [position: number]
+  dragstartPosition: [position: number]
   move: [san: San]
 }>()
 
@@ -725,6 +727,8 @@ function onPointerdownPosition(index: number, evt: PointerEvent) {
   if (svgEl.value instanceof Element) {
     svgRect.value = svgEl.value.getBoundingClientRect()
   }
+
+  emit('dragstartPosition', index)
 }
 
 /** pointermove window */
@@ -755,6 +759,8 @@ function onPointerupPosition(index: number, evt: PointerEvent) {
       targetIndex = Number(posAttr)
     }
 
+    emit('dragendPosition', targetIndex)
+
     const san = new San({ from: pointerdownPosition.value, to: targetIndex })
     attemptMove(san, evt)
 

package/src/tests/hexboard.test.tsx

@@ -502,6 +502,72 @@ test('dragging piece off board results in selection only, dragging state resets'
   await expect.element(page.getByTestId('drag-piece')).not.toBeInTheDocument()
 })
 
+test('drag emits dragstartPosition and dragendPosition', async () => {
+  const selected = ref<number | null>(null)
+  const targets = ref<number[]>([])
+  const onDragstartPosition = vi.fn()
+  const onDragendPosition = vi.fn()
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing="w"
+        v-model:selected={selected.value}
+        v-model:targets={targets.value}
+        onDragendPosition={onDragendPosition}
+        onDragstartPosition={onDragstartPosition}
+      />
+    )
+  })
+
+  await dragMove(page, 'f5f6')
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragstartPosition).toHaveBeenCalledWith(index('f5'))
+  await expect(onDragendPosition).toHaveBeenCalledOnce()
+  await expect(onDragendPosition).toHaveBeenCalledWith(index('f6'))
+})
+
+test('drag start emits dragstartPosition; release off board does not emit dragendPosition', async () => {
+  const selected = ref<number | null>(null)
+  const targets = ref<number[]>([])
+  const onDragstartPosition = vi.fn()
+  const onDragendPosition = vi.fn()
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing="w"
+        v-model:selected={selected.value}
+        v-model:targets={targets.value}
+        onDragendPosition={onDragendPosition}
+        onDragstartPosition={onDragstartPosition}
+      />
+    )
+  })
+
+  const whitePiecePosition = page.getByTestId('position-f5')
+
+  await whitePiecePosition
+    .element()
+    .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+  await nextTick()
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragstartPosition).toHaveBeenCalledWith(index('f5'))
+  await expect(onDragendPosition).not.toHaveBeenCalled()
+
+  window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+  await nextTick()
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragendPosition).not.toHaveBeenCalled()
+})
+
 test('drag and drop piece emits move event', async () => {
   const selected = ref<number | null>(null)
   const targets = ref<number[]>([])