@tldraw/editor 3.8.0-canary.c5f3975feaab → 3.8.0-canary.c738f8c4d6db

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/dist-cjs/index.d.ts +277 -64
  2. package/dist-cjs/index.js +15 -8
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +2 -5
  5. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
  6. package/dist-cjs/lib/config/TLSessionStateSnapshot.js.map +2 -2
  7. package/dist-cjs/lib/config/createTLStore.js +4 -2
  8. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  9. package/dist-cjs/lib/editor/Editor.js +101 -24
  10. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  11. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
  12. package/dist-cjs/lib/editor/managers/TextManager.js +1 -0
  13. package/dist-cjs/lib/editor/managers/TextManager.js.map +2 -2
  14. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +13 -0
  15. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js +66 -0
  17. package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js.map +7 -0
  18. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  19. package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
  20. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  21. package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
  22. package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
  23. package/dist-cjs/lib/exports/exportToSvg.js.map +2 -2
  24. package/dist-cjs/lib/exports/getSvgAsImage.js +83 -0
  25. package/dist-cjs/lib/exports/getSvgAsImage.js.map +7 -0
  26. package/dist-cjs/lib/exports/getSvgJsx.js +16 -3
  27. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  28. package/dist-cjs/lib/hooks/useCanvasEvents.js +19 -8
  29. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  30. package/dist-cjs/lib/hooks/useDocumentEvents.js +1 -3
  31. package/dist-cjs/lib/hooks/useDocumentEvents.js.map +2 -2
  32. package/dist-cjs/lib/hooks/useLocalStore.js +1 -1
  33. package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
  34. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +4 -0
  35. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +3 -3
  36. package/dist-cjs/lib/options.js +2 -2
  37. package/dist-cjs/lib/options.js.map +2 -2
  38. package/dist-cjs/lib/utils/browserCanvasMaxSize.js +75 -0
  39. package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map +7 -0
  40. package/dist-cjs/lib/utils/dom.js +6 -0
  41. package/dist-cjs/lib/utils/dom.js.map +2 -2
  42. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -1
  43. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  44. package/dist-cjs/version.js +3 -3
  45. package/dist-cjs/version.js.map +1 -1
  46. package/dist-esm/index.d.mts +277 -64
  47. package/dist-esm/index.mjs +9 -1
  48. package/dist-esm/index.mjs.map +2 -2
  49. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +2 -5
  50. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  51. package/dist-esm/lib/config/TLSessionStateSnapshot.mjs.map +2 -2
  52. package/dist-esm/lib/config/createTLStore.mjs +4 -2
  53. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  54. package/dist-esm/lib/editor/Editor.mjs +101 -24
  55. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  56. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
  57. package/dist-esm/lib/editor/managers/TextManager.mjs +1 -0
  58. package/dist-esm/lib/editor/managers/TextManager.mjs.map +2 -2
  59. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +13 -0
  60. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  61. package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs +46 -0
  62. package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs.map +7 -0
  63. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  64. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
  65. package/dist-esm/lib/exports/exportToSvg.mjs.map +2 -2
  66. package/dist-esm/lib/exports/getSvgAsImage.mjs +63 -0
  67. package/dist-esm/lib/exports/getSvgAsImage.mjs.map +7 -0
  68. package/dist-esm/lib/exports/getSvgJsx.mjs +16 -3
  69. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  70. package/dist-esm/lib/hooks/useCanvasEvents.mjs +19 -8
  71. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  72. package/dist-esm/lib/hooks/useDocumentEvents.mjs +2 -4
  73. package/dist-esm/lib/hooks/useDocumentEvents.mjs.map +2 -2
  74. package/dist-esm/lib/hooks/useLocalStore.mjs +1 -1
  75. package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
  76. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +4 -0
  77. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +3 -3
  78. package/dist-esm/lib/options.mjs +2 -2
  79. package/dist-esm/lib/options.mjs.map +2 -2
  80. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs +45 -0
  81. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map +7 -0
  82. package/dist-esm/lib/utils/dom.mjs +6 -0
  83. package/dist-esm/lib/utils/dom.mjs.map +2 -2
  84. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -1
  85. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  86. package/dist-esm/version.mjs +3 -3
  87. package/dist-esm/version.mjs.map +1 -1
  88. package/editor.css +2 -1
  89. package/package.json +22 -20
  90. package/src/index.ts +22 -1
  91. package/src/lib/components/default-components/DefaultCanvas.tsx +2 -5
  92. package/src/lib/config/TLSessionStateSnapshot.ts +3 -1
  93. package/src/lib/config/createTLStore.ts +4 -2
  94. package/src/lib/editor/Editor.ts +151 -59
  95. package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +4 -4
  96. package/src/lib/editor/managers/TextManager.ts +1 -0
  97. package/src/lib/editor/shapes/ShapeUtil.ts +49 -1
  98. package/src/lib/editor/shapes/shared/resizeScaled.ts +61 -0
  99. package/src/lib/editor/types/SvgExportContext.tsx +21 -0
  100. package/src/lib/editor/types/emit-types.ts +1 -0
  101. package/src/lib/editor/types/external-content.ts +104 -50
  102. package/src/lib/editor/types/misc-types.ts +55 -2
  103. package/src/lib/exports/StyleEmbedder.ts +1 -1
  104. package/src/lib/exports/exportToSvg.tsx +2 -2
  105. package/src/lib/exports/getSvgAsImage.ts +92 -0
  106. package/src/lib/exports/getSvgJsx.tsx +17 -2
  107. package/src/lib/hooks/useCanvasEvents.ts +20 -8
  108. package/src/lib/hooks/useDocumentEvents.ts +2 -11
  109. package/src/lib/hooks/useLocalStore.ts +1 -1
  110. package/src/lib/hooks/usePassThroughWheelEvents.ts +7 -0
  111. package/src/lib/options.ts +5 -2
  112. package/src/lib/utils/browserCanvasMaxSize.ts +65 -0
  113. package/src/lib/utils/dom.ts +12 -0
  114. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -1
  115. package/src/version.ts +3 -3
@@ -68,6 +68,7 @@ import { TLPropsMigrations } from '@tldraw/tlschema';
68
68
  import { TLRecord } from '@tldraw/tlschema';
69
69
  import { TLScribble } from '@tldraw/tlschema';
70
70
  import { TLShape } from '@tldraw/tlschema';
71
+ import { TLShapeCrop } from '@tldraw/tlschema';
71
72
  import { TLShapeId } from '@tldraw/tlschema';
72
73
  import { TLShapePartial } from '@tldraw/tlschema';
73
74
  import { TLStore } from '@tldraw/tlschema';
@@ -90,6 +91,8 @@ import { useValue } from '@tldraw/state-react';
90
91
  import { VecModel } from '@tldraw/tlschema';
91
92
  import { whyAmIRunning } from '@tldraw/state';
92
93
 
94
+ /* Excluded from this release type: activeElementShouldCaptureKeys */
95
+
93
96
  /**
94
97
  * Get the angle of a point on an arc.
95
98
  * @param fromAngle - The angle from center to arc's start point (A) on the circle
@@ -536,6 +539,8 @@ export declare type BoxLike = Box | BoxModel;
536
539
  */
537
540
  export declare function canonicalizeRotation(a: number): number;
538
541
 
542
+ /* Excluded from this release type: CanvasMaxSize */
543
+
539
544
  /**
540
545
  * Get the center of a circle from three points.
541
546
  *
@@ -615,6 +620,8 @@ export declare function clamp(n: number, min: number, max: number): number;
615
620
  */
616
621
  export declare function clampRadians(r: number): number;
617
622
 
623
+ /* Excluded from this release type: clampToBrowserMaxCanvasSize */
624
+
618
625
  /** @public */
619
626
  export declare class ClickManager {
620
627
  editor: Editor;
@@ -847,6 +854,7 @@ export declare const defaultTldrawOptions: {
847
854
  readonly edgeScrollDistance: 8;
848
855
  readonly edgeScrollEaseDuration: 200;
849
856
  readonly edgeScrollSpeed: 25;
857
+ readonly enableToolbarKeyboardShortcuts: true;
850
858
  readonly exportProvider: ExoticComponent< {
851
859
  children?: ReactNode;
852
860
  }>;
@@ -877,7 +885,6 @@ export declare const defaultTldrawOptions: {
877
885
  readonly maxExportDelayMs: 5000;
878
886
  readonly maxFilesAtOnce: 100;
879
887
  readonly maxPages: 40;
880
- readonly maxPointsPerDrawShape: 500;
881
888
  readonly maxShapesPerPage: 4000;
882
889
  readonly multiClickDurationMs: 200;
883
890
  readonly temporaryAssetPreviewLifetimeMs: 180000;
@@ -1113,6 +1120,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1113
1120
  getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>;
1114
1121
  getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>;
1115
1122
  getShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): T;
1123
+ /**
1124
+ * Returns true if the editor has a shape util for the given shape / shape type.
1125
+ *
1126
+ * @param shape - A shape, shape partial, or shape type.
1127
+ */
1128
+ hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean;
1129
+ hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean;
1130
+ hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
1116
1131
  /**
1117
1132
  * A map of shape utility classes (TLShapeUtils) by shape type.
1118
1133
  *
@@ -1365,8 +1380,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1365
1380
  *
1366
1381
  * @example
1367
1382
  * ```ts
1368
- * state.getStateDescendant('select')
1369
- * state.getStateDescendant('select.brushing')
1383
+ * editor.getStateDescendant('select')
1384
+ * editor.getStateDescendant('select.brushing')
1370
1385
  * ```
1371
1386
  *
1372
1387
  * @param path - The descendant's path of state ids, separated by periods.
@@ -2348,6 +2363,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2348
2363
  */
2349
2364
  getAsset<T extends TLAsset>(asset: T | T['id']): T | undefined;
2350
2365
  resolveAssetUrl(assetId: null | TLAssetId, context: {
2366
+ dpr?: number;
2351
2367
  screenScale?: number;
2352
2368
  shouldResolveToOriginal?: boolean;
2353
2369
  }): Promise<null | string>;
@@ -2355,7 +2371,10 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2355
2371
  * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
2356
2372
  * asset.
2357
2373
  */
2358
- uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<string>;
2374
+ uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<{
2375
+ meta?: JsonObject;
2376
+ src: string;
2377
+ }>;
2359
2378
  private _getShapeGeometryCache;
2360
2379
  /**
2361
2380
  * Get the geometry of a shape.
@@ -3426,7 +3445,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3426
3445
  *
3427
3446
  * @public
3428
3447
  */
3429
- registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(type: T, handler: ((info: TLExternalAssetContent & {
3448
+ registerExternalAssetHandler<T extends TLExternalAsset['type']>(type: T, handler: ((info: TLExternalAsset & {
3430
3449
  type: T;
3431
3450
  }) => Promise<TLAsset>) | null): this;
3432
3451
  /**
@@ -3472,8 +3491,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3472
3491
  * @param info - Info about the external content.
3473
3492
  * @returns The asset.
3474
3493
  */
3475
- getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined>;
3476
- hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean;
3494
+ getAssetForExternalContent(info: TLExternalAsset): Promise<TLAsset | undefined>;
3495
+ hasExternalAssetHandler(type: TLExternalAsset['type']): boolean;
3477
3496
  /* Excluded from this release type: externalContentHandlers */
3478
3497
  /**
3479
3498
  * Register an external content handler. This handler will be called when the editor receives
@@ -3494,9 +3513,9 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3494
3513
  *
3495
3514
  * @public
3496
3515
  */
3497
- registerExternalContentHandler<T extends TLExternalContent<E>['type'], E>(type: T, handler: ((info: T extends TLExternalContent<E>['type'] ? TLExternalContent<E> & {
3516
+ registerExternalContentHandler<T extends TLExternalContent<E>['type'], E>(type: T, handler: ((info: T extends TLExternalContent<E>['type'] ? Extract<TLExternalContent<E>, {
3498
3517
  type: T;
3499
- } : TLExternalContent<E>) => void) | null): this;
3518
+ }> : TLExternalContent<E>) => void) | null): this;
3500
3519
  /**
3501
3520
  * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.
3502
3521
  *
@@ -3538,7 +3557,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3538
3557
  *
3539
3558
  * @public
3540
3559
  */
3541
- getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3560
+ getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
3542
3561
  height: number;
3543
3562
  svg: SVGSVGElement;
3544
3563
  width: number;
@@ -3553,13 +3572,27 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3553
3572
  *
3554
3573
  * @public
3555
3574
  */
3556
- getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3575
+ getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
3557
3576
  height: number;
3558
3577
  svg: string;
3559
3578
  width: number;
3560
3579
  } | undefined>;
3561
3580
  /** @deprecated Use {@link Editor.getSvgString} or {@link Editor.getSvgElement} instead. */
3562
- getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<SVGSVGElement | undefined>;
3581
+ getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<SVGSVGElement | undefined>;
3582
+ /**
3583
+ * Get an exported image of the given shapes.
3584
+ *
3585
+ * @param shapes - The shapes (or shape ids) to export.
3586
+ * @param opts - Options for the export.
3587
+ *
3588
+ * @returns A blob of the image.
3589
+ * @public
3590
+ */
3591
+ toImage(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3592
+ blob: Blob;
3593
+ height: number;
3594
+ width: number;
3595
+ }>;
3563
3596
  /**
3564
3597
  * The app's current input state.
3565
3598
  *
@@ -4073,6 +4106,15 @@ export declare function getPolygonVertices(width: number, height: number, sides:
4073
4106
  /** @public */
4074
4107
  export declare function getSnapshot(store: TLStore): TLEditorSnapshot;
4075
4108
 
4109
+ /** @public */
4110
+ export declare function getSvgAsImage(svgString: string, options: {
4111
+ height: number;
4112
+ pixelRatio?: number;
4113
+ quality?: number;
4114
+ type: 'jpeg' | 'png' | 'webp';
4115
+ width: number;
4116
+ }): Promise<Blob | null>;
4117
+
4076
4118
  /**
4077
4119
  * Turn an array of points into a path of quadradic curves.
4078
4120
  *
@@ -4652,6 +4694,23 @@ export declare interface ResizeBoxOptions {
4652
4694
  maxHeight?: number;
4653
4695
  }
4654
4696
 
4697
+ /**
4698
+ * Resize a shape that has a scale prop.
4699
+ *
4700
+ * @param shape - The shape to resize
4701
+ * @param info - The resize info
4702
+ *
4703
+ * @public */
4704
+ export declare function resizeScaled(shape: TLBaseShape<any, {
4705
+ scale: number;
4706
+ }>, { initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>): {
4707
+ props: {
4708
+ scale: number;
4709
+ };
4710
+ x: number;
4711
+ y: number;
4712
+ };
4713
+
4655
4714
  /** @public */
4656
4715
  export declare const ROTATE_CORNER_TO_SELECTION_CORNER: {
4657
4716
  readonly bottom_left_rotate: "bottom_left";
@@ -4755,7 +4814,17 @@ export declare function setUserPreferences(user: TLUserPreferences): void;
4755
4814
  /** @public */
4756
4815
  export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
4757
4816
  editor: Editor;
4817
+ /** Configure this shape utils {@link ShapeUtil.options | `options`}. */
4818
+ static configure<T extends TLShapeUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
4819
+ options: infer Options;
4820
+ } ? Partial<Options> : never): T;
4758
4821
  constructor(editor: Editor);
4822
+ /**
4823
+ * Options for this shape util. If you're implementing a custom shape util, you can override
4824
+ * this to provide customization options for your shape. If using an existing shape util, you
4825
+ * can customizing this by calling {@link ShapeUtil.configure}.
4826
+ */
4827
+ options: {};
4759
4828
  /**
4760
4829
  * Props allow you to define the shape's properties in a way that the editor can understand.
4761
4830
  * This has two main uses:
@@ -5023,6 +5092,15 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
5023
5092
  * @public
5024
5093
  */
5025
5094
  onBeforeUpdate?(prev: Shape, next: Shape): Shape | void;
5095
+ /**
5096
+ * A callback called when a shape changes from a crop.
5097
+ *
5098
+ * @param shape - The shape at the start of the crop.
5099
+ * @param info - Info about the crop.
5100
+ * @returns A change to apply to the shape, or void.
5101
+ * @public
5102
+ */
5103
+ onCrop?(shape: Shape, info: TLCropInfo<Shape>): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void;
5026
5104
  /**
5027
5105
  * A callback called when some other shapes are dragged over this one.
5028
5106
  *
@@ -5404,10 +5482,27 @@ export declare interface SvgExportContext {
5404
5482
  * method depending on your use-case.
5405
5483
  */
5406
5484
  waitUntil(promise: Promise<void>): void;
5485
+ /**
5486
+ * Resolve an asset URL in the context of this export. Supply the asset ID and the width in
5487
+ * shape-pixels it'll be displayed at, and this will resolve the asset according to the export
5488
+ * options.
5489
+ */
5490
+ resolveAssetUrl(assetId: TLAssetId, width: number): Promise<null | string>;
5407
5491
  /**
5408
5492
  * Whether the export should be in dark mode.
5409
5493
  */
5410
5494
  readonly isDarkMode: boolean;
5495
+ /**
5496
+ * The scale of the export - how much CSS pixels will be scaled up/down by.
5497
+ */
5498
+ readonly scale: number;
5499
+ /**
5500
+ * Use this value to optionally downscale images in the export. If we're exporting directly to
5501
+ * an SVG, this will usually be null, and you shouldn't downscale images. If the export is to a
5502
+ * raster format like PNG, this will be the number of raster pixels in the resulting bitmap per
5503
+ * CSS pixel in the resulting SVG.
5504
+ */
5505
+ readonly pixelRatio: null | number;
5411
5506
  }
5412
5507
 
5413
5508
  /** @public */
@@ -5498,6 +5593,12 @@ export declare interface TLBaseEventInfo {
5498
5593
  accelKey: boolean;
5499
5594
  }
5500
5595
 
5596
+ /** @public */
5597
+ export declare interface TLBaseExternalContent {
5598
+ sources?: TLExternalContentSource[];
5599
+ point?: VecLike;
5600
+ }
5601
+
5501
5602
  /** @public */
5502
5603
  export declare interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends BindingUtil<T> = BindingUtil<T>> {
5503
5604
  new (editor: Editor): U;
@@ -5663,6 +5764,24 @@ export declare interface TLContent {
5663
5764
  schema: SerializedSchema;
5664
5765
  }
5665
5766
 
5767
+ /**
5768
+ * Info about a crop.
5769
+ * @param handle - The handle being dragged.
5770
+ * @param change - The distance the handle is moved.
5771
+ * @param initialShape - The shape at the start of the resize.
5772
+ * @public
5773
+ */
5774
+ export declare interface TLCropInfo<T extends TLShape> {
5775
+ handle: SelectionHandle;
5776
+ change: Vec;
5777
+ crop: TLShapeCrop;
5778
+ uncroppedSize: {
5779
+ h: number;
5780
+ w: number;
5781
+ };
5782
+ initialShape: T;
5783
+ }
5784
+
5666
5785
  /** @public */
5667
5786
  export declare interface TLCursorProps {
5668
5787
  className?: string;
@@ -5876,7 +5995,6 @@ export declare interface TldrawOptions {
5876
5995
  readonly dragDistanceSquared: number;
5877
5996
  readonly defaultSvgPadding: number;
5878
5997
  readonly cameraSlideFriction: number;
5879
- readonly maxPointsPerDrawShape: number;
5880
5998
  readonly gridSteps: readonly {
5881
5999
  readonly mid: number;
5882
6000
  readonly min: number;
@@ -5915,6 +6033,10 @@ export declare interface TldrawOptions {
5915
6033
  readonly exportProvider: ComponentType<{
5916
6034
  children: React.ReactNode;
5917
6035
  }>;
6036
+ /**
6037
+ * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
6038
+ */
6039
+ readonly enableToolbarKeyboardShortcuts: boolean;
5918
6040
  }
5919
6041
 
5920
6042
  /** @public */
@@ -6016,6 +6138,13 @@ export declare interface TLEditorSnapshot {
6016
6138
  session: TLSessionStateSnapshot;
6017
6139
  }
6018
6140
 
6141
+ /** @public */
6142
+ export declare interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
6143
+ type: 'embed';
6144
+ url: string;
6145
+ embed: EmbedDefinition;
6146
+ }
6147
+
6019
6148
  /** @public */
6020
6149
  export declare type TLEnterEventHandler = (info: any, from: string) => void;
6021
6150
 
@@ -6041,6 +6170,13 @@ export declare interface TLErrorBoundaryProps {
6041
6170
  fallback: TLErrorFallbackComponent;
6042
6171
  }
6043
6172
 
6173
+ /** @public */
6174
+ export declare interface TLErrorExternalContentSource {
6175
+ type: 'error';
6176
+ data: null | string;
6177
+ reason: string;
6178
+ }
6179
+
6044
6180
  /** @public */
6045
6181
  export declare type TLErrorFallbackComponent = ComponentType<{
6046
6182
  editor?: Editor;
@@ -6086,6 +6222,7 @@ export declare interface TLEventMap {
6086
6222
  }];
6087
6223
  'stop-camera-animation': [];
6088
6224
  'stop-following': [];
6225
+ 'before-event': [TLEventInfo];
6089
6226
  event: [TLEventInfo];
6090
6227
  tick: [number];
6091
6228
  frame: [number];
@@ -6100,58 +6237,46 @@ export declare type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TL
6100
6237
  /** @public */
6101
6238
  export declare type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'tick' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
6102
6239
 
6240
+ /** @public */
6241
+ export declare interface TLExcalidrawExternalContent extends TLBaseExternalContent {
6242
+ type: 'excalidraw';
6243
+ content: any;
6244
+ }
6245
+
6246
+ /** @public */
6247
+ export declare interface TLExcalidrawExternalContentSource {
6248
+ type: 'excalidraw';
6249
+ data: any;
6250
+ }
6251
+
6103
6252
  /** @public */
6104
6253
  export declare type TLExitEventHandler = (info: any, to: string) => void;
6105
6254
 
6106
6255
  /** @public */
6107
- export declare type TLExternalAssetContent = {
6108
- assetId?: TLAssetId;
6109
- file: File;
6256
+ export declare type TLExportType = 'jpeg' | 'png' | 'svg' | 'webp';
6257
+
6258
+ /** @public */
6259
+ export declare type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset;
6260
+
6261
+ /** @public */
6262
+ export declare type TLExternalContent<EmbedDefinition> = TLEmbedExternalContent<EmbedDefinition> | TLExcalidrawExternalContent | TLFilesExternalContent | TLSvgTextExternalContent | TLTextExternalContent | TLTldrawExternalContent | TLUrlExternalContent;
6263
+
6264
+ /** @public */
6265
+ export declare type TLExternalContentSource = TLErrorExternalContentSource | TLExcalidrawExternalContentSource | TLTextExternalContentSource | TLTldrawExternalContentSource;
6266
+
6267
+ /** @public */
6268
+ export declare interface TLFileExternalAsset {
6110
6269
  type: 'file';
6111
- } | {
6112
- type: 'url';
6113
- url: string;
6114
- };
6270
+ file: File;
6271
+ assetId?: TLAssetId;
6272
+ }
6115
6273
 
6116
6274
  /** @public */
6117
- export declare type TLExternalContent<EmbedDefinition> = {
6118
- point?: VecLike;
6119
- sources?: TLExternalContentSource[];
6120
- } & ({
6121
- embed: EmbedDefinition;
6122
- type: 'embed';
6123
- url: string;
6124
- } | {
6275
+ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
6276
+ type: 'files';
6125
6277
  files: File[];
6126
6278
  ignoreParent: boolean;
6127
- type: 'files';
6128
- } | {
6129
- text: string;
6130
- type: 'svg-text';
6131
- } | {
6132
- text: string;
6133
- type: 'text';
6134
- } | {
6135
- type: 'url';
6136
- url: string;
6137
- });
6138
-
6139
- /** @public */
6140
- export declare type TLExternalContentSource = {
6141
- data: any;
6142
- type: 'excalidraw';
6143
- } | {
6144
- data: null | string;
6145
- reason: string;
6146
- type: 'error';
6147
- } | {
6148
- data: string;
6149
- subtype: 'html' | 'json' | 'text' | 'url';
6150
- type: 'text';
6151
- } | {
6152
- data: TLContent;
6153
- type: 'tldraw';
6154
- };
6279
+ }
6155
6280
 
6156
6281
  /** @public */
6157
6282
  export declare interface TLGridProps {
@@ -6209,15 +6334,16 @@ export declare interface TLHistoryMark {
6209
6334
  }
6210
6335
 
6211
6336
  /** @public */
6212
- export declare interface TLImageExportOptions {
6213
- bounds?: Box;
6214
- scale?: number;
6337
+ export declare interface TLImageExportOptions extends TLSvgExportOptions {
6338
+ /**
6339
+ * If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of
6340
+ * the export. This is a number between 0 and 1.
6341
+ */
6215
6342
  quality?: number;
6216
- pixelRatio?: number;
6217
- background?: boolean;
6218
- padding?: number;
6219
- darkMode?: boolean;
6220
- preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
6343
+ /**
6344
+ * The format to export as. Defaults to 'png'.
6345
+ */
6346
+ format?: TLExportType;
6221
6347
  }
6222
6348
 
6223
6349
  /** @public */
@@ -6721,12 +6847,75 @@ export declare type TLStoreWithStatus = {
6721
6847
  readonly store: TLStore;
6722
6848
  };
6723
6849
 
6850
+ /** @public */
6851
+ export declare interface TLSvgExportOptions {
6852
+ /**
6853
+ * The bounding box, in page coordinates, of the area being exported.
6854
+ */
6855
+ bounds?: Box;
6856
+ /**
6857
+ * The logical scale of the export. This scales the resulting size of the SVG being generated.
6858
+ */
6859
+ scale?: number;
6860
+ /**
6861
+ * When exporting an SVG, the expected pixel ratio of the export will be passed in to
6862
+ * {@link @tldraw/tlschema#TLAssetStore.resolve} as the `dpr` property, so that assets can be
6863
+ * downscaled to the appropriate resolution.
6864
+ *
6865
+ * When exporting to a bitmap image format, the size of the resulting image will be multiplied
6866
+ * by this number.
6867
+ *
6868
+ * For SVG exports, this defaults to undefined - which means we'll request original-quality
6869
+ * assets. For bitmap exports, this defaults to 2.
6870
+ */
6871
+ pixelRatio?: number;
6872
+ /**
6873
+ * Should the background color be included in the export? If false, the generated image will be
6874
+ * transparent (if exporting to a format that supports transparency).
6875
+ */
6876
+ background?: boolean;
6877
+ /**
6878
+ * How much padding to include around the bounds of exports? Defaults to 32px.
6879
+ */
6880
+ padding?: number;
6881
+ /**
6882
+ * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the
6883
+ * current instance's dark mode setting.
6884
+ */
6885
+ darkMode?: boolean;
6886
+ /**
6887
+ * The
6888
+ * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio | `preserveAspectRatio` }
6889
+ * attribute of the SVG element.
6890
+ */
6891
+ preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
6892
+ }
6893
+
6724
6894
  /**
6725
6895
  * @public
6726
6896
  * @deprecated use {@link TLImageExportOptions} instead
6727
6897
  */
6728
6898
  export declare type TLSvgOptions = TLImageExportOptions;
6729
6899
 
6900
+ /** @public */
6901
+ export declare interface TLSvgTextExternalContent extends TLBaseExternalContent {
6902
+ type: 'svg-text';
6903
+ text: string;
6904
+ }
6905
+
6906
+ /** @public */
6907
+ export declare interface TLTextExternalContent extends TLBaseExternalContent {
6908
+ type: 'text';
6909
+ text: string;
6910
+ }
6911
+
6912
+ /** @public */
6913
+ export declare interface TLTextExternalContentSource {
6914
+ type: 'text';
6915
+ data: string;
6916
+ subtype: 'html' | 'json' | 'text' | 'url';
6917
+ }
6918
+
6730
6919
  /** @public */
6731
6920
  export declare type TLTickEvent = (info: TLTickEventInfo) => void;
6732
6921
 
@@ -6744,6 +6933,30 @@ export declare interface TLTickEventInfo {
6744
6933
  */
6745
6934
  export declare const tltime: Timers;
6746
6935
 
6936
+ /** @public */
6937
+ export declare interface TLTldrawExternalContent extends TLBaseExternalContent {
6938
+ type: 'tldraw';
6939
+ content: TLContent;
6940
+ }
6941
+
6942
+ /** @public */
6943
+ export declare interface TLTldrawExternalContentSource {
6944
+ type: 'tldraw';
6945
+ data: TLContent;
6946
+ }
6947
+
6948
+ /** @public */
6949
+ export declare interface TLUrlExternalAsset {
6950
+ type: 'url';
6951
+ url: string;
6952
+ }
6953
+
6954
+ /** @public */
6955
+ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
6956
+ type: 'url';
6957
+ url: string;
6958
+ }
6959
+
6747
6960
  /** @public */
6748
6961
  export declare interface TLUser {
6749
6962
  readonly userPreferences: Signal<TLUserPreferences>;
package/dist-cjs/index.js CHANGED
@@ -17,8 +17,8 @@ var __copyProps = (to, from, except, desc) => {
17
17
  };
18
18
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var src_exports = {};
21
- __export(src_exports, {
20
+ var index_exports = {};
21
+ __export(index_exports, {
22
22
  Arc2d: () => import_Arc2d.Arc2d,
23
23
  BaseBoxShapeTool: () => import_BaseBoxShapeTool.BaseBoxShapeTool,
24
24
  BaseBoxShapeUtil: () => import_BaseBoxShapeUtil.BaseBoxShapeUtil,
@@ -97,6 +97,7 @@ __export(src_exports, {
97
97
  USER_COLORS: () => import_TLUserPreferences.USER_COLORS,
98
98
  UserPreferencesManager: () => import_UserPreferencesManager.UserPreferencesManager,
99
99
  Vec: () => import_Vec.Vec,
100
+ activeElementShouldCaptureKeys: () => import_dom.activeElementShouldCaptureKeys,
100
101
  angleDistance: () => import_utils2.angleDistance,
101
102
  applyRotationToSnapshotShapes: () => import_rotation.applyRotationToSnapshotShapes,
102
103
  approximately: () => import_utils2.approximately,
@@ -107,6 +108,7 @@ __export(src_exports, {
107
108
  centerOfCircleFromThreePoints: () => import_utils2.centerOfCircleFromThreePoints,
108
109
  clamp: () => import_utils2.clamp,
109
110
  clampRadians: () => import_utils2.clampRadians,
111
+ clampToBrowserMaxCanvasSize: () => import_browserCanvasMaxSize.clampToBrowserMaxCanvasSize,
110
112
  clockwiseAngleDist: () => import_utils2.clockwiseAngleDist,
111
113
  computed: () => import_state.computed,
112
114
  coreShapes: () => import_defaultShapes.coreShapes,
@@ -137,6 +139,7 @@ __export(src_exports, {
137
139
  getPolygonVertices: () => import_utils2.getPolygonVertices,
138
140
  getRotationSnapshot: () => import_rotation.getRotationSnapshot,
139
141
  getSnapshot: () => import_TLEditorSnapshot.getSnapshot,
142
+ getSvgAsImage: () => import_getSvgAsImage.getSvgAsImage,
140
143
  getSvgPathFromPoints: () => import_getSvgPathFromPoints.getSvgPathFromPoints,
141
144
  getUserPreferences: () => import_TLUserPreferences.getUserPreferences,
142
145
  hardReset: () => import_hardReset.hardReset,
@@ -173,6 +176,7 @@ __export(src_exports, {
173
176
  refreshPage: () => import_refreshPage.refreshPage,
174
177
  releasePointerCapture: () => import_dom.releasePointerCapture,
175
178
  resizeBox: () => import_resizeBox.resizeBox,
179
+ resizeScaled: () => import_resizeScaled.resizeScaled,
176
180
  rotateSelectionHandle: () => import_Box.rotateSelectionHandle,
177
181
  runtime: () => import_runtime.runtime,
178
182
  sanitizeId: () => import_useSafeId.sanitizeId,
@@ -230,7 +234,7 @@ __export(src_exports, {
230
234
  userTypeValidator: () => import_TLUserPreferences.userTypeValidator,
231
235
  whyAmIRunning: () => import_state.whyAmIRunning
232
236
  });
233
- module.exports = __toCommonJS(src_exports);
237
+ module.exports = __toCommonJS(index_exports);
234
238
  var import_utils = require("@tldraw/utils");
235
239
  var import_at = require("core-js/stable/array/at.js");
236
240
  var import_flat_map = require("core-js/stable/array/flat-map.js");
@@ -239,11 +243,12 @@ var import_at2 = require("core-js/stable/string/at.js");
239
243
  var import_replace_all = require("core-js/stable/string/replace-all.js");
240
244
  var import_state = require("@tldraw/state");
241
245
  var import_state_react = require("@tldraw/state-react");
246
+ var import_resizeScaled = require("./lib/editor/shapes/shared/resizeScaled");
242
247
  var import_LocalIndexedDb = require("./lib/utils/sync/LocalIndexedDb");
243
- __reExport(src_exports, require("@tldraw/store"), module.exports);
244
- __reExport(src_exports, require("@tldraw/tlschema"), module.exports);
245
- __reExport(src_exports, require("@tldraw/utils"), module.exports);
246
- __reExport(src_exports, require("@tldraw/validate"), module.exports);
248
+ __reExport(index_exports, require("@tldraw/store"), module.exports);
249
+ __reExport(index_exports, require("@tldraw/tlschema"), module.exports);
250
+ __reExport(index_exports, require("@tldraw/utils"), module.exports);
251
+ __reExport(index_exports, require("@tldraw/validate"), module.exports);
247
252
  var import_TldrawEditor = require("./lib/TldrawEditor");
248
253
  var import_ErrorBoundary = require("./lib/components/ErrorBoundary");
249
254
  var import_HTMLContainer = require("./lib/components/HTMLContainer");
@@ -294,6 +299,7 @@ var import_Pointing = require("./lib/editor/tools/BaseBoxShapeTool/children/Poin
294
299
  var import_StateNode = require("./lib/editor/tools/StateNode");
295
300
  var import_SvgExportContext = require("./lib/editor/types/SvgExportContext");
296
301
  var import_event_types = require("./lib/editor/types/event-types");
302
+ var import_getSvgAsImage = require("./lib/exports/getSvgAsImage");
297
303
  var import_environment = require("./lib/globals/environment");
298
304
  var import_menus = require("./lib/globals/menus");
299
305
  var import_time = require("./lib/globals/time");
@@ -339,6 +345,7 @@ var import_intersect = require("./lib/primitives/intersect");
339
345
  var import_utils2 = require("./lib/primitives/utils");
340
346
  var import_SharedStylesMap = require("./lib/utils/SharedStylesMap");
341
347
  var import_assets = require("./lib/utils/assets");
348
+ var import_browserCanvasMaxSize = require("./lib/utils/browserCanvasMaxSize");
342
349
  var import_debug_flags = require("./lib/utils/debug-flags");
343
350
  var import_deepLinks = require("./lib/utils/deepLinks");
344
351
  var import_dom = require("./lib/utils/dom");
@@ -359,7 +366,7 @@ function debugEnableLicensing() {
359
366
  }
360
367
  (0, import_utils.registerTldrawLibraryVersion)(
361
368
  "@tldraw/editor",
362
- "3.8.0-canary.c5f3975feaab",
369
+ "3.8.0-canary.c738f8c4d6db",
363
370
  "cjs"
364
371
  );
365
372
  //# sourceMappingURL=index.js.map