Animation Data, Canvas Image limiting

app/Interfaces/IAnimationData.ts

@@ -0,0 +1,11 @@
+import { IFrame } from './IFrame';
+import { IPin } from './IPin';
+
+export interface IAnimationData {
+	frameRate: number;
+	originX: number;
+	originY: number;
+	loop: boolean;
+	frames: IFrame[];
+	pins: IPin[];
+}

app/Interfaces/IFrame.ts

@@ -0,0 +1,6 @@
+import { IFramePinData } from './IFramePinData';
+
+export interface IFrame {
+	filename: string;
+	pinData: IFramePinData[];
+}

app/Interfaces/IFramePinData.ts

@@ -0,0 +1,5 @@
+export interface IFramePinData {
+	id: number;
+	x: number;
+	y: number;
+}

app/Interfaces/IPin.ts

@@ -0,0 +1,4 @@
+export interface IPin {
+	id: number;
+	name: string;
+}

app/canvas_handler.ts

@@ -0,0 +1,8 @@
+//I display the canvas and am clickable
+export class CanvasHandler {
+	private currentImageDiv: HTMLElement;
+
+	constructor(currentImageDiv: HTMLElement) {
+		this.currentImageDiv = currentImageDiv;
+	}
+}

app/file_handler.ts

@@ -1,22 +1,31 @@
 export class FileHandler {
-	public static ProcessImages(fileList: FileList): string[] {
+	public static ProcessImages = (fileList: FileList): Promise<string[]> => {
+		return new Promise(async (resolve, reject) => {
 			const filenames: string[] = [];
 
-		// files is a FileList of File objects. List some properties.
 			for (let i = 0; i < fileList.length; i++) {
-			const f = fileList[i];
+				const file = fileList[i];
+				const filename = await FileHandler.ProcessImage(file);
+
+				filenames.push(filename);
+			}
+
+			resolve(filenames);
+		});
+	};
+
+	private static ProcessImage = (file: File): Promise<string> => {
+		return new Promise((resolve, reject) => {
 			const reader = new FileReader();
 
-			reader.onload = ((theFile) => {
-				return (e: any) => {
-					filenames.push(e.target.result);
+			reader.onload = (event: any) => {
+				resolve(event.target!.result);
 			};
-			})(f);
+
+			reader.onerror = reject;
 
 			// Read in the image file as a data URL.
-			reader.readAsDataURL(f);
-		}
-
-		return filenames;
-	}
+			reader.readAsDataURL(file);
+		});
+	};
 }

app/frame_handler.ts

@@ -1,15 +1,23 @@
 export class FrameHandler {
+	private frameNumberDiv: HTMLElement;
+
 	private filenames: string[] = [];
 	private currentFrame: number = 0;
 	private currentImageDiv: HTMLElement;
 
-	constructor(currentImageDiv: HTMLElement) {
+	constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
 		this.currentImageDiv = currentImageDiv;
+		this.frameNumberDiv = frameNumberDiv;
+	}
+
+	public GetCurrentFrame(): number {
+		return this.currentFrame;
 	}
 
 	public loadFrames(filenames: string[]) {
 		this.filenames = filenames;
 		this.currentFrame = 0;
+		this.SetCurrentImageDiv();
 	}
 
 	public AdvanceFrames(amount: number) {
@@ -23,7 +31,15 @@ export class FrameHandler {
 
 	public GoToFrame(frame: number) {
 		this.currentFrame = frame;
+		this.SetCurrentImageDiv();
+	}
+
+	private SetCurrentImageDiv() {
 		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
-		console.log('current frame = ', this.currentFrame);
+		if (this.filenames.length === 0) {
+			this.frameNumberDiv.innerText = 'No images uploaded yet. Drag images onto the page to upload them';
+		} else {
+			this.frameNumberDiv.innerText = 'Current Frame: ' + this.currentFrame.toString();
+		}
 	}
 }

app/page.ts

@@ -1,5 +1,8 @@
+import { CanvasHandler } from './canvas_handler';
 import { FileHandler } from './file_handler';
 import { FrameHandler } from './frame_handler';
+import { IAnimationData } from './Interfaces/IAnimationData';
+import { IFrame } from './Interfaces/IFrame';
 
 export class Page {
 	private static handleDragOver(evt: DragEvent) {
@@ -10,14 +13,34 @@ export class Page {
 		}
 	}
 
-	private filenames: string[] = [];
+	private frameHandler: FrameHandler;
+	private canvasHandler: CanvasHandler;
+	private animationData: IAnimationData;
 
 	public Load() {
-		// const fileHandler = new FileHandler('dropZone', 'output', this.filenames);
-		const frameHandler = new FrameHandler(document.getElementById('currentImage') as HTMLElement);
+		// defining blank slate animation data
+		this.animationData = {
+			pins: [],
+			originX: 0,
+			originY: 0,
+			frameRate: 30,
+			loop: true,
+			frames: [
+				{
+					filename: '',
+					pinData: []
+				}
+			]
+		};
+
+		this.canvasHandler = new CanvasHandler(document.getElementById('currentImage') as HTMLElement);
+
+		this.frameHandler = new FrameHandler(
+			document.getElementById('currentImage') as HTMLElement,
+			document.getElementById('frameNumber') as HTMLElement
+		);
 
 		const dropZone = document.getElementById('dropZone') as HTMLElement;
-		const output = document.getElementById('output') as HTMLElement;
 
 		dropZone.addEventListener('dragover', Page.handleDragOver, false);
 		dropZone.addEventListener('drop', this.handleFileSelect, false);
@@ -27,14 +50,14 @@ export class Page {
 				case 39: {
 					// right_arrow
 					console.log('next frame action');
-					frameHandler.AdvanceFrames(1);
+					this.frameHandler.AdvanceFrames(1);
 					break;
 				}
 
 				case 37: {
 					// left arrow
 					console.log('previous frame action');
-					frameHandler.AdvanceFrames(-1);
+					this.frameHandler.AdvanceFrames(-1);
 					break;
 				}
 			}
@@ -43,12 +66,23 @@ export class Page {
 		document.addEventListener('keydown', keyDown);
 	}
 
-	private handleFileSelect = (event: any) => {
+	private handleFileSelect = async (event: DragEvent) => {
 		event.stopPropagation();
 		event.preventDefault();
 
-		FileHandler.ProcessImages(event.target.result);
+		const filenames = await FileHandler.ProcessImages(event.dataTransfer!.files);
+		this.frameHandler.loadFrames(filenames);
 
-		console.log('files: ' + this.filenames.length);
+		const newFrames: IFrame[] = [];
+
+		for (let i = 0; i < event.dataTransfer!.files.length; i++) {
+			newFrames.push({
+				filename: event.dataTransfer!.files[i].name,
+				pinData: []
+			});
+		}
+
+		this.animationData.frames = newFrames;
+		console.log(this.animationData);
 	};
 }

dist/assets/stylesheets/main.css

@@ -17,3 +17,8 @@ main {
 	width: 400px;
 	height: 400px;
 }
+
+#currentImage img {
+	max-width: 100%;
+	height: auto;
+}

dist/index.html

@@ -11,16 +11,18 @@
         <div id="dropZone">
           <div id="output"></div>
 
-          <div id="thing" class="sub">
-              <p>Hi hihihihihihi</p>
-          </div>
+          <div id="instructions" class="sub">
+            <p>advance frames with arrow keys</p>
           </div>
 
+          <div id="frameNumber" class="sub">
+              <p></p>
+          </div>
           <!-- canvas -->
           <div id="currentImage">
             <img alt="Current Image">
           </div>
-
+        </div>
 
         <script src="bundle.js"></script>
 	</body>