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

removed canvas click event

master
Beau Blyth 2019-10-04 19:31:21 -07:00
parent b4a054b997
commit bdb683e394
3 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/canvas_handler.ts
View File

@ -9,7 +9,6 @@ export class CanvasHandler {
private animationData: IAnimationData; private animationData: IAnimationData;
private projectData: IProjectData; private projectData: IProjectData;
private orginInfo: HTMLElement; private orginInfo: HTMLElement;
private canvasClickEvent: Event;
private targetImageSize: number = 256; private targetImageSize: number = 256;
@ -18,15 +17,13 @@ export class CanvasHandler {
canvasData: IProjectData, canvasData: IProjectData,
canvasImage: HTMLCanvasElement, canvasImage: HTMLCanvasElement,
imageElement: HTMLImageElement, imageElement: HTMLImageElement,
originInfo: HTMLElement, originInfo: HTMLElement
canvasClickEvent: Event
) { ) {
this.animationData = animationData; this.animationData = animationData;
this.projectData = canvasData; this.projectData = canvasData;
this.canvasImage = canvasImage; this.canvasImage = canvasImage;
this.imageElement = imageElement; this.imageElement = imageElement;
this.orginInfo = originInfo; this.orginInfo = originInfo;
this.canvasClickEvent = canvasClickEvent;
this.ResizeCanvas(); this.ResizeCanvas();
this.UpdateCanvasDataSize(); this.UpdateCanvasDataSize();
@ -34,7 +31,7 @@ export class CanvasHandler {
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
canvasContext.imageSmoothingEnabled = false; canvasContext.imageSmoothingEnabled = false;
this.canvasImage.addEventListener('click', this.mouseDown); this.canvasImage.addEventListener('mousedown', this.mouseDown);
} }
public ResizeCanvas() { public ResizeCanvas() {
@ -54,7 +51,6 @@ export class CanvasHandler {
} }
private mouseDown = (event: MouseEvent) => { private mouseDown = (event: MouseEvent) => {
document.dispatchEvent(this.canvasClickEvent);
// get position // get position
const ratioWidth: number = this.canvasImage.width / this.imageElement.width; const ratioWidth: number = this.canvasImage.width / this.imageElement.width;
const ratioHeight: number = this.canvasImage.height / this.imageElement.height; const ratioHeight: number = this.canvasImage.height / this.imageElement.height;

6
app/page.ts
View File

@ -56,8 +56,6 @@ export class Page {
heightRatio: 0 heightRatio: 0
}; };
const canvasClickEvent: Event = new Event('canvasClick');
this.message = document.getElementById('message') as HTMLElement; this.message = document.getElementById('message') as HTMLElement;
const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement; const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
@ -68,6 +66,7 @@ export class Page {
document.getElementById('pinSettings') as HTMLElement, document.getElementById('pinSettings') as HTMLElement,
document.getElementById('pinContainer') as HTMLElement, document.getElementById('pinContainer') as HTMLElement,
document.getElementById('originPin') as HTMLElement, document.getElementById('originPin') as HTMLElement,
canvasElement,
this.projectData, this.projectData,
this.animationData this.animationData
); );
@ -78,8 +77,7 @@ export class Page {
this.projectData, this.projectData,
canvasElement, canvasElement,
imageElement, imageElement,
document.getElementById('originInfo') as HTMLElement, document.getElementById('originInfo') as HTMLElement
canvasClickEvent
); );
// setup frame handler // setup frame handler

4
app/pin_handler.ts
View File

@ -17,6 +17,7 @@ export class PinHandler {
pinSettingsDiv: HTMLElement, pinSettingsDiv: HTMLElement,
pinContainer: HTMLElement, pinContainer: HTMLElement,
originPin: HTMLElement, originPin: HTMLElement,
canvasElement: HTMLElement,
projectData: IProjectData, projectData: IProjectData,
animationData: IAnimationData animationData: IAnimationData
) { ) {
@ -40,7 +41,7 @@ export class PinHandler {
// this.UpdatePinSettingsDiv(); // this.UpdatePinSettingsDiv();
this.addPinButton.addEventListener('click', this.AddPinButtonPressed); this.addPinButton.addEventListener('click', this.AddPinButtonPressed);
this.pinContainer.addEventListener('canvasClick', () => { canvasElement.addEventListener('mouseup', () => {
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
console.log('pin_handler read canvas click'); console.log('pin_handler read canvas click');
}); });
@ -183,6 +184,7 @@ export class PinHandler {
this.SelectPin(newDiv); this.SelectPin(newDiv);
}); });
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
this.UpdatePinBoxStatus();
}; };
private SelectPin = (pinDiv: HTMLElement) => { private SelectPin = (pinDiv: HTMLElement) => {