removed canvas click event

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;

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

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) => {