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

clickable export button + fix filename export in metadata

master
evan 2019-10-08 16:04:22 -07:00
parent e09fc596f3
commit 9179c468eb
4 changed files with 67 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/file_handler.ts
View File

@ -1,16 +1,18 @@
export class FileHandler {
public static ProcessImages = (fileList: FileList): Promise<string[]> => {
public static ProcessImages = (fileList: FileList): Promise<[string[], string[]]> => {
return new Promise(async (resolve, reject) => {
const filenames: string[] = [];
const processedFilenames: string[] = [];
const originalFilenames: string[] = [];
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
const filename = await FileHandler.ProcessImage(file);
filenames.push(filename);
processedFilenames.push(filename);
originalFilenames.push(file.name);
}
resolve(filenames);
resolve([ processedFilenames, originalFilenames ]);
});
};

31
app/page.ts
View File

@ -69,6 +69,11 @@ export class Page {
info.classList.toggle('hidden');
});
const exportButton = document.getElementById('exportButton') as HTMLElement;
exportButton.addEventListener('click', () => {
this.ExportData();
});
this.outputMessage = document.getElementById('outputMessage') as HTMLElement;
this.message = document.getElementById('message') as HTMLElement;
@ -190,6 +195,16 @@ export class Page {
case 83: {
if (document.activeElement === document.body) {
this.ExportData();
}
}
}
};
document.addEventListener('keydown', keyDown);
}
private ExportData() {
this.pinHandler.UpdateAnimationPinNames();
if (this.ProjectHasNeccesaryData()) {
@ -212,12 +227,6 @@ export class Page {
});
}
}
}
}
};
document.addEventListener('keydown', keyDown);
}
private ProjectHasNeccesaryData(): boolean {
this.outputMessage.innerText = '';
@ -284,14 +293,14 @@ export class Page {
event.stopPropagation();
event.preventDefault();
const filenames = await FileHandler.ProcessImages(event.dataTransfer!.files);
this.frameHandler.loadFrames(filenames);
const [ processedFilenames, originalFilenames ] = await FileHandler.ProcessImages(event.dataTransfer!.files);
this.frameHandler.loadFrames(processedFilenames);
const newFrames: IFrame[] = [];
for (let i = 0; i < filenames.length; i++) {
for (let i = 0; i < originalFilenames.length; i++) {
newFrames.push({
filename: i.toString()
filename: originalFilenames[i].toString()
});
}
@ -301,7 +310,7 @@ export class Page {
this.frameHandler.TogglePlayingAnimation();
const imageElement = new Image();
imageElement.src = filenames[0];
imageElement.src = processedFilenames[0];
imageElement.onload = () => {
this.canvasHandler.ResizeCanvas(imageElement.width, imageElement.height);
};

13
app/stylesheets/main.scss
View File

@ -293,3 +293,16 @@ $pin-button-size: 75px;
height: 15px;
line-height: 15px;
}
#exportButton {
display: block;
margin: 0 auto;
margin-top: 20px;
width: 150px;
height: 50px;
line-height: 50px;
font-size: 30px;
text-align: center;
border: 1px solid;
border-radius: 5px;
}

20
dist/index.html vendored
View File

@ -9,6 +9,16 @@
<body>
<div id="helpButton">?</div>
<div id="info" class="hidden">
<div class="instruction">
<p>Drag a group of images onto the page to load them</p>
<p><b>Arrow Keys</b> - Advance frames</p>
<p><b>Spacebar</b> - Play/Pause Animation</p>
<p><b>S</b> - Export</p>
<p>Add pins with the <b>+</b> button</p>
</div>
</div>
<div id="dropZone">
<div id="allTop">
<div id="top">
@ -41,15 +51,9 @@
</div>
<div id="addpin" class="pinButtonContainer">+</div>
</div>
<div id="info" class="hidden">
<div class="instruction">
<p>Drag a group of images onto the page to load them</p>
<p><b>Arrow Keys</b> - Advance frames</p>
<p><b>Spacebar</b> - Play/Pause Animation</p>
<p><b>S</b> - Export</p>
<p>Add pins with the <b>+</b> button</p>
</div>
<div id="outputMessage"></div>
<div id="exportButton">
Export
</div>
</div>