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>

package.json

@@ -1,37 +1,37 @@
 {
-  "name": "animationtool",
-  "version": "1.0.0",
-  "description": "The animation tool by Scrambler",
-  "main": "main.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --config webpack/prod.config.js",
-    "start:dev": "webpack-dev-server --config webpack/dev.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MoonsideGames/AnimationTool.git"
-  },
-  "author": "",
-  "license": "UNLICENSED",
-  "bugs": {
-    "url": "https://github.com/MoonsideGames/AnimationTool/issues"
-  },
-  "homepage": "https://github.com/MoonsideGames/AnimationTool#readme",
-  "devDependencies": {
-    "prettier": "^1.18.2",
-    "ts-loader": "^6.1.2",
-    "tslint": "^5.20.0",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.6.3",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
-  },
-  "dependencies": {
-    "@types/file-saver": "^2.0.1",
-    "@types/jszip": "^3.1.6",
-    "file-saver": "^2.0.2",
-    "jszip": "^3.2.2"
-  }
+	"name": "animationtool",
+	"version": "1.0.0",
+	"description": "The animation tool by Scrambler",
+	"main": "main.ts",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build": "webpack --config webpack/prod.config.js",
+		"start:dev": "webpack-dev-server --config webpack/dev.config.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/MoonsideGames/AnimationTool.git"
+	},
+	"author": "",
+	"license": "UNLICENSED",
+	"bugs": {
+		"url": "https://github.com/MoonsideGames/AnimationTool/issues"
+	},
+	"homepage": "https://github.com/MoonsideGames/AnimationTool#readme",
+	"devDependencies": {
+		"prettier": "^1.18.2",
+		"ts-loader": "^6.1.2",
+		"tslint": "^5.20.0",
+		"tslint-config-prettier": "^1.18.0",
+		"typescript": "^3.6.3",
+		"webpack": "^4.41.0",
+		"webpack-cli": "^3.3.9",
+		"webpack-dev-server": "^3.8.1"
+	},
+	"dependencies": {
+		"@types/file-saver": "^2.0.1",
+		"@types/jszip": "^3.1.6",
+		"file-saver": "^2.0.2",
+		"jszip": "^3.2.2"
+	}
 }