From 1fc54f16550bbfc9572fe8c857bf7be6e885e33f Mon Sep 17 00:00:00 2001 From: rvstowrn Date: Thu, 23 Jul 2020 19:38:38 +0530 Subject: [PATCH 1/9] fix: full size canvas plus eraser --- src/Components/CanvasComponent.tsx | 18 +++++++++++++++++- src/styles.css | 10 +++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx index 277c216..a44edda 100644 --- a/src/Components/CanvasComponent.tsx +++ b/src/Components/CanvasComponent.tsx @@ -29,6 +29,12 @@ class CanvasComponent extends React.Component { const canvas: HTMLCanvasElement = document.getElementById( "canvas" ) as HTMLCanvasElement; + + // Setting up width and height of canvas + const sizeMax = Math.max(window.innerWidth,window.innerHeight) + canvas.width = sizeMax; + canvas.height = sizeMax; + const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ctx:any = canvas.getContext("2d"); @@ -192,7 +198,7 @@ class CanvasComponent extends React.Component { render() { return ( - +
+ + + @@ -222,7 +224,7 @@ class CanvasComponent extends React.Component { this.setState({ choice: "rectangle" }); }} > - Rectangle + - + - diff --git a/src/styles.css b/src/styles.css index 4c6cebf..44a8c51 100644 --- a/src/styles.css +++ b/src/styles.css @@ -18,9 +18,19 @@ canvas{ right: 0; display: flex; flex-direction: column; - padding: 5px; } -.sketch-picker{ - width: 115px !Important; +.toolset > button{ + height: 30px; +} +.circle-picker{ + border: 1px solid rgba(0,0,0,0.4); + background-color: #e5e5e5; + text-align: center !important; + width: 90px !Important; cursor: pointer; +} +.circle-picker > span >div{ + width: 22px !important; + height: 22px !important; + margin: 2px !important; } \ No newline at end of file From 8fd3b24050fdad1c7f58fdd8310eb0a5f7845422 Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sun, 23 Aug 2020 20:24:08 +0530 Subject: [PATCH 4/9] feat : used input color type instead of picker from react-color package --- package.json | 2 -- src/Components/CanvasComponent.tsx | 23 ++++++++--------------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 79bb910..4f28486 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/lodash": "^4.14.156", - "@types/react-color": "^3.0.4", "react": "^16.13.1", - "react-color": "^2.18.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", "typescript": "^3.9.5" diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx index 3665d2f..61dde4f 100644 --- a/src/Components/CanvasComponent.tsx +++ b/src/Components/CanvasComponent.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { CirclePicker } from "react-color"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEraser, faCircle, faSquare, faPaintBrush, faDownload, faSync } from '@fortawesome/free-solid-svg-icons' @@ -8,19 +7,16 @@ interface Point { y: number; } -interface Color { - hex: string; -} class CanvasComponent extends React.Component { state = { - background: "#121212", + color: "#121212", choice: "brush", canvas: {} as HTMLCanvasElement, }; - handleChangeComplete = (color) => { - this.setState({ background: color.hex }); + handleChangeComplete = (e) => { + this.setState({ color: e.target.value }); }; componentDidMount() { @@ -119,7 +115,7 @@ class CanvasComponent extends React.Component { plvaly = e.clientY; } ctx.drawImage(canvasPic, 0, 0); - ctx.fillStyle = this.state.background; + ctx.fillStyle = this.state.color; ctx.beginPath(); ctx.rect( lastPoint.x, @@ -149,7 +145,7 @@ class CanvasComponent extends React.Component { plvaly = e.clientY; } ctx.drawImage(canvasPic, 0, 0); - ctx.fillStyle = this.state.background; + ctx.fillStyle = this.state.color; ctx.beginPath(); ctx.arc( lastPoint.x, @@ -176,7 +172,7 @@ class CanvasComponent extends React.Component { for (let i = 0; i < dist; i++) { x = lastPoint.x + Math.sin(angle) * i - 0; y = lastPoint.y + Math.cos(angle) * i - 0; - ctx.fillStyle = this.state.background; + ctx.fillStyle = this.state.color; ctx.beginPath(); ctx.rect(x, y, 5, 5); ctx.fill(); @@ -212,7 +208,7 @@ class CanvasComponent extends React.Component { - +
); From a739c6d59ad60e48eee22783b5ab4cac9b69fbeb Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sun, 23 Aug 2020 22:40:29 +0530 Subject: [PATCH 5/9] fix : used ref for color change issue which occurs after selecting another option after eraser --- src/Components/CanvasComponent.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx index 61dde4f..9027553 100644 --- a/src/Components/CanvasComponent.tsx +++ b/src/Components/CanvasComponent.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { Ref } from "react"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEraser, faCircle, faSquare, faPaintBrush, faDownload, faSync } from '@fortawesome/free-solid-svg-icons' @@ -9,6 +9,13 @@ interface Point { class CanvasComponent extends React.Component { + colorInput; + + constructor(props) { + super(props); + this.colorInput = React.createRef(); + } + state = { color: "#121212", choice: "brush", @@ -207,6 +214,7 @@ class CanvasComponent extends React.Component { - + ); From e14b647fe617914986cfce979fee4887add9f1f9 Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sun, 23 Aug 2020 23:07:53 +0530 Subject: [PATCH 6/9] fix : unused imported Ref removed, color input value set to #121212 in constructor --- src/Components/CanvasComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx index 9027553..9a76f01 100644 --- a/src/Components/CanvasComponent.tsx +++ b/src/Components/CanvasComponent.tsx @@ -1,4 +1,4 @@ -import React, { Ref } from "react"; +import React from "react"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEraser, faCircle, faSquare, faPaintBrush, faDownload, faSync } from '@fortawesome/free-solid-svg-icons' @@ -14,6 +14,7 @@ class CanvasComponent extends React.Component { constructor(props) { super(props); this.colorInput = React.createRef(); + this.colorInput.current.value="#121212"; } state = { From 6d79ff298ca522bc879827e366e08607354f3861 Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sun, 23 Aug 2020 23:10:31 +0530 Subject: [PATCH 7/9] fix color back to black --- src/Components/CanvasComponent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx index 9a76f01..2867e9d 100644 --- a/src/Components/CanvasComponent.tsx +++ b/src/Components/CanvasComponent.tsx @@ -14,11 +14,10 @@ class CanvasComponent extends React.Component { constructor(props) { super(props); this.colorInput = React.createRef(); - this.colorInput.current.value="#121212"; } state = { - color: "#121212", + color: "#000000", choice: "brush", canvas: {} as HTMLCanvasElement, }; From 36b01c90395d2fa6c48be1a2512eb41a8d7308da Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sat, 21 Nov 2020 05:59:39 +0530 Subject: [PATCH 8/9] pwa check --- src/index.tsx | 2 ++ src/serviceWorker.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 6a22009..f94e050 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import CanvasComponent from "./Components/CanvasComponent"; +import registerServiceWorker from './serviceWorker'; import "./styles.css"; class Main extends React.Component { @@ -14,3 +15,4 @@ class Main extends React.Component { } ReactDOM.render(
, document.getElementById("root")); +registerServiceWorker(); \ No newline at end of file diff --git a/src/serviceWorker.js b/src/serviceWorker.js index b04b771..f040fa6 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -20,7 +20,7 @@ const isLocalhost = Boolean( ) ); -export function register(config) { +export default function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); From 117625981f70420da09aeba0493ff036a0f5194d Mon Sep 17 00:00:00 2001 From: Rishabh Verma Date: Sat, 21 Nov 2020 06:27:05 +0530 Subject: [PATCH 9/9] netlify config file --- config.yml | 1 + src/index.tsx | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) create mode 100644 config.yml diff --git a/config.yml b/config.yml new file mode 100644 index 0000000..7de20fa --- /dev/null +++ b/config.yml @@ -0,0 +1 @@ +pwa: true \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index f94e050..5e7a8f9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; import CanvasComponent from "./Components/CanvasComponent"; -import registerServiceWorker from './serviceWorker'; import "./styles.css"; class Main extends React.Component { @@ -14,5 +13,4 @@ class Main extends React.Component { } } -ReactDOM.render(
, document.getElementById("root")); -registerServiceWorker(); \ No newline at end of file +ReactDOM.render(
, document.getElementById("root")); \ No newline at end of file