TLAssetContext

Context information provided when resolving asset URLs, containing details about the current rendering environment and user's connection to optimize asset delivery.

interface TLAssetContext {}

Example

const assetStore: TLAssetStore = {
  async resolve(asset, context: TLAssetContext) {
    // Use low resolution for slow connections
    if (context.networkEffectiveType === 'slow-2g') {
      return `${asset.props.src}?quality=low`
    }
    // Use high DPI version for retina displays
    if (context.dpr > 1) {
      return `${asset.props.src}@2x`
    }
    return asset.props.src
  },
}

Properties

The device pixel ratio - how many CSS pixels are in one device pixel?

dpr: number

An alias for navigator.connection.effectiveType if it's available in the current browser. Use this to e.g. serve lower-resolution images to users on slow connections.

networkEffectiveType: null | string

The scale at which the asset is being rendered on-screen relative to its native dimensions. If the asset is 1000px wide, but it's been resized/zoom so it takes 500px on-screen, this will be 0.5.

The scale measures CSS pixels, not device pixels.

screenScale: number

In some circumstances, we need to resolve a URL that points to the original version of a particular asset. This is used when the asset will leave the current tldraw instance - e.g. for copy/paste, or exports.

shouldResolveToOriginal: boolean

The TLAssetContext.screenScale, stepped to the nearest power-of-2 multiple.

steppedScreenScale: number