useSize

Changes the canvas document dimensions while proportionally rescaling all existing items to fit the new size.

Import

import { useSize } from '@asset-studio/core'

Usage

function ResizeControls() {
  const { onSizeChange } = useSize()

  return (
    <div>
      <button onClick={() => onSizeChange(1920, 1080)}>16:9</button>
      <button onClick={() => onSizeChange(1080, 1080)}>1:1</button>
      <button onClick={() => onSizeChange(1080, 1920)}>9:16</button>
    </div>
  )
}

Return Value

Property	Type	Description
onSizeChange	(width: number, height: number) => void	Resize the document and rescale all items to fit.

Behavior

When onSizeChange is called, every item on the canvas is repositioned and rescaled relative to the new dimensions:

• x and y are scaled by the width and height ratios respectively.
• width and height are scaled by the geometric mean of the two ratios, preserving proportions.
• For Text items, fontSize and padding are also scaled by the same factor.
• The change is pushed to the undo history.

Notes

• Must be called from a component inside StudioProvider.
• Use setDocumentWidth / setDocumentHeight from useStudio if you only need to change the dimensions without rescaling items.

Related

• useStudio