packages/dbml-vs-code-extension/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to the "dbml-erd-visualizer" extension will be documented in
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [0.6.0]
+
+### Added
+
+- Added support for controlling scroll behavior via the prismaERDPreviewer.scrollDirection setting
+- Added an option to automatically fit the diagram to the viewport dimensions
+
 ## [0.5.0]
 
 ### Added

packages/dbml-vs-code-extension/README.md

@@ -16,6 +16,7 @@ Allow to visualize the database schema in ERD ( Entity Relationship Diagram ) fr
 The following Visual Studio Code settings are available for the extension.
 
 - `dbmlERDPreviewer.preferredTheme`: This configuration define the theme to use. There are two different theme the `light` and `dark`. The default theme is `dark`.
+- `dbmlERDPreviewer.scrollDirection`: This configuration define the scroll direction. There are two different scroll direction the `up-out` and `up-in`. The default scroll direction is `up-out`.
 
 ## Release Notes
 

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

@@ -2,7 +2,7 @@
   "name": "dbml-erd-visualizer",
   "displayName": "DBML Entity-Relationship Diagrams visualizer",
   "description": "A VS Code extension for viewing the ERD (Entity Relationship Diagram) database schema from a dbml file in your VS Code Editor.",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "icon": "assets/logo.png",
   "publisher": "bocovo",
   "engines": {
@@ -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
@@ -73,6 +81,36 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
     stageStateStore.set({ scale: newScale, position: newPos });
   };
 
+  const fitToView = () => {
+    if (stageRef.current != null) {
+      const stage = stageRef.current;
+      const container = stage.container();
+      const containerWidth = container.offsetWidth;
+      const containerHeight = container.offsetHeight;
+
+      const contentBounds = stage.getClientRect({ relativeTo: stage });
+      contentBounds.x = contentBounds.x - DIAGRAM_PADDING;
+      contentBounds.y = contentBounds.y - DIAGRAM_PADDING;
+      contentBounds.width = contentBounds.width + 2 * DIAGRAM_PADDING;
+      contentBounds.height = contentBounds.height + 2 * DIAGRAM_PADDING;
+      const scaleX = containerWidth / contentBounds.width;
+      const scaleY = containerHeight / contentBounds.height;
+      const scale = Math.min(scaleX, scaleY);
+
+      stage.scale({ x: scale, y: scale });
+      stage.position({
+        x:
+          (containerWidth - contentBounds.width * scale) / 2 -
+          contentBounds.x * scale,
+        y:
+          (containerHeight - contentBounds.height * scale) / 2 -
+          contentBounds.y * scale,
+      });
+      stage.batchDraw();
+      stageStateStore.set({ scale, position: stage.position() });
+    }
+  };
+
   return (
     <main
       className={`relative flex flex-col items-center ${theme === Theme.dark ? "dark" : ""}`}
@@ -94,7 +132,7 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
         </Layer>
       </Stage>
 
-      <Toolbar />
+      <Toolbar onFitToView={fitToView} />
     </main>
   );
 };

packages/json-table-schema-visualizer/src/components/Toolbar/FitToView/FitToView.tsx

@@ -0,0 +1,18 @@
+import { ExpandIcon } from "lucide-react";
+
+import ToolbarButton from "../Button";
+
+interface FitToViewButtonProps {
+  onClick: () => void;
+}
+
+const FitToViewButton = ({ onClick } : FitToViewButtonProps) => {
+  return (
+    <ToolbarButton onClick={onClick} title="Fit-to-view">
+      <ExpandIcon />
+      <span className="ml-2">Fit To View</span>
+    </ToolbarButton>
+  );
+};
+
+export default FitToViewButton;

packages/json-table-schema-visualizer/src/components/Toolbar/Toolbar.tsx

@@ -1,17 +1,24 @@
+import PropTypes from "prop-types";
+
 import AutoArrangeTableButton from "./AutoArrage/AutoArrangeTables";
 import ThemeToggler from "./ThemeToggler/ThemeToggler";
 import DetailLevelToggle from "./DetailLevelToggle/DetailLevelToggle";
+import FitToViewButton from "./FitToView/FitToView";
 
-const Toolbar = () => {
+const Toolbar = ({ onFitToView }: { onFitToView: () => void }) => {
   return (
     <div className="flex absolute [&_svg]:w-5 [&_svg]:h-5 px-6 py-1 bottom-14 text-sm bg-gray-100 dark:bg-gray-700 shadow-lg rounded-2xl">
       <AutoArrangeTableButton />
       <DetailLevelToggle />
+      <FitToViewButton onClick={onFitToView} />
       <hr className="w-px h-6 mx-4 my-1 bg-gray-300" />
-
       <ThemeToggler />
     </div>
   );
 };
 
+Toolbar.propTypes = {
+  onFitToView: PropTypes.func.isRequired,
+};
+
 export default Toolbar;

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;
+}

packages/prisma-vs-code-extension/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to the "prisma-erd-visualizer" extension will be documented
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [0.4.0]
+
+### Added
+
+- Added support for controlling scroll behavior via the prismaERDPreviewer.scrollDirection setting
+- Added an option to automatically fit the diagram to the viewport dimensions
+
 ## [0.3.0]
 
 ### Added

packages/prisma-vs-code-extension/README.md

@@ -19,6 +19,7 @@ This [tutorial](https://juste.bocovo.me/visualize-the-entity-relationship-diagra
 The following Visual Studio Code settings are available for the extension.
 
 - `prismaERDPreviewer.preferredTheme`: This configuration define the theme to use. There are two different theme the `light` and `dark`. The default theme is `dark`.
+- `prismaERDPreviewer.scrollDirection`: This configuration define the scroll direction. There are two different scroll direction the `up-out` and `up-in`. The default scroll direction is `up-out`.
 
 ## Release Notes
 

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

@@ -2,7 +2,7 @@
   "name": "prisma-erd-visualizer",
   "displayName": "Prisma Entity-Relationship Diagrams visualizer",
   "description": "A VsCode extension that lets you visualize the ERD (Entity Relationship Diagram) of your prisma database structure.",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "icon": "assets/logo.png",
   "publisher": "bocovo",
   "engines": {
@@ -47,6 +47,18 @@
             "To use dark mode theme colors",
             "To use light mode theme colors"
           ]
+        },
+        "prismaERDPreviewer.scrollDirection": {
+          "type": "string",
+          "default": "up-out",
+          "enum": [
+            "up-out",
+            "up-in"
+          ],
+          "enumDescriptions": [
+            "To zoom out when scrolling up",
+            "To zoom in when scrolling up"
+          ]
         }
       }
     }