Add rotation slider

Dor-sketch · Jun 28, 2024 · 3018724 · 3018724
1 parent 007371e
commit 3018724
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -117,6 +117,7 @@
     <footer>
         <div class="cropping-actions" id="cropping-actions" style="display: none;">
             <button id="cancelCrop">Close</button>
+            <input type="range" id="rotationSlider" min="0" max="360" value="0">
             <button id="confirmCrop">Confirm Crop</button>
         </div>
         <input id="input-board" type="text" placeholder="Enter board as one line...">

diff --git a/docs/js/parser.js b/docs/js/parser.js
@@ -80,7 +80,16 @@ function initiateCropping(file) {
         reader.readAsDataURL(file);
     });
 }
+const rotationSlider = document.getElementById('rotationSlider');
 
+// Listen for slider changes
+rotationSlider.addEventListener('input', function () {
+    // Get the selected angle from the slider
+    const selectedAngle = parseInt(this.value, 10);
+
+    // Rotate the image to the selected angle
+    cropper.rotateTo(selectedAngle);
+});
 
 function updateGridLines() {
     const cropBox = document.querySelector('#parser > div.cropper-container.cropper-bg > div.cropper-crop-box > span.cropper-face.cropper-move');