From 07baa6d8bd2b450630902112a8a8eafecd5a3d78 Mon Sep 17 00:00:00 2001 From: Beau Blyth Date: Wed, 25 Sep 2019 18:59:16 -0700 Subject: [PATCH] Animation Data, Canvas Image limiting --- app/Interfaces/IAnimationData.ts | 11 +++++++ app/Interfaces/IFrame.ts | 6 ++++ app/Interfaces/IFramePinData.ts | 5 +++ app/Interfaces/IPin.ts | 4 +++ app/canvas_handler.ts | 8 +++++ app/file_handler.ts | 39 +++++++++++++++--------- app/frame_handler.ts | 20 ++++++++++-- app/page.ts | 52 ++++++++++++++++++++++++++------ dist/assets/stylesheets/main.css | 5 +++ dist/index.html | 18 ++++++----- 10 files changed, 134 insertions(+), 34 deletions(-) create mode 100644 app/Interfaces/IAnimationData.ts create mode 100644 app/Interfaces/IFrame.ts create mode 100644 app/Interfaces/IFramePinData.ts create mode 100644 app/Interfaces/IPin.ts create mode 100644 app/canvas_handler.ts diff --git a/app/Interfaces/IAnimationData.ts b/app/Interfaces/IAnimationData.ts new file mode 100644 index 0000000..89d9db4 --- /dev/null +++ b/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[]; +} diff --git a/app/Interfaces/IFrame.ts b/app/Interfaces/IFrame.ts new file mode 100644 index 0000000..bab362a --- /dev/null +++ b/app/Interfaces/IFrame.ts @@ -0,0 +1,6 @@ +import { IFramePinData } from './IFramePinData'; + +export interface IFrame { + filename: string; + pinData: IFramePinData[]; +} diff --git a/app/Interfaces/IFramePinData.ts b/app/Interfaces/IFramePinData.ts new file mode 100644 index 0000000..f7366e4 --- /dev/null +++ b/app/Interfaces/IFramePinData.ts @@ -0,0 +1,5 @@ +export interface IFramePinData { + id: number; + x: number; + y: number; +} diff --git a/app/Interfaces/IPin.ts b/app/Interfaces/IPin.ts new file mode 100644 index 0000000..738e64c --- /dev/null +++ b/app/Interfaces/IPin.ts @@ -0,0 +1,4 @@ +export interface IPin { + id: number; + name: string; +} diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts new file mode 100644 index 0000000..29a0004 --- /dev/null +++ b/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; + } +} diff --git a/app/file_handler.ts b/app/file_handler.ts index b96b8dd..35abb25 100644 --- a/app/file_handler.ts +++ b/app/file_handler.ts @@ -1,22 +1,31 @@ export class FileHandler { - public static ProcessImages(fileList: FileList): string[] { - const filenames: string[] = []; + public static ProcessImages = (fileList: FileList): Promise => { + 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]; + for (let i = 0; i < fileList.length; i++) { + const file = fileList[i]; + const filename = await FileHandler.ProcessImage(file); + + filenames.push(filename); + } + + resolve(filenames); + }); + }; + + private static ProcessImage = (file: File): Promise => { + return new Promise((resolve, reject) => { const reader = new FileReader(); - reader.onload = ((theFile) => { - return (e: any) => { - filenames.push(e.target.result); - }; - })(f); + reader.onload = (event: any) => { + resolve(event.target!.result); + }; + + reader.onerror = reject; // Read in the image file as a data URL. - reader.readAsDataURL(f); - } - - return filenames; - } + reader.readAsDataURL(file); + }); + }; } diff --git a/app/frame_handler.ts b/app/frame_handler.ts index dc663d2..c81c45e 100644 --- a/app/frame_handler.ts +++ b/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 = ``; - 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(); + } } } diff --git a/app/page.ts b/app/page.ts index 361bddd..f76bf68 100644 --- a/app/page.ts +++ b/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); }; } diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css index 38ca12a..35e050f 100644 --- a/dist/assets/stylesheets/main.css +++ b/dist/assets/stylesheets/main.css @@ -17,3 +17,8 @@ main { width: 400px; height: 400px; } + +#currentImage img { + max-width: 100%; + height: auto; +} diff --git a/dist/index.html b/dist/index.html index a505daf..1b2694c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -11,17 +11,19 @@
-
-

Hi hihihihihihi

+
+

advance frames with arrow keys

+
+ +
+

+
+ +
+ Current Image
- -
- Current Image -
- -