86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { IAnimationData } from './Interfaces/IAnimationData';
|
|
import { IFramePinData } from './Interfaces/IFramePinData';
|
|
import { IProjectData } from './Interfaces/IProjectData';
|
|
|
|
// I display the canvas and am clickable
|
|
export class CanvasHandler {
|
|
private canvasImage: HTMLCanvasElement;
|
|
private imageElement: HTMLImageElement;
|
|
private animationData: IAnimationData;
|
|
private projectData: IProjectData;
|
|
private orginInfo: HTMLElement;
|
|
|
|
private targetImageSize: number = 256;
|
|
|
|
constructor(
|
|
animationData: IAnimationData,
|
|
canvasData: IProjectData,
|
|
canvasImage: HTMLCanvasElement,
|
|
imageElement: HTMLImageElement,
|
|
originInfo: HTMLElement
|
|
) {
|
|
this.animationData = animationData;
|
|
this.projectData = canvasData;
|
|
this.canvasImage = canvasImage;
|
|
this.imageElement = imageElement;
|
|
this.orginInfo = originInfo;
|
|
|
|
this.ResizeCanvas(256, 256);
|
|
this.UpdateCanvasDataSize();
|
|
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
|
|
canvasContext.clearRect(0, 0, this.targetImageSize, this.targetImageSize);
|
|
canvasContext.imageSmoothingEnabled = false;
|
|
}
|
|
|
|
public ResizeCanvas(width: number, height: number) {
|
|
// get image ratio, then scale default width by it
|
|
const hwratio = height / width;
|
|
|
|
let newWidth = this.targetImageSize / hwratio;
|
|
let newHeight = this.targetImageSize;
|
|
|
|
if (newWidth > 600) {
|
|
newWidth = 600;
|
|
newHeight = 600 * hwratio;
|
|
}
|
|
|
|
this.canvasImage.width = newWidth;
|
|
this.canvasImage.height = newHeight;
|
|
this.UpdateCanvasDataSize();
|
|
}
|
|
|
|
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(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);
|
|
const newPinData: IFramePinData = {
|
|
id: this.projectData.currentlySelectedPin,
|
|
x: pixelX,
|
|
y: pixelY
|
|
};
|
|
|
|
this.animationData.frames[this.projectData.currentFrame][
|
|
this.projectData.currentlySelectedPin
|
|
] = newPinData;
|
|
}
|
|
// update canvas data
|
|
this.projectData.widthRatio = ratioWidth;
|
|
this.projectData.heightRatio = ratioHeight;
|
|
};
|
|
|
|
private UpdateCanvasDataSize() {
|
|
this.projectData.width = this.canvasImage.width;
|
|
this.projectData.height = this.canvasImage.height;
|
|
}
|
|
}
|