revise anim format

app/Interfaces/IFrame.ts

@@ -2,5 +2,5 @@ import { IFramePinData } from './IFramePinData';
 
 export interface IFrame {
 	filename: string;
-	[index: number]: IFramePinData;
+	pinData: IFramePinData;
 }

app/Interfaces/IFramePinData.ts

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

app/canvas_handler.ts

@@ -63,13 +63,12 @@ export class CanvasHandler {
 			this.animationData.originY = pixelY;
 		} else {
 			// console.log('current pin id = ' + this.projectData.currentlySelectedPin);
-			const newPinData: IFramePinData = {
-				id: this.projectData.currentlySelectedPin,
+			const newPinData = {
 				x: pixelX,
 				y: pixelY
 			};
 
-			this.animationData.frames[this.projectData.currentFrame][
+			this.animationData.frames[this.projectData.currentFrame].pinData[
 				this.projectData.currentlySelectedPin
 			] = newPinData;
 		}

app/frame_handler.ts

@@ -144,7 +144,7 @@ export class FrameHandler {
 						const pinIDtoCheck = this.animationData.pins[p].id;
 						// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
 						if (this.frameViewer.children[f] !== undefined) {
-							if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
+							if (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) {
 								this.frameViewer.children[f].classList.add('warning');
 								break;
 							}
@@ -186,9 +186,7 @@ export class FrameHandler {
 			for (let i = 0; i < 10; i++) {
 				this.canvasContext.strokeStyle = '#FF0000';
 				if (this.animationData.frames[this.projectData.currentFrame] !== undefined) {
-					const currentSelectedPinData: IFramePinData = this.animationData.frames[
-						this.projectData.currentFrame
-					][i];
+					const currentSelectedPinData = this.animationData.frames[this.projectData.currentFrame].pinData[i];
 					if (currentSelectedPinData !== null && currentSelectedPinData !== undefined) {
 						this.DrawCrossHair(50, this.canvasContext, currentSelectedPinData.x, currentSelectedPinData.y);
 					}

app/page.ts

@@ -44,7 +44,8 @@ export class Page {
 			frameRate: 30,
 			frames: [
 				{
-					filename: ''
+					filename: '',
+					pinData: {}
 				}
 			],
 			loop: true,
@@ -211,15 +212,29 @@ export class Page {
 			const zip = new JSZip();
 			// name of project
 			const name = this.filenameInput.value;
+
+			// generate output filenames
+			var outputFilenames = [];
+			for (let i = 0; i < this.animationData.frames.length; i++) {
+				const padding = i.toString().padStart(3, '0');
+				const filename = name + '_' + padding.toString() + '.png';
+				outputFilenames[i] = filename;
+			}
+
+			for (let i = 0; i < this.animationData.frames.length; i++) {
+				this.animationData.frames[i].filename = outputFilenames[i];
+			}
+
 			// .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 });
+				zip.file(outputFilenames[i], filedata, { base64: true });
 			}
+
 			// save zip
 			zip.generateAsync({ type: 'blob' }).then((content) => {
 				// see FileSaver.js
@@ -253,7 +268,7 @@ export class Page {
 					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 (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) {
 							if (!errorOnFrame) {
 								pinDataErrorString += f + ' :\n';
 							}
@@ -300,7 +315,8 @@ export class Page {
 
 		for (let i = 0; i < originalFilenames.length; i++) {
 			newFrames.push({
-				filename: originalFilenames[i].toString()
+				filename: originalFilenames[i].toString(),
+				pinData: {}
 			});
 		}
 
@@ -325,7 +341,7 @@ export class Page {
 		this.animationData.originY = null;
 		this.animationData.frameRate = 30;
 		this.animationData.loop = true;
-		this.animationData.frames = [ { filename: '' } ];
+		this.animationData.frames = [ { filename: '', pinData: {} } ];
 
 		// blank slate canvas data
 		this.projectData.currentFrame = 0;

app/pin_handler.ts

@@ -46,7 +46,7 @@ export class PinHandler {
 			const pinNumber = this.GetPinNumberFromID(pinDiv.id);
 			for (let f = 0; f < this.animationData.frames.length; f++) {
 				if (this.animationData.frames[f] !== undefined) {
-					if (this.animationData.frames[f][pinNumber] === undefined) {
+					if (this.animationData.frames[f].pinData[pinNumber] === undefined) {
 						pinDiv.classList.add('warning');
 						// console.log('added warning');
 						break;
@@ -203,8 +203,8 @@ export class PinHandler {
 
 		// delete pin data from each frame
 		for (let f = 0; f < this.animationData.frames.length; f++) {
-			if (this.animationData.frames[f][pinID] !== undefined) {
-				delete this.animationData.frames[f][pinID];
+			if (this.animationData.frames[f].pinData[pinID] !== undefined) {
+				delete this.animationData.frames[f].pinData[pinID];
 				// console.log('deleting pinID ' + pinID + ' data from frame ' + f);
 			} else {
 				// console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist');