Support authorized relation kinds for dependencies

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · Mar 27, 2024 · fdbccb3 · fdbccb3
1 parent 8f5960c
commit fdbccb3
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 100 deletions.
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
@@ -171,6 +171,12 @@ export const Gantt: React.FC<GanttProps> = ({
   TaskListTable = TaskListTableDefault,
   TooltipContent = StandardTooltipContent,
   ContextualPalette,
+  authorizedRelations = [
+    "startToStart",
+    "startToEnd",
+    "endToStart",
+    "endToEnd",
+  ],
   canMoveTasks = true,
   canResizeColumns = true,
   checkIsHoliday: checkIsHolidayProp = defaultCheckIsHoliday,
@@ -1799,6 +1805,7 @@ export const Gantt: React.FC<GanttProps> = ({
 
   const barProps: TaskGanttContentProps = useMemo(
     () => ({
+      authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,
       checkIsHoliday,

diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx
@@ -11,6 +11,7 @@ import {
   Distances,
   FixPosition,
   GlobalRowIndexToTaskMap,
+  RelationKind,
   Task,
   TaskContextualPaletteProps,
   TaskCoordinates,
@@ -30,6 +31,7 @@ import { checkTaskHasDependencyWarning } from "../../helpers/check-task-has-depe
 import type { OptimizedListParams } from "../../helpers/use-optimized-list";
 
 export type TaskGanttContentProps = {
+  authorizedRelations: RelationKind[];
   additionalLeftSpace: number;
   additionalRightSpace: number;
   checkIsHoliday: (date: Date) => boolean;
@@ -80,6 +82,7 @@ export type TaskGanttContentProps = {
 };
 
 export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
+  authorizedRelations,
   additionalLeftSpace,
   additionalRightSpace,
   checkIsHoliday,
@@ -122,8 +125,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   taskHalfHeight,
   visibleTasksMirror,
 }) => {
-  const isRelationDrawMode = Boolean(ganttRelationEvent);
-
   const renderedHolidays = useMemo(() => {
     const { holidayBackgroundColor } = colorStyles;
     const { columnWidth } = distances;
@@ -266,10 +267,11 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
             distances={distances}
             taskHeight={taskHeight}
             taskHalfHeight={taskHalfHeight}
-            isRelationDrawMode={isRelationDrawMode}
             isProgressChangeable={!task.isDisabled}
             isDateChangeable={!task.isDisabled}
             isRelationChangeable={!task.isDisabled}
+            authorizedRelations={authorizedRelations}
+            ganttRelationEvent={ganttRelationEvent}
             isDelete={!task.isDisabled}
             onDoubleClick={onDoubleClick}
             onClick={onClick}
@@ -468,6 +470,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     dependencyMap,
     dependentMap,
     fullRowHeight,
+    ganttRelationEvent,
     getTaskCoordinates,
     mapGlobalRowIndexToTask,
     renderedRowIndexes,

diff --git a/src/components/gantt/use-tablelist-resize.ts b/src/components/gantt/use-tablelist-resize.ts
@@ -94,7 +94,7 @@ export const useTableListResize = (
       setColumns([...columnsProp]);
       setTableWidth(columnsProp.reduce((res, { width }) => res + width, 0));
     }
-  }, [columnsProp]);
+  }, []);
 
   const [tableResizeEvent, setTableResizeEvent] =
     useState<TableResizeEvent | null>(null);

diff --git a/src/components/other/arrow.tsx b/src/components/other/arrow.tsx
@@ -177,6 +177,7 @@ const ArrowInner: React.FC<ArrowProps> = ({
   return (
     <g className={fixPositionContainerClass} fill={color} stroke={color}>
       <g
+        data-testid={`task-arrow-${targetFrom}-${taskFrom.name}-${targetTo}-${taskTo.name}`}
         className={`"arrow" ${styles.arrow_clickable}`}
         onDoubleClick={onDoubleClick}
       >

diff --git a/src/components/task-item/bar/bar-relation-handle.tsx b/src/components/task-item/bar/bar-relation-handle.tsx
@@ -30,7 +30,6 @@ const BarRelationHandleInner: React.FC<BarRelationHandleProps> = ({
       }`}
       onMouseDown={startDrawRelation}
       onTouchStart={startDrawRelation}
-      data-draw-mode={isRelationDrawMode}
     />
   );
 };

diff --git a/src/components/task-item/bar/bar.tsx b/src/components/task-item/bar/bar.tsx
@@ -3,7 +3,6 @@ import React, { useCallback } from "react";
 import { getProgressPoint } from "../../../helpers/bar-helper";
 import { BarDisplay } from "./bar-display";
 import { BarDateHandle } from "./bar-date-handle";
-import { BarRelationHandle } from "./bar-relation-handle";
 import { BarProgressHandle } from "./bar-progress-handle";
 import type { TaskItemProps } from "../task-item";
 import type { BarMoveAction } from "../../../types/gantt-task-actions";
@@ -19,23 +18,15 @@ export const Bar: React.FC<
     onTaskEventStart: (action: BarMoveAction, clientX: number) => void;
   }
 > = ({
+  children: relationhandles,
   colorStyles,
 
-  distances: {
-    barCornerRadius,
-    handleWidth,
-    relationCircleOffset,
-    relationCircleRadius,
-  },
+  distances: { barCornerRadius, handleWidth },
   hasChildren,
   isCritical,
   isDateChangeable,
   isProgressChangeable,
-  isRelationChangeable,
-  isRelationDrawMode,
   isSelected,
-  onLeftRelationTriggerMouseDown,
-  onRightRelationTriggerMouseDown,
   onTaskEventStart,
   progressWidth,
   progressX,
@@ -157,29 +148,7 @@ export const Bar: React.FC<
         />
       )}
 
-      {/* left */}
-      {isRelationChangeable && (
-        <BarRelationHandle
-          dataTestid={`task-relation-handle-left-${task.name}`}
-          isRelationDrawMode={isRelationDrawMode}
-          radius={relationCircleRadius}
-          startDrawRelation={onLeftRelationTriggerMouseDown}
-          x={x1 - relationCircleOffset}
-          y={taskYOffset + taskHalfHeight}
-        />
-      )}
-
-      {/* right */}
-      {isRelationChangeable && (
-        <BarRelationHandle
-          dataTestid={`task-relation-handle-right-${task.name}`}
-          isRelationDrawMode={isRelationDrawMode}
-          radius={relationCircleRadius}
-          startDrawRelation={onRightRelationTriggerMouseDown}
-          x={x2 + relationCircleOffset}
-          y={taskYOffset + taskHalfHeight}
-        />
-      )}
+      {relationhandles}
 
       {isProgressChangeable && (
         <BarProgressHandle

diff --git a/src/components/task-item/milestone/milestone.tsx b/src/components/task-item/milestone/milestone.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 
-import { BarRelationHandle } from "../bar/bar-relation-handle";
 import stylesRelationHandle from "../bar/bar-relation-handle.module.css";
 
 import type { TaskItemProps } from "../task-item";
@@ -15,21 +14,16 @@ export const Milestone: React.FC<
     onTaskEventStart: (action: BarMoveAction, clientX: number) => void;
   }
 > = ({
+  children: relationhandles,
   task,
   taskYOffset,
-  distances: { barCornerRadius, relationCircleOffset, relationCircleRadius },
+  distances: { barCornerRadius },
   taskHeight,
-  taskHalfHeight,
-  isRelationChangeable,
-  isRelationDrawMode,
-  onLeftRelationTriggerMouseDown,
-  onRightRelationTriggerMouseDown,
   onTaskEventStart,
   isSelected,
   isCritical,
   colorStyles,
   x1,
-  x2,
 }) => {
   const rotatedHeight = taskHeight / 1.414;
 
@@ -80,30 +74,7 @@ export const Milestone: React.FC<
         }}
       />
 
-      <g className="handleGroup">
-        {isRelationChangeable && (
-          <g>
-            {/* left */}
-            <BarRelationHandle
-              dataTestid={`task-relation-handle-left-${task.name}`}
-              isRelationDrawMode={isRelationDrawMode}
-              x={x1 - relationCircleOffset}
-              y={taskYOffset + taskHalfHeight}
-              radius={relationCircleRadius}
-              startDrawRelation={onLeftRelationTriggerMouseDown}
-            />
-            {/* right */}
-            <BarRelationHandle
-              dataTestid={`task-relation-handle-right-${task.name}`}
-              isRelationDrawMode={isRelationDrawMode}
-              x={x2 + relationCircleOffset}
-              y={taskYOffset + taskHalfHeight}
-              radius={relationCircleRadius}
-              startDrawRelation={onRightRelationTriggerMouseDown}
-            />
-          </g>
-        )}
-      </g>
+      {relationhandles}
     </g>
   );
 };
diff --git a/src/components/task-item/task-item.tsx b/src/components/task-item/task-item.tsx
@@ -10,6 +10,7 @@ import type { MouseEvent, MouseEventHandler } from "react";
 
 import {
   BarMoveAction,
+  GanttRelationEvent,
   RelationMoveTarget,
 } from "../../types/gantt-task-actions";
 import {
@@ -19,13 +20,15 @@ import {
   ColorStyles,
   TaskOrEmpty,
   Distances,
+  RelationKind,
 } from "../../types/public-types";
 import { Bar } from "./bar/bar";
 import { BarSmall } from "./bar/bar-small";
 import { Milestone } from "./milestone/milestone";
 import { TaskWarning } from "./task-warning";
 import style from "./task-list.module.css";
 import { BarFixWidth, fixWidthContainerClass } from "../other/bar-fix-width";
+import { BarRelationHandle } from "./bar/bar-relation-handle";
 
 export type TaskItemProps = {
   getTaskGlobalIndexByRef: (task: Task) => number;
@@ -45,11 +48,12 @@ export type TaskItemProps = {
   taskHalfHeight: number;
   isProgressChangeable: boolean;
   isDateChangeable: boolean;
+  authorizedRelations: RelationKind[];
   isRelationChangeable: boolean;
+  ganttRelationEvent: GanttRelationEvent;
   isDelete: boolean;
   isSelected: boolean;
   isCritical: boolean;
-  isRelationDrawMode: boolean;
   rtl: boolean;
   onDoubleClick?: (task: Task) => void;
   onClick?: (task: Task, event: React.MouseEvent<SVGElement>) => void;
@@ -72,21 +76,28 @@ const TaskItemInner: React.FC<TaskItemProps> = props => {
     childOutOfParentWarnings,
     colorStyles: stylesProp,
 
-    distances: { arrowIndent, handleWidth, taskWarningOffset },
-
+    distances: {
+      arrowIndent,
+      handleWidth,
+      taskWarningOffset,
+      relationCircleOffset,
+      relationCircleRadius,
+    },
     fixEndPosition = undefined,
     fixStartPosition = undefined,
     getTaskGlobalIndexByRef,
     handleDeleteTasks,
     hasDependencyWarning,
     isDateChangeable,
     isDelete,
-    isRelationDrawMode,
     isSelected,
     onClick = undefined,
     onDoubleClick = undefined,
     onEventStart,
     onRelationStart,
+    authorizedRelations,
+    isRelationChangeable,
+    ganttRelationEvent,
     rtl,
     selectTaskOnMouseDown,
     setTooltipTask,
@@ -205,6 +216,70 @@ const TaskItemInner: React.FC<TaskItemProps> = props => {
   const [isTextInside, setIsTextInside] = useState(true);
 
   const taskItem = useMemo(() => {
+    const isFromStartRelationAuthorized =
+      authorizedRelations.includes("startToStart") ||
+      authorizedRelations.includes("startToEnd");
+    const isFromEndRelationAuthorized =
+      authorizedRelations.includes("endToEnd") ||
+      authorizedRelations.includes("endToStart");
+    const isToStartRelationAuthorized =
+      (ganttRelationEvent?.target === "startOfTask" &&
+        authorizedRelations.includes("startToStart")) ||
+      (ganttRelationEvent?.target === "endOfTask" &&
+        authorizedRelations.includes("endToStart"));
+    const isToEndRelationAuthorized =
+      (ganttRelationEvent?.target === "startOfTask" &&
+        authorizedRelations.includes("startToEnd")) ||
+      (ganttRelationEvent?.target === "endOfTask" &&
+        authorizedRelations.includes("endToEnd"));
+
+    let displayLeftRelationHandle: boolean = false;
+    if (ganttRelationEvent && task !== ganttRelationEvent.task) {
+      displayLeftRelationHandle = rtl
+        ? isToEndRelationAuthorized
+        : isToStartRelationAuthorized;
+    } else {
+      displayLeftRelationHandle = rtl
+        ? isFromEndRelationAuthorized
+        : isFromStartRelationAuthorized;
+    }
+    let displayRightRelationHandle: boolean = false;
+    if (ganttRelationEvent && task !== ganttRelationEvent.task) {
+      displayRightRelationHandle = rtl
+        ? isToStartRelationAuthorized
+        : isToEndRelationAuthorized;
+    } else {
+      displayRightRelationHandle = rtl
+        ? isFromStartRelationAuthorized
+        : isFromEndRelationAuthorized;
+    }
+    const relationhandles = (
+      <>
+        {/* left */}
+        {isRelationChangeable && displayLeftRelationHandle && (
+          <BarRelationHandle
+            dataTestid={`task-relation-handle-left-${task.name}`}
+            isRelationDrawMode={!!ganttRelationEvent}
+            x={x1 - relationCircleOffset}
+            y={taskYOffset + taskHalfHeight}
+            radius={relationCircleRadius}
+            startDrawRelation={onLeftRelationTriggerMouseDown}
+          />
+        )}
+        {/* right */}
+        {isRelationChangeable && displayRightRelationHandle && (
+          <BarRelationHandle
+            dataTestid={`task-relation-handle-right-${task.name}`}
+            isRelationDrawMode={!!ganttRelationEvent}
+            x={x2 + relationCircleOffset}
+            y={taskYOffset + taskHalfHeight}
+            radius={relationCircleRadius}
+            startDrawRelation={onRightRelationTriggerMouseDown}
+          />
+        )}
+      </>
+    );
+
     if (task.type === "milestone") {
       return (
         <Milestone
@@ -213,7 +288,9 @@ const TaskItemInner: React.FC<TaskItemProps> = props => {
           onLeftRelationTriggerMouseDown={onLeftRelationTriggerMouseDown}
           onRightRelationTriggerMouseDown={onRightRelationTriggerMouseDown}
           onTaskEventStart={onTaskEventStart}
-        />
+        >
+          {relationhandles}
+        </Milestone>
       );
     } else if (width < handleWidth * 2) {
       return (
@@ -231,11 +308,12 @@ const TaskItemInner: React.FC<TaskItemProps> = props => {
           onRightRelationTriggerMouseDown={onRightRelationTriggerMouseDown}
           onTaskEventStart={onTaskEventStart}
           colorStyles={styles}
-        />
+        >
+          {relationhandles}
+        </Bar>
       );
   }, [
     handleWidth,
-    isRelationDrawMode,
     isSelected,
     outOfParentWarnings,
     props,
-Original file line number
+Diff line change
@@ Expand Up @@
           }`}
           onMouseDown={startDrawRelation}
           onTouchStart={startDrawRelation}
-          data-draw-mode={isRelationDrawMode}
         />
       );
     };
@@ Expand Down @@