click to set origin

app/Interfaces/ICanvasData.ts

@@ -0,0 +1,6 @@
+export interface ICanvasData {
+	width: number;
+	height: number;
+	widthRatio: number;
+	heightRatio: number;
+}

app/canvas_handler.ts

@@ -1,17 +1,60 @@
+import { IAnimationData } from './Interfaces/IAnimationData';
+import { ICanvasData } from './Interfaces/ICanvasData';
+
 // I display the canvas and am clickable
 export class CanvasHandler {
 	private currentImageDiv: HTMLElement;
+	private canvasImage: HTMLCanvasElement;
+	private imageElement: HTMLImageElement;
+	private animationData: IAnimationData;
+	private canvasData: ICanvasData;
+	private orginInfo: HTMLElement;
 
-	constructor(currentImageDiv: HTMLElement) {
+	constructor(
+		animationData: IAnimationData,
+		canvasData: ICanvasData,
+		canvasImage: HTMLCanvasElement,
+		currentImageDiv: HTMLElement,
+		imageElement: HTMLImageElement,
+		originInfo: HTMLElement
+	) {
+		this.animationData = animationData;
+		this.canvasData = canvasData;
+		this.canvasImage = canvasImage;
 		this.currentImageDiv = currentImageDiv;
-		console.log(this.currentImageDiv);
+		this.imageElement = imageElement;
+		this.orginInfo = originInfo;
+
+		//setup canvas
+		this.canvasImage.width = 256;
+		this.canvasImage.height = 256;
+		this.UpdateCanvasDataSize();
+		const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
+		canvasContext.fillRect(0, 0, 256, 256);
+
+		this.currentImageDiv.addEventListener('click', this.mouseDown);
 	}
 
-	public Load() {
+	private UpdateCanvasDataSize() {
-		const mouseDown = (event: MouseEvent) => {
+		this.canvasData.width = this.canvasImage.width;
-			console.log(event.x + ' ' + event.y);
+		this.canvasData.height = this.canvasImage.height;
+	}
+
+	private mouseDown = (event: MouseEvent) => {
+		// 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);
+		// update animation data
+		this.animationData.originX = pixelX;
+		this.animationData.originY = pixelY;
+		// update canvas data
+		this.canvasData.widthRatio = ratioWidth;
+		this.canvasData.heightRatio = ratioHeight;
+		// update origin number display
+		this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY;
 	};
-
-		this.currentImageDiv.addEventListener('mousedown', mouseDown);
-	}
 }

app/frame_handler.ts

@@ -1,32 +1,38 @@
 import { IAnimationData } from './Interfaces/IAnimationData';
+import { ICanvasData } from './Interfaces/ICanvasData';
 
 export class FrameHandler {
 	private start: number = 0;
 
 	private frameNumberDiv: HTMLElement;
+
 	private animationData: IAnimationData;
+	private canvasData: ICanvasData;
 
 	private filenames: string[] = [];
 	private currentFrame: number = 0;
 	private playingAnimation: boolean;
 
-	private canvasImage: HTMLCanvasElement;
+	private htmlCanvasElement: HTMLCanvasElement;
 	private canvasContext: CanvasRenderingContext2D;
 
 	private imageElement: HTMLImageElement;
 
 	constructor(
 		animationData: IAnimationData,
-		canvasImage: HTMLCanvasElement,
+		canvasData: ICanvasData,
+		htmlCanvasElement: HTMLCanvasElement,
 		canvasContext: CanvasRenderingContext2D,
-		frameNumberDiv: HTMLElement
+		frameNumberDiv: HTMLElement,
+		imageElement: HTMLImageElement
 	) {
 		this.animationData = animationData;
-		this.canvasImage = canvasImage;
+		this.canvasData = canvasData;
+		this.htmlCanvasElement = htmlCanvasElement;
 		this.canvasContext = canvasContext;
 		this.frameNumberDiv = frameNumberDiv;
 		window.requestAnimationFrame(this.windowAnimationUpdate);
-		this.imageElement = new Image();
+		this.imageElement = imageElement;
 		this.canvasContext.imageSmoothingEnabled = false;
 	}
 
@@ -67,9 +73,27 @@ export class FrameHandler {
 			this.frameNumberDiv.className = 'warning';
 			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
-			this.canvasContext.clearRect(0, 0, this.canvasImage.width, this.canvasImage.height);
+			this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
 			this.imageElement.src = this.filenames[this.currentFrame];
-			this.canvasContext.drawImage(this.imageElement, 0, 0, this.canvasImage.width, this.canvasImage.height);
+			// draw sprite
+			this.canvasContext.drawImage(
+				this.imageElement,
+				0,
+				0,
+				this.htmlCanvasElement.width,
+				this.htmlCanvasElement.height
+			);
+			// draw origin +
+			const originCursorSize: number = 500;
+			const originX = this.animationData.originX * this.canvasData.widthRatio;
+			const originY = this.animationData.originY * this.canvasData.heightRatio;
+			this.canvasContext.beginPath();
+			this.canvasContext.moveTo(originX, originY - originCursorSize);
+			this.canvasContext.lineTo(originX, originY + originCursorSize);
+			this.canvasContext.moveTo(originX - originCursorSize, originY);
+			this.canvasContext.lineTo(originX + originCursorSize, originY);
+			this.canvasContext.stroke();
+
 			this.frameNumberDiv.className = 'instruction';
 			this.frameNumberDiv.innerText =
 				'Frame  ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();

app/page.ts

@@ -2,6 +2,7 @@ import { CanvasHandler } from './canvas_handler';
 import { FileHandler } from './file_handler';
 import { FrameHandler } from './frame_handler';
 import { IAnimationData } from './Interfaces/IAnimationData';
+import { ICanvasData } from './Interfaces/ICanvasData';
 import { IFrame } from './Interfaces/IFrame';
 
 export class Page {
@@ -22,6 +23,8 @@ export class Page {
 	private canvasImage: HTMLCanvasElement;
 	private canvasContext: CanvasRenderingContext2DSettings;
 
+	private canvasData: ICanvasData;
+
 	public Load() {
 		// defining blank slate animation data
 		this.animationData = {
@@ -37,26 +40,39 @@ export class Page {
 				}
 			]
 		};
+		//blank slate canvas data
+		this.canvasData = {
+			width: 0,
+			height: 0,
+			widthRatio: 0,
+			heightRatio: 0
+		};
+
+		const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
+
+		const imageElement = new Image();
 
 		// setup canvas
-		this.canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement;
+		this.canvasHandler = new CanvasHandler(
-		this.canvasImage.width = 256;
-		this.canvasImage.height = 256;
-
-		const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
-		canvasContext.fillRect(0, 0, 256, 256);
-
-		this.canvasHandler = new CanvasHandler(document.getElementById('currentImage') as HTMLElement);
-		// this.canvasHandler.currentImageDiv.addEventListener('onmousedown', ClickOnCanvas);
-
-		this.frameHandler = new FrameHandler(
 			this.animationData,
-			this.canvasImage,
+			this.canvasData,
-			canvasContext,
+			canvasElement,
-			document.getElementById('frameNumber') as HTMLElement
+			document.getElementById('currentImage') as HTMLElement,
+			imageElement,
+			document.getElementById('originInfo') as HTMLElement
 		);
 
-		//input elements
+		// setup frame handler
+		this.frameHandler = new FrameHandler(
+			this.animationData,
+			this.canvasData,
+			canvasElement,
+			canvasElement.getContext('2d')!,
+			document.getElementById('frameNumber') as HTMLElement,
+			imageElement
+		);
+
+		// input elements
 		this.frameRateInput = document.getElementById('framerate') as HTMLInputElement;
 		this.frameRateInput.addEventListener('change', this.updateFrameRate);
 		this.frameRateInput.value = this.animationData.frameRate.toString();
@@ -153,6 +169,7 @@ export class Page {
 		this.frameHandler.StopPlayingAnimation();
 		this.frameHandler.TogglePlayingAnimation();
 		console.log(this.animationData);
+		//set framedata initialized to true
 	};
 
 	private download(filename: string, text: string) {
@@ -170,6 +187,8 @@ export class Page {
 
 	private updateFrameRate = () => {
 		this.animationData.frameRate = this.frameRateInput.valueAsNumber;
+		this.frameHandler.StopPlayingAnimation();
+		this.frameHandler.TogglePlayingAnimation();
 		console.log('new frame rate = ' + this.animationData.frameRate);
 	};
 

dist/index.html

@@ -23,8 +23,7 @@
           </div>
 
           <div id="settings">
-              Origin X: <input type="number" name="originX" value="0" class="numberinput">
+              <div id = "originInfo">Click image to set Origin</div>
-              Y: <input type="number" name="originY" value="0" class="numberinput"><br>
               Fps: <input type="number" id="framerate" class="numberinput"><br>
               <input type="checkbox" id="looping" > Looping <br>
               <button id="saveButton" type="button">export .anim with (S)</button>