From f2899934db78ad0edcc8d61b8bd9377e078a358c Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 28 Dec 2015 09:26:59 -0500 Subject: [PATCH 1/2] Draw line at edge of scales & update tests --- src/core/core.scale.js | 16 +++++++- test/scale.linear.tests.js | 75 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 1 deletion(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index d28fc56b7..8b8d791cf 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -603,7 +603,6 @@ } } - this.ctx.translate(xLabelValue, yLabelValue); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = labelFont; @@ -630,6 +629,21 @@ this.ctx.restore(); } } + + // Draw the line at the edge of the axis + this.ctx.lineWidth = this.options.gridLines.lineWidth; + this.ctx.strokeStyle = this.options.gridLines.color; + var x1 = this.left, x2 = this.right, y1 = this.top, y2 = this.bottom; + + if (this.isHorizontal()) { + y1 = y2 = this.options.position === 'top' ? this.bottom : this.top; + } else { + x1 = x2 = this.options.position === 'left' ? this.right : this.left; + } + + this.ctx.moveTo(x1, y1); + this.ctx.lineTo(x2, y2); + this.ctx.stroke(); } } }); diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 5ca84951a..cc36b7b18 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -978,6 +978,21 @@ describe('Linear Scale', function() { }, { "name": "restore", "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "moveTo", + "args": [0, 100] + }, { + "name": "lineTo", + "args": [200, 100] + }, { + "name": "stroke", + "args": [] }]; expect(mockContext.getCalls()).toEqual(expected); @@ -1036,6 +1051,21 @@ describe('Linear Scale', function() { }, { "name": "fillText", "args": ["myLabel", 100, 122] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "moveTo", + "args": [0, 100] + }, { + "name": "lineTo", + "args": [200, 100] + }, { + "name": "stroke", + "args": [] }]); // Turn off display @@ -1480,6 +1510,21 @@ describe('Linear Scale', function() { }, { "name": "restore", "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "moveTo", + "args": [30, 0] + }, { + "name": "lineTo", + "args": [30, 300] + }, { + "name": "stroke", + "args": [] }]); // Turn off some drawing @@ -1596,6 +1641,21 @@ describe('Linear Scale', function() { }, { "name": "restore", "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "moveTo", + "args": [30, 0] + }, { + "name": "lineTo", + "args": [30, 300] + }, { + "name": "stroke", + "args": [] }]); }); @@ -1838,6 +1898,21 @@ describe('Linear Scale', function() { }, { "name": "restore", "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "moveTo", + "args": [30, 0] + }, { + "name": "lineTo", + "args": [30, 300] + }, { + "name": "stroke", + "args": [] }]) }); }); \ No newline at end of file From 754268890b773d472e19a62f0c5cd8c60652f8d4 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 28 Dec 2015 09:37:31 -0500 Subject: [PATCH 2/2] Alias the pixel for nicer drawing --- src/core/core.scale.js | 4 ++++ test/scale.linear.tests.js | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 8b8d791cf..532208fef 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -637,8 +637,12 @@ if (this.isHorizontal()) { y1 = y2 = this.options.position === 'top' ? this.bottom : this.top; + y1 += helpers.aliasPixel(this.ctx.lineWidth); + y2 += helpers.aliasPixel(this.ctx.lineWidth); } else { x1 = x2 = this.options.position === 'left' ? this.right : this.left; + x1 += helpers.aliasPixel(this.ctx.lineWidth); + x2 += helpers.aliasPixel(this.ctx.lineWidth); } this.ctx.moveTo(x1, y1); diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index cc36b7b18..5cceb21b7 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -986,10 +986,10 @@ describe('Linear Scale', function() { "args": ["rgba(0, 0, 0, 0.1)"] }, { "name": "moveTo", - "args": [0, 100] + "args": [0, 100.5] }, { "name": "lineTo", - "args": [200, 100] + "args": [200, 100.5] }, { "name": "stroke", "args": [] @@ -1059,10 +1059,10 @@ describe('Linear Scale', function() { "args": ["rgba(0, 0, 0, 0.1)"] }, { "name": "moveTo", - "args": [0, 100] + "args": [0, 100.5] }, { "name": "lineTo", - "args": [200, 100] + "args": [200, 100.5] }, { "name": "stroke", "args": [] @@ -1518,10 +1518,10 @@ describe('Linear Scale', function() { "args": ["rgba(0, 0, 0, 0.1)"] }, { "name": "moveTo", - "args": [30, 0] + "args": [30.5, 0] }, { "name": "lineTo", - "args": [30, 300] + "args": [30.5, 300] }, { "name": "stroke", "args": [] @@ -1649,10 +1649,10 @@ describe('Linear Scale', function() { "args": ["rgba(0, 0, 0, 0.1)"] }, { "name": "moveTo", - "args": [30, 0] + "args": [30.5, 0] }, { "name": "lineTo", - "args": [30, 300] + "args": [30.5, 300] }, { "name": "stroke", "args": [] @@ -1906,10 +1906,10 @@ describe('Linear Scale', function() { "args": ["rgba(0, 0, 0, 0.1)"] }, { "name": "moveTo", - "args": [30, 0] + "args": [30.5, 0] }, { "name": "lineTo", - "args": [30, 300] + "args": [30.5, 300] }, { "name": "stroke", "args": []