102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
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) {
|
|
if (evt !== null) {
|
|
evt.stopPropagation();
|
|
evt.preventDefault();
|
|
evt.dataTransfer!.dropEffect = 'copy'; // Explicitly show this is a copy.
|
|
}
|
|
}
|
|
|
|
private frameHandler: FrameHandler;
|
|
private canvasHandler: CanvasHandler;
|
|
private animationData: IAnimationData;
|
|
|
|
public Load() {
|
|
// 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.canvasHandler.currentImageDiv.addEventListener('onmousedown', ClickOnCanvas);
|
|
|
|
this.frameHandler = new FrameHandler(
|
|
document.getElementById('currentImage') as HTMLElement,
|
|
document.getElementById('frameNumber') as HTMLElement
|
|
);
|
|
|
|
const dropZone = document.getElementById('dropZone') as HTMLElement;
|
|
|
|
dropZone.addEventListener('dragover', Page.handleDragOver, false);
|
|
dropZone.addEventListener('drop', this.handleFileSelect, false);
|
|
|
|
const keyDown = (event: KeyboardEvent) => {
|
|
switch (event.keyCode) {
|
|
case 39:
|
|
case 190: {
|
|
// right_arrow, carrot
|
|
console.log('next frame action');
|
|
this.frameHandler.AdvanceFrames(1);
|
|
break;
|
|
}
|
|
|
|
case 37:
|
|
case 188: {
|
|
// left arrow, carrot
|
|
console.log('previous frame action');
|
|
this.frameHandler.AdvanceFrames(-1);
|
|
break;
|
|
}
|
|
|
|
case 40: {
|
|
// down arrow
|
|
this.frameHandler.GoToFrame(0);
|
|
}
|
|
|
|
case 32: {
|
|
// spacebar
|
|
this.frameHandler.TogglePlayingAnimation();
|
|
}
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', keyDown);
|
|
}
|
|
|
|
private handleFileSelect = async (event: DragEvent) => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
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: []
|
|
});
|
|
}
|
|
|
|
this.animationData.frames = newFrames;
|
|
console.log(this.animationData);
|
|
};
|
|
}
|