| 320 | useEffect(() => { |
| 321 | if (svg && zoomingEnabled && containerRef.current) { |
| 322 | const initializePanZoom = async () => { |
| 323 | const svgElement = containerRef.current?.querySelector("svg"); |
| 324 | if (svgElement) { |
| 325 | // Remove any max-width constraints |
| 326 | svgElement.style.maxWidth = "none"; |
| 327 | svgElement.style.width = "100%"; |
| 328 | svgElement.style.height = "100%"; |
| 329 | |
| 330 | try { |
| 331 | // Dynamically import svg-pan-zoom only when needed in the browser |
| 332 | const svgPanZoom = (await import("svg-pan-zoom")).default; |
| 333 | |
| 334 | svgPanZoom(svgElement, { |
| 335 | zoomEnabled: true, |
| 336 | controlIconsEnabled: true, |
| 337 | fit: true, |
| 338 | center: true, |
| 339 | minZoom: 0.1, |
| 340 | maxZoom: 10, |
| 341 | zoomScaleSensitivity: 0.3, |
| 342 | }); |
| 343 | } catch (error) { |
| 344 | console.error("Failed to load svg-pan-zoom:", error); |
| 345 | } |
| 346 | } |
| 347 | }; |
| 348 | |
| 349 | // Wait for the SVG to be rendered |
| 350 | setTimeout(() => { |