From 9fe5ba18a5c3f1c3785a0e3d666c009d3a0a43b4 Mon Sep 17 00:00:00 2001 From: Dev 1 Date: Sat, 9 Sep 2023 21:14:44 +0530 Subject: [PATCH] c --- src/pages/drawing/index.astro | 362 +++++++++++++++++----------------- 1 file changed, 179 insertions(+), 183 deletions(-) diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index a41f350..5804975 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -89,9 +89,8 @@ import Layout from '../../layouts/Layout.astro'; } else{ outlineImage.setDepth(1).setScale(0.7); } - - graphics = this.add.graphics(); + graphics = this.add.graphics(); const colorContainer = document.createElement('div'); colorContainer.style.position = 'absolute'; colorContainer.style.top = '10%'; @@ -128,7 +127,6 @@ import Layout from '../../layouts/Layout.astro'; selectedColor = event.target.value; // Update selectedColor if not erasing } }); - // Append the color picker to the color container colorContainer.appendChild(colorPicker); const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; @@ -160,9 +158,7 @@ import Layout from '../../layouts/Layout.astro'; // Other button styles remain the same // ${color} // Create the SVG element with dynamic fill color - button.innerHTML = ` - `; - + button.innerHTML = ` `; if (!isMobile) { button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; @@ -174,8 +170,7 @@ import Layout from '../../layouts/Layout.astro'; button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.borderRadius = '20%'; button.style.marginRight = `${buttonSpacing}px`; - - button.addEventListener('click', () => { + button.addEventListener('click', () => { // Remove the border from the previously selected button, if any if (selectedButton) { selectedButton.style.border = 'none'; @@ -183,7 +178,6 @@ import Layout from '../../layouts/Layout.astro'; selectedButton.style.transform = 'translateX(0px)'; selectedButton.style.marginTop = '0px'; selectedButton.style.marginBottom = '0px'; - } // Set the new selected color selectedColor = color; @@ -211,185 +205,187 @@ import Layout from '../../layouts/Layout.astro'; colorContainer.appendChild(colorButtonsContainer); // Append the color container to the document body document.body.appendChild(colorContainer); - // Create a container div for both buttons - const buttonsContainer = document.createElement('div'); - buttonsContainer.style.position = 'absolute'; - buttonsContainer.style.display = 'flex'; - buttonsContainer.style.top = '0%'; - if(!isMobile){ - // buttonsContainer.style.position = 'fixed'; - buttonsContainer.style.top = '25%'; - buttonsContainer.style.flexDirection = 'column'; - buttonsContainer.style.marginLeft = '60px'; - } - buttonsContainer.style.left = '20px'; - // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge - document.body.appendChild(buttonsContainer); - // Create the Clear button - const clearButton = document.createElement('button'); - clearButton.innerHTML =''; - // clearButton.style.border = '3px solid blue'; - clearButton.style.color = 'blue'; - clearButton.style.width = 'fit-content'; - clearButton.style.marginRight = '10px'; - if(isMobile){ - clearButton.style.padding = '1px 4px'; - buttonsContainer.style.top = '17%'; - } else { - clearButton.style.padding = '5px 10px'; - } - clearButton.style.fontWeight = 'bold'; - clearButton.style.borderRadius = '20%'; - clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; - clearButton.addEventListener('click', () => { - clearDrawing(); - }); - // Create the Eraser button - const eraserButton = document.createElement('button'); - // eraserButton.textContent = 'Eraser'; - eraserButton.innerHTML = ' '; - eraserButton.style.color = 'blue'; - // eraserButton.style.border = '3px solid blue'; - // eraserButton.style.color = 'white'; - eraserButton.style.width = 'fit-content'; - eraserButton.style.marginRight = '15px'; - // eraserButton.style.marginTop = '0px'; - eraserButton.style.marginBottom = '0px'; - if(isMobile){ - eraserButton.style.padding = '1px 1px'; - } else { - eraserButton.style.padding = '5px 5px'; - eraserButton.style.marginTop = '15px'; - eraserButton.style.marginBottom = '15px'; - } - eraserButton.style.fontWeight = 'bold'; - eraserButton.style.borderRadius = '20%'; - eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; - eraserButton.addEventListener('click', () => { - isErasing = !isErasing; - if (isErasing) { - // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode - eraserButton.style.color = 'red'; - eraserButton.style.border = '3px solid red'; + // Create a container div for both buttons + const buttonsContainer = document.createElement('div'); + buttonsContainer.style.position = 'absolute'; + buttonsContainer.style.display = 'flex'; + buttonsContainer.style.top = '0%'; + if(!isMobile){ + // buttonsContainer.style.position = 'fixed'; + buttonsContainer.style.top = '25%'; + buttonsContainer.style.flexDirection = 'column'; + buttonsContainer.style.marginLeft = '60px'; + } + buttonsContainer.style.left = '20px'; + // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge + document.body.appendChild(buttonsContainer); + // Create the Clear button + const clearButton = document.createElement('button'); + clearButton.innerHTML =''; + // clearButton.style.border = '3px solid blue'; + clearButton.style.color = 'blue'; + clearButton.style.width = 'fit-content'; + clearButton.style.marginRight = '10px'; + if(isMobile){ + clearButton.style.padding = '1px 4px'; + buttonsContainer.style.top = '17%'; } else { - // Return to drawing mode - // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color - eraserButton.style.color = 'blue'; - eraserButton.style.border = 'none'; + clearButton.style.padding = '5px 10px'; + } + clearButton.style.fontWeight = 'bold'; + clearButton.style.borderRadius = '20%'; + clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; + clearButton.addEventListener('click', () => { + clearDrawing(); + }); + // Create the Eraser button + const eraserButton = document.createElement('button'); + // eraserButton.textContent = 'Eraser'; + eraserButton.innerHTML = ' '; + eraserButton.style.color = 'blue'; + // eraserButton.style.border = '3px solid blue'; + // eraserButton.style.color = 'white'; + eraserButton.style.width = 'fit-content'; + eraserButton.style.marginRight = '15px'; + // eraserButton.style.marginTop = '0px'; + eraserButton.style.marginBottom = '0px'; + if(isMobile){ + eraserButton.style.padding = '1px 1px'; + } else { + eraserButton.style.padding = '5px 5px'; + eraserButton.style.marginTop = '15px'; + eraserButton.style.marginBottom = '15px'; } - }); - // Add the Clear and Eraser buttons to the container - buttonsContainer.appendChild(clearButton); - buttonsContainer.appendChild(eraserButton); - - const sliderContainer = document.createElement('div'); - sliderContainer.className = 'slider-container'; - // sliderContainer.style.position = 'absolute'; - // sliderContainer.style.top = '25%'; - sliderContainer.style.left = '100%'; - - // Create the slider - const slider = document.createElement('input'); - slider.type = 'range'; - slider.min = '2'; - slider.max = '80'; - slider.value = brushSize.toString(); - slider.className = 'slider'; - // slider.style.width = `${window.innerWidth / 2}px`; - - slider.addEventListener('input', (event) => { - brushSize = parseInt(event.target.value); - slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`; - }); - - sliderContainer.appendChild(slider); - buttonsContainer.appendChild(sliderContainer); - - this.input.on('pointerdown', () => { - isDrawing = true; - startDrawing(this.input.x, this.input.y); - }); - - this.input.on('pointermove', () => { - if (isDrawing) { - continueDrawing(this.input.x, this.input.y); - } - }); - this.input.on('pointerup', () => { - if (isDrawing) { - finishDrawing(); - } - isDrawing = false; - }); - customCursor = this.add.graphics(); - - // Disable the default cursor - this.input.setDefaultCursor('none'); - const borderThickness = 2; - const borderColor = 0x000000; // Black color (you can customize this) - const borderGraphics = this.add.graphics(); - borderGraphics.lineStyle(borderThickness, borderColor); - borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); - function continueDrawing(x, y) { - // Check if the pointer coordinates are within the drawing zone - if ( - x >= drawingZone.x && - x <= drawingZone.x + drawingZone.width && - y >= drawingZone.y && - y <= drawingZone.y + drawingZone.height - ) { - // The pointer is within the drawing zone, so continue drawing - graphics.lineTo(x, y); - graphics.strokePath(); + eraserButton.style.fontWeight = 'bold'; + eraserButton.style.borderRadius = '20%'; + eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; + eraserButton.addEventListener('click', () => { + isErasing = !isErasing; + if (isErasing) { + // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode + eraserButton.style.color = 'red'; + eraserButton.style.border = '3px solid red'; + } else { + // Return to drawing mode + // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color + eraserButton.style.color = 'blue'; + eraserButton.style.border = 'none'; } + }); + // Add the Clear and Eraser buttons to the container + buttonsContainer.appendChild(clearButton); + buttonsContainer.appendChild(eraserButton); + + const sliderContainer = document.createElement('div'); + sliderContainer.className = 'slider-container'; + // sliderContainer.style.position = 'absolute'; + // sliderContainer.style.top = '25%'; + sliderContainer.style.left = '100%'; + + // Create the slider + const slider = document.createElement('input'); + slider.type = 'range'; + slider.min = '2'; + slider.max = '80'; + slider.value = brushSize.toString(); + slider.className = 'slider'; + + // slider.style.width = `${window.innerWidth / 2}px`; + + slider.addEventListener('input', (event) => { + brushSize = parseInt(event.target.value); + slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`; + slider.style.backgroundColor = '#05b3a4'; + }); + + sliderContainer.appendChild(slider); + buttonsContainer.appendChild(sliderContainer); + + this.input.on('pointerdown', () => { + isDrawing = true; + startDrawing(this.input.x, this.input.y); + }); + + this.input.on('pointermove', () => { + if (isDrawing) { + continueDrawing(this.input.x, this.input.y); + } + }); + this.input.on('pointerup', () => { + if (isDrawing) { + finishDrawing(); + } + isDrawing = false; + }); + customCursor = this.add.graphics(); + + // Disable the default cursor + this.input.setDefaultCursor('none'); + const borderThickness = 2; + const borderColor = 0x000000; // Black color (you can customize this) + const borderGraphics = this.add.graphics(); + borderGraphics.lineStyle(borderThickness, borderColor); + borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); + function continueDrawing(x, y) { + // Check if the pointer coordinates are within the drawing zone + if ( + x >= drawingZone.x && + x <= drawingZone.x + drawingZone.width && + y >= drawingZone.y && + y <= drawingZone.y + drawingZone.height + ) { + // The pointer is within the drawing zone, so continue drawing + graphics.lineTo(x, y); + graphics.strokePath(); + } + }; + } + + function startDrawing(x, y) { + if (!isErasing) { + graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color); + } else { + graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity) + } + graphics.beginPath(); + graphics.moveTo(x, y); + + } + + function continueDrawing(x, y) { + if (!isErasing) { + graphics.lineTo(x, y); // Drawing + } else { + graphics.lineTo(x, y); // Erasing by drawing with a white line + } + graphics.strokePath(); + } + + function finishDrawing() { + // No need for additional actions here + } + + function clearDrawing() { + graphics.clear(); + } + + function update() { + const slider = document.querySelector('input[type="range"]'); + if (slider && !isDrawing) { + const sliderValue = parseInt(slider.value); + const max = parseInt(slider.max); + const width = slider.offsetWidth; + const offsetX = (sliderValue - 2) / (max - 2) * width; + slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; }; - } - - function startDrawing(x, y) { - if (!isErasing) { - graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color); - } else { - graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity) + const cursorSize = brushSize * cursorSizeMultiplier; + customCursor.clear(); // Clear the previous frame + customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) + customCursor.strokeCircle(0, 0, cursorSize); + // Position the cursor at the current mouse pointer coordinates + customCursor.x = this.input.x; + customCursor.y = this.input.y; } - graphics.beginPath(); - graphics.moveTo(x, y); - - } - - function continueDrawing(x, y) { - if (!isErasing) { - graphics.lineTo(x, y); // Drawing - } else { - graphics.lineTo(x, y); // Erasing by drawing with a white line - } - graphics.strokePath(); - } - - function finishDrawing() { - // No need for additional actions here - } - - function clearDrawing() { - graphics.clear(); - } - - function update() { - const slider = document.querySelector('input[type="range"]'); - if (slider && !isDrawing) { - const sliderValue = parseInt(slider.value); - const max = parseInt(slider.max); - const width = slider.offsetWidth; - const offsetX = (sliderValue - 2) / (max - 2) * width; - slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`; - }; - const cursorSize = brushSize * cursorSizeMultiplier; - customCursor.clear(); // Clear the previous frame - customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color) - customCursor.strokeCircle(0, 0, cursorSize); - // Position the cursor at the current mouse pointer coordinates - customCursor.x = this.input.x; - customCursor.y = this.input.y; - }