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

View File

@ -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,

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">
<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>