refactor: style improve

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

@@ -92,15 +92,8 @@ export const useGanttBlockProps = () => {
   useEffect(() => {
     if (!ctx?.service?.loading) {
       const data = formatData(ctx.service.data?.data, ctx.fieldNames);
-      const mergeTasks = data.map((v) => {
+      setTasks(data);
-        const task = ctx.field.data.find((k) => k.id === v.id) || { hideChildren: false };
+      ctx.field.data = data;
-        return {
-          ...v,
-          hideChildren: task?.hideChildren,
-        };
-      });
-      setTasks(mergeTasks);
-      ctx.field.data = mergeTasks;
     }
   }, [ctx?.service?.loading]);
   return {

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

@@ -63,13 +63,13 @@ export const Gantt: any = (props: any) => {
     preStepsCount = 1,
     barFill = 60,
     barCornerRadius = 3,
-    barProgressColor = '#a3a3ff',
+    barProgressColor = '#1890ff',
-    barProgressSelectedColor = '#8282f5',
+    barProgressSelectedColor = '#1890ff',
-    barBackgroundColor = '#b8c2cc',
+    barBackgroundColor = '#1890ff87',
     barBackgroundSelectedColor = '#aeb8c2',
     projectProgressColor = '#7db59a',
     projectProgressSelectedColor = '#59a985',
-    projectBackgroundColor = '#fac465',
+    projectBackgroundColor = '#33831a5e',
     projectBackgroundSelectedColor = '#f7bb53',
     milestoneBackgroundColor = '#f1c453',
     milestoneBackgroundSelectedColor = '#f29e4c',

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

@@ -10,7 +10,7 @@ export const gridHeightRow = css`
 
 export const gridRowLine = css`
   stroke: #f0f0f0;
-  stroke-width:1.5;
+  stroke-width:0;
   border-bottom: 1px solid #f0f0f0;
 `;
 

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

@@ -1,35 +1,13 @@
-import React from "react";
+import React from 'react';
 import { cx } from '@emotion/css';
-import { TaskItemProps } from "../task-item";
+import { TaskItemProps } from '../task-item';
-import { projectWrapper,projectBackground,projectTop } from './style';
+import { projectWrapper, projectBackground } from './style';
-
 
 export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
-  const barColor = isSelected
+  const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
-    ? task.styles.backgroundSelectedColor
+  const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
-    : task.styles.backgroundColor;
-  const processColor = isSelected
-    ? task.styles.progressSelectedColor
-    : task.styles.progressColor;
   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={cx(projectWrapper)}>
       <rect
@@ -51,26 +29,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
         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={cx(projectTop)}
-      />
-      <polygon
-        className={cx(projectTop)}
-        points={projectLeftTriangle}
-        fill={barColor}
-      />
-      <polygon
-        className={cx(projectTop)}
-        points={projectRightTriangle}
-        fill={barColor}
-      />
     </g>
   );
 };

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

@@ -13,7 +13,17 @@ export const barLabel =css`
   user-select: none;
   pointer-events: none;
 `
-
+export const projectLabel =css`
+  fill: #130d0d;
+  font-weight: 600;
+  dominant-baseline: central;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+`
 export const barLabelOutside =css`
   fill: #555;
   text-anchor: start;

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

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 import { cx } from '@emotion/css';
-import { BarTask } from "../../types/bar-task";
+import { BarTask } from '../../types/bar-task';
-import { GanttContentMoveAction } from "../../types/gantt-task-actions";
+import { GanttContentMoveAction } from '../../types/gantt-task-actions';
-import { Bar } from "./bar/bar";
+import { Bar } from './bar/bar';
-import { BarSmall } from "./bar/bar-small";
+import { BarSmall } from './bar/bar-small';
-import { Milestone } from "./milestone/milestone";
+import { Milestone } from './milestone/milestone';
-import { Project } from "./project/project";
+import { Project } from './project/project';
-import { barLabel,barLabelOutside } from './style';
+import { barLabel, barLabelOutside, projectLabel } from './style';
 
 export type TaskItemProps = {
   task: BarTask;
@@ -20,35 +20,27 @@ export type TaskItemProps = {
   onEventStart: (
     action: GanttContentMoveAction,
     selectedTask: BarTask,
-    event?: React.MouseEvent | React.KeyboardEvent
+    event?: React.MouseEvent | React.KeyboardEvent,
   ) => any;
 };
 
-export const TaskItem: React.FC<TaskItemProps> = props => {
+export const TaskItem: React.FC<TaskItemProps> = (props) => {
-  const {
+  const { task, arrowIndent, isDelete, taskHeight, isSelected, rtl, onEventStart } = {
-    task,
-    arrowIndent,
-    isDelete,
-    taskHeight,
-    isSelected,
-    rtl,
-    onEventStart,
-  } = {
     ...props,
   };
   const textRef = useRef<SVGTextElement>(null);
   const [taskItem, setTaskItem] = useState<JSX.Element>(<div />);
   const [isTextInside, setIsTextInside] = useState(true);
-
+  const isProjectBar = task.typeInternal === 'project';
   useEffect(() => {
     switch (task.typeInternal) {
-      case "milestone":
+      case 'milestone':
         setTaskItem(<Milestone {...props} />);
         break;
-      case "project":
+      case 'project':
         setTaskItem(<Project {...props} />);
         break;
-      case "smalltask":
+      case 'smalltask':
         setTaskItem(<BarSmall {...props} />);
         break;
       default:
@@ -70,12 +62,7 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
       return task.x1 + width * 0.5;
     }
     if (rtl && textRef.current) {
-      return (
+      return task.x1 - textRef.current.getBBox().width - arrowIndent * +hasChild - arrowIndent * 0.2;
-        task.x1 -
-        textRef.current.getBBox().width -
-        arrowIndent * +hasChild -
-        arrowIndent * 0.2
-      );
     } else {
       return task.x1 + width + arrowIndent * +hasChild + arrowIndent * 0.2;
     }
@@ -83,40 +70,36 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
 
   return (
     <g
-      onKeyDown={e => {
+      onKeyDown={(e) => {
         switch (e.key) {
-          case "Delete": {
+          case 'Delete': {
-            if (isDelete) onEventStart("delete", task, e);
+            if (isDelete) onEventStart('delete', task, e);
             break;
           }
         }
         e.stopPropagation();
       }}
-      onMouseEnter={e => {
+      onMouseEnter={(e) => {
-        onEventStart("mouseenter", task, e);
+        onEventStart('mouseenter', task, e);
       }}
-      onMouseLeave={e => {
+      onMouseLeave={(e) => {
-        onEventStart("mouseleave", task, e);
+        onEventStart('mouseleave', task, e);
       }}
-      onDoubleClick={e => {
+      onDoubleClick={(e) => {
-        onEventStart("dblclick", task, e);
+        onEventStart('dblclick', task, e);
       }}
-      onClick={e => {
+      onClick={(e) => {
-        onEventStart("click", task, e);
+        onEventStart('click', task, e);
       }}
       onFocus={() => {
-        onEventStart("select", task);
+        onEventStart('select', task);
       }}
     >
       {taskItem}
       <text
-        x={getX()}
+        x={isProjectBar ? task.x1 : getX()}
-        y={task.y + taskHeight * 0.5}
+        y={isProjectBar ? task.y-8 : task.y + taskHeight * 0.5}
-        className={
+        className={isProjectBar ? cx(projectLabel) : isTextInside ? cx(barLabel) : cx(barLabel) && cx(barLabelOutside)}
-          isTextInside
-            ? cx(barLabel)
-            : cx(barLabel) && cx(barLabelOutside)
-        }
         ref={textRef}
       >
         {task.name}

packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts

@@ -105,7 +105,7 @@ const convertToBarTask = (
         dates,
         columnWidth,
         rowHeight,
-        taskHeight,
+        taskHeight*0.6,
         barCornerRadius,
         handleWidth,
         rtl,