@tldraw/editor 3.8.0-canary.e81e3057aaac → 3.8.0-canary.f50a5a203139

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 (108) hide show
  1. package/dist-cjs/index.d.ts +259 -60
  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 +98 -23
  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.map +2 -2
  15. package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js +66 -0
  16. package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js.map +7 -0
  17. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  18. package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
  19. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  20. package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
  21. package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
  22. package/dist-cjs/lib/exports/exportToSvg.js.map +2 -2
  23. package/dist-cjs/lib/exports/getSvgAsImage.js +83 -0
  24. package/dist-cjs/lib/exports/getSvgAsImage.js.map +7 -0
  25. package/dist-cjs/lib/exports/getSvgJsx.js +16 -3
  26. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  27. package/dist-cjs/lib/hooks/useDocumentEvents.js +1 -3
  28. package/dist-cjs/lib/hooks/useDocumentEvents.js.map +2 -2
  29. package/dist-cjs/lib/hooks/useLocalStore.js +1 -1
  30. package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
  31. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +4 -0
  32. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +3 -3
  33. package/dist-cjs/lib/options.js +3 -1
  34. package/dist-cjs/lib/options.js.map +2 -2
  35. package/dist-cjs/lib/utils/browserCanvasMaxSize.js +75 -0
  36. package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map +7 -0
  37. package/dist-cjs/lib/utils/dom.js +6 -0
  38. package/dist-cjs/lib/utils/dom.js.map +2 -2
  39. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -1
  40. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  41. package/dist-cjs/version.js +3 -3
  42. package/dist-cjs/version.js.map +1 -1
  43. package/dist-esm/index.d.mts +259 -60
  44. package/dist-esm/index.mjs +9 -1
  45. package/dist-esm/index.mjs.map +2 -2
  46. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +2 -5
  47. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  48. package/dist-esm/lib/config/TLSessionStateSnapshot.mjs.map +2 -2
  49. package/dist-esm/lib/config/createTLStore.mjs +4 -2
  50. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  51. package/dist-esm/lib/editor/Editor.mjs +98 -23
  52. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  53. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
  54. package/dist-esm/lib/editor/managers/TextManager.mjs +1 -0
  55. package/dist-esm/lib/editor/managers/TextManager.mjs.map +2 -2
  56. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  57. package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs +46 -0
  58. package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs.map +7 -0
  59. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  60. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
  61. package/dist-esm/lib/exports/exportToSvg.mjs.map +2 -2
  62. package/dist-esm/lib/exports/getSvgAsImage.mjs +63 -0
  63. package/dist-esm/lib/exports/getSvgAsImage.mjs.map +7 -0
  64. package/dist-esm/lib/exports/getSvgJsx.mjs +16 -3
  65. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  66. package/dist-esm/lib/hooks/useDocumentEvents.mjs +2 -4
  67. package/dist-esm/lib/hooks/useDocumentEvents.mjs.map +2 -2
  68. package/dist-esm/lib/hooks/useLocalStore.mjs +1 -1
  69. package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
  70. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +4 -0
  71. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +3 -3
  72. package/dist-esm/lib/options.mjs +3 -1
  73. package/dist-esm/lib/options.mjs.map +2 -2
  74. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs +45 -0
  75. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map +7 -0
  76. package/dist-esm/lib/utils/dom.mjs +6 -0
  77. package/dist-esm/lib/utils/dom.mjs.map +2 -2
  78. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -1
  79. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  80. package/dist-esm/version.mjs +3 -3
  81. package/dist-esm/version.mjs.map +1 -1
  82. package/editor.css +2 -1
  83. package/package.json +22 -20
  84. package/src/index.ts +20 -1
  85. package/src/lib/components/default-components/DefaultCanvas.tsx +2 -5
  86. package/src/lib/config/TLSessionStateSnapshot.ts +3 -1
  87. package/src/lib/config/createTLStore.ts +4 -2
  88. package/src/lib/editor/Editor.ts +147 -57
  89. package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +4 -4
  90. package/src/lib/editor/managers/TextManager.ts +1 -0
  91. package/src/lib/editor/shapes/ShapeUtil.ts +30 -1
  92. package/src/lib/editor/shapes/shared/resizeScaled.ts +61 -0
  93. package/src/lib/editor/types/SvgExportContext.tsx +21 -0
  94. package/src/lib/editor/types/emit-types.ts +1 -0
  95. package/src/lib/editor/types/external-content.ts +90 -50
  96. package/src/lib/editor/types/misc-types.ts +55 -2
  97. package/src/lib/exports/StyleEmbedder.ts +1 -1
  98. package/src/lib/exports/exportToSvg.tsx +2 -2
  99. package/src/lib/exports/getSvgAsImage.ts +92 -0
  100. package/src/lib/exports/getSvgJsx.tsx +17 -2
  101. package/src/lib/hooks/useDocumentEvents.ts +2 -11
  102. package/src/lib/hooks/useLocalStore.ts +1 -1
  103. package/src/lib/hooks/usePassThroughWheelEvents.ts +7 -0
  104. package/src/lib/options.ts +11 -0
  105. package/src/lib/utils/browserCanvasMaxSize.ts +65 -0
  106. package/src/lib/utils/dom.ts +12 -0
  107. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -1
  108. 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
  }>;
@@ -880,6 +888,7 @@ export declare const defaultTldrawOptions: {
880
888
  readonly maxPointsPerDrawShape: 500;
881
889
  readonly maxShapesPerPage: 4000;
882
890
  readonly multiClickDurationMs: 200;
891
+ readonly noteShapeResizeMode: "none";
883
892
  readonly temporaryAssetPreviewLifetimeMs: 180000;
884
893
  readonly textShadowLod: 0.35;
885
894
  };
@@ -1113,6 +1122,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1113
1122
  getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>;
1114
1123
  getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>;
1115
1124
  getShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): T;
1125
+ /**
1126
+ * Returns true if the editor has a shape util for the given shape / shape type.
1127
+ *
1128
+ * @param shape - A shape, shape partial, or shape type.
1129
+ */
1130
+ hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean;
1131
+ hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean;
1132
+ hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
1116
1133
  /**
1117
1134
  * A map of shape utility classes (TLShapeUtils) by shape type.
1118
1135
  *
@@ -1365,8 +1382,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1365
1382
  *
1366
1383
  * @example
1367
1384
  * ```ts
1368
- * state.getStateDescendant('select')
1369
- * state.getStateDescendant('select.brushing')
1385
+ * editor.getStateDescendant('select')
1386
+ * editor.getStateDescendant('select.brushing')
1370
1387
  * ```
1371
1388
  *
1372
1389
  * @param path - The descendant's path of state ids, separated by periods.
@@ -2348,6 +2365,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2348
2365
  */
2349
2366
  getAsset<T extends TLAsset>(asset: T | T['id']): T | undefined;
2350
2367
  resolveAssetUrl(assetId: null | TLAssetId, context: {
2368
+ dpr?: number;
2351
2369
  screenScale?: number;
2352
2370
  shouldResolveToOriginal?: boolean;
2353
2371
  }): Promise<null | string>;
@@ -2355,7 +2373,10 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2355
2373
  * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
2356
2374
  * asset.
2357
2375
  */
2358
- uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<string>;
2376
+ uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<{
2377
+ meta?: JsonObject;
2378
+ src: string;
2379
+ }>;
2359
2380
  private _getShapeGeometryCache;
2360
2381
  /**
2361
2382
  * Get the geometry of a shape.
@@ -3426,7 +3447,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3426
3447
  *
3427
3448
  * @public
3428
3449
  */
3429
- registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(type: T, handler: ((info: TLExternalAssetContent & {
3450
+ registerExternalAssetHandler<T extends TLExternalAsset['type']>(type: T, handler: ((info: TLExternalAsset & {
3430
3451
  type: T;
3431
3452
  }) => Promise<TLAsset>) | null): this;
3432
3453
  /**
@@ -3472,8 +3493,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3472
3493
  * @param info - Info about the external content.
3473
3494
  * @returns The asset.
3474
3495
  */
3475
- getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined>;
3476
- hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean;
3496
+ getAssetForExternalContent(info: TLExternalAsset): Promise<TLAsset | undefined>;
3497
+ hasExternalAssetHandler(type: TLExternalAsset['type']): boolean;
3477
3498
  /* Excluded from this release type: externalContentHandlers */
3478
3499
  /**
3479
3500
  * Register an external content handler. This handler will be called when the editor receives
@@ -3538,7 +3559,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3538
3559
  *
3539
3560
  * @public
3540
3561
  */
3541
- getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3562
+ getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
3542
3563
  height: number;
3543
3564
  svg: SVGSVGElement;
3544
3565
  width: number;
@@ -3553,13 +3574,27 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3553
3574
  *
3554
3575
  * @public
3555
3576
  */
3556
- getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3577
+ getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
3557
3578
  height: number;
3558
3579
  svg: string;
3559
3580
  width: number;
3560
3581
  } | undefined>;
3561
3582
  /** @deprecated Use {@link Editor.getSvgString} or {@link Editor.getSvgElement} instead. */
3562
- getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<SVGSVGElement | undefined>;
3583
+ getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<SVGSVGElement | undefined>;
3584
+ /**
3585
+ * Get an exported image of the given shapes.
3586
+ *
3587
+ * @param shapes - The shapes (or shape ids) to export.
3588
+ * @param opts - Options for the export.
3589
+ *
3590
+ * @returns A blob of the image.
3591
+ * @public
3592
+ */
3593
+ toImage(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
3594
+ blob: Blob;
3595
+ height: number;
3596
+ width: number;
3597
+ }>;
3563
3598
  /**
3564
3599
  * The app's current input state.
3565
3600
  *
@@ -4073,6 +4108,15 @@ export declare function getPolygonVertices(width: number, height: number, sides:
4073
4108
  /** @public */
4074
4109
  export declare function getSnapshot(store: TLStore): TLEditorSnapshot;
4075
4110
 
4111
+ /** @public */
4112
+ export declare function getSvgAsImage(svgString: string, options: {
4113
+ height: number;
4114
+ pixelRatio?: number;
4115
+ quality?: number;
4116
+ type: 'jpeg' | 'png' | 'webp';
4117
+ width: number;
4118
+ }): Promise<Blob | null>;
4119
+
4076
4120
  /**
4077
4121
  * Turn an array of points into a path of quadradic curves.
4078
4122
  *
@@ -4652,6 +4696,23 @@ export declare interface ResizeBoxOptions {
4652
4696
  maxHeight?: number;
4653
4697
  }
4654
4698
 
4699
+ /**
4700
+ * Resize a shape that has a scale prop.
4701
+ *
4702
+ * @param shape - The shape to resize
4703
+ * @param info - The resize info
4704
+ *
4705
+ * @public */
4706
+ export declare function resizeScaled(shape: TLBaseShape<any, {
4707
+ scale: number;
4708
+ }>, { initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>): {
4709
+ props: {
4710
+ scale: number;
4711
+ };
4712
+ x: number;
4713
+ y: number;
4714
+ };
4715
+
4655
4716
  /** @public */
4656
4717
  export declare const ROTATE_CORNER_TO_SELECTION_CORNER: {
4657
4718
  readonly bottom_left_rotate: "bottom_left";
@@ -5023,6 +5084,15 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
5023
5084
  * @public
5024
5085
  */
5025
5086
  onBeforeUpdate?(prev: Shape, next: Shape): Shape | void;
5087
+ /**
5088
+ * A callback called when a shape changes from a crop.
5089
+ *
5090
+ * @param shape - The shape at the start of the crop.
5091
+ * @param info - Info about the crop.
5092
+ * @returns A change to apply to the shape, or void.
5093
+ * @public
5094
+ */
5095
+ onCrop?(shape: Shape, info: TLCropInfo<Shape>): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void;
5026
5096
  /**
5027
5097
  * A callback called when some other shapes are dragged over this one.
5028
5098
  *
@@ -5404,10 +5474,27 @@ export declare interface SvgExportContext {
5404
5474
  * method depending on your use-case.
5405
5475
  */
5406
5476
  waitUntil(promise: Promise<void>): void;
5477
+ /**
5478
+ * Resolve an asset URL in the context of this export. Supply the asset ID and the width in
5479
+ * shape-pixels it'll be displayed at, and this will resolve the asset according to the export
5480
+ * options.
5481
+ */
5482
+ resolveAssetUrl(assetId: TLAssetId, width: number): Promise<null | string>;
5407
5483
  /**
5408
5484
  * Whether the export should be in dark mode.
5409
5485
  */
5410
5486
  readonly isDarkMode: boolean;
5487
+ /**
5488
+ * The scale of the export - how much CSS pixels will be scaled up/down by.
5489
+ */
5490
+ readonly scale: number;
5491
+ /**
5492
+ * Use this value to optionally downscale images in the export. If we're exporting directly to
5493
+ * an SVG, this will usually be null, and you shouldn't downscale images. If the export is to a
5494
+ * raster format like PNG, this will be the number of raster pixels in the resulting bitmap per
5495
+ * CSS pixel in the resulting SVG.
5496
+ */
5497
+ readonly pixelRatio: null | number;
5411
5498
  }
5412
5499
 
5413
5500
  /** @public */
@@ -5498,6 +5585,12 @@ export declare interface TLBaseEventInfo {
5498
5585
  accelKey: boolean;
5499
5586
  }
5500
5587
 
5588
+ /** @public */
5589
+ export declare interface TLBaseExternalContent {
5590
+ sources?: TLExternalContentSource[];
5591
+ point?: VecLike;
5592
+ }
5593
+
5501
5594
  /** @public */
5502
5595
  export declare interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends BindingUtil<T> = BindingUtil<T>> {
5503
5596
  new (editor: Editor): U;
@@ -5663,6 +5756,24 @@ export declare interface TLContent {
5663
5756
  schema: SerializedSchema;
5664
5757
  }
5665
5758
 
5759
+ /**
5760
+ * Info about a crop.
5761
+ * @param handle - The handle being dragged.
5762
+ * @param change - The distance the handle is moved.
5763
+ * @param initialShape - The shape at the start of the resize.
5764
+ * @public
5765
+ */
5766
+ export declare interface TLCropInfo<T extends TLShape> {
5767
+ handle: SelectionHandle;
5768
+ change: Vec;
5769
+ crop: TLShapeCrop;
5770
+ uncroppedSize: {
5771
+ h: number;
5772
+ w: number;
5773
+ };
5774
+ initialShape: T;
5775
+ }
5776
+
5666
5777
  /** @public */
5667
5778
  export declare interface TLCursorProps {
5668
5779
  className?: string;
@@ -5915,6 +6026,15 @@ export declare interface TldrawOptions {
5915
6026
  readonly exportProvider: ComponentType<{
5916
6027
  children: React.ReactNode;
5917
6028
  }>;
6029
+ /**
6030
+ * How should the note shape resize? By default it does not resize (except automatically based on its text content),
6031
+ * but you can set it to be user-resizable using scale.
6032
+ */
6033
+ readonly noteShapeResizeMode: 'none' | 'scale';
6034
+ /**
6035
+ * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
6036
+ */
6037
+ readonly enableToolbarKeyboardShortcuts: boolean;
5918
6038
  }
5919
6039
 
5920
6040
  /** @public */
@@ -6016,6 +6136,13 @@ export declare interface TLEditorSnapshot {
6016
6136
  session: TLSessionStateSnapshot;
6017
6137
  }
6018
6138
 
6139
+ /** @public */
6140
+ export declare interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
6141
+ type: 'embed';
6142
+ url: string;
6143
+ embed: EmbedDefinition;
6144
+ }
6145
+
6019
6146
  /** @public */
6020
6147
  export declare type TLEnterEventHandler = (info: any, from: string) => void;
6021
6148
 
@@ -6041,6 +6168,13 @@ export declare interface TLErrorBoundaryProps {
6041
6168
  fallback: TLErrorFallbackComponent;
6042
6169
  }
6043
6170
 
6171
+ /** @public */
6172
+ export declare interface TLErrorExternalContentSource {
6173
+ type: 'error';
6174
+ data: null | string;
6175
+ reason: string;
6176
+ }
6177
+
6044
6178
  /** @public */
6045
6179
  export declare type TLErrorFallbackComponent = ComponentType<{
6046
6180
  editor?: Editor;
@@ -6086,6 +6220,7 @@ export declare interface TLEventMap {
6086
6220
  }];
6087
6221
  'stop-camera-animation': [];
6088
6222
  'stop-following': [];
6223
+ 'before-event': [TLEventInfo];
6089
6224
  event: [TLEventInfo];
6090
6225
  tick: [number];
6091
6226
  frame: [number];
@@ -6100,58 +6235,40 @@ export declare type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TL
6100
6235
  /** @public */
6101
6236
  export declare type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'tick' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
6102
6237
 
6238
+ /** @public */
6239
+ export declare interface TLExcalidrawExternalContentSource {
6240
+ type: 'excalidraw';
6241
+ data: any;
6242
+ }
6243
+
6103
6244
  /** @public */
6104
6245
  export declare type TLExitEventHandler = (info: any, to: string) => void;
6105
6246
 
6106
6247
  /** @public */
6107
- export declare type TLExternalAssetContent = {
6108
- assetId?: TLAssetId;
6109
- file: File;
6248
+ export declare type TLExportType = 'jpeg' | 'png' | 'svg' | 'webp';
6249
+
6250
+ /** @public */
6251
+ export declare type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset;
6252
+
6253
+ /** @public */
6254
+ export declare type TLExternalContent<EmbedDefinition> = TLEmbedExternalContent<EmbedDefinition> | TLFilesExternalContent | TLSvgTextExternalContent | TLTextExternalContent | TLUrlExternalContent;
6255
+
6256
+ /** @public */
6257
+ export declare type TLExternalContentSource = TLErrorExternalContentSource | TLExcalidrawExternalContentSource | TLTextExternalContentSource | TLTldrawExternalContentSource;
6258
+
6259
+ /** @public */
6260
+ export declare interface TLFileExternalAsset {
6110
6261
  type: 'file';
6111
- } | {
6112
- type: 'url';
6113
- url: string;
6114
- };
6262
+ file: File;
6263
+ assetId?: TLAssetId;
6264
+ }
6115
6265
 
6116
6266
  /** @public */
6117
- export declare type TLExternalContent<EmbedDefinition> = {
6118
- point?: VecLike;
6119
- sources?: TLExternalContentSource[];
6120
- } & ({
6121
- embed: EmbedDefinition;
6122
- type: 'embed';
6123
- url: string;
6124
- } | {
6267
+ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
6268
+ type: 'files';
6125
6269
  files: File[];
6126
6270
  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
- };
6271
+ }
6155
6272
 
6156
6273
  /** @public */
6157
6274
  export declare interface TLGridProps {
@@ -6209,15 +6326,16 @@ export declare interface TLHistoryMark {
6209
6326
  }
6210
6327
 
6211
6328
  /** @public */
6212
- export declare interface TLImageExportOptions {
6213
- bounds?: Box;
6214
- scale?: number;
6329
+ export declare interface TLImageExportOptions extends TLSvgExportOptions {
6330
+ /**
6331
+ * If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of
6332
+ * the export. This is a number between 0 and 1.
6333
+ */
6215
6334
  quality?: number;
6216
- pixelRatio?: number;
6217
- background?: boolean;
6218
- padding?: number;
6219
- darkMode?: boolean;
6220
- preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
6335
+ /**
6336
+ * The format to export as. Defaults to 'png'.
6337
+ */
6338
+ format?: TLExportType;
6221
6339
  }
6222
6340
 
6223
6341
  /** @public */
@@ -6721,12 +6839,75 @@ export declare type TLStoreWithStatus = {
6721
6839
  readonly store: TLStore;
6722
6840
  };
6723
6841
 
6842
+ /** @public */
6843
+ export declare interface TLSvgExportOptions {
6844
+ /**
6845
+ * The bounding box, in page coordinates, of the area being exported.
6846
+ */
6847
+ bounds?: Box;
6848
+ /**
6849
+ * The logical scale of the export. This scales the resulting size of the SVG being generated.
6850
+ */
6851
+ scale?: number;
6852
+ /**
6853
+ * When exporting an SVG, the expected pixel ratio of the export will be passed in to
6854
+ * {@link @tldraw/tlschema#TLAssetStore.resolve} as the `dpr` property, so that assets can be
6855
+ * downscaled to the appropriate resolution.
6856
+ *
6857
+ * When exporting to a bitmap image format, the size of the resulting image will be multiplied
6858
+ * by this number.
6859
+ *
6860
+ * For SVG exports, this defaults to undefined - which means we'll request original-quality
6861
+ * assets. For bitmap exports, this defaults to 2.
6862
+ */
6863
+ pixelRatio?: number;
6864
+ /**
6865
+ * Should the background color be included in the export? If false, the generated image will be
6866
+ * transparent (if exporting to a format that supports transparency).
6867
+ */
6868
+ background?: boolean;
6869
+ /**
6870
+ * How much padding to include around the bounds of exports? Defaults to 32px.
6871
+ */
6872
+ padding?: number;
6873
+ /**
6874
+ * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the
6875
+ * current instance's dark mode setting.
6876
+ */
6877
+ darkMode?: boolean;
6878
+ /**
6879
+ * The
6880
+ * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio | `preserveAspectRatio` }
6881
+ * attribute of the SVG element.
6882
+ */
6883
+ preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
6884
+ }
6885
+
6724
6886
  /**
6725
6887
  * @public
6726
6888
  * @deprecated use {@link TLImageExportOptions} instead
6727
6889
  */
6728
6890
  export declare type TLSvgOptions = TLImageExportOptions;
6729
6891
 
6892
+ /** @public */
6893
+ export declare interface TLSvgTextExternalContent extends TLBaseExternalContent {
6894
+ type: 'svg-text';
6895
+ text: string;
6896
+ }
6897
+
6898
+ /** @public */
6899
+ export declare interface TLTextExternalContent extends TLBaseExternalContent {
6900
+ type: 'text';
6901
+ text: string;
6902
+ }
6903
+
6904
+ /** @public */
6905
+ export declare interface TLTextExternalContentSource {
6906
+ type: 'text';
6907
+ data: string;
6908
+ subtype: 'html' | 'json' | 'text' | 'url';
6909
+ }
6910
+
6730
6911
  /** @public */
6731
6912
  export declare type TLTickEvent = (info: TLTickEventInfo) => void;
6732
6913
 
@@ -6744,6 +6925,24 @@ export declare interface TLTickEventInfo {
6744
6925
  */
6745
6926
  export declare const tltime: Timers;
6746
6927
 
6928
+ /** @public */
6929
+ export declare interface TLTldrawExternalContentSource {
6930
+ type: 'tldraw';
6931
+ data: TLContent;
6932
+ }
6933
+
6934
+ /** @public */
6935
+ export declare interface TLUrlExternalAsset {
6936
+ type: 'url';
6937
+ url: string;
6938
+ }
6939
+
6940
+ /** @public */
6941
+ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
6942
+ type: 'url';
6943
+ url: string;
6944
+ }
6945
+
6747
6946
  /** @public */
6748
6947
  export declare interface TLUser {
6749
6948
  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.e81e3057aaac",
369
+ "3.8.0-canary.f50a5a203139",
363
370
  "cjs"
364
371
  );
365
372
  //# sourceMappingURL=index.js.map