diff --git a/README.md b/README.md index 2be8c26..be0c50d 100644 --- a/README.md +++ b/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 diff --git a/lichartee.js b/lichartee.js index 64ab951..c695cb5 100644 --- a/lichartee.js +++ b/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( - start_x, - 0 + this.ctx.strokeStyle = 'black'; + this.ctx.setLineDash([]); + 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( diff --git a/test.js b/test.js index a62f716..9a92f7f 100644 --- a/test.js +++ b/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();