Skip to content

Commit

Permalink
Merge pull request smaranjitghose#1034 from ashuvssut/draggable-undo-…
Browse files Browse the repository at this point in the history 
…redo

draggable undo redo button in sketch page
  • Loading branch information
@anushbhatia
anushbhatia authored Jun 4, 2021
2 parents b329ab7 + 20e41ae commit 54522cb
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 120 deletions.
166 changes: 83 additions & 83 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,83 @@
{
"private": true,
"name": "doc2pen",
"version": "0.1.0",
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --ext js,jsx src",
"lint:fix": "eslint --ext js,jsx src --fix"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^13.1.9",
"bootstrap": "^5.0.1",
"dom-to-image": "^2.6.0",
"file-saver": "^2.0.5",
"jspdf": "^2.3.1",
"jszip": "^3.6.0",
"leaflet": "^1.7.1",
"mousetrap": "^1.6.5",
"pdf-lib": "^1.16.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.3",
"react-dropzone": "^11.3.2",
"react-easy-emoji": "^1.4.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-js-snackbar": "^1.0.4",
"react-leaflet": "^3.2.0",
"react-progressbar-semicircle": "^1.2.1",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.2",
"react-useanimations": "^2.0.6",
"reactstrap": "^8.9.0",
"roughjs": "^4.4.1",
"sass": "^1.34.0",
"web-vitals": "^1.1.2"
},
"devDependencies": {
"eslint": "^7.27.0",
"eslint-plugin-react": "^7.24.0",
"gh-pages": "^3.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "^2.3.0"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.json": "prettier-package-json --write",
"*./src/*.{js,jsx,ts,tsx}": [
"npx prettier --write",
"eslint --fix"
],
"*.{md,mdx,json,css,scss,yaml,yml}": [
"npx prettier --write"
]
}
}
{
"private": true,
"name": "doc2pen",
"version": "0.1.0",
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --ext js,jsx src",
"lint:fix": "eslint --ext js,jsx src --fix"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^13.1.9",
"bootstrap": "^5.0.1",
"dom-to-image": "^2.6.0",
"file-saver": "^2.0.5",
"jspdf": "^2.3.1",
"jszip": "^3.6.0",
"leaflet": "^1.7.1",
"mousetrap": "^1.6.5",
"pdf-lib": "^1.16.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.3",
"react-dropzone": "^11.3.2",
"react-easy-emoji": "^1.4.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-js-snackbar": "^1.0.4",
"react-leaflet": "^3.2.0",
"react-progressbar-semicircle": "^1.2.1",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.2",
"react-useanimations": "^2.0.6",
"reactstrap": "^8.9.0",
"roughjs": "^4.4.1",
"sass": "^1.34.0",
"web-vitals": "^1.1.2",
"react-color": "^2.19.3"
},
"devDependencies": {
"eslint": "^7.27.0",
"eslint-plugin-react": "^7.24.0",
"gh-pages": "^3.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "^2.3.0"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.json": "prettier-package-json --write",
"*./src/*.{js,jsx,ts,tsx}": [
"npx prettier --write",
"eslint --fix"
],
"*.{md,mdx,json,css,scss,yaml,yml}": [
"npx prettier --write"
]
}
}
72 changes: 38 additions & 34 deletions src/pages/Sketch/components/Canvas.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import styles from "./canvas.module.scss";
import Toolbox from "./Toolbox/Toolbox";
import { MdUndo, MdRedo } from "react-icons/md";
import { DragIndicator, Undo, Redo } from "@material-ui/icons";
import Draggable from "react-draggable";
import ReactSnackBar from "react-js-snackbar";
import checkBox from "./../../../assets/images/checkmark.svg";
import rough from "roughjs/bin/rough";
Expand Down Expand Up @@ -629,39 +630,41 @@ function Canvas() {
/>

{/* ----- Undo & Redo----- */}
<div
className={`${styles.feature_container} ${styles.download_clear_container}`}
>
<label htmlFor="sketch-dcd-undo" title="Undo">
<div
className={styles.feature}
onClick={() => undo()}
style={{
cursor: `${canvasStateAt === -1 ? "not-allowed" : "pointer"}`,
}}
id="sketch-dcd-undo"
>
<MdUndo size={20} />
</div>
</label>
<label htmlFor="sketch-dcd-redo" title="Redo">
<div
className={styles.feature}
onClick={() => redo()}
style={{
cursor: `${
canvasStateAt === canvasStates.length - 1
? "not-allowed"
: "pointer"
}`,
}}
id="sketch-dcd-redo"
>
<MdRedo size={20} />
</div>
</label>
</div>

<Draggable>
<div
className={`${styles.feature_container} ${styles.download_clear_container}`}
>
<label htmlFor="sketch-dcd-undo" title="Undo">
<div
className={styles.feature}
onClick={() => undo()}
style={{
cursor: `${canvasStateAt === -1 ? "not-allowed" : "pointer"}`,
}}
id="sketch-dcd-undo"
>
<Undo fontSize="small" />
</div>
</label>
<label htmlFor="sketch-dcd-redo" title="Redo">
<div
className={styles.feature}
onClick={() => redo()}
style={{
cursor: `${
canvasStateAt === canvasStates.length - 1
? "not-allowed"
: "pointer"
}`,
}}
id="sketch-dcd-redo"
>
<Redo fontSize="small" />
</div>
</label>
<DragIndicator style={{ cursor: "grab" }} fontSize="large" />
</div>
</Draggable>
<canvas
ref={canvasRef}
width={`${canvasWidth}`}
Expand All @@ -677,6 +680,7 @@ function Canvas() {
</div>

{/* ----- Text ----- */}

<div
style={{ height: canvasHeight, width: canvasWidth }}
className={styles.text_container}
Expand Down
5 changes: 3 additions & 2 deletions src/pages/Sketch/components/canvas.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
.feature_container {
position: absolute;
display: flex;
padding: 0.3rem;
align-items: center;
padding: 0.05rem;
border-radius: 5px;
background-color: colors.$white;
box-shadow: 0 0 3px 0.3px colors.$grey;
Expand All @@ -13,7 +14,7 @@
margin: 0;
.feature {
position: relative;
padding: 0.7rem 0.5rem;
padding: 0.3rem 0.2rem;
margin: 0 0.2rem;
border-radius: 5px;
cursor: pointer;
Expand Down
22 changes: 21 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3455,7 +3455,7 @@ check-types@^11.1.1:
resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==

"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
"chokidar@>=3.0.0 <4.0.0":
version "3.5.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
Expand Down Expand Up @@ -3489,6 +3489,21 @@ chokidar@^2.1.8:
optionalDependencies:
fsevents "^1.2.7"

chokidar@^3.4.1:
version "3.4.3"
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz"
integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
dependencies:
anymatch "~3.1.1"
braces "~3.0.2"
glob-parent "~5.1.0"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.5.0"
optionalDependencies:
fsevents "~2.1.2"

chownr@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
Expand Down Expand Up @@ -5544,6 +5559,11 @@ fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==

fsevents@~2.1.2:
version "2.1.3"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==

function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
Expand Down

0 comments on commit 54522cb

Please sign in to comment.