feat(visualizer): Add scroll direction toggle to extension settings

Scroll direction is set in extension settings and added to visualizer via new provider

Author: ColinEge

packages/dbml-vs-code-extension/package.json

@@ -64,6 +64,18 @@
             "To use dark mode theme colors",
             "To use light mode theme colors"
           ]
+        },
+        "dbmlERDPreviewer.scrollDirection": {
+          "type": "string",
+          "default": "up-out",
+          "enum": [
+            "up-out",
+            "up-in"
+          ],
+          "enumDescriptions": [
+            "To zoom out when scrolling up",
+            "To zoom in when scrolling up"
+          ]
         }
       }
     }

packages/extension-shared/extension/helper/extensionConfigs.ts

@@ -1,4 +1,5 @@
 import { Theme } from "json-table-schema-visualizer/src/types/theme";
+import { ScrollDirection } from "json-table-schema-visualizer/src/types/scrollDirection";
 import { workspace, type WorkspaceConfiguration } from "vscode";
 
 import { ConfigKeys } from "../types/configKeys";
@@ -29,9 +30,19 @@ export class ExtensionConfig {
     return Theme.dark;
   }
 
+  getScrollDirection(): ScrollDirection {
+    const scrollDirection = this.config.get(ConfigKeys.scrollDirection);
+    if (ScrollDirection.UpIn === scrollDirection) {
+      return scrollDirection;
+    }
+
+    return ScrollDirection.UpOut;
+  }
+
   getDefaultPageConfig(): DefaultPageConfig {
     const theme = this.getPreferredTheme();
+    const scrollDirection = this.getScrollDirection();
 
-    return { theme };
+    return { theme, scrollDirection };
   }
 }

packages/extension-shared/extension/types/configKeys.ts

@@ -1,3 +1,4 @@
 export enum ConfigKeys {
   preferredTheme = "preferredTheme",
+  scrollDirection = "scrollDirection",
 }

packages/extension-shared/extension/types/defaultPageConfig.ts

@@ -1,5 +1,7 @@
+import { type ScrollDirection } from "json-table-schema-visualizer/src/types/scrollDirection";
 import { type Theme } from "json-table-schema-visualizer/src/types/theme";
 
 export interface DefaultPageConfig {
   theme: Theme;
+  scrollDirection: ScrollDirection;
 }

packages/extension-shared/src/App.tsx

@@ -3,6 +3,7 @@ import { useCreateTheme } from "json-table-schema-visualizer/src/hooks/theme";
 import ThemeProvider from "json-table-schema-visualizer/src/providers/ThemeProvider";
 import NoSchemaMessage from "json-table-schema-visualizer/src/components/Messages/NoSchemaMessage";
 import { type Theme } from "json-table-schema-visualizer/src/types/theme";
+import ScrollDirectionProvider from "json-table-schema-visualizer/src/providers/ScrollDirectionProvider";
 
 import {
   WebviewCommand,
@@ -44,7 +45,11 @@ const App = () => {
       setTheme={saveThemePreference}
       themeColors={themeColors}
     >
-      <DiagramViewer key={key} {...schema} />
+      <ScrollDirectionProvider
+        scrollDirection={window.EXTENSION_DEFAULT_CONFIG?.scrollDirection}
+      >
+        <DiagramViewer key={key} {...schema} />
+      </ScrollDirectionProvider>
     </ThemeProvider>
   );
 };

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx

@@ -13,6 +13,8 @@ import { useThemeColors, useThemeContext } from "@/hooks/theme";
 import { Theme } from "@/types/theme";
 import { useStageStartingState } from "@/hooks/stage";
 import { stageStateStore } from "@/stores/stagesState";
+import { useScrollDirectionContext } from "@/hooks/scrollDirection";
+import { ScrollDirection } from "@/types/scrollDirection";
 
 interface DiagramWrapperProps {
   children: ReactNode;
@@ -22,6 +24,7 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const scaleBy = 1.02;
   const { height: windowHeight, width: windowWidth } = useWindowSize();
   const { theme } = useThemeContext();
+  const { scrollDirection } = useScrollDirectionContext();
   const { onChange: onGrabbing, onRestore: onGrabRelease } =
     useCursorChanger("grabbing");
   const themeColors = useThemeColors();
@@ -53,7 +56,12 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
     };
 
     // how to scale? Zoom in? Or zoom out?
-    let direction = e.evt.deltaY > 0 ? 1 : -1;
+    let direction = 0;
+    if (scrollDirection === ScrollDirection.UpOut) {
+      direction = e.evt.deltaY > 0 ? 1 : -1;
+    } else if (scrollDirection === ScrollDirection.UpIn) {
+      direction = e.evt.deltaY > 0 ? -1 : 1;
+    }
 
     // when we zoom on trackpad, e.evt.ctrlKey is true
     // in that case lets revert direction

packages/json-table-schema-visualizer/src/hooks/scrollDirection.ts

@@ -0,0 +1,24 @@
+import { useContext } from "react";
+
+import {
+  type ScrollDirection,
+  type ScrollDirectionProviderValue,
+} from "@/types/scrollDirection";
+import { ScrollDirectionContext } from "@/providers/ScrollDirectionProvider";
+
+export const useScrollDirectionContext = (): ScrollDirectionProviderValue => {
+  const contextValue = useContext(ScrollDirectionContext);
+  if (contextValue === undefined) {
+    throw new Error(
+      "it seem you forgot to wrap your app with ScrollDirectionProvider",
+    );
+  }
+
+  return contextValue;
+};
+
+export const useScrollDirection = (): ScrollDirection => {
+  const contextValue = useScrollDirectionContext();
+
+  return contextValue.scrollDirection;
+};

packages/json-table-schema-visualizer/src/providers/ScrollDirectionProvider.tsx

@@ -0,0 +1,28 @@
+import { createContext, type PropsWithChildren } from "react";
+
+import {
+  ScrollDirection,
+  type ScrollDirectionProviderValue,
+} from "@/types/scrollDirection";
+
+export const ScrollDirectionContext =
+  createContext<ScrollDirectionProviderValue>({
+    scrollDirection: ScrollDirection.UpOut,
+  });
+
+interface ScrollDirectionProviderProps extends PropsWithChildren {
+  scrollDirection: ScrollDirection;
+}
+
+const ScrollDirectionProvider = ({
+  scrollDirection,
+  children,
+}: ScrollDirectionProviderProps) => {
+  return (
+    <ScrollDirectionContext.Provider value={{ scrollDirection }}>
+      {children}
+    </ScrollDirectionContext.Provider>
+  );
+};
+
+export default ScrollDirectionProvider;

packages/json-table-schema-visualizer/src/types/scrollDirection.ts

@@ -0,0 +1,8 @@
+export enum ScrollDirection {
+  UpIn = "up-in",
+  UpOut = "up-out",
+}
+
+export interface ScrollDirectionProviderValue {
+  scrollDirection: ScrollDirection;
+}