From bdb683e394519e10e06376ffd4e177420f6ab7c4 Mon Sep 17 00:00:00 2001
From: Beau Blyth <teknopants@gmail.com>
Date: Fri, 4 Oct 2019 19:31:21 -0700
Subject: [PATCH] removed canvas click event

---
 app/canvas_handler.ts | 8 ++------
 app/page.ts           | 6 ++----
 app/pin_handler.ts    | 4 +++-
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts
index 8023312..b7b997f 100644
--- a/app/canvas_handler.ts
+++ b/app/canvas_handler.ts
@@ -9,7 +9,6 @@ export class CanvasHandler {
 	private animationData: IAnimationData;
 	private projectData: IProjectData;
 	private orginInfo: HTMLElement;
-	private canvasClickEvent: Event;
 
 	private targetImageSize: number = 256;
 
@@ -18,15 +17,13 @@ export class CanvasHandler {
 		canvasData: IProjectData,
 		canvasImage: HTMLCanvasElement,
 		imageElement: HTMLImageElement,
-		originInfo: HTMLElement,
-		canvasClickEvent: Event
+		originInfo: HTMLElement
 	) {
 		this.animationData = animationData;
 		this.projectData = canvasData;
 		this.canvasImage = canvasImage;
 		this.imageElement = imageElement;
 		this.orginInfo = originInfo;
-		this.canvasClickEvent = canvasClickEvent;
 
 		this.ResizeCanvas();
 		this.UpdateCanvasDataSize();
@@ -34,7 +31,7 @@ export class CanvasHandler {
 		canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
 		canvasContext.imageSmoothingEnabled = false;
 
-		this.canvasImage.addEventListener('click', this.mouseDown);
+		this.canvasImage.addEventListener('mousedown', this.mouseDown);
 	}
 
 	public ResizeCanvas() {
@@ -54,7 +51,6 @@ 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 746ce75..eedf850 100644
--- a/app/page.ts
+++ b/app/page.ts
@@ -56,8 +56,6 @@ 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;
 
@@ -68,6 +66,7 @@ export class Page {
 			document.getElementById('pinSettings') as HTMLElement,
 			document.getElementById('pinContainer') as HTMLElement,
 			document.getElementById('originPin') as HTMLElement,
+			canvasElement,
 			this.projectData,
 			this.animationData
 		);
@@ -78,8 +77,7 @@ export class Page {
 			this.projectData,
 			canvasElement,
 			imageElement,
-			document.getElementById('originInfo') as HTMLElement,
-			canvasClickEvent
+			document.getElementById('originInfo') as HTMLElement
 		);
 
 		// setup frame handler
diff --git a/app/pin_handler.ts b/app/pin_handler.ts
index f914c3f..91d109c 100644
--- a/app/pin_handler.ts
+++ b/app/pin_handler.ts
@@ -17,6 +17,7 @@ export class PinHandler {
 		pinSettingsDiv: HTMLElement,
 		pinContainer: HTMLElement,
 		originPin: HTMLElement,
+		canvasElement: HTMLElement,
 		projectData: IProjectData,
 		animationData: IAnimationData
 	) {
@@ -40,7 +41,7 @@ export class PinHandler {
 		// this.UpdatePinSettingsDiv();
 		this.addPinButton.addEventListener('click', this.AddPinButtonPressed);
 
-		this.pinContainer.addEventListener('canvasClick', () => {
+		canvasElement.addEventListener('mouseup', () => {
 			this.UpdatePinBoxStatus();
 			console.log('pin_handler read canvas click');
 		});
@@ -183,6 +184,7 @@ export class PinHandler {
 			this.SelectPin(newDiv);
 		});
 		this.UpdateAnimationPinNames();
+		this.UpdatePinBoxStatus();
 	};
 
 	private SelectPin = (pinDiv: HTMLElement) => {