diff --git a/src/App.js b/src/App.js index ef27602..9e2558f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,682 +1,26 @@ -import './App.css'; -import {useLayoutEffect, useRef, useState} from "react"; - -let mouseDownMenuBar = false -let mouseDownCanvas = false -let mouseMenuBarOffsetX, mouseMenuBarOffsetY = 0 -let context -let hintContext -let canvas -let downLink -let lastPositions = [] -let strokeWidth = 2 -let lastMouse = 0 -let eraserColor = "rgb(255, 255, 255)" -let lastStrokeWidthPencil = 2, lastStrokeWidthEraser = 20, lastStrokeWidthRect = 2, lastStrokeWidthCircle = 2, - lastStrokeWidthLine = 2 - -let hintCanvas - -let formAnchor = null; -let textInput - -let fileInput - -let moverActive = false - -let moverWidth = 0, moverHeight = 0 +import Drawing from "./Drawing"; +import {useState} from "react"; +import StartForm from "./StartForm"; export default function App() { - useLayoutEffect(() => { + const [showForm, setShowForm] = useState("flex") + const [showDrawing, setShowDrawing] = useState("none") - window.addEventListener("beforeunload", e => { - e.preventDefault() - e.returnValue = "" - }) + const [widthDrawing, setWidthDrawing] = useState(0) + const [heightDrawing, setHeightDrawing] = useState(0) - canvas = document.getElementById("canvas") - context = canvas.getContext("2d") - - fileInput = document.getElementById("fileInput") - - downLink = document.createElement("a") - downLink.className = "no-display" - textInput = document.getElementById("textInput") - - hintCanvas = document.getElementById("hintCanvas") - hintContext = hintCanvas.getContext("2d") - - window.scrollTo((5000 / window.innerWidth) * 500, (3000 / window.innerHeight) * 300) - - setInterval(() => { - if (selectedTool === "pencil" || selectedTool === "eraser") { - if (lastPositions.length >= 2) { - let point1 = lastPositions.shift() - let point2 = lastPositions[lastPositions.length - 1] - - let connection = new Position(point1.x - point2.x, point1.y - point2.y) - - for (let i = 0; i < 1; i += 0.001) { - context.beginPath() - context.arc(point1.x - (connection.x * i), point1.y - (connection.y * i), strokeWidth, 0, 2 * Math.PI, false) - context.fill() - } - } else if (Date.now() - lastMouse > 100 && lastPositions.length >= 1) { - let point = lastPositions.shift() - - context.beginPath() - context.arc(point.x, point.y, strokeWidth, 0, 2 * Math.PI, false) - context.fill() - } - } - }, 1) - - }, []) - - const [menuBarLeft, setMenuBarLeft] = useState(50) - const [menuBarTop, setMenuBarTop] = useState(50) - const [strokeWidthSliderValue, setStrokeWidthSliderValue] = useState(strokeWidth) - const [colorValue, setColorValue] = useState("#000000") - const [menuBarShown, setMenuBarShown] = useState(true) - const [selectedTool, setSelectedTool] = useState("pencil") - const [textInputX, setTextInputX] = useState(0) - const [textInputY, setTextInputY] = useState(0) - const [showTextInput, setShowTextInput] = useState(false) - - - class Position { - constructor(x, y) { - this.x = x - this.y = y - } + function onCreateCanvas(inputWidth, inputHeight) { + setWidthDrawing(parseInt(inputWidth.value)) + setHeightDrawing(parseInt(inputHeight.value)) + setShowForm("none") + setShowDrawing("block") } - function handleMouseDownCanvas(e) { - if (e.button === 0) { - if(!moverActive) { - mouseDownCanvas = true - hintContext.clearRect(0, 0, 5000, 3000) - setShowTextInput(false) - context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor - if (selectedTool === "pencil" || selectedTool === "eraser") { - context.beginPath() - context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false) - context.fill() - - lastMouse = Date.now() - lastPositions.push(new Position(e.pageX, e.pageY)) - } else { - - formAnchor = new Position(e.pageX, e.pageY) - } - if (selectedTool === "text") { - mouseDownCanvas = false - setTextInputX(e.pageX + 10) - setTextInputY(e.pageY + 10) - setShowTextInput(true) - hintContext.beginPath() - hintContext.fillStyle = "black" - hintContext.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI, false) - hintContext.fill() - } - } - else { - context.clearRect(formAnchor.x, formAnchor.y, moverWidth, moverHeight) - context.drawImage(hintCanvas, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6) - hintContext.clearRect(0, 0, 5000, 3000) - moverActive = false - mouseDownCanvas = false - canvas.style.cursor = "crosshair" - } - } - } - - function handleMouseUpCanvas(e) { - if (e.button === 0 && mouseDownCanvas) { - mouseDownCanvas = false - - if (selectedTool === "rect") { - context.strokeStyle = colorValue - context.beginPath() - context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) - context.lineWidth = strokeWidthSliderValue - context.stroke() - - } else if (selectedTool === "circle") { - context.strokeStyle = colorValue - context.beginPath() - let radius = (e.pageX - formAnchor.x) / 2 - let yRad = (e.pageY - formAnchor.y) / 2 - context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) - context.lineWidth = strokeWidthSliderValue - context.stroke() - } else if (selectedTool === "selector") { - context.clearRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) - } else if (selectedTool === "line") { - context.strokeStyle = colorValue - context.beginPath() - context.lineWidth = strokeWidthSliderValue - context.moveTo(formAnchor.x, formAnchor.y) - context.lineTo(e.pageX, e.pageY) - context.stroke() - context.moveTo(0, 0) - } - else if (selectedTool === "mover") { - canvas.style.cursor = "move" - moverActive = true - moverWidth = e.pageX - formAnchor.x - moverHeight = e.pageY - formAnchor.y - } - } - - if (selectedTool !== "text") { - hintContext.clearRect(0, 0, 5000, 3000) - } else { - textInput.focus() - } - } - - function handleMouseMove(e) { - let mouseX = e.pageX - let mouseY = e.pageY - - if (selectedTool === "pencil" || selectedTool === "eraser") { - hintContext.clearRect(0, 0, 5000, 3000) - hintContext.beginPath() - hintContext.fillStyle = colorValue - hintContext.arc(mouseX, mouseY, strokeWidthSliderValue, 0, 2 * Math.PI, false) - hintContext.fill() - } - - if (mouseDownMenuBar) { - - setMenuBarLeft(mouseX - mouseMenuBarOffsetX) - setMenuBarTop(mouseY - mouseMenuBarOffsetY) - } else if (mouseDownCanvas) { - hintContext.clearRect(0, 0, 5000, 3000) - if (selectedTool === "pencil" || selectedTool === "eraser") { - context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor - - lastPositions.push(new Position(mouseX, mouseY)) - - lastMouse = Date.now() - } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector" || selectedTool === "line" || selectedTool === "mover") { - hintContext.strokeStyle = colorValue - hintContext.lineWidth = strokeWidthSliderValue - - if (selectedTool === "selector") { - hintContext.setLineDash([10, 15]) - hintContext.lineWidth = 3 - hintContext.strokeStyle = "rgb(200, 0, 0)" - } - else if(selectedTool === "mover") { - hintContext.setLineDash([10, 15]) - hintContext.lineWidth = 3 - hintContext.strokeStyle = "rgb(0, 0, 0)" - } else { - hintContext.setLineDash([]) - } - - hintContext.beginPath() - - if (selectedTool === "rect" || selectedTool === "selector" || selectedTool === "mover") { - hintContext.rect(formAnchor.x, formAnchor.y, mouseX - formAnchor.x, mouseY - formAnchor.y) - hintContext.stroke() - } - - if (selectedTool === "circle") { - let radius = (mouseX - formAnchor.x) / 2 - let yRad = (mouseY - formAnchor.y) / 2 - hintContext.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) - hintContext.stroke() - } - - if (selectedTool === "line") { - hintContext.moveTo(formAnchor.x, formAnchor.y) - hintContext.lineTo(mouseX, mouseY) - hintContext.stroke() - } - } - } else if (moverActive) { - hintContext.clearRect(0, 0, 5000, 3000) - - hintContext.drawImage(canvas, formAnchor.x, formAnchor.y, moverWidth, moverHeight, e.pageX - moverWidth, e.pageY - moverHeight, moverWidth, moverHeight) - } - } - - function onExportButtonClick(e) { - - let tempCanvas = document.createElement("canvas") - tempCanvas.width = 5000 - tempCanvas.height = 3000 - let tempContext = tempCanvas.getContext("2d") - tempContext.fillStyle = "rgb(255, 255, 255)" - tempContext.fillRect(0, 0, 5000, 3000) - tempContext.drawImage(canvas, 0, 0, 5000, 3000, 0, 0, 5000, 3000) - - context.drawImage(tempCanvas, 0, 0, 5000, 3000, 0, 0, 5000, 3000) - - let img = canvas.toDataURL("image/png") - let image = new Image() - image.src = "data:image/png;base64," + img - downLink.href = img - downLink.download = "export.png" - downLink.click() - } - - function onSaveButtonClick() - { - let img = canvas.toDataURL("image/png") - let blob = new Blob([img], {type: "text/plain"}) - var url = URL.createObjectURL(blob) - downLink.href = url - downLink.download = "save.redraw" - downLink.click() - } - - function onOpenButtonClick() { - fileInput.click() - } - - function handleToolChange(e) { - setShowTextInput(false) - hintContext.clearRect(0, 0, 5000, 3000) - setSelectedTool(e.target.value) - if (e.target.value === "pencil") { - setStrokeWidthSliderValue(lastStrokeWidthPencil) - strokeWidth = lastStrokeWidthPencil - } else if (e.target.value === "eraser") { - setStrokeWidthSliderValue(lastStrokeWidthEraser) - strokeWidth = lastStrokeWidthEraser - } else if (e.target.value === "rect") { - setStrokeWidthSliderValue(lastStrokeWidthRect) - strokeWidth = lastStrokeWidthRect - } else if (e.target.value === "circle") { - setStrokeWidthSliderValue(lastStrokeWidthCircle) - strokeWidth = lastStrokeWidthCircle - } else if (e.target.value === "line") { - setStrokeWidthSliderValue(lastStrokeWidthLine) - strokeWidth = lastStrokeWidthLine - } - } - - return ( - -
handleMouseMove(e)} style={{overflow: "unset"}}> - { - handleMouseDownCanvas(e) - }} - onMouseUp={e => { - handleMouseUpCanvas(e) - }} - > - - - - - - { - if (e.key === "Enter") { - mouseDownCanvas = false - context.font = "25px sans-serif" - context.textAlign = "center" - context.fillText(textInput.value, formAnchor.x, formAnchor.y + 10) - textInput.value = "" - setShowTextInput(false) - hintContext.clearRect(0, 0, 5000, 3000) - } - }}/> - - - -
+ return ( +
+ + +
); } diff --git a/src/Drawing.js b/src/Drawing.js new file mode 100644 index 0000000..17d7d98 --- /dev/null +++ b/src/Drawing.js @@ -0,0 +1,702 @@ +import './App.css'; +import {useEffect, useLayoutEffect, useRef, useState} from "react"; + +let mouseDownMenuBar = false +let mouseDownCanvas = false +let mouseMenuBarOffsetX, mouseMenuBarOffsetY = 0 +let context +let hintContext +let canvas +let downLink +let lastPositions = [] +let strokeWidth = 2 +let lastMouse = 0 +let eraserColor = "rgb(255, 255, 255)" +let lastStrokeWidthPencil = 2, lastStrokeWidthEraser = 20, lastStrokeWidthRect = 2, lastStrokeWidthCircle = 2, + lastStrokeWidthLine = 2 + +let hintCanvas + +let formAnchor = null; +let textInput + +let fileInput + +let moverActive = false + +let moverWidth = 0, moverHeight = 0 + + +export default function Drawing(p) { + + useEffect(() => { + if(p.show !== "none") { + let body = document.querySelector("body") + body.style.background = "rgb(200, 200, 200)" + } + }) + + + useLayoutEffect(() => { + + canvas = document.getElementById("canvas") + context = canvas.getContext("2d") + + fileInput = document.getElementById("fileInput") + + downLink = document.createElement("a") + downLink.className = "no-display" + textInput = document.getElementById("textInput") + + hintCanvas = document.getElementById("hintCanvas") + hintContext = hintCanvas.getContext("2d") + + + setInterval(() => { + if (selectedTool === "pencil" || selectedTool === "eraser") { + if (lastPositions.length >= 2) { + let point1 = lastPositions.shift() + let point2 = lastPositions[lastPositions.length - 1] + + let connection = new Position(point1.x - point2.x, point1.y - point2.y) + + for (let i = 0; i < 1; i += 0.001) { + context.beginPath() + context.arc(point1.x - (connection.x * i), point1.y - (connection.y * i), strokeWidth, 0, 2 * Math.PI, false) + context.fill() + } + } else if (Date.now() - lastMouse > 100 && lastPositions.length >= 1) { + let point = lastPositions.shift() + + context.beginPath() + context.arc(point.x, point.y, strokeWidth, 0, 2 * Math.PI, false) + context.fill() + } + } + }, 1) + + }, []) + + const [menuBarLeft, setMenuBarLeft] = useState(50) + const [menuBarTop, setMenuBarTop] = useState(50) + const [strokeWidthSliderValue, setStrokeWidthSliderValue] = useState(strokeWidth) + const [colorValue, setColorValue] = useState("#000000") + const [menuBarShown, setMenuBarShown] = useState(true) + const [selectedTool, setSelectedTool] = useState("pencil") + const [textInputX, setTextInputX] = useState(0) + const [textInputY, setTextInputY] = useState(0) + const [showTextInput, setShowTextInput] = useState(false) + + + class Position { + constructor(x, y) { + this.x = x + this.y = y + } + } + + function handleMouseDownCanvas(e) { + if (e.button === 0) { + if(!moverActive) { + mouseDownCanvas = true + hintContext.clearRect(0, 0, p.width, p.height) + setShowTextInput(false) + context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor + if (selectedTool === "pencil" || selectedTool === "eraser") { + context.beginPath() + context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false) + context.fill() + + lastMouse = Date.now() + lastPositions.push(new Position(e.pageX, e.pageY)) + } else { + + formAnchor = new Position(e.pageX, e.pageY) + } + if (selectedTool === "text") { + mouseDownCanvas = false + setTextInputX(e.pageX + 10) + setTextInputY(e.pageY + 10) + setShowTextInput(true) + hintContext.beginPath() + hintContext.fillStyle = "black" + hintContext.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI, false) + hintContext.fill() + } + } + else { + context.clearRect(formAnchor.x, formAnchor.y, moverWidth, moverHeight) + context.drawImage(hintCanvas, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6) + hintContext.clearRect(0, 0, p.width, p.height) + moverActive = false + mouseDownCanvas = false + canvas.style.cursor = "crosshair" + } + } + } + + function handleMouseUpCanvas(e) { + if (e.button === 0 && mouseDownCanvas) { + mouseDownCanvas = false + + if (selectedTool === "rect") { + context.strokeStyle = colorValue + context.beginPath() + context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) + context.lineWidth = strokeWidthSliderValue + context.stroke() + + } else if (selectedTool === "circle") { + context.strokeStyle = colorValue + context.beginPath() + let radius = (e.pageX - formAnchor.x) / 2 + let yRad = (e.pageY - formAnchor.y) / 2 + context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) + context.lineWidth = strokeWidthSliderValue + context.stroke() + } else if (selectedTool === "selector") { + context.clearRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) + } else if (selectedTool === "line") { + context.strokeStyle = colorValue + context.beginPath() + context.lineWidth = strokeWidthSliderValue + context.moveTo(formAnchor.x, formAnchor.y) + context.lineTo(e.pageX, e.pageY) + context.stroke() + context.moveTo(0, 0) + } + else if (selectedTool === "mover") { + canvas.style.cursor = "move" + moverActive = true + moverWidth = e.pageX - formAnchor.x + moverHeight = e.pageY - formAnchor.y + } + } + + if (selectedTool !== "text") { + hintContext.clearRect(0, 0, p.width, p.height) + } else { + textInput.focus() + } + } + + function handleMouseMove(e) { + let mouseX = e.pageX + let mouseY = e.pageY + + if (selectedTool === "pencil" || selectedTool === "eraser") { + hintContext.clearRect(0, 0, p.width, p.height) + hintContext.beginPath() + hintContext.fillStyle = colorValue + hintContext.arc(mouseX, mouseY, strokeWidthSliderValue, 0, 2 * Math.PI, false) + hintContext.fill() + } + + if (mouseDownMenuBar) { + + setMenuBarLeft(mouseX - mouseMenuBarOffsetX) + setMenuBarTop(mouseY - mouseMenuBarOffsetY) + } else if (mouseDownCanvas) { + hintContext.clearRect(0, 0, p.width, p.height) + if (selectedTool === "pencil" || selectedTool === "eraser") { + context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor + + lastPositions.push(new Position(mouseX, mouseY)) + + lastMouse = Date.now() + } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector" || selectedTool === "line" || selectedTool === "mover") { + hintContext.strokeStyle = colorValue + hintContext.lineWidth = strokeWidthSliderValue + + if (selectedTool === "selector") { + hintContext.setLineDash([10, 15]) + hintContext.lineWidth = 3 + hintContext.strokeStyle = "rgb(200, 0, 0)" + } + else if(selectedTool === "mover") { + hintContext.setLineDash([10, 15]) + hintContext.lineWidth = 3 + hintContext.strokeStyle = "rgb(0, 0, 0)" + } else { + hintContext.setLineDash([]) + } + + hintContext.beginPath() + + if (selectedTool === "rect" || selectedTool === "selector" || selectedTool === "mover") { + hintContext.rect(formAnchor.x, formAnchor.y, mouseX - formAnchor.x, mouseY - formAnchor.y) + hintContext.stroke() + } + + if (selectedTool === "circle") { + let radius = (mouseX - formAnchor.x) / 2 + let yRad = (mouseY - formAnchor.y) / 2 + hintContext.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) + hintContext.stroke() + } + + if (selectedTool === "line") { + hintContext.moveTo(formAnchor.x, formAnchor.y) + hintContext.lineTo(mouseX, mouseY) + hintContext.stroke() + } + } + } else if (moverActive) { + hintContext.clearRect(0, 0, p.width, p.height) + + hintContext.drawImage(canvas, formAnchor.x, formAnchor.y, moverWidth, moverHeight, e.pageX - moverWidth, e.pageY - moverHeight, moverWidth, moverHeight) + } + } + + function onExportButtonClick(e) { + + let tempCanvas = document.createElement("canvas") + tempCanvas.width = p.width + tempCanvas.height = p.height + let tempContext = tempCanvas.getContext("2d") + tempContext.fillStyle = "rgb(255, 255, 255)" + tempContext.fillRect(0, 0, p.width, p.height) + tempContext.drawImage(canvas, 0, 0, p.width, p.height, 0, 0, p.width, p.height) + + context.drawImage(tempCanvas, 0, 0, p.width, p.height, 0, 0, p.width, p.height) + + let img = canvas.toDataURL("image/png") + let image = new Image() + image.src = "data:image/png;base64," + img + downLink.href = img + downLink.download = "export.png" + downLink.click() + } + + function onSaveButtonClick() + { + let img = canvas.toDataURL("image/png") + let blob = new Blob([img], {type: "text/plain"}) + var url = URL.createObjectURL(blob) + downLink.href = url + downLink.download = "save.redraw" + downLink.click() + } + + function onOpenButtonClick() { + fileInput.click() + } + + function handleToolChange(e) { + setShowTextInput(false) + hintContext.clearRect(0, 0, p.width, p.height) + setSelectedTool(e.target.value) + if (e.target.value === "pencil") { + setStrokeWidthSliderValue(lastStrokeWidthPencil) + strokeWidth = lastStrokeWidthPencil + } else if (e.target.value === "eraser") { + setStrokeWidthSliderValue(lastStrokeWidthEraser) + strokeWidth = lastStrokeWidthEraser + } else if (e.target.value === "rect") { + setStrokeWidthSliderValue(lastStrokeWidthRect) + strokeWidth = lastStrokeWidthRect + } else if (e.target.value === "circle") { + setStrokeWidthSliderValue(lastStrokeWidthCircle) + strokeWidth = lastStrokeWidthCircle + } else if (e.target.value === "line") { + setStrokeWidthSliderValue(lastStrokeWidthLine) + strokeWidth = lastStrokeWidthLine + } + } + + return ( + +
handleMouseMove(e)} style={{overflow: "unset", display: p.show}}> + { + handleMouseDownCanvas(e) + }} + onMouseUp={e => { + handleMouseUpCanvas(e) + }} + > + + + + + + { + if (e.key === "Enter") { + mouseDownCanvas = false + context.font = "25px sans-serif" + context.textAlign = "center" + context.fillText(textInput.value, formAnchor.x, formAnchor.y + 10) + textInput.value = "" + setShowTextInput(false) + hintContext.clearRect(0, 0, p.width, p.height) + } + }}/> + + + +
+ ); +} diff --git a/src/StartForm.js b/src/StartForm.js new file mode 100644 index 0000000..7fda8b6 --- /dev/null +++ b/src/StartForm.js @@ -0,0 +1,77 @@ +import {useEffect} from "react"; + +let inputWidth, inputHeight + +export default function StartForm(p) { + + useEffect(() => { + if(p.show !== "none") { + inputWidth = document.getElementById("inputWidth") + inputHeight = document.getElementById("inputHeight") + } + }, []) + + useEffect(() => { + let body = document.querySelector("body") + body.style.background = "white" + }) + + return ( +
+
+

Welcome To ReDraw

+ +

Specify your drawing canvas width and height

+ +
+
+ + +
+ +
+ +

Please note that ReDraw is still in beta and will not guarantee correctness

+
+
+ ); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index c4b678d..3a4b7a2 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: rgb(255, 255, 255); + background-color: rgb(200, 200, 200); } code {