ok-canvas-export 1.0.5 → 1.1.0

package/README.md

@@ -1,32 +1,54 @@
-# OK-CANVAS-EXPORT LIBRARY
+# OK-CANVAS-EXPORT
 
-[![npm version](https://img.shields.io/npm/v/ok-canvas-export.svg)](https://www.npmjs.com/package/ok-canvas-export)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+Export complete SVG diagrams and canvases as high-quality PNG or SVG files, including content outside the visible viewport.
 
-Export SVG diagrams and canvases as high-quality images with full render pass support.
+[![npm version](https://badge.fury.io/js/ok-canvas-export.svg)](https://www.npmjs.com/package/ok-canvas-export)
 
 ## Features
 
-- Supports PNG and SVG export formats
-- High-quality rendering with adjustable scale
+- Export diagrams as PNG or SVG
+- Export complete SVG content, even when parts are outside the visible viewport
+- High-quality PNG rendering with configurable scale
+- Configurable export margin
+- Custom background colors
+- Transparent background support
+- Automatic CSS custom property resolution
 - TypeScript support
-- Zero dependencies (except React)
+- React hook for simple integration
+- Works with Vite, Next.js, Create React App, react-scripts, Bun, npm, pnpm and Yarn
+- Zero runtime dependencies except React
 
 ## Installation
 
+### Bun
 ```bash
 bun add ok-canvas-export
 ```
 
+### npm
+```bash
+npm install ok-canvas-export
+```
+
+### pnpm
+```bash
+pnpm add ok-canvas-export
+```
+
+### Yarn
+```bash
+yarn add ok-canvas-export
+```
+
 ## Quick Start
 
-```typescript
-import { useDiagramExport } from 'ok-canvas-export';
+```tsx
 import { useRef } from 'react';
+import { useDiagramExport } from 'ok-canvas-export';
 
 const MyDiagram = () => {
   const svgRef = useRef<SVGSVGElement>(null);
-  
+
   const {
     exportDiagram,
     isExporting,
@@ -41,7 +63,7 @@ const MyDiagram = () => {
   const handleExport = async () => {
     await exportDiagram({
       format: 'png',
-      background: 'white',
+      background: '#ffffff',
       scale: 2,
       margin: 100,
       onProgress: (status) => {
@@ -55,7 +77,11 @@ const MyDiagram = () => {
       <svg ref={svgRef}>
         {/* Your diagram content */}
       </svg>
-      <button onClick={handleExport} disabled={isExporting}>
+
+      <button
+        onClick={handleExport}
+        disabled={isExporting}
+      >
         Export Diagram
       </button>
     </>
@@ -63,51 +89,208 @@ const MyDiagram = () => {
 };
 ```
 
+## Background Colors
+
+The background option supports:
+
+- `white`
+- `transparent`
+- Any valid CSS color string
+
+### Examples
+```ts
+background: '#C300FF'
+background: '#1a1a1a'
+background: 'rgb(30, 30, 30)'
+background: 'hsl(260, 80%, 50%)'
+background: 'rgba(0, 0, 0, 0.8)'
+background: 'transparent'
+```
+
 ## API
 
 ### `useDiagramExport`
 
-Hook that provides diagram export functionality.
+React hook that provides complete diagram export functionality.
+
+#### Parameters
 
-**Parameters:**
-- `svgRef`: React ref to the SVG element
-- `diagramData`: Object containing tables and relationships
-- `getTableHeight`: Function that returns table height based on fields
-- `projectName`: Optional project name for filename
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `svgRef` | `React.RefObject<SVGSVGElement>` | Yes | Reference to the SVG element that should be exported |
+| `diagramData` | `DiagramData` | No | Optional diagram data used by the compatibility APIs |
+| `getTableHeight` | `GetTableHeight` | No | Function that returns the height of a table |
+| `projectName` | `string` | No | Project name used when generating the exported filename |
 
-**Returns:**
-- `isExporting`: Boolean indicating if export is in progress
-- `exportDiagram`: Function to trigger export
-- `exportAllTables`: Boolean flag for full render mode
-- `setExportAllTables`: Function to toggle full render mode
+#### Returns
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isExporting` | `boolean` | Boolean indicating whether an export is currently running |
+| `exportDiagram` | `Function` | Function used to start an export |
+| `exportAllTables` | `boolean` | Boolean indicating whether full rendering mode is enabled |
+| `setExportAllTables` | `Function` | Function used to enable or disable full rendering mode |
 
 ### `exportDiagram`
 
-Core export function.
+The core export function.
+
+#### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `format` | `'png' \| 'svg'` | `'png'` | Defines the output format |
+| `background` | `string` | `'white'` | Defines the background color. Supports: `white`, `transparent`, or any valid CSS color |
+| `scale` | `number` | `2` | Controls PNG rendering resolution |
+| `margin` | `number` | `100` | Defines the space around the exported content |
+| `fileName` | `string` | Auto-generated | Allows specifying a custom filename |
+| `onProgress` | `Function` | - | Function called whenever the export process changes state |
+
+## PNG Export
 
-**Options:**
-- `format`: `'png'` | `'svg'` (default: `'png'`)
-- `background`: `'white'` | `'transparent'` (default: `'white'`)
-- `scale`: Number for quality scaling (default: `2`)
-- `margin`: Number for padding around content (default: `100`)
-- `fileName`: Custom filename override
-- `onProgress`: Callback for export status updates
+PNG files are rendered through a canvas.
+
+### Example
+```ts
+await exportDiagram({
+  format: 'png',
+  background: '#ffffff',
+  scale: 3,
+});
+```
+
+Higher scale values generally produce larger and higher-resolution PNG files.
+
+## SVG Export
+
+SVG exports preserve the SVG structure and use the calculated graphical bounds.
+
+### Example
+```ts
+await exportDiagram({
+  format: 'svg',
+  background: 'transparent',
+});
+```
 
 ## How It Works
 
-1. Activates full render mode to bypass viewport culling
-2. Prepares clean SVG clone with proper dimensions
-3. Serializes SVG with CSS variables resolved
-4. Renders to high-quality canvas with proper scaling
-5. Downloads as PNG or SVG file
+The export process is designed to work with diagrams that use viewport culling or virtualization.
 
-## Configuration
+1. Enables full render mode
+2. Waits for the complete diagram to render
+3. Calculates the real graphical bounds of the SVG
+4. Creates an independent SVG clone
+5. Removes artificial canvas backgrounds
+6. Applies the requested background
+7. Creates a viewBox covering the complete diagram
+8. Resolves CSS custom properties
+9. Serializes the SVG
+10. Converts the SVG to a high-quality PNG when requested
+11. Downloads the generated file
+12. Restores the original rendering state
 
-The library expects tables to have:
-- `id`: `string`
-- `x`: `number`
-- `y`: `number`
-- `fields`: `array`
+The exporter does not depend on the visible SVG viewport or scroll container to determine the diagram size.
+
+## Viewport Culling
+
+The library is especially useful for diagram editors that only render elements currently visible in the viewport.
+
+### Example
+```tsx
+{tables.map((table) => {
+  if (!exportAllTables && !isVisible(table)) {
+    return null;
+  }
+
+  return <Table key={table.id} {...table} />;
+})}
+```
+
+During export, `exportAllTables` can be used to render the complete diagram before the SVG bounds are calculated.
+
+## TypeScript
+
+The package includes TypeScript declarations.
+
+### Example
+```ts
+import {
+  useDiagramExport,
+  exportDiagram,
+  calculateSvgDimensions,
+} from 'ok-canvas-export';
+```
+
+## Low-Level API
+
+The package also exposes lower-level utilities.
+
+| Function | Description |
+|----------|-------------|
+| `calculateDimensions` | Calculates dimensions from diagram data |
+| `calculateSvgDimensions` | Calculates the real graphical bounds of an SVG |
+| `getSvgContentBounds` | Returns the graphical bounds of an SVG |
+| `getScrollDimensions` | Returns dimensions based on the SVG and its scroll container |
+| `renderHighQuality` | Renders an SVG image into a high-resolution canvas |
+| `serializeSvg` | Serializes an SVG element into SVG markup while resolving CSS custom properties |
+| `prepareSvgForExport` | Creates a clean SVG clone configured for export |
+| `canvasToBlob` | Converts a canvas into a Blob |
+| `downloadBlob` | Downloads a Blob using a generated or custom filename |
+| `generateFileName` | Generates a filename for exported files |
+
+## Diagram Data
+
+The original diagram-data compatibility API expects tables with the following structure:
+
+```ts
+interface DiagramData {
+  tables: Array<{
+    id: string;
+    x: number;
+    y: number;
+    fields: any[];
+  }>;
+  relationships: any[];
+}
+```
+
+The `diagramData` and `getTableHeight` parameters are optional when using the exporter as a generic SVG exporter.
+
+## Browser Support
+
+The library relies on browser APIs including:
+
+- SVG
+- `SVGElement.getBBox()`
+- Canvas
+- Blob
+- `URL.createObjectURL()`
+- Image
+
+The library is intended to run in browser environments.
+
+## Framework Compatibility
+
+The package is designed to work with standard React applications and common React build environments.
+
+Supported environments include:
+
+- Vite
+- Next.js
+- Create React App
+- react-scripts
+- Bun
+- npm
+- pnpm
+- Yarn
+
+The package provides both ESM and CommonJS builds to support modern bundlers as well as environments such as Create React App and react-scripts.
+
+## Requirements
+
+- React >= 18
+- Browser environment for performing exports
 
 ## License
 
@@ -115,4 +298,6 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions, bug reports and pull requests are welcome.
+
+If you find a problem or have an idea for improving the exporter, feel free to open an issue or submit a Pull Request.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+var T=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var X=(r,o)=>{for(var t in o)T(r,t,{get:o[t],enumerable:!0})},Q=(r,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of j(o))!W.call(r,i)&&i!==t&&T(r,i,{get:()=>o[i],enumerable:!(e=$(o,i))||e.enumerable});return r};var Y=r=>Q(T({},"__esModule",{value:!0}),r);var q={};X(q,{calculateDimensions:()=>L,calculateSvgDimensions:()=>w,canvasToBlob:()=>A,createSvgUrl:()=>v,default:()=>B,downloadBlob:()=>h,exportDiagram:()=>N,generateFileName:()=>x,getScrollDimensions:()=>R,getSvgContentBounds:()=>M,prepareSvgForExport:()=>D,renderHighQuality:()=>S,serializeSvg:()=>E,useDiagramExport:()=>B});module.exports=Y(q);var b=require("react");var L=(r,o,t=100)=>{if(!r?.tables?.length)return{width:100+t*2,height:100+t*2,x:-t,y:-t};let e=Math.min(...r.tables.map(n=>n.x)),i=Math.min(...r.tables.map(n=>n.y)),s=Math.max(...r.tables.map(n=>n.x+280+40)),l=Math.max(...r.tables.map(n=>n.y+o(n.fields)+40));return{x:e-t,y:i-t,width:Math.max(100,s-e+t*2),height:Math.max(100,l-i+t*2)}},M=r=>{let o=Array.from(r.querySelectorAll("g, path, rect, circle, ellipse, line, polyline, polygon, text, use, image")),t=1/0,e=1/0,i=-1/0,s=-1/0,l=(n,m,a,c)=>{!Number.isFinite(n)||!Number.isFinite(m)||!Number.isFinite(a)||!Number.isFinite(c)||a<0||c<0||(t=Math.min(t,n),e=Math.min(e,m),i=Math.max(i,n+a),s=Math.max(s,m+c))};for(let n of o)if(!(n.matches('[data-export-bg="canvas"]')||n.closest('[data-export-bg="canvas"]')))try{let m=n.getBBox();l(m.x,m.y,m.width,m.height)}catch{}return!Number.isFinite(t)||!Number.isFinite(e)||!Number.isFinite(i)||!Number.isFinite(s)?null:{x:t,y:e,width:Math.max(1,i-t),height:Math.max(1,s-e)}},w=(r,o=100)=>{let t=M(r);if(t)return{x:t.x-o,y:t.y-o,width:t.width+o*2,height:t.height+o*2};let e=r.viewBox?.baseVal;if(e&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0)return{x:e.x-o,y:e.y-o,width:e.width+o*2,height:e.height+o*2};let i=Number(r.getAttribute("width"))||r.clientWidth||1,s=Number(r.getAttribute("height"))||r.clientHeight||1;return{x:-o,y:-o,width:i+o*2,height:s+o*2}},R=r=>{let o=r.parentElement||r.closest(".overflow-auto")||r.closest(".overflow-scroll"),t=Number(r.getAttribute("width"))||r.clientWidth||1,e=Number(r.getAttribute("height"))||r.clientHeight||1;return o&&(t=Math.max(t,o.scrollWidth),e=Math.max(e,o.scrollHeight)),{x:0,y:0,width:t,height:e}};var S=async(r,o,t,e=2,i="transparent")=>{let l=Math.max(1,o),n=Math.max(1,t),m=Math.max(.1,e),a=Math.min(m,16384/Math.max(l,n,1)),c=document.createElement("canvas");c.width=Math.max(1,Math.floor(l*a)),c.height=Math.max(1,Math.floor(n*a));let p=c.getContext("2d",{alpha:!0});if(!p)throw new Error("Unable to create 2D canvas context");return p.imageSmoothingEnabled=!0,p.imageSmoothingQuality="high",i!=="transparent"?(p.fillStyle=i,p.fillRect(0,0,c.width,c.height)):p.clearRect(0,0,c.width,c.height),p.drawImage(r,0,0,l*a,n*a),c};var E=r=>{let o=new XMLSerializer,t=typeof document<"u"?getComputedStyle(document.documentElement):null,e=o.serializeToString(r);return t&&(e=e.replace(/var\(--([^)]+)\)/g,(i,s)=>t.getPropertyValue(`--${s}`)?.trim()||`var(--${s})`)),e.includes('xmlns="http://www.w3.org/2000/svg"')||(e=e.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),e},v=r=>URL.createObjectURL(new Blob([r],{type:"image/svg+xml;charset=utf-8"})),D=(r,o,t,e="transparent",i=0,s=0,l=0)=>{let n=r.cloneNode(!0);if(n.querySelectorAll('[data-export-bg="canvas"]').forEach(a=>{a.remove()}),n.setAttribute("width",String(o)),n.setAttribute("height",String(t)),n.setAttribute("viewBox",`${s} ${l} ${o} ${t}`),n.setAttribute("preserveAspectRatio","xMinYMin meet"),e!=="transparent"){let a=document.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("x",String(s)),a.setAttribute("y",String(l)),a.setAttribute("width",String(o)),a.setAttribute("height",String(t)),a.setAttribute("fill",e),n.insertBefore(a,n.firstChild)}return n};var h=(r,o)=>{let t=URL.createObjectURL(r),e=document.createElement("a");e.href=t,e.download=o;try{document.body?.appendChild(e),e.click(),document.body?.removeChild(e)}catch{e.click()}setTimeout(()=>{URL.revokeObjectURL(t)},100)},x=(r,o)=>`${(r||"diagram").replace(/\s+/g,"_").toLowerCase().replace(/[^a-z0-9_-]/g,"")}.${o}`,A=r=>new Promise((o,t)=>{try{if(typeof r.toBlob!="function"){t(new Error("Canvas.toBlob is not supported"));return}r.toBlob(e=>{if(!e){t(new Error("Failed to create PNG blob"));return}o(e)},"image/png")}catch(e){t(e)}});var N=async(r,o={})=>{let{svgRef:t,diagramData:e,getTableHeight:i,projectName:s,setExportAllTables:l,showToast:n}=r,{format:m="png",background:a="white",scale:c=2,margin:p=100,fileName:V,onProgress:u}=o;if(!t.current){u?.({type:"error",message:"SVG reference not available"});return}let f=null;try{u?.({type:"preparing"}),n?.("Preparing export...","info"),l?.(!0),await new Promise(g=>{setTimeout(g,300)}),u?.({type:"rendering"});let d=t.current,P=w(d,p),{x:I,y:U,width:F,height:H}=P,_=D(d,F,H,a,p,I,U);u?.({type:"serializing"});let C=E(_);if(m==="svg"){let g=new Blob([C],{type:"image/svg+xml;charset=utf-8"}),G=V||x(s,"svg");h(g,G),u?.({type:"complete"}),n?.("Export completed successfully","success");return}let y=new Image;f=v(C),await new Promise((g,G)=>{y.onload=()=>{g()},y.onerror=()=>{G(new Error("Failed to load SVG image"))},y.src=f});let O=await S(y,F,H,c,a);u?.({type:"downloading"});let k=await A(O),z=V||x(s,"png");h(k,z),u?.({type:"complete"}),n?.("Export completed successfully","success")}catch(d){console.error("Export error:",d),u?.({type:"error",message:"Export failed"}),n?.("Failed to export file","error")}finally{l?.(!1),f&&URL.revokeObjectURL(f)}};var B=({svgRef:r,diagramData:o,getTableHeight:t,projectName:e})=>{let[i,s]=(0,b.useState)(!1),[l,n]=(0,b.useState)(!1),m=(0,b.useCallback)(async(a={})=>{s(!0);try{await N({svgRef:r,diagramData:o,getTableHeight:t,projectName:e,setExportAllTables:n},a)}finally{s(!1),n(!1)}},[r,o,t,e]);return{isExporting:i,exportDiagram:m,exportAllTables:l,setExportAllTables:n}};0&&(module.exports={calculateDimensions,calculateSvgDimensions,canvasToBlob,createSvgUrl,downloadBlob,exportDiagram,generateFileName,getScrollDimensions,getSvgContentBounds,prepareSvgForExport,renderHighQuality,serializeSvg,useDiagramExport});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useDiagramExport.ts","../src/calculateDimensions.ts","../src/renderHighQuality.ts","../src/utils/serializer.ts","../src/utils/download.ts","../src/exportDiagram.ts"],"sourcesContent":["export {\n  useDiagramExport,\n} from './useDiagramExport';\n\nexport {\n  exportDiagram,\n} from './exportDiagram';\n\nexport {\n  calculateDimensions,\n  calculateSvgDimensions,\n  getSvgContentBounds,\n  getScrollDimensions,\n} from './calculateDimensions';\n\nexport {\n  renderHighQuality,\n} from './renderHighQuality';\n\nexport {\n  serializeSvg,\n  createSvgUrl,\n  prepareSvgForExport,\n} from './utils/serializer';\n\nexport {\n  downloadBlob,\n  generateFileName,\n  canvasToBlob,\n} from './utils/download';\n\nexport type {\n  ExportOptions,\n  ExportStatus,\n  ExportContext,\n  DiagramData,\n  GetTableHeight,\n} from './types';\n\nexport {\n  useDiagramExport as default,\n} from './useDiagramExport';","import {\n  useState,\n  useCallback,\n} from 'react';\n\nimport type {\n  ExportOptions,\n  ExportContext,\n  DiagramData,\n  GetTableHeight,\n} from './types';\n\nimport {\n  exportDiagram,\n} from './exportDiagram';\n\nexport interface UseDiagramExportParams {\n  svgRef:\n    React.RefObject<SVGSVGElement>;\n\n  diagramData?:\n    | DiagramData\n    | null;\n\n  getTableHeight?:\n    GetTableHeight;\n\n  projectName?: string;\n}\n\n/**\n * Hook that provides SVG diagram export functionality.\n *\n * The exporter automatically calculates the real SVG content bounds,\n * so diagramData is optional for generic SVG usage.\n */\nexport const useDiagramExport = ({\n  svgRef,\n  diagramData,\n  getTableHeight,\n  projectName,\n}: UseDiagramExportParams):\n  ExportContext & {\n    exportAllTables: boolean;\n\n    setExportAllTables: (\n      value: boolean,\n    ) => void;\n  } => {\n  const [\n    isExporting,\n    setIsExporting,\n  ] = useState(false);\n\n  const [\n    exportAllTables,\n    setExportAllTables,\n  ] = useState(false);\n\n  const handleExport =\n    useCallback(\n      async (\n        options: ExportOptions = {},\n      ) => {\n        setIsExporting(\n          true,\n        );\n\n        try {\n          await exportDiagram(\n            {\n              svgRef,\n              diagramData,\n              getTableHeight,\n              projectName,\n              setExportAllTables,\n            },\n            options,\n          );\n        } finally {\n          setIsExporting(\n            false,\n          );\n\n          setExportAllTables(\n            false,\n          );\n        }\n      },\n      [\n        svgRef,\n        diagramData,\n        getTableHeight,\n        projectName,\n      ],\n    );\n\n  return {\n    isExporting,\n\n    exportDiagram:\n      handleExport,\n\n    exportAllTables,\n\n    setExportAllTables,\n  };\n};","import type {\n  DiagramData,\n  GetTableHeight,\n} from './types';\n\nconst TABLE_WIDTH = 280;\nconst TABLE_PADDING = 40;\n\nexport interface Dimensions {\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\n/**\n * Calculates dimensions based on diagram data.\n *\n * This function is kept compatible with the original API and tests.\n *\n * It calculates the total diagram size from the table coordinates,\n * assuming the table width is 280px plus the configured padding.\n */\nexport const calculateDimensions = (\n  diagramData:\n    | DiagramData\n    | undefined\n    | null,\n  getTableHeight:\n    GetTableHeight,\n  margin: number = 100,\n): Dimensions => {\n  if (\n    !diagramData?.tables?.length\n  ) {\n    return {\n      width:\n        100 +\n        margin * 2,\n\n      height:\n        100 +\n        margin * 2,\n\n      x:\n        -margin,\n\n      y:\n        -margin,\n    };\n  }\n\n  const minX =\n    Math.min(\n      ...diagramData.tables.map(\n        (table) =>\n          table.x,\n      ),\n    );\n\n  const minY =\n    Math.min(\n      ...diagramData.tables.map(\n        (table) =>\n          table.y,\n      ),\n    );\n\n  const maxX =\n    Math.max(\n      ...diagramData.tables.map(\n        (table) =>\n          table.x +\n          TABLE_WIDTH +\n          TABLE_PADDING,\n      ),\n    );\n\n  const maxY =\n    Math.max(\n      ...diagramData.tables.map(\n        (table) =>\n          table.y +\n          getTableHeight(\n            table.fields,\n          ) +\n          TABLE_PADDING,\n      ),\n    );\n\n  return {\n    x:\n      minX -\n      margin,\n\n    y:\n      minY -\n      margin,\n\n    width:\n      Math.max(\n        100,\n        maxX -\n          minX +\n          margin * 2,\n      ),\n\n    height:\n      Math.max(\n        100,\n        maxY -\n          minY +\n          margin * 2,\n      ),\n  };\n};\n\n/**\n * Calculates the visible bounds of an SVG's graphical content.\n *\n * This function is intended for generic SVG exports.\n *\n * It does NOT rely on:\n *\n * - width\n * - height\n * - viewport\n * - scroll container\n *\n * Instead, it attempts to determine the real graphical bounds.\n */\nexport const getSvgContentBounds = (\n  svg: SVGSVGElement,\n): Dimensions | null => {\n  const elements =\n    Array.from(\n      svg.querySelectorAll<SVGGraphicsElement>(\n        'g, path, rect, circle, ellipse, line, polyline, polygon, text, use, image',\n      ),\n    );\n\n  let minX =\n    Infinity;\n\n  let minY =\n    Infinity;\n\n  let maxX =\n    -Infinity;\n\n  let maxY =\n    -Infinity;\n\n  const updateBounds =\n    (\n      x: number,\n      y: number,\n      width: number,\n      height: number,\n    ) => {\n      if (\n        !Number.isFinite(\n          x,\n        ) ||\n        !Number.isFinite(\n          y,\n        ) ||\n        !Number.isFinite(\n          width,\n        ) ||\n        !Number.isFinite(\n          height,\n        )\n      ) {\n        return;\n      }\n\n      if (\n        width < 0 ||\n        height < 0\n      ) {\n        return;\n      }\n\n      minX =\n        Math.min(\n          minX,\n          x,\n        );\n\n      minY =\n        Math.min(\n          minY,\n          y,\n        );\n\n      maxX =\n        Math.max(\n          maxX,\n          x + width,\n        );\n\n      maxY =\n        Math.max(\n          maxY,\n          y + height,\n        );\n    };\n\n  for (\n    const element of elements\n  ) {\n    /*\n     * Ignore the artificial canvas background.\n     */\n    if (\n      element.matches(\n        '[data-export-bg=\"canvas\"]',\n      ) ||\n      element.closest(\n        '[data-export-bg=\"canvas\"]',\n      )\n    ) {\n      continue;\n    }\n\n    try {\n      const bbox =\n        element.getBBox();\n\n      updateBounds(\n        bbox.x,\n        bbox.y,\n        bbox.width,\n        bbox.height,\n      );\n    } catch {\n      /*\n       * getBBox() can fail in environments where\n       * the SVG has not been rendered yet.\n       */\n    }\n  }\n\n  if (\n    !Number.isFinite(\n      minX,\n    ) ||\n    !Number.isFinite(\n      minY,\n    ) ||\n    !Number.isFinite(\n      maxX,\n    ) ||\n    !Number.isFinite(\n      maxY,\n    )\n  ) {\n    return null;\n  }\n\n  return {\n    x:\n      minX,\n\n    y:\n      minY,\n\n    width:\n      Math.max(\n        1,\n        maxX - minX,\n      ),\n\n    height:\n      Math.max(\n        1,\n        maxY - minY,\n      ),\n  };\n};\n\n/**\n * Calculates the dimensions that should be used for a real SVG export.\n *\n * The content bounds are preferred.\n *\n * The returned x/y values are important because the content does not\n * necessarily start at 0,0.\n */\nexport const calculateSvgDimensions = (\n  svg: SVGSVGElement,\n  margin: number = 100,\n): Dimensions => {\n  const bounds =\n    getSvgContentBounds(\n      svg,\n    );\n\n  if (bounds) {\n    return {\n      x:\n        bounds.x -\n        margin,\n\n      y:\n        bounds.y -\n        margin,\n\n      width:\n        bounds.width +\n        margin * 2,\n\n      height:\n        bounds.height +\n        margin * 2,\n    };\n  }\n\n  /*\n   * Fallback to the SVG viewBox.\n   */\n  const viewBox =\n    svg.viewBox?.baseVal;\n\n  if (\n    viewBox &&\n    Number.isFinite(\n      viewBox.width,\n    ) &&\n    Number.isFinite(\n      viewBox.height,\n    ) &&\n    viewBox.width > 0 &&\n    viewBox.height > 0\n  ) {\n    return {\n      x:\n        viewBox.x -\n        margin,\n\n      y:\n        viewBox.y -\n        margin,\n\n      width:\n        viewBox.width +\n        margin * 2,\n\n      height:\n        viewBox.height +\n        margin * 2,\n    };\n  }\n\n  /*\n   * Final fallback to width/height attributes.\n   */\n  const width =\n    Number(\n      svg.getAttribute(\n        'width',\n      ),\n    ) ||\n    svg.clientWidth ||\n    1;\n\n  const height =\n    Number(\n      svg.getAttribute(\n        'height',\n      ),\n    ) ||\n    svg.clientHeight ||\n    1;\n\n  return {\n    x:\n      -margin,\n\n    y:\n      -margin,\n\n    width:\n      width +\n      margin * 2,\n\n    height:\n      height +\n      margin * 2,\n  };\n};\n\n/**\n * Calculates dimensions based on an SVG element and its scroll container.\n *\n * Kept for backwards compatibility.\n */\nexport const getScrollDimensions = (\n  svg: SVGSVGElement,\n): Dimensions => {\n  const scrollContainer =\n    svg.parentElement ||\n    svg.closest(\n      '.overflow-auto',\n    ) ||\n    svg.closest(\n      '.overflow-scroll',\n    );\n\n  let width =\n    Number(\n      svg.getAttribute(\n        'width',\n      ),\n    ) ||\n    svg.clientWidth ||\n    1;\n\n  let height =\n    Number(\n      svg.getAttribute(\n        'height',\n      ),\n    ) ||\n    svg.clientHeight ||\n    1;\n\n  if (\n    scrollContainer\n  ) {\n    width =\n      Math.max(\n        width,\n        scrollContainer.scrollWidth,\n      );\n\n    height =\n      Math.max(\n        height,\n        scrollContainer.scrollHeight,\n      );\n  }\n\n  return {\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n};","/**\n * Renders an SVG image to a high-quality canvas.\n *\n * The background can be:\n *\n * - 'transparent'\n * - any valid CSS color\n *\n * Examples:\n *\n * - '#C300FF'\n * - '#ffffff'\n * - 'rgb(195, 0, 255)'\n * - 'rgba(195, 0, 255, 0.5)'\n * - 'hsl(285, 100%, 50%)'\n */\nexport const renderHighQuality = async (\n  image: HTMLImageElement,\n  width: number,\n  height: number,\n  scale: number = 2,\n  background: string = 'transparent',\n): Promise<HTMLCanvasElement> => {\n  const MAX_CANVAS_SIZE = 16384;\n\n  const safeWidth =\n    Math.max(1, width);\n\n  const safeHeight =\n    Math.max(1, height);\n\n  const safeScale =\n    Math.max(0.1, scale);\n\n  const effectiveScale = Math.min(\n    safeScale,\n    MAX_CANVAS_SIZE /\n      Math.max(\n        safeWidth,\n        safeHeight,\n        1,\n      ),\n  );\n\n  const canvas =\n    document.createElement(\n      'canvas',\n    );\n\n  canvas.width = Math.max(\n    1,\n    Math.floor(\n      safeWidth *\n        effectiveScale,\n    ),\n  );\n\n  canvas.height = Math.max(\n    1,\n    Math.floor(\n      safeHeight *\n        effectiveScale,\n    ),\n  );\n\n  /*\n   * Always keep alpha enabled.\n   *\n   * This is important because the user may provide:\n   *\n   * rgba(...)\n   *\n   * or transparent.\n   */\n  const context =\n    canvas.getContext(\n      '2d',\n      {\n        alpha: true,\n      },\n    );\n\n  if (!context) {\n    throw new Error(\n      'Unable to create 2D canvas context',\n    );\n  }\n\n  context.imageSmoothingEnabled =\n    true;\n\n  context.imageSmoothingQuality =\n    'high';\n\n  /*\n   * Background handling.\n   *\n   * transparent:\n   *     Keep the canvas transparent.\n   *\n   * any other value:\n   *     Use it as a CSS color.\n   */\n  if (\n    background !== 'transparent'\n  ) {\n    context.fillStyle =\n      background;\n\n    context.fillRect(\n      0,\n      0,\n      canvas.width,\n      canvas.height,\n    );\n  } else {\n    context.clearRect(\n      0,\n      0,\n      canvas.width,\n      canvas.height,\n    );\n  }\n\n  /*\n   * The canvas already contains the\n   * final scaled dimensions.\n   */\n  context.drawImage(\n    image,\n    0,\n    0,\n    safeWidth *\n      effectiveScale,\n    safeHeight *\n      effectiveScale,\n  );\n\n  return canvas;\n};","/**\n * Downloads are handled elsewhere.\n *\n * This file contains SVG serialization and preparation utilities.\n */\n\n/**\n * Serializes an SVG element to a string.\n *\n * CSS custom properties are resolved using the current document styles.\n */\nexport const serializeSvg = (\n  svg: SVGSVGElement,\n): string => {\n  const serializer =\n    new XMLSerializer();\n\n  const styles =\n    typeof document !== 'undefined'\n      ? getComputedStyle(\n          document.documentElement,\n        )\n      : null;\n\n  let markup =\n    serializer.serializeToString(\n      svg,\n    );\n\n  if (styles) {\n    markup = markup.replace(\n      /var\\(--([^)]+)\\)/g,\n      (\n        _match,\n        name: string,\n      ) => {\n        const value =\n          styles\n            .getPropertyValue(\n              `--${name}`,\n            )\n            ?.trim();\n\n        return value ||\n          `var(--${name})`;\n      },\n    );\n  }\n\n  /*\n   * Ensure SVG has the proper namespace.\n   */\n  if (\n    !markup.includes(\n      'xmlns=\"http://www.w3.org/2000/svg\"',\n    )\n  ) {\n    markup = markup.replace(\n      '<svg',\n      '<svg xmlns=\"http://www.w3.org/2000/svg\"',\n    );\n  }\n\n  return markup;\n};\n\n/**\n * Creates a Blob URL from SVG markup.\n */\nexport const createSvgUrl = (\n  svgMarkup: string,\n): string => {\n  return URL.createObjectURL(\n    new Blob(\n      [svgMarkup],\n      {\n        type:\n          'image/svg+xml;charset=utf-8',\n      },\n    ),\n  );\n};\n\n/**\n * Creates a clean SVG clone for export.\n *\n * The clone receives an explicit viewBox based on the REAL\n * content bounds instead of assuming the content starts at 0,0.\n *\n * The background can be:\n *\n * - 'transparent'\n * - any valid CSS color\n */\nexport const prepareSvgForExport = (\n  sourceSvg: SVGSVGElement,\n  width: number,\n  height: number,\n  background: string = 'transparent',\n  margin: number = 0,\n  sourceX: number = 0,\n  sourceY: number = 0,\n): SVGSVGElement => {\n  const clone =\n    sourceSvg.cloneNode(\n      true,\n    ) as SVGSVGElement;\n\n  /*\n   * Remove elements explicitly marked as canvas backgrounds.\n   *\n   * These backgrounds are usually viewport-sized and would otherwise\n   * make getBBox() consider the entire viewport instead of the\n   * actual diagram.\n   */\n  const bgNodes =\n    clone.querySelectorAll(\n      '[data-export-bg=\"canvas\"]',\n    );\n\n  bgNodes.forEach(\n    (node) => {\n      node.remove();\n    },\n  );\n\n  /*\n   * The dimensions passed here already include the requested margin.\n   */\n  clone.setAttribute(\n    'width',\n    String(width),\n  );\n\n  clone.setAttribute(\n    'height',\n    String(height),\n  );\n\n  clone.setAttribute(\n    'viewBox',\n    `${sourceX} ${sourceY} ${width} ${height}`,\n  );\n\n  /*\n   * Prevent unexpected cropping or distortion.\n   */\n  clone.setAttribute(\n    'preserveAspectRatio',\n    'xMinYMin meet',\n  );\n\n  /*\n   * Add an explicit background when requested.\n   *\n   * transparent:\n   *     No background is added.\n   *\n   * Any other CSS color:\n   *     The color is used as the SVG background.\n   */\n  if (\n    background !== 'transparent'\n  ) {\n    const backgroundRect =\n      document.createElementNS(\n        'http://www.w3.org/2000/svg',\n        'rect',\n      );\n\n    backgroundRect.setAttribute(\n      'x',\n      String(sourceX),\n    );\n\n    backgroundRect.setAttribute(\n      'y',\n      String(sourceY),\n    );\n\n    backgroundRect.setAttribute(\n      'width',\n      String(width),\n    );\n\n    backgroundRect.setAttribute(\n      'height',\n      String(height),\n    );\n\n    backgroundRect.setAttribute(\n      'fill',\n      background,\n    );\n\n    /*\n     * Keep the background behind the diagram.\n     */\n    clone.insertBefore(\n      backgroundRect,\n      clone.firstChild,\n    );\n  }\n\n  /*\n   * We intentionally do NOT manipulate arbitrary\n   * transforms here.\n   *\n   * The viewBox handles positioning and margin.\n   */\n  return clone;\n};","/**\n * Downloads a Blob as a file.\n */\nexport const downloadBlob = (\n  blob: Blob,\n  fileName: string,\n): void => {\n  const url =\n    URL.createObjectURL(\n      blob,\n    );\n\n  const link =\n    document.createElement(\n      'a',\n    );\n\n  link.href = url;\n  link.download = fileName;\n\n  try {\n    document.body?.appendChild(\n      link,\n    );\n\n    link.click();\n\n    document.body?.removeChild(\n      link,\n    );\n  } catch {\n    link.click();\n  }\n\n  /*\n   * Give the browser a chance to start the download before\n   * revoking the object URL.\n   */\n  setTimeout(() => {\n    URL.revokeObjectURL(\n      url,\n    );\n  }, 100);\n};\n\n/**\n * Generates a safe filename.\n */\nexport const generateFileName = (\n  projectName:\n    | string\n    | undefined,\n  format:\n    | 'png'\n    | 'svg',\n): string => {\n  const safeName =\n    (\n      projectName ||\n      'diagram'\n    )\n      .replace(\n        /\\s+/g,\n        '_',\n      )\n      .toLowerCase()\n      .replace(\n        /[^a-z0-9_-]/g,\n        '',\n      );\n\n  return `${safeName}.${format}`;\n};\n\n/**\n * Converts a canvas to a PNG Blob.\n */\nexport const canvasToBlob = (\n  canvas: HTMLCanvasElement,\n): Promise<Blob> => {\n  return new Promise(\n    (\n      resolve,\n      reject,\n    ) => {\n      try {\n        if (\n          typeof canvas.toBlob !==\n          'function'\n        ) {\n          reject(\n            new Error(\n              'Canvas.toBlob is not supported',\n            ),\n          );\n\n          return;\n        }\n\n        canvas.toBlob(\n          (\n            blob,\n          ) => {\n            if (!blob) {\n              reject(\n                new Error(\n                  'Failed to create PNG blob',\n                ),\n              );\n\n              return;\n            }\n\n            resolve(blob);\n          },\n          'image/png',\n        );\n      } catch (error) {\n        reject(error);\n      }\n    },\n  );\n};","import type {\n  ExportOptions,\n  DiagramData,\n  GetTableHeight,\n} from './types';\n\nimport {\n  calculateSvgDimensions,\n} from './calculateDimensions';\n\nimport {\n  renderHighQuality,\n} from './renderHighQuality';\n\nimport {\n  serializeSvg,\n  createSvgUrl,\n  prepareSvgForExport,\n} from './utils/serializer';\n\nimport {\n  downloadBlob,\n  generateFileName,\n  canvasToBlob,\n} from './utils/download';\n\nexport interface ExportDiagramParams {\n  svgRef: React.RefObject<SVGSVGElement>;\n\n  diagramData?:\n    | DiagramData\n    | null;\n\n  getTableHeight?:\n    | GetTableHeight;\n\n  projectName?: string;\n\n  setExportAllTables?: (\n    value: boolean,\n  ) => void;\n\n  showToast?: (\n    message: string,\n    type?: string,\n  ) => void;\n}\n\n/**\n * Exports the complete SVG diagram regardless of the\n * visible viewport.\n *\n * The export process is:\n *\n * 1. Render all diagram content.\n * 2. Calculate the real SVG content bounds.\n * 3. Create an independent SVG clone.\n * 4. Set a viewBox covering the complete content.\n * 5. Apply the requested background.\n * 6. Convert the SVG to PNG when requested.\n *\n * Background examples:\n *\n * - 'white'\n * - 'transparent'\n * - '#C300FF'\n * - 'rgb(195, 0, 255)'\n * - 'rgba(195, 0, 255, 0.5)'\n */\nexport const exportDiagram = async (\n  params: ExportDiagramParams,\n  options: ExportOptions = {},\n): Promise<void> => {\n  const {\n    svgRef,\n    diagramData,\n    getTableHeight,\n    projectName,\n    setExportAllTables,\n    showToast,\n  } = params;\n\n  const {\n    format = 'png',\n    background = 'white',\n    scale = 2,\n    margin = 100,\n    fileName,\n    onProgress,\n  } = options;\n\n  if (!svgRef.current) {\n    onProgress?.({\n      type: 'error',\n      message:\n        'SVG reference not available',\n    });\n\n    return;\n  }\n\n  let objectUrl:\n    string | null = null;\n\n  try {\n    onProgress?.({\n      type: 'preparing',\n    });\n\n    showToast?.(\n      'Preparing export...',\n      'info',\n    );\n\n    /*\n     * Tell the consuming application to render\n     * all currently virtualized/cullable content.\n     */\n    setExportAllTables?.(\n      true,\n    );\n\n    /*\n     * Give React time to render the complete diagram.\n     */\n    await new Promise<void>(\n      (resolve) => {\n        setTimeout(\n          resolve,\n          300,\n        );\n      },\n    );\n\n    onProgress?.({\n      type: 'rendering',\n    });\n\n    const sourceSvg =\n      svgRef.current;\n\n    /*\n     * Calculate the real SVG bounds.\n     *\n     * We intentionally do not use calculateDimensions()\n     * because SVG content may extend beyond the viewport.\n     */\n    const dimensions =\n      calculateSvgDimensions(\n        sourceSvg,\n        margin,\n      );\n\n    const {\n      x,\n      y,\n      width,\n      height,\n    } = dimensions;\n\n    /*\n     * Prepare a completely independent SVG clone.\n     *\n     * The background is applied here for SVG exports\n     * and is also preserved when converting to PNG.\n     */\n    const exportSvg =\n      prepareSvgForExport(\n        sourceSvg,\n        width,\n        height,\n        background,\n        margin,\n        x,\n        y,\n      );\n\n    onProgress?.({\n      type: 'serializing',\n    });\n\n    /*\n     * Serialize the prepared SVG.\n     */\n    const svgMarkup =\n      serializeSvg(\n        exportSvg,\n      );\n\n    /*\n     * SVG export does not require canvas.\n     */\n    if (\n      format === 'svg'\n    ) {\n      const blob =\n        new Blob(\n          [svgMarkup],\n          {\n            type:\n              'image/svg+xml;charset=utf-8',\n          },\n        );\n\n      const finalFileName =\n        fileName ||\n        generateFileName(\n          projectName,\n          'svg',\n        );\n\n      downloadBlob(\n        blob,\n        finalFileName,\n      );\n\n      onProgress?.({\n        type: 'complete',\n      });\n\n      showToast?.(\n        'Export completed successfully',\n        'success',\n      );\n\n      return;\n    }\n\n    /*\n     * Create an object URL for the SVG.\n     */\n    const image =\n      new Image();\n\n    objectUrl =\n      createSvgUrl(\n        svgMarkup,\n      );\n\n    await new Promise<void>(\n      (\n        resolve,\n        reject,\n      ) => {\n        image.onload =\n          () => {\n            resolve();\n          };\n\n        image.onerror =\n          () => {\n            reject(\n              new Error(\n                'Failed to load SVG image',\n              ),\n            );\n          };\n\n        image.src =\n          objectUrl!;\n      },\n    );\n\n    /*\n     * Render the complete SVG into a high-quality canvas.\n     *\n     * The same background is passed to the canvas renderer,\n     * allowing custom CSS colors for PNG exports.\n     */\n    const canvas =\n      await renderHighQuality(\n        image,\n        width,\n        height,\n        scale,\n        background,\n      );\n\n    onProgress?.({\n      type: 'downloading',\n    });\n\n    /*\n     * Convert the canvas to PNG.\n     */\n    const blob =\n      await canvasToBlob(\n        canvas,\n      );\n\n    const finalFileName =\n      fileName ||\n      generateFileName(\n        projectName,\n        'png',\n      );\n\n    downloadBlob(\n      blob,\n      finalFileName,\n    );\n\n    onProgress?.({\n      type: 'complete',\n    });\n\n    showToast?.(\n      'Export completed successfully',\n      'success',\n    );\n  } catch (error) {\n    console.error(\n      'Export error:',\n      error,\n    );\n\n    onProgress?.({\n      type: 'error',\n      message:\n        'Export failed',\n    });\n\n    showToast?.(\n      'Failed to export file',\n      'error',\n    );\n  } finally {\n    /*\n     * Always restore the normal rendering state.\n     */\n    setExportAllTables?.(\n      false,\n    );\n\n    /*\n     * Always release the object URL.\n     */\n    if (objectUrl) {\n      URL.revokeObjectURL(\n        objectUrl,\n      );\n    }\n  }\n};"],"mappings":"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CAAM,GAMjBC,EACXC,GAEO,IAAI,QACT,CACEC,EACAC,IACG,CACH,GAAI,CACF,GACE,OAAOF,EAAO,QACd,WACA,CACAE,EACE,IAAI,MACF,gCACF,CACF,EAEA,MACF,CAEAF,EAAO,OAEHR,GACG,CACH,GAAI,CAACA,EAAM,CACTU,EACE,IAAI,MACF,2BACF,CACF,EAEA,MACF,CAEAD,EAAQT,CAAI,CACd,EACA,WACF,CACF,OAASW,EAAO,CACdD,EAAOC,CAAK,CACd,CACF,CACF,ECpDK,IAAMC,EAAgB,MAC3BC,EACAC,EAAyB,CAAC,IACR,CAClB,GAAM,CACJ,OAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,UAAAC,CACF,EAAIP,EAEE,CACJ,OAAAQ,EAAS,MACT,WAAAC,EAAa,QACb,MAAAC,EAAQ,EACR,OAAAC,EAAS,IACT,SAAAC,EACA,WAAAC,CACF,EAAIZ,EAEJ,GAAI,CAACC,EAAO,QAAS,CACnBW,IAAa,CACX,KAAM,QACN,QACE,6BACJ,CAAC,EAED,MACF,CAEA,IAAIC,EACc,KAElB,GAAI,CACFD,IAAa,CACX,KAAM,WACR,CAAC,EAEDN,IACE,sBACA,MACF,EAMAD,IACE,EACF,EAKA,MAAM,IAAI,QACPS,GAAY,CACX,WACEA,EACA,GACF,CACF,CACF,EAEAF,IAAa,CACX,KAAM,WACR,CAAC,EAED,IAAMG,EACJd,EAAO,QAQHe,EACJC,EACEF,EACAL,CACF,EAEI,CACJ,EAAAQ,EACA,EAAAC,EACA,MAAAC,EACA,OAAAC,CACF,EAAIL,EAQEM,EACJC,EACER,EACAK,EACAC,EACAb,EACAE,EACAQ,EACAC,CACF,EAEFP,IAAa,CACX,KAAM,aACR,CAAC,EAKD,IAAMY,EACJC,EACEH,CACF,EAKF,GACEf,IAAW,MACX,CACA,IAAMmB,EACJ,IAAI,KACF,CAACF,CAAS,EACV,CACE,KACE,6BACJ,CACF,EAEIG,EACJhB,GACAiB,EACExB,EACA,KACF,EAEFyB,EACEH,EACAC,CACF,EAEAf,IAAa,CACX,KAAM,UACR,CAAC,EAEDN,IACE,gCACA,SACF,EAEA,MACF,CAKA,IAAMwB,EACJ,IAAI,MAENjB,EACEkB,EACEP,CACF,EAEF,MAAM,IAAI,QACR,CACEV,EACAkB,IACG,CACHF,EAAM,OACJ,IAAM,CACJhB,EAAQ,CACV,EAEFgB,EAAM,QACJ,IAAM,CACJE,EACE,IAAI,MACF,0BACF,CACF,CACF,EAEFF,EAAM,IACJjB,CACJ,CACF,EAQA,IAAMoB,EACJ,MAAMC,EACJJ,EACAV,EACAC,EACAZ,EACAD,CACF,EAEFI,IAAa,CACX,KAAM,aACR,CAAC,EAKD,IAAMc,EACJ,MAAMS,EACJF,CACF,EAEIN,EACJhB,GACAiB,EACExB,EACA,KACF,EAEFyB,EACEH,EACAC,CACF,EAEAf,IAAa,CACX,KAAM,UACR,CAAC,EAEDN,IACE,gCACA,SACF,CACF,OAAS8B,EAAO,CACd,QAAQ,MACN,gBACAA,CACF,EAEAxB,IAAa,CACX,KAAM,QACN,QACE,eACJ,CAAC,EAEDN,IACE,wBACA,OACF,CACF,QAAE,CAIAD,IACE,EACF,EAKIQ,GACF,IAAI,gBACFA,CACF,CAEJ,CACF,ELnTO,IAAMwB,EAAmB,CAAC,CAC/B,OAAAC,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,CACF,IAOO,CACL,GAAM,CACJC,EACAC,CACF,KAAI,YAAS,EAAK,EAEZ,CACJC,EACAC,CACF,KAAI,YAAS,EAAK,EAEZC,KACJ,eACE,MACEC,EAAyB,CAAC,IACvB,CACHJ,EACE,EACF,EAEA,GAAI,CACF,MAAMK,EACJ,CACE,OAAAV,EACA,YAAAC,EACA,eAAAC,EACA,YAAAC,EACA,mBAAAI,CACF,EACAE,CACF,CACF,QAAE,CACAJ,EACE,EACF,EAEAE,EACE,EACF,CACF,CACF,EACA,CACEP,EACAC,EACAC,EACAC,CACF,CACF,EAEF,MAAO,CACL,YAAAC,EAEA,cACEI,EAEF,gBAAAF,EAEA,mBAAAC,CACF,CACF","names":["index_exports","__export","calculateDimensions","calculateSvgDimensions","canvasToBlob","createSvgUrl","useDiagramExport","downloadBlob","exportDiagram","generateFileName","getScrollDimensions","getSvgContentBounds","prepareSvgForExport","renderHighQuality","serializeSvg","__toCommonJS","import_react","calculateDimensions","diagramData","getTableHeight","margin","minX","table","minY","maxX","maxY","getSvgContentBounds","svg","elements","updateBounds","x","y","width","height","element","bbox","calculateSvgDimensions","bounds","viewBox","getScrollDimensions","scrollContainer","renderHighQuality","image","width","height","scale","background","safeWidth","safeHeight","safeScale","effectiveScale","canvas","context","serializeSvg","svg","serializer","styles","markup","_match","name","createSvgUrl","svgMarkup","prepareSvgForExport","sourceSvg","width","height","background","margin","sourceX","sourceY","clone","node","backgroundRect","downloadBlob","blob","fileName","url","link","generateFileName","projectName","format","canvasToBlob","canvas","resolve","reject","error","exportDiagram","params","options","svgRef","diagramData","getTableHeight","projectName","setExportAllTables","showToast","format","background","scale","margin","fileName","onProgress","objectUrl","resolve","sourceSvg","dimensions","calculateSvgDimensions","x","y","width","height","exportSvg","prepareSvgForExport","svgMarkup","serializeSvg","blob","finalFileName","generateFileName","downloadBlob","image","createSvgUrl","reject","canvas","renderHighQuality","canvasToBlob","error","useDiagramExport","svgRef","diagramData","getTableHeight","projectName","isExporting","setIsExporting","exportAllTables","setExportAllTables","handleExport","options","exportDiagram"]}

package/dist/index.d.cts

@@ -0,0 +1,224 @@
+type ExportBackground = string;
+interface ExportOptions {
+    format?: 'png' | 'svg';
+    /**
+     * Background color for the exported diagram.
+     *
+     * Supported examples:
+     *
+     * - 'white'
+     * - 'transparent'
+     * - '#C300FF'
+     * - '#ffffff'
+     * - 'rgb(195, 0, 255)'
+     * - 'rgba(195, 0, 255, 0.5)'
+     * - 'hsl(285, 100%, 50%)'
+     *
+     * Any valid CSS color supported by the browser can be used.
+     */
+    background?: ExportBackground;
+    /**
+     * Export scale.
+     *
+     * Example:
+     * scale: 2
+     */
+    scale?: number;
+    /**
+     * Additional space around the exported diagram.
+     */
+    margin?: number;
+    /**
+     * Custom output filename.
+     */
+    fileName?: string;
+    /**
+     * Export progress callback.
+     */
+    onProgress?: (status: ExportStatus) => void;
+}
+interface DiagramData {
+    tables: Array<{
+        id: string;
+        x: number;
+        y: number;
+        fields: any[];
+    }>;
+    relationships: any[];
+}
+type ExportStatus = {
+    type: 'preparing';
+} | {
+    type: 'rendering';
+} | {
+    type: 'serializing';
+} | {
+    type: 'downloading';
+} | {
+    type: 'complete';
+} | {
+    type: 'error';
+    message: string;
+};
+interface GetTableHeight {
+    (fields: any[]): number;
+}
+interface ExportContext {
+    isExporting: boolean;
+    exportDiagram: (options?: ExportOptions) => Promise<void>;
+}
+
+interface UseDiagramExportParams {
+    svgRef: React.RefObject<SVGSVGElement>;
+    diagramData?: DiagramData | null;
+    getTableHeight?: GetTableHeight;
+    projectName?: string;
+}
+/**
+ * Hook that provides SVG diagram export functionality.
+ *
+ * The exporter automatically calculates the real SVG content bounds,
+ * so diagramData is optional for generic SVG usage.
+ */
+declare const useDiagramExport: ({ svgRef, diagramData, getTableHeight, projectName, }: UseDiagramExportParams) => ExportContext & {
+    exportAllTables: boolean;
+    setExportAllTables: (value: boolean) => void;
+};
+
+interface ExportDiagramParams {
+    svgRef: React.RefObject<SVGSVGElement>;
+    diagramData?: DiagramData | null;
+    getTableHeight?: GetTableHeight;
+    projectName?: string;
+    setExportAllTables?: (value: boolean) => void;
+    showToast?: (message: string, type?: string) => void;
+}
+/**
+ * Exports the complete SVG diagram regardless of the
+ * visible viewport.
+ *
+ * The export process is:
+ *
+ * 1. Render all diagram content.
+ * 2. Calculate the real SVG content bounds.
+ * 3. Create an independent SVG clone.
+ * 4. Set a viewBox covering the complete content.
+ * 5. Apply the requested background.
+ * 6. Convert the SVG to PNG when requested.
+ *
+ * Background examples:
+ *
+ * - 'white'
+ * - 'transparent'
+ * - '#C300FF'
+ * - 'rgb(195, 0, 255)'
+ * - 'rgba(195, 0, 255, 0.5)'
+ */
+declare const exportDiagram: (params: ExportDiagramParams, options?: ExportOptions) => Promise<void>;
+
+interface Dimensions {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+/**
+ * Calculates dimensions based on diagram data.
+ *
+ * This function is kept compatible with the original API and tests.
+ *
+ * It calculates the total diagram size from the table coordinates,
+ * assuming the table width is 280px plus the configured padding.
+ */
+declare const calculateDimensions: (diagramData: DiagramData | undefined | null, getTableHeight: GetTableHeight, margin?: number) => Dimensions;
+/**
+ * Calculates the visible bounds of an SVG's graphical content.
+ *
+ * This function is intended for generic SVG exports.
+ *
+ * It does NOT rely on:
+ *
+ * - width
+ * - height
+ * - viewport
+ * - scroll container
+ *
+ * Instead, it attempts to determine the real graphical bounds.
+ */
+declare const getSvgContentBounds: (svg: SVGSVGElement) => Dimensions | null;
+/**
+ * Calculates the dimensions that should be used for a real SVG export.
+ *
+ * The content bounds are preferred.
+ *
+ * The returned x/y values are important because the content does not
+ * necessarily start at 0,0.
+ */
+declare const calculateSvgDimensions: (svg: SVGSVGElement, margin?: number) => Dimensions;
+/**
+ * Calculates dimensions based on an SVG element and its scroll container.
+ *
+ * Kept for backwards compatibility.
+ */
+declare const getScrollDimensions: (svg: SVGSVGElement) => Dimensions;
+
+/**
+ * Renders an SVG image to a high-quality canvas.
+ *
+ * The background can be:
+ *
+ * - 'transparent'
+ * - any valid CSS color
+ *
+ * Examples:
+ *
+ * - '#C300FF'
+ * - '#ffffff'
+ * - 'rgb(195, 0, 255)'
+ * - 'rgba(195, 0, 255, 0.5)'
+ * - 'hsl(285, 100%, 50%)'
+ */
+declare const renderHighQuality: (image: HTMLImageElement, width: number, height: number, scale?: number, background?: string) => Promise<HTMLCanvasElement>;
+
+/**
+ * Downloads are handled elsewhere.
+ *
+ * This file contains SVG serialization and preparation utilities.
+ */
+/**
+ * Serializes an SVG element to a string.
+ *
+ * CSS custom properties are resolved using the current document styles.
+ */
+declare const serializeSvg: (svg: SVGSVGElement) => string;
+/**
+ * Creates a Blob URL from SVG markup.
+ */
+declare const createSvgUrl: (svgMarkup: string) => string;
+/**
+ * Creates a clean SVG clone for export.
+ *
+ * The clone receives an explicit viewBox based on the REAL
+ * content bounds instead of assuming the content starts at 0,0.
+ *
+ * The background can be:
+ *
+ * - 'transparent'
+ * - any valid CSS color
+ */
+declare const prepareSvgForExport: (sourceSvg: SVGSVGElement, width: number, height: number, background?: string, margin?: number, sourceX?: number, sourceY?: number) => SVGSVGElement;
+
+/**
+ * Downloads a Blob as a file.
+ */
+declare const downloadBlob: (blob: Blob, fileName: string) => void;
+/**
+ * Generates a safe filename.
+ */
+declare const generateFileName: (projectName: string | undefined, format: "png" | "svg") => string;
+/**
+ * Converts a canvas to a PNG Blob.
+ */
+declare const canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
+
+export { type DiagramData, type ExportContext, type ExportOptions, type ExportStatus, type GetTableHeight, calculateDimensions, calculateSvgDimensions, canvasToBlob, createSvgUrl, useDiagramExport as default, downloadBlob, exportDiagram, generateFileName, getScrollDimensions, getSvgContentBounds, prepareSvgForExport, renderHighQuality, serializeSvg, useDiagramExport };