pinbox status update

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;

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

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.UpdatePinBoxStatus();
-			this.originPin.classList.add('selected');
-			this.CheckOriginDataExists();
 		});
 		// 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;

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;
 		}