feat: custom color

packages/core/client/src/block-provider/GanttBlockProvider.tsx

@@ -23,6 +23,7 @@ const formatData = (
         progress: item[fieldNames.progress] * 100 || 0,
         hideChildren: hideChildren,
         project: projectId,
+        color: item.color,
       });
       formatData(item.children, fieldNames, tasks, item.id + '', hideChildren);
     } else {
@@ -34,6 +35,7 @@ const formatData = (
         type: fieldNames.end ? 'task' : 'milestone',
         progress: item[fieldNames.progress] * 100 || 0,
         project: projectId,
+        color: item.color,
       });
     }
   });

packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx

@@ -66,12 +66,12 @@ export const Gantt: any = (props: any) => {
     barCornerRadius = 2,
     barProgressColor = '#1890ff',
     barProgressSelectedColor = '#1890ff',
-    barBackgroundColor = '#82bdff',
+    barBackgroundColor = '#1890ff',
-    barBackgroundSelectedColor = '#82bdff',
+    barBackgroundSelectedColor = '#1890ff',
     projectProgressColor = '#52c41a',
     projectProgressSelectedColor = '#52c41a',
-    projectBackgroundColor = '#9cdc82',
+    projectBackgroundColor = '#52c41a',
-    projectBackgroundSelectedColor = '#9cdc82',
+    projectBackgroundSelectedColor = '#52c41a',
     milestoneBackgroundColor = '#f1c453',
     milestoneBackgroundSelectedColor = '#f29e4c',
     rtl = false,

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-display.tsx

@@ -1,10 +1,11 @@
-import React from "react";
 import { cx } from '@emotion/css';
+import React from "react";
 import { barBackground } from './style';
 
 type BarDisplayProps = {
   x: number;
   y: number;
+  color?: string;
   width: number;
   height: number;
   isSelected: boolean;
@@ -23,6 +24,7 @@ type BarDisplayProps = {
 export const BarDisplay: React.FC<BarDisplayProps> = ({
   x,
   y,
+  color,
   width,
   height,
   isSelected,
@@ -33,10 +35,16 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
   onMouseDown,
 }) => {
   const getProcessColor = () => {
+    if (color) {
+      return color;
+    }
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
   const getBarColor = () => {
+    if (color) {
+      return color;
+    }
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar.tsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { cx } from '@emotion/css';
+import React from "react";
 import { getProgressPoint } from "../../../helpers/bar-helper";
-import { BarDisplay } from "./bar-display";
-import { BarDateHandle } from "./bar-date-handle";
-import { BarProgressHandle } from "./bar-progress-handle";
 import { TaskItemProps } from "../task-item";
+import { BarDateHandle } from "./bar-date-handle";
+import { BarDisplay } from "./bar-display";
+import { BarProgressHandle } from "./bar-progress-handle";
 import { barWrapper } from './style';
 
 
@@ -27,6 +27,7 @@ export const Bar: React.FC<TaskItemProps> = ({
       <BarDisplay
         x={task.x1}
         y={task.y}
+        color={task.color}
         width={task.x2 - task.x1}
         height={task.height}
         progressX={task.progressX}

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/style.tsx

@@ -19,4 +19,5 @@ export const barWrapper = css`
 export const barBackground = css`
   user-select: none;
   stroke-width: 0;
+  opacity: .6;
 `;

packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
 import { cx } from '@emotion/css';
+import React from 'react';
 import { TaskItemProps } from '../task-item';
-import { projectWrapper, projectBackground } from './style';
+import { projectBackground, projectWrapper } from './style';
 
 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 projectWith = task.x2 - task.x1;
 
+  console.log('task', task);
+
   return (
     <g tabIndex={0} className={cx(projectWrapper)}>
       <rect
-        fill={barColor}
+        fill={task.color || barColor}
         x={task.x1}
         width={projectWith}
         y={task.y}
@@ -27,7 +29,7 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
         height={task.height}
         ry={task.barCornerRadius}
         rx={task.barCornerRadius}
-        fill={processColor}
+        fill={task.color || processColor}
       />
     </g>
   );

packages/core/client/src/schema-component/antd/gantt/types/bar-task.ts

@@ -12,6 +12,7 @@ export interface BarTask extends Task {
   barCornerRadius: number;
   handleWidth: number;
   barChildren: BarTask[];
+  color?: string;
   styles: {
     backgroundColor: string;
     backgroundSelectedColor: string;