From 620c8ceba9bf5380dd2e85bb4d35ddf17b3c1de6 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 12 Apr 2023 00:03:44 +0800
Subject: [PATCH] feat: custom color

---
 .../client/src/block-provider/GanttBlockProvider.tsx   |  2 ++
 .../antd/gantt/components/gantt/gantt.tsx              |  8 ++++----
 .../gantt/components/task-item/bar/bar-display.tsx     | 10 +++++++++-
 .../antd/gantt/components/task-item/bar/bar.tsx        |  9 +++++----
 .../antd/gantt/components/task-item/bar/style.tsx      |  1 +
 .../gantt/components/task-item/project/project.tsx     | 10 ++++++----
 .../src/schema-component/antd/gantt/types/bar-task.ts  |  1 +
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/core/client/src/block-provider/GanttBlockProvider.tsx b/packages/core/client/src/block-provider/GanttBlockProvider.tsx
index 86273b2c62..7e886fe0dd 100644
--- a/packages/core/client/src/block-provider/GanttBlockProvider.tsx
+++ b/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,
       });
     }
   });
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx b/packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx
index 110291e727..2f98cad793 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx
+++ b/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',
-    barBackgroundSelectedColor = '#82bdff',
+    barBackgroundColor = '#1890ff',
+    barBackgroundSelectedColor = '#1890ff',
     projectProgressColor = '#52c41a',
     projectProgressSelectedColor = '#52c41a',
-    projectBackgroundColor = '#9cdc82',
-    projectBackgroundSelectedColor = '#9cdc82',
+    projectBackgroundColor = '#52c41a',
+    projectBackgroundSelectedColor = '#52c41a',
     milestoneBackgroundColor = '#f1c453',
     milestoneBackgroundSelectedColor = '#f29e4c',
     rtl = false,
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-display.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-display.tsx
index 15d0b2eac9..a43e5b6d5e 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-display.tsx
+++ b/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;
   };
 
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar.tsx
index 1b6ccd503a..f3255c03a7 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar.tsx
+++ b/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}
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/style.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/style.tsx
index 501dd680e3..da5335ad52 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/style.tsx
+++ b/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;
 `;
diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx
index 3634f3e561..bd859e9ee9 100644
--- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx
+++ b/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>
   );
diff --git a/packages/core/client/src/schema-component/antd/gantt/types/bar-task.ts b/packages/core/client/src/schema-component/antd/gantt/types/bar-task.ts
index 1be75e84be..126079d4ce 100644
--- a/packages/core/client/src/schema-component/antd/gantt/types/bar-task.ts
+++ b/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;