MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

beginning of pin settings

master
Beau Blyth 2019-09-28 10:59:50 -07:00
parent 65887ec926
commit bf0e66c77c
4 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/page.ts
View File

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

26
app/pin_handler.ts Normal file
View File

@ -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();
}
}

2
dist/index.html vendored
View File

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

70
package.json
View File

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