From 2f9cbdc335e7b77a794e7856eaf57a580aea9d9c Mon Sep 17 00:00:00 2001
From: Beau Blyth <teknopants@gmail.com>
Date: Fri, 27 Sep 2019 18:35:27 -0700
Subject: [PATCH] aspect ratio resizing

---
 app/canvas_handler.ts            | 25 +++++++++++++++++--------
 app/frame_handler.ts             |  3 +--
 app/page.ts                      |  5 +++--
 dist/assets/stylesheets/main.css | 16 +---------------
 dist/index.html                  |  5 ++---
 5 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts
index 218297b..f96d4d5 100644
--- a/app/canvas_handler.ts
+++ b/app/canvas_handler.ts
@@ -3,36 +3,45 @@ import { ICanvasData } from './Interfaces/ICanvasData';
 
 // I display the canvas and am clickable
 export class CanvasHandler {
-	private currentImageDiv: HTMLElement;
 	private canvasImage: HTMLCanvasElement;
 	private imageElement: HTMLImageElement;
 	private animationData: IAnimationData;
 	private canvasData: ICanvasData;
 	private orginInfo: HTMLElement;
 
+	private targetImageSize: number = 256;
+
 	constructor(
 		animationData: IAnimationData,
 		canvasData: ICanvasData,
 		canvasImage: HTMLCanvasElement,
-		currentImageDiv: HTMLElement,
 		imageElement: HTMLImageElement,
 		originInfo: HTMLElement
 	) {
 		this.animationData = animationData;
 		this.canvasData = canvasData;
 		this.canvasImage = canvasImage;
-		this.currentImageDiv = currentImageDiv;
 		this.imageElement = imageElement;
 		this.orginInfo = originInfo;
 
-		//setup canvas
-		this.canvasImage.width = 256;
-		this.canvasImage.height = 256;
+		this.ResizeCanvas();
 		this.UpdateCanvasDataSize();
 		const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
-		canvasContext.fillRect(0, 0, 256, 256);
+		canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
+		canvasContext.imageSmoothingEnabled = false;
 
-		this.currentImageDiv.addEventListener('click', this.mouseDown);
+		this.canvasImage.addEventListener('click', this.mouseDown);
+	}
+
+	public ResizeCanvas() {
+		// get image ratio, then scale default width by it
+		const hwratio = this.imageElement.height / this.imageElement.width;
+		const newWidth = this.targetImageSize / hwratio;
+		const newHeight = this.targetImageSize;
+		console.log('hwratio = ' + hwratio);
+		this.canvasImage.width = newWidth;
+		this.canvasImage.height = newHeight;
+		this.UpdateCanvasDataSize();
 	}
 
 	private UpdateCanvasDataSize() {
diff --git a/app/frame_handler.ts b/app/frame_handler.ts
index a9067d6..031728d 100644
--- a/app/frame_handler.ts
+++ b/app/frame_handler.ts
@@ -33,7 +33,6 @@ export class FrameHandler {
 		this.frameNumberDiv = frameNumberDiv;
 		window.requestAnimationFrame(this.windowAnimationUpdate);
 		this.imageElement = imageElement;
-		this.canvasContext.imageSmoothingEnabled = false;
 	}
 
 	public GetCurrentFrame(): number {
@@ -74,6 +73,7 @@ export class FrameHandler {
 			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
 			this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
+			this.canvasContext.imageSmoothingEnabled = false;
 			this.imageElement.src = this.filenames[this.currentFrame];
 			// draw sprite
 			this.canvasContext.drawImage(
@@ -93,7 +93,6 @@ export class FrameHandler {
 			this.canvasContext.moveTo(originX - originCursorSize, originY);
 			this.canvasContext.lineTo(originX + originCursorSize, originY);
 			this.canvasContext.stroke();
-
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
 				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
diff --git a/app/page.ts b/app/page.ts
index 42bf5f2..ec45f03 100644
--- a/app/page.ts
+++ b/app/page.ts
@@ -58,7 +58,6 @@ export class Page {
 			this.animationData,
 			this.canvasData,
 			canvasElement,
-			document.getElementById('currentImage') as HTMLElement,
 			imageElement,
 			document.getElementById('originInfo') as HTMLElement
 		);
@@ -172,7 +171,9 @@ export class Page {
 		this.frameHandler.GoToFrame(0);
 		this.frameHandler.StopPlayingAnimation();
 		this.frameHandler.TogglePlayingAnimation();
-		console.log(this.animationData);
+
+		this.canvasHandler.ResizeCanvas();
+
 		//set framedata initialized to true
 	};
 
diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css
index 192329b..cc69e40 100644
--- a/dist/assets/stylesheets/main.css
+++ b/dist/assets/stylesheets/main.css
@@ -38,21 +38,7 @@ body {
 	height: 100%;
 }
 
-#imageCanvas {
+#canvasImage {
 	border: 2px solid #6b7578;
-	width: 256;
-	height: 256;
-	-ms-interpolation-mode: nearest-neighbor;
 	image-rendering: pixelated;
 }
-
-#currentImage {
-	border: 2px solid #6b7578;
-	object-position: center top;
-	width: 256;
-	height: 256;
-	min-width: 256;
-	min-height: 256;
-	-ms-interpolation-mode: nearest-neighbor;
-	image-rendering: crisp-edges;
-}
diff --git a/dist/index.html b/dist/index.html
index dd578df..fb37398 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -18,10 +18,9 @@
               <p></p>
           </div>
           <!-- canvas -->
-          <div id="currentImage">
-            <canvas id="canvasImage" alt="No images uploaded"></canvas>
+          <div id="canvasStyle">
+            <canvas id="canvasImage" alt=""></canvas>
           </div>
-
           <div id="settings">
               Name: <input type = "text" id="filename"><br>
               <div id = "originInfo">Click image to set Origin</div>