AnimationTool/app/page.ts

import { saveAs } from 'file-saver';
import * as JSZip from 'jszip';
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';
import { IProjectData } from './Interfaces/IProjectData';
import { PinHandler } from './pin_handler';

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 pinHandler: PinHandler;
	private frameHandler: FrameHandler;
	private canvasHandler: CanvasHandler;
	private animationData: IAnimationData;
	private frameRateInput: HTMLInputElement;
	private loopingInput: HTMLInputElement;

	private canvasImage: HTMLCanvasElement;
	private canvasContext: CanvasRenderingContext2DSettings;

	private projectData: IProjectData;
	private filenameInput: HTMLInputElement;

	private message: HTMLElement;

	private addPinButton: HTMLElement;

	private outputMessage: HTMLElement;

	private canvasMouseHeld: boolean = false;

	public Load() {
		// defining blank slate animation data
		this.animationData = {
			frameRate: 30,
			frames: [
				{
					filename: ''
				}
			],
			loop: true,
			originX: -1,
			originY: -1,
			pins: []
		};
		// blank slate canvas data
		this.projectData = {
			currentFrame: 0,
			currentlySelectedPin: 0,
			height: 0,
			heightRatio: 0,
			width: 0,
			widthRatio: 0
		};

		const info = document.getElementById('info') as HTMLElement;

		const helpButton = document.getElementById('helpButton') as HTMLElement;
		helpButton.addEventListener('click', () => {
			info.classList.toggle('hidden');
		});

		const exportButton = document.getElementById('exportButton') as HTMLElement;
		exportButton.addEventListener('click', () => {
			this.ExportData();
		});

		this.outputMessage = document.getElementById('outputMessage') as HTMLElement;

		this.message = document.getElementById('message') as HTMLElement;
		const canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement;

		const imageElement = new Image();

		this.pinHandler = new PinHandler(
			document.getElementById('pinSettings') as HTMLElement,
			document.getElementById('pinContainer') as HTMLElement,
			document.getElementById('originPin') as HTMLElement,
			this.projectData,
			this.animationData
		);
		this.addPinButton = document.getElementById('addpin') as HTMLElement;
		this.addPinButton.addEventListener('click', this.AddPinButtonPressed);

		// setup canvas
		this.canvasHandler = new CanvasHandler(
			this.animationData,
			this.projectData,
			canvasImage,
			imageElement,
			document.getElementById('originInfo') as HTMLElement
		);
		canvasImage.addEventListener('mousedown', (event: MouseEvent) => {
			this.canvasMouseHeld = true;
			this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY);
			this.pinHandler.UpdatePinBoxStatus();
		});
		canvasImage.addEventListener('mousemove', this.CanvasMouseDown);

		// reset holds on global mouse up
		document.addEventListener('mouseup', () => {
			this.canvasMouseHeld = false;
			this.frameHandler.frameViewerMouseHeld = false;
		});

		// setup frame handler
		this.frameHandler = new FrameHandler(
			this.animationData,
			this.projectData,
			canvasImage,
			canvasImage.getContext('2d')!,
			document.getElementById('frameNumber') as HTMLElement,
			imageElement,
			this.projectData,
			document.getElementById('frameViewer') as HTMLElement
		);

		// input elements
		this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
		this.frameRateInput.addEventListener('change', this.UpdateFrameRate);
		this.loopingInput = document.getElementById('looping') as HTMLInputElement;
		this.loopingInput.addEventListener('change', this.UpdateLooping);
		this.filenameInput = document.getElementById('filename') as HTMLInputElement;

		const dropZone = document.getElementById('dropZone') as HTMLElement;

		dropZone.addEventListener('dragover', Page.handleDragOver, false);
		dropZone.addEventListener('drop', this.handleFileSelect, false);

		this.ResetProgram();

		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
					let targetFrame: number = event.keyCode - 49;
					if (event.keyCode === 48) {
						targetFrame = 9;
					}

					targetFrame %= this.animationData.frames.length;

					this.frameHandler.StopPlayingAnimation();
					this.frameHandler.GoToFrame(targetFrame);
					this.frameHandler.RefreshFrameViewer();
					break;
				}

				case 39:
				case 190: {
					// right_arrow, carrot
					this.frameHandler.AdvanceFrames(1);
					this.frameHandler.StopPlayingAnimation();
					break;
				}

				case 37:
				case 188: {
					// left arrow, carrot
					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: {
					if (document.activeElement === document.body) {
						this.ExportData();
					}
				}
			}
		};

		document.addEventListener('keydown', keyDown);
	}

	private ExportData() {
		this.pinHandler.UpdateAnimationPinNames();

		if (this.ProjectHasNeccesaryData()) {
			const zip = new JSZip();
			// name of project
			const name = this.filenameInput.value;
			// .anim file
			zip.file(name + '.anim', JSON.stringify(this.animationData));
			// pngs
			const filenames = this.frameHandler.GetFilenames();
			for (let i = 0; i < filenames.length; i++) {
				const filedata = filenames[i].split('base64,')[1];
				const padding = i.toString().padStart(3, '0');
				zip.file(name + '_' + padding.toString() + '.png', filedata, { base64: true });
			}
			// save zip
			zip.generateAsync({ type: 'blob' }).then((content) => {
				// see FileSaver.js
				saveAs(content, name + '.zip');
			});
		}
	}

	private ProjectHasNeccesaryData(): boolean {
		this.outputMessage.innerText = '';
		this.outputMessage.classList.remove('errorMessage');

		let pass: boolean = true;
		let errorString: string = '';
		this.frameHandler.RefreshFrameViewer();
		if (this.filenameInput.value === '') {
			errorString += '- Missing name\n';
			pass = false;
		}
		if (this.animationData.originX === null || this.animationData.originY === null) {
			errorString += '- Missing origin data\n';
			pass = false;
		}
		// check frames for data errors
		let pinDataErrorString: string = '';
		let passPinData: boolean = true;
		for (let f = 0; f < this.animationData.frames.length; f++) {
			const errorOnFrame: boolean = false;
			if (this.animationData.pins !== undefined) {
				for (let p = 0; p < this.animationData.pins.length; p++) {
					if (this.animationData.pins[p] !== undefined) {
						const pinIDtoCheck = this.animationData.pins[p].id;
						// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
						if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
							if (!errorOnFrame) {
								pinDataErrorString += f + ' :\n';
							}
							pinDataErrorString += '      Pin: ' + this.animationData.pins[p].name + '\n';
							passPinData = false;
						}
					}
				}
			}
		}
		if (!passPinData) {
			errorString += '- Missing pin data on some frames: \n' + pinDataErrorString;
			pass = false;
		}
		if (!pass) {
			this.outputMessage.innerText = errorString;
			this.outputMessage.classList.add('errorMessage');
		}
		return pass;
	}

	private CanvasMouseDown = (event: MouseEvent) => {
		if (this.canvasMouseHeld) {
			this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY);
			this.pinHandler.UpdatePinBoxStatus();
		}
	};

	private AddPinButtonPressed = () => {
		this.pinHandler.AddNewPin();
		this.pinHandler.pins += 1;
	};

	private handleFileSelect = async (event: DragEvent) => {
		this.ResetProgram();

		event.stopPropagation();
		event.preventDefault();

		const [ processedFilenames, originalFilenames ] = await FileHandler.ProcessImages(event.dataTransfer!.files);
		this.frameHandler.loadFrames(processedFilenames);

		const newFrames: IFrame[] = [];

		for (let i = 0; i < originalFilenames.length; i++) {
			newFrames.push({
				filename: originalFilenames[i].toString()
			});
		}

		this.animationData.frames = newFrames;
		this.frameHandler.GoToFrame(0);
		this.frameHandler.StopPlayingAnimation();
		this.frameHandler.TogglePlayingAnimation();

		const imageElement = new Image();
		imageElement.src = processedFilenames[0];
		imageElement.onload = () => {
			this.canvasHandler.ResizeCanvas(imageElement.width, imageElement.height);
		};

		this.frameHandler.ConstructFrameUI();
	};

	private ResetProgram = () => {
		// defining blank slate animation data
		this.animationData.pins = [];
		this.animationData.originX = null;
		this.animationData.originY = null;
		this.animationData.frameRate = 30;
		this.animationData.loop = true;
		this.animationData.frames = [ { filename: '' } ];

		// blank slate canvas data
		this.projectData.currentFrame = 0;
		this.projectData.currentlySelectedPin = 0;
		this.projectData.width = 0;
		this.projectData.widthRatio = 0;
		this.projectData.height = 0;
		this.projectData.heightRatio = 0;

		// reset input displays
		this.frameRateInput.value = this.animationData.frameRate.toString();
		this.loopingInput.checked = this.animationData.loop;
		this.filenameInput.value = '';

		// destroy pin divs
		this.pinHandler.RemoveAllPins();
		this.projectData.currentlySelectedPin = 0;
	};

	private UpdateLooping = () => {
		this.animationData.loop = this.loopingInput.checked;
	};

	private UpdateFrameRate = () => {
		this.animationData.frameRate = this.frameRateInput.valueAsNumber;
		this.frameHandler.StopPlayingAnimation();
		this.frameHandler.TogglePlayingAnimation();
	};
}