beginning of pin settings

app/page.ts

@@ -6,6 +6,7 @@ import { FrameHandler } from './frame_handler';
 import { IAnimationData } from './Interfaces/IAnimationData';
 import { ICanvasData } from './Interfaces/ICanvasData';
 import { IFrame } from './Interfaces/IFrame';
+import { PinHandler } from './pin_handler';
 
 export class Page {
 	private static handleDragOver(evt: DragEvent) {
@@ -16,6 +17,7 @@ export class Page {
 		}
 	}
 
+	private pinHandler: PinHandler;
 	private frameHandler: FrameHandler;
 	private canvasHandler: CanvasHandler;
 	private animationData: IAnimationData;
@@ -55,6 +57,11 @@ export class Page {
 
 		const imageElement = new Image();
 
+		this.pinHandler = new PinHandler(
+			document.getElementById('addpin') as HTMLElement,
+			document.getElementById('pinSettings') as HTMLElement
+		);
+
 		// setup canvas
 		this.canvasHandler = new CanvasHandler(
 			this.animationData,

app/pin_handler.ts

@@ -0,0 +1,26 @@
+export class PinHandler {
+	private addPinButton: HTMLElement;
+	private pinSettingsDiv: HTMLElement;
+	private pins: number = 1;
+
+	constructor(addPinButton: HTMLElement, pinSettingsDiv: HTMLElement) {
+		this.addPinButton = addPinButton;
+		this.pinSettingsDiv = pinSettingsDiv;
+		this.UpdatePinSettingsDiv();
+
+		this.addPinButton.addEventListener('click', this.AddPinButtonPressed);
+	}
+
+	private UpdatePinSettingsDiv() {
+		let html: string = '';
+		for (let i = 0; i < this.pins; i++) {
+			html += '<input type="text" id="pinname' + i + '" value="pinname' + i + '">';
+		}
+		this.pinSettingsDiv.innerHTML = html;
+	}
+
+	private AddPinButtonPressed() {
+		this.pins += 1;
+		this.UpdatePinSettingsDiv();
+	}
+}

dist/index.html

@@ -21,6 +21,8 @@
           <div id="canvasStyle">
             <canvas id="canvasImage" alt=""></canvas>
           </div>
+          <button id="addpin">Create New Pin</button>
+          <div id="pinSettings"></div>
           <div id="settings">
               Name: <input type = "text" id="filename"><br>
               <div id = "originInfo">Click image to set Origin</div>