WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

project type ready & tooltip changes

Browse Source
This commit is contained in:
VikariiCGI 2021-03-28 16:12:28 +03:00
parent 02c9c58091
commit 0f4c25b45f
6 changed files with 118 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/gantt/gantt.tsx
View File

@ -31,6 +31,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
barProgressSelectedColor = "#8282f5",
barBackgroundColor = "#b8c2cc",
barBackgroundSelectedColor = "#aeb8c2",
projectProgressColor = "#f1c453",
projectProgressSelectedColor = "#f29e4c",
projectBackgroundColor = "#65c16f",
projectBackgroundSelectedColor = "#46ad51",
milestoneBackgroundColor = "#f1c453",
milestoneBackgroundSelectedColor = "#f29e4c",
handleWidth = 8,
@ -90,6 +94,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor,
projectProgressColor,
projectProgressSelectedColor,
projectBackgroundColor,
projectBackgroundSelectedColor,
milestoneBackgroundColor,
milestoneBackgroundSelectedColor
)
@ -106,6 +114,12 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor,
projectProgressColor,
projectProgressSelectedColor,
projectBackgroundColor,
projectBackgroundSelectedColor,
milestoneBackgroundColor,
milestoneBackgroundSelectedColor,
]);
useEffect(() => {

11
src/components/gantt/task-gantt-content.tsx
View File

@ -23,7 +23,10 @@ export type TaskGanttContentProps = {
svg?: React.RefObject<SVGSVGElement>;
svgHeight: number;
svgWidth: number;
displayXEndpoint?: number;
displayXStartEndpoint?: {
start: number;
end: number;
};
taskHeight: number;
arrowColor: string;
arrowIndent: number;
@ -49,7 +52,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
timeStep,
svg,
svgHeight,
displayXEndpoint,
displayXStartEndpoint,
taskHeight,
arrowColor,
arrowIndent,
@ -290,12 +293,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
})}
</g>
<g className="toolTip">
{ganttEvent.changedTask && displayXEndpoint && (
{ganttEvent.changedTask && displayXStartEndpoint && (
<Tooltip
arrowIndent={arrowIndent}
rowHeight={rowHeight}
svgHeight={svgHeight}
displayXEndpoint={displayXEndpoint}
displayXStartEndpoint={displayXStartEndpoint}
task={ganttEvent.changedTask}
fontFamily={fontFamily}
fontSize={fontSize}

12
src/components/gantt/task-gantt.tsx
View File

@ -25,8 +25,11 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
const ganttSVGRef = useRef<SVGSVGElement>(null);
const horizontalContainerRef = useRef<HTMLDivElement>(null);
const verticalContainerRef = useRef<HTMLDivElement>(null);
const [displayXEndpoint, setDisplayXEndpoint] = useState(0);
const newBarProps = { ...barProps, svg: ganttSVGRef, displayXEndpoint };
const [displayXStartEndpoint, setDisplayXStartEndpoint] = useState({
start: 0,
end: 0,
});
const newBarProps = { ...barProps, svg: ganttSVGRef, displayXStartEndpoint };
useEffect(() => {
if (horizontalContainerRef.current) {
@ -37,7 +40,10 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
useEffect(() => {
if (verticalContainerRef.current) {
verticalContainerRef.current.scrollLeft = scrollX;
setDisplayXEndpoint(verticalContainerRef.current.clientWidth + scrollX);
setDisplayXStartEndpoint({
start: scrollX,
end: verticalContainerRef.current.clientWidth + scrollX,
});
}
// verticalContainerRef.current?.clientWidth need for resize window tracking
}, [scrollX, verticalContainerRef.current?.clientWidth]);

65
src/components/other/tooltip.tsx
View File

@ -7,7 +7,10 @@ export type TooltipProps = {
task: BarTask;
arrowIndent: number;
svgHeight: number;
displayXEndpoint: number;
displayXStartEndpoint: {
start: number;
end: number;
};
rowHeight: number;
fontSize: string;
fontFamily: string;
@ -21,7 +24,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
task,
rowHeight,
svgHeight,
displayXEndpoint,
displayXStartEndpoint,
arrowIndent,
fontSize,
fontFamily,
@ -29,26 +32,66 @@ export const Tooltip: React.FC<TooltipProps> = ({
}) => {
const tooltipRef = useRef<HTMLDivElement | null>(null);
const [toolWidth, setToolWidth] = useState(1000);
const [toolHeight, setToolHeight] = useState(1000);
const [relatedY, setRelatedY] = useState(task.index * rowHeight);
const [relatedX, setRelatedX] = useState(displayXEndpoint);
const [relatedX, setRelatedX] = useState(displayXStartEndpoint.end);
useEffect(() => {
if (tooltipRef.current) {
const tooltipHeight = tooltipRef.current.offsetHeight;
const tooltipY = task.index * rowHeight;
if (tooltipY + tooltipHeight > svgHeight) {
setRelatedY(svgHeight - tooltipHeight * 1.05);
}
const tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
let tooltipY = task.index * rowHeight;
const newWidth = tooltipRef.current.scrollWidth * 1.1;
let newRelatedX = task.x2 + arrowIndent + arrowIndent * 0.5;
if (newWidth + newRelatedX > displayXEndpoint) {
if (newWidth + newRelatedX > displayXStartEndpoint.end) {
newRelatedX = task.x1 - arrowIndent - arrowIndent * 0.5 - newWidth;
}
const tooltipLowerPoint = tooltipHeight + tooltipY;
if (
newRelatedX < displayXStartEndpoint.start &&
tooltipLowerPoint > svgHeight
) {
tooltipY -= tooltipHeight;
newRelatedX = (task.x1 + task.x2 - newWidth) * 0.5;
if (newRelatedX + newWidth > displayXStartEndpoint.end) {
newRelatedX = displayXStartEndpoint.end - newWidth;
}
if (
newRelatedX + newWidth > displayXStartEndpoint.end ||
newRelatedX - newWidth < displayXStartEndpoint.start
) {
newRelatedX = displayXStartEndpoint.end - newWidth;
}
} else if (
newRelatedX < displayXStartEndpoint.start &&
tooltipLowerPoint < svgHeight
) {
tooltipY += rowHeight;
newRelatedX = (task.x1 + task.x2 - newWidth) * 0.5;
if (
newRelatedX + newWidth > displayXStartEndpoint.end ||
newRelatedX - newWidth < displayXStartEndpoint.start
) {
newRelatedX = displayXStartEndpoint.end - newWidth;
}
} else if (tooltipLowerPoint > svgHeight) {
tooltipY = svgHeight - tooltipHeight;
}
setRelatedY(tooltipY);
setToolWidth(newWidth);
setRelatedX(newRelatedX);
if (tooltipHeight !== 1000) {
setToolHeight(tooltipHeight);
}
}
}, [tooltipRef, task, arrowIndent, displayXEndpoint]);
}, [tooltipRef, task, arrowIndent, displayXStartEndpoint]);
return (
<foreignObject x={relatedX} y={relatedY} width={toolWidth} height={1000}>
<foreignObject
x={relatedX}
y={relatedY}
width={toolWidth}
height={toolHeight}
>
<div ref={tooltipRef} className={styles.tooltipDetailsContainer}>
<TooltipContent
task={task}

30
src/helpers/bar-helper.ts
View File

@ -14,6 +14,10 @@ export const convertToBarTasks = (
barProgressSelectedColor: string,
barBackgroundColor: string,
barBackgroundSelectedColor: string,
projectProgressColor: string,
projectProgressSelectedColor: string,
projectBackgroundColor: string,
projectBackgroundSelectedColor: string,
milestoneBackgroundColor: string,
milestoneBackgroundSelectedColor: string
) => {
@ -37,6 +41,10 @@ export const convertToBarTasks = (
barProgressSelectedColor,
barBackgroundColor,
barBackgroundSelectedColor,
projectProgressColor,
projectProgressSelectedColor,
projectBackgroundColor,
projectBackgroundSelectedColor,
milestoneBackgroundColor,
milestoneBackgroundSelectedColor
);
@ -71,6 +79,10 @@ const convertToBarTask = (
barProgressSelectedColor: string,
barBackgroundColor: string,
barBackgroundSelectedColor: string,
projectProgressColor: string,
projectProgressSelectedColor: string,
projectBackgroundColor: string,
projectBackgroundSelectedColor: string,
milestoneBackgroundColor: string,
milestoneBackgroundSelectedColor: string
): BarTask => {
@ -91,6 +103,23 @@ const convertToBarTask = (
milestoneBackgroundSelectedColor
);
break;
case "project":
barTask = convertToBar(
task,
index,
dates,
dateDelta,
columnWidth,
rowHeight,
taskHeight,
barCornerRadius,
handleWidth,
projectProgressColor,
projectProgressSelectedColor,
projectBackgroundColor,
projectBackgroundSelectedColor
);
break;
default:
barTask = convertToBar(
task,
@ -127,6 +156,7 @@ const convertToBar = (
barBackgroundColor: string,
barBackgroundSelectedColor: string
): BarTask => {
debugger;
const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
const x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
const y = taskYCoordinate(index, rowHeight, taskHeight);

4
src/types/public-types.ts
View File

@ -86,6 +86,10 @@ export interface StylingOption {
barProgressSelectedColor?: string;
barBackgroundColor?: string;
barBackgroundSelectedColor?: string;
projectProgressColor?: string;
projectProgressSelectedColor?: string;
projectBackgroundColor?: string;
projectBackgroundSelectedColor?: string;
milestoneBackgroundColor?: string;
milestoneBackgroundSelectedColor?: string;
arrowColor?: string;