Add relative to absolution position code in canvas and axes

README.md

@@ -26,6 +26,9 @@ This project is licensied under the GPL 3 license - see the
 
 ## Changelog
 
+*v 0.1.7*
+- Add value to mouse display (still WIP)
+
 *v 0.1.6*
 - Add i18n feature
 - Add named argument

lichartee.js

@@ -194,6 +194,15 @@ class Manager
 		});
 		canvas.figure.canvas = canvas;
 		this.list_canvas.splice(position, 0, canvas);
+
+		var rect = element_canvas.getBoundingClientRect();
+		element_canvas.addEventListener('mousemove', (event) => {
+			console.log(canvas.pos_abs_to_rel(
+				event.x - rect.left,
+				event.y - rect.top
+			));
+		});
+
 		return canvas;
 	}
 
@@ -272,6 +281,48 @@ class Canvas
 			start_x = end_x;
 		}
 	}
+
+	/**
+	 * convert absolute position in pixel to in relative position
+	 *
+	 * @param x Number
+	 * @param y Number
+	 */
+	pos_abs_to_rel(x, y)
+	{
+		const count = this.figure.list_axes.length;
+		for (var i = 0; i < count; i++)
+		{
+			let axes = this.figure.list_axes[i];
+			let rel_pos = axes.pos_abs_to_rel(x, y);
+			if (rel_pos !== null)
+			{
+				return rel_pos;
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * convert relative position to in relative position in position
+	 *
+	 * @param x Number
+	 * @param y Number
+	 */
+	pos_rel_to_abs(x, y)
+	{
+		const count = this.figure.list_axes.length;
+		for (var i = 0; i < count; i++)
+		{
+			let axes = this.figure.list_axes[i];
+			let abs_pos = axes.pos_rel_to_abs(x, y);
+			if (abs_pos !== null)
+			{
+				return abs_pos;
+			}
+		}
+		return null;
+	}
 }
 
 /**
@@ -401,6 +452,89 @@ class Axes
 		this.lines.push(line);
 	}
 
+	/**
+	 * convert absolute position in pixel in relative position
+	 *
+	 * @param x Number
+	 * @param y Number
+	 */
+	pos_abs_to_rel(x, y)
+	{
+		if (this.box[0][0] > x)
+		{
+			return null;
+		}
+		if (this.box[1][0] < x)
+		{
+			return null;
+		}
+		if (this.box[0][1] > y)
+		{
+			return null;
+		}
+		if (this.box[1][1] < y)
+		{
+			return null;
+		}
+
+		let abs_width  = this.box[1][0]  - this.box[0][0] ;
+		let abs_height = this.box[1][1]  - this.box[0][1] ;
+		let rel_width  = this.view[1][0] - this.view[0][0];
+		let rel_height = this.view[1][1] - this.view[0][1];
+
+		let coeff_x = rel_width  / abs_width ;
+		let coeff_y = rel_height / abs_height;
+
+		let padd_x = this.view[0][0] - coeff_x * this.box[0][0];
+		let padd_y = this.view[0][1] - coeff_y * this.box[0][1];
+
+		return [
+			coeff_x * x + padd_x,
+			coeff_y * this.box[1][1] - coeff_y * y + padd_y
+		];
+	}
+
+	/**
+	 * convert relative position in absolute position in pixel
+	 *
+	 * @param x Number
+	 * @param y Number
+	 *
+	 * @returns 
+	 */
+	pos_rel_to_abs(x, y)
+	{
+		if (this.view[0][0] > x)
+		{
+			return null;
+		}
+		if (this.view[1][0] < x)
+		{
+			return null;
+		}
+		if (this.view[0][1] > y)
+		{
+			return null;
+		}
+		if (this.view[1][1] < y)
+		{
+			return null;
+		}
+
+		let abs_width  = this.box[1][0]  - this.box[0][0] ;
+		let abs_height = this.box[1][1]  - this.box[0][1] ;
+		let rel_width  = this.view[1][0] - this.view[0][0];
+		let rel_height = this.view[1][1] - this.view[0][1];
+
+		let coeff_x = abs_width  / rel_width ;
+		let coeff_y = abs_height / rel_height;
+
+		let padd_x = this.box[0][0] - coeff_x * this.view[0][0];
+		let padd_y = this.box[0][1] - coeff_y * this.view[0][1];
+
+		return [coeff_x * x + padd_x, coeff_y * y + padd_y];
+	}
+
 	/**
 	 * render the axes to the canvas
 	 *
@@ -445,7 +579,8 @@ class Axes
 				)
 			)
 		);
-		let n_box = box;
+		this.view  = [ [x_min, y_min], [x_max , y_max] ];
+		let n_box  = box;
 		if (this.title !== undefined)
 		{
 			n_box = this.title.draw({
@@ -454,19 +589,17 @@ class Axes
 			});
 		}
 		n_box = this.axis.draw({
-			ctx : ctx                                ,
+			ctx : ctx       ,
-			box : n_box                              ,
+			box : n_box     ,
-			view : [ [x_min, y_min], [x_max, y_max] ],
+			view : this.view,
 		});
+		this.box  = n_box;
 		for (const index_line in this.lines)
 		{
 			this.lines[index_line].draw({
-				ctx : ctx   ,
+				ctx : ctx      ,
-				box : n_box ,
+				box : n_box    ,
-				view: [
+				view: this.view,
-					[x_min, y_min],
-					[x_max, y_max],
-				]           ,
 			});
 		}
 		ctx.beginPath();