Skip to content

Commit

Permalink
Draggable undo redo button in SKetch page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashuvssut
ashuvssut committed May 31, 2021
1 parent e8c5327 commit c12e464
Show file tree
Hide file tree
Showing 4 changed files with 1,082 additions and 294 deletions.
100 changes: 52 additions & 48 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
{
"private": true,
"name": "doc2pen",
"version": "0.1.0",
"homepage": ".",
"private": true,
"scripts": {
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test",
"lint": "eslint --ext js,jsx src",
"lint:fix": "eslint --ext js,jsx src --fix"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@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.11.8",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"bootstrap": "^4.5.1",
"@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",
Expand All @@ -21,58 +31,52 @@
"mousetrap": "^1.6.5",
"pdf-lib": "^1.16.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.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-easy-emoji": "^1.4.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.1.0",
"react-icons": "^4.2.0",
"react-js-snackbar": "^1.0.4",
"react-leaflet": "^3.1.0",
"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.1",
"react-scroll": "^1.8.1",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.2",
"react-useanimations": "^2.0.6",
"reactstrap": "^8.5.1",
"roughjs": "^4.3.1",
"sass": "^1.32.8",
"web-vitals": "^0.2.4"
},
"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"
"reactstrap": "^8.9.0",
"roughjs": "^4.4.1",
"sass": "^1.34.0",
"web-vitals": "^1.1.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
"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": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.json": "prettier-package-json --write",
"*.{js,css,md}": "prettier --write"
},
"devDependencies": {
"eslint": "^7.27.0",
"eslint-plugin-react": "^7.23.2",
"gh-pages": "^3.1.0"
"*./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 @@ -630,39 +631,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 @@ -678,6 +681,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
Loading

0 comments on commit c12e464

Please sign in to comment.