From b4a054b9974af2fb5607844fb96244a435e3bbae Mon Sep 17 00:00:00 2001 From: Beau Blyth Date: Fri, 4 Oct 2019 17:38:18 -0700 Subject: [PATCH] pinbox status update --- app/canvas_handler.ts | 6 ++- app/page.ts | 5 ++- app/pin_handler.ts | 80 +++++++++++++++++++-------------------- app/stylesheets/main.scss | 6 +-- 4 files changed, 50 insertions(+), 47 deletions(-) diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 2a9a1b3..8023312 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -9,6 +9,7 @@ export class CanvasHandler { private animationData: IAnimationData; private projectData: IProjectData; private orginInfo: HTMLElement; + private canvasClickEvent: Event; private targetImageSize: number = 256; @@ -17,13 +18,15 @@ export class CanvasHandler { canvasData: IProjectData, canvasImage: HTMLCanvasElement, imageElement: HTMLImageElement, - originInfo: HTMLElement + originInfo: HTMLElement, + canvasClickEvent: Event ) { this.animationData = animationData; this.projectData = canvasData; this.canvasImage = canvasImage; this.imageElement = imageElement; this.orginInfo = originInfo; + this.canvasClickEvent = canvasClickEvent; this.ResizeCanvas(); this.UpdateCanvasDataSize(); @@ -51,6 +54,7 @@ export class CanvasHandler { } private mouseDown = (event: MouseEvent) => { + document.dispatchEvent(this.canvasClickEvent); // get position const ratioWidth: number = this.canvasImage.width / this.imageElement.width; const ratioHeight: number = this.canvasImage.height / this.imageElement.height; diff --git a/app/page.ts b/app/page.ts index 4156487..746ce75 100644 --- a/app/page.ts +++ b/app/page.ts @@ -56,6 +56,8 @@ export class Page { heightRatio: 0 }; + const canvasClickEvent: Event = new Event('canvasClick'); + this.message = document.getElementById('message') as HTMLElement; const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement; @@ -76,7 +78,8 @@ export class Page { this.projectData, canvasElement, imageElement, - document.getElementById('originInfo') as HTMLElement + document.getElementById('originInfo') as HTMLElement, + canvasClickEvent ); // setup frame handler diff --git a/app/pin_handler.ts b/app/pin_handler.ts index dd4c558..f914c3f 100644 --- a/app/pin_handler.ts +++ b/app/pin_handler.ts @@ -32,17 +32,49 @@ export class PinHandler { this.originPin.id = 'pinID_0'; this.originPin.addEventListener('click', () => { this.projectData.currentlySelectedPin = 0; - this.DeselectAllPinContainers(); - this.originPin.classList.add('selected'); - this.CheckOriginDataExists(); + this.UpdatePinBoxStatus(); }); // put origin into pincontainer array this.allPinContainers = [ originPin ]; // this.UpdatePinSettingsDiv(); this.addPinButton.addEventListener('click', this.AddPinButtonPressed); + + this.pinContainer.addEventListener('canvasClick', () => { + this.UpdatePinBoxStatus(); + console.log('pin_handler read canvas click'); + }); } + public UpdatePinBoxStatus = () => { + for (let i = 0; i < this.allPinContainers.length; i++) { + const pinDiv = this.allPinContainers[i]; + pinDiv.classList.remove('selected', 'warning'); + if (i > 0) { + if (this.GetPinNumberFromID(this.allPinContainers[i].id) === this.projectData.currentlySelectedPin) { + this.allPinContainers[i].classList.add('selected'); + } + // check frames for missing pin info + const pinNumber = this.GetPinNumberFromID(pinDiv.id); + for (let f = 0; f < this.animationData.frames.length; f++) { + if (this.animationData.frames[f] !== undefined) { + if (this.animationData.frames[f][pinNumber] === undefined) { + pinDiv.classList.add('warning'); + console.log('added warning'); + break; + } + } + } + } + } + if (this.animationData.originX === null || this.animationData.originY === null) { + this.originPin.classList.add('warning'); + } + if (this.projectData.currentlySelectedPin === 0) { + this.originPin.classList.add('selected'); + } + }; + public UpdateAnimationPinNames = () => { const animationPinData: IPin[] = []; for (let i = 1; i < this.allPinContainers.length; i++) { @@ -67,7 +99,8 @@ export class PinHandler { this.RemovePinDataForID(pinID); this.allPinContainers[i].remove(); } - this.ResetPinSelection(); + this.allPinContainers.splice(1, this.allPinContainers.length - 1); + this.UpdatePinBoxStatus(); this.UpdateAnimationPinNames(); }; @@ -100,17 +133,6 @@ export class PinHandler { return parseInt(id.split('_')[1]); }; - private ResetPinSelection = () => { - this.DeselectAllPinContainers(); - }; - - private CheckOriginDataExists = () => { - this.originPin.classList.remove('selected'); - if (this.animationData.originX === null || this.animationData.originY === null) { - this.originPin.classList.add('warning'); - } - }; - private UpdatePinSettingsDiv = () => { // create info window div and append to pincontainer const newDiv = document.createElement('div'); @@ -164,11 +186,9 @@ export class PinHandler { }; private SelectPin = (pinDiv: HTMLElement) => { - this.CheckOriginDataExists(); - this.DeselectAllPinContainers(); this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]); - pinDiv.classList.add('selected'); console.log('selected pin ' + this.projectData.currentlySelectedPin); + this.UpdatePinBoxStatus(); this.UpdateAnimationPinNames(); }; @@ -200,30 +220,6 @@ export class PinHandler { } }; - private DeselectAllPinContainers = () => { - for (let i = 0; i < this.allPinContainers.length; i++) { - const pinDiv = this.allPinContainers[i]; - pinDiv.classList.remove('selected', 'warning'); - console.log('in i'); - if (i > 0) { - console.log('i>0'); - // check frames for missing pin info - const pinNumber = this.GetPinNumberFromID(pinDiv.id); - - 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][pinNumber] === undefined) { - pinDiv.classList.add('warning'); - console.log('added warning'); - break; - } - } - } - } - } - }; - private AddPinButtonPressed = () => { this.UpdatePinSettingsDiv(); this.pins += 1; diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss index 8651cda..f7eadef 100644 --- a/app/stylesheets/main.scss +++ b/app/stylesheets/main.scss @@ -98,15 +98,15 @@ body { border: 2px solid $main-border-color; padding: 1px; - .warning { + &.warning { border: 2px solid $warning-border-color; background-color: $warning-bg-color; } - .selected { + &.selected { border: 2px solid $selected-border-color; background-color: $selected-bg-color; - .warning { + &.warning { border: 2px solid $warning-selected-border-color; background-color: $warning-selected-bg-color; }