fixed infinite for loop

master
Beau Blyth 2019-10-04 17:03:48 -07:00
parent e0360b237a
commit aa0f2dddfa
4 changed files with 34 additions and 36 deletions

View File

@ -67,13 +67,13 @@ export class FrameHandler {
this.currentFrame = this.filenames.length - 1; this.currentFrame = this.filenames.length - 1;
} }
this.GoToFrame(this.currentFrame); this.GoToFrame(this.currentFrame);
this.RefreshFrameViewer();
} }
public GoToFrame(frame: number) { public GoToFrame(frame: number) {
this.currentFrame = frame; this.currentFrame = frame;
this.RefreshImage(); this.RefreshImage();
this.projectData.currentFrame = this.currentFrame; this.projectData.currentFrame = this.currentFrame;
this.RefreshFrameViewer();
} }
public TogglePlayingAnimation() { public TogglePlayingAnimation() {
@ -107,7 +107,6 @@ export class FrameHandler {
newDiv.addEventListener('click', () => { newDiv.addEventListener('click', () => {
this.StopPlayingAnimation(); this.StopPlayingAnimation();
this.GoToFrame(i); this.GoToFrame(i);
this.RefreshFrameViewer();
}); });
} }
}; };

View File

@ -10,6 +10,7 @@ export class PinHandler {
private allPinContainers: HTMLElement[]; private allPinContainers: HTMLElement[];
private projectData: IProjectData; private projectData: IProjectData;
private animationData: IAnimationData; private animationData: IAnimationData;
private originPin: HTMLElement;
constructor( constructor(
addPinButton: HTMLElement, addPinButton: HTMLElement,
@ -25,10 +26,15 @@ export class PinHandler {
this.projectData = projectData; this.projectData = projectData;
this.animationData = animationData; this.animationData = animationData;
this.originPin = originPin;
this.originPin.classList.add('pinButtonContainer');
// add origin click behaviour // add origin click behaviour
originPin.id = 'pinID_0'; this.originPin.id = 'pinID_0';
originPin.addEventListener('click', () => { this.originPin.addEventListener('click', () => {
this.SelectPin(originPin); this.projectData.currentlySelectedPin = 0;
this.DeselectAllPinContainers();
this.originPin.classList.add('selected');
this.CheckOriginDataExists();
}); });
// put origin into pincontainer array // put origin into pincontainer array
this.allPinContainers = [ originPin ]; this.allPinContainers = [ originPin ];
@ -96,20 +102,12 @@ export class PinHandler {
private ResetPinSelection = () => { private ResetPinSelection = () => {
this.DeselectAllPinContainers(); this.DeselectAllPinContainers();
this.allPinContainers[0].className = 'pinButtonContainerSelected';
}; };
private CheckOriginDataExists = () => { private CheckOriginDataExists = () => {
this.allPinContainers[0].className = 'pinButtonContainer'; this.originPin.classList.remove('selected');
if (this.projectData.currentlySelectedPin === 0) {
this.allPinContainers[0].className = 'pinButtonContainerSelected';
}
if (this.animationData.originX === null || this.animationData.originY === null) { if (this.animationData.originX === null || this.animationData.originY === null) {
if (this.projectData.currentlySelectedPin === 0) { this.originPin.classList.add('warning');
this.allPinContainers[0].className = 'pinButtonContainerErrorSelected';
} else {
this.allPinContainers[0].className = 'pinButtonContainerError';
}
} }
}; };
@ -169,11 +167,7 @@ export class PinHandler {
this.CheckOriginDataExists(); this.CheckOriginDataExists();
this.DeselectAllPinContainers(); this.DeselectAllPinContainers();
this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]); this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
if (pinDiv.className === 'pinButtonContainerError') { pinDiv.classList.add('selected');
pinDiv.className = 'pinButtonContainerErrorSelected';
} else {
pinDiv.className = 'pinButtonContainerSelected';
}
console.log('selected pin ' + this.projectData.currentlySelectedPin); console.log('selected pin ' + this.projectData.currentlySelectedPin);
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
}; };
@ -209,14 +203,19 @@ export class PinHandler {
private DeselectAllPinContainers = () => { private DeselectAllPinContainers = () => {
for (let i = 0; i < this.allPinContainers.length; i++) { for (let i = 0; i < this.allPinContainers.length; i++) {
const pinDiv = this.allPinContainers[i]; const pinDiv = this.allPinContainers[i];
pinDiv.className = 'pinButtonContainer'; pinDiv.classList.remove('selected', 'warning');
console.log('in i');
if (i > 0) { if (i > 0) {
console.log('i>0');
// check frames for missing pin info // check frames for missing pin info
const pinNumber = this.GetPinNumberFromID(pinDiv.id); const pinNumber = this.GetPinNumberFromID(pinDiv.id);
for (let f = 0; this.animationData.frames.length; f++) {
for (let f = 0; f < this.animationData.frames.length; f++) {
console.log('f = ' + f + ' this.animationData.frames.length = ' + this.animationData.frames.length);
if (this.animationData.frames[f] !== undefined) { if (this.animationData.frames[f] !== undefined) {
if (this.animationData.frames[f][pinNumber] === undefined) { if (this.animationData.frames[f][pinNumber] === undefined) {
pinDiv.className = 'pinButtonContainerError'; pinDiv.classList.add('warning');
console.log('added warning');
break; break;
} }
} }

View File

@ -98,19 +98,19 @@ body {
border: 2px solid $main-border-color; border: 2px solid $main-border-color;
padding: 1px; padding: 1px;
// .warning { .warning {
// border: 2px solid $warning-border-color; border: 2px solid $warning-border-color;
// background-color: $warning-bg-color; background-color: $warning-bg-color;
// } }
// .selected { .selected {
// border: 2px solid $selected-border-color; border: 2px solid $selected-border-color;
// background-color: $selected-bg-color; background-color: $selected-bg-color;
// .warning { .warning {
// border: 2px solid $warning-selected-border-color; border: 2px solid $warning-selected-border-color;
// background-color: $warning-selected-bg-color; background-color: $warning-selected-bg-color;
// } }
// } }
} }
.removeButton { .removeButton {

2
dist/index.html vendored
View File

@ -20,7 +20,7 @@
<div id="frameViewer"></div> <div id="frameViewer"></div>
<button id="addpin">Create New Pin</button> <button id="addpin">Create New Pin</button>
<div id="pinContainer" class="pinContainer"> <div id="pinContainer" class="pinContainer">
<div class="pinButtonContainerSelected" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button> <div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
</div> </div>
</div> </div>
<div id="settings"> <div id="settings">