Merge pull request #33 from mgorabbani/reset-feature

Add Reset Button
mgorabbani · Aug 14, 2021 · 03098c3 · 03098c3
2 parents c4d6718 + 956c968
commit 03098c3
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-image-pan-zoom-rotate",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React library to give control on image to move zoom and rotate",
   "author": "mgorabbani",
   "license": "MIT",
@@ -33,35 +33,35 @@
     "react": "^16.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
-    "babel-eslint": "^10.0.3",
-    "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5"
+    "@testing-library/jest-dom": "4.2.4",
+    "@testing-library/react": "9.5.0",
+    "@testing-library/user-event": "7.2.1",
+    "@types/jest": "25.1.4",
+    "@types/node": "12.12.38",
+    "@types/react": "16.9.27",
+    "@types/react-dom": "16.9.7",
+    "@typescript-eslint/eslint-plugin": "2.26.0",
+    "@typescript-eslint/parser": "2.26.0",
+    "microbundle-crl": "0.13.10",
+    "babel-eslint": "10.0.3",
+    "cross-env": "7.0.2",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.7.0",
+    "eslint-config-standard": "14.1.0",
+    "eslint-config-standard-react": "9.2.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-node": "11.0.0",
+    "eslint-plugin-prettier": "3.1.1",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "7.17.0",
+    "eslint-plugin-standard": "4.0.1",
+    "gh-pages": "2.2.0",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.0.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "3.7.5"
   },
   "files": [
     "dist"

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,6 +16,13 @@ const PanViewer = ({ image, alt, ref }: PanViewerProps) => {
   const [rotation, setRotation] = React.useState(0)
   const [flip, setFlip] = React.useState(false)
 
+  const resetAll = () => {
+    setDx(0)
+    setDy(0)
+    setZoom(1)
+    setRotation(0)
+    setFlip(false)
+  }
   const zoomIn = () => {
     setZoom(zoom + 0.2)
   }
@@ -170,7 +177,8 @@ const PanViewer = ({ image, alt, ref }: PanViewerProps) => {
             textAlign: 'center',
             cursor: 'pointer',
             height: 40,
-            width: 40
+            width: 40,
+            borderBottom: ' 1px solid #ccc'
           }}
         >
           <svg
@@ -202,6 +210,35 @@ const PanViewer = ({ image, alt, ref }: PanViewerProps) => {
             />
           </svg>
         </div>
+        <div
+          onClick={resetAll}
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer',
+            height: 40,
+            width: 40
+          }}
+        >
+          <svg
+            style={{
+              height: '100%',
+              width: '100%',
+              padding: 10,
+              boxSizing: 'border-box'
+            }}
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+            stroke='#4C68C1'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          >
+            <path d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7' />
+          </svg>
+        </div>
       </div>
       <ReactPanZoom
         style={{