animation and frame controls

app/canvas_handler.ts

@@ -1,4 +1,4 @@
-//I display the canvas and am clickable
+// I display the canvas and am clickable
 export class CanvasHandler {
 	private currentImageDiv: HTMLElement;
 

app/frame_handler.ts

@@ -1,21 +1,21 @@
+import { IAnimationData } from './Interfaces/IAnimationData';
+
 export class FrameHandler {
+	private start: number = 0;
+
 	private frameNumberDiv: HTMLElement;
+	private animationData: IAnimationData;
 
 	private filenames: string[] = [];
 	private currentFrame: number = 0;
 	private currentImageDiv: HTMLElement;
 	private playingAnimation: boolean;
 
-	constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
+	constructor(animationData: IAnimationData, currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
+		this.animationData = animationData;
 		this.currentImageDiv = currentImageDiv;
 		this.frameNumberDiv = frameNumberDiv;
-		setTimeout(this.Update, 1000 / 60);
-	}
-
-	public Update() {
-		console.log('updating');
-		AdvanceFrames(1);
-		setTimeout(this.Update, 1000 / 60);
+		window.requestAnimationFrame(this.windowAnimationUpdate);
 	}
 
 	public GetCurrentFrame(): number {
@@ -42,6 +42,14 @@ export class FrameHandler {
 		this.SetCurrentImageDiv();
 	}
 
+	public TogglePlayingAnimation() {
+		this.playingAnimation = !this.playingAnimation;
+		console.log('playingAnimation = ', this.playingAnimation);
+	}
+	public StopPlayingAnimation() {
+		this.playingAnimation = false;
+	}
+
 	private SetCurrentImageDiv() {
 		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
 		if (this.filenames.length === 0) {
@@ -50,12 +58,20 @@ export class FrameHandler {
 		} else {
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
-				'Frame  ' + this.currentFrame.toString() + ' / ' + (this.filenames.length - 1).toString();
+				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
 		}
 	}
 
-	public TogglePlayingAnimation() {
-		this.playingAnimation = !this.playingAnimation;
-		console.log('playingAnimation = ', this.playingAnimation);
+	private windowAnimationUpdate = (timestamp: number) => {
+		if (this.start === 0) {
+			this.start = timestamp;
 		}
+		const progress = timestamp - this.start;
+		if (this.playingAnimation && progress > 1000 / this.animationData.frameRate) {
+			this.AdvanceFrames(1);
+			this.start = 0;
+		}
+		window.requestAnimationFrame(this.windowAnimationUpdate);
+		console.log('timestamp = ' + timestamp);
+	};
 }

app/page.ts

@@ -37,6 +37,7 @@ export class Page {
 		// this.canvasHandler.currentImageDiv.addEventListener('onmousedown', ClickOnCanvas);
 
 		this.frameHandler = new FrameHandler(
+			this.animationData,
 			document.getElementById('currentImage') as HTMLElement,
 			document.getElementById('frameNumber') as HTMLElement
 		);
@@ -48,11 +49,32 @@ export class Page {
 
 		const keyDown = (event: KeyboardEvent) => {
 			switch (event.keyCode) {
+				case 48:
+				case 49:
+				case 50:
+				case 51:
+				case 52:
+				case 53:
+				case 54:
+				case 55:
+				case 56:
+				case 57: {
+					// goto frame w 1234567890
+					if (event.keyCode === 48) {
+						this.frameHandler.GoToFrame(9);
+					} else {
+						this.frameHandler.GoToFrame(event.keyCode - 49);
+					}
+					this.frameHandler.StopPlayingAnimation();
+					break;
+				}
+
 				case 39:
 				case 190: {
 					// right_arrow, carrot
 					console.log('next frame action');
 					this.frameHandler.AdvanceFrames(1);
+					this.frameHandler.StopPlayingAnimation();
 					break;
 				}
 
@@ -61,17 +83,27 @@ export class Page {
 					// left arrow, carrot
 					console.log('previous frame action');
 					this.frameHandler.AdvanceFrames(-1);
+					this.frameHandler.StopPlayingAnimation();
 					break;
 				}
 
 				case 40: {
 					// down arrow
 					this.frameHandler.GoToFrame(0);
+					this.frameHandler.StopPlayingAnimation();
+					break;
 				}
 
 				case 32: {
 					// spacebar
 					this.frameHandler.TogglePlayingAnimation();
+					break;
+				}
+
+				case 83: {
+					// s
+					this.download('.anim', String(this.animationData));
+					break;
 				}
 			}
 		};
@@ -98,4 +130,17 @@ export class Page {
 		this.animationData.frames = newFrames;
 		console.log(this.animationData);
 	};
+
+	private download(filename: string, text: string) {
+		var element = document.createElement('a');
+		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+		element.setAttribute('download', filename);
+
+		element.style.display = 'none';
+		document.body.appendChild(element);
+
+		element.click();
+
+		document.body.removeChild(element);
+	}
 }

dist/index.html

@@ -24,10 +24,10 @@
 
           <div id="settings">
               Origin X: <input type="text" name="originX" value="0" size="2">
-              Y: <input type="text" name="originX" value="0" size="2"><br>
-              Fps: <input type="text" name="FirstName" value="60"><br>
+              Y: <input type="text" name="originY" value="0" size="2"><br>
+              Fps: <input type="text" name="framerate" value="60"><br>
               <input type="checkbox" name="looping" > Looping <br>
-              <button type="button" onclick="alert('saved')">export .anim</button>
+              <button id="saveButton" type="button">export .anim with (S)</button>
           </div>
           
         </div>