gantt-task-react-v 1.0.58 → 1.1.1
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.
- package/dist/components/gantt-today/index.d.ts +1 -0
- package/dist/gantt-task-react.es.js +214 -256
- package/dist/gantt-task-react.umd.js +214 -256
- package/package.json +15 -11
|
@@ -10907,6 +10907,204 @@ const styles$c = {
|
|
|
10907
10907
|
ganttToday,
|
|
10908
10908
|
ganttTodayCircle
|
|
10909
10909
|
};
|
|
10910
|
+
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
10911
|
+
switch (viewMode) {
|
|
10912
|
+
case ViewMode.Day:
|
|
10913
|
+
return addDays(startDate, offset2);
|
|
10914
|
+
case ViewMode.HalfDay:
|
|
10915
|
+
return addHours(startDate, offset2 * 12);
|
|
10916
|
+
case ViewMode.QuarterDay:
|
|
10917
|
+
return addHours(startDate, offset2 * 6);
|
|
10918
|
+
case ViewMode.Hour:
|
|
10919
|
+
return addHours(startDate, offset2);
|
|
10920
|
+
case ViewMode.Month:
|
|
10921
|
+
return addMonths(startDate, offset2);
|
|
10922
|
+
case ViewMode.Week:
|
|
10923
|
+
return addWeeks(startDate, offset2);
|
|
10924
|
+
case ViewMode.Year:
|
|
10925
|
+
return addYears(startDate, offset2);
|
|
10926
|
+
default:
|
|
10927
|
+
throw new Error("Unknown view mode");
|
|
10928
|
+
}
|
|
10929
|
+
};
|
|
10930
|
+
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10931
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10932
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10933
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10934
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10935
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10936
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10937
|
+
};
|
|
10938
|
+
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10939
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10940
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10941
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10942
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10943
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10944
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10945
|
+
};
|
|
10946
|
+
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
10947
|
+
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
10948
|
+
let progressX;
|
|
10949
|
+
if (rtl) {
|
|
10950
|
+
progressX = taskX2 - progressWidth;
|
|
10951
|
+
} else {
|
|
10952
|
+
progressX = taskX1;
|
|
10953
|
+
}
|
|
10954
|
+
return [progressWidth, progressX];
|
|
10955
|
+
};
|
|
10956
|
+
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
10957
|
+
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
10958
|
+
newDate = new Date(
|
|
10959
|
+
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
10960
|
+
);
|
|
10961
|
+
return newDate;
|
|
10962
|
+
};
|
|
10963
|
+
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10964
|
+
let result;
|
|
10965
|
+
switch (selectedTask.type) {
|
|
10966
|
+
case "milestone":
|
|
10967
|
+
result = handleTaskBySVGMouseEventForMilestone(
|
|
10968
|
+
action,
|
|
10969
|
+
selectedTask,
|
|
10970
|
+
initialCoordinates,
|
|
10971
|
+
coordinates,
|
|
10972
|
+
xStep,
|
|
10973
|
+
timeStep
|
|
10974
|
+
);
|
|
10975
|
+
break;
|
|
10976
|
+
default:
|
|
10977
|
+
result = handleTaskBySVGMouseEventForBar(
|
|
10978
|
+
action,
|
|
10979
|
+
selectedTask,
|
|
10980
|
+
initialCoordinates,
|
|
10981
|
+
coordinates,
|
|
10982
|
+
xStep,
|
|
10983
|
+
timeStep,
|
|
10984
|
+
rtl
|
|
10985
|
+
);
|
|
10986
|
+
break;
|
|
10987
|
+
}
|
|
10988
|
+
return result;
|
|
10989
|
+
};
|
|
10990
|
+
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10991
|
+
const changedTask = { ...selectedTask };
|
|
10992
|
+
let isChanged = false;
|
|
10993
|
+
switch (action) {
|
|
10994
|
+
case "progress":
|
|
10995
|
+
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
10996
|
+
if (isChanged) {
|
|
10997
|
+
changedTask.progress = Math.round(
|
|
10998
|
+
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
10999
|
+
);
|
|
11000
|
+
}
|
|
11001
|
+
break;
|
|
11002
|
+
case "start": {
|
|
11003
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11004
|
+
if (isChanged) {
|
|
11005
|
+
if (rtl) {
|
|
11006
|
+
changedTask.end = dateByX(
|
|
11007
|
+
coordinates.x1,
|
|
11008
|
+
initialCoordinates.x1,
|
|
11009
|
+
selectedTask.end,
|
|
11010
|
+
xStep,
|
|
11011
|
+
timeStep
|
|
11012
|
+
);
|
|
11013
|
+
} else {
|
|
11014
|
+
changedTask.start = dateByX(
|
|
11015
|
+
coordinates.x1,
|
|
11016
|
+
initialCoordinates.x1,
|
|
11017
|
+
selectedTask.start,
|
|
11018
|
+
xStep,
|
|
11019
|
+
timeStep
|
|
11020
|
+
);
|
|
11021
|
+
}
|
|
11022
|
+
}
|
|
11023
|
+
break;
|
|
11024
|
+
}
|
|
11025
|
+
case "end": {
|
|
11026
|
+
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11027
|
+
if (isChanged) {
|
|
11028
|
+
if (rtl) {
|
|
11029
|
+
changedTask.start = dateByX(
|
|
11030
|
+
coordinates.x2,
|
|
11031
|
+
initialCoordinates.x2,
|
|
11032
|
+
selectedTask.start,
|
|
11033
|
+
xStep,
|
|
11034
|
+
timeStep
|
|
11035
|
+
);
|
|
11036
|
+
} else {
|
|
11037
|
+
changedTask.end = dateByX(
|
|
11038
|
+
coordinates.x2,
|
|
11039
|
+
initialCoordinates.x2,
|
|
11040
|
+
selectedTask.end,
|
|
11041
|
+
xStep,
|
|
11042
|
+
timeStep
|
|
11043
|
+
);
|
|
11044
|
+
}
|
|
11045
|
+
}
|
|
11046
|
+
break;
|
|
11047
|
+
}
|
|
11048
|
+
case "move": {
|
|
11049
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11050
|
+
if (isChanged) {
|
|
11051
|
+
if (rtl) {
|
|
11052
|
+
changedTask.end = dateByX(
|
|
11053
|
+
coordinates.x1,
|
|
11054
|
+
initialCoordinates.x1,
|
|
11055
|
+
selectedTask.end,
|
|
11056
|
+
xStep,
|
|
11057
|
+
timeStep
|
|
11058
|
+
);
|
|
11059
|
+
changedTask.start = dateByX(
|
|
11060
|
+
coordinates.x2,
|
|
11061
|
+
initialCoordinates.x2,
|
|
11062
|
+
selectedTask.start,
|
|
11063
|
+
xStep,
|
|
11064
|
+
timeStep
|
|
11065
|
+
);
|
|
11066
|
+
} else {
|
|
11067
|
+
changedTask.start = dateByX(
|
|
11068
|
+
coordinates.x1,
|
|
11069
|
+
initialCoordinates.x1,
|
|
11070
|
+
selectedTask.start,
|
|
11071
|
+
xStep,
|
|
11072
|
+
timeStep
|
|
11073
|
+
);
|
|
11074
|
+
changedTask.end = dateByX(
|
|
11075
|
+
coordinates.x2,
|
|
11076
|
+
initialCoordinates.x2,
|
|
11077
|
+
selectedTask.end,
|
|
11078
|
+
xStep,
|
|
11079
|
+
timeStep
|
|
11080
|
+
);
|
|
11081
|
+
}
|
|
11082
|
+
}
|
|
11083
|
+
break;
|
|
11084
|
+
}
|
|
11085
|
+
}
|
|
11086
|
+
return { isChanged, changedTask };
|
|
11087
|
+
};
|
|
11088
|
+
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11089
|
+
const changedTask = { ...selectedTask };
|
|
11090
|
+
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11091
|
+
if (isChanged) {
|
|
11092
|
+
switch (action) {
|
|
11093
|
+
case "move": {
|
|
11094
|
+
changedTask.start = dateByX(
|
|
11095
|
+
coordinates.x1,
|
|
11096
|
+
initialCoordinates.x1,
|
|
11097
|
+
selectedTask.start,
|
|
11098
|
+
xStep,
|
|
11099
|
+
timeStep
|
|
11100
|
+
);
|
|
11101
|
+
changedTask.end = changedTask.start;
|
|
11102
|
+
break;
|
|
11103
|
+
}
|
|
11104
|
+
}
|
|
11105
|
+
}
|
|
11106
|
+
return { isChanged, changedTask };
|
|
11107
|
+
};
|
|
10910
11108
|
const GanttTodayInner = ({
|
|
10911
11109
|
additionalLeftSpace,
|
|
10912
11110
|
distances: { columnWidth },
|
|
@@ -10915,6 +11113,8 @@ const GanttTodayInner = ({
|
|
|
10915
11113
|
rtl,
|
|
10916
11114
|
startDate,
|
|
10917
11115
|
viewMode,
|
|
11116
|
+
taskHeight,
|
|
11117
|
+
// Add taskHeight parameter
|
|
10918
11118
|
showTodayLine = true,
|
|
10919
11119
|
showDataDateLine = false,
|
|
10920
11120
|
dataDate = null,
|
|
@@ -10928,38 +11128,14 @@ const GanttTodayInner = ({
|
|
|
10928
11128
|
return null;
|
|
10929
11129
|
}
|
|
10930
11130
|
const today = /* @__PURE__ */ new Date();
|
|
10931
|
-
const
|
|
10932
|
-
const
|
|
10933
|
-
switch (viewMode) {
|
|
10934
|
-
case ViewMode.Week: {
|
|
10935
|
-
const percent = today.getDay() / 7;
|
|
10936
|
-
return 1 + percent * 0.2;
|
|
10937
|
-
}
|
|
10938
|
-
case ViewMode.Month: {
|
|
10939
|
-
const dayInMonth = today.getDate();
|
|
10940
|
-
const maxDaysInMonth = getDaysInMonth(
|
|
10941
|
-
today.getMonth(),
|
|
10942
|
-
today.getFullYear()
|
|
10943
|
-
);
|
|
10944
|
-
const percent = dayInMonth / maxDaysInMonth;
|
|
10945
|
-
return 1 + percent * 0.5;
|
|
10946
|
-
}
|
|
10947
|
-
case ViewMode.Year: {
|
|
10948
|
-
const percent = today.getMonth() / 12;
|
|
10949
|
-
return 1 + percent * 0.5;
|
|
10950
|
-
}
|
|
10951
|
-
default:
|
|
10952
|
-
return 1;
|
|
10953
|
-
}
|
|
10954
|
-
};
|
|
10955
|
-
const tickX = todayIndex * columnWidth * extraMultiplier();
|
|
10956
|
-
const x = rtl ? tickX + columnWidth : tickX;
|
|
11131
|
+
const x = taskXCoordinate(today, startDate, viewMode, columnWidth);
|
|
11132
|
+
const adjustedX = rtl ? x + columnWidth : x;
|
|
10957
11133
|
const color = todayColor || "var(--gantt-calendar-today-color)";
|
|
10958
11134
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10959
11135
|
/* @__PURE__ */ jsx(
|
|
10960
11136
|
"rect",
|
|
10961
11137
|
{
|
|
10962
|
-
x: additionalLeftSpace +
|
|
11138
|
+
x: additionalLeftSpace + adjustedX,
|
|
10963
11139
|
y: 0,
|
|
10964
11140
|
width: 2,
|
|
10965
11141
|
height: ganttFullHeight,
|
|
@@ -10970,7 +11146,7 @@ const GanttTodayInner = ({
|
|
|
10970
11146
|
"circle",
|
|
10971
11147
|
{
|
|
10972
11148
|
className: styles$c.ganttTodayCircle,
|
|
10973
|
-
cx:
|
|
11149
|
+
cx: adjustedX + 1,
|
|
10974
11150
|
cy: 6,
|
|
10975
11151
|
r: 6,
|
|
10976
11152
|
fill: color
|
|
@@ -10979,7 +11155,7 @@ const GanttTodayInner = ({
|
|
|
10979
11155
|
/* @__PURE__ */ jsx(
|
|
10980
11156
|
"text",
|
|
10981
11157
|
{
|
|
10982
|
-
x: additionalLeftSpace +
|
|
11158
|
+
x: additionalLeftSpace + adjustedX + 8,
|
|
10983
11159
|
y: 10,
|
|
10984
11160
|
fill: color,
|
|
10985
11161
|
fontSize: 12,
|
|
@@ -11004,38 +11180,15 @@ const GanttTodayInner = ({
|
|
|
11004
11180
|
if (!showDataDateLine || !dataDate) {
|
|
11005
11181
|
return null;
|
|
11006
11182
|
}
|
|
11007
|
-
const
|
|
11008
|
-
const
|
|
11009
|
-
|
|
11010
|
-
case ViewMode.Week: {
|
|
11011
|
-
const percent = dataDate.getDay() / 7;
|
|
11012
|
-
return 1 + percent * 0.2;
|
|
11013
|
-
}
|
|
11014
|
-
case ViewMode.Month: {
|
|
11015
|
-
const dayInMonth = dataDate.getDate();
|
|
11016
|
-
const maxDaysInMonth = getDaysInMonth(
|
|
11017
|
-
dataDate.getMonth(),
|
|
11018
|
-
dataDate.getFullYear()
|
|
11019
|
-
);
|
|
11020
|
-
const percent = dayInMonth / maxDaysInMonth;
|
|
11021
|
-
return 1 + percent * 0.5;
|
|
11022
|
-
}
|
|
11023
|
-
case ViewMode.Year: {
|
|
11024
|
-
const percent = dataDate.getMonth() / 12;
|
|
11025
|
-
return 1 + percent * 0.5;
|
|
11026
|
-
}
|
|
11027
|
-
default:
|
|
11028
|
-
return 1;
|
|
11029
|
-
}
|
|
11030
|
-
};
|
|
11031
|
-
const tickX = dataIndex * columnWidth * extraMultiplier();
|
|
11032
|
-
const x = rtl ? tickX + columnWidth : tickX;
|
|
11183
|
+
const dateX = taskXCoordinate(dataDate, startDate, viewMode, columnWidth);
|
|
11184
|
+
const milestoneEndX = dateX + taskHeight * 0.5;
|
|
11185
|
+
const adjustedX = rtl ? milestoneEndX + columnWidth : milestoneEndX;
|
|
11033
11186
|
const color = dataDateColor || "var(--gantt-calendar-today-color)";
|
|
11034
11187
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11035
11188
|
/* @__PURE__ */ jsx(
|
|
11036
11189
|
"rect",
|
|
11037
11190
|
{
|
|
11038
|
-
x: additionalLeftSpace +
|
|
11191
|
+
x: additionalLeftSpace + adjustedX,
|
|
11039
11192
|
y: 0,
|
|
11040
11193
|
width: 2,
|
|
11041
11194
|
height: ganttFullHeight,
|
|
@@ -11047,7 +11200,7 @@ const GanttTodayInner = ({
|
|
|
11047
11200
|
"circle",
|
|
11048
11201
|
{
|
|
11049
11202
|
className: styles$c.ganttTodayCircle,
|
|
11050
|
-
cx:
|
|
11203
|
+
cx: adjustedX + 1,
|
|
11051
11204
|
cy: 6,
|
|
11052
11205
|
r: 6,
|
|
11053
11206
|
fill: color
|
|
@@ -11056,7 +11209,7 @@ const GanttTodayInner = ({
|
|
|
11056
11209
|
/* @__PURE__ */ jsx(
|
|
11057
11210
|
"text",
|
|
11058
11211
|
{
|
|
11059
|
-
x: additionalLeftSpace +
|
|
11212
|
+
x: additionalLeftSpace + adjustedX + 8,
|
|
11060
11213
|
y: 10,
|
|
11061
11214
|
fill: color,
|
|
11062
11215
|
fontSize: 12,
|
|
@@ -11072,6 +11225,7 @@ const GanttTodayInner = ({
|
|
|
11072
11225
|
rtl,
|
|
11073
11226
|
startDate,
|
|
11074
11227
|
viewMode,
|
|
11228
|
+
taskHeight,
|
|
11075
11229
|
showDataDateLine,
|
|
11076
11230
|
dataDate,
|
|
11077
11231
|
dataDateColor,
|
|
@@ -11770,204 +11924,6 @@ const RelationLine = ({
|
|
|
11770
11924
|
}
|
|
11771
11925
|
);
|
|
11772
11926
|
};
|
|
11773
|
-
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
11774
|
-
switch (viewMode) {
|
|
11775
|
-
case ViewMode.Day:
|
|
11776
|
-
return addDays(startDate, offset2);
|
|
11777
|
-
case ViewMode.HalfDay:
|
|
11778
|
-
return addHours(startDate, offset2 * 12);
|
|
11779
|
-
case ViewMode.QuarterDay:
|
|
11780
|
-
return addHours(startDate, offset2 * 6);
|
|
11781
|
-
case ViewMode.Hour:
|
|
11782
|
-
return addHours(startDate, offset2);
|
|
11783
|
-
case ViewMode.Month:
|
|
11784
|
-
return addMonths(startDate, offset2);
|
|
11785
|
-
case ViewMode.Week:
|
|
11786
|
-
return addWeeks(startDate, offset2);
|
|
11787
|
-
case ViewMode.Year:
|
|
11788
|
-
return addYears(startDate, offset2);
|
|
11789
|
-
default:
|
|
11790
|
-
throw new Error("Unknown view mode");
|
|
11791
|
-
}
|
|
11792
|
-
};
|
|
11793
|
-
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11794
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11795
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11796
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11797
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11798
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11799
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11800
|
-
};
|
|
11801
|
-
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11802
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11803
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11804
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11805
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11806
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11807
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11808
|
-
};
|
|
11809
|
-
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
11810
|
-
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
11811
|
-
let progressX;
|
|
11812
|
-
if (rtl) {
|
|
11813
|
-
progressX = taskX2 - progressWidth;
|
|
11814
|
-
} else {
|
|
11815
|
-
progressX = taskX1;
|
|
11816
|
-
}
|
|
11817
|
-
return [progressWidth, progressX];
|
|
11818
|
-
};
|
|
11819
|
-
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
11820
|
-
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
11821
|
-
newDate = new Date(
|
|
11822
|
-
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
11823
|
-
);
|
|
11824
|
-
return newDate;
|
|
11825
|
-
};
|
|
11826
|
-
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11827
|
-
let result;
|
|
11828
|
-
switch (selectedTask.type) {
|
|
11829
|
-
case "milestone":
|
|
11830
|
-
result = handleTaskBySVGMouseEventForMilestone(
|
|
11831
|
-
action,
|
|
11832
|
-
selectedTask,
|
|
11833
|
-
initialCoordinates,
|
|
11834
|
-
coordinates,
|
|
11835
|
-
xStep,
|
|
11836
|
-
timeStep
|
|
11837
|
-
);
|
|
11838
|
-
break;
|
|
11839
|
-
default:
|
|
11840
|
-
result = handleTaskBySVGMouseEventForBar(
|
|
11841
|
-
action,
|
|
11842
|
-
selectedTask,
|
|
11843
|
-
initialCoordinates,
|
|
11844
|
-
coordinates,
|
|
11845
|
-
xStep,
|
|
11846
|
-
timeStep,
|
|
11847
|
-
rtl
|
|
11848
|
-
);
|
|
11849
|
-
break;
|
|
11850
|
-
}
|
|
11851
|
-
return result;
|
|
11852
|
-
};
|
|
11853
|
-
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11854
|
-
const changedTask = { ...selectedTask };
|
|
11855
|
-
let isChanged = false;
|
|
11856
|
-
switch (action) {
|
|
11857
|
-
case "progress":
|
|
11858
|
-
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11859
|
-
if (isChanged) {
|
|
11860
|
-
changedTask.progress = Math.round(
|
|
11861
|
-
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11862
|
-
);
|
|
11863
|
-
}
|
|
11864
|
-
break;
|
|
11865
|
-
case "start": {
|
|
11866
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11867
|
-
if (isChanged) {
|
|
11868
|
-
if (rtl) {
|
|
11869
|
-
changedTask.end = dateByX(
|
|
11870
|
-
coordinates.x1,
|
|
11871
|
-
initialCoordinates.x1,
|
|
11872
|
-
selectedTask.end,
|
|
11873
|
-
xStep,
|
|
11874
|
-
timeStep
|
|
11875
|
-
);
|
|
11876
|
-
} else {
|
|
11877
|
-
changedTask.start = dateByX(
|
|
11878
|
-
coordinates.x1,
|
|
11879
|
-
initialCoordinates.x1,
|
|
11880
|
-
selectedTask.start,
|
|
11881
|
-
xStep,
|
|
11882
|
-
timeStep
|
|
11883
|
-
);
|
|
11884
|
-
}
|
|
11885
|
-
}
|
|
11886
|
-
break;
|
|
11887
|
-
}
|
|
11888
|
-
case "end": {
|
|
11889
|
-
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11890
|
-
if (isChanged) {
|
|
11891
|
-
if (rtl) {
|
|
11892
|
-
changedTask.start = dateByX(
|
|
11893
|
-
coordinates.x2,
|
|
11894
|
-
initialCoordinates.x2,
|
|
11895
|
-
selectedTask.start,
|
|
11896
|
-
xStep,
|
|
11897
|
-
timeStep
|
|
11898
|
-
);
|
|
11899
|
-
} else {
|
|
11900
|
-
changedTask.end = dateByX(
|
|
11901
|
-
coordinates.x2,
|
|
11902
|
-
initialCoordinates.x2,
|
|
11903
|
-
selectedTask.end,
|
|
11904
|
-
xStep,
|
|
11905
|
-
timeStep
|
|
11906
|
-
);
|
|
11907
|
-
}
|
|
11908
|
-
}
|
|
11909
|
-
break;
|
|
11910
|
-
}
|
|
11911
|
-
case "move": {
|
|
11912
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11913
|
-
if (isChanged) {
|
|
11914
|
-
if (rtl) {
|
|
11915
|
-
changedTask.end = dateByX(
|
|
11916
|
-
coordinates.x1,
|
|
11917
|
-
initialCoordinates.x1,
|
|
11918
|
-
selectedTask.end,
|
|
11919
|
-
xStep,
|
|
11920
|
-
timeStep
|
|
11921
|
-
);
|
|
11922
|
-
changedTask.start = dateByX(
|
|
11923
|
-
coordinates.x2,
|
|
11924
|
-
initialCoordinates.x2,
|
|
11925
|
-
selectedTask.start,
|
|
11926
|
-
xStep,
|
|
11927
|
-
timeStep
|
|
11928
|
-
);
|
|
11929
|
-
} else {
|
|
11930
|
-
changedTask.start = dateByX(
|
|
11931
|
-
coordinates.x1,
|
|
11932
|
-
initialCoordinates.x1,
|
|
11933
|
-
selectedTask.start,
|
|
11934
|
-
xStep,
|
|
11935
|
-
timeStep
|
|
11936
|
-
);
|
|
11937
|
-
changedTask.end = dateByX(
|
|
11938
|
-
coordinates.x2,
|
|
11939
|
-
initialCoordinates.x2,
|
|
11940
|
-
selectedTask.end,
|
|
11941
|
-
xStep,
|
|
11942
|
-
timeStep
|
|
11943
|
-
);
|
|
11944
|
-
}
|
|
11945
|
-
}
|
|
11946
|
-
break;
|
|
11947
|
-
}
|
|
11948
|
-
}
|
|
11949
|
-
return { isChanged, changedTask };
|
|
11950
|
-
};
|
|
11951
|
-
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11952
|
-
const changedTask = { ...selectedTask };
|
|
11953
|
-
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11954
|
-
if (isChanged) {
|
|
11955
|
-
switch (action) {
|
|
11956
|
-
case "move": {
|
|
11957
|
-
changedTask.start = dateByX(
|
|
11958
|
-
coordinates.x1,
|
|
11959
|
-
initialCoordinates.x1,
|
|
11960
|
-
selectedTask.start,
|
|
11961
|
-
xStep,
|
|
11962
|
-
timeStep
|
|
11963
|
-
);
|
|
11964
|
-
changedTask.end = changedTask.start;
|
|
11965
|
-
break;
|
|
11966
|
-
}
|
|
11967
|
-
}
|
|
11968
|
-
}
|
|
11969
|
-
return { isChanged, changedTask };
|
|
11970
|
-
};
|
|
11971
11927
|
const barWrapper = "_barWrapper_5jhkr_1";
|
|
11972
11928
|
const barHandle = "_barHandle_5jhkr_11";
|
|
11973
11929
|
const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
|
|
@@ -19908,6 +19864,7 @@ const Gantt = (props) => {
|
|
|
19908
19864
|
rtl,
|
|
19909
19865
|
startDate,
|
|
19910
19866
|
viewMode,
|
|
19867
|
+
taskHeight,
|
|
19911
19868
|
showTodayLine,
|
|
19912
19869
|
showDataDateLine,
|
|
19913
19870
|
dataDate,
|
|
@@ -19924,6 +19881,7 @@ const Gantt = (props) => {
|
|
|
19924
19881
|
rtl,
|
|
19925
19882
|
startDate,
|
|
19926
19883
|
viewMode,
|
|
19884
|
+
taskHeight,
|
|
19927
19885
|
showTodayLine,
|
|
19928
19886
|
showDataDateLine,
|
|
19929
19887
|
dataDate,
|
|
@@ -10924,6 +10924,204 @@
|
|
|
10924
10924
|
ganttToday,
|
|
10925
10925
|
ganttTodayCircle
|
|
10926
10926
|
};
|
|
10927
|
+
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
10928
|
+
switch (viewMode) {
|
|
10929
|
+
case ViewMode.Day:
|
|
10930
|
+
return addDays(startDate, offset2);
|
|
10931
|
+
case ViewMode.HalfDay:
|
|
10932
|
+
return addHours(startDate, offset2 * 12);
|
|
10933
|
+
case ViewMode.QuarterDay:
|
|
10934
|
+
return addHours(startDate, offset2 * 6);
|
|
10935
|
+
case ViewMode.Hour:
|
|
10936
|
+
return addHours(startDate, offset2);
|
|
10937
|
+
case ViewMode.Month:
|
|
10938
|
+
return addMonths(startDate, offset2);
|
|
10939
|
+
case ViewMode.Week:
|
|
10940
|
+
return addWeeks(startDate, offset2);
|
|
10941
|
+
case ViewMode.Year:
|
|
10942
|
+
return addYears(startDate, offset2);
|
|
10943
|
+
default:
|
|
10944
|
+
throw new Error("Unknown view mode");
|
|
10945
|
+
}
|
|
10946
|
+
};
|
|
10947
|
+
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10948
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10949
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10950
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10951
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10952
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10953
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10954
|
+
};
|
|
10955
|
+
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10956
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10957
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10958
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10959
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10960
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10961
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10962
|
+
};
|
|
10963
|
+
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
10964
|
+
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
10965
|
+
let progressX;
|
|
10966
|
+
if (rtl) {
|
|
10967
|
+
progressX = taskX2 - progressWidth;
|
|
10968
|
+
} else {
|
|
10969
|
+
progressX = taskX1;
|
|
10970
|
+
}
|
|
10971
|
+
return [progressWidth, progressX];
|
|
10972
|
+
};
|
|
10973
|
+
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
10974
|
+
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
10975
|
+
newDate = new Date(
|
|
10976
|
+
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
10977
|
+
);
|
|
10978
|
+
return newDate;
|
|
10979
|
+
};
|
|
10980
|
+
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10981
|
+
let result;
|
|
10982
|
+
switch (selectedTask.type) {
|
|
10983
|
+
case "milestone":
|
|
10984
|
+
result = handleTaskBySVGMouseEventForMilestone(
|
|
10985
|
+
action,
|
|
10986
|
+
selectedTask,
|
|
10987
|
+
initialCoordinates,
|
|
10988
|
+
coordinates,
|
|
10989
|
+
xStep,
|
|
10990
|
+
timeStep
|
|
10991
|
+
);
|
|
10992
|
+
break;
|
|
10993
|
+
default:
|
|
10994
|
+
result = handleTaskBySVGMouseEventForBar(
|
|
10995
|
+
action,
|
|
10996
|
+
selectedTask,
|
|
10997
|
+
initialCoordinates,
|
|
10998
|
+
coordinates,
|
|
10999
|
+
xStep,
|
|
11000
|
+
timeStep,
|
|
11001
|
+
rtl
|
|
11002
|
+
);
|
|
11003
|
+
break;
|
|
11004
|
+
}
|
|
11005
|
+
return result;
|
|
11006
|
+
};
|
|
11007
|
+
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11008
|
+
const changedTask = { ...selectedTask };
|
|
11009
|
+
let isChanged = false;
|
|
11010
|
+
switch (action) {
|
|
11011
|
+
case "progress":
|
|
11012
|
+
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11013
|
+
if (isChanged) {
|
|
11014
|
+
changedTask.progress = Math.round(
|
|
11015
|
+
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11016
|
+
);
|
|
11017
|
+
}
|
|
11018
|
+
break;
|
|
11019
|
+
case "start": {
|
|
11020
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11021
|
+
if (isChanged) {
|
|
11022
|
+
if (rtl) {
|
|
11023
|
+
changedTask.end = dateByX(
|
|
11024
|
+
coordinates.x1,
|
|
11025
|
+
initialCoordinates.x1,
|
|
11026
|
+
selectedTask.end,
|
|
11027
|
+
xStep,
|
|
11028
|
+
timeStep
|
|
11029
|
+
);
|
|
11030
|
+
} else {
|
|
11031
|
+
changedTask.start = dateByX(
|
|
11032
|
+
coordinates.x1,
|
|
11033
|
+
initialCoordinates.x1,
|
|
11034
|
+
selectedTask.start,
|
|
11035
|
+
xStep,
|
|
11036
|
+
timeStep
|
|
11037
|
+
);
|
|
11038
|
+
}
|
|
11039
|
+
}
|
|
11040
|
+
break;
|
|
11041
|
+
}
|
|
11042
|
+
case "end": {
|
|
11043
|
+
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11044
|
+
if (isChanged) {
|
|
11045
|
+
if (rtl) {
|
|
11046
|
+
changedTask.start = dateByX(
|
|
11047
|
+
coordinates.x2,
|
|
11048
|
+
initialCoordinates.x2,
|
|
11049
|
+
selectedTask.start,
|
|
11050
|
+
xStep,
|
|
11051
|
+
timeStep
|
|
11052
|
+
);
|
|
11053
|
+
} else {
|
|
11054
|
+
changedTask.end = dateByX(
|
|
11055
|
+
coordinates.x2,
|
|
11056
|
+
initialCoordinates.x2,
|
|
11057
|
+
selectedTask.end,
|
|
11058
|
+
xStep,
|
|
11059
|
+
timeStep
|
|
11060
|
+
);
|
|
11061
|
+
}
|
|
11062
|
+
}
|
|
11063
|
+
break;
|
|
11064
|
+
}
|
|
11065
|
+
case "move": {
|
|
11066
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11067
|
+
if (isChanged) {
|
|
11068
|
+
if (rtl) {
|
|
11069
|
+
changedTask.end = dateByX(
|
|
11070
|
+
coordinates.x1,
|
|
11071
|
+
initialCoordinates.x1,
|
|
11072
|
+
selectedTask.end,
|
|
11073
|
+
xStep,
|
|
11074
|
+
timeStep
|
|
11075
|
+
);
|
|
11076
|
+
changedTask.start = dateByX(
|
|
11077
|
+
coordinates.x2,
|
|
11078
|
+
initialCoordinates.x2,
|
|
11079
|
+
selectedTask.start,
|
|
11080
|
+
xStep,
|
|
11081
|
+
timeStep
|
|
11082
|
+
);
|
|
11083
|
+
} else {
|
|
11084
|
+
changedTask.start = dateByX(
|
|
11085
|
+
coordinates.x1,
|
|
11086
|
+
initialCoordinates.x1,
|
|
11087
|
+
selectedTask.start,
|
|
11088
|
+
xStep,
|
|
11089
|
+
timeStep
|
|
11090
|
+
);
|
|
11091
|
+
changedTask.end = dateByX(
|
|
11092
|
+
coordinates.x2,
|
|
11093
|
+
initialCoordinates.x2,
|
|
11094
|
+
selectedTask.end,
|
|
11095
|
+
xStep,
|
|
11096
|
+
timeStep
|
|
11097
|
+
);
|
|
11098
|
+
}
|
|
11099
|
+
}
|
|
11100
|
+
break;
|
|
11101
|
+
}
|
|
11102
|
+
}
|
|
11103
|
+
return { isChanged, changedTask };
|
|
11104
|
+
};
|
|
11105
|
+
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11106
|
+
const changedTask = { ...selectedTask };
|
|
11107
|
+
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11108
|
+
if (isChanged) {
|
|
11109
|
+
switch (action) {
|
|
11110
|
+
case "move": {
|
|
11111
|
+
changedTask.start = dateByX(
|
|
11112
|
+
coordinates.x1,
|
|
11113
|
+
initialCoordinates.x1,
|
|
11114
|
+
selectedTask.start,
|
|
11115
|
+
xStep,
|
|
11116
|
+
timeStep
|
|
11117
|
+
);
|
|
11118
|
+
changedTask.end = changedTask.start;
|
|
11119
|
+
break;
|
|
11120
|
+
}
|
|
11121
|
+
}
|
|
11122
|
+
}
|
|
11123
|
+
return { isChanged, changedTask };
|
|
11124
|
+
};
|
|
10927
11125
|
const GanttTodayInner = ({
|
|
10928
11126
|
additionalLeftSpace,
|
|
10929
11127
|
distances: { columnWidth },
|
|
@@ -10932,6 +11130,8 @@
|
|
|
10932
11130
|
rtl,
|
|
10933
11131
|
startDate,
|
|
10934
11132
|
viewMode,
|
|
11133
|
+
taskHeight,
|
|
11134
|
+
// Add taskHeight parameter
|
|
10935
11135
|
showTodayLine = true,
|
|
10936
11136
|
showDataDateLine = false,
|
|
10937
11137
|
dataDate = null,
|
|
@@ -10945,38 +11145,14 @@
|
|
|
10945
11145
|
return null;
|
|
10946
11146
|
}
|
|
10947
11147
|
const today = /* @__PURE__ */ new Date();
|
|
10948
|
-
const
|
|
10949
|
-
const
|
|
10950
|
-
switch (viewMode) {
|
|
10951
|
-
case ViewMode.Week: {
|
|
10952
|
-
const percent = today.getDay() / 7;
|
|
10953
|
-
return 1 + percent * 0.2;
|
|
10954
|
-
}
|
|
10955
|
-
case ViewMode.Month: {
|
|
10956
|
-
const dayInMonth = today.getDate();
|
|
10957
|
-
const maxDaysInMonth = getDaysInMonth(
|
|
10958
|
-
today.getMonth(),
|
|
10959
|
-
today.getFullYear()
|
|
10960
|
-
);
|
|
10961
|
-
const percent = dayInMonth / maxDaysInMonth;
|
|
10962
|
-
return 1 + percent * 0.5;
|
|
10963
|
-
}
|
|
10964
|
-
case ViewMode.Year: {
|
|
10965
|
-
const percent = today.getMonth() / 12;
|
|
10966
|
-
return 1 + percent * 0.5;
|
|
10967
|
-
}
|
|
10968
|
-
default:
|
|
10969
|
-
return 1;
|
|
10970
|
-
}
|
|
10971
|
-
};
|
|
10972
|
-
const tickX = todayIndex * columnWidth * extraMultiplier();
|
|
10973
|
-
const x = rtl ? tickX + columnWidth : tickX;
|
|
11148
|
+
const x = taskXCoordinate(today, startDate, viewMode, columnWidth);
|
|
11149
|
+
const adjustedX = rtl ? x + columnWidth : x;
|
|
10974
11150
|
const color = todayColor || "var(--gantt-calendar-today-color)";
|
|
10975
11151
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
10976
11152
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10977
11153
|
"rect",
|
|
10978
11154
|
{
|
|
10979
|
-
x: additionalLeftSpace +
|
|
11155
|
+
x: additionalLeftSpace + adjustedX,
|
|
10980
11156
|
y: 0,
|
|
10981
11157
|
width: 2,
|
|
10982
11158
|
height: ganttFullHeight,
|
|
@@ -10987,7 +11163,7 @@
|
|
|
10987
11163
|
"circle",
|
|
10988
11164
|
{
|
|
10989
11165
|
className: styles$c.ganttTodayCircle,
|
|
10990
|
-
cx:
|
|
11166
|
+
cx: adjustedX + 1,
|
|
10991
11167
|
cy: 6,
|
|
10992
11168
|
r: 6,
|
|
10993
11169
|
fill: color
|
|
@@ -10996,7 +11172,7 @@
|
|
|
10996
11172
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10997
11173
|
"text",
|
|
10998
11174
|
{
|
|
10999
|
-
x: additionalLeftSpace +
|
|
11175
|
+
x: additionalLeftSpace + adjustedX + 8,
|
|
11000
11176
|
y: 10,
|
|
11001
11177
|
fill: color,
|
|
11002
11178
|
fontSize: 12,
|
|
@@ -11021,38 +11197,15 @@
|
|
|
11021
11197
|
if (!showDataDateLine || !dataDate) {
|
|
11022
11198
|
return null;
|
|
11023
11199
|
}
|
|
11024
|
-
const
|
|
11025
|
-
const
|
|
11026
|
-
|
|
11027
|
-
case ViewMode.Week: {
|
|
11028
|
-
const percent = dataDate.getDay() / 7;
|
|
11029
|
-
return 1 + percent * 0.2;
|
|
11030
|
-
}
|
|
11031
|
-
case ViewMode.Month: {
|
|
11032
|
-
const dayInMonth = dataDate.getDate();
|
|
11033
|
-
const maxDaysInMonth = getDaysInMonth(
|
|
11034
|
-
dataDate.getMonth(),
|
|
11035
|
-
dataDate.getFullYear()
|
|
11036
|
-
);
|
|
11037
|
-
const percent = dayInMonth / maxDaysInMonth;
|
|
11038
|
-
return 1 + percent * 0.5;
|
|
11039
|
-
}
|
|
11040
|
-
case ViewMode.Year: {
|
|
11041
|
-
const percent = dataDate.getMonth() / 12;
|
|
11042
|
-
return 1 + percent * 0.5;
|
|
11043
|
-
}
|
|
11044
|
-
default:
|
|
11045
|
-
return 1;
|
|
11046
|
-
}
|
|
11047
|
-
};
|
|
11048
|
-
const tickX = dataIndex * columnWidth * extraMultiplier();
|
|
11049
|
-
const x = rtl ? tickX + columnWidth : tickX;
|
|
11200
|
+
const dateX = taskXCoordinate(dataDate, startDate, viewMode, columnWidth);
|
|
11201
|
+
const milestoneEndX = dateX + taskHeight * 0.5;
|
|
11202
|
+
const adjustedX = rtl ? milestoneEndX + columnWidth : milestoneEndX;
|
|
11050
11203
|
const color = dataDateColor || "var(--gantt-calendar-today-color)";
|
|
11051
11204
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11052
11205
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11053
11206
|
"rect",
|
|
11054
11207
|
{
|
|
11055
|
-
x: additionalLeftSpace +
|
|
11208
|
+
x: additionalLeftSpace + adjustedX,
|
|
11056
11209
|
y: 0,
|
|
11057
11210
|
width: 2,
|
|
11058
11211
|
height: ganttFullHeight,
|
|
@@ -11064,7 +11217,7 @@
|
|
|
11064
11217
|
"circle",
|
|
11065
11218
|
{
|
|
11066
11219
|
className: styles$c.ganttTodayCircle,
|
|
11067
|
-
cx:
|
|
11220
|
+
cx: adjustedX + 1,
|
|
11068
11221
|
cy: 6,
|
|
11069
11222
|
r: 6,
|
|
11070
11223
|
fill: color
|
|
@@ -11073,7 +11226,7 @@
|
|
|
11073
11226
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11074
11227
|
"text",
|
|
11075
11228
|
{
|
|
11076
|
-
x: additionalLeftSpace +
|
|
11229
|
+
x: additionalLeftSpace + adjustedX + 8,
|
|
11077
11230
|
y: 10,
|
|
11078
11231
|
fill: color,
|
|
11079
11232
|
fontSize: 12,
|
|
@@ -11089,6 +11242,7 @@
|
|
|
11089
11242
|
rtl,
|
|
11090
11243
|
startDate,
|
|
11091
11244
|
viewMode,
|
|
11245
|
+
taskHeight,
|
|
11092
11246
|
showDataDateLine,
|
|
11093
11247
|
dataDate,
|
|
11094
11248
|
dataDateColor,
|
|
@@ -11787,204 +11941,6 @@
|
|
|
11787
11941
|
}
|
|
11788
11942
|
);
|
|
11789
11943
|
};
|
|
11790
|
-
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
11791
|
-
switch (viewMode) {
|
|
11792
|
-
case ViewMode.Day:
|
|
11793
|
-
return addDays(startDate, offset2);
|
|
11794
|
-
case ViewMode.HalfDay:
|
|
11795
|
-
return addHours(startDate, offset2 * 12);
|
|
11796
|
-
case ViewMode.QuarterDay:
|
|
11797
|
-
return addHours(startDate, offset2 * 6);
|
|
11798
|
-
case ViewMode.Hour:
|
|
11799
|
-
return addHours(startDate, offset2);
|
|
11800
|
-
case ViewMode.Month:
|
|
11801
|
-
return addMonths(startDate, offset2);
|
|
11802
|
-
case ViewMode.Week:
|
|
11803
|
-
return addWeeks(startDate, offset2);
|
|
11804
|
-
case ViewMode.Year:
|
|
11805
|
-
return addYears(startDate, offset2);
|
|
11806
|
-
default:
|
|
11807
|
-
throw new Error("Unknown view mode");
|
|
11808
|
-
}
|
|
11809
|
-
};
|
|
11810
|
-
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11811
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11812
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11813
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11814
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11815
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11816
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11817
|
-
};
|
|
11818
|
-
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11819
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11820
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11821
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11822
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11823
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11824
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11825
|
-
};
|
|
11826
|
-
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
11827
|
-
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
11828
|
-
let progressX;
|
|
11829
|
-
if (rtl) {
|
|
11830
|
-
progressX = taskX2 - progressWidth;
|
|
11831
|
-
} else {
|
|
11832
|
-
progressX = taskX1;
|
|
11833
|
-
}
|
|
11834
|
-
return [progressWidth, progressX];
|
|
11835
|
-
};
|
|
11836
|
-
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
11837
|
-
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
11838
|
-
newDate = new Date(
|
|
11839
|
-
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
11840
|
-
);
|
|
11841
|
-
return newDate;
|
|
11842
|
-
};
|
|
11843
|
-
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11844
|
-
let result;
|
|
11845
|
-
switch (selectedTask.type) {
|
|
11846
|
-
case "milestone":
|
|
11847
|
-
result = handleTaskBySVGMouseEventForMilestone(
|
|
11848
|
-
action,
|
|
11849
|
-
selectedTask,
|
|
11850
|
-
initialCoordinates,
|
|
11851
|
-
coordinates,
|
|
11852
|
-
xStep,
|
|
11853
|
-
timeStep
|
|
11854
|
-
);
|
|
11855
|
-
break;
|
|
11856
|
-
default:
|
|
11857
|
-
result = handleTaskBySVGMouseEventForBar(
|
|
11858
|
-
action,
|
|
11859
|
-
selectedTask,
|
|
11860
|
-
initialCoordinates,
|
|
11861
|
-
coordinates,
|
|
11862
|
-
xStep,
|
|
11863
|
-
timeStep,
|
|
11864
|
-
rtl
|
|
11865
|
-
);
|
|
11866
|
-
break;
|
|
11867
|
-
}
|
|
11868
|
-
return result;
|
|
11869
|
-
};
|
|
11870
|
-
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11871
|
-
const changedTask = { ...selectedTask };
|
|
11872
|
-
let isChanged = false;
|
|
11873
|
-
switch (action) {
|
|
11874
|
-
case "progress":
|
|
11875
|
-
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11876
|
-
if (isChanged) {
|
|
11877
|
-
changedTask.progress = Math.round(
|
|
11878
|
-
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11879
|
-
);
|
|
11880
|
-
}
|
|
11881
|
-
break;
|
|
11882
|
-
case "start": {
|
|
11883
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11884
|
-
if (isChanged) {
|
|
11885
|
-
if (rtl) {
|
|
11886
|
-
changedTask.end = dateByX(
|
|
11887
|
-
coordinates.x1,
|
|
11888
|
-
initialCoordinates.x1,
|
|
11889
|
-
selectedTask.end,
|
|
11890
|
-
xStep,
|
|
11891
|
-
timeStep
|
|
11892
|
-
);
|
|
11893
|
-
} else {
|
|
11894
|
-
changedTask.start = dateByX(
|
|
11895
|
-
coordinates.x1,
|
|
11896
|
-
initialCoordinates.x1,
|
|
11897
|
-
selectedTask.start,
|
|
11898
|
-
xStep,
|
|
11899
|
-
timeStep
|
|
11900
|
-
);
|
|
11901
|
-
}
|
|
11902
|
-
}
|
|
11903
|
-
break;
|
|
11904
|
-
}
|
|
11905
|
-
case "end": {
|
|
11906
|
-
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11907
|
-
if (isChanged) {
|
|
11908
|
-
if (rtl) {
|
|
11909
|
-
changedTask.start = dateByX(
|
|
11910
|
-
coordinates.x2,
|
|
11911
|
-
initialCoordinates.x2,
|
|
11912
|
-
selectedTask.start,
|
|
11913
|
-
xStep,
|
|
11914
|
-
timeStep
|
|
11915
|
-
);
|
|
11916
|
-
} else {
|
|
11917
|
-
changedTask.end = dateByX(
|
|
11918
|
-
coordinates.x2,
|
|
11919
|
-
initialCoordinates.x2,
|
|
11920
|
-
selectedTask.end,
|
|
11921
|
-
xStep,
|
|
11922
|
-
timeStep
|
|
11923
|
-
);
|
|
11924
|
-
}
|
|
11925
|
-
}
|
|
11926
|
-
break;
|
|
11927
|
-
}
|
|
11928
|
-
case "move": {
|
|
11929
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11930
|
-
if (isChanged) {
|
|
11931
|
-
if (rtl) {
|
|
11932
|
-
changedTask.end = dateByX(
|
|
11933
|
-
coordinates.x1,
|
|
11934
|
-
initialCoordinates.x1,
|
|
11935
|
-
selectedTask.end,
|
|
11936
|
-
xStep,
|
|
11937
|
-
timeStep
|
|
11938
|
-
);
|
|
11939
|
-
changedTask.start = dateByX(
|
|
11940
|
-
coordinates.x2,
|
|
11941
|
-
initialCoordinates.x2,
|
|
11942
|
-
selectedTask.start,
|
|
11943
|
-
xStep,
|
|
11944
|
-
timeStep
|
|
11945
|
-
);
|
|
11946
|
-
} else {
|
|
11947
|
-
changedTask.start = dateByX(
|
|
11948
|
-
coordinates.x1,
|
|
11949
|
-
initialCoordinates.x1,
|
|
11950
|
-
selectedTask.start,
|
|
11951
|
-
xStep,
|
|
11952
|
-
timeStep
|
|
11953
|
-
);
|
|
11954
|
-
changedTask.end = dateByX(
|
|
11955
|
-
coordinates.x2,
|
|
11956
|
-
initialCoordinates.x2,
|
|
11957
|
-
selectedTask.end,
|
|
11958
|
-
xStep,
|
|
11959
|
-
timeStep
|
|
11960
|
-
);
|
|
11961
|
-
}
|
|
11962
|
-
}
|
|
11963
|
-
break;
|
|
11964
|
-
}
|
|
11965
|
-
}
|
|
11966
|
-
return { isChanged, changedTask };
|
|
11967
|
-
};
|
|
11968
|
-
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11969
|
-
const changedTask = { ...selectedTask };
|
|
11970
|
-
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11971
|
-
if (isChanged) {
|
|
11972
|
-
switch (action) {
|
|
11973
|
-
case "move": {
|
|
11974
|
-
changedTask.start = dateByX(
|
|
11975
|
-
coordinates.x1,
|
|
11976
|
-
initialCoordinates.x1,
|
|
11977
|
-
selectedTask.start,
|
|
11978
|
-
xStep,
|
|
11979
|
-
timeStep
|
|
11980
|
-
);
|
|
11981
|
-
changedTask.end = changedTask.start;
|
|
11982
|
-
break;
|
|
11983
|
-
}
|
|
11984
|
-
}
|
|
11985
|
-
}
|
|
11986
|
-
return { isChanged, changedTask };
|
|
11987
|
-
};
|
|
11988
11944
|
const barWrapper = "_barWrapper_5jhkr_1";
|
|
11989
11945
|
const barHandle = "_barHandle_5jhkr_11";
|
|
11990
11946
|
const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
|
|
@@ -19925,6 +19881,7 @@
|
|
|
19925
19881
|
rtl,
|
|
19926
19882
|
startDate,
|
|
19927
19883
|
viewMode,
|
|
19884
|
+
taskHeight,
|
|
19928
19885
|
showTodayLine,
|
|
19929
19886
|
showDataDateLine,
|
|
19930
19887
|
dataDate,
|
|
@@ -19941,6 +19898,7 @@
|
|
|
19941
19898
|
rtl,
|
|
19942
19899
|
startDate,
|
|
19943
19900
|
viewMode,
|
|
19901
|
+
taskHeight,
|
|
19944
19902
|
showTodayLine,
|
|
19945
19903
|
showDataDateLine,
|
|
19946
19904
|
dataDate,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gantt-task-react-v",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Interactive Gantt Chart for React with TypeScript.",
|
|
5
5
|
"author": "aguilanbon",
|
|
6
6
|
"homepage": "https://github.com/aguilanbon/gantt-task-react-v",
|
|
@@ -55,15 +55,19 @@
|
|
|
55
55
|
"@babel/types": "^7.20.7",
|
|
56
56
|
"@chromatic-com/storybook": "^1.3.1",
|
|
57
57
|
"@rollup/plugin-image": "3.0.3",
|
|
58
|
-
"@storybook/addon-essentials": "
|
|
59
|
-
"@storybook/addon-interactions": "
|
|
60
|
-
"@storybook/addon-links": "
|
|
61
|
-
"@storybook/addon-onboarding": "
|
|
62
|
-
"@storybook/blocks": "
|
|
63
|
-
"@storybook/cli": "
|
|
64
|
-
"@storybook/react": "
|
|
65
|
-
"@storybook/react-vite": "
|
|
66
|
-
"@storybook/test": "
|
|
58
|
+
"@storybook/addon-essentials": "8.2.10",
|
|
59
|
+
"@storybook/addon-interactions": "8.2.10",
|
|
60
|
+
"@storybook/addon-links": "8.2.10",
|
|
61
|
+
"@storybook/addon-onboarding": "8.2.10",
|
|
62
|
+
"@storybook/blocks": "8.2.10",
|
|
63
|
+
"@storybook/cli": "8.2.10",
|
|
64
|
+
"@storybook/react": "8.2.10",
|
|
65
|
+
"@storybook/react-vite": "8.2.10",
|
|
66
|
+
"@storybook/test": "8.2.10",
|
|
67
|
+
"@storybook/core-server": "8.2.10",
|
|
68
|
+
"@storybook/jest": "0.2.3",
|
|
69
|
+
"@storybook/test-runner": "0.23.0",
|
|
70
|
+
"@storybook/testing-library": "^0.2.2",
|
|
67
71
|
"@testing-library/jest-dom": "^6.4.2",
|
|
68
72
|
"@testing-library/react": "^14.2.2",
|
|
69
73
|
"@testing-library/user-event": "^14.2.1",
|
|
@@ -93,7 +97,7 @@
|
|
|
93
97
|
"react": "^18.2.0",
|
|
94
98
|
"react-dom": "^18.2.0",
|
|
95
99
|
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
96
|
-
"storybook": "
|
|
100
|
+
"storybook": "8.2.10",
|
|
97
101
|
"typescript": "^5.1.6",
|
|
98
102
|
"vite": "5.2.8",
|
|
99
103
|
"vite-plugin-turbosnap": "^1.0.3",
|