Moved listeners to Page

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() {
+	public CanvasMouseDown = (offsetX: number, offsetY: number) => {
-		this.projectData.width = this.canvasImage.width;
-		this.projectData.height = this.canvasImage.height;
-	}
-
-	private mouseDown = (event: MouseEvent) => {
 		// 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 pixelX: number = Math.floor(offsetX / ratioWidth);
-		const pixelY: number = Math.floor(event.offsetY / ratioHeight);
+		const pixelY: number = Math.floor(offsetY / ratioHeight);
-		console.log('CLICK X:' + pixelX + ' Y:' + pixelY);
+		// 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;
+	}
 }

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;

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,
+			canvasImage,
-			canvasElement.getContext('2d')!,
+			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);
 	};
 }

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 => {
+	public AddNewPin = () => {
-		return pinElement.getElementsByTagName('input')[0].value;
-	};
-
-	private GetPinNumberFromID = (id: string): number => {
-		return parseInt(id.split('_')[1]);
-	};
-
-	private UpdatePinSettingsDiv = () => {
 		// 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]);
+		this.projectData.currentlySelectedPin = this.GetPinNumberFromID(pinDiv.id);
-		console.log('selected pin ' + this.projectData.currentlySelectedPin);
+		// 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;
-	};
 }