Gantt - fix strip lines disappearing (T1298090) (DevExpress#30400)

Author: Krijovnick

packages/devextreme/js/ui/gantt/ui.gantt.js

@@ -188,7 +188,7 @@ class Gantt extends Widget {
             scaleTypeRange: this.option('scaleTypeRange'),
             editing: this.option('editing'),
             validation: this.option('validation'),
-            stripLines: this.option('stripLines'),
+            stripLines: this.option('stripLines')?.map(item => ({ ...item })),
             bars: this._bars,
             mainElement: this.$element(),
             onSelectionChanged: (e) => { this._ganttTreeList.selectRows(GanttHelper.getArrayFromOneElement(e.id)); },
@@ -653,9 +653,9 @@ class Gantt extends Widget {
     assignResourceToTask(resourceKey, taskKey) {
         this._ganttView._ganttViewCore.assignResourceToTask(resourceKey, taskKey);
     }
-    // eslint-disable-next-line spellcheck/spell-checker
+
     unassignResourceFromTask(resourceKey, taskKey) {
-        // eslint-disable-next-line spellcheck/spell-checker
+
         this._ganttView._ganttViewCore.unassignResourceFromTask(resourceKey, taskKey);
     }
     unassignAllResourcesFromTask(taskKey) {
@@ -738,6 +738,7 @@ class Gantt extends Widget {
     _getDefaultOptions() {
         return extend(super._getDefaultOptions(), GanttHelper.getDefaultOptions());
     }
+
     _optionChanged(args) {
         switch(args.name) {
             case 'tasks':
@@ -846,11 +847,11 @@ class Gantt extends Widget {
                 this._actionsManager?.createResourceAssignedAction();
                 break;
             case 'onResourceUnassigning':
-                // eslint-disable-next-line spellcheck/spell-checker
+
                 this._actionsManager?.createResourceUnassigningAction();
                 break;
             case 'onResourceUnassigned':
-                // eslint-disable-next-line spellcheck/spell-checker
+
                 this._actionsManager?.createResourceUnassignedAction();
                 break;
             case 'onCustomCommand':
@@ -871,7 +872,7 @@ class Gantt extends Widget {
                 this._setGanttViewOption('showRowLines', args.value);
                 break;
             case 'stripLines':
-                this._setGanttViewOption('stripLines', args.value);
+                this._setGanttViewOption(args.fullName, args.value);
                 break;
             case 'scaleType':
                 this._setGanttViewOption('scaleType', args.value);

packages/devextreme/js/ui/gantt/ui.gantt.view.js

@@ -9,7 +9,6 @@ import { format } from '../../core/utils/string';
 import coreLocalization from '../../common/core/localization/core';
 import { requestAnimationFrame, cancelAnimationFrame } from '../../common/core/animation/frame';
 
-
 const visualStateKey = 'visualState';
 const fullScreenModeKey = 'fullScreen';
 
@@ -41,7 +40,7 @@ export class GanttView extends Widget {
             endDateRange: this.option('endDateRange'),
             editing: this._parseEditingSettings(this.option('editing')),
             validation: this.option('validation'),
-            stripLines: { stripLines: this.option('stripLines') },
+            stripLines: { stripLines: this.option('stripLines')?.map(item => ({ ...item })) },
             areHorizontalBordersEnabled: this.option('showRowLines'),
             areAlternateRowsEnabled: false,
             viewType: this._getViewTypeByScaleType(this.option('scaleType')),
@@ -256,7 +255,7 @@ export class GanttView extends Widget {
                 this._ganttViewCore.setViewTypeRange(this._getViewTypeByScaleType(args.value.min), this._getViewTypeByScaleType(args.value.max));
                 break;
             case 'stripLines':
-                this._ganttViewCore.setStripLines({ stripLines: args.value });
+                this._ganttViewCore.setStripLines({ stripLines: this.option('stripLines') });
                 break;
             case 'taskTooltipContentTemplate':
                 this._ganttViewCore.setTaskTooltipContentTemplate(args.value);

packages/devextreme/testing/tests/DevExpress.ui.widgets/ganttParts/stripLines.tests.js

@@ -38,6 +38,7 @@ QUnit.module('Strip Lines', moduleConfig, () => {
         assert.ok($timeIntervals.eq(0).hasClass(stripLines[2].cssClass), 'custom cssClass rendered');
         assert.equal($stripLines.eq(0).attr('title'), stripLines[0].title, 'title rendered');
     });
+
     test('changing', function(assert) {
         this.createInstance(options.tasksOnlyOptions);
         this.clock.tick(10);
@@ -60,4 +61,33 @@ QUnit.module('Strip Lines', moduleConfig, () => {
         $stripLines = this.$element.find(Consts.TIME_MARKER_SELECTOR);
         assert.equal($stripLines.length, 0, 'gantt has no strip lines');
     });
+
+    test('partial changing', function(assert) {
+        const stripLines = [
+            { start: data.tasks[0].start, title: 'First' },
+            { start: new Date(2019, 2, 1) },
+            { start: new Date(2019, 5, 5), end: () => data.tasks[data.tasks.length - 1].end, title: 'Interval', cssClass: 'end' }
+        ];
+        const options = {
+            tasks: { dataSource: data.tasks },
+            stripLines: stripLines
+        };
+        this.createInstance(options);
+        this.clock.tick(10);
+
+        let $timeMarkers = this.$element.find(Consts.TIME_MARKER_SELECTOR);
+        assert.equal($timeMarkers.length, 2, 'gantt has time markesr');
+        let $timeIntervals = this.$element.find(Consts.TIME_INTERVAL_SELECTOR);
+        assert.equal($timeIntervals.length, 1, 'gantt has time intervals');
+
+        const firstTimeMarkerPosition = $timeMarkers[0].style.left;
+
+        this.instance.option('stripLines[0].start', new Date('2019-02-29'));
+        $timeMarkers = this.$element.find(Consts.TIME_MARKER_SELECTOR);
+        assert.equal($timeMarkers.length, 2, 'gantt has strip line');
+        $timeIntervals = this.$element.find(Consts.TIME_INTERVAL_SELECTOR);
+        assert.equal($timeIntervals.length, 1, 'gantt has time interval');
+
+        assert.notEqual($timeMarkers[0].style.left, firstTimeMarkerPosition, 'strip line position changed');
+    });
 });