Add "Fit To View" Toolbar button to quick fit all table into view.

Author: togo01

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

@@ -73,6 +73,40 @@ 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() });
+    }
+  };
+
+  useEffect(() => {
+    fitToView();
+  }, [windowWidth, windowHeight]);
+
   return (
     <main
       className={`relative flex flex-col items-center ${theme === Theme.dark ? "dark" : ""}`}
@@ -94,7 +128,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,22 @@
+import { ExpandIcon } from "lucide-react";
+import PropTypes from "prop-types";
+
+import ToolbarButton from "../Button";
+
+interface FitToViewButtonProps {
+  onClick: () => void;
+}
+
+const FitToViewButton: React.FC<FitToViewButtonProps> = ({ onClick }) => {
+  return (
+    <ToolbarButton onClick={onClick} title="Fit-to-view">
+      <ExpandIcon />
+      <span className="ml-2">Fit To View</span>
+    </ToolbarButton>
+  );
+};
+FitToViewButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+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;