Add linestyle support

README.md

@@ -28,10 +28,15 @@ This project is licensied under the Chocolate-Ware license - see the
 
 ## Changelog
 
-*v.0.1*
+*v 0.1.1*
+- Allow the use of dashed and dotted line
+- Remove Style class
+- Improve rectangular box between axes
+- Improve examples in [test.js](test.js)
+
+*v 0.1.0*
 - creation of a basic layout
 
 ## Roadmap
 
-- Add linestyle support
 - Add documentation

lichartee.js

@@ -74,31 +74,15 @@ class Canvas
 		for (const index_axes in this.figure.list_axes)
 		{
 			let axes = this.figure.list_axes[index_axes];
-			let x_proportion = axes.width/this.figure.width
+			let x_proportion = axes.width/this.figure.width;
+			let end_x = start_x + this.ctx.canvas.width * x_proportion;
 			this.ctx.beginPath();
-			this.ctx.moveTo(
+			this.ctx.strokeStyle = 'black';
-				start_x,
+			this.ctx.setLineDash([]);
-				0
+			this.ctx.strokeRect(
+				start_x, 0                   ,
+				end_x, this.ctx.canvas.height
 			);
-			this.ctx.lineTo(
-				start_x               ,
-				this.ctx.canvas.height
-			);
-			let end_x = start_x + this.ctx.canvas.width * x_proportion
-			this.ctx.lineTo(
-				end_x                 ,
-				this.ctx.canvas.height
-			);
-			this.ctx.lineTo(
-				end_x,
-				0
-			);
-			this.ctx.lineTo(
-				start_x,
-				0
-			);
-			this.ctx.strokeStyle = 'rgb(0,0,0)';
-			this.ctx.stroke();
 			const x_min = get_ext_array(
 				axes.lines.map(
 					(element) => element.x.reduce(
@@ -192,7 +176,10 @@ class Axes
 	{
 		if (linestyle === undefined)
 		{
-			linestyle = new Style();
+			linestyle = {
+				color: 'rgb(0,0,0)',
+				style: 'solid'
+			};
 		}
 		let line = new Line(x, y, linestyle, label);
 		this.lines.push(line);
@@ -247,6 +234,28 @@ class Line
 				);
 			}
 		);
+		if (this.linestyle.style === 'solid')
+		{
+			ctx.setLineDash([]);
+		}
+		else if (this.linestyle.style === 'dashed')
+		{
+			ctx.setLineDash([15, 5]);
+		}
+		else if (this.linestyle.style === 'dotted')
+		{
+			ctx.setLineDash([2,2]);
+		}
+		else if (this.linestyle.style === 'dashdot')
+		{
+			ctx.setLineDash([15,2,2,2]);
+		}
+		else
+		{
+			throw _('the style of the line is not correctly defined');
+		}
+		ctx.strokeStyle = this.linestyle.color;
+		ctx.beginPath();
 		ctx.moveTo(
 			x_coordinates[0],
 			y_coordinates[0]
@@ -258,20 +267,10 @@ class Line
 				y_coordinates[index]
 			);
 		}
-		ctx.strokeStyle = this.linestyle.color;
 		ctx.stroke();
 	}
 }
 
-class Style
-{
-	constructor(color = "rgb(0,0,0)", style = 'solid')
-	{
-		this.color = color;
-		this.style = style;
-	}
-}
-
 function get_ext_array(array, f = Math.max, sign = -1)
 {
 	return array.reduce(

test.js

@@ -5,9 +5,21 @@ manager.add_canvas(500, 500);
 manager.add_canvas(500, 500).figure.add_axes().plot(
 	[0,1,2,3,4,5]  ,
 	[0,1,4,9,16,25],
+	{
+		color: 'rgb(255,0,0)',
+		style: 'dashed'
+	}
 );
 manager.list_canvas[0].figure.list_axes[0].plot(
 	[0,1,2,3,4,5],
 	[0,2,4,6,8,10]
 );
+manager.list_canvas[0].figure.add_axes().plot(
+	[0,1,2,3,4,5],
+	[1,1/2,1/3,1/4,1/5],
+	{
+		color: 'rgb(0,255,0)',
+		style: 'dashdot'
+	}
+);
 manager.draw();