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

Merge pull request #2 from MoonsideGames/pin_data_array 

Pin data array
master
thatcosmonaut 2019-12-12 13:21:42 -08:00 committed by GitHub
parent 583844b880 552525e001
commit 8786e521f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 74 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Interfaces/IAnimationData.ts
View File

@ -1,5 +1,5 @@
import { IFrame } from './IFrame'; import { IFrame } from './IFrame';
import { IPin } from './IPin'; import { IPinDefinition } from './IPinDefinition';
export interface IAnimationData { export interface IAnimationData {
frameRate: number; frameRate: number;
@ -7,5 +7,5 @@ export interface IAnimationData {
originY: number | null; originY: number | null;
loop: boolean; loop: boolean;
frames: IFrame[]; frames: IFrame[];
pins: IPin[]; pinDefinitions: IPinDefinition[];
} }

4
app/Interfaces/IFrame.ts
View File

@ -1,6 +1,6 @@
import { IFramePinData } from './IFramePinData'; import { IPositionData } from './IPositionData';
export interface IFrame { export interface IFrame {
filename: string; filename: string;
pinData: IFramePinData; pinData: IPositionData[];
} }

6
app/Interfaces/IFramePinData.ts
View File

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

4
app/Interfaces/IPin.ts
View File

@ -1,4 +0,0 @@
export interface IPin {
id: number;
name: string;
}

4
app/Interfaces/IPinDefinition.ts Normal file
View File

@ -0,0 +1,4 @@
export interface IPinDefinition {
id: number;
name: string;
}

4
app/Interfaces/IPositionData.ts Normal file
View File

@ -0,0 +1,4 @@
export interface IPositionData {
x: number;
y: number;
}

5
app/canvas_handler.ts
View File

@ -1,5 +1,4 @@
import { IAnimationData } from './Interfaces/IAnimationData'; import { IAnimationData } from './Interfaces/IAnimationData';
import { IFramePinData } from './Interfaces/IFramePinData';
import { IProjectData } from './Interfaces/IProjectData'; import { IProjectData } from './Interfaces/IProjectData';
// I display the canvas and am clickable // I display the canvas and am clickable
@ -56,13 +55,11 @@ export class CanvasHandler {
// get origin in pixels // get origin in pixels
const pixelX: number = Math.floor(offsetX / ratioWidth); const pixelX: number = Math.floor(offsetX / ratioWidth);
const pixelY: number = Math.floor(offsetY / ratioHeight); const pixelY: number = Math.floor(offsetY / ratioHeight);
// console.log('CLICK X:' + pixelX + ' Y:' + pixelY); if (this.projectData.currentlySelectedPin === -1) {
if (this.projectData.currentlySelectedPin === 0) {
// update animation data // update animation data
this.animationData.originX = pixelX; this.animationData.originX = pixelX;
this.animationData.originY = pixelY; this.animationData.originY = pixelY;
} else { } else {
// console.log('current pin id = ' + this.projectData.currentlySelectedPin);
const newPinData = { const newPinData = {
x: pixelX, x: pixelX,
y: pixelY y: pixelY

11
app/frame_handler.ts
View File

@ -1,5 +1,4 @@
import { IAnimationData } from './Interfaces/IAnimationData'; import { IAnimationData } from './Interfaces/IAnimationData';
import { IFramePinData } from './Interfaces/IFramePinData';
import { IProjectData } from './Interfaces/IProjectData'; import { IProjectData } from './Interfaces/IProjectData';
export class FrameHandler { export class FrameHandler {
@ -138,11 +137,10 @@ export class FrameHandler {
for (let f = 0; f < this.animationData.frames.length; f++) { for (let f = 0; f < this.animationData.frames.length; f++) {
// this.frameViewer.children[f].classList.add('warning'); // this.frameViewer.children[f].classList.add('warning');
if (this.animationData.pins !== undefined) { if (this.animationData.pinDefinitions !== undefined) {
for (let p = 0; p < this.animationData.pins.length; p++) { for (let p = 0; p < this.animationData.pinDefinitions.length; p++) {
if (this.animationData.pins[p] !== undefined) { if (this.animationData.pinDefinitions[p] !== undefined) {
const pinIDtoCheck = this.animationData.pins[p].id; const pinIDtoCheck = this.animationData.pinDefinitions[p].id;
// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
if (this.frameViewer.children[f] !== undefined) { if (this.frameViewer.children[f] !== undefined) {
if (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) { if (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) {
this.frameViewer.children[f].classList.add('warning'); this.frameViewer.children[f].classList.add('warning');
@ -217,6 +215,5 @@ export class FrameHandler {
} }
this.RefreshImage(); this.RefreshImage();
window.requestAnimationFrame(this.windowAnimationUpdate); window.requestAnimationFrame(this.windowAnimationUpdate);
// console.log('timestamp = ' + timestamp);
}; };
} }

25
app/page.ts
View File

@ -45,18 +45,18 @@ export class Page {
frames: [ frames: [
{ {
filename: '', filename: '',
pinData: {} pinData: []
} }
], ],
loop: true, loop: true,
originX: -1, originX: -1,
originY: -1, originY: -1,
pins: [] pinDefinitions: []
}; };
// blank slate canvas data // blank slate canvas data
this.projectData = { this.projectData = {
currentFrame: 0, currentFrame: 0,
currentlySelectedPin: 0, currentlySelectedPin: -1,
height: 0, height: 0,
heightRatio: 0, heightRatio: 0,
width: 0, width: 0,
@ -206,7 +206,7 @@ export class Page {
} }
private ExportData() { private ExportData() {
this.pinHandler.UpdateAnimationPinNames(); this.pinHandler.UpdateAnimationPinDefinitions();
if (this.ProjectHasNeccesaryData()) { if (this.ProjectHasNeccesaryData()) {
const zip = new JSZip(); const zip = new JSZip();
@ -263,16 +263,16 @@ export class Page {
let passPinData: boolean = true; let passPinData: boolean = true;
for (let f = 0; f < this.animationData.frames.length; f++) { for (let f = 0; f < this.animationData.frames.length; f++) {
const errorOnFrame: boolean = false; const errorOnFrame: boolean = false;
if (this.animationData.pins !== undefined) { if (this.animationData.pinDefinitions !== undefined) {
for (let p = 0; p < this.animationData.pins.length; p++) { for (let p = 0; p < this.animationData.pinDefinitions.length; p++) {
if (this.animationData.pins[p] !== undefined) { if (this.animationData.pinDefinitions[p] !== undefined) {
const pinIDtoCheck = this.animationData.pins[p].id; const pinIDtoCheck = this.animationData.pinDefinitions[p].id;
// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name); // console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
if (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) { if (this.animationData.frames[f].pinData[pinIDtoCheck] === undefined) {
if (!errorOnFrame) { if (!errorOnFrame) {
pinDataErrorString += f + ' :\n'; pinDataErrorString += f + ' :\n';
} }
pinDataErrorString += ' Pin: ' + this.animationData.pins[p].name + '\n'; pinDataErrorString += ' Pin: ' + this.animationData.pinDefinitions[p].name + '\n';
passPinData = false; passPinData = false;
} }
} }
@ -299,7 +299,6 @@ export class Page {
private AddPinButtonPressed = () => { private AddPinButtonPressed = () => {
this.pinHandler.AddNewPin(); this.pinHandler.AddNewPin();
this.pinHandler.pins += 1;
}; };
private handleFileSelect = async (event: DragEvent) => { private handleFileSelect = async (event: DragEvent) => {
@ -316,7 +315,7 @@ export class Page {
for (let i = 0; i < originalFilenames.length; i++) { for (let i = 0; i < originalFilenames.length; i++) {
newFrames.push({ newFrames.push({
filename: originalFilenames[i].toString(), filename: originalFilenames[i].toString(),
pinData: {} pinData: []
}); });
} }
@ -336,12 +335,12 @@ export class Page {
private ResetProgram = () => { private ResetProgram = () => {
// defining blank slate animation data // defining blank slate animation data
this.animationData.pins = []; this.animationData.pinDefinitions = [];
this.animationData.originX = null; this.animationData.originX = null;
this.animationData.originY = null; this.animationData.originY = null;
this.animationData.frameRate = 30; this.animationData.frameRate = 30;
this.animationData.loop = true; this.animationData.loop = true;
this.animationData.frames = [ { filename: '', pinData: {} } ]; this.animationData.frames = [ { filename: '', pinData: [] } ];
// blank slate canvas data // blank slate canvas data
this.projectData.currentFrame = 0; this.projectData.currentFrame = 0;

75
app/pin_handler.ts
View File

@ -1,9 +1,8 @@
import { IAnimationData } from './Interfaces/IAnimationData'; import { IAnimationData } from './Interfaces/IAnimationData';
import { IPin } from './Interfaces/IPin'; import { IPinDefinition } from './Interfaces/IPinDefinition';
import { IProjectData } from './Interfaces/IProjectData'; import { IProjectData } from './Interfaces/IProjectData';
export class PinHandler { export class PinHandler {
public pins: number = 1;
private pinSettingsDiv: HTMLElement; private pinSettingsDiv: HTMLElement;
private pinContainer: HTMLElement; private pinContainer: HTMLElement;
private allPinContainers: HTMLElement[]; private allPinContainers: HTMLElement[];
@ -26,13 +25,12 @@ export class PinHandler {
this.originPin = originPin; this.originPin = originPin;
this.originPin.classList.add('pinButtonContainer'); this.originPin.classList.add('pinButtonContainer');
// add origin click behaviour // add origin click behaviour
this.originPin.id = 'pinID_0';
this.originPin.addEventListener('click', () => { this.originPin.addEventListener('click', () => {
this.projectData.currentlySelectedPin = 0; this.projectData.currentlySelectedPin = -1;
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
}); });
// put origin into pincontainer array // put origin into pincontainer array
this.allPinContainers = [ originPin ]; this.allPinContainers = [];
} }
public UpdatePinBoxStatus = () => { public UpdatePinBoxStatus = () => {
@ -48,7 +46,6 @@ export class PinHandler {
if (this.animationData.frames[f] !== undefined) { if (this.animationData.frames[f] !== undefined) {
if (this.animationData.frames[f].pinData[pinNumber] === undefined) { if (this.animationData.frames[f].pinData[pinNumber] === undefined) {
pinDiv.classList.add('warning'); pinDiv.classList.add('warning');
// console.log('added warning');
break; break;
} }
} }
@ -57,26 +54,24 @@ export class PinHandler {
if (this.animationData.originX === null || this.animationData.originY === null) { if (this.animationData.originX === null || this.animationData.originY === null) {
this.originPin.classList.add('warning'); this.originPin.classList.add('warning');
} }
if (this.projectData.currentlySelectedPin === 0) { if (this.projectData.currentlySelectedPin === -1) {
this.originPin.classList.add('selected'); this.originPin.classList.add('selected');
} }
}; };
public UpdateAnimationPinNames = () => { public UpdateAnimationPinDefinitions = () => {
const animationPinData: IPin[] = []; const animationPinData: IPinDefinition[] = [];
for (let i = 1; i < this.allPinContainers.length; i++) { for (let i = 0; i < this.allPinContainers.length; i++) {
const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]); const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]);
// console.log('new pin name = ' + pinName);
if (pinName !== null && pinName !== undefined) { if (pinName !== null && pinName !== undefined) {
const newPinData: IPin = { const newPinData: IPinDefinition = {
id: this.GetPinNumberFromID(this.allPinContainers[i].id), id: this.GetPinNumberFromID(this.allPinContainers[i].id),
name: pinName name: pinName
}; };
animationPinData.push(newPinData); animationPinData.push(newPinData);
} }
} }
this.animationData.pins = animationPinData; this.animationData.pinDefinitions = animationPinData;
// console.log('updated animationPinData to ' + animationPinData);
}; };
public RemoveAllPins = () => { public RemoveAllPins = () => {
@ -87,7 +82,7 @@ export class PinHandler {
} }
this.allPinContainers.splice(1, this.allPinContainers.length - 1); this.allPinContainers.splice(1, this.allPinContainers.length - 1);
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
this.UpdateAnimationPinNames(); this.UpdateAnimationPinDefinitions();
}; };
public GetAvailablePins = (): number[] => { public GetAvailablePins = (): number[] => {
@ -96,7 +91,6 @@ export class PinHandler {
const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id); const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
availablePins.push(pinID); availablePins.push(pinID);
} }
// console.log('available pins are: ' + availablePins);
return availablePins; return availablePins;
}; };
@ -116,19 +110,21 @@ export class PinHandler {
const newDiv = document.createElement('div'); const newDiv = document.createElement('div');
this.allPinContainers.push(newDiv); this.allPinContainers.push(newDiv);
let newPinIDString = this.animationData.pinDefinitions.length.toString();
this.pinContainer.appendChild(newDiv); this.pinContainer.appendChild(newDiv);
newDiv.id = 'pinID_' + this.pins.toString(); newDiv.id = 'pinID_' + newPinIDString;
newDiv.className = 'pinButtonContainer'; newDiv.className = 'pinButtonContainer';
// text input field for pin name // text input field for pin name
const newNameInput = document.createElement('input'); const newNameInput = document.createElement('input');
newNameInput.id = 'nameInput_' + this.pins.toString(); newNameInput.id = 'nameInput_' + newPinIDString;
newDiv.addEventListener('click', () => { newDiv.addEventListener('click', () => {
this.SelectPin(newDiv); this.SelectPin(newDiv);
}); });
newDiv.appendChild(newNameInput); newDiv.appendChild(newNameInput);
newNameInput.value = 'PinName_' + this.pins.toString(); newNameInput.value = 'PinName_' + newPinIDString;
newNameInput.addEventListener('focusout', () => { newNameInput.addEventListener('focusout', () => {
this.UpdateAnimationPinNames(); this.UpdateAnimationPinDefinitions();
}); });
// button to remove pin // button to remove pin
const removePinButton = document.createElement('div'); const removePinButton = document.createElement('div');
@ -146,21 +142,21 @@ export class PinHandler {
indexToDelete = i; indexToDelete = i;
} }
} }
if (indexToDelete !== 0) { if (indexToDelete !== -1) {
this.allPinContainers.splice(indexToDelete, 1); this.allPinContainers.splice(indexToDelete, 1);
} }
// remove data associated with that id from all frames // remove data associated with that id from all frames
this.RemovePinDataForID(idNumber); this.RemovePinDataForID(idNumber);
// remove the div itself // remove the div itself
newDiv.remove(); newDiv.remove();
this.UpdateAnimationPinNames(); //this.UpdateAnimationPinDefinitions();
//reset to origin //reset to origin
this.SelectOriginPin(); this.SelectOriginPin();
}); });
// break // break
this.UpdateAnimationPinNames(); this.UpdateAnimationPinDefinitions();
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
}; };
@ -174,29 +170,43 @@ export class PinHandler {
private SelectPin = (pinDiv: HTMLElement) => { private SelectPin = (pinDiv: HTMLElement) => {
this.projectData.currentlySelectedPin = this.GetPinNumberFromID(pinDiv.id); this.projectData.currentlySelectedPin = this.GetPinNumberFromID(pinDiv.id);
// console.log('selected pin ' + this.projectData.currentlySelectedPin);
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
this.UpdateAnimationPinNames(); this.UpdateAnimationPinDefinitions();
}; };
private SelectOriginPin = () => { private SelectOriginPin = () => {
this.projectData.currentlySelectedPin = 0; this.projectData.currentlySelectedPin = -1;
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
}; };
private RemovePinDataForID = (pinID: number) => { private RemovePinDataForID = (pinID: number) => {
// check for matching id in pin list and remove // check for matching id in pin list and remove
let indexToDelete = -1;
let deleted: boolean = false; let deleted: boolean = false;
for (let i = 0; i < this.animationData.pins.length; i++) { for (let i = 0; i < this.animationData.pinDefinitions.length; i++) {
// console.log('checking if ' + this.animationData.pins[i].id.toString + ' === ' + pinID.toString()); if (this.animationData.pinDefinitions[i].id === pinID) {
if (this.animationData.pins[i].id === pinID) { indexToDelete = i;
delete this.animationData.pins[i];
} }
// console.log('deleting pinID ' + pinID);
deleted = true; deleted = true;
} }
if (indexToDelete == -1) {
return;
}
let removedPinDefinition = this.animationData.pinDefinitions[indexToDelete];
this.animationData.pinDefinitions.splice(indexToDelete, 1);
for (let i = this.animationData.pinDefinitions.length - 1; i >= 0; i--) {
let pinDefinition = this.animationData.pinDefinitions[i];
if (pinDefinition.id > removedPinDefinition.id) {
let div = document.getElementById('pinID_' + pinDefinition.id);
div!.id = 'pinID_' + (pinDefinition.id - 1);
pinDefinition.id -= 1;
}
}
if (!deleted) { if (!deleted) {
// console.log('failed to find pinID ' + pinID + ' in list of pins'); // console.log('failed to find pinID ' + pinID + ' in list of pins');
} }
@ -204,7 +214,8 @@ export class PinHandler {
// delete pin data from each frame // delete pin data from each frame
for (let f = 0; f < this.animationData.frames.length; f++) { for (let f = 0; f < this.animationData.frames.length; f++) {
if (this.animationData.frames[f].pinData[pinID] !== undefined) { if (this.animationData.frames[f].pinData[pinID] !== undefined) {
delete this.animationData.frames[f].pinData[pinID]; //delete this.animationData.frames[f].pinData[pinID];
this.animationData.frames[f].pinData.splice(pinID, 1);
// console.log('deleting pinID ' + pinID + ' data from frame ' + f); // console.log('deleting pinID ' + pinID + ' data from frame ' + f);
} else { } else {
// console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist'); // console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist');

4
webpack/dev.config.js
View File

@ -8,7 +8,7 @@ module.exports = {
main: [ './index.ts' ] main: [ './index.ts' ]
}, },
output: { output: {
filename: 'exporter/bundle.js' filename: 'bundle.js'
}, },
resolve: { resolve: {
// Add `.ts` and `.tsx` as a resolvable extension. // Add `.ts` and `.tsx` as a resolvable extension.
@ -16,7 +16,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'exporter/main.css' filename: 'main.css'
}) })
], ],
module: { module: {