Utility Functions

Asset Studio exports a set of utility functions for working with geometry and SVG assets.

Import

import { getRotatedBounds, parseSvg, downloadURI, downloadBlob } from '@asset-studio/core'

---

getRotatedBounds

Calculates the axis-aligned bounding box of a rectangle after rotation. Useful for determining how much space a rotated item occupies on the canvas.

Signature

function getRotatedBounds(
  width: number,
  height: number,
  rotation: number,
): {
  minX: number
  maxX: number
  minY: number
  maxY: number
}

Parameters

Parameter	Type	Description
width	number	Width of the rectangle in pixels.
height	number	Height of the rectangle in pixels.
rotation	number	Rotation angle in degrees.

Return Value

Property	Type	Description
minX	number	Leftmost X coordinate of the bounding box.
maxX	number	Rightmost X coordinate of the bounding box.
minY	number	Topmost Y coordinate of the bounding box.
maxY	number	Bottommost Y coordinate of the bounding box.

Example

const bounds = getRotatedBounds(200, 100, 45)
const boundingWidth = bounds.maxX - bounds.minX
const boundingHeight = bounds.maxY - bounds.minY

---

parseSvg

Fetches an SVG file from a URL, extracts the first <path> element's d attribute, and computes its bounding box as a viewBox. The returned values can be passed directly to a Shape item.

Signature

async function parseSvg(url: string): Promise<{
  svgPath: string
  viewBox: { x: number; y: number; w: number; h: number }
} | null>

Parameters

Parameter	Type	Description
url	string	URL of the SVG file to parse.

Return Value

Returns an object with the extracted path data, or null if no <path> element is found.

Property	Type	Description
svgPath	string	The d attribute of the first <path> in the SVG.
viewBox	{ x: number; y: number; w: number; h: number }	Bounding box of the path, used as viewBox on a Shape item.

Example

const result = await parseSvg('https://example.com/icon.svg')

if (result) {
  addItem('Shape', {
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    itemProps: {
      svgPath: result.svgPath,
      viewBox: result.viewBox,
      fill: '#7c3aed',
    },
  })
}

---

downloadURI

Triggers a browser download from a data URL or object URL.

Signature

function downloadURI(uri: string, name: string): void

Parameters

Parameter	Type	Description
uri	string	The data URL or object URL to download.
name	string	The file name for the download.

Example

const uri = exportImage(2)
downloadURI(uri, 'design.png')

---

downloadBlob

Triggers a browser download from a Blob object.

Signature

function downloadBlob(blob: Blob, name: string): void

Parameters

Parameter	Type	Description
blob	Blob	The blob to download.
name	string	The file name for the download.

Example

const blob = await exportVideo(30)
if (blob) downloadBlob(blob, 'export.mp4')

---

Related

• Shape Item
• ShapeDraw Item
• useExport