feat(visualizer): add export to png

Author: BOCOVO

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

@@ -208,6 +208,45 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
     };
   }, []);
 
+  const onDownload = () => {
+    if (stageRef.current == null) return;
+    const stage = stageRef.current;
+
+    // Save current stage state
+    const originalScale = stage.scaleX();
+    const originalPosition = { ...stage.position() };
+
+    // Reset stage to scale 1 and position 0,0 to get actual content bounds
+    stage.scale({ x: 1, y: 1 });
+    stage.position({ x: 0, y: 0 });
+
+    const contentBounds = stage.getClientRect({ relativeTo: stage });
+
+    // Calculate square dimensions (use the larger dimension)
+    const maxDimension = Math.max(contentBounds.width, contentBounds.height);
+
+    // Center the content in the square
+    const offsetX = (maxDimension - contentBounds.width) / 2;
+    const offsetY = (maxDimension - contentBounds.height) / 2;
+
+    const data = stage.toDataURL({
+      x: contentBounds.x - offsetX,
+      y: contentBounds.y - offsetY,
+      width: maxDimension,
+      height: maxDimension,
+      pixelRatio: 2,
+    });
+
+    // Restore original stage state
+    stage.scale({ x: originalScale, y: originalScale });
+    stage.position(originalPosition);
+
+    const link = document.createElement("a");
+    link.href = data;
+    link.download = `diagram-${Date.now()}.png`;
+    link.click();
+  };
+
   return (
     <>
       <Stage
@@ -229,7 +268,7 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
         </Layer>
       </Stage>
 
-      <Toolbar onFitToView={fitToView} />
+      <Toolbar onFitToView={fitToView} onDownload={onDownload} />
     </>
   );
 };

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

@@ -0,0 +1,17 @@
+import { DownloadIcon } from "lucide-react";
+
+import ToolbarButton from "../Button";
+
+interface ExportButtonProps {
+  onDownload: () => void;
+}
+
+const ExportButton = ({ onDownload }: ExportButtonProps) => {
+  return (
+    <ToolbarButton onClick={onDownload} title="Export">
+      <DownloadIcon />
+    </ToolbarButton>
+  );
+};
+
+export default ExportButton;

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

@@ -4,14 +4,23 @@ import AutoArrangeTableButton from "./AutoArrage/AutoArrangeTables";
 import ThemeToggler from "./ThemeToggler/ThemeToggler";
 import DetailLevelToggle from "./DetailLevelToggle/DetailLevelToggle";
 import FitToViewButton from "./FitToView/FitToView";
+import ExportButton from "./Export/Export";
 
-const Toolbar = ({ onFitToView }: { onFitToView: () => void }) => {
+const Toolbar = ({
+  onFitToView,
+  onDownload,
+}: {
+  onFitToView: () => void;
+  onDownload: () => 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" />
+      <hr className="mx-4 my-1 w-px h-6 bg-gray-300" />
+      <ExportButton onDownload={onDownload} />
+      <hr className="mx-4 my-1 w-px h-6 bg-gray-300" />
       <ThemeToggler />
     </div>
   );