chore: implement scroll sync

2024-06-14 14:31:34 +00:00 · 2024-02-06 11:37:41 +05:30 · 2024-02-06 11:37:41 +05:30 · b86c3b5cd6
commit b86c3b5cd6
parent b36afe6eab
8 changed files with 218 additions and 176 deletions
--- a/web/components/gantt-chart/blocks/blocks-list.tsx
+++ b/web/components/gantt-chart/blocks/blocks-list.tsx
@ -35,7 +35,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
  // store hooks
  const { peekIssue } = useIssueDetail();
  // chart hook
-  const { activeBlock, dispatch, updateScrollTop } = useChart();
+  const { activeBlock, dispatch } = useChart();

  // update the active block on hover
  const updateActiveBlock = (block: IGanttBlock | null) => {
@ -77,22 +77,12 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
    });
  };

-  const handleBlocksScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-    updateScrollTop(e.currentTarget.scrollTop);
-
-    const sidebarScrollContainer = document.getElementById("gantt-sidebar-scroll-container") as HTMLDivElement;
-    if (!sidebarScrollContainer) return;
-
-    sidebarScrollContainer.scrollTop = e.currentTarget.scrollTop;
-  };
-
  return (
    <div
-      className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
-      style={{ width: `${itemsContainerWidth}px` }}
-      onScroll={handleBlocksScroll}
+      className="absolute h-full w-full overflow-x-auto overflow-y-auto z-[1]"
+      // style={{ width: `${itemsContainerWidth}px` }}
    >
-      {blocks?.map((block) => {
+      {blocks?.map((block, index) => {
        // hide the block if it doesn't have start and target dates and showAllBlocks is false
        if (!showAllBlocks && !(block.start_date && block.target_date)) return;

@ -101,13 +91,20 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
        return (
          <div
            key={`block-${block.id}`}
-            className={cn("relative h-11", {
+            className="absolute w-full"
+            style={{
+              height: "44px",
+              top: `${index * 44}px`,
+            }}
+            onMouseEnter={() => updateActiveBlock(block)}
+            onMouseLeave={() => updateActiveBlock(null)}
+          >
+            <div
+              className={cn("relative h-full w-full", {
                "rounded bg-custom-background-80": activeBlock?.id === block.id,
                "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
                  peekIssue?.issueId === block.data.id,
              })}
-            onMouseEnter={() => updateActiveBlock(block)}
-            onMouseLeave={() => updateActiveBlock(null)}
            >
              {isBlockVisibleOnChart ? (
                <ChartDraggable
@ -122,6 +119,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
                <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
              )}
            </div>
+          </div>
        );
      })}
    </div>
--- a/web/components/gantt-chart/chart/header.tsx
+++ b/web/components/gantt-chart/chart/header.tsx
@ -3,6 +3,8 @@ import { Expand, Shrink } from "lucide-react";
 import { useChart } from "../hooks";
 // types
 import { IGanttBlock, TGanttViews } from "../types";
+import { IMonthBlock } from "../views";
+import { ScrollSyncPane } from "react-scroll-sync";

 type Props = {
  blocks: IGanttBlock[] | null;
@ -17,9 +19,12 @@ type Props = {
 export const GanttChartHeader: React.FC<Props> = (props) => {
  const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
  // chart hook
-  const { currentView, allViews } = useChart();
+  const { currentView, currentViewData, allViews, renderView } = useChart();
+
+  const monthBlocks: IMonthBlock[] = renderView;

  return (
+    <>
      <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
        <div className="flex items-center gap-2 text-lg font-medium">{title}</div>

@ -60,5 +65,56 @@ export const GanttChartHeader: React.FC<Props> = (props) => {
          {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
        </button>
      </div>
+      <div className="flex w-full">
+        <ScrollSyncPane>
+          <div className="h-full flex flex-grow divide-x divide-custom-border-100/50 overflow-x-auto">
+            {monthBlocks?.map((block, rootIndex) => (
+              <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
+                <div className="h-[60px] w-full">
+                  <div className="relative h-[30px]">
+                    <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
+                      {block?.title}
+                    </div>
+                  </div>
+
+                  <div className="flex h-[30px] w-full">
+                    {block?.children?.map((monthDay, _idx) => (
+                      <div
+                        key={`sub-title-${rootIndex}-${_idx}`}
+                        className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
+                        style={{ width: `${currentViewData?.data.width}px` }}
+                      >
+                        <div className="space-x-1 text-xs">
+                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
+                            {monthDay.day}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* <div className="flex h-full w-full divide-x divide-custom-border-100/50">
+              {block?.children?.map((monthDay, index) => (
+                <div
+                  key={`column-${rootIndex}-${index}`}
+                  className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                  style={{ width: `${currentViewData?.data.width}px` }}
+                >
+                  <div
+                    className={cn("relative flex h-full w-full flex-1 justify-center", {
+                      "bg-custom-background-90": ["sat", "sun"].includes(monthDay?.dayData?.shortTitle),
+                    })}
+                  />
+                </div>
+              ))}
+            </div> */}
+              </div>
+            ))}
+          </div>
+        </ScrollSyncPane>
+      </div>
+    </>
  );
 };
--- a/web/components/gantt-chart/chart/main-content.tsx
+++ b/web/components/gantt-chart/chart/main-content.tsx
@ -3,7 +3,6 @@ import {
  BiWeekChartView,
  DayChartView,
  GanttChartBlocksList,
-  GanttChartSidebar,
  HourChartView,
  IBlockUpdateData,
  IGanttBlock,
@ -16,6 +15,7 @@ import {
 } from "components/gantt-chart";
 // helpers
 import { cn } from "helpers/common.helper";
+import { ScrollSyncPane } from "react-scroll-sync";

 type Props = {
  blocks: IGanttBlock[] | null;
@ -86,25 +86,23 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
    <div
      // DO NOT REMOVE THE ID
      id="gantt-container"
-      className={cn("relative h-full w-full flex flex-1 overflow-hidden border-t border-custom-border-200", {
+      className={cn("relative z-[1] h-full w-full overflow-hidden border-t border-custom-border-200", {
        "mb-8": bottomSpacing,
      })}
    >
-      <GanttChartSidebar
-        blocks={blocks}
-        blockUpdateHandler={blockUpdateHandler}
-        enableReorder={enableReorder}
-        sidebarToRender={sidebarToRender}
-        title={title}
-      />
+      <div className="h-full w-full flex">
+        <ScrollSyncPane>
          <div
            // DO NOT REMOVE THE ID
            id="scroll-container"
-        className="relative h-full w-full flex flex-col flex-1 overflow-hidden overflow-x-auto horizontal-scroll-enable"
-        onScroll={onScroll}
+            className="relative h-full w-full flex flex-1 overflow-hidden overflow-x-auto z-[1]"
+            // onScroll={onScroll}
          >
            <ActiveChartView />
+          </div>
+        </ScrollSyncPane>
        {currentViewData && (
+          // <ScrollSyncPane>
          <GanttChartBlocksList
            itemsContainerWidth={itemsContainerWidth}
            blocks={chartBlocks}
@ -115,6 +113,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
            enableBlockMove={enableBlockMove}
            showAllBlocks={showAllBlocks}
          />
+          // </ScrollSyncPane>
        )}
      </div>
    </div>
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@ -21,6 +21,7 @@ import { cn } from "helpers/common.helper";
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
+import { ScrollSync } from "react-scroll-sync";

 type ChartViewRootProps = {
  border: boolean;
@ -180,6 +181,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
  };

  return (
+    <ScrollSync>
      <div
        className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
          "fixed inset-0 z-[999999] bg-custom-background-100": fullScreenMode,
@ -212,5 +214,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
          updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
        />
      </div>
+    </ScrollSync>
  );
 };
--- a/web/components/gantt-chart/chart/views/month.tsx
+++ b/web/components/gantt-chart/chart/views/month.tsx
@ -1,4 +1,3 @@
-import { FC } from "react";
 // hooks
 import { useChart } from "components/gantt-chart";
 // helpers
@ -6,42 +5,16 @@ import { cn } from "helpers/common.helper";
 // types
 import { IMonthBlock } from "../../views";

-export const MonthChartView: FC<any> = () => {
+export const MonthChartView = () => {
  // chart hook
  const { currentViewData, renderView } = useChart();

  const monthBlocks: IMonthBlock[] = renderView;

  return (
-    <>
-      <div className="absolute h-full flex flex-grow divide-x divide-custom-border-100/50">
+    <div className="relative z-[1] h-full w-full flex flex-grow divide-x divide-custom-border-100/50">
      {monthBlocks?.map((block, rootIndex) => (
        <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
-            <div className="h-[60px] w-full">
-              <div className="relative h-[30px]">
-                <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
-                  {block?.title}
-                </div>
-              </div>
-
-              <div className="flex h-[30px] w-full">
-                {block?.children?.map((monthDay, _idx) => (
-                  <div
-                    key={`sub-title-${rootIndex}-${_idx}`}
-                    className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
-                    style={{ width: `${currentViewData?.data.width}px` }}
-                  >
-                    <div className="space-x-1 text-xs">
-                      <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                      <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
-                        {monthDay.day}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
          <div className="flex h-full w-full divide-x divide-custom-border-100/50">
            {block?.children?.map((monthDay, index) => (
              <div
@ -53,18 +26,15 @@ export const MonthChartView: FC<any> = () => {
                  className={cn("relative flex h-full w-full flex-1 justify-center", {
                    "bg-custom-background-90": ["sat", "sun"].includes(monthDay?.dayData?.shortTitle),
                  })}
-                  >
-                    {/* highlight today */}
-                    {/* {monthDay?.today && (
-                          <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
-                        )} */}
-                  </div>
+                />
+                <span className="absolute left-1/2 -translate-x-1/2 text-xs">
+                  {block.monthData.shortTitle} {monthDay?.dayData?.shortTitle[0]} {monthDay?.day}
+                </span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
-    </>
  );
 };
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@ -240,7 +240,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
        </div>
      )}
      {/* move to right side hidden block button */}
-      {/* {isBlockHiddenOnRight && ( */}
+      {isBlockHiddenOnRight && (
        <div
          className="fixed z-0 right-1 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
          onClick={handleScrollToBlock}
@ -250,7 +250,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
        >
          <ArrowRight className="h-3.5 w-3.5" />
        </div>
-      {/* )} */}
+      )}
      <div
        id={`block-${block.id}`}
        ref={resizableRef}
--- a/web/package.json
+++ b/web/package.json
@ -54,6 +54,7 @@
    "react-hook-form": "^7.38.0",
    "react-markdown": "^8.0.7",
    "react-popper": "^2.3.0",
+    "react-scroll-sync": "^0.11.2",
    "sharp": "^0.32.1",
    "swr": "^2.1.3",
    "tailwind-merge": "^2.0.0",
@ -69,6 +70,7 @@
    "@types/react-color": "^3.0.6",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-dom": "^18.2.17",
+    "@types/react-scroll-sync": "^0.11.2",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
--- a/yarn.lock
+++ b/yarn.lock
@ -2808,6 +2808,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-scroll-sync@^0.11.2":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@types/react-scroll-sync/-/react-scroll-sync-0.9.0.tgz#f9c556cc1441b28344f6b820cac34099cab74f2b"
+  integrity sha512-DFJzqtF0lMUNxsKZ9aoFS+LGieGLXWQVWvCMTZWKm/qcGz+GCNTqwdHsnyWW3yy/aNSUxlXCAWdHaemGaES6lQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.10":
  version "4.4.10"
  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
@ -7231,7 +7238,7 @@ progress@^2.0.0, progress@^2.0.3:
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==

-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -7626,6 +7633,13 @@ react-remove-scroll@2.5.4:
    use-callback-ref "^1.3.0"
    use-sidecar "^1.1.2"

+react-scroll-sync@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.11.2.tgz#fe8a3a09eab5a44323bdf0f63283c1dd0cd99b45"
+  integrity sha512-n7m+bbRTSWuczhKQf6Evvl7PFGkTt4RfP4bhyUtUyv6znovpybhAScQDdrFr9Jh280nG39x9AWMY8j477PHL1A==
+  dependencies:
+    prop-types "^15.5.7"
+
 react-selecto@^1.25.0:
  version "1.26.3"
  resolved "https://registry.yarnpkg.com/react-selecto/-/react-selecto-1.26.3.tgz#f9081c006cee2e2fed85ac1811cfe17136cf81a5"