@tldraw/editor/dist-esm/lib/options.mjs.map

tldraw infinite canvas SDK (editor).

{
  "version": 3,
  "sources": ["../../src/lib/options.ts"],
  "sourcesContent": ["import { Awaitable } from '@tldraw/utils'\nimport { ComponentType, Fragment } from 'react'\nimport { DEFAULT_CAMERA_OPTIONS } from './constants'\nimport type { Editor } from './editor/Editor'\nimport { TLContent } from './editor/types/clipboard-types'\nimport { TLExternalContent } from './editor/types/external-content'\nimport { TLCameraOptions } from './editor/types/misc-types'\nimport { VecLike } from './primitives/Vec'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { TLTextOptions } from './utils/richText'\n\n/**\n * Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).\n *\n * @public\n */\nexport interface TLClipboardWriteInfo {\n\treadonly operation: 'copy' | 'cut'\n\treadonly source: 'native' | 'menu'\n}\n\n/**\n * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.\n *\n * - `native-event`: from the `paste` event \u2014 `clipboardData` is available synchronously (unlike async\n *   `navigator.clipboard.read()`).\n * - `clipboard-read`: from an explicit `navigator.clipboard.read()` call \u2014 only `ClipboardItem[]`\n *   exists\n *   (no `DataTransfer`).\n *\n * @public\n */\nexport type TLClipboardPasteRawInfo =\n\t| {\n\t\t\treadonly editor: Editor\n\t\t\treadonly source: 'native-event'\n\t\t\treadonly event: ClipboardEvent\n\t\t\treadonly clipboardData: DataTransfer | null\n\t\t\treadonly point: VecLike | undefined\n\t  }\n\t| {\n\t\t\treadonly editor: Editor\n\t\t\treadonly source: 'clipboard-read'\n\t\t\treadonly clipboardItems: readonly ClipboardItem[]\n\t\t\treadonly point: VecLike | undefined\n\t  }\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\t/**\n\t * How long (in milliseconds) to fade all laser scribbles after the session ends.\n\t * The total points across all scribbles will be removed proportionally over this duration.\n\t * Defaults to 500ms (0.5 seconds).\n\t */\n\treadonly laserFadeoutMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n\t/**\n\t * Whether to use debounced zoom level for certain rendering optimizations. When true,\n\t * `editor.getEfficientZoomLevel()` returns a cached zoom value while the camera is moving,\n\t * reducing re-renders. When false, it always returns the current zoom level.\n\t */\n\treadonly debouncedZoom: boolean\n\t/**\n\t * The number of shapes that must be on the page for the debounced zoom level to be used.\n\t * Defaults to 500 shapes.\n\t */\n\treadonly debouncedZoomThreshold: number\n\t/**\n\t * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down.\n\t * When false, the spacebar will not pan the camera.\n\t */\n\treadonly spacebarPanning: boolean\n\t/**\n\t * Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the\n\t * camera and a static right-click opens the context menu at the release position. When false,\n\t * right-click opens the context menu on press (no drag-to-pan).\n\t */\n\treadonly rightClickPanning: boolean\n\t/**\n\t * The default padding (in pixels) used when zooming to fit content in the viewport.\n\t * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.\n\t * The actual padding used is the minimum of this value and 28% of the viewport width.\n\t * Defaults to 128 pixels.\n\t */\n\treadonly zoomToFitPadding: number\n\t/**\n\t * The distance (in screen pixels) at which shapes snap to guides and other shapes.\n\t */\n\treadonly snapThreshold: number\n\t/**\n\t * Options for the editor's camera. These are the initial camera options.\n\t * Use {@link Editor.setCameraOptions} to update camera options at runtime.\n\t */\n\treadonly camera: Partial<TLCameraOptions>\n\t/**\n\t * Options for the editor's text rendering. These include TipTap configuration and\n\t * font handling. These are the initial text options and cannot be changed at runtime.\n\t */\n\treadonly text: TLTextOptions\n\t/**\n\t * Options for syncing the editor's camera state with the URL. Set to `true` to enable\n\t * with default options, or pass an options object to customize behavior.\n\t *\n\t * @example\n\t * ```tsx\n\t * // Enable with defaults\n\t * <Tldraw options={{ deepLinks: true }} />\n\t *\n\t * // Enable with custom options\n\t * <Tldraw options={{ deepLinks: { param: 'd', debounceMs: 500 } }} />\n\t * ```\n\t */\n\treadonly deepLinks: true | TLDeepLinkOptions | undefined\n\t/**\n\t * Whether the quick-zoom brush preserves its screen-pixel size when the user\n\t * zooms the overview. When true, zooming in shrinks the target viewport (higher\n\t * return zoom); zooming out expands it. When false, the brush keeps the original\n\t * viewport's page dimensions regardless of overview zoom changes.\n\t */\n\treadonly quickZoomPreservesScreenBounds: boolean\n\t/**\n\t * Called before content is written to the clipboard during a copy or cut operation.\n\t * Receives the serialized content (shapes, bindings, assets) and can filter or transform\n\t * it before it reaches the clipboard.\n\t *\n\t * Return a modified `TLContent` object to change what is copied or cut. Return `false` to\n\t * cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`\n\t * (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if\n\t * the hook is async.\n\t *\n\t * @example\n\t * ```tsx\n\t * // Filter out \"locked\" shapes from copy\n\t * onBeforeCopyToClipboard({ content, operation }) {\n\t *     return {\n\t *         ...content,\n\t *         shapes: content.shapes.filter(s => !s.meta.locked),\n\t *         rootShapeIds: content.rootShapeIds.filter(id =>\n\t *             content.shapes.find(s => s.id === id && !s.meta.locked)\n\t *         ),\n\t *     }\n\t * }\n\t * ```\n\t */\n\tonBeforeCopyToClipboard?(\n\t\tinfo: { editor: Editor; content: TLContent } & TLClipboardWriteInfo\n\t): Awaitable<TLContent | false | void>\n\t/**\n\t * Called before pasted content is processed and shapes are created. Receives the parsed\n\t * external content from the clipboard and can filter, transform, or cancel it.\n\t *\n\t * Return `false` to cancel the paste. Return a modified content object to transform it.\n\t * Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of\n\t * those values if the hook is async.\n\t *\n\t * This only fires for clipboard paste operations (keyboard shortcuts and menu actions),\n\t * not for file drops or programmatic `putExternalContent` calls.\n\t *\n\t * @example\n\t * ```tsx\n\t * // Block pasting of image files\n\t * onBeforePasteFromClipboard({ content }) {\n\t *     if (content.type === 'files') {\n\t *         const nonImages = content.files.filter(f => !f.type.startsWith('image/'))\n\t *         if (nonImages.length === 0) return false\n\t *         return { ...content, files: nonImages }\n\t *     }\n\t * }\n\t * ```\n\t */\n\tonBeforePasteFromClipboard?(info: {\n\t\teditor: Editor\n\t\tcontent: TLExternalContent<unknown>\n\t\tsource: 'native-event' | 'clipboard-read'\n\t\tpoint?: VecLike\n\t}): Awaitable<TLExternalContent<unknown> | false | void>\n\t/**\n\t * Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data\n\t * (and before {@link TldrawOptions.onBeforePasteFromClipboard}).\n\t *\n\t * Return `false` to cancel tldraw's default paste handling for this gesture (same convention as\n\t * {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from\n\t * raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.\n\t */\n\tonClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void\n\t/**\n\t * Called when content is dropped on the canvas. Provides the page position\n\t * where the drop occurred and the underlying drag event object.\n\t * Return true to prevent default drop handling (files, URLs, etc.)\n\t */\n\texperimental__onDropOnCanvas?(options: {\n\t\tpoint: VecLike\n\t\tevent: React.DragEvent<Element>\n\t}): boolean\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tlaserFadeoutMs: 500,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n\tdebouncedZoom: true,\n\tdebouncedZoomThreshold: 500,\n\tspacebarPanning: true,\n\trightClickPanning: true,\n\tzoomToFitPadding: 128,\n\tsnapThreshold: 8,\n\tcamera: DEFAULT_CAMERA_OPTIONS,\n\ttext: {},\n\tdeepLinks: undefined,\n\tquickZoomPreservesScreenBounds: true,\n\tonBeforeCopyToClipboard: undefined,\n\tonBeforePasteFromClipboard: undefined,\n\tonClipboardPasteRaw: undefined,\n\texperimental__onDropOnCanvas: undefined,\n} as const satisfies TldrawOptions\n"],
  "mappings": "AACA,SAAwB,gBAAgB;AACxC,SAAS,8BAA8B;AAuRhC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AAAA,EACP,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,MAAM,CAAC;AAAA,EACP,WAAW;AAAA,EACX,gCAAgC;AAAA,EAChC,yBAAyB;AAAA,EACzB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,8BAA8B;AAC/B;",
  "names": []
}