Feature/markline position date

common/changes/@visactor/vtable/feature-Markline-position-date_2025-05-10-11-41.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add date position to markline\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "rem2248668357@163.com"
+}

docs/assets/demo/en/gantt/gantt-interaction-create-mark-line.md

@@ -290,6 +290,19 @@ const option = {
         lineWidth: 1,
         lineColor: 'red'
       }
+    },
+    {
+      date: '2024-10-08 8:00:00',
+      content: 'mrkLine(date)',
+      position: 'date',
+      contentStyle: {
+        color: '#fff'
+        // fontSize: 40
+      },
+      style: {
+        lineWidth: 1,
+        lineColor: 'blue'
+      }
     }
   ],
   scrollStyle: {

docs/assets/demo/zh/gantt/gantt-interaction-create-mark-line.md

@@ -290,6 +290,19 @@ const option = {
         lineWidth: 1,
         lineColor: 'red'
       }
+    },
+    {
+      date: '2024-10-08 8:00:00',
+      content: 'mrkLine(date)',
+      position: 'date',
+      contentStyle: {
+        color: '#fff'
+        // fontSize: 40
+      },
+      style: {
+        lineWidth: 1,
+        lineColor: 'blue'
+      }
     }
   ],
   scrollStyle: {

docs/assets/option/en/common/gantt/mark-line.md

@@ -7,7 +7,7 @@ export interface IMarkLine {
   date: string;
   style?: ILineStyle;
   /** The position where the mark line is displayed under the date column. Default is 'left' */
-  position?: 'left' | 'right' | 'middle';
+  position?: 'left' | 'right' | 'middle' | 'date';
   /** Automatically include the mark line within the date range */
   scrollToMarkLine?: boolean;
   content?: string; // markLine content
@@ -37,10 +37,12 @@ Optional
 
 {{ use: common-gantt-line-style }}
 
-${prefix} position('left' | 'right' | 'middle')
+${prefix} position('left' | 'right' | 'middle' | 'date')
 
 The position where the mark line is displayed under the date column. Default is 'left'
 
+'date 'is located based on the specific time
+
 Optional
 
 ${prefix} scrollToMarkLine(boolean)

docs/assets/option/zh/common/gantt/mark-line.md

@@ -7,7 +7,7 @@ export interface IMarkLine {
   date: string;
   style?: ILineStyle;
   /** 标记线显示在日期列下的位置 默认为'left' */
-  position?: 'left' | 'right' | 'middle';
+  position?: 'left' | 'right' | 'middle' | 'date';
   /** 自动将日期范围内 包括改标记线 */
   scrollToMarkLine?: boolean;
   content?: string; // markLine中内容
@@ -37,10 +37,12 @@ ${prefix} style(ILineStyle)
 
 {{ use: common-gantt-line-style }}
 
-${prefix} position('left' | 'right' | 'middle')
+${prefix} position('left' | 'right' | 'middle' | 'date')
 
 标记线显示在日期列下的位置 默认为'left'
 
+'date' 则根据具体时间定位
+
 非必填
 
 ${prefix} scrollToMarkLine(boolean)

packages/vtable-gantt/__tests__/gantt-mark-line.test.ts

@@ -0,0 +1,62 @@
+// @ts-nocheck
+
+global.__VERSION__ = 'none';
+
+import { computeCountToTimeScale, createDateAtMidnight } from '../src/tools/util';
+
+describe('mark-line position test', () => {
+  test('mark-line position calculation for day unit', () => {
+    const minDate = new Date('2024-01-01 00:00:00'); // 2024年1月1日0点
+    const unit = 'day' as const;
+    const step = 1;
+
+    // 同一天内不同时间点测试
+    const date1 = createDateAtMidnight('2024-01-01 6:00:00');
+    const unitCount1 = computeCountToTimeScale(date1, minDate, unit, step);
+    const cellIndex1 = Math.floor(unitCount1);
+    expect(unitCount1 - cellIndex1).toBe(0.25);
+
+    const date2 = createDateAtMidnight('2024-01-02 12:00:00');
+    const unitCount2 = computeCountToTimeScale(date2, minDate, unit, step);
+    const cellIndex2 = Math.floor(unitCount2);
+    expect(unitCount2 - cellIndex2).toBe(0.5);
+
+    const date3 = createDateAtMidnight('2024-01-05 18:00:00');
+    const unitCount3 = computeCountToTimeScale(date3, minDate, unit, step);
+    const cellIndex3 = Math.floor(unitCount3);
+    expect(unitCount3 - cellIndex3).toBe(0.75);
+  });
+
+  test('mark-line position calculation for week unit', () => {
+    const minDate = new Date('2024-01-01 00:00:00'); // 周一
+    const unit = 'hour';
+    const step = 1;
+
+    const date1 = createDateAtMidnight('2024-01-01 08:30:00');
+    const unitCount1 = computeCountToTimeScale(date1, minDate, unit, step);
+    const cellIndex1 = Math.floor(unitCount1);
+    expect(unitCount1 - cellIndex1).toBe(0.5);
+
+    const date2 = createDateAtMidnight('2024-01-03 08:45:01');
+    const unitCount2 = computeCountToTimeScale(date2, minDate, unit, step);
+    const cellIndex2 = Math.floor(unitCount2);
+    expect(unitCount2 - cellIndex2).toBeGreaterThan(0.75);
+  });
+
+  test('mark-line position calculation for month unit', () => {
+    const minDate = new Date('2024-01-01 00:00:00');
+    const unit = 'month' as const;
+    const step = 1;
+
+    // 测试月内不同日期
+    const date1 = createDateAtMidnight('2024-01-01'); // 月初
+    const unitCount1 = computeCountToTimeScale(date1, minDate, unit, step);
+    const cellIndex1 = Math.floor(unitCount1);
+    expect(unitCount1 - cellIndex1).toBe(0); // 月初应该是0
+
+    const date2 = createDateAtMidnight('2024-01-15'); // 月中
+    const unitCount2 = computeCountToTimeScale(date2, minDate, unit, step);
+    const cellIndex2 = Math.floor(unitCount2);
+    expect(unitCount2 - cellIndex2).toBeGreaterThan(0); // 月中应该>0
+  });
+});

packages/vtable-gantt/examples/gantt/gantt-createMarkLine.ts

@@ -216,7 +216,7 @@ export function createTable() {
     markLine: [
       {
         date: '2024-10-06',
-        content: '我的啊啊得的',
+        content: 'mrkLine(left)',
         contentStyle: {
           color: '#fff'
           // fontSize: 40
@@ -225,6 +225,19 @@ export function createTable() {
           lineWidth: 1,
           lineColor: 'red'
         }
+      },
+      {
+        date: '2024-10-08 8:00:00',
+        content: 'mrkLine(date)',
+        position: 'date',
+        contentStyle: {
+          color: '#fff'
+          // fontSize: 40
+        },
+        style: {
+          lineWidth: 1,
+          lineColor: 'blue'
+        }
       }
     ],
     scrollStyle: {

packages/vtable-gantt/src/scenegraph/mark-line.ts

@@ -1,5 +1,6 @@
 import { computeCountToTimeScale, createDateAtMidnight } from '../tools/util';
-import type { IMarkLine } from '../ts-types';
+import { DayTimes } from '../gantt-helper';
+//import type { IMarkLine } from '../ts-types';
 import type { Scenegraph } from './scenegraph';
 import { Group, createLine, Text } from '@visactor/vtable/es/vrender';
 
@@ -46,9 +47,18 @@ export class MarkLine {
       const minDate = this._scene._gantt.parsedOptions.minDate;
       const { unit, step } = this._scene._gantt.parsedOptions.reverseSortedTimelineScales[0];
       const unitCount = computeCountToTimeScale(date, minDate, unit, step);
-      const dateX =
-        this._scene._gantt.parsedOptions.timelineColWidth *
-        (Math.floor(unitCount) + (line.position === 'right' ? 1 : line.position === 'middle' ? 0.5 : 0));
+      let positionOffset = 0;
+      if (line.position === 'right') {
+        positionOffset = 1;
+      } else if (line.position === 'middle') {
+        positionOffset = 0.5;
+      } else if (line.position === 'date') {
+        const date = createDateAtMidnight(line.date);
+        const unitCount = computeCountToTimeScale(date, minDate, unit, step);
+        const cellIndex = Math.floor(unitCount);
+        positionOffset = unitCount - cellIndex;
+      }
+      const dateX = this._scene._gantt.parsedOptions.timelineColWidth * (Math.floor(unitCount) + positionOffset);
       const markLineGroup = new Group({
         pickable: false,
         x: dateX - this.markLineContainerWidth / 2,

packages/vtable-gantt/src/ts-types/gantt-engine.ts

@@ -305,7 +305,7 @@ export interface IMarkLine {
   };
   style?: ILineStyle;
   /** 标记线显示在日期列下的位置 默认为'left' */
-  position?: 'left' | 'right' | 'middle';
+  position?: 'left' | 'right' | 'middle' | 'date';
   /** 自动将日期范围内 包括改标记线 */
   scrollToMarkLine?: boolean;
 }