project type init

src/components/gantt/gantt.tsx

@@ -46,7 +46,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
-  onTaskDelete,
+  onDelete,
   onSelect,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -300,7 +300,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onDateChange,
     onProgressChange,
     onDoubleClick,
-    onTaskDelete,
+    onDelete,
     TooltipContent,
   };
 

src/components/gantt/task-gantt-content.tsx

@@ -61,7 +61,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
-  onTaskDelete,
+  onDelete,
   TooltipContent,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -204,9 +204,9 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     // Keyboard events
     else if (isKeyboardEvent(event)) {
       if (action === "delete") {
-        if (onTaskDelete) {
+        if (onDelete) {
           try {
-            const result = await onTaskDelete(task);
+            const result = await onDelete(task);
             if (result !== undefined && result) {
               setGanttEvent({ action, changedTask: task });
             }

src/components/task-item/project/project.module.css

@@ -0,0 +1,13 @@
+.projectWrapper {
+  cursor: pointer;
+  outline: none;
+}
+
+.projectBackground {
+  user-select: none;
+  opacity: 0.5;
+}
+
+.projectTop {
+  user-select: none;
+}

src/components/task-item/project/project.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { progressWithByParams } from "../../../helpers/bar-helper";
+import { TaskItemProps } from "../task-item";
+import styles from "./project.module.css";
+
+export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
+  const barColor = isSelected
+    ? task.styles.backgroundSelectedColor
+    : task.styles.backgroundColor;
+  const processColor = isSelected
+    ? task.styles.progressSelectedColor
+    : task.styles.progressColor;
+  const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
+  const projectWith = task.x2 - task.x1;
+
+  const projectLeftTriangle = [
+    task.x1,
+    task.y + task.height / 2 - 1,
+    task.x1,
+    task.y + task.height,
+    task.x1 + 15,
+    task.y + task.height / 2 - 1,
+  ].join(",");
+  const projectRightTriangle = [
+    task.x2,
+    task.y + task.height / 2 - 1,
+    task.x2,
+    task.y + task.height,
+    task.x2 - 15,
+    task.y + task.height / 2 - 1,
+  ].join(",");
+
+  return (
+    <g tabIndex={0} className={styles.projectWrapper}>
+      <rect
+        fill={barColor}
+        x={task.x1}
+        width={projectWith}
+        y={task.y}
+        height={task.height}
+        rx={task.barCornerRadius}
+        ry={task.barCornerRadius}
+        className={styles.projectBackground}
+      />
+      <rect
+        x={task.x1}
+        width={progressWidth}
+        y={task.y}
+        height={task.height}
+        ry={task.barCornerRadius}
+        rx={task.barCornerRadius}
+        fill={processColor}
+      />
+      <rect
+        fill={barColor}
+        x={task.x1}
+        width={projectWith}
+        y={task.y}
+        height={task.height / 2}
+        rx={task.barCornerRadius}
+        ry={task.barCornerRadius}
+        className={styles.projectTop}
+      />
+      <polygon
+        className={styles.projectTop}
+        points={projectLeftTriangle}
+        fill={barColor}
+      />
+      <polygon
+        className={styles.projectTop}
+        points={projectRightTriangle}
+        fill={barColor}
+      />
+    </g>
+  );
+};

src/components/task-item/task-item.tsx

@@ -3,6 +3,7 @@ import { BarTask } from "../../types/bar-task";
 import { GanttContentMoveAction } from "../../types/gantt-task-actions";
 import { Bar } from "./bar/bar";
 import { Milestone } from "./milestone/milestone";
+import { Project } from "./project/project";
 import style from "./task-list.module.css";
 
 export type TaskItemProps = {
@@ -40,6 +41,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
       case "milestone":
         setTaskItem(<Milestone {...props} />);
         break;
+      case "project":
+        setTaskItem(<Project {...props} />);
+        break;
       default:
         setTaskItem(<Bar {...props} />);
         break;

src/types/public-types.ts

@@ -6,7 +6,7 @@ export enum ViewMode {
   Week = "Week",
   Month = "Month",
 }
-export type TaskType = "task" | "milestone";
+export type TaskType = "task" | "milestone" | "project";
 export interface Task {
   id: string;
   type: TaskType;
@@ -24,6 +24,7 @@ export interface Task {
     progressSelectedColor?: string;
   };
   isDisabled?: boolean;
+  project?: string;
   dependencies?: string[];
 }
 
@@ -55,9 +56,7 @@ export interface EventOption {
   /**
    * Invokes on delete selected task. Chart undoes operation if method return false or error.
    */
-  onTaskDelete?: (
-    task: Task
-  ) => void | boolean | Promise<void> | Promise<boolean>;
+  onDelete?: (task: Task) => void | boolean | Promise<void> | Promise<boolean>;
 }
 
 export interface DisplayOption {