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