From a7decafb85ff9dc8bb9dea5a8ef4f0eee0d55c38 Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Tue, 2 May 2023 12:35:33 +0200
Subject: [PATCH] more rotation options

---
 index.html | 73 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index cd18014..e06d71c 100644
--- a/index.html
+++ b/index.html
@@ -355,10 +355,14 @@
           </div>
 
           <div class="table-row">
-            <div class="table-cell"><label for="invertColors">Rotate image:</label></div>
+            <div class="table-cell"><label for="rotation">Rotate image:</label></div>
             <div class="table-cell">
-              <input id="rotate180" type="checkbox" onchange="updateBoolean('rotate180')" />
-              <label for="rotate180">rotate 180 degrees</label>
+              <select id="rotation" name="rotation" onchange="updateInteger('rotation')">
+                <option value="0">0</option>
+                <option value="90">90</option>
+                <option value="180">180</option>
+                <option value="270">270</option>
+              </select> degrees
             </div>
           </div>
 
@@ -757,7 +761,7 @@
       ditheringMode: 0,
       outputFormat: "plain",
       invertColors: false,
-      rotate180: false,
+      rotation: 0,
       conversionFunction: ConversionFunctions.horizontal1bit
     };
 
@@ -770,7 +774,7 @@
 
     // Easy way to update settings controlled by a textfield
     function updateInteger(fieldName){
-      settings[fieldName] = document.getElementById(fieldName).value;
+      settings[fieldName] = parseInt(document.getElementById(fieldName).value);
       update();
     }
 
@@ -864,6 +868,7 @@
       var canvas = image.canvas;
       var ctx = canvas.getContext("2d");
       image.ctx = ctx;
+      ctx.save();
 
       // Invert background if needed
       if (settings["backgroundColor"] == "transparent") {
@@ -879,15 +884,47 @@
       }
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-      ctx.setTransform(1, 0, 0, 1, 0, 0); // start with identity matrix transform (no rotation).
-      if(settings["rotate180"]){
+      const flipHorizontal = settings["flipHorizontally"] ? -1 : 1;
+      const flipVertical = settings["flipVertically"] ? -1 : 1;
+
+      if (settings['rotation'] == 0) {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const xTranslate = settings["flipHorizontally"] ? canvas.width : 0;
+        const yTranslate = settings["flipVertically"] ? canvas.height : 0;
+        ctx.setTransform(flipHorizontal, 0, 0, flipVertical, xTranslate, yTranslate);
+
+      } else if (settings['rotation'] == 90) {
+        canvas.width = img.height;
+        canvas.height = img.width;
+        const xTranslate = settings["flipHorizontally"] ? canvas.width : 0;
+        const yTranslate = settings["flipVertically"] ? canvas.height : 0;
+        ctx.setTransform(flipHorizontal, 0, 0, flipVertical, xTranslate, yTranslate);
+        // ctx = canvas.getContext("2d");
+        ctx.translate(canvas.width, 0);
+        ctx.rotate(Math.PI/2);
+        // ctx.translate(-canvas.width/2, 0);
+
+      } else if (settings['rotation'] == 180) {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const xTranslate = settings["flipHorizontally"] ? canvas.width : 0;
+        const yTranslate = settings["flipVertically"] ? canvas.height : 0;
+        ctx.setTransform(flipHorizontal, 0, 0, flipVertical, xTranslate, yTranslate);
         // Matrix transformation
         ctx.translate(canvas.width/2.0, canvas.height/2.0);
         ctx.rotate(Math.PI);
         ctx.translate(-canvas.width/2.0, -canvas.height/2.0);
+
+      } else if (settings['rotation'] == 270) {
+        canvas.width = img.height;
+        canvas.height = img.width;
+        const xTranslate = settings["flipHorizontally"] ? canvas.width : 0;
+        const yTranslate = settings["flipVertically"] ? canvas.height : 0;
+        ctx.setTransform(flipHorizontal, 0, 0, flipVertical, xTranslate, yTranslate);
+        ctx.translate(0, canvas.height);
+        ctx.rotate(-Math.PI*0.5);
       }
-
-
       // Offset used for centering the image when requested
       var offset_x = 0;
       var offset_y = 0;
@@ -926,6 +963,8 @@
             offset_x, offset_y, img.width, canvas.height);
         break;
       }
+      ctx.restore();
+
       // Make sure the image is black and white
       if(settings.conversionFunction == ConversionFunctions.horizontal1bit
         || settings.conversionFunction == ConversionFunctions.vertical1bit) {
@@ -934,20 +973,6 @@
           invert(canvas, ctx);
         }
       }
-
-      // Flip image if needed
-      if (settings["flipHorizontally"]) {
-        ctx.save();
-        ctx.scale(-1, 1);
-        ctx.drawImage(canvas, -canvas.width, 0);
-        ctx.restore();
-      }
-      if (settings["flipVertically"]) {
-        ctx.save();
-        ctx.scale(1, -1);
-        ctx.drawImage(canvas, 0, -canvas.height);
-        ctx.restore();
-      }
     }
 
     // Handle inserting an image by pasting code
@@ -985,7 +1010,6 @@
       input = input.replace(/0[xX]/g, "");
       // Split into list
       var list = input.split(",");
-      console.log(list);
 
       if(drawMode == "horizontal"){
         listToImageHorizontal(list, canvas);
@@ -1182,7 +1206,6 @@
             var variableCount = images.length() > 1 ? count++ : "";
             var comment = "// '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n";
             bytesUsed += code.split("\n").length * 16; // 16 bytes per line.
-            console.log(image);
 
             let varname = getIdentifier() + image.glyph.replace(/[^a-zA-Z0-9]/g,"_");
             varQuickArray.push(varname);