rtl experiment

example/src/App.tsx

@@ -64,17 +64,20 @@ const App = () => {
         isChecked={isChecked}
       />
       <h3>Gantt With Unlimited Height</h3>
-      <Gantt
+      <div dir="rtl">
-        tasks={tasks}
+        <Gantt
-        viewMode={view}
+          tasks={tasks}
-        onDateChange={onTaskChange}
+          viewMode={view}
-        onDelete={onTaskDelete}
+          onDateChange={onTaskChange}
-        onProgressChange={onProgressChange}
+          onDelete={onTaskDelete}
-        onDoubleClick={onDblClick}
+          onProgressChange={onProgressChange}
-        onSelect={onSelect}
+          onDoubleClick={onDblClick}
-        listCellWidth={isChecked ? "155px" : ""}
+          onSelect={onSelect}
-        columnWidth={columnWidth}
+          listCellWidth={isChecked ? "155px" : ""}
-      />
+          columnWidth={columnWidth}
+          rtl={true}
+        />
+      </div>
       <h3>Gantt With Limited Height</h3>
       <Gantt
         tasks={tasks}

src/components/gantt/gantt.tsx

@@ -38,6 +38,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   projectBackgroundSelectedColor = "#f7bb53",
   milestoneBackgroundColor = "#f1c453",
   milestoneBackgroundSelectedColor = "#f29e4c",
+  rtl = false,
   handleWidth = 8,
   timeStep = 300000,
   arrowColor = "grey",
@@ -83,7 +84,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   // task change events
   useEffect(() => {
     const [startDate, endDate] = ganttDateRange(tasks, viewMode);
-    const newDates = seedDates(startDate, endDate, viewMode);
+    let newDates = seedDates(startDate, endDate, viewMode);
+    if (rtl) {
+      newDates = newDates.reverse();
+    }
     setDateSetup({ dates: newDates, viewMode });
     setBarTasks(
       convertToBarTasks(
@@ -94,6 +98,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         taskHeight,
         barCornerRadius,
         handleWidth,
+        rtl,
         barProgressColor,
         barProgressSelectedColor,
         barBackgroundColor,
@@ -124,6 +129,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     projectBackgroundSelectedColor,
     milestoneBackgroundColor,
     milestoneBackgroundSelectedColor,
+    rtl,
   ]);
 
   useEffect(() => {
@@ -344,6 +350,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     fontSize,
     arrowIndent,
     svgWidth,
+    rtl,
     setGanttEvent,
     setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -415,6 +422,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         svgWidth={svgWidth}
         taskListWidth={taskListWidth}
         scroll={scrollX}
+        rtl={rtl}
         onScroll={handleScrollX}
       />
     </div>

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

@@ -26,6 +26,7 @@ export type TaskGanttContentProps = {
   arrowIndent: number;
   fontSize: string;
   fontFamily: string;
+  rtl: boolean;
   setGanttEvent: (value: GanttEvent) => void;
   setFailedTask: (value: BarTask | null) => void;
   setSelectedTask: (taskId: string) => void;
@@ -45,6 +46,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   arrowIndent,
   fontFamily,
   fontSize,
+  rtl,
   setGanttEvent,
   setFailedTask,
   setSelectedTask,
@@ -85,7 +87,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         ganttEvent.changedTask,
         xStep,
         timeStep,
-        initEventX1Delta
+        initEventX1Delta,
+        rtl
       );
       if (isChanged) {
         setGanttEvent({ action: ganttEvent.action, changedTask });
@@ -108,7 +111,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         changedTask,
         xStep,
         timeStep,
-        initEventX1Delta
+        initEventX1Delta,
+        rtl
       );
 
       const isNotLikeOriginal =

src/components/other/horizontal-scroll.tsx

@@ -5,8 +5,9 @@ export const HorizontalScroll: React.FC<{
   scroll: number;
   svgWidth: number;
   taskListWidth: number;
+  rtl: boolean;
   onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
-}> = ({ scroll, svgWidth, taskListWidth, onScroll }) => {
+}> = ({ scroll, svgWidth, taskListWidth, rtl, onScroll }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -17,7 +18,11 @@ export const HorizontalScroll: React.FC<{
 
   return (
     <div
-      style={{ marginLeft: taskListWidth }}
+      style={{
+        margin: rtl
+          ? `0px ${taskListWidth}px 0px 0px`
+          : `0px 0px 0px ${taskListWidth}px`,
+      }}
       className={styles.scroll}
       onScroll={onScroll}
       ref={scrollRef}

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

@@ -7,6 +7,8 @@ type BarDisplayProps = {
   width: number;
   height: number;
   isSelected: boolean;
+  /* progress start point */
+  progressX: number;
   progressWidth: number;
   barCornerRadius: number;
   styles: {
@@ -23,6 +25,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
   width,
   height,
   isSelected,
+  progressX,
   progressWidth,
   barCornerRadius,
   styles,
@@ -49,7 +52,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
         className={style.barBackground}
       />
       <rect
-        x={x}
+        x={progressX}
         width={progressWidth}
         y={y}
         height={height}

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

@@ -1,8 +1,5 @@
 import React from "react";
-import {
+import { getProgressPoint } from "../../../helpers/bar-helper";
-  progressWithByParams,
-  getProgressPoint,
-} from "../../../helpers/bar-helper";
 import { BarDisplay } from "./bar-display";
 import { BarProgressHandle } from "./bar-progress-handle";
 import { TaskItemProps } from "../task-item";
@@ -15,9 +12,8 @@ export const BarSmall: React.FC<TaskItemProps> = ({
   onEventStart,
   isSelected,
 }) => {
-  const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
   const progressPoint = getProgressPoint(
-    progressWidth + task.x1,
+    task.progressWidth + task.x1,
     task.y,
     task.height
   );
@@ -28,7 +24,8 @@ export const BarSmall: React.FC<TaskItemProps> = ({
         y={task.y}
         width={task.x2 - task.x1}
         height={task.height}
-        progressWidth={progressWidth}
+        progressX={task.progressX}
+        progressWidth={task.progressWidth}
         barCornerRadius={task.barCornerRadius}
         styles={task.styles}
         isSelected={isSelected}

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

@@ -1,8 +1,5 @@
 import React from "react";
-import {
+import { getProgressPoint } from "../../../helpers/bar-helper";
-  progressWithByParams,
-  getProgressPoint,
-} from "../../../helpers/bar-helper";
 import { BarDisplay } from "./bar-display";
 import { BarDateHandle } from "./bar-date-handle";
 import { BarProgressHandle } from "./bar-progress-handle";
@@ -16,9 +13,8 @@ export const Bar: React.FC<TaskItemProps> = ({
   onEventStart,
   isSelected,
 }) => {
-  const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
   const progressPoint = getProgressPoint(
-    progressWidth + task.x1,
+    task.progressWidth + task.x1,
     task.y,
     task.height
   );
@@ -30,7 +26,8 @@ export const Bar: React.FC<TaskItemProps> = ({
         y={task.y}
         width={task.x2 - task.x1}
         height={task.height}
-        progressWidth={progressWidth}
+        progressX={task.progressX}
+        progressWidth={task.progressWidth}
         barCornerRadius={task.barCornerRadius}
         styles={task.styles}
         isSelected={isSelected}

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { progressWithByParams } from "../../../helpers/bar-helper";
 import { TaskItemProps } from "../task-item";
 import styles from "./project.module.css";
 
@@ -10,7 +9,6 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
   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 = [
@@ -43,8 +41,8 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
         className={styles.projectBackground}
       />
       <rect
-        x={task.x1}
+        x={task.progressX}
-        width={progressWidth}
+        width={task.progressWidth}
         y={task.y}
         height={task.height}
         ry={task.barCornerRadius}

src/helpers/bar-helper.ts

@@ -10,6 +10,7 @@ export const convertToBarTasks = (
   taskHeight: number,
   barCornerRadius: number,
   handleWidth: number,
+  rtl: boolean,
   barProgressColor: string,
   barProgressSelectedColor: string,
   barBackgroundColor: string,
@@ -37,6 +38,7 @@ export const convertToBarTasks = (
       taskHeight,
       barCornerRadius,
       handleWidth,
+      rtl,
       barProgressColor,
       barProgressSelectedColor,
       barBackgroundColor,
@@ -75,6 +77,7 @@ const convertToBarTask = (
   taskHeight: number,
   barCornerRadius: number,
   handleWidth: number,
+  rtl: boolean,
   barProgressColor: string,
   barProgressSelectedColor: string,
   barBackgroundColor: string,
@@ -114,6 +117,7 @@ const convertToBarTask = (
         taskHeight,
         barCornerRadius,
         handleWidth,
+        rtl,
         projectProgressColor,
         projectProgressSelectedColor,
         projectBackgroundColor,
@@ -131,6 +135,7 @@ const convertToBarTask = (
         taskHeight,
         barCornerRadius,
         handleWidth,
+        rtl,
         barProgressColor,
         barProgressSelectedColor,
         barBackgroundColor,
@@ -151,13 +156,35 @@ const convertToBar = (
   taskHeight: number,
   barCornerRadius: number,
   handleWidth: number,
+  rtl: boolean,
   barProgressColor: string,
   barProgressSelectedColor: string,
   barBackgroundColor: string,
   barBackgroundSelectedColor: string
 ): BarTask => {
-  const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
+  let x1: number;
-  let x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
+  let x2: number;
+  if (rtl) {
+    x2 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
+    x1 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
+  } else {
+    x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
+    x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
+  }
+  let typeInternal: TaskTypeInternal = task.type;
+  if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
+    typeInternal = "smalltask";
+    x2 = x1 + handleWidth * 2;
+  }
+
+  const progressWidth = progressWithByParams(x1, x2, task.progress);
+  let progressX: number;
+  if (rtl) {
+    progressX = x2 - progressWidth;
+  } else {
+    progressX = x1;
+  }
+
   const y = taskYCoordinate(index, rowHeight, taskHeight);
 
   const styles = {
@@ -167,11 +194,6 @@ const convertToBar = (
     progressSelectedColor: barProgressSelectedColor,
     ...task.styles,
   };
-  let typeInternal: TaskTypeInternal = task.type;
-  if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
-    typeInternal = "smalltask";
-    x2 = x1 + handleWidth * 2;
-  }
   return {
     ...task,
     typeInternal,
@@ -179,6 +201,8 @@ const convertToBar = (
     x2,
     y,
     index,
+    progressX,
+    progressWidth,
     barCornerRadius,
     handleWidth,
     height: taskHeight,
@@ -199,7 +223,7 @@ const convertToMilestone = (
   handleWidth: number,
   milestoneBackgroundColor: string,
   milestoneBackgroundSelectedColor: string
-) => {
+): BarTask => {
   const x = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
   const y = taskYCoordinate(index, rowHeight, taskHeight);
 
@@ -221,6 +245,8 @@ const convertToMilestone = (
     x2,
     y,
     index,
+    progressX: 0,
+    progressWidth: 0,
     barCornerRadius,
     handleWidth,
     typeInternal: task.type,
@@ -281,9 +307,7 @@ export const progressByProgressWidth = (
   const progressPercent = Math.round((progressWidth * 100) / barWidth);
   if (progressPercent >= 100) return 100;
   else if (progressPercent <= 0) return 0;
-  else {
+  else return progressPercent;
-    return progressPercent;
-  }
 };
 
 const progressByX = (x: number, task: BarTask) => {
@@ -364,7 +388,8 @@ export const handleTaskBySVGMouseEvent = (
   selectedTask: BarTask,
   xStep: number,
   timeStep: number,
-  initEventX1Delta: number
+  initEventX1Delta: number,
+  rtl: boolean
 ): { isChanged: boolean; changedTask: BarTask } => {
   let result: { isChanged: boolean; changedTask: BarTask };
   switch (selectedTask.type) {
@@ -385,7 +410,8 @@ export const handleTaskBySVGMouseEvent = (
         selectedTask,
         xStep,
         timeStep,
-        initEventX1Delta
+        initEventX1Delta,
+        rtl
       );
       break;
   }
@@ -398,7 +424,8 @@ const handleTaskBySVGMouseEventForBar = (
   selectedTask: BarTask,
   xStep: number,
   timeStep: number,
-  initEventX1Delta: number
+  initEventX1Delta: number,
+  rtl: boolean
 ): { isChanged: boolean; changedTask: BarTask } => {
   const changedTask: BarTask = { ...selectedTask };
   let isChanged = false;
@@ -406,6 +433,18 @@ const handleTaskBySVGMouseEventForBar = (
     case "progress":
       changedTask.progress = progressByX(svgX, selectedTask);
       isChanged = changedTask.progress !== selectedTask.progress;
+      if (isChanged) {
+        changedTask.progressWidth = progressWithByParams(
+          changedTask.x1,
+          changedTask.x2,
+          changedTask.progress
+        );
+        if (rtl) {
+          changedTask.progressX = changedTask.x2 - changedTask.progressWidth;
+        } else {
+          changedTask.progressX = changedTask.x1;
+        }
+      }
       break;
     case "start": {
       const newX1 = startByX(svgX, xStep, selectedTask);

src/types/bar-task.ts

@@ -7,6 +7,8 @@ export interface BarTask extends Task {
   x2: number;
   y: number;
   height: number;
+  progressX: number;
+  progressWidth: number;
   barCornerRadius: number;
   handleWidth: number;
   barChildren: number[];

src/types/public-types.ts

@@ -65,6 +65,7 @@ export interface DisplayOption {
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */
   locale?: string;
+  rtl?: boolean;
 }
 
 export interface StylingOption {