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

small optimisation

Browse Source
This commit is contained in:
unknown 2020-07-30 22:58:23 +03:00
parent bee711572a
commit d27d58d44c
2 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Bar/bar.tsx
View File

@ -4,7 +4,7 @@ import { BarProgressHandle } from './bar-progress-handle';
import { BarDateHandle } from './bar-date-handle'; import { BarDateHandle } from './bar-date-handle';
import { BarDisplay } from './bar-display'; import { BarDisplay } from './bar-display';
import { BarTask } from '../../types/bar-task'; import { BarTask } from '../../types/bar-task';
import { BarEvent } from '../Gantt/gantt-content'; import { BarAction } from '../Gantt/gantt-content';
import { import {
progressWithByParams, progressWithByParams,
getProgressPoint, getProgressPoint,
@ -22,7 +22,7 @@ export type BarProps = {
| React.MouseEvent<SVGPolygonElement, MouseEvent> | React.MouseEvent<SVGPolygonElement, MouseEvent>
| React.MouseEvent<SVGGElement, MouseEvent> | React.MouseEvent<SVGGElement, MouseEvent>
| React.MouseEvent<SVGRectElement, MouseEvent>, | React.MouseEvent<SVGRectElement, MouseEvent>,
eventType: BarEvent, eventType: BarAction,
task: BarTask task: BarTask
) => void; ) => void;
handleButtonSVGEvents: ( handleButtonSVGEvents: (

70
src/components/Gantt/gantt-content.tsx
View File

@ -45,7 +45,7 @@ export type GanttContentProps = {
) => JSX.Element; ) => JSX.Element;
} & EventOption; } & EventOption;
export type BarEvent = export type BarAction =
| 'progress' | 'progress'
| 'end' | 'end'
| 'start' | 'start'
@ -53,6 +53,11 @@ export type BarEvent =
| 'mouseenter' | 'mouseenter'
| 'mouseleave' | 'mouseleave'
| ''; | '';
type BarEvent = {
action: BarAction;
selectedTask: BarTask | null;
};
export const GanttContent: React.FC<GanttContentProps> = ({ export const GanttContent: React.FC<GanttContentProps> = ({
tasks, tasks,
rowHeight, rowHeight,
@ -78,12 +83,14 @@ export const GanttContent: React.FC<GanttContentProps> = ({
onTaskDelete, onTaskDelete,
getTooltipContent, getTooltipContent,
}) => { }) => {
const [barEvent, setBarEvent] = useState<BarEvent>(''); const [barEvent, setBarEvent] = useState<BarEvent>({
const [selectedTask, setSelectedTask] = useState<BarTask | null>(null); action: '',
selectedTask: null,
});
const [isSVGListen, setIsSVGListen] = useState(false);
const [barTasks, setBarTasks] = useState<BarTask[]>([]); const [barTasks, setBarTasks] = useState<BarTask[]>([]);
const [xStep, setXStep] = useState(0); const [xStep, setXStep] = useState(0);
const [initEventX1Delta, setInitEventX1Delta] = useState(0); const [initEventX1Delta, setInitEventX1Delta] = useState(0);
const [isSVGListen, setIsSVGListen] = useState(false);
useEffect(() => { useEffect(() => {
const dateDelta = const dateDelta =
@ -139,12 +146,14 @@ export const GanttContent: React.FC<GanttContentProps> = ({
* Method handles event in real time(mousemove) and on finish(mouseup) * Method handles event in real time(mousemove) and on finish(mouseup)
*/ */
const handleMouseSVGChangeEventsSubscribe = async (event: MouseEvent) => { const handleMouseSVGChangeEventsSubscribe = async (event: MouseEvent) => {
if (!selectedTask || !barEvent) return; if (!barEvent.selectedTask || !barEvent.action) return;
const selectedTask = barEvent.selectedTask;
const changedTask = { ...selectedTask } as BarTask; const changedTask = { ...selectedTask } as BarTask;
switch (event.type) { switch (event.type) {
//On Event changing //On Event changing
case 'mousemove': { case 'mousemove': {
switch (barEvent) { switch (barEvent.action) {
case 'progress': case 'progress':
changedTask.progress = progressByX(event.offsetX, selectedTask); changedTask.progress = progressByX(event.offsetX, selectedTask);
break; break;
@ -198,15 +207,16 @@ export const GanttContent: React.FC<GanttContentProps> = ({
setBarTasks( setBarTasks(
barTasks.map(t => (t.id === changedTask.id ? changedTask : t)) barTasks.map(t => (t.id === changedTask.id ? changedTask : t))
); );
setSelectedTask(changedTask); setBarEvent({ ...barEvent, selectedTask: changedTask });
break; break;
} }
//On finish Event //On finish Event
case 'mouseup': { case 'mouseup': {
let eventForExecution: ( let eventForExecution: (
task: Task task: Task
) => void | Promise<void> = () => {}; ) => void | Promise<void> = () => {};
switch (barEvent) { switch (barEvent.action) {
case 'progress': case 'progress':
changedTask.progress = progressByX(event.offsetX, selectedTask); changedTask.progress = progressByX(event.offsetX, selectedTask);
if (onProgressChange) { if (onProgressChange) {
@ -270,8 +280,7 @@ export const GanttContent: React.FC<GanttContentProps> = ({
break; break;
} }
setBarEvent(''); setBarEvent({ action: '', selectedTask: null });
setSelectedTask(null);
setIsSVGListen(false); setIsSVGListen(false);
svg.current?.removeEventListener( svg.current?.removeEventListener(
'mousemove', 'mousemove',
@ -289,7 +298,8 @@ export const GanttContent: React.FC<GanttContentProps> = ({
} }
}; };
if (selectedTask && barEvent && !isSVGListen) { if (barEvent.selectedTask && barEvent.action && !isSVGListen) {
setIsSVGListen(true);
svg.current?.addEventListener( svg.current?.addEventListener(
'mousemove', 'mousemove',
handleMouseSVGChangeEventsSubscribe handleMouseSVGChangeEventsSubscribe
@ -298,11 +308,10 @@ export const GanttContent: React.FC<GanttContentProps> = ({
'mouseup', 'mouseup',
handleMouseSVGChangeEventsSubscribe handleMouseSVGChangeEventsSubscribe
); );
setIsSVGListen(true);
} }
}, [ }, [
barEvent, barEvent,
selectedTask, isSVGListen,
xStep, xStep,
svg, svg,
initEventX1Delta, initEventX1Delta,
@ -310,7 +319,6 @@ export const GanttContent: React.FC<GanttContentProps> = ({
onProgressChange, onProgressChange,
timeStep, timeStep,
onDateChange, onDateChange,
isSVGListen,
]); ]);
/** /**
@ -324,22 +332,22 @@ export const GanttContent: React.FC<GanttContentProps> = ({
| React.MouseEvent<SVGPolygonElement, MouseEvent> | React.MouseEvent<SVGPolygonElement, MouseEvent>
| React.MouseEvent<SVGRectElement, MouseEvent> | React.MouseEvent<SVGRectElement, MouseEvent>
| React.MouseEvent<SVGGElement, MouseEvent>, | React.MouseEvent<SVGGElement, MouseEvent>,
eventType: BarEvent, eventType: BarAction,
task: BarTask task: BarTask
) => { ) => {
switch (event.type) { switch (event.type) {
case 'mousedown': case 'mousedown':
setBarEvent(eventType); setBarEvent({ ...barEvent, selectedTask: task, action: eventType });
setSelectedTask(task);
setInitEventX1Delta(event.nativeEvent.offsetX - task.x1); setInitEventX1Delta(event.nativeEvent.offsetX - task.x1);
event.stopPropagation(); event.stopPropagation();
break; break;
case 'mouseleave': case 'mouseleave':
if (!barEvent) setSelectedTask(null); if (!barEvent.action)
setBarEvent({ ...barEvent, selectedTask: task, action: '' });
break; break;
case 'mouseenter': case 'mouseenter':
if (!selectedTask) { if (!barEvent.selectedTask) {
setSelectedTask(task); setBarEvent({ ...barEvent, selectedTask: task, action: '' });
} }
break; break;
} }
@ -399,16 +407,18 @@ export const GanttContent: React.FC<GanttContentProps> = ({
})} })}
</g> </g>
<g className="toolTip"> <g className="toolTip">
{selectedTask && barEvent !== 'end' && barEvent !== 'start' && ( {barEvent.selectedTask &&
<Tooltip barEvent.action !== 'end' &&
x={selectedTask.x2 + columnWidth + arrowIndent} barEvent.action !== 'start' && (
y={selectedTask.y + rowHeight} <Tooltip
task={selectedTask} x={barEvent.selectedTask.x2 + columnWidth + arrowIndent}
fontFamily={fontFamily} y={barEvent.selectedTask.y + rowHeight}
fontSize={fontSize} task={barEvent.selectedTask}
getTooltipContent={getTooltipContent} fontFamily={fontFamily}
/> fontSize={fontSize}
)} getTooltipContent={getTooltipContent}
/>
)}
</g> </g>
</> </>
); );