Gauge: skip core rerender on title change with same height (T1288122) (#29904)

Author: anna-shakhova

packages/devextreme/js/viz/gauges/bar_gauge.js

@@ -520,6 +520,13 @@ export const dxBarGauge = BaseGauge.inherit({
 
     _initialChanges: ['VALUES'],
 
+    _getChangesRequireCoreUpdate: function() {
+        return [
+            ...this.callBase(),
+            'LEGEND',
+        ];
+    },
+
     _change_NODES() {
         this._buildNodes();
     },

packages/devextreme/js/viz/gauges/base_gauge.js

@@ -19,6 +19,8 @@ export const BaseGauge = BaseWidget.inherit({
 
     _themeSection: 'gauge',
 
+    _titleBBoxCache: null,
+
     _createThemeManager: function() {
         return new themeManagerModule.ThemeManager(this._getThemeManagerOptions());
     },
@@ -118,6 +120,33 @@ export const BaseGauge = BaseWidget.inherit({
         that.callBase.apply(that, arguments);
     },
 
+    _getChangesRequireCoreUpdate: function() {
+        return ['DOMAIN', 'MOSTLY_TOTAL', 'EXPORT'];
+    },
+
+    _isTitleBBoxChanged: function() {
+        const titleBBox = this._title.getLayoutOptions();
+        const hasTitleHeightChanged = titleBBox.height !== this._titleBBoxCache?.height;
+        const hasTitleYChanged = titleBBox.y !== this._titleBBoxCache?.y;
+        const hasVerticalAlignmentChanged = titleBBox.verticalAlignment !== this._titleBBoxCache?.verticalAlignment;
+
+        this._titleBBoxCache = null;
+
+        return hasTitleHeightChanged || hasTitleYChanged || hasVerticalAlignmentChanged;
+    },
+
+    _forceCoreUpdate: function() {
+        const isTriggeredByTitleOnly =
+            this._changes.has('TITLE')
+            && !this._getChangesRequireCoreUpdate().some((change) => this._changes.has(change));
+
+        if(isTriggeredByTitleOnly) {
+            return this._isTitleBBoxChanged();
+        }
+
+        return true;
+    },
+
     _applySize: function(rect) {
         const that = this;
         ///#DEBUG
@@ -131,8 +160,12 @@ export const BaseGauge = BaseWidget.inherit({
         // The appropriate solution is to remove heavy rendering from "_applySize" - it should be done later during some other change processing.
         // It would be even better to somehow defer any inside option changes - so they all are applied after all changes are processed.
         const layoutCache = that._layout._cache;
-        that._cleanCore();
-        that._renderCore();
+
+        if(that._forceCoreUpdate()) {
+            that._cleanCore();
+            that._renderCore();
+        }
+
         that._layout._cache = that._layout._cache || layoutCache;
         return [rect[0], that._innerRect.top, rect[2], that._innerRect.bottom];
     },
@@ -284,3 +317,14 @@ BaseGauge.prototype._setTooltipOptions = function() {
     _setTooltipOptions.apply(this, arguments);
     this._tracker && this._tracker.setTooltipState(this._tooltip.isEnabled());
 };
+
+const { _change_TITLE } = BaseGauge.prototype;
+BaseGauge.prototype._change_TITLE = function() {
+    this._titleBBoxCache = { ...this._title.getLayoutOptions() };
+
+    _change_TITLE.apply(this, arguments);
+
+    ///#DEBUG
+    this._DEBUG_change_title && this._DEBUG_change_title();
+    ///#ENDDEBUG
+};

packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge_new.tests.js

@@ -5,6 +5,7 @@ import rendererModule from 'viz/core/renderers/renderer';
 import titleModule from 'viz/core/title';
 import tooltipModule from 'viz/core/tooltip';
 import loadingIndicatorModule from 'viz/core/loading_indicator';
+import dxBarGauge from 'viz/bar_gauge';
 
 import 'viz/gauges/bar_gauge';
 
@@ -166,6 +167,11 @@ QUnit.module('Legend', {
             return this.renderer;
         });
 
+        dxBarGauge.prototype._debug_rendered = function() {
+            this.renderCount = (this.renderCount || 0) + 1;
+            this.rendered && this.rendered();
+        };
+
         legendModule._setLegend(sinon.spy(
             () => {
                 const stub = new stubLegend();
@@ -184,6 +190,7 @@ QUnit.module('Legend', {
     afterEach() {
         legendModule._setLegend(Legend);
         rendererModule.Renderer.restore();
+        delete dxBarGauge.prototype._debug_rendered;
     },
 
     createGauge(options) {
@@ -317,6 +324,21 @@ QUnit.test('Format legend with custom type', function(assert) {
     assert.deepEqual(passedItems[0].text, '6K');
 });
 
+QUnit.test('Legend update should call trigger core content rerender', function(assert) {
+    const gauge = this.createGauge({
+        values: [1, 2],
+        legend: { visible: true }
+    });
+
+    gauge._legend.stub('update').returns(true);
+
+    const initialRenderCount = gauge.renderCount;
+
+    gauge.values([10]);
+
+    assert.strictEqual(gauge.renderCount, initialRenderCount + 1);
+});
+
 QUnit.module('Center Template', environment);
 
 QUnit.test('Should create group for center template on widget creating', function(assert) {

packages/devextreme/testing/tests/DevExpress.viz.gauges/baseGauge.tests.js

@@ -6,6 +6,7 @@ import registerComponent from 'core/component_registrator';
 import resizeCallbacks from 'core/utils/resize_callbacks';
 import { BaseGauge, formatValue, getSampleText } from 'viz/gauges/base_gauge';
 import titleModule from 'viz/core/title';
+import exportModule from 'viz/core/export';
 import loadingIndicatorModule from 'viz/core/loading_indicator';
 import rendererModule from 'viz/core/renderers/renderer';
 import tooltipModule from 'viz/core/tooltip';
@@ -584,3 +585,76 @@ QUnit.test('Should dispose graphic objects on container remove', function(assert
 
     assert.strictEqual(gauge._graphicObjects, null);
 });
+
+QUnit.module('Render content on LAYOUT change', {
+    beforeEach: function() {
+        environment.beforeEach.apply(this, arguments);
+        const that = this;
+
+        this.export = new vizMocks.ExportMenu();
+        exportModule.DEBUG_set_ExportMenu(sinon.spy(function() {
+            return that.export;
+        }));
+
+        this.title.stub('update').returns(true);
+    },
+    createGauge: environment.createGauge,
+    afterEach: function() {
+        this.export = null;
+        delete BaseGauge.prototype._DEBUG_change_title;
+        environment.afterEach.apply(this, arguments);
+    }
+}, function() {
+    [
+        { code: 'EXPORT', optionName: 'export.enabled', optionValue: true },
+        { code: 'DOMAIN', optionName: 'startValue', optionValue: 10 },
+        { code: 'MOSTLY_TOTAL', optionName: 'geometry.startAngle', optionValue: 180 },
+    ].forEach(({ code, optionName, optionValue }) => {
+        QUnit.test(`Should call _renderContent method if '${code}' trigger layout change`, function(assert) {
+            const gauge = this.createGauge();
+
+            const _renderContent = this.abstractMethods._renderContent;
+            const initialRenderCount = _renderContent.callCount;
+
+            gauge.option(optionName, optionValue);
+
+            assert.strictEqual(_renderContent.callCount, initialRenderCount + 1);
+        });
+    });
+
+    const initialTitleBBox = {
+        x: 1,
+        y: 2,
+        width: 20,
+        height: 10,
+        verticalAlignment: 'top',
+    };
+
+    [
+        { update: true, changes: { verticalAlignment: 'bottom' } },
+        { update: true, changes: { y: 5 } },
+        { update: true, changes: { height: 20 } },
+        { update: false, changes: { width: 10 } },
+    ].forEach(({ update, changes }) => {
+        QUnit.test(`Should ${update ? 'call' : 'not call' } _renderContent method if 'TITLE' trigger layout change and '${Object.keys(changes).join(', ')}' changed (T1288122)`, function(assert) {
+            this.title.stub('getLayoutOptions').returns(initialTitleBBox);
+
+            const gauge = this.createGauge();
+
+            BaseGauge.prototype._DEBUG_change_title = ()=> {
+                this.title.stub('getLayoutOptions').returns({
+                    ...initialTitleBBox,
+                    ...changes,
+                });
+            };
+
+            const _renderContent = this.abstractMethods._renderContent;
+            const initialRenderCount = _renderContent.callCount;
+            const expectedRenderCount = update ? initialRenderCount + 1 : initialRenderCount;
+
+            gauge.option('title.text', 'test');
+
+            assert.strictEqual(_renderContent.callCount, expectedRenderCount);
+        });
+    });
+});