fix: png export with margins and adjust used packages

Author: Auto Version Bump

library/lib/apollon-editor.tsx

@@ -203,12 +203,13 @@ export class ApollonEditor {
     }
 
     const bounds = getDiagramBounds(reactFlowInstance)
-    const margin = 10
+
+    const margin = 20
     const clip = {
       x: bounds.x - margin,
       y: bounds.y - margin,
-      width: bounds.width + 2 * margin,
-      height: bounds.height + 2 * margin,
+      width: bounds.width + margin * 2,
+      height: bounds.height + margin * 2,
     }
 
     const svgString = getSVG(container, clip)

library/lib/utils/exportUtils.ts

@@ -1,20 +1,11 @@
 import { IPoint } from "@/edges/types"
 import { ReactFlowInstance, type Node, type Edge, Rect } from "@xyflow/react"
 
-export const getSVG = (container: HTMLElement, bounds: Rect): string => {
+export const getSVG = (container: HTMLElement, clip: Rect): string => {
   const emptySVG = "<svg></svg>"
 
-  const margin = 10
-  const clip = {
-    x: bounds.x - margin,
-    y: bounds.y - margin,
-    width: bounds.width + 2 * margin,
-    height: bounds.height + 2 * margin,
-  }
-
-  const padding = 50
-  const width = bounds.width + 2 * padding
-  const height = bounds.height + 2 * padding
+  const width = clip.width
+  const height = clip.height
 
   const vp = container.querySelector(".react-flow__viewport")
 
@@ -23,10 +14,7 @@ export const getSVG = (container: HTMLElement, bounds: Rect): string => {
   const SVG_NS = "http://www.w3.org/2000/svg"
   const mainSVG = document.createElementNS(SVG_NS, "svg")
   mainSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-  mainSVG.setAttribute(
-    "viewBox",
-    `${clip.x} ${clip.y} ${clip.width} ${clip.height}`
-  )
+  mainSVG.setAttribute("viewBox", `${clip.x} ${clip.y} ${width} ${height}`)
   mainSVG.setAttribute("width", `${width}`)
   mainSVG.setAttribute("height", `${height}`)
 

library/package.json

@@ -21,15 +21,15 @@
     "lint:fix": "eslint --fix ."
   },
   "dependencies": {
-    "@mui/icons-material": "6.3.1",
-    "@mui/material": "6.3.1",
+    "@mui/icons-material": "6.4.2",
+    "@mui/material": "6.4.2",
     "@types/node": "22.13.8",
     "@xyflow/react": "12.3.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uuid": "11.0.3",
-    "y-websocket": "2.1.0",
-    "zustand": "5.0.3"
+    "zustand": "5.0.3",
+    "yjs": "13.6.20"
   },
   "devDependencies": {
     "@eslint/js": "9.17.0",