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 // draw pins
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.canvasContext.strokeStyle = '#FF0000'; this.canvasContext.strokeStyle = '#FF0000';
const currentSelectedPinData: IFramePinData = this.animationData.frames[this.projectData.currentFrame][ if (this.animationData.frames[this.projectData.currentFrame] !== undefined) {
i const currentSelectedPinData: IFramePinData = this.animationData.frames[
]; this.projectData.currentFrame
if (currentSelectedPinData !== null && currentSelectedPinData !== undefined) { ][i];
this.DrawCrossHair(50, this.canvasContext, currentSelectedPinData.x, currentSelectedPinData.y); 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 // input elements
this.frameRateInput = document.getElementById('framerate') as HTMLInputElement; this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
this.frameRateInput.addEventListener('change', this.updateFrameRate); this.frameRateInput.addEventListener('change', this.UpdateFrameRate);
this.frameRateInput.value = this.animationData.frameRate.toString();
this.loopingInput = document.getElementById('looping') as HTMLInputElement; 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; this.filenameInput = document.getElementById('filename') as HTMLInputElement;
const dropZone = document.getElementById('dropZone') as HTMLElement; const dropZone = document.getElementById('dropZone') as HTMLElement;
@ -100,6 +99,8 @@ export class Page {
dropZone.addEventListener('dragover', Page.handleDragOver, false); dropZone.addEventListener('dragover', Page.handleDragOver, false);
dropZone.addEventListener('drop', this.handleFileSelect, false); dropZone.addEventListener('drop', this.handleFileSelect, false);
this.ResetProgram();
const keyDown = (event: KeyboardEvent) => { const keyDown = (event: KeyboardEvent) => {
switch (event.keyCode) { switch (event.keyCode) {
case 48: case 48:
@ -154,25 +155,29 @@ export class Page {
} }
case 83: { case 83: {
this.pinHandler.UpdateAnimationPinNames(); if (document.activeElement === document.body) {
this.pinHandler.UpdateAnimationPinNames();
const zip = new JSZip(); if (this.CheckAllFramesForPinData()) {
// name of project const zip = new JSZip();
const name = this.filenameInput.value; // name of project
// .anim file const name = this.filenameInput.value;
zip.file(name + '.anim', JSON.stringify(this.animationData)); // .anim file
// pngs zip.file(name + '.anim', JSON.stringify(this.animationData));
const filenames = this.frameHandler.GetFilenames(); // pngs
for (let i = 0; i < filenames.length; i++) { const filenames = this.frameHandler.GetFilenames();
const filedata = filenames[i].split('base64,')[1]; for (let i = 0; i < filenames.length; i++) {
const padding = i.toString().padStart(3, '0'); const filedata = filenames[i].split('base64,')[1];
zip.file(name + '_' + padding.toString() + '.png', filedata, { base64: true }); 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); 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) => { private handleFileSelect = async (event: DragEvent) => {
this.ResetProgram();
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
@ -205,20 +219,38 @@ export class Page {
// set framedata initialized to true // set framedata initialized to true
}; };
// private download(filename: string, text: string) { private ResetProgram = () => {
// var element = document.createElement('a'); // defining blank slate animation data
// element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); this.animationData.pins = [];
// element.setAttribute('download', filename); this.animationData.originX = 0;
this.animationData.originY = 0;
this.animationData.frameRate = 30;
this.animationData.loop = true;
this.animationData.frames = [ { filename: '' } ];
// element.style.display = 'none'; // blank slate canvas data
// document.body.appendChild(element); 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.animationData.frameRate = this.frameRateInput.valueAsNumber;
this.frameHandler.StopPlayingAnimation(); this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation(); this.frameHandler.TogglePlayingAnimation();

57
app/pin_handler.ts
View File

@ -55,6 +55,20 @@ export class PinHandler {
console.log('updated animationPinData to ' + animationPinData); 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 = () => { private UpdatePinSettingsDiv = () => {
// create info window div and append to pincontainer // create info window div and append to pincontainer
const newDiv = document.createElement('div'); const newDiv = document.createElement('div');
@ -74,6 +88,21 @@ export class PinHandler {
removePinButton.textContent = 'X'; removePinButton.textContent = 'X';
removePinButton.className = 'removeButton'; removePinButton.className = 'removeButton';
removePinButton.addEventListener('click', () => { 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(); newDiv.remove();
}); });
// break // 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 = () => { private DeselectAllPinContainers = () => {
for (let i = 0; i < this.allPinContainers.length; i++) { for (let i = 0; i < this.allPinContainers.length; i++) {
this.allPinContainers[i].className = 'pinButtonContainer'; 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)"
}
}
}