AnimationTool/app/page.ts

205 lines
5.2 KiB
TypeScript
Raw Normal View History

2019-09-26 01:59:16 +00:00
import { CanvasHandler } from './canvas_handler';
2019-09-25 03:16:07 +00:00
import { FileHandler } from './file_handler';
import { FrameHandler } from './frame_handler';
2019-09-26 01:59:16 +00:00
import { IAnimationData } from './Interfaces/IAnimationData';
2019-09-27 23:45:52 +00:00
import { ICanvasData } from './Interfaces/ICanvasData';
2019-09-26 01:59:16 +00:00
import { IFrame } from './Interfaces/IFrame';
2019-09-25 03:16:07 +00:00
2019-09-25 00:01:54 +00:00
export class Page {
2019-09-25 03:16:07 +00:00
private static handleDragOver(evt: DragEvent) {
if (evt !== null) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer!.dropEffect = 'copy'; // Explicitly show this is a copy.
}
}
2019-09-26 01:59:16 +00:00
private frameHandler: FrameHandler;
private canvasHandler: CanvasHandler;
private animationData: IAnimationData;
2019-09-27 01:07:41 +00:00
private frameRateInput: HTMLInputElement;
2019-09-27 02:02:46 +00:00
private loopingInput: HTMLInputElement;
private canvasImage: HTMLCanvasElement;
private canvasContext: CanvasRenderingContext2DSettings;
2019-09-25 03:16:07 +00:00
2019-09-27 23:45:52 +00:00
private canvasData: ICanvasData;
2019-09-28 00:04:01 +00:00
private filenameInput: HTMLInputElement;
2019-09-27 23:45:52 +00:00
2019-09-25 00:01:54 +00:00
public Load() {
2019-09-26 01:59:16 +00:00
// defining blank slate animation data
this.animationData = {
pins: [],
originX: 0,
originY: 0,
frameRate: 30,
loop: true,
frames: [
{
filename: '',
pinData: []
}
]
};
2019-09-27 23:45:52 +00:00
//blank slate canvas data
this.canvasData = {
width: 0,
height: 0,
widthRatio: 0,
heightRatio: 0
};
2019-09-26 01:59:16 +00:00
2019-09-27 23:45:52 +00:00
const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
2019-09-27 02:02:46 +00:00
2019-09-27 23:45:52 +00:00
const imageElement = new Image();
2019-09-27 02:02:46 +00:00
2019-09-27 23:45:52 +00:00
// setup canvas
this.canvasHandler = new CanvasHandler(
this.animationData,
this.canvasData,
canvasElement,
imageElement,
document.getElementById('originInfo') as HTMLElement
);
2019-09-26 01:59:16 +00:00
2019-09-27 23:45:52 +00:00
// setup frame handler
2019-09-26 01:59:16 +00:00
this.frameHandler = new FrameHandler(
2019-09-27 00:45:28 +00:00
this.animationData,
2019-09-27 23:45:52 +00:00
this.canvasData,
canvasElement,
canvasElement.getContext('2d')!,
document.getElementById('frameNumber') as HTMLElement,
imageElement
2019-09-26 01:59:16 +00:00
);
2019-09-25 03:16:07 +00:00
2019-09-27 23:45:52 +00:00
// input elements
2019-09-27 01:07:41 +00:00
this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
this.frameRateInput.addEventListener('change', this.updateFrameRate);
2019-09-27 02:02:46 +00:00
this.frameRateInput.value = this.animationData.frameRate.toString();
this.loopingInput = document.getElementById('looping') as HTMLInputElement;
this.loopingInput.addEventListener('change', this.updateLooping);
2019-09-28 00:04:01 +00:00
this.filenameInput = document.getElementById('filename') as HTMLInputElement;
2019-09-27 01:07:41 +00:00
2019-09-25 03:16:07 +00:00
const dropZone = document.getElementById('dropZone') as HTMLElement;
dropZone.addEventListener('dragover', Page.handleDragOver, false);
dropZone.addEventListener('drop', this.handleFileSelect, false);
2019-09-25 00:42:35 +00:00
2019-09-25 03:16:07 +00:00
const keyDown = (event: KeyboardEvent) => {
switch (event.keyCode) {
2019-09-27 00:45:28 +00:00
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;
}
2019-09-26 23:28:35 +00:00
case 39:
case 190: {
// right_arrow, carrot
2019-09-25 03:16:07 +00:00
console.log('next frame action');
2019-09-26 01:59:16 +00:00
this.frameHandler.AdvanceFrames(1);
2019-09-27 00:45:28 +00:00
this.frameHandler.StopPlayingAnimation();
2019-09-25 03:16:07 +00:00
break;
}
2019-09-26 23:28:35 +00:00
case 37:
case 188: {
// left arrow, carrot
2019-09-25 03:16:07 +00:00
console.log('previous frame action');
2019-09-26 01:59:16 +00:00
this.frameHandler.AdvanceFrames(-1);
2019-09-27 00:45:28 +00:00
this.frameHandler.StopPlayingAnimation();
2019-09-25 03:16:07 +00:00
break;
}
2019-09-26 23:28:35 +00:00
case 40: {
// down arrow
this.frameHandler.GoToFrame(0);
2019-09-27 00:45:28 +00:00
this.frameHandler.StopPlayingAnimation();
break;
2019-09-26 23:28:35 +00:00
}
case 32: {
// spacebar
this.frameHandler.TogglePlayingAnimation();
2019-09-27 00:45:28 +00:00
break;
}
case 83: {
// s
2019-09-28 00:04:01 +00:00
if (document.activeElement !== this.filenameInput) {
this.download(this.filenameInput.value + '.anim', JSON.stringify(this.animationData));
}
2019-09-27 00:45:28 +00:00
break;
2019-09-26 23:28:35 +00:00
}
2019-09-25 03:16:07 +00:00
}
2019-09-25 00:42:35 +00:00
};
2019-09-25 03:16:07 +00:00
document.addEventListener('keydown', keyDown);
2019-09-25 00:01:54 +00:00
}
2019-09-25 03:16:07 +00:00
2019-09-26 01:59:16 +00:00
private handleFileSelect = async (event: DragEvent) => {
2019-09-25 03:16:07 +00:00
event.stopPropagation();
event.preventDefault();
2019-09-26 01:59:16 +00:00
const filenames = await FileHandler.ProcessImages(event.dataTransfer!.files);
this.frameHandler.loadFrames(filenames);
const newFrames: IFrame[] = [];
for (let i = 0; i < event.dataTransfer!.files.length; i++) {
newFrames.push({
filename: event.dataTransfer!.files[i].name,
pinData: []
});
}
2019-09-25 03:16:07 +00:00
2019-09-26 01:59:16 +00:00
this.animationData.frames = newFrames;
2019-09-27 02:02:46 +00:00
this.frameHandler.GoToFrame(0);
this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation();
2019-09-28 01:35:27 +00:00
this.canvasHandler.ResizeCanvas();
2019-09-27 23:45:52 +00:00
//set framedata initialized to true
2019-09-25 03:16:07 +00:00
};
2019-09-27 00:45:28 +00:00
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);
}
2019-09-27 01:07:41 +00:00
private updateFrameRate = () => {
this.animationData.frameRate = this.frameRateInput.valueAsNumber;
2019-09-27 23:45:52 +00:00
this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation();
2019-09-27 01:07:41 +00:00
console.log('new frame rate = ' + this.animationData.frameRate);
};
2019-09-27 02:02:46 +00:00
private updateLooping = () => {
this.animationData.loop = this.loopingInput.checked;
console.log('new looping value = ' + this.loopingInput.checked);
};
2019-09-25 00:01:54 +00:00
}