revise anim format

master
evan 2019-10-08 18:50:03 -07:00
parent c5b7a35f1d
commit 01fe18d3ee
6 changed files with 34 additions and 20 deletions

View File

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

View File

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

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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;

View File

@ -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');