Layout: enforce box limits, reject <0 chartArea (#8193)

* Skip chartArea boxes when chartArea <= 0
* Legend: limit to maxWidth/maxHeight
* Layout: enforce box limits, reject <0 chartArea
* Update legend fixtures

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 8fa07ec85c45818ad916a9e83db40540c54d9110..ee0e9df949ae77dd25482fb691695fd436e7a161 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -510,8 +510,16 @@ class Chart {
 
                layouts.update(me, me.width, me.height);
 
+               const area = me.chartArea;
+               const noArea = area.width <= 0 || area.height <= 0;
+
                me._layers = [];
                each(me.boxes, (box) => {
+                       if (noArea && box.position === 'chartArea') {
+                               // Skip drawing and configuring chartArea boxes when chartArea is zero or negative
+                               return;
+                       }
+
                        // configure is called twice, once in core.scale.update and once here.
                        // Here the boxes are fully updated and at their final positions.
                        if (box.configure) {

diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index ce60695c85e6431071eba6e86780d3dc665b2432..1e7005fe265ebf37297dbc5dad889b0f726960d1 100644 (file)
--- a/src/core/core.layouts.js
+++ b/src/core/core.layouts.js
@@ -92,7 +92,7 @@ function updateDims(chartArea, params, layout) {
                // this layout was already counted for, lets first reduce old size
                chartArea[layout.pos] -= layout.size;
        }
-       layout.size = layout.horizontal ? box.height : box.width;
+       layout.size = layout.horizontal ? Math.min(layout.height, box.height) : Math.min(layout.width, box.width);
        chartArea[layout.pos] += layout.size;
 
        if (box.getPadding) {
@@ -103,8 +103,8 @@ function updateDims(chartArea, params, layout) {
                maxPadding.right = Math.max(maxPadding.right, boxPadding.right);
        }
 
-       const newWidth = params.outerWidth - getCombinedMax(maxPadding, chartArea, 'left', 'right');
-       const newHeight = params.outerHeight - getCombinedMax(maxPadding, chartArea, 'top', 'bottom');
+       const newWidth = Math.max(0, params.outerWidth - getCombinedMax(maxPadding, chartArea, 'left', 'right'));
+       const newHeight = Math.max(0, params.outerHeight - getCombinedMax(maxPadding, chartArea, 'top', 'bottom'));
 
        if (newWidth !== chartArea.w || newHeight !== chartArea.h) {
                chartArea.w = newWidth;

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 3fbed828c8976a449f53a7a2da16cdc867439389..467aa1fbe45e41f9ebeafd29b30978df212600fc 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -5,7 +5,7 @@ import {drawPoint} from '../helpers/helpers.canvas';
 import {
        callback as call, valueOrDefault, toFont, isObject,
        toPadding, getRtlAdapter, overrideTextDirection, restoreTextDirection,
-       INFINITY
+       clipArea, unclipArea
 } from '../helpers/index';
 import {_toLeftRightCenter, _alignStartEnd} from '../helpers/helpers.extras';
 /**
@@ -145,8 +145,8 @@ export class Legend extends Element {
                        width = me._fitCols(titleHeight, fontSize, boxWidth, itemHeight) + 10;
                }
 
-               me.width = Math.min(width, options.maxWidth || INFINITY);
-               me.height = Math.min(height, options.maxHeight || INFINITY);
+               me.width = Math.min(width, options.maxWidth || me.maxWidth);
+               me.height = Math.min(height, options.maxHeight || me.maxHeight);
        }
 
        /**
@@ -221,8 +221,14 @@ export class Legend extends Element {
        }
 
        draw() {
-               if (this.options.display) {
-                       this._draw();
+               const me = this;
+               if (me.options.display) {
+                       const ctx = me.ctx;
+                       clipArea(ctx, me);
+
+                       me._draw();
+
+                       unclipArea(ctx);
                }
        }
 

diff --git a/test/fixtures/plugin.legend/title/left-center-center.png b/test/fixtures/plugin.legend/title/left-center-center.png
index 7ffd400944999943943f914c134114498ae3109e..cbcdb6593d35b1f36d6e00aa42bb2a960072a24a 100644 (file)
Binary files a/test/fixtures/plugin.legend/title/left-center-center.png and b/test/fixtures/plugin.legend/title/left-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/left-end-end.png b/test/fixtures/plugin.legend/title/left-end-end.png
index a60610ab5009b914322f7745dbb64813861715e3..85c33c674ac20545afad44d57fca101e94432fec 100644 (file)
Binary files a/test/fixtures/plugin.legend/title/left-end-end.png and b/test/fixtures/plugin.legend/title/left-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/right-center-center.png b/test/fixtures/plugin.legend/title/right-center-center.png
index 9900784a4b3cfbc976d0f5b5ca5d88a835848378..794aea86cdfd9941eef8584df3207a1281b00c26 100644 (file)
Binary files a/test/fixtures/plugin.legend/title/right-center-center.png and b/test/fixtures/plugin.legend/title/right-center-center.png differ

diff --git a/test/fixtures/plugin.legend/title/right-end-end.png b/test/fixtures/plugin.legend/title/right-end-end.png
index ec2acbf131253de7d8b46207d4d24f7d509239b4..97a0c8489c8d70d744b5fe6c0956dfc7e40e3c86 100644 (file)
Binary files a/test/fixtures/plugin.legend/title/right-end-end.png and b/test/fixtures/plugin.legend/title/right-end-end.png differ

diff --git a/test/fixtures/plugin.legend/title/right-start-start.png b/test/fixtures/plugin.legend/title/right-start-start.png
index 89c5286ef37f14cc84c17290a57b8777cad5edcb..bd49b4b80514b780aaad042ad5133ee2781c5bd2 100644 (file)
Binary files a/test/fixtures/plugin.legend/title/right-start-start.png and b/test/fixtures/plugin.legend/title/right-start-start.png differ