Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixknob flex-wrap glitching issues

Browse source
This commit is contained in:
lolabird 2023-11-12 10:03:16 -07:00
commit cb83a95351
1 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
script.js
View file

@ -35,6 +35,7 @@ colorPicker.addEventListener("input", changeColor);
colorPicker.addEventListener("change", changeColor); colorPicker.addEventListener("change", changeColor);
backColorPicker.addEventListener("input", pickBackground); backColorPicker.addEventListener("input", pickBackground);
reset.addEventListener("click", resetGrid); reset.addEventListener("click", resetGrid);
gridSlider.addEventListener("input", getGridDimensions); gridSlider.addEventListener("input", getGridDimensions);
gridSlider.addEventListener("change", getGridDimensions); gridSlider.addEventListener("change", getGridDimensions);
rangeKnob.addEventListener("mousedown", (e) => { rangeKnob.addEventListener("mousedown", (e) => {
@ -60,16 +61,17 @@ function resetGrid() {
function rotateKnob(e) { function rotateKnob(e) {
const knobBounds = rangeKnob.getBoundingClientRect(); const knobBounds = rangeKnob.getBoundingClientRect();
const knobCenter = { const knobCenter = {
x: knobBounds.left + knobBounds.width/2, x: knobBounds.left + knobBounds.width / 2,
y: knobBounds.top + knobBounds.height/2 y: knobBounds.top + knobBounds.height / 2
}; };
let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI); let angle = Math.atan2(e.clientX - knobCenter.x, -(e.clientY - knobCenter.y)) * (180 / Math.PI);
rangeKnob.style.transform = `rotate(${angle}deg)`; rangeKnob.style.transform = `rotate(${angle}deg)`;
updateGridSlider(angle); updateGridSlider(angle);
} }
function updateGridSlider(angle) { function updateGridSlider(angle) {
const maxRotation = 360; const maxRotation = 360;
const minSliderVal = gridSlider.min; const minSliderVal = gridSlider.min;