diff --git a/packages/core/client/src/block-provider/GanttBlockProvider.tsx b/packages/core/client/src/block-provider/GanttBlockProvider.tsx index 8a6c688ad1..16e9b3508b 100644 --- a/packages/core/client/src/block-provider/GanttBlockProvider.tsx +++ b/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) => { - const task = ctx.field.data.find((k) => k.id === v.id) || { hideChildren: false }; - return { - ...v, - hideChildren: task?.hideChildren, - }; - }); - setTasks(mergeTasks); - ctx.field.data = mergeTasks; + setTasks(data); + ctx.field.data = data; } }, [ctx?.service?.loading]); return { 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 7a884db82c..50f1bef6be 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 @@ -63,13 +63,13 @@ export const Gantt: any = (props: any) => { preStepsCount = 1, barFill = 60, barCornerRadius = 3, - barProgressColor = '#a3a3ff', - barProgressSelectedColor = '#8282f5', - barBackgroundColor = '#b8c2cc', + barProgressColor = '#1890ff', + barProgressSelectedColor = '#1890ff', + barBackgroundColor = '#1890ff87', barBackgroundSelectedColor = '#aeb8c2', projectProgressColor = '#7db59a', projectProgressSelectedColor = '#59a985', - projectBackgroundColor = '#fac465', + projectBackgroundColor = '#33831a5e', projectBackgroundSelectedColor = '#f7bb53', milestoneBackgroundColor = '#f1c453', milestoneBackgroundSelectedColor = '#f29e4c', diff --git a/packages/core/client/src/schema-component/antd/gantt/components/grid/style.tsx b/packages/core/client/src/schema-component/antd/gantt/components/grid/style.tsx index a0e15a7479..d5b020c24e 100644 --- a/packages/core/client/src/schema-component/antd/gantt/components/grid/style.tsx +++ b/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; `; 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 593f3587df..3634f3e561 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,35 +1,13 @@ -import React from "react"; +import React from 'react'; import { cx } from '@emotion/css'; -import { TaskItemProps } from "../task-item"; -import { projectWrapper,projectBackground,projectTop } from './style'; - +import { TaskItemProps } from '../task-item'; +import { projectWrapper, projectBackground } from './style'; export const Project: React.FC = ({ task, isSelected }) => { - const barColor = isSelected - ? task.styles.backgroundSelectedColor - : task.styles.backgroundColor; - const processColor = isSelected - ? task.styles.progressSelectedColor - : task.styles.progressColor; + const barColor = isSelected ? task.styles.backgroundSelectedColor : 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 ( = ({ task, isSelected }) => { rx={task.barCornerRadius} fill={processColor} /> - - - ); }; diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/style.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/style.tsx index 52c3374812..dbe8e97bd3 100644 --- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/style.tsx +++ b/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; diff --git a/packages/core/client/src/schema-component/antd/gantt/components/task-item/task-item.tsx b/packages/core/client/src/schema-component/antd/gantt/components/task-item/task-item.tsx index baa4c9a175..4088bd4043 100644 --- a/packages/core/client/src/schema-component/antd/gantt/components/task-item/task-item.tsx +++ b/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 { GanttContentMoveAction } from "../../types/gantt-task-actions"; -import { Bar } from "./bar/bar"; -import { BarSmall } from "./bar/bar-small"; -import { Milestone } from "./milestone/milestone"; -import { Project } from "./project/project"; -import { barLabel,barLabelOutside } from './style'; +import { BarTask } from '../../types/bar-task'; +import { GanttContentMoveAction } from '../../types/gantt-task-actions'; +import { Bar } from './bar/bar'; +import { BarSmall } from './bar/bar-small'; +import { Milestone } from './milestone/milestone'; +import { Project } from './project/project'; +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 = props => { - const { - task, - arrowIndent, - isDelete, - taskHeight, - isSelected, - rtl, - onEventStart, - } = { +export const TaskItem: React.FC = (props) => { + const { task, arrowIndent, isDelete, taskHeight, isSelected, rtl, onEventStart } = { ...props, }; const textRef = useRef(null); const [taskItem, setTaskItem] = useState(
); const [isTextInside, setIsTextInside] = useState(true); - + const isProjectBar = task.typeInternal === 'project'; useEffect(() => { switch (task.typeInternal) { - case "milestone": + case 'milestone': setTaskItem(); break; - case "project": + case 'project': setTaskItem(); break; - case "smalltask": + case 'smalltask': setTaskItem(); break; default: @@ -70,12 +62,7 @@ export const TaskItem: React.FC = props => { return task.x1 + width * 0.5; } if (rtl && textRef.current) { - return ( - task.x1 - - textRef.current.getBBox().width - - arrowIndent * +hasChild - - arrowIndent * 0.2 - ); + return 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 = props => { return ( { + onKeyDown={(e) => { switch (e.key) { - case "Delete": { - if (isDelete) onEventStart("delete", task, e); + case 'Delete': { + if (isDelete) onEventStart('delete', task, e); break; } } e.stopPropagation(); }} - onMouseEnter={e => { - onEventStart("mouseenter", task, e); + onMouseEnter={(e) => { + onEventStart('mouseenter', task, e); }} - onMouseLeave={e => { - onEventStart("mouseleave", task, e); + onMouseLeave={(e) => { + onEventStart('mouseleave', task, e); }} - onDoubleClick={e => { - onEventStart("dblclick", task, e); + onDoubleClick={(e) => { + onEventStart('dblclick', task, e); }} - onClick={e => { - onEventStart("click", task, e); + onClick={(e) => { + onEventStart('click', task, e); }} onFocus={() => { - onEventStart("select", task); + onEventStart('select', task); }} > {taskItem} {task.name} diff --git a/packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts b/packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts index ab04198c77..e77adacbf8 100644 --- a/packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts +++ b/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,