Moved listeners to Page
parent
bdb683e394
commit
23975a7401
|
|
@ -1,6 +1,6 @@
|
|||
import { IAnimationData } from './Interfaces/IAnimationData';
|
||||
import { IProjectData } from './Interfaces/IProjectData';
|
||||
import { IFramePinData } from './Interfaces/IFramePinData';
|
||||
import { IProjectData } from './Interfaces/IProjectData';
|
||||
|
||||
// I display the canvas and am clickable
|
||||
export class CanvasHandler {
|
||||
|
|
@ -30,8 +30,6 @@ export class CanvasHandler {
|
|||
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
|
||||
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
|
||||
canvasContext.imageSmoothingEnabled = false;
|
||||
|
||||
this.canvasImage.addEventListener('mousedown', this.mouseDown);
|
||||
}
|
||||
|
||||
public ResizeCanvas() {
|
||||
|
|
@ -39,31 +37,25 @@ export class CanvasHandler {
|
|||
const hwratio = this.imageElement.height / this.imageElement.width;
|
||||
const newWidth = this.targetImageSize / hwratio;
|
||||
const newHeight = this.targetImageSize;
|
||||
console.log('hwratio = ' + hwratio);
|
||||
this.canvasImage.width = newWidth;
|
||||
this.canvasImage.height = newHeight;
|
||||
this.UpdateCanvasDataSize();
|
||||
}
|
||||
|
||||
private UpdateCanvasDataSize() {
|
||||
this.projectData.width = this.canvasImage.width;
|
||||
this.projectData.height = this.canvasImage.height;
|
||||
}
|
||||
|
||||
private mouseDown = (event: MouseEvent) => {
|
||||
public CanvasMouseDown = (offsetX: number, offsetY: number) => {
|
||||
// get position
|
||||
const ratioWidth: number = this.canvasImage.width / this.imageElement.width;
|
||||
const ratioHeight: number = this.canvasImage.height / this.imageElement.height;
|
||||
// get origin in pixels
|
||||
const pixelX: number = Math.floor(event.offsetX / ratioWidth);
|
||||
const pixelY: number = Math.floor(event.offsetY / ratioHeight);
|
||||
console.log('CLICK X:' + pixelX + ' Y:' + pixelY);
|
||||
const pixelX: number = Math.floor(offsetX / ratioWidth);
|
||||
const pixelY: number = Math.floor(offsetY / ratioHeight);
|
||||
// console.log('CLICK X:' + pixelX + ' Y:' + pixelY);
|
||||
if (this.projectData.currentlySelectedPin === 0) {
|
||||
// update animation data
|
||||
this.animationData.originX = pixelX;
|
||||
this.animationData.originY = pixelY;
|
||||
} else {
|
||||
console.log('current pin id = ' + this.projectData.currentlySelectedPin);
|
||||
// console.log('current pin id = ' + this.projectData.currentlySelectedPin);
|
||||
const newPinData: IFramePinData = {
|
||||
id: this.projectData.currentlySelectedPin,
|
||||
x: pixelX,
|
||||
|
|
@ -80,4 +72,9 @@ export class CanvasHandler {
|
|||
// update origin number display
|
||||
this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY;
|
||||
};
|
||||
|
||||
private UpdateCanvasDataSize() {
|
||||
this.projectData.width = this.canvasImage.width;
|
||||
this.projectData.height = this.canvasImage.height;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ export class FrameHandler {
|
|||
if (this.playingAnimation && this.currentFrame === this.filenames.length - 1 && !this.animationData.loop) {
|
||||
this.currentFrame = -1;
|
||||
}
|
||||
console.log('playingAnimation = ', this.playingAnimation);
|
||||
}
|
||||
public StopPlayingAnimation() {
|
||||
this.playingAnimation = false;
|
||||
|
|
|
|||
48
app/page.ts
48
app/page.ts
|
|
@ -32,60 +32,63 @@ export class Page {
|
|||
|
||||
private message: HTMLElement;
|
||||
|
||||
private addPinButton: HTMLElement;
|
||||
|
||||
public Load() {
|
||||
// defining blank slate animation data
|
||||
this.animationData = {
|
||||
pins: [],
|
||||
originX: -1,
|
||||
originY: -1,
|
||||
frameRate: 30,
|
||||
loop: true,
|
||||
frames: [
|
||||
{
|
||||
filename: ''
|
||||
}
|
||||
]
|
||||
],
|
||||
loop: true,
|
||||
originX: -1,
|
||||
originY: -1,
|
||||
pins: []
|
||||
};
|
||||
// blank slate canvas data
|
||||
this.projectData = {
|
||||
currentFrame: 0,
|
||||
currentlySelectedPin: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
widthRatio: 0,
|
||||
heightRatio: 0
|
||||
heightRatio: 0,
|
||||
width: 0,
|
||||
widthRatio: 0
|
||||
};
|
||||
|
||||
this.message = document.getElementById('message') as HTMLElement;
|
||||
const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
|
||||
const canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement;
|
||||
|
||||
const imageElement = new Image();
|
||||
|
||||
this.pinHandler = new PinHandler(
|
||||
document.getElementById('addpin') as HTMLElement,
|
||||
document.getElementById('pinSettings') as HTMLElement,
|
||||
document.getElementById('pinContainer') as HTMLElement,
|
||||
document.getElementById('originPin') as HTMLElement,
|
||||
canvasElement,
|
||||
this.projectData,
|
||||
this.animationData
|
||||
);
|
||||
this.addPinButton = document.getElementById('addpin') as HTMLElement;
|
||||
this.addPinButton.addEventListener('click', this.AddPinButtonPressed);
|
||||
|
||||
// setup canvas
|
||||
this.canvasHandler = new CanvasHandler(
|
||||
this.animationData,
|
||||
this.projectData,
|
||||
canvasElement,
|
||||
canvasImage,
|
||||
imageElement,
|
||||
document.getElementById('originInfo') as HTMLElement
|
||||
);
|
||||
this.canvasImage.addEventListener('mousedown', this.CanvasMouseDown);
|
||||
|
||||
// setup frame handler
|
||||
this.frameHandler = new FrameHandler(
|
||||
this.animationData,
|
||||
this.projectData,
|
||||
canvasElement,
|
||||
canvasElement.getContext('2d')!,
|
||||
canvasImage,
|
||||
canvasImage.getContext('2d')!,
|
||||
document.getElementById('frameNumber') as HTMLElement,
|
||||
imageElement,
|
||||
this.projectData,
|
||||
|
|
@ -135,7 +138,6 @@ export class Page {
|
|||
case 39:
|
||||
case 190: {
|
||||
// right_arrow, carrot
|
||||
console.log('next frame action');
|
||||
this.frameHandler.AdvanceFrames(1);
|
||||
this.frameHandler.StopPlayingAnimation();
|
||||
break;
|
||||
|
|
@ -144,7 +146,6 @@ export class Page {
|
|||
case 37:
|
||||
case 188: {
|
||||
// left arrow, carrot
|
||||
console.log('previous frame action');
|
||||
this.frameHandler.AdvanceFrames(-1);
|
||||
this.frameHandler.StopPlayingAnimation();
|
||||
break;
|
||||
|
|
@ -210,12 +211,12 @@ export class Page {
|
|||
let pinDataErrorString: string = '';
|
||||
let passPinData: boolean = true;
|
||||
for (let f = 0; f < this.animationData.frames.length; f++) {
|
||||
let errorOnFrame: boolean = false;
|
||||
const errorOnFrame: boolean = false;
|
||||
if (this.animationData.pins !== undefined) {
|
||||
for (let p = 0; p < this.animationData.pins.length; p++) {
|
||||
if (this.animationData.pins[p] !== undefined) {
|
||||
const pinIDtoCheck = this.animationData.pins[p].id;
|
||||
console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
|
||||
// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
|
||||
if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
|
||||
if (!errorOnFrame) {
|
||||
pinDataErrorString += ' Frame ' + f + ' :\n';
|
||||
|
|
@ -237,6 +238,16 @@ export class Page {
|
|||
return pass;
|
||||
}
|
||||
|
||||
private CanvasMouseDown = (event: MouseEvent) => {
|
||||
this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY);
|
||||
this.pinHandler.UpdatePinBoxStatus();
|
||||
};
|
||||
|
||||
private AddPinButtonPressed = () => {
|
||||
this.pinHandler.AddNewPin();
|
||||
this.pinHandler.pins += 1;
|
||||
};
|
||||
|
||||
private handleFileSelect = async (event: DragEvent) => {
|
||||
this.ResetProgram();
|
||||
|
||||
|
|
@ -299,6 +310,5 @@ export class Page {
|
|||
this.animationData.frameRate = this.frameRateInput.valueAsNumber;
|
||||
this.frameHandler.StopPlayingAnimation();
|
||||
this.frameHandler.TogglePlayingAnimation();
|
||||
console.log('new frame rate = ' + this.animationData.frameRate);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { IProjectData } from './Interfaces/IProjectData';
|
||||
import { IPin } from './Interfaces/IPin';
|
||||
import { IAnimationData } from './Interfaces/IAnimationData';
|
||||
import { IPin } from './Interfaces/IPin';
|
||||
import { IProjectData } from './Interfaces/IProjectData';
|
||||
|
||||
export class PinHandler {
|
||||
private addPinButton: HTMLElement;
|
||||
public pins: number = 1;
|
||||
private pinSettingsDiv: HTMLElement;
|
||||
private pins: number = 1;
|
||||
private pinContainer: HTMLElement;
|
||||
private allPinContainers: HTMLElement[];
|
||||
private projectData: IProjectData;
|
||||
|
|
@ -13,15 +12,12 @@ export class PinHandler {
|
|||
private originPin: HTMLElement;
|
||||
|
||||
constructor(
|
||||
addPinButton: HTMLElement,
|
||||
pinSettingsDiv: HTMLElement,
|
||||
pinContainer: HTMLElement,
|
||||
originPin: HTMLElement,
|
||||
canvasElement: HTMLElement,
|
||||
projectData: IProjectData,
|
||||
animationData: IAnimationData
|
||||
) {
|
||||
this.addPinButton = addPinButton;
|
||||
this.pinSettingsDiv = pinSettingsDiv;
|
||||
this.pinContainer = pinContainer;
|
||||
this.projectData = projectData;
|
||||
|
|
@ -37,14 +33,6 @@ export class PinHandler {
|
|||
});
|
||||
// put origin into pincontainer array
|
||||
this.allPinContainers = [ originPin ];
|
||||
|
||||
// this.UpdatePinSettingsDiv();
|
||||
this.addPinButton.addEventListener('click', this.AddPinButtonPressed);
|
||||
|
||||
canvasElement.addEventListener('mouseup', () => {
|
||||
this.UpdatePinBoxStatus();
|
||||
console.log('pin_handler read canvas click');
|
||||
});
|
||||
}
|
||||
|
||||
public UpdatePinBoxStatus = () => {
|
||||
|
|
@ -61,7 +49,7 @@ export class PinHandler {
|
|||
if (this.animationData.frames[f] !== undefined) {
|
||||
if (this.animationData.frames[f][pinNumber] === undefined) {
|
||||
pinDiv.classList.add('warning');
|
||||
console.log('added warning');
|
||||
// console.log('added warning');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,11 +67,10 @@ export class PinHandler {
|
|||
public UpdateAnimationPinNames = () => {
|
||||
const animationPinData: IPin[] = [];
|
||||
for (let i = 1; i < this.allPinContainers.length; i++) {
|
||||
console.log(this.allPinContainers[i].children);
|
||||
const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]);
|
||||
console.log('new pin name = ' + pinName);
|
||||
// console.log('new pin name = ' + pinName);
|
||||
if (pinName !== null && pinName !== undefined) {
|
||||
let newPinData: IPin = {
|
||||
const newPinData: IPin = {
|
||||
id: this.GetPinNumberFromID(this.allPinContainers[i].id),
|
||||
name: pinName
|
||||
};
|
||||
|
|
@ -91,7 +78,7 @@ export class PinHandler {
|
|||
}
|
||||
}
|
||||
this.animationData.pins = animationPinData;
|
||||
console.log('updated animationPinData to ' + animationPinData);
|
||||
// console.log('updated animationPinData to ' + animationPinData);
|
||||
};
|
||||
|
||||
public RemoveAllPins = () => {
|
||||
|
|
@ -111,7 +98,7 @@ export class PinHandler {
|
|||
const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
|
||||
availablePins.push(pinID);
|
||||
}
|
||||
console.log('available pins are: ' + availablePins);
|
||||
// console.log('available pins are: ' + availablePins);
|
||||
return availablePins;
|
||||
};
|
||||
|
||||
|
|
@ -126,15 +113,7 @@ export class PinHandler {
|
|||
return 'failed_to_return_pin_name_for_pin_' + pinID.toString();
|
||||
};
|
||||
|
||||
private GetPinNameFromDiv = (pinElement: HTMLElement): string => {
|
||||
return pinElement.getElementsByTagName('input')[0].value;
|
||||
};
|
||||
|
||||
private GetPinNumberFromID = (id: string): number => {
|
||||
return parseInt(id.split('_')[1]);
|
||||
};
|
||||
|
||||
private UpdatePinSettingsDiv = () => {
|
||||
public AddNewPin = () => {
|
||||
// create info window div and append to pincontainer
|
||||
const newDiv = document.createElement('div');
|
||||
this.allPinContainers.push(newDiv);
|
||||
|
|
@ -157,11 +136,11 @@ export class PinHandler {
|
|||
removePinButton.className = 'removeButton';
|
||||
removePinButton.addEventListener('click', () => {
|
||||
// get ID number for this div
|
||||
const idNumber = parseInt(newDiv.id.split('_')[1]);
|
||||
const idNumber = this.GetPinNumberFromID(newDiv.id);
|
||||
let indexToDelete: number = 0;
|
||||
// that id from allPinContainers
|
||||
for (let i = 0; i < this.allPinContainers.length; i++) {
|
||||
if (parseInt(this.allPinContainers[i].id.split('_')[1]) === idNumber) {
|
||||
if (this.GetPinNumberFromID(this.allPinContainers[i].id) === idNumber) {
|
||||
indexToDelete = i;
|
||||
}
|
||||
}
|
||||
|
|
@ -187,9 +166,17 @@ export class PinHandler {
|
|||
this.UpdatePinBoxStatus();
|
||||
};
|
||||
|
||||
private GetPinNameFromDiv = (pinElement: HTMLElement): string => {
|
||||
return pinElement.getElementsByTagName('input')[0].value;
|
||||
};
|
||||
|
||||
private GetPinNumberFromID = (id: string): number => {
|
||||
return parseInt(id.split('_')[1], 10);
|
||||
};
|
||||
|
||||
private SelectPin = (pinDiv: HTMLElement) => {
|
||||
this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
|
||||
console.log('selected pin ' + this.projectData.currentlySelectedPin);
|
||||
this.projectData.currentlySelectedPin = this.GetPinNumberFromID(pinDiv.id);
|
||||
// console.log('selected pin ' + this.projectData.currentlySelectedPin);
|
||||
this.UpdatePinBoxStatus();
|
||||
this.UpdateAnimationPinNames();
|
||||
};
|
||||
|
|
@ -199,31 +186,26 @@ export class PinHandler {
|
|||
|
||||
let deleted: boolean = false;
|
||||
for (let i = 0; i < this.animationData.pins.length; i++) {
|
||||
console.log('checking if ' + this.animationData.pins[i].id.toString + ' === ' + pinID.toString());
|
||||
// console.log('checking if ' + this.animationData.pins[i].id.toString + ' === ' + pinID.toString());
|
||||
if (this.animationData.pins[i].id === pinID) {
|
||||
delete this.animationData.pins[i];
|
||||
}
|
||||
console.log('deleting pinID ' + pinID);
|
||||
// console.log('deleting pinID ' + pinID);
|
||||
deleted = true;
|
||||
}
|
||||
|
||||
if (!deleted) {
|
||||
console.log('failed to find pinID ' + pinID + ' in list of pins');
|
||||
// console.log('failed to find pinID ' + pinID + ' in list of pins');
|
||||
}
|
||||
|
||||
// delete pin data from each frame
|
||||
for (let f = 0; f < this.animationData.frames.length; f++) {
|
||||
if (this.animationData.frames[f][pinID] !== undefined) {
|
||||
delete this.animationData.frames[f][pinID];
|
||||
console.log('deleting pinID ' + pinID + ' data from frame ' + f);
|
||||
// console.log('deleting pinID ' + pinID + ' data from frame ' + f);
|
||||
} else {
|
||||
console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist');
|
||||
// console.log('tried to delete pinID ' + pinID + ' data from frame ' + f + ' but it doesnt exist');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private AddPinButtonPressed = () => {
|
||||
this.UpdatePinSettingsDiv();
|
||||
this.pins += 1;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue