MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

delete pin frame data when delete pin, reset all data on reload

master
Beau Blyth 2019-10-02 19:35:34 -07:00
parent c47608c013
commit bda09fa473
4 changed files with 126 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/frame_handler.ts
View File

@ -116,11 +116,13 @@ export class FrameHandler {
// draw pins
for (let i = 0; i < 10; i++) {
this.canvasContext.strokeStyle = '#FF0000';
const currentSelectedPinData: IFramePinData = this.animationData.frames[this.projectData.currentFrame][
i
];
if (currentSelectedPinData !== null && currentSelectedPinData !== undefined) {
this.DrawCrossHair(50, this.canvasContext, currentSelectedPinData.x, currentSelectedPinData.y);
if (this.animationData.frames[this.projectData.currentFrame] !== undefined) {
const currentSelectedPinData: IFramePinData = this.animationData.frames[
this.projectData.currentFrame
][i];
if (currentSelectedPinData !== null && currentSelectedPinData !== undefined) {
this.DrawCrossHair(50, this.canvasContext, currentSelectedPinData.x, currentSelectedPinData.y);
}
}
}
}

92
app/page.ts
View File

@ -89,10 +89,9 @@ export class Page {
// input elements
this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
this.frameRateInput.addEventListener('change', this.updateFrameRate);
this.frameRateInput.value = this.animationData.frameRate.toString();
this.frameRateInput.addEventListener('change', this.UpdateFrameRate);
this.loopingInput = document.getElementById('looping') as HTMLInputElement;
this.loopingInput.addEventListener('change', this.updateLooping);
this.loopingInput.addEventListener('change', this.UpdateLooping);
this.filenameInput = document.getElementById('filename') as HTMLInputElement;
const dropZone = document.getElementById('dropZone') as HTMLElement;
@ -100,6 +99,8 @@ export class Page {
dropZone.addEventListener('dragover', Page.handleDragOver, false);
dropZone.addEventListener('drop', this.handleFileSelect, false);
this.ResetProgram();
const keyDown = (event: KeyboardEvent) => {
switch (event.keyCode) {
case 48:
@ -154,25 +155,29 @@ export class Page {
}
case 83: {
this.pinHandler.UpdateAnimationPinNames();
if (document.activeElement === document.body) {
this.pinHandler.UpdateAnimationPinNames();
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 });
if (this.CheckAllFramesForPinData()) {
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');
});
}
}
// save zip
zip.generateAsync({ type: 'blob' }).then((content) => {
// see FileSaver.js
saveAs(content, name + '.zip');
});
}
}
};
@ -180,7 +185,16 @@ export class Page {
document.addEventListener('keydown', keyDown);
}
private CheckAllFramesForPinData(): boolean {
// for (let frame = 0; frame < this.animationData.frames.length; frame++) {
// this.animationData.frames[frame][pinIDChecking];
// }
return true;
}
private handleFileSelect = async (event: DragEvent) => {
this.ResetProgram();
event.stopPropagation();
event.preventDefault();
@ -205,20 +219,38 @@ export class Page {
// set framedata initialized to true
};
// 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);
private ResetProgram = () => {
// defining blank slate animation data
this.animationData.pins = [];
this.animationData.originX = 0;
this.animationData.originY = 0;
this.animationData.frameRate = 30;
this.animationData.loop = true;
this.animationData.frames = [ { filename: '' } ];
// element.style.display = 'none';
// document.body.appendChild(element);
// 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;
// element.click();
// reset input displays
this.frameRateInput.value = this.animationData.frameRate.toString();
this.loopingInput.checked = this.animationData.loop;
this.filenameInput.value = '';
// document.body.removeChild(element);
// }
// destroy pin divs
this.pinHandler.RemoveAllPins();
this.projectData.currentlySelectedPin = 0;
};
private updateFrameRate = () => {
private UpdateLooping = () => {
this.animationData.loop = this.loopingInput.checked;
};
private UpdateFrameRate = () => {
this.animationData.frameRate = this.frameRateInput.valueAsNumber;
this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation();

57
app/pin_handler.ts
View File

@ -55,6 +55,20 @@ export class PinHandler {
console.log('updated animationPinData to ' + animationPinData);
};
public RemoveAllPins = () => {
for (let i = 1; i < this.allPinContainers.length; i++) {
const pinID: number = parseInt(this.allPinContainers[i].id.split('_')[1]);
this.RemovePinDataForID(pinID);
this.allPinContainers[i].remove();
}
this.ResetPinSelection();
};
private ResetPinSelection = () => {
this.DeselectAllPinContainers();
this.allPinContainers[0].className = 'pinButtonContainerSelected';
};
private UpdatePinSettingsDiv = () => {
// create info window div and append to pincontainer
const newDiv = document.createElement('div');
@ -74,6 +88,21 @@ export class PinHandler {
removePinButton.textContent = 'X';
removePinButton.className = 'removeButton';
removePinButton.addEventListener('click', () => {
// get ID number for this div
const idNumber = parseInt(newDiv.id.split('_')[1]);
let indexToDelete: number = 0;
// that id from allPinContainers
for (let i = 0; i < this.allPinContainers.length; i++) {
if (parseInt(this.allPinContainers[i].id.split('_')[1]) === idNumber) {
indexToDelete = i;
}
}
if (indexToDelete !== 0) {
this.allPinContainers.splice(indexToDelete, 1);
}
// remove data associated with that id from all frames
this.RemovePinDataForID(idNumber);
// remove the div itself
newDiv.remove();
});
// break
@ -90,6 +119,34 @@ export class PinHandler {
});
};
private RemovePinDataForID = (pinID: number) => {
// check for matching id in pin list and remove
let deleted: boolean = false;
for (let i = 0; i < this.animationData.pins.length; i++) {
console.log('checking if ' + this.animationData.pins[i].id.toString + ' === ' + pinID.toString());
if (this.animationData.pins[i].id === pinID) {
delete this.animationData.pins[i];
}
console.log('deleting pinID ' + pinID);
deleted = true;
}
if (!deleted) {
console.log('failed to find pinID ' + pinID + ' in list of pins');
}
// 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];
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');
}
}
};
private DeselectAllPinContainers = () => {
for (let i = 0; i < this.allPinContainers.length; i++) {
this.allPinContainers[i].className = 'pinButtonContainer';

22
pnpm-debug.log
View File

@ -1,22 +0,0 @@
{
"0 debug pnpm:scope": {
"selected": 1,
"workspacePrefix": null
},
"1 error pnpm": {
"message": {
"errno": 1,
"code": "ELIFECYCLE",
"pkgid": "animationtool@1.0.0",
"stage": "start:dev",
"script": "webpack-dev-server --config webpack/dev.config.js",
"pkgname": "animationtool"
},
"err": {
"name": "Error",
"message": "animationtool@1.0.0 start:dev: `webpack-dev-server --config webpack/dev.config.js`\nExit status 1",
"code": "ELIFECYCLE",
"stack": "Error: animationtool@1.0.0 start:dev: `webpack-dev-server --config webpack/dev.config.js`\nExit status 1\n at EventEmitter.proc.on (C:\\Users\\tekno\\AppData\\Roaming\\npm\\node_modules\\pnpm\\lib\\node_modules\\@zkochan\\npm-lifecycle\\index.js:302:16)\n at EventEmitter.emit (events.js:198:13)\n at ChildProcess.<anonymous> (C:\\Users\\tekno\\AppData\\Roaming\\npm\\node_modules\\pnpm\\lib\\node_modules\\@zkochan\\npm-lifecycle\\lib\\spawn.js:55:14)\n at ChildProcess.emit (events.js:198:13)\n at maybeClose (internal/child_process.js:982:16)\n at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)"
}
}
}