@vue-puzzle-vcode/shared 2.0.0 → 2.0.2

package/README.md

@@ -0,0 +1,9 @@
+# @vue-puzzle-vcode/shared
+
+vue-puzzle-vcode 的共享纯函数工具库:Canvas 拼图绘制、拼图块路径、数学/随机数等。无任何框架依赖。
+
+> 内部包,被 [`@vue-puzzle-vcode/core`](https://www.npmjs.com/package/@vue-puzzle-vcode/core) 与 [`@vue-puzzle-vcode/ui`](https://www.npmjs.com/package/@vue-puzzle-vcode/ui) 依赖,通常无需直接安装。
+
+## 文档
+
+完整文档与在线 Demo 见主仓库:[github.com/daguanren21/vue-puzzle-vcode](https://github.com/daguanren21/vue-puzzle-vcode#readme)

package/dist/index.cjs

@@ -5,9 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 * Pure, framework-agnostic utilities: math + canvas drawing for the
 * sliding-puzzle captcha. No Vue imports here — safe to bundle anywhere.
 */
-/** Random integer in [min, max]. */
+/** Random integer in [min, max] (inclusive). */
 function randomInt(min, max) {
-	return Math.ceil(Math.random() * (max - min) + min);
+	if (max < min) return min;
+	return min + Math.floor(Math.random() * (max - min + 1));
 }
 /** Clamp `v` into [min, max]. */
 function clamp(v, min, max) {
@@ -28,6 +29,41 @@ function computeSliderBaseSize(sliderSize, canvasWidth) {
 	return Math.max(Math.min(Math.round(sliderSize), Math.round(canvasWidth * .5)), 10);
 }
 /**
+* Usable track length (canvasWidth - sliderBaseSize), floored at 1 so the
+* drag-compensation term never divides by zero.
+*/
+function computeTrackTravel(canvasWidth, sliderBaseSize) {
+	return Math.max(1, canvasWidth - sliderBaseSize);
+}
+/**
+* Horizontal offset of the floating puzzle piece, kept in sync with the
+* slider. Compensates for puzzle-vs-slider width mismatch across the track.
+*/
+function computePuzzleTranslateX(styleWidth, sliderBaseSize, puzzleBaseSize, trackTravel) {
+	const dragged = styleWidth - sliderBaseSize;
+	return dragged - (puzzleBaseSize - sliderBaseSize) * (dragged / trackTravel);
+}
+/**
+* Absolute pixel deviation used for pass/fail. The trailing `-3` undoes the
+* shadow crop offset applied when the piece was copied off the main canvas.
+*/
+function computeDragDeviation(pinX, styleWidth, sliderBaseSize, puzzleBaseSize, trackTravel) {
+	const dragged = styleWidth - sliderBaseSize;
+	return Math.abs(pinX - dragged + (puzzleBaseSize - sliderBaseSize) * (dragged / trackTravel) - 3);
+}
+/**
+* Source rectangle used to copy the puzzle piece (and its drop shadow) off
+* the main canvas. `sw`/`sh` are WIDTH/HEIGHT for `getImageData`.
+*/
+function computePuzzleCropRect(pinX, pinY, puzzleBaseSize) {
+	return {
+		sx: pinX - 3,
+		sy: pinY - 20,
+		sw: puzzleBaseSize + 8,
+		sh: puzzleBaseSize + 25
+	};
+}
+/**
 * object-fit: cover mapping of an image onto a canvas.
 * Returns [x, y, width, height] for drawImage.
 */
@@ -160,7 +196,8 @@ function drawPuzzleFrame(canvases, img, opts) {
 	ctx.shadowBlur = Math.min(Math.ceil(8 * puzzleScale), 12);
 	ctx.fillStyle = "#ffffaa";
 	ctx.fill();
-	const imgData = ctx.getImageData(pinX - 3, pinY - 20, pinX + puzzleBaseSize + 5, pinY + puzzleBaseSize + 5);
+	const { sx, sy, sw, sh } = computePuzzleCropRect(pinX, pinY, puzzleBaseSize);
+	const imgData = ctx.getImageData(sx, sy, sw, sh);
 	ctx2.putImageData(imgData, 0, pinY - 20);
 	ctx.restore();
 	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -193,8 +230,12 @@ const RESET_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAA
 //#endregion
 exports.RESET_ICON = RESET_ICON;
 exports.clamp = clamp;
+exports.computeDragDeviation = computeDragDeviation;
 exports.computePuzzleBaseSize = computePuzzleBaseSize;
+exports.computePuzzleCropRect = computePuzzleCropRect;
+exports.computePuzzleTranslateX = computePuzzleTranslateX;
 exports.computeSliderBaseSize = computeSliderBaseSize;
+exports.computeTrackTravel = computeTrackTravel;
 exports.coverSize = coverSize;
 exports.drawPuzzleFrame = drawPuzzleFrame;
 exports.generateRandomImage = generateRandomImage;

package/dist/index.d.cts

@@ -4,7 +4,7 @@
  * Pure, framework-agnostic utilities: math + canvas drawing for the
  * sliding-puzzle captcha. No Vue imports here — safe to bundle anywhere.
  */
-/** Random integer in [min, max]. */
+/** Random integer in [min, max] (inclusive). */
 declare function randomInt(min: number, max: number): number;
 /** Clamp `v` into [min, max]. */
 declare function clamp(v: number, min: number, max: number): number;
@@ -18,6 +18,31 @@ declare function computePuzzleBaseSize(puzzleScale: number): number;
  * Faithful port of the original `sliderBaseSize` computed.
  */
 declare function computeSliderBaseSize(sliderSize: number, canvasWidth: number): number;
+/**
+ * Usable track length (canvasWidth - sliderBaseSize), floored at 1 so the
+ * drag-compensation term never divides by zero.
+ */
+declare function computeTrackTravel(canvasWidth: number, sliderBaseSize: number): number;
+/**
+ * Horizontal offset of the floating puzzle piece, kept in sync with the
+ * slider. Compensates for puzzle-vs-slider width mismatch across the track.
+ */
+declare function computePuzzleTranslateX(styleWidth: number, sliderBaseSize: number, puzzleBaseSize: number, trackTravel: number): number;
+/**
+ * Absolute pixel deviation used for pass/fail. The trailing `-3` undoes the
+ * shadow crop offset applied when the piece was copied off the main canvas.
+ */
+declare function computeDragDeviation(pinX: number, styleWidth: number, sliderBaseSize: number, puzzleBaseSize: number, trackTravel: number): number;
+/**
+ * Source rectangle used to copy the puzzle piece (and its drop shadow) off
+ * the main canvas. `sw`/`sh` are WIDTH/HEIGHT for `getImageData`.
+ */
+declare function computePuzzleCropRect(pinX: number, pinY: number, puzzleBaseSize: number): {
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+};
 /**
  * object-fit: cover mapping of an image onto a canvas.
  * Returns [x, y, width, height] for drawImage.
@@ -64,4 +89,4 @@ declare function drawPuzzleFrame(canvases: PuzzleCanvases, img: HTMLImageElement
  */
 declare const RESET_ICON: string;
 //#endregion
-export { DrawPuzzleFrameOptions, PuzzleCanvases, RESET_ICON, clamp, computePuzzleBaseSize, computeSliderBaseSize, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };
+export { DrawPuzzleFrameOptions, PuzzleCanvases, RESET_ICON, clamp, computeDragDeviation, computePuzzleBaseSize, computePuzzleCropRect, computePuzzleTranslateX, computeSliderBaseSize, computeTrackTravel, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };

package/dist/index.d.ts

@@ -4,7 +4,7 @@
  * Pure, framework-agnostic utilities: math + canvas drawing for the
  * sliding-puzzle captcha. No Vue imports here — safe to bundle anywhere.
  */
-/** Random integer in [min, max]. */
+/** Random integer in [min, max] (inclusive). */
 declare function randomInt(min: number, max: number): number;
 /** Clamp `v` into [min, max]. */
 declare function clamp(v: number, min: number, max: number): number;
@@ -18,6 +18,31 @@ declare function computePuzzleBaseSize(puzzleScale: number): number;
  * Faithful port of the original `sliderBaseSize` computed.
  */
 declare function computeSliderBaseSize(sliderSize: number, canvasWidth: number): number;
+/**
+ * Usable track length (canvasWidth - sliderBaseSize), floored at 1 so the
+ * drag-compensation term never divides by zero.
+ */
+declare function computeTrackTravel(canvasWidth: number, sliderBaseSize: number): number;
+/**
+ * Horizontal offset of the floating puzzle piece, kept in sync with the
+ * slider. Compensates for puzzle-vs-slider width mismatch across the track.
+ */
+declare function computePuzzleTranslateX(styleWidth: number, sliderBaseSize: number, puzzleBaseSize: number, trackTravel: number): number;
+/**
+ * Absolute pixel deviation used for pass/fail. The trailing `-3` undoes the
+ * shadow crop offset applied when the piece was copied off the main canvas.
+ */
+declare function computeDragDeviation(pinX: number, styleWidth: number, sliderBaseSize: number, puzzleBaseSize: number, trackTravel: number): number;
+/**
+ * Source rectangle used to copy the puzzle piece (and its drop shadow) off
+ * the main canvas. `sw`/`sh` are WIDTH/HEIGHT for `getImageData`.
+ */
+declare function computePuzzleCropRect(pinX: number, pinY: number, puzzleBaseSize: number): {
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+};
 /**
  * object-fit: cover mapping of an image onto a canvas.
  * Returns [x, y, width, height] for drawImage.
@@ -64,4 +89,4 @@ declare function drawPuzzleFrame(canvases: PuzzleCanvases, img: HTMLImageElement
  */
 declare const RESET_ICON: string;
 //#endregion
-export { DrawPuzzleFrameOptions, PuzzleCanvases, RESET_ICON, clamp, computePuzzleBaseSize, computeSliderBaseSize, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };
+export { DrawPuzzleFrameOptions, PuzzleCanvases, RESET_ICON, clamp, computeDragDeviation, computePuzzleBaseSize, computePuzzleCropRect, computePuzzleTranslateX, computeSliderBaseSize, computeTrackTravel, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };

package/dist/index.js

@@ -4,9 +4,10 @@
 * Pure, framework-agnostic utilities: math + canvas drawing for the
 * sliding-puzzle captcha. No Vue imports here — safe to bundle anywhere.
 */
-/** Random integer in [min, max]. */
+/** Random integer in [min, max] (inclusive). */
 function randomInt(min, max) {
-	return Math.ceil(Math.random() * (max - min) + min);
+	if (max < min) return min;
+	return min + Math.floor(Math.random() * (max - min + 1));
 }
 /** Clamp `v` into [min, max]. */
 function clamp(v, min, max) {
@@ -27,6 +28,41 @@ function computeSliderBaseSize(sliderSize, canvasWidth) {
 	return Math.max(Math.min(Math.round(sliderSize), Math.round(canvasWidth * .5)), 10);
 }
 /**
+* Usable track length (canvasWidth - sliderBaseSize), floored at 1 so the
+* drag-compensation term never divides by zero.
+*/
+function computeTrackTravel(canvasWidth, sliderBaseSize) {
+	return Math.max(1, canvasWidth - sliderBaseSize);
+}
+/**
+* Horizontal offset of the floating puzzle piece, kept in sync with the
+* slider. Compensates for puzzle-vs-slider width mismatch across the track.
+*/
+function computePuzzleTranslateX(styleWidth, sliderBaseSize, puzzleBaseSize, trackTravel) {
+	const dragged = styleWidth - sliderBaseSize;
+	return dragged - (puzzleBaseSize - sliderBaseSize) * (dragged / trackTravel);
+}
+/**
+* Absolute pixel deviation used for pass/fail. The trailing `-3` undoes the
+* shadow crop offset applied when the piece was copied off the main canvas.
+*/
+function computeDragDeviation(pinX, styleWidth, sliderBaseSize, puzzleBaseSize, trackTravel) {
+	const dragged = styleWidth - sliderBaseSize;
+	return Math.abs(pinX - dragged + (puzzleBaseSize - sliderBaseSize) * (dragged / trackTravel) - 3);
+}
+/**
+* Source rectangle used to copy the puzzle piece (and its drop shadow) off
+* the main canvas. `sw`/`sh` are WIDTH/HEIGHT for `getImageData`.
+*/
+function computePuzzleCropRect(pinX, pinY, puzzleBaseSize) {
+	return {
+		sx: pinX - 3,
+		sy: pinY - 20,
+		sw: puzzleBaseSize + 8,
+		sh: puzzleBaseSize + 25
+	};
+}
+/**
 * object-fit: cover mapping of an image onto a canvas.
 * Returns [x, y, width, height] for drawImage.
 */
@@ -159,7 +195,8 @@ function drawPuzzleFrame(canvases, img, opts) {
 	ctx.shadowBlur = Math.min(Math.ceil(8 * puzzleScale), 12);
 	ctx.fillStyle = "#ffffaa";
 	ctx.fill();
-	const imgData = ctx.getImageData(pinX - 3, pinY - 20, pinX + puzzleBaseSize + 5, pinY + puzzleBaseSize + 5);
+	const { sx, sy, sw, sh } = computePuzzleCropRect(pinX, pinY, puzzleBaseSize);
+	const imgData = ctx.getImageData(sx, sy, sw, sh);
 	ctx2.putImageData(imgData, 0, pinY - 20);
 	ctx.restore();
 	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -190,4 +227,4 @@ function drawPuzzleFrame(canvases, img, opts) {
 */
 const RESET_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAELklEQVRYR+2YW2wUZRTH//9vtlCo\nF9IoIklT3PqgPGi326hoetuaGEhIr9SgCYkkgt2WGOQVCca+GavWdr0GjD4YhG3RB3hply1LQA1t\nEQIxEXapGI2pEkys9LIzx2ylYWfY6e5sF0oi+7hzzvl+3/9855xvhrjNf7zN+XAHcL4Z+n8o6JWT\neYt++W25S596AIZy6TB+n3yo+Nchlk8vmIIVowdXU9c3Q1gDSilBlQwjgBAYFGDvdF58/4milqvZ\nwDpOcXWsb5Uh8hmBqkwXFMhlCN8aX5LXNbRy/T+Z+iXsHAFWRXs3QGQPyLucLDJrK5DgUXdTsxPf\njAEro8E3Ce50EtxsKxPTwCPH3U2jTmJkBJgWTnAMxDeGMEoa0xQ+LJQnCD4HYFkCyAC3RdwN3U7g\nMkpxRTTYrMD91sCJIgCxV5R6O1Jcfy7VwonqLoj9/CqB2kF341qncGkBvRe+ureAWpRgoalCBecM\nFzcdK24YymZRJz5zprgq1tsJwXYL3CVZGvdGHmwZc7JQtra2gE+f712ep2QUYP714DJhaJrXLqXZ\nQszlZwtYdSHoB9ljVk/ePVrSZFL0ZkAlxzQBVseCT8WhZhRThtFB8plk9Zi/qCi8cv0fNxvKFrDy\n4oF11NXXIFy2EII4iBcG3Y03VLZT8OqRd5aFPduvOEpxRayvXolxAKB2g6NgEhobBlc1HHYKY7Wv\nHf5wtVAPgegIlbbZ9seUZ7AyFnwewi9pGoUyDmhrB931kfnC1ZwOeKlLP8GZJi6QLSFP2yep4toX\nSbT3ZQAfX3O6omt8Nhd9r/aHQAUMOQywYBZo5uZD2ThQ2rbPCjlnH6yI9rUryE5DU75ctJaake46\nBe4DuDjF8dFBNA94/AdtiySVxIlpMlTS8td801o70vMigM9huTda2lhcKHVHPO2HZv/P6LIwX7hk\n/+qzPSvUJGMkrg8AQYTkroRdXMlE+HH/twsG6BsOdJHYZlaO/lBZ6weOiiSXqs3Gqj0TeAxx+T75\nDIpgwjC0onD51pQD4JaluPrkR/cpFT9DcoVp84LOgTL/DjtBbglgou+puHwB8lEznPxJw1XSX77V\ntgizBvQNBw4RMqB7xt4Lc3c8lQKJaQHoO4R8ydz0/7MWoCXk8c85MrMC9J3qaafw/WtQlwXST+F3\nBnAeYB4obgJ1BJIuG+YtiKAjVOZ/Pd1ZdwzoG+4uBtSPpjaRbhXLcwF3hzytb2TilgVgT5BkYybB\nrTYC+Rvg5nRpdTRJrIs8+VPXPQXj2i4ItxC4O2NQQUQnN4U9rRcz9nH64p4ceM2lziX5Y4s3KHCd\nUHwE77ecMkMEp6BwhIa2Z6DslZRvfulgHafYLuCas58WLp2aLCFUga70qxOFU6dPFL2W1feYeaU4\n3Y5z/TxnCuYabMEuC043ckdBp4pZ7f8FE5psOI1g6fwAAAAASUVORK5CYII=";
 //#endregion
-export { RESET_ICON, clamp, computePuzzleBaseSize, computeSliderBaseSize, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };
+export { RESET_ICON, clamp, computeDragDeviation, computePuzzleBaseSize, computePuzzleCropRect, computePuzzleTranslateX, computeSliderBaseSize, computeTrackTravel, coverSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt, tracePuzzlePath };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vue-puzzle-vcode/shared",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Shared pure utilities for vue-puzzle-vcode (canvas drawing, math)",
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/javaLuo/vue-puzzle-vcode.git",
+    "url": "git+https://github.com/daguanren21/vue-puzzle-vcode.git",
     "directory": "packages/shared"
   },
   "type": "module",
@@ -30,7 +30,8 @@
   "sideEffects": false,
   "devDependencies": {
     "tsdown": "0.22.14",
-    "typescript": "7.0.2"
+    "typescript": "7.0.2",
+    "vitest": "4.1.10"
   },
   "publishConfig": {
     "access": "public"
@@ -38,6 +39,7 @@
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --root ../.. packages/shared/test"
   }
 }