canvas

app/frame_handler.ts

@@ -8,14 +8,26 @@ export class FrameHandler {
 
 	private filenames: string[] = [];
 	private currentFrame: number = 0;
-	private currentImageDiv: HTMLElement;
 	private playingAnimation: boolean;
 
-	constructor(animationData: IAnimationData, currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
+	private canvasImage: HTMLCanvasElement;
+	private canvasContext: CanvasRenderingContext2D;
+
+	private imageElement: HTMLImageElement;
+
+	constructor(
+		animationData: IAnimationData,
+		canvasImage: HTMLCanvasElement,
+		canvasContext: CanvasRenderingContext2D,
+		frameNumberDiv: HTMLElement
+	) {
 		this.animationData = animationData;
-		this.currentImageDiv = currentImageDiv;
+		this.canvasImage = canvasImage;
+		this.canvasContext = canvasContext;
 		this.frameNumberDiv = frameNumberDiv;
 		window.requestAnimationFrame(this.windowAnimationUpdate);
+		this.imageElement = new Image();
+		this.canvasContext.imageSmoothingEnabled = false;
 	}
 
 	public GetCurrentFrame(): number {
@@ -25,7 +37,7 @@ export class FrameHandler {
 	public loadFrames(filenames: string[]) {
 		this.filenames = filenames;
 		this.currentFrame = 0;
-		this.SetCurrentImageDiv();
+		this.RefreshImage();
 	}
 
 	public AdvanceFrames(amount: number) {
@@ -39,7 +51,7 @@ export class FrameHandler {
 
 	public GoToFrame(frame: number) {
 		this.currentFrame = frame;
-		this.SetCurrentImageDiv();
+		this.RefreshImage();
 	}
 
 	public TogglePlayingAnimation() {
@@ -50,12 +62,14 @@ export class FrameHandler {
 		this.playingAnimation = false;
 	}
 
-	private SetCurrentImageDiv() {
+	private RefreshImage() {
-		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
 		if (this.filenames.length === 0) {
 			this.frameNumberDiv.className = 'warning';
 			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
+			this.canvasContext.clearRect(0, 0, this.canvasImage.width, this.canvasImage.height);
+			this.imageElement.src = this.filenames[this.currentFrame];
+			this.canvasContext.drawImage(this.imageElement, 0, 0, this.canvasImage.width, this.canvasImage.height);
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
 				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();

app/page.ts

@@ -17,6 +17,10 @@ export class Page {
 	private canvasHandler: CanvasHandler;
 	private animationData: IAnimationData;
 	private frameRateInput: HTMLInputElement;
+	private loopingInput: HTMLInputElement;
+
+	private canvasImage: HTMLCanvasElement;
+	private canvasContext: CanvasRenderingContext2DSettings;
 
 	public Load() {
 		// defining blank slate animation data
@@ -34,17 +38,30 @@ export class Page {
 			]
 		};
 
+		// setup canvas
+		this.canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement;
+		this.canvasImage.width = 256;
+		this.canvasImage.height = 256;
+
+		const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
+		canvasContext.fillRect(0, 0, 256, 256);
+
 		this.canvasHandler = new CanvasHandler(document.getElementById('currentImage') as HTMLElement);
 		// this.canvasHandler.currentImageDiv.addEventListener('onmousedown', ClickOnCanvas);
 
 		this.frameHandler = new FrameHandler(
 			this.animationData,
-			document.getElementById('currentImage') as HTMLElement,
+			this.canvasImage,
+			canvasContext,
 			document.getElementById('frameNumber') as HTMLElement
 		);
 
+		//input elements
 		this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
 		this.frameRateInput.addEventListener('change', this.updateFrameRate);
+		this.frameRateInput.value = this.animationData.frameRate.toString();
+		this.loopingInput = document.getElementById('looping') as HTMLInputElement;
+		this.loopingInput.addEventListener('change', this.updateLooping);
 
 		const dropZone = document.getElementById('dropZone') as HTMLElement;
 
@@ -132,6 +149,9 @@ export class Page {
 		}
 
 		this.animationData.frames = newFrames;
+		this.frameHandler.GoToFrame(0);
+		this.frameHandler.StopPlayingAnimation();
+		this.frameHandler.TogglePlayingAnimation();
 		console.log(this.animationData);
 	};
 
@@ -152,4 +172,9 @@ export class Page {
 		this.animationData.frameRate = this.frameRateInput.valueAsNumber;
 		console.log('new frame rate = ' + this.animationData.frameRate);
 	};
+
+	private updateLooping = () => {
+		this.animationData.loop = this.loopingInput.checked;
+		console.log('new looping value = ' + this.loopingInput.checked);
+	};
 }

dist/assets/stylesheets/main.css

@@ -38,14 +38,16 @@ body {
 	height: 100%;
 }
 
-#currentImage {
+#imageCanvas {
+	border: 2px solid #6b7578;
 	width: 256;
 	height: 256;
 	-ms-interpolation-mode: nearest-neighbor;
 	image-rendering: pixelated;
 }
 
-#currentImage img {
+#currentImage {
+	border: 2px solid #6b7578;
 	object-position: center top;
 	width: 256;
 	height: 256;

dist/index.html

@@ -19,14 +19,14 @@
           </div>
           <!-- canvas -->
           <div id="currentImage">
-            <img alt="No images uploaded">
+            <canvas id="canvasImage" alt="No images uploaded"></canvas>
           </div>
 
           <div id="settings">
               Origin X: <input type="number" name="originX" value="0" class="numberinput">
               Y: <input type="number" name="originY" value="0" class="numberinput"><br>
-              Fps: <input type="number" id="framerate" value="60" class="numberinput"><br>
+              Fps: <input type="number" id="framerate" class="numberinput"><br>
-              <input type="checkbox" name="looping" > Looping <br>
+              <input type="checkbox" id="looping" > Looping <br>
               <button id="saveButton" type="button">export .anim with (S)</button>
           </div>