diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index b7b997f..865ffbe 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -1,6 +1,6 @@ import { IAnimationData } from './Interfaces/IAnimationData'; -import { IProjectData } from './Interfaces/IProjectData'; import { IFramePinData } from './Interfaces/IFramePinData'; +import { IProjectData } from './Interfaces/IProjectData'; // I display the canvas and am clickable export class CanvasHandler { @@ -30,8 +30,6 @@ export class CanvasHandler { const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!; canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.imageSmoothingEnabled = false; - - this.canvasImage.addEventListener('mousedown', this.mouseDown); } public ResizeCanvas() { @@ -39,31 +37,25 @@ export class CanvasHandler { const hwratio = this.imageElement.height / this.imageElement.width; const newWidth = this.targetImageSize / hwratio; const newHeight = this.targetImageSize; - console.log('hwratio = ' + hwratio); this.canvasImage.width = newWidth; this.canvasImage.height = newHeight; this.UpdateCanvasDataSize(); } - private UpdateCanvasDataSize() { - this.projectData.width = this.canvasImage.width; - this.projectData.height = this.canvasImage.height; - } - - private mouseDown = (event: MouseEvent) => { + public CanvasMouseDown = (offsetX: number, offsetY: number) => { // get position const ratioWidth: number = this.canvasImage.width / this.imageElement.width; const ratioHeight: number = this.canvasImage.height / this.imageElement.height; // get origin in pixels - const pixelX: number = Math.floor(event.offsetX / ratioWidth); - const pixelY: number = Math.floor(event.offsetY / ratioHeight); - console.log('CLICK X:' + pixelX + ' Y:' + pixelY); + const pixelX: number = Math.floor(offsetX / ratioWidth); + const pixelY: number = Math.floor(offsetY / ratioHeight); + // console.log('CLICK X:' + pixelX + ' Y:' + pixelY); if (this.projectData.currentlySelectedPin === 0) { // update animation data this.animationData.originX = pixelX; this.animationData.originY = pixelY; } else { - console.log('current pin id = ' + this.projectData.currentlySelectedPin); + // console.log('current pin id = ' + this.projectData.currentlySelectedPin); const newPinData: IFramePinData = { id: this.projectData.currentlySelectedPin, x: pixelX, @@ -80,4 +72,9 @@ export class CanvasHandler { // update origin number display this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY; }; + + private UpdateCanvasDataSize() { + this.projectData.width = this.canvasImage.width; + this.projectData.height = this.canvasImage.height; + } } diff --git a/app/frame_handler.ts b/app/frame_handler.ts index 2849c22..684d013 100644 --- a/app/frame_handler.ts +++ b/app/frame_handler.ts @@ -81,7 +81,6 @@ export class FrameHandler { if (this.playingAnimation && this.currentFrame === this.filenames.length - 1 && !this.animationData.loop) { this.currentFrame = -1; } - console.log('playingAnimation = ', this.playingAnimation); } public StopPlayingAnimation() { this.playingAnimation = false; diff --git a/app/page.ts b/app/page.ts index eedf850..29bac05 100644 --- a/app/page.ts +++ b/app/page.ts @@ -32,60 +32,63 @@ export class Page { private message: HTMLElement; + private addPinButton: HTMLElement; + public Load() { // defining blank slate animation data this.animationData = { - pins: [], - originX: -1, - originY: -1, frameRate: 30, - loop: true, frames: [ { filename: '' } - ] + ], + loop: true, + originX: -1, + originY: -1, + pins: [] }; // blank slate canvas data this.projectData = { currentFrame: 0, currentlySelectedPin: 0, - width: 0, height: 0, - widthRatio: 0, - heightRatio: 0 + heightRatio: 0, + width: 0, + widthRatio: 0 }; this.message = document.getElementById('message') as HTMLElement; - const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement; + const canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement; const imageElement = new Image(); this.pinHandler = new PinHandler( - document.getElementById('addpin') as HTMLElement, document.getElementById('pinSettings') as HTMLElement, document.getElementById('pinContainer') as HTMLElement, document.getElementById('originPin') as HTMLElement, - canvasElement, this.projectData, this.animationData ); + this.addPinButton = document.getElementById('addpin') as HTMLElement; + this.addPinButton.addEventListener('click', this.AddPinButtonPressed); // setup canvas this.canvasHandler = new CanvasHandler( this.animationData, this.projectData, - canvasElement, + canvasImage, imageElement, document.getElementById('originInfo') as HTMLElement ); + this.canvasImage.addEventListener('mousedown', this.CanvasMouseDown); // setup frame handler this.frameHandler = new FrameHandler( this.animationData, this.projectData, - canvasElement, - canvasElement.getContext('2d')!, + canvasImage, + canvasImage.getContext('2d')!, document.getElementById('frameNumber') as HTMLElement, imageElement, this.projectData, @@ -135,7 +138,6 @@ export class Page { case 39: case 190: { // right_arrow, carrot - console.log('next frame action'); this.frameHandler.AdvanceFrames(1); this.frameHandler.StopPlayingAnimation(); break; @@ -144,7 +146,6 @@ export class Page { case 37: case 188: { // left arrow, carrot - console.log('previous frame action'); this.frameHandler.AdvanceFrames(-1); this.frameHandler.StopPlayingAnimation(); break; @@ -210,12 +211,12 @@ export class Page { let pinDataErrorString: string = ''; let passPinData: boolean = true; for (let f = 0; f < this.animationData.frames.length; f++) { - let errorOnFrame: boolean = false; + const errorOnFrame: boolean = false; if (this.animationData.pins !== undefined) { for (let p = 0; p < this.animationData.pins.length; p++) { if (this.animationData.pins[p] !== undefined) { const pinIDtoCheck = this.animationData.pins[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][pinIDtoCheck] === undefined) { if (!errorOnFrame) { pinDataErrorString += ' Frame ' + f + ' :\n'; @@ -237,6 +238,16 @@ export class Page { return pass; } + private CanvasMouseDown = (event: MouseEvent) => { + this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY); + this.pinHandler.UpdatePinBoxStatus(); + }; + + private AddPinButtonPressed = () => { + this.pinHandler.AddNewPin(); + this.pinHandler.pins += 1; + }; + private handleFileSelect = async (event: DragEvent) => { this.ResetProgram(); @@ -299,6 +310,5 @@ export class Page { this.animationData.frameRate = this.frameRateInput.valueAsNumber; this.frameHandler.StopPlayingAnimation(); this.frameHandler.TogglePlayingAnimation(); - console.log('new frame rate = ' + this.animationData.frameRate); }; } diff --git a/app/pin_handler.ts b/app/pin_handler.ts index 91d109c..f8b3772 100644 --- a/app/pin_handler.ts +++ b/app/pin_handler.ts @@ -1,11 +1,10 @@ -import { IProjectData } from './Interfaces/IProjectData'; -import { IPin } from './Interfaces/IPin'; import { IAnimationData } from './Interfaces/IAnimationData'; +import { IPin } from './Interfaces/IPin'; +import { IProjectData } from './Interfaces/IProjectData'; export class PinHandler { - private addPinButton: HTMLElement; + public pins: number = 1; private pinSettingsDiv: HTMLElement; - private pins: number = 1; private pinContainer: HTMLElement; private allPinContainers: HTMLElement[]; private projectData: IProjectData; @@ -13,15 +12,12 @@ export class PinHandler { private originPin: HTMLElement; constructor( - addPinButton: HTMLElement, pinSettingsDiv: HTMLElement, pinContainer: HTMLElement, originPin: HTMLElement, - canvasElement: HTMLElement, projectData: IProjectData, animationData: IAnimationData ) { - this.addPinButton = addPinButton; this.pinSettingsDiv = pinSettingsDiv; this.pinContainer = pinContainer; this.projectData = projectData; @@ -37,14 +33,6 @@ export class PinHandler { }); // put origin into pincontainer array this.allPinContainers = [ originPin ]; - - // this.UpdatePinSettingsDiv(); - this.addPinButton.addEventListener('click', this.AddPinButtonPressed); - - canvasElement.addEventListener('mouseup', () => { - this.UpdatePinBoxStatus(); - console.log('pin_handler read canvas click'); - }); } public UpdatePinBoxStatus = () => { @@ -61,7 +49,7 @@ export class PinHandler { if (this.animationData.frames[f] !== undefined) { if (this.animationData.frames[f][pinNumber] === undefined) { pinDiv.classList.add('warning'); - console.log('added warning'); + // console.log('added warning'); break; } } @@ -79,11 +67,10 @@ export class PinHandler { public UpdateAnimationPinNames = () => { const animationPinData: IPin[] = []; for (let i = 1; i < this.allPinContainers.length; i++) { - console.log(this.allPinContainers[i].children); const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]); - console.log('new pin name = ' + pinName); + // console.log('new pin name = ' + pinName); if (pinName !== null && pinName !== undefined) { - let newPinData: IPin = { + const newPinData: IPin = { id: this.GetPinNumberFromID(this.allPinContainers[i].id), name: pinName }; @@ -91,7 +78,7 @@ export class PinHandler { } } this.animationData.pins = animationPinData; - console.log('updated animationPinData to ' + animationPinData); + // console.log('updated animationPinData to ' + animationPinData); }; public RemoveAllPins = () => { @@ -111,7 +98,7 @@ export class PinHandler { const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id); availablePins.push(pinID); } - console.log('available pins are: ' + availablePins); + // console.log('available pins are: ' + availablePins); return availablePins; }; @@ -126,15 +113,7 @@ export class PinHandler { return 'failed_to_return_pin_name_for_pin_' + pinID.toString(); }; - private GetPinNameFromDiv = (pinElement: HTMLElement): string => { - return pinElement.getElementsByTagName('input')[0].value; - }; - - private GetPinNumberFromID = (id: string): number => { - return parseInt(id.split('_')[1]); - }; - - private UpdatePinSettingsDiv = () => { + public AddNewPin = () => { // create info window div and append to pincontainer const newDiv = document.createElement('div'); this.allPinContainers.push(newDiv); @@ -157,11 +136,11 @@ export class PinHandler { removePinButton.className = 'removeButton'; removePinButton.addEventListener('click', () => { // get ID number for this div - const idNumber = parseInt(newDiv.id.split('_')[1]); + const idNumber = this.GetPinNumberFromID(newDiv.id); 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) { + if (this.GetPinNumberFromID(this.allPinContainers[i].id) === idNumber) { indexToDelete = i; } } @@ -187,9 +166,17 @@ export class PinHandler { this.UpdatePinBoxStatus(); }; + private GetPinNameFromDiv = (pinElement: HTMLElement): string => { + return pinElement.getElementsByTagName('input')[0].value; + }; + + private GetPinNumberFromID = (id: string): number => { + return parseInt(id.split('_')[1], 10); + }; + private SelectPin = (pinDiv: HTMLElement) => { - this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]); - console.log('selected pin ' + this.projectData.currentlySelectedPin); + this.projectData.currentlySelectedPin = this.GetPinNumberFromID(pinDiv.id); + // console.log('selected pin ' + this.projectData.currentlySelectedPin); this.UpdatePinBoxStatus(); this.UpdateAnimationPinNames(); }; @@ -199,31 +186,26 @@ export class PinHandler { 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()); + // 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); + // console.log('deleting pinID ' + pinID); deleted = true; } if (!deleted) { - console.log('failed to find pinID ' + pinID + ' in list of pins'); + // 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); + // 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'); + // console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist'); } } }; - - private AddPinButtonPressed = () => { - this.UpdatePinSettingsDiv(); - this.pins += 1; - }; }