🐛 fix(Canvas.tsx): fix magnifier canvas offset to be more accurate in…

… touch devices

✨ feat(Canvas.tsx): add offset prop to allow customization of magnifier canvas offset

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.1]
+
+#### Features
+
+* Fixed issue where Cropper wasn't working on Reset.
+* Added offset for the magnifier canvas to be more accurate in touch devices.
+
 ### [0.3.0](http://github.com/subho57/react-document-crop)
 
 #### Features

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-document-crop",
   "homepage": "https://subho57.github.io/react-document-crop",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React component performing crop, border detection, perspective correction and simple image filters over a provided image 📲 📸",
   "author": "subho57",
   "license": "MIT",
@@ -58,10 +58,10 @@
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "babel-eslint": "^10.0.3",
-    "caniuse-lite": "^1.0.30001486",
+    "caniuse-lite": "^1.0.30001488",
     "cross-env": "^7.0.3",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -81,6 +81,7 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "gh-pages": "^5.0.0",
     "microbundle-crl": "^0.13.11",
+    "mirada": "^0.0.15",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "react": ">=16.8.0",
@@ -96,7 +97,7 @@
     "dist"
   ],
   "dependencies": {
-    "opencv-react-ts": "subho57/opencv-react-ts",
+    "opencv-react-ts": "^0.0.11",
     "react-draggable": "^4.4.5"
   },
   "packageManager": "[email protected]"

src/lib/Canvas.tsx

@@ -32,6 +32,7 @@ export interface ICropperRef {
   displayGrid?: boolean;
   openCvPath?: string;
   magnification?: number;
+  offset?: { x: number; y: number };
 }
 
 const Canvas: React.FC<ICropperRef> = ({
@@ -48,6 +49,7 @@ const Canvas: React.FC<ICropperRef> = ({
   lineColor = '#3cabe2',
   pointBgColor = 'transparent',
   pointBorder = '4px solid #3cabe2',
+  offset = { x: 60, y: 60 },
 }) => {
   const { loaded: cvLoaded, cv } = useOpenCv();
   const canvasRef = useRef<HTMLCanvasElement>();
@@ -282,9 +284,25 @@ const Canvas: React.FC<ICropperRef> = ({
       if (!previewCanvasRef.current) return;
       const pointRadius = pointSize / 2;
 
+      const localOffset = { ...offset };
+
+      if (area === 'left-top') {
+        localOffset.x = +localOffset.x;
+        localOffset.y = +localOffset.y;
+      } else if (area === 'right-top') {
+        localOffset.x = -localOffset.x;
+        localOffset.y = +localOffset.y;
+      } else if (area === 'left-bottom') {
+        localOffset.x = +localOffset.x;
+        localOffset.y = -localOffset.y;
+      } else if (area === 'right-bottom') {
+        localOffset.x = -localOffset.x;
+        localOffset.y = -localOffset.y;
+      }
+
       magnCtx.save();
       magnCtx.beginPath();
-      magnCtx.arc(x, y, pointRadius * magnification, 0, 2 * Math.PI);
+      magnCtx.arc(x + localOffset.x, y + localOffset.y, pointRadius * magnification, 0, 2 * Math.PI);
       magnCtx.closePath();
       magnCtx.stroke();
       magnCtx.clip();
@@ -295,8 +313,8 @@ const Canvas: React.FC<ICropperRef> = ({
         y - pointRadius,
         pointSize,
         pointSize,
-        x - pointRadius * magnification,
-        y - pointRadius * magnification,
+        x + localOffset.x - pointRadius * magnification,
+        y + localOffset.y - pointRadius * magnification,
         pointSize * magnification,
         pointSize * magnification
       );
@@ -310,10 +328,10 @@ const Canvas: React.FC<ICropperRef> = ({
       if (displayGrid) {
         magnCtx.beginPath();
         magnCtx.lineWidth = lineWidth;
-        magnCtx.moveTo(x - pointRadius * magnification, y);
-        magnCtx.lineTo(x + pointRadius * magnification, y);
-        magnCtx.moveTo(x, y - pointRadius * magnification);
-        magnCtx.lineTo(x, y + pointRadius * magnification);
+        magnCtx.moveTo(x + localOffset.x - pointRadius * magnification, y + localOffset.y);
+        magnCtx.lineTo(x + localOffset.x + pointRadius * magnification, y + localOffset.y);
+        magnCtx.moveTo(x + localOffset.x, y + localOffset.y - pointRadius * magnification);
+        magnCtx.lineTo(x + localOffset.x, y + localOffset.y + pointRadius * magnification);
         magnCtx.closePath();
         magnCtx.stroke();
       }