]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a038459)
Refactored drawCaret and drawBackground functions to draw the background together...
authorMarcelo Tedeschi <marceloftedeschi@gmail.com>
Wed, 8 Feb 2017 08:09:48 +0000 (09:09 +0100)
committerEvert Timberg <evert.timberg+github@gmail.com>
Sat, 25 Feb 2017 00:27:05 +0000 (19:27 -0500)
samples/tooltips/tooltip-border.html patch | blob | blame | history
src/core/core.tooltip.js patch | blob | blame | history

diff --git a/samples/tooltips/tooltip-border.html b/samples/tooltips/tooltip-border.html
index b0752fc5cdfecd7e1a052722a236e6289a98f743..25c649e548e3632190bc733cf002a7ce35f35c2e 100644 (file)
--- a/samples/tooltips/tooltip-border.html
+++ b/samples/tooltips/tooltip-border.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-       <title>Tooltip Interaction Modes</title>
+       <title>Tooltip Border</title>
        <script src="../../dist/Chart.bundle.js"></script>
        <script src="../utils.js"></script>
        <style>
diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 57f6fd82948d6e267de4bbc3a1cd72c461b850f5..2470a48309ab5358cffe1ba25ce17cfbb6dbef6a 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -556,9 +556,16 @@ module.exports = function(Chart) {
 
                        return me;
                },
-               drawCaret: function(tooltipPoint, size, opacity) {
-                       var vm = this._view;
+               drawCaret: function(tooltipPoint, size) {
                        var ctx = this._chart.ctx;
+                       var vm = this._view;
+                       var caretPosition = this.getCaretPosition(tooltipPoint, size, vm);
+
+                       ctx.lineTo(caretPosition.x1, caretPosition.y1);
+                       ctx.lineTo(caretPosition.x2, caretPosition.y2);
+                       ctx.lineTo(caretPosition.x3, caretPosition.y3);
+               },
+               getCaretPosition: function(tooltipPoint, size, vm) {
                        var x1, x2, x3;
                        var y1, y2, y3;
                        var caretSize = vm.caretSize;
@@ -571,35 +578,37 @@ module.exports = function(Chart) {
                                height = size.height;
 
                        if (yAlign === 'center') {
-                               // Left or right side
+                               y2 = ptY + (height / 2);
+
                                if (xAlign === 'left') {
                                        x1 = ptX;
                                        x2 = x1 - caretSize;
                                        x3 = x1;
+
+                                       y1 = y2 + caretSize;
+                                       y3 = y2 - caretSize;
                                } else {
                                        x1 = ptX + width;
                                        x2 = x1 + caretSize;
                                        x3 = x1;
-                               }
 
-                               y2 = ptY + (height / 2);
-                               y1 = y2 - caretSize;
-                               y3 = y2 + caretSize;
+                                       y1 = y2 - caretSize;
+                                       y3 = y2 + caretSize;
+                               }
                        } else {
                                if (xAlign === 'left') {
-                                       x1 = ptX + cornerRadius;
-                                       x2 = x1 + caretSize;
+                                       x2 = ptX + cornerRadius + (caretSize);
+                                       x1 = x2 - caretSize;
                                        x3 = x2 + caretSize;
                                } else if (xAlign === 'right') {
-                                       x1 = ptX + width - cornerRadius;
-                                       x2 = x1 - caretSize;
-                                       x3 = x2 - caretSize;
+                                       x2 = ptX + width - cornerRadius - caretSize;
+                                       x1 = x2 - caretSize;
+                                       x3 = x2 + caretSize;
                                } else {
                                        x2 = ptX + (width / 2);
                                        x1 = x2 - caretSize;
                                        x3 = x2 + caretSize;
                                }
-
                                if (yAlign === 'top') {
                                        y1 = ptY;
                                        y2 = y1 - caretSize;
@@ -608,23 +617,13 @@ module.exports = function(Chart) {
                                        y1 = ptY + height;
                                        y2 = y1 + caretSize;
                                        y3 = y1;
+                                       // invert drawing order
+                                       var tmp = x3;
+                                       x3 = x1;
+                                       x1 = tmp;
                                }
                        }
-
-                       ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
-                       ctx.lineWidth = vm.borderWidth;
-                       ctx.strokeStyle = vm.borderColor;
-
-                       ctx.beginPath();
-                       ctx.moveTo(x1, y1);
-                       ctx.lineTo(x2, y2);
-                       ctx.lineTo(x3, y3);
-                       ctx.stroke();
-                       ctx.fill();
-                       ctx.closePath();
-
-                       helpers.drawRoundedRectangle(ctx, ptX, ptY, size.width, size.height, vm.cornerRadius);
-                       ctx.fill();
+                       return {x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3};
                },
                drawTitle: function(pt, vm, ctx, opacity) {
                        var title = vm.title;
@@ -730,11 +729,45 @@ module.exports = function(Chart) {
                },
                drawBackground: function(pt, vm, ctx, tooltipSize, opacity) {
                        ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
-                       helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
                        ctx.strokeStyle = vm.borderColor;
                        ctx.lineWidth = vm.borderWidth;
-                       ctx.stroke();
+                       var xAlign = vm.xAlign;
+                       var yAlign = vm.yAlign;
+                       var x = pt.x;
+                       var y = pt.y;
+                       var width = tooltipSize.width;
+                       var height = tooltipSize.height;
+                       var radius = vm.cornerRadius;
+
+                       ctx.beginPath();
+                       ctx.moveTo(x + radius, y);
+                       if (yAlign === 'top') {
+                               this.drawCaret(pt, tooltipSize);
+                       }
+                       ctx.lineTo(x + width - radius, y);
+                       ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+                       if (yAlign === 'center' && xAlign === 'right') {
+                               this.drawCaret(pt, tooltipSize);
+                       }
+                       ctx.lineTo(x + width, y + height - radius);
+                       ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+                       if (yAlign === 'bottom') {
+                               this.drawCaret(pt, tooltipSize);
+                       }
+                       ctx.lineTo(x + radius, y + height);
+                       ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+                       if (yAlign === 'center' && xAlign === 'left') {
+                               this.drawCaret(pt, tooltipSize);
+                       }
+                       ctx.lineTo(x, y + radius);
+                       ctx.quadraticCurveTo(x, y, x + radius, y);
+                       ctx.closePath();
+
                        ctx.fill();
+
+                       if (vm.borderWidth > 0) {
+                               ctx.stroke();
+                       }
                },
                draw: function() {
                        var ctx = this._chart.ctx;
@@ -760,9 +793,6 @@ module.exports = function(Chart) {
                                // Draw Background
                                this.drawBackground(pt, vm, ctx, tooltipSize, opacity);
 
-                               // Draw Caret
-                               this.drawCaret(pt, tooltipSize, opacity);
-
                                // Draw Title, Body, and Footer
                                pt.x += vm.xPadding;
                                pt.y += vm.yPadding;
Mirror of https://github.com/chartjs/Chart.js.git