gantt-task-react-v 1.6.19 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -11397,278 +11397,6 @@
|
|
|
11397
11397
|
ganttToday,
|
|
11398
11398
|
ganttTodayCircle
|
|
11399
11399
|
};
|
|
11400
|
-
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
11401
|
-
switch (viewMode) {
|
|
11402
|
-
case ViewMode.Day:
|
|
11403
|
-
return addDays(startDate, offset2);
|
|
11404
|
-
case ViewMode.HalfDay:
|
|
11405
|
-
return addHours(startDate, offset2 * 12);
|
|
11406
|
-
case ViewMode.QuarterDay:
|
|
11407
|
-
return addHours(startDate, offset2 * 6);
|
|
11408
|
-
case ViewMode.Hour:
|
|
11409
|
-
return addHours(startDate, offset2);
|
|
11410
|
-
case ViewMode.Month:
|
|
11411
|
-
return addMonths(startDate, offset2);
|
|
11412
|
-
case ViewMode.Week:
|
|
11413
|
-
return addWeeks(startDate, offset2);
|
|
11414
|
-
case ViewMode.Year:
|
|
11415
|
-
return addYears(startDate, offset2);
|
|
11416
|
-
default:
|
|
11417
|
-
throw new Error("Unknown view mode");
|
|
11418
|
-
}
|
|
11419
|
-
};
|
|
11420
|
-
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11421
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11422
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11423
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11424
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11425
|
-
const intervalDuration = nextDate.getTime() - currentDate.getTime();
|
|
11426
|
-
const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
|
|
11427
|
-
const result = index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11428
|
-
return isNaN(result) || !isFinite(result) ? 0 : result;
|
|
11429
|
-
};
|
|
11430
|
-
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11431
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11432
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11433
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11434
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11435
|
-
const intervalDuration = nextDate.getTime() - currentDate.getTime();
|
|
11436
|
-
const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
|
|
11437
|
-
const result = index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11438
|
-
return isNaN(result) || !isFinite(result) ? 0 : result;
|
|
11439
|
-
};
|
|
11440
|
-
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
11441
|
-
const safeTaskX1 = isNaN(taskX1) || !isFinite(taskX1) ? 0 : taskX1;
|
|
11442
|
-
const safeTaskX2 = isNaN(taskX2) || !isFinite(taskX2) ? 0 : taskX2;
|
|
11443
|
-
const safeProgress = isNaN(progress) || !isFinite(progress) ? 0 : progress;
|
|
11444
|
-
const progressWidth = Math.max(
|
|
11445
|
-
(safeTaskX2 - safeTaskX1) * safeProgress * 0.01,
|
|
11446
|
-
0
|
|
11447
|
-
);
|
|
11448
|
-
let progressX;
|
|
11449
|
-
if (rtl) {
|
|
11450
|
-
progressX = safeTaskX2 - progressWidth;
|
|
11451
|
-
} else {
|
|
11452
|
-
progressX = safeTaskX1;
|
|
11453
|
-
}
|
|
11454
|
-
return [progressWidth, progressX];
|
|
11455
|
-
};
|
|
11456
|
-
const getProgressPoint = (progressX, taskY, taskHeight) => {
|
|
11457
|
-
const point = [
|
|
11458
|
-
progressX - 5,
|
|
11459
|
-
taskY + taskHeight,
|
|
11460
|
-
progressX + 5,
|
|
11461
|
-
taskY + taskHeight,
|
|
11462
|
-
progressX,
|
|
11463
|
-
taskY + taskHeight - 8.66
|
|
11464
|
-
];
|
|
11465
|
-
return point.join(",");
|
|
11466
|
-
};
|
|
11467
|
-
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
11468
|
-
const safeX = isNaN(x) || !isFinite(x) ? 0 : x;
|
|
11469
|
-
const safeTaskX = isNaN(taskX) || !isFinite(taskX) ? 0 : taskX;
|
|
11470
|
-
const safeXStep = isNaN(xStep) || !isFinite(xStep) || xStep === 0 ? 1 : xStep;
|
|
11471
|
-
const safeTimeStep = isNaN(timeStep) || !isFinite(timeStep) ? 0 : timeStep;
|
|
11472
|
-
let newDate = new Date(
|
|
11473
|
-
(safeX - safeTaskX) / safeXStep * safeTimeStep + taskDate.getTime()
|
|
11474
|
-
);
|
|
11475
|
-
newDate = new Date(
|
|
11476
|
-
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
11477
|
-
);
|
|
11478
|
-
return newDate;
|
|
11479
|
-
};
|
|
11480
|
-
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11481
|
-
let result;
|
|
11482
|
-
switch (selectedTask.type) {
|
|
11483
|
-
case "milestone":
|
|
11484
|
-
result = handleTaskBySVGMouseEventForMilestone(
|
|
11485
|
-
action,
|
|
11486
|
-
selectedTask,
|
|
11487
|
-
initialCoordinates,
|
|
11488
|
-
coordinates,
|
|
11489
|
-
xStep,
|
|
11490
|
-
timeStep
|
|
11491
|
-
);
|
|
11492
|
-
break;
|
|
11493
|
-
default:
|
|
11494
|
-
result = handleTaskBySVGMouseEventForBar(
|
|
11495
|
-
action,
|
|
11496
|
-
selectedTask,
|
|
11497
|
-
initialCoordinates,
|
|
11498
|
-
coordinates,
|
|
11499
|
-
xStep,
|
|
11500
|
-
timeStep,
|
|
11501
|
-
rtl
|
|
11502
|
-
);
|
|
11503
|
-
break;
|
|
11504
|
-
}
|
|
11505
|
-
return result;
|
|
11506
|
-
};
|
|
11507
|
-
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11508
|
-
const changedTask = { ...selectedTask };
|
|
11509
|
-
let isChanged = false;
|
|
11510
|
-
switch (action) {
|
|
11511
|
-
case "progress":
|
|
11512
|
-
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11513
|
-
if (isChanged) {
|
|
11514
|
-
changedTask.progress = Math.round(
|
|
11515
|
-
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11516
|
-
);
|
|
11517
|
-
}
|
|
11518
|
-
break;
|
|
11519
|
-
case "start": {
|
|
11520
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11521
|
-
if (isChanged) {
|
|
11522
|
-
if (rtl) {
|
|
11523
|
-
changedTask.end = dateByX(
|
|
11524
|
-
coordinates.x1,
|
|
11525
|
-
initialCoordinates.x1,
|
|
11526
|
-
selectedTask.end,
|
|
11527
|
-
xStep,
|
|
11528
|
-
timeStep
|
|
11529
|
-
);
|
|
11530
|
-
} else {
|
|
11531
|
-
changedTask.start = dateByX(
|
|
11532
|
-
coordinates.x1,
|
|
11533
|
-
initialCoordinates.x1,
|
|
11534
|
-
selectedTask.start,
|
|
11535
|
-
xStep,
|
|
11536
|
-
timeStep
|
|
11537
|
-
);
|
|
11538
|
-
}
|
|
11539
|
-
}
|
|
11540
|
-
break;
|
|
11541
|
-
}
|
|
11542
|
-
case "end": {
|
|
11543
|
-
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11544
|
-
if (isChanged) {
|
|
11545
|
-
if (rtl) {
|
|
11546
|
-
changedTask.start = dateByX(
|
|
11547
|
-
coordinates.x2,
|
|
11548
|
-
initialCoordinates.x2,
|
|
11549
|
-
selectedTask.start,
|
|
11550
|
-
xStep,
|
|
11551
|
-
timeStep
|
|
11552
|
-
);
|
|
11553
|
-
} else {
|
|
11554
|
-
changedTask.end = dateByX(
|
|
11555
|
-
coordinates.x2,
|
|
11556
|
-
initialCoordinates.x2,
|
|
11557
|
-
selectedTask.end,
|
|
11558
|
-
xStep,
|
|
11559
|
-
timeStep
|
|
11560
|
-
);
|
|
11561
|
-
}
|
|
11562
|
-
}
|
|
11563
|
-
break;
|
|
11564
|
-
}
|
|
11565
|
-
case "move": {
|
|
11566
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11567
|
-
if (isChanged) {
|
|
11568
|
-
if (rtl) {
|
|
11569
|
-
changedTask.end = dateByX(
|
|
11570
|
-
coordinates.x1,
|
|
11571
|
-
initialCoordinates.x1,
|
|
11572
|
-
selectedTask.end,
|
|
11573
|
-
xStep,
|
|
11574
|
-
timeStep
|
|
11575
|
-
);
|
|
11576
|
-
changedTask.start = dateByX(
|
|
11577
|
-
coordinates.x2,
|
|
11578
|
-
initialCoordinates.x2,
|
|
11579
|
-
selectedTask.start,
|
|
11580
|
-
xStep,
|
|
11581
|
-
timeStep
|
|
11582
|
-
);
|
|
11583
|
-
} else {
|
|
11584
|
-
changedTask.start = dateByX(
|
|
11585
|
-
coordinates.x1,
|
|
11586
|
-
initialCoordinates.x1,
|
|
11587
|
-
selectedTask.start,
|
|
11588
|
-
xStep,
|
|
11589
|
-
timeStep
|
|
11590
|
-
);
|
|
11591
|
-
changedTask.end = dateByX(
|
|
11592
|
-
coordinates.x2,
|
|
11593
|
-
initialCoordinates.x2,
|
|
11594
|
-
selectedTask.end,
|
|
11595
|
-
xStep,
|
|
11596
|
-
timeStep
|
|
11597
|
-
);
|
|
11598
|
-
}
|
|
11599
|
-
}
|
|
11600
|
-
break;
|
|
11601
|
-
}
|
|
11602
|
-
}
|
|
11603
|
-
return { isChanged, changedTask };
|
|
11604
|
-
};
|
|
11605
|
-
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11606
|
-
const changedTask = { ...selectedTask };
|
|
11607
|
-
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11608
|
-
if (isChanged) {
|
|
11609
|
-
switch (action) {
|
|
11610
|
-
case "move": {
|
|
11611
|
-
changedTask.start = dateByX(
|
|
11612
|
-
coordinates.x1,
|
|
11613
|
-
initialCoordinates.x1,
|
|
11614
|
-
selectedTask.start,
|
|
11615
|
-
xStep,
|
|
11616
|
-
timeStep
|
|
11617
|
-
);
|
|
11618
|
-
changedTask.end = changedTask.start;
|
|
11619
|
-
break;
|
|
11620
|
-
}
|
|
11621
|
-
}
|
|
11622
|
-
}
|
|
11623
|
-
return { isChanged, changedTask };
|
|
11624
|
-
};
|
|
11625
|
-
const DateLine = ({
|
|
11626
|
-
config,
|
|
11627
|
-
additionalLeftSpace,
|
|
11628
|
-
startDate,
|
|
11629
|
-
viewMode,
|
|
11630
|
-
columnWidth,
|
|
11631
|
-
rtl,
|
|
11632
|
-
ganttFullHeight
|
|
11633
|
-
}) => {
|
|
11634
|
-
const tickX = taskXCoordinate(config.date, startDate, viewMode, columnWidth);
|
|
11635
|
-
const x = rtl ? tickX + columnWidth : tickX;
|
|
11636
|
-
const absX = additionalLeftSpace + x;
|
|
11637
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11638
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11639
|
-
"rect",
|
|
11640
|
-
{
|
|
11641
|
-
x: absX,
|
|
11642
|
-
y: 0,
|
|
11643
|
-
width: 2,
|
|
11644
|
-
height: ganttFullHeight,
|
|
11645
|
-
fill: config.color,
|
|
11646
|
-
strokeDasharray: config.dashArray
|
|
11647
|
-
}
|
|
11648
|
-
),
|
|
11649
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11650
|
-
"circle",
|
|
11651
|
-
{
|
|
11652
|
-
className: styles$d.ganttTodayCircle,
|
|
11653
|
-
cx: absX + 1,
|
|
11654
|
-
cy: 6,
|
|
11655
|
-
r: 6,
|
|
11656
|
-
fill: config.color
|
|
11657
|
-
}
|
|
11658
|
-
),
|
|
11659
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11660
|
-
"text",
|
|
11661
|
-
{
|
|
11662
|
-
x: absX + 10,
|
|
11663
|
-
y: 10,
|
|
11664
|
-
fill: config.color,
|
|
11665
|
-
fontSize: 12,
|
|
11666
|
-
fontWeight: 600,
|
|
11667
|
-
children: config.label
|
|
11668
|
-
}
|
|
11669
|
-
)
|
|
11670
|
-
] });
|
|
11671
|
-
};
|
|
11672
11400
|
const GanttTodayInner = ({
|
|
11673
11401
|
additionalLeftSpace,
|
|
11674
11402
|
distances: { columnWidth },
|
|
@@ -11679,117 +11407,167 @@
|
|
|
11679
11407
|
viewMode,
|
|
11680
11408
|
showTodayLine = true,
|
|
11681
11409
|
showDataDateLine = false,
|
|
11682
|
-
showProjectStartLine = false,
|
|
11683
|
-
showProjectEndLine = false,
|
|
11684
11410
|
dataDate = null,
|
|
11685
|
-
projectStartDate = null,
|
|
11686
|
-
projectEndDate = null,
|
|
11687
11411
|
todayColor = null,
|
|
11688
11412
|
dataDateColor = null,
|
|
11689
|
-
projectStartColor = null,
|
|
11690
|
-
projectEndColor = null,
|
|
11691
11413
|
todayLabel = "Today",
|
|
11692
|
-
dataDateLabel = "Data Date"
|
|
11693
|
-
projectStartLabel = "Project Start",
|
|
11694
|
-
projectEndLabel = "Project End"
|
|
11414
|
+
dataDateLabel = "Data Date"
|
|
11695
11415
|
}) => {
|
|
11696
|
-
const lineProps = React.useMemo(
|
|
11697
|
-
() => ({
|
|
11698
|
-
additionalLeftSpace,
|
|
11699
|
-
startDate,
|
|
11700
|
-
viewMode,
|
|
11701
|
-
columnWidth,
|
|
11702
|
-
rtl,
|
|
11703
|
-
ganttFullHeight
|
|
11704
|
-
}),
|
|
11705
|
-
[
|
|
11706
|
-
additionalLeftSpace,
|
|
11707
|
-
startDate,
|
|
11708
|
-
viewMode,
|
|
11709
|
-
columnWidth,
|
|
11710
|
-
rtl,
|
|
11711
|
-
ganttFullHeight
|
|
11712
|
-
]
|
|
11713
|
-
);
|
|
11714
11416
|
const todayElement = React.useMemo(() => {
|
|
11715
11417
|
if (isUnknownDates || !showTodayLine) {
|
|
11716
11418
|
return null;
|
|
11717
11419
|
}
|
|
11718
|
-
|
|
11719
|
-
|
|
11720
|
-
|
|
11721
|
-
|
|
11722
|
-
|
|
11723
|
-
|
|
11724
|
-
|
|
11725
|
-
}
|
|
11726
|
-
|
|
11727
|
-
|
|
11728
|
-
|
|
11729
|
-
|
|
11730
|
-
|
|
11731
|
-
|
|
11732
|
-
|
|
11733
|
-
|
|
11734
|
-
|
|
11735
|
-
|
|
11736
|
-
|
|
11737
|
-
|
|
11738
|
-
|
|
11739
|
-
|
|
11740
|
-
|
|
11741
|
-
},
|
|
11742
|
-
...lineProps
|
|
11743
|
-
}
|
|
11744
|
-
);
|
|
11745
|
-
}, [showDataDateLine, dataDate, dataDateColor, dataDateLabel, lineProps]);
|
|
11746
|
-
const projectStartElement = React.useMemo(() => {
|
|
11747
|
-
if (!showProjectStartLine || !projectStartDate) {
|
|
11748
|
-
return null;
|
|
11749
|
-
}
|
|
11750
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11751
|
-
DateLine,
|
|
11752
|
-
{
|
|
11753
|
-
config: {
|
|
11754
|
-
date: projectStartDate,
|
|
11755
|
-
color: projectStartColor || "#4caf50",
|
|
11756
|
-
label: projectStartLabel
|
|
11757
|
-
},
|
|
11758
|
-
...lineProps
|
|
11420
|
+
const today = /* @__PURE__ */ new Date();
|
|
11421
|
+
const todayIndex = getDatesDiff(today, startDate, viewMode);
|
|
11422
|
+
const extraMultiplier = () => {
|
|
11423
|
+
switch (viewMode) {
|
|
11424
|
+
case ViewMode.Week: {
|
|
11425
|
+
const percent = today.getDay() / 7;
|
|
11426
|
+
return 1 + percent * 0.2;
|
|
11427
|
+
}
|
|
11428
|
+
case ViewMode.Month: {
|
|
11429
|
+
const dayInMonth = today.getDate();
|
|
11430
|
+
const maxDaysInMonth = getDaysInMonth(
|
|
11431
|
+
today.getMonth(),
|
|
11432
|
+
today.getFullYear()
|
|
11433
|
+
);
|
|
11434
|
+
const percent = dayInMonth / maxDaysInMonth;
|
|
11435
|
+
return 1 + percent * 0.5;
|
|
11436
|
+
}
|
|
11437
|
+
case ViewMode.Year: {
|
|
11438
|
+
const percent = today.getMonth() / 12;
|
|
11439
|
+
return 1 + percent * 0.5;
|
|
11440
|
+
}
|
|
11441
|
+
default:
|
|
11442
|
+
return 1;
|
|
11759
11443
|
}
|
|
11760
|
-
|
|
11444
|
+
};
|
|
11445
|
+
const tickX = todayIndex * columnWidth * extraMultiplier();
|
|
11446
|
+
const x = rtl ? tickX + columnWidth : tickX;
|
|
11447
|
+
const color = todayColor || "var(--gantt-calendar-today-color)";
|
|
11448
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11449
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11450
|
+
"rect",
|
|
11451
|
+
{
|
|
11452
|
+
x: additionalLeftSpace + x,
|
|
11453
|
+
y: 0,
|
|
11454
|
+
width: 2,
|
|
11455
|
+
height: ganttFullHeight,
|
|
11456
|
+
fill: color
|
|
11457
|
+
}
|
|
11458
|
+
),
|
|
11459
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11460
|
+
"circle",
|
|
11461
|
+
{
|
|
11462
|
+
className: styles$d.ganttTodayCircle,
|
|
11463
|
+
cx: x + 1,
|
|
11464
|
+
cy: 6,
|
|
11465
|
+
r: 6,
|
|
11466
|
+
fill: color
|
|
11467
|
+
}
|
|
11468
|
+
),
|
|
11469
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11470
|
+
"text",
|
|
11471
|
+
{
|
|
11472
|
+
x: additionalLeftSpace + x + 8,
|
|
11473
|
+
y: 10,
|
|
11474
|
+
fill: color,
|
|
11475
|
+
fontSize: 12,
|
|
11476
|
+
fontWeight: 600,
|
|
11477
|
+
children: todayLabel
|
|
11478
|
+
}
|
|
11479
|
+
)
|
|
11480
|
+
] });
|
|
11761
11481
|
}, [
|
|
11762
|
-
|
|
11763
|
-
|
|
11764
|
-
|
|
11765
|
-
|
|
11766
|
-
|
|
11482
|
+
additionalLeftSpace,
|
|
11483
|
+
columnWidth,
|
|
11484
|
+
ganttFullHeight,
|
|
11485
|
+
isUnknownDates,
|
|
11486
|
+
rtl,
|
|
11487
|
+
startDate,
|
|
11488
|
+
viewMode,
|
|
11489
|
+
showTodayLine,
|
|
11490
|
+
todayColor,
|
|
11491
|
+
todayLabel
|
|
11767
11492
|
]);
|
|
11768
|
-
const
|
|
11769
|
-
if (!
|
|
11493
|
+
const dataDateElement = React.useMemo(() => {
|
|
11494
|
+
if (!showDataDateLine || !dataDate) {
|
|
11770
11495
|
return null;
|
|
11771
11496
|
}
|
|
11772
|
-
|
|
11773
|
-
|
|
11774
|
-
{
|
|
11775
|
-
|
|
11776
|
-
|
|
11777
|
-
|
|
11778
|
-
|
|
11779
|
-
|
|
11780
|
-
|
|
11497
|
+
const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
|
|
11498
|
+
const extraMultiplier = () => {
|
|
11499
|
+
switch (viewMode) {
|
|
11500
|
+
case ViewMode.Week: {
|
|
11501
|
+
const percent = dataDate.getDay() / 7;
|
|
11502
|
+
return 1 + percent * 0.2;
|
|
11503
|
+
}
|
|
11504
|
+
case ViewMode.Month: {
|
|
11505
|
+
const dayInMonth = dataDate.getDate();
|
|
11506
|
+
const maxDaysInMonth = getDaysInMonth(
|
|
11507
|
+
dataDate.getMonth(),
|
|
11508
|
+
dataDate.getFullYear()
|
|
11509
|
+
);
|
|
11510
|
+
const percent = dayInMonth / maxDaysInMonth;
|
|
11511
|
+
return 1 + percent * 0.5;
|
|
11512
|
+
}
|
|
11513
|
+
case ViewMode.Year: {
|
|
11514
|
+
const percent = dataDate.getMonth() / 12;
|
|
11515
|
+
return 1 + percent * 0.5;
|
|
11516
|
+
}
|
|
11517
|
+
default:
|
|
11518
|
+
return 1;
|
|
11781
11519
|
}
|
|
11782
|
-
|
|
11520
|
+
};
|
|
11521
|
+
const tickX = dataIndex * columnWidth * extraMultiplier();
|
|
11522
|
+
const x = rtl ? tickX + columnWidth : tickX;
|
|
11523
|
+
const color = dataDateColor || "var(--gantt-calendar-today-color)";
|
|
11524
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11525
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11526
|
+
"rect",
|
|
11527
|
+
{
|
|
11528
|
+
x: additionalLeftSpace + x,
|
|
11529
|
+
y: 0,
|
|
11530
|
+
width: 2,
|
|
11531
|
+
height: ganttFullHeight,
|
|
11532
|
+
fill: color,
|
|
11533
|
+
opacity: 0.9
|
|
11534
|
+
}
|
|
11535
|
+
),
|
|
11536
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11537
|
+
"circle",
|
|
11538
|
+
{
|
|
11539
|
+
className: styles$d.ganttTodayCircle,
|
|
11540
|
+
cx: x + 1,
|
|
11541
|
+
cy: 6,
|
|
11542
|
+
r: 6,
|
|
11543
|
+
fill: color
|
|
11544
|
+
}
|
|
11545
|
+
),
|
|
11546
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11547
|
+
"text",
|
|
11548
|
+
{
|
|
11549
|
+
x: additionalLeftSpace + x + 8,
|
|
11550
|
+
y: 10,
|
|
11551
|
+
fill: color,
|
|
11552
|
+
fontSize: 12,
|
|
11553
|
+
fontWeight: 600,
|
|
11554
|
+
children: dataDateLabel || "Data Date"
|
|
11555
|
+
}
|
|
11556
|
+
)
|
|
11557
|
+
] });
|
|
11783
11558
|
}, [
|
|
11784
|
-
|
|
11785
|
-
|
|
11786
|
-
|
|
11787
|
-
|
|
11788
|
-
|
|
11559
|
+
additionalLeftSpace,
|
|
11560
|
+
columnWidth,
|
|
11561
|
+
ganttFullHeight,
|
|
11562
|
+
rtl,
|
|
11563
|
+
startDate,
|
|
11564
|
+
viewMode,
|
|
11565
|
+
showDataDateLine,
|
|
11566
|
+
dataDate,
|
|
11567
|
+
dataDateColor,
|
|
11568
|
+
dataDateLabel
|
|
11789
11569
|
]);
|
|
11790
11570
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
|
|
11791
|
-
projectStartElement,
|
|
11792
|
-
projectEndElement,
|
|
11793
11571
|
dataDateElement,
|
|
11794
11572
|
todayElement
|
|
11795
11573
|
] });
|
|
@@ -12577,6 +12355,231 @@
|
|
|
12577
12355
|
}
|
|
12578
12356
|
);
|
|
12579
12357
|
};
|
|
12358
|
+
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
12359
|
+
switch (viewMode) {
|
|
12360
|
+
case ViewMode.Day:
|
|
12361
|
+
return addDays(startDate, offset2);
|
|
12362
|
+
case ViewMode.HalfDay:
|
|
12363
|
+
return addHours(startDate, offset2 * 12);
|
|
12364
|
+
case ViewMode.QuarterDay:
|
|
12365
|
+
return addHours(startDate, offset2 * 6);
|
|
12366
|
+
case ViewMode.Hour:
|
|
12367
|
+
return addHours(startDate, offset2);
|
|
12368
|
+
case ViewMode.Month:
|
|
12369
|
+
return addMonths(startDate, offset2);
|
|
12370
|
+
case ViewMode.Week:
|
|
12371
|
+
return addWeeks(startDate, offset2);
|
|
12372
|
+
case ViewMode.Year:
|
|
12373
|
+
return addYears(startDate, offset2);
|
|
12374
|
+
default:
|
|
12375
|
+
throw new Error("Unknown view mode");
|
|
12376
|
+
}
|
|
12377
|
+
};
|
|
12378
|
+
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
12379
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
12380
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
12381
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
12382
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
12383
|
+
const intervalDuration = nextDate.getTime() - currentDate.getTime();
|
|
12384
|
+
const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
|
|
12385
|
+
const result = index2 * columnWidth + percentOfInterval * columnWidth;
|
|
12386
|
+
return isNaN(result) || !isFinite(result) ? 0 : result;
|
|
12387
|
+
};
|
|
12388
|
+
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
12389
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
12390
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
12391
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
12392
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
12393
|
+
const intervalDuration = nextDate.getTime() - currentDate.getTime();
|
|
12394
|
+
const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
|
|
12395
|
+
const result = index2 * columnWidth + percentOfInterval * columnWidth;
|
|
12396
|
+
return isNaN(result) || !isFinite(result) ? 0 : result;
|
|
12397
|
+
};
|
|
12398
|
+
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
12399
|
+
const safeTaskX1 = isNaN(taskX1) || !isFinite(taskX1) ? 0 : taskX1;
|
|
12400
|
+
const safeTaskX2 = isNaN(taskX2) || !isFinite(taskX2) ? 0 : taskX2;
|
|
12401
|
+
const safeProgress = isNaN(progress) || !isFinite(progress) ? 0 : progress;
|
|
12402
|
+
const progressWidth = Math.max(
|
|
12403
|
+
(safeTaskX2 - safeTaskX1) * safeProgress * 0.01,
|
|
12404
|
+
0
|
|
12405
|
+
);
|
|
12406
|
+
let progressX;
|
|
12407
|
+
if (rtl) {
|
|
12408
|
+
progressX = safeTaskX2 - progressWidth;
|
|
12409
|
+
} else {
|
|
12410
|
+
progressX = safeTaskX1;
|
|
12411
|
+
}
|
|
12412
|
+
return [progressWidth, progressX];
|
|
12413
|
+
};
|
|
12414
|
+
const getProgressPoint = (progressX, taskY, taskHeight) => {
|
|
12415
|
+
const point = [
|
|
12416
|
+
progressX - 5,
|
|
12417
|
+
taskY + taskHeight,
|
|
12418
|
+
progressX + 5,
|
|
12419
|
+
taskY + taskHeight,
|
|
12420
|
+
progressX,
|
|
12421
|
+
taskY + taskHeight - 8.66
|
|
12422
|
+
];
|
|
12423
|
+
return point.join(",");
|
|
12424
|
+
};
|
|
12425
|
+
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
12426
|
+
const safeX = isNaN(x) || !isFinite(x) ? 0 : x;
|
|
12427
|
+
const safeTaskX = isNaN(taskX) || !isFinite(taskX) ? 0 : taskX;
|
|
12428
|
+
const safeXStep = isNaN(xStep) || !isFinite(xStep) || xStep === 0 ? 1 : xStep;
|
|
12429
|
+
const safeTimeStep = isNaN(timeStep) || !isFinite(timeStep) ? 0 : timeStep;
|
|
12430
|
+
let newDate = new Date(
|
|
12431
|
+
(safeX - safeTaskX) / safeXStep * safeTimeStep + taskDate.getTime()
|
|
12432
|
+
);
|
|
12433
|
+
newDate = new Date(
|
|
12434
|
+
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
12435
|
+
);
|
|
12436
|
+
return newDate;
|
|
12437
|
+
};
|
|
12438
|
+
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
12439
|
+
let result;
|
|
12440
|
+
switch (selectedTask.type) {
|
|
12441
|
+
case "milestone":
|
|
12442
|
+
result = handleTaskBySVGMouseEventForMilestone(
|
|
12443
|
+
action,
|
|
12444
|
+
selectedTask,
|
|
12445
|
+
initialCoordinates,
|
|
12446
|
+
coordinates,
|
|
12447
|
+
xStep,
|
|
12448
|
+
timeStep
|
|
12449
|
+
);
|
|
12450
|
+
break;
|
|
12451
|
+
default:
|
|
12452
|
+
result = handleTaskBySVGMouseEventForBar(
|
|
12453
|
+
action,
|
|
12454
|
+
selectedTask,
|
|
12455
|
+
initialCoordinates,
|
|
12456
|
+
coordinates,
|
|
12457
|
+
xStep,
|
|
12458
|
+
timeStep,
|
|
12459
|
+
rtl
|
|
12460
|
+
);
|
|
12461
|
+
break;
|
|
12462
|
+
}
|
|
12463
|
+
return result;
|
|
12464
|
+
};
|
|
12465
|
+
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
12466
|
+
const changedTask = { ...selectedTask };
|
|
12467
|
+
let isChanged = false;
|
|
12468
|
+
switch (action) {
|
|
12469
|
+
case "progress":
|
|
12470
|
+
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
12471
|
+
if (isChanged) {
|
|
12472
|
+
changedTask.progress = Math.round(
|
|
12473
|
+
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
12474
|
+
);
|
|
12475
|
+
}
|
|
12476
|
+
break;
|
|
12477
|
+
case "start": {
|
|
12478
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
12479
|
+
if (isChanged) {
|
|
12480
|
+
if (rtl) {
|
|
12481
|
+
changedTask.end = dateByX(
|
|
12482
|
+
coordinates.x1,
|
|
12483
|
+
initialCoordinates.x1,
|
|
12484
|
+
selectedTask.end,
|
|
12485
|
+
xStep,
|
|
12486
|
+
timeStep
|
|
12487
|
+
);
|
|
12488
|
+
} else {
|
|
12489
|
+
changedTask.start = dateByX(
|
|
12490
|
+
coordinates.x1,
|
|
12491
|
+
initialCoordinates.x1,
|
|
12492
|
+
selectedTask.start,
|
|
12493
|
+
xStep,
|
|
12494
|
+
timeStep
|
|
12495
|
+
);
|
|
12496
|
+
}
|
|
12497
|
+
}
|
|
12498
|
+
break;
|
|
12499
|
+
}
|
|
12500
|
+
case "end": {
|
|
12501
|
+
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
12502
|
+
if (isChanged) {
|
|
12503
|
+
if (rtl) {
|
|
12504
|
+
changedTask.start = dateByX(
|
|
12505
|
+
coordinates.x2,
|
|
12506
|
+
initialCoordinates.x2,
|
|
12507
|
+
selectedTask.start,
|
|
12508
|
+
xStep,
|
|
12509
|
+
timeStep
|
|
12510
|
+
);
|
|
12511
|
+
} else {
|
|
12512
|
+
changedTask.end = dateByX(
|
|
12513
|
+
coordinates.x2,
|
|
12514
|
+
initialCoordinates.x2,
|
|
12515
|
+
selectedTask.end,
|
|
12516
|
+
xStep,
|
|
12517
|
+
timeStep
|
|
12518
|
+
);
|
|
12519
|
+
}
|
|
12520
|
+
}
|
|
12521
|
+
break;
|
|
12522
|
+
}
|
|
12523
|
+
case "move": {
|
|
12524
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
12525
|
+
if (isChanged) {
|
|
12526
|
+
if (rtl) {
|
|
12527
|
+
changedTask.end = dateByX(
|
|
12528
|
+
coordinates.x1,
|
|
12529
|
+
initialCoordinates.x1,
|
|
12530
|
+
selectedTask.end,
|
|
12531
|
+
xStep,
|
|
12532
|
+
timeStep
|
|
12533
|
+
);
|
|
12534
|
+
changedTask.start = dateByX(
|
|
12535
|
+
coordinates.x2,
|
|
12536
|
+
initialCoordinates.x2,
|
|
12537
|
+
selectedTask.start,
|
|
12538
|
+
xStep,
|
|
12539
|
+
timeStep
|
|
12540
|
+
);
|
|
12541
|
+
} else {
|
|
12542
|
+
changedTask.start = dateByX(
|
|
12543
|
+
coordinates.x1,
|
|
12544
|
+
initialCoordinates.x1,
|
|
12545
|
+
selectedTask.start,
|
|
12546
|
+
xStep,
|
|
12547
|
+
timeStep
|
|
12548
|
+
);
|
|
12549
|
+
changedTask.end = dateByX(
|
|
12550
|
+
coordinates.x2,
|
|
12551
|
+
initialCoordinates.x2,
|
|
12552
|
+
selectedTask.end,
|
|
12553
|
+
xStep,
|
|
12554
|
+
timeStep
|
|
12555
|
+
);
|
|
12556
|
+
}
|
|
12557
|
+
}
|
|
12558
|
+
break;
|
|
12559
|
+
}
|
|
12560
|
+
}
|
|
12561
|
+
return { isChanged, changedTask };
|
|
12562
|
+
};
|
|
12563
|
+
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
12564
|
+
const changedTask = { ...selectedTask };
|
|
12565
|
+
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
12566
|
+
if (isChanged) {
|
|
12567
|
+
switch (action) {
|
|
12568
|
+
case "move": {
|
|
12569
|
+
changedTask.start = dateByX(
|
|
12570
|
+
coordinates.x1,
|
|
12571
|
+
initialCoordinates.x1,
|
|
12572
|
+
selectedTask.start,
|
|
12573
|
+
xStep,
|
|
12574
|
+
timeStep
|
|
12575
|
+
);
|
|
12576
|
+
changedTask.end = changedTask.start;
|
|
12577
|
+
break;
|
|
12578
|
+
}
|
|
12579
|
+
}
|
|
12580
|
+
}
|
|
12581
|
+
return { isChanged, changedTask };
|
|
12582
|
+
};
|
|
12580
12583
|
const barWrapper = "_barWrapper_5jhkr_1";
|
|
12581
12584
|
const barHandle = "_barHandle_5jhkr_11";
|
|
12582
12585
|
const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
|
|
@@ -19992,19 +19995,11 @@
|
|
|
19992
19995
|
rowHeight,
|
|
19993
19996
|
showTodayLine = true,
|
|
19994
19997
|
showDataDateLine = false,
|
|
19995
|
-
showProjectStartLine = false,
|
|
19996
|
-
showProjectEndLine = false,
|
|
19997
19998
|
dataDate = null,
|
|
19998
|
-
projectStartDate = null,
|
|
19999
|
-
projectEndDate = null,
|
|
20000
19999
|
todayColor,
|
|
20001
20000
|
dataDateColor,
|
|
20002
|
-
projectStartColor,
|
|
20003
|
-
projectEndColor,
|
|
20004
20001
|
todayLabel = "Today",
|
|
20005
20002
|
dataDateLabel = "Data Date",
|
|
20006
|
-
projectStartLabel = "Project Start",
|
|
20007
|
-
projectEndLabel = "Project End",
|
|
20008
20003
|
showProgress = true,
|
|
20009
20004
|
hideProjectProgress = false,
|
|
20010
20005
|
progressColor,
|
|
@@ -21433,19 +21428,11 @@
|
|
|
21433
21428
|
viewMode,
|
|
21434
21429
|
showTodayLine,
|
|
21435
21430
|
showDataDateLine,
|
|
21436
|
-
showProjectStartLine,
|
|
21437
|
-
showProjectEndLine,
|
|
21438
21431
|
dataDate,
|
|
21439
|
-
projectStartDate,
|
|
21440
|
-
projectEndDate,
|
|
21441
21432
|
todayColor,
|
|
21442
21433
|
dataDateColor,
|
|
21443
|
-
projectStartColor,
|
|
21444
|
-
projectEndColor,
|
|
21445
21434
|
todayLabel,
|
|
21446
|
-
dataDateLabel
|
|
21447
|
-
projectStartLabel,
|
|
21448
|
-
projectEndLabel
|
|
21435
|
+
dataDateLabel
|
|
21449
21436
|
}),
|
|
21450
21437
|
[
|
|
21451
21438
|
additionalLeftSpace,
|
|
@@ -21457,19 +21444,11 @@
|
|
|
21457
21444
|
viewMode,
|
|
21458
21445
|
showTodayLine,
|
|
21459
21446
|
showDataDateLine,
|
|
21460
|
-
showProjectStartLine,
|
|
21461
|
-
showProjectEndLine,
|
|
21462
21447
|
dataDate,
|
|
21463
|
-
projectStartDate,
|
|
21464
|
-
projectEndDate,
|
|
21465
21448
|
todayColor,
|
|
21466
21449
|
dataDateColor,
|
|
21467
|
-
projectStartColor,
|
|
21468
|
-
projectEndColor,
|
|
21469
21450
|
todayLabel,
|
|
21470
|
-
dataDateLabel
|
|
21471
|
-
projectStartLabel,
|
|
21472
|
-
projectEndLabel
|
|
21451
|
+
dataDateLabel
|
|
21473
21452
|
]
|
|
21474
21453
|
);
|
|
21475
21454
|
const calendarProps = React.useMemo(
|