diff --git a/src/App.js b/src/App.js index 15ce3e4..f2ae3e5 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,10 @@ let textInput let fileInput +let moverActive = false + +let moverWidth = 0, moverHeight = 0 + export default function App() { useLayoutEffect(() => { @@ -34,8 +38,6 @@ export default function App() { fileInput = document.getElementById("fileInput") - - clearScreen("rgb(255, 255, 255)") downLink = document.createElement("a") downLink.className = "no-display" textInput = document.getElementById("textInput") @@ -88,44 +90,48 @@ export default function App() { } } - function clearScreen(color) { - context.fillStyle = color - context.fillRect(0, 0, 5000, 3000) - eraserColor = color - } - function handleMouseDownCanvas(e) { if (e.button === 0) { - 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() + 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 { + lastMouse = Date.now() + lastPositions.push(new Position(e.pageX, e.pageY)) + } else { - formAnchor = new Position(e.pageX, e.pageY) + 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() + } } - if (selectedTool === "text") { + else { + context.drawImage(canvas, formAnchor.x, formAnchor.y, moverWidth, moverHeight, e.pageX - moverWidth, e.pageY - moverHeight, moverWidth, moverHeight) + context.clearRect(formAnchor.x, formAnchor.y, moverWidth, moverHeight) + hintContext.clearRect(0, 0, 5000, 3000) + moverActive = false 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() + canvas.style.cursor = "crosshair" } } } function handleMouseUpCanvas(e) { - if (e.button === 0) { + if (e.button === 0 && mouseDownCanvas) { mouseDownCanvas = false if (selectedTool === "rect") { @@ -155,10 +161,16 @@ export default function App() { 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") { + if (selectedTool !== "text" && selectedTool !== "mover") { hintContext.clearRect(0, 0, 5000, 3000) - } else { + } else if(selectedTool === "text") { textInput.focus() } } @@ -188,7 +200,7 @@ export default function App() { lastPositions.push(new Position(mouseX, mouseY)) lastMouse = Date.now() - } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector" || selectedTool === "line") { + } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector" || selectedTool === "line" || selectedTool === "mover") { hintContext.strokeStyle = colorValue hintContext.lineWidth = strokeWidthSliderValue @@ -196,13 +208,18 @@ export default function App() { 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") { + if (selectedTool === "rect" || selectedTool === "selector" || selectedTool === "mover") { hintContext.rect(formAnchor.x, formAnchor.y, mouseX - formAnchor.x, mouseY - formAnchor.y) hintContext.stroke() } @@ -220,6 +237,17 @@ export default function App() { hintContext.stroke() } } + } else if (moverActive) { + hintContext.clearRect(0, 0, 5000, 3000) + hintContext.setLineDash([10, 15]) + hintContext.lineWidth = 3 + hintContext.strokeStyle = "rgb(0, 0, 0)" + + hintContext.drawImage(canvas, formAnchor.x, formAnchor.y, moverWidth, moverHeight, e.pageX - moverWidth, e.pageY - moverHeight, moverWidth, moverHeight) + + hintContext.beginPath() + hintContext.rect(e.pageX - moverWidth, e.pageY - moverHeight, moverWidth, moverHeight) + hintContext.stroke() } } @@ -511,6 +539,25 @@ export default function App() { handleToolChange(e) }}/> + +
{strokeWidthSliderValue}