feat: allow scrollbar being invisible (#146)

Author: JYC-99

.github/workflows/main.yml

@@ -15,8 +15,8 @@ jobs:
     strategy:
       matrix:
         node_version:
-          - 14.x
-          - 16.x
+          - 18.x
+          - 20.x
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

.github/workflows/npm-publish.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node_version:
-          - 16.x
+          - 18.x
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2

packages/react-dag-editor/package.json

@@ -4,7 +4,7 @@
   "repository": {
     "url": "https://github.com/microsoft/react-dag-editor.git"
   },
-  "version": "0.4.3",
+  "version": "0.4.4",
   "dependencies": {
     "@fluentui/merge-styles": "^8.2.0",
     "eventemitter3": "^4.0.7",

packages/react-dag-editor/src/lib/Features.ts

@@ -22,6 +22,7 @@ export enum GraphFeatures {
   CtrlKeyZoom = "ctrlKeyZoom",
   LimitBoundary = "limitBoundary",
   EditEdge = "editEdge",
+  InvisibleScrollbar = "InvisibleScrollbar",
 }
 
 export const allFeatures = new Set([

packages/react-dag-editor/src/lib/components/Graph/Graph.tsx

@@ -122,8 +122,8 @@ export function Graph<
     isHorizontalScrollDisabled,
     isA11yEnable,
     isCtrlKeyZoomEnable,
-    isLimitBoundary,
     isVirtualizationEnabled,
+    isScrollbarVisible,
   } = featureControl;
 
   useSelectBox(dispatch, state.selectBoxPosition);
@@ -361,27 +361,23 @@ export function Graph<
           />
         )}
       </svg>
-      {(!isVerticalScrollDisabled ||
-        !isHorizontalScrollDisabled ||
-        !isPanDisabled) &&
-        isLimitBoundary &&
-        isViewportComplete(state.viewport) && (
-          <Scrollbar
-            viewport={state.viewport}
-            offsetLimit={getOffsetLimit({
-              data,
-              graphConfig,
-              rect: state.viewport.rect,
-              transformMatrix: viewport.transformMatrix,
-              canvasBoundaryPadding: state.settings.canvasBoundaryPadding,
-              groupPadding: data.groups[0]?.padding,
-            })}
-            dispatch={dispatch}
-            horizontal={!isHorizontalScrollDisabled}
-            vertical={!isVerticalScrollDisabled}
-            eventChannel={eventChannel}
-          />
-        )}
+      {isScrollbarVisible && isViewportComplete(state.viewport) && (
+        <Scrollbar
+          viewport={state.viewport}
+          offsetLimit={getOffsetLimit({
+            data,
+            graphConfig,
+            rect: state.viewport.rect,
+            transformMatrix: viewport.transformMatrix,
+            canvasBoundaryPadding: state.settings.canvasBoundaryPadding,
+            groupPadding: data.groups[0]?.padding,
+          })}
+          dispatch={dispatch}
+          horizontal={!isHorizontalScrollDisabled}
+          vertical={!isVerticalScrollDisabled}
+          eventChannel={eventChannel}
+        />
+      )}
       <GraphContextMenu
         state={state}
         onClick={onContextMenuClick}

packages/react-dag-editor/src/lib/hooks/useFeatureControl.ts

@@ -34,6 +34,12 @@ export const useFeatureControl = (features: ReadonlySet<GraphFeatures>) => {
       !features.has(GraphFeatures.AddNewNodes) ||
       !features.has(GraphFeatures.AddNewEdges);
     const isUndoEnabled = features.has(GraphFeatures.UndoStack);
+    const isScrollbarVisible =
+      (!isVerticalScrollDisabled ||
+        !isHorizontalScrollDisabled ||
+        !isPanDisabled) &&
+      isLimitBoundary &&
+      !features.has(GraphFeatures.InvisibleScrollbar);
 
     return {
       isNodesDraggable,
@@ -58,6 +64,7 @@ export const useFeatureControl = (features: ReadonlySet<GraphFeatures>) => {
       isDeleteDisabled,
       isPasteDisabled,
       isUndoEnabled,
+      isScrollbarVisible,
     };
   }, [features]);
 };