From bda09fa4734f6eb39c3652d78a95fe0646c7c54d Mon Sep 17 00:00:00 2001 From: Beau Blyth Date: Wed, 2 Oct 2019 19:35:34 -0700 Subject: [PATCH] delete pin frame data when delete pin, reset all data on reload --- app/frame_handler.ts | 12 +++--- app/page.ts | 92 +++++++++++++++++++++++++++++--------------- app/pin_handler.ts | 57 +++++++++++++++++++++++++++ pnpm-debug.log | 22 ----------- 4 files changed, 126 insertions(+), 57 deletions(-) delete mode 100644 pnpm-debug.log diff --git a/app/frame_handler.ts b/app/frame_handler.ts index d209a84..aa5fc2e 100644 --- a/app/frame_handler.ts +++ b/app/frame_handler.ts @@ -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); + } } } } diff --git a/app/page.ts b/app/page.ts index 5af2fa6..f5f2468 100644 --- a/app/page.ts +++ b/app/page.ts @@ -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(); diff --git a/app/pin_handler.ts b/app/pin_handler.ts index aec4d57..f78f431 100644 --- a/app/pin_handler.ts +++ b/app/pin_handler.ts @@ -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'; diff --git a/pnpm-debug.log b/pnpm-debug.log deleted file mode 100644 index dd9b102..0000000 --- a/pnpm-debug.log +++ /dev/null @@ -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. (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)" - } - } -} \ No newline at end of file