test(gantt): cover updateTaskRecord task bar refresh

packages/vtable-gantt/__tests__/gantt-update-task-record.test.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+
+global.__VERSION__ = 'none';
+
+import { Gantt } from '../src';
+import { createDiv, removeDom } from './dom';
+
+describe('gantt updateTaskRecord', () => {
+  test('updates the task bar position and width after changing task dates', () => {
+    const container = createDiv();
+    container.style.width = '900px';
+    container.style.height = '400px';
+
+    const records = [
+      { id: 1, title: 'Task 1', startDate: '2024-07-01', endDate: '2024-07-03', progress: 10 },
+      { id: 2, title: 'Task 2', startDate: '2024-07-05', endDate: '2024-07-07', progress: 20 },
+      { id: 3, title: 'Task 3', startDate: '2024-07-09', endDate: '2024-07-11', progress: 30 }
+    ];
+
+    const gantt = new Gantt(container, {
+      records,
+      taskListTable: {
+        columns: [
+          { field: 'title', title: 'title', width: 160 },
+          { field: 'startDate', title: 'startDate', width: 120 },
+          { field: 'endDate', title: 'endDate', width: 120 }
+        ],
+        tableWidth: 400
+      },
+      taskBar: {
+        startDateField: 'startDate',
+        endDateField: 'endDate',
+        progressField: 'progress'
+      },
+      timelineHeader: {
+        colWidth: 40,
+        scales: [{ unit: 'day', step: 1 }]
+      },
+      minDate: '2024-07-01',
+      maxDate: '2024-07-31'
+    });
+
+    try {
+      const originalTaskBar = gantt.scenegraph.taskBar.getTaskBarNodeByIndex(2);
+      expect(originalTaskBar.attribute.x).toBe(320);
+      expect(originalTaskBar.attribute.width).toBe(120);
+
+      gantt.updateTaskRecord({ ...records[2], startDate: '2024-07-12', endDate: '2024-07-16' }, 2);
+
+      const updatedTaskBar = gantt.scenegraph.taskBar.getTaskBarNodeByIndex(2);
+      expect(gantt.getRecordByIndex(2)).toMatchObject({
+        startDate: '2024-07-12',
+        endDate: '2024-07-16'
+      });
+      expect(updatedTaskBar).not.toBe(originalTaskBar);
+      expect(updatedTaskBar.attribute.x).toBe(440);
+      expect(updatedTaskBar.attribute.width).toBe(200);
+    } finally {
+      gantt.release?.();
+      removeDom(container);
+    }
+  });
+});

packages/vtable-gantt/examples/gantt/gantt-issue-4534-update-task-record.ts

@@ -0,0 +1,67 @@
+import { Gantt } from '../../src';
+
+const CONTAINER_ID = 'vTable';
+
+export function createTable() {
+  const container = document.getElementById(CONTAINER_ID);
+  if (!container) {
+    return;
+  }
+
+  const records = [
+    { id: 1, title: 'Requirement review', startDate: '2024-07-01', endDate: '2024-07-03', progress: 30 },
+    { id: 2, title: 'Interaction design', startDate: '2024-07-05', endDate: '2024-07-07', progress: 50 },
+    { id: 3, title: 'Integration testing', startDate: '2024-07-09', endDate: '2024-07-11', progress: 70 }
+  ];
+
+  const ganttInstance = new Gantt(container, {
+    records,
+    taskListTable: {
+      columns: [
+        { field: 'title', title: 'Task', width: 180 },
+        { field: 'startDate', title: 'Start', width: 110 },
+        { field: 'endDate', title: 'End', width: 110 }
+      ],
+      tableWidth: 400
+    },
+    taskBar: {
+      startDateField: 'startDate',
+      endDateField: 'endDate',
+      progressField: 'progress'
+    },
+    timelineHeader: {
+      colWidth: 40,
+      scales: [{ unit: 'day', step: 1, format: date => date.dateIndex.toString() }]
+    },
+    minDate: '2024-07-01',
+    maxDate: '2024-07-31'
+  });
+
+  const button = document.createElement('button');
+  button.textContent = 'Update last task dates';
+  button.style.position = 'fixed';
+  button.style.right = '16px';
+  button.style.top = '16px';
+  button.style.zIndex = '10';
+  button.style.padding = '8px 12px';
+
+  const status = document.createElement('div');
+  status.id = 'issue-4534-status';
+  status.textContent = 'Before: Jul 9 - Jul 11';
+  status.style.position = 'fixed';
+  status.style.right = '16px';
+  status.style.top = '56px';
+  status.style.zIndex = '10';
+  status.style.padding = '6px 10px';
+  status.style.background = '#fff';
+
+  button.addEventListener('click', () => {
+    ganttInstance.updateTaskRecord({ ...records[2], startDate: '2024-07-12', endDate: '2024-07-16' }, 2);
+    const taskBar = ganttInstance.scenegraph.taskBar.getTaskBarNodeByIndex(2);
+    status.textContent = `After: Jul 12 - Jul 16; x=${taskBar.attribute.x}; width=${taskBar.attribute.width}`;
+  });
+
+  document.body.appendChild(button);
+  document.body.appendChild(status);
+  window.ganttInstance = ganttInstance;
+}

packages/vtable-gantt/examples/menu.ts

@@ -179,6 +179,10 @@ export const menus = [
     path: 'gantt',
     name: 'gantt-issue-5162-sort-drag'
   },
+  {
+    path: 'gantt',
+    name: 'gantt-issue-4534-update-task-record'
+  },
   {
     path: 'gantt',
     name: 'issue-4778-taskbar-relative-rect'