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

package/dist-esm/index.d.mts

@@ -68,6 +68,7 @@ import { TLPropsMigrations } from '@tldraw/tlschema';
 import { TLRecord } from '@tldraw/tlschema';
 import { TLScribble } from '@tldraw/tlschema';
 import { TLShape } from '@tldraw/tlschema';
+import { TLShapeCrop } from '@tldraw/tlschema';
 import { TLShapeId } from '@tldraw/tlschema';
 import { TLShapePartial } from '@tldraw/tlschema';
 import { TLStore } from '@tldraw/tlschema';
@@ -90,6 +91,8 @@ import { useValue } from '@tldraw/state-react';
 import { VecModel } from '@tldraw/tlschema';
 import { whyAmIRunning } from '@tldraw/state';
 
+/* Excluded from this release type: activeElementShouldCaptureKeys */
+
 /**
  * Get the angle of a point on an arc.
  * @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;
  */
 export declare function canonicalizeRotation(a: number): number;
 
+/* Excluded from this release type: CanvasMaxSize */
+
 /**
  * Get the center of a circle from three points.
  *
@@ -615,6 +620,8 @@ export declare function clamp(n: number, min: number, max: number): number;
  */
 export declare function clampRadians(r: number): number;
 
+/* Excluded from this release type: clampToBrowserMaxCanvasSize */
+
 /** @public */
 export declare class ClickManager {
     editor: Editor;
@@ -847,6 +854,7 @@ export declare const defaultTldrawOptions: {
     readonly edgeScrollDistance: 8;
     readonly edgeScrollEaseDuration: 200;
     readonly edgeScrollSpeed: 25;
+    readonly enableToolbarKeyboardShortcuts: true;
     readonly exportProvider: ExoticComponent<    {
     children?: ReactNode;
     }>;
@@ -880,6 +888,7 @@ export declare const defaultTldrawOptions: {
     readonly maxPointsPerDrawShape: 500;
     readonly maxShapesPerPage: 4000;
     readonly multiClickDurationMs: 200;
+    readonly noteShapeResizeMode: "none";
     readonly temporaryAssetPreviewLifetimeMs: 180000;
     readonly textShadowLod: 0.35;
 };
@@ -894,7 +903,7 @@ export declare const defaultUserPreferences: Readonly<{
     isPasteAtCursorMode: false;
     isSnapMode: false;
     isWrapMode: false;
-    locale: "ar" | "ca" | "cs" | "da" | "de" | "en" | "es" | "fa" | "fi" | "fr" | "gl" | "he" | "hi-in" | "hr" | "hu" | "id" | "it" | "ja" | "ko-kr" | "ku" | "my" | "ne" | "no" | "pl" | "pt-br" | "pt-pt" | "ro" | "ru" | "sl" | "so" | "sv" | "te" | "th" | "tr" | "uk" | "vi" | "zh-cn" | "zh-tw";
+    locale: "ar" | "bn" | "ca" | "cs" | "da" | "de" | "el" | "en" | "es" | "fa" | "fi" | "fr" | "gl" | "gu-in" | "he" | "hi-in" | "hr" | "hu" | "id" | "it" | "ja" | "km-kh" | "kn" | "ko-kr" | "ml" | "mr" | "ms" | "ne" | "nl" | "no" | "pa" | "pl" | "pt-br" | "pt-pt" | "ro" | "ru" | "sl" | "so" | "sv" | "ta" | "te" | "th" | "tl" | "tr" | "uk" | "ur" | "vi" | "zh-cn" | "zh-tw";
     name: "New User";
 }>;
 
@@ -1113,6 +1122,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>;
     getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>;
     getShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): T;
+    /**
+     * Returns true if the editor has a shape util for the given shape / shape type.
+     *
+     * @param shape - A shape, shape partial, or shape type.
+     */
+    hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean;
+    hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean;
+    hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
     /**
      * A map of shape utility classes (TLShapeUtils) by shape type.
      *
@@ -1365,8 +1382,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      * @example
      * ```ts
-     * state.getStateDescendant('select')
-     * state.getStateDescendant('select.brushing')
+     * editor.getStateDescendant('select')
+     * editor.getStateDescendant('select.brushing')
      * ```
      *
      * @param path - The descendant's path of state ids, separated by periods.
@@ -2348,6 +2365,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      */
     getAsset<T extends TLAsset>(asset: T | T['id']): T | undefined;
     resolveAssetUrl(assetId: null | TLAssetId, context: {
+        dpr?: number;
         screenScale?: number;
         shouldResolveToOriginal?: boolean;
     }): Promise<null | string>;
@@ -2355,7 +2373,10 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
      * asset.
      */
-    uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<string>;
+    uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<{
+        meta?: JsonObject;
+        src: string;
+    }>;
     private _getShapeGeometryCache;
     /**
      * Get the geometry of a shape.
@@ -3426,7 +3447,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      * @public
      */
-    registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(type: T, handler: ((info: TLExternalAssetContent & {
+    registerExternalAssetHandler<T extends TLExternalAsset['type']>(type: T, handler: ((info: TLExternalAsset & {
         type: T;
     }) => Promise<TLAsset>) | null): this;
     /**
@@ -3472,8 +3493,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param info - Info about the external content.
      * @returns The asset.
      */
-    getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined>;
-    hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean;
+    getAssetForExternalContent(info: TLExternalAsset): Promise<TLAsset | undefined>;
+    hasExternalAssetHandler(type: TLExternalAsset['type']): boolean;
     /* Excluded from this release type: externalContentHandlers */
     /**
      * 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> {
      *
      * @public
      */
-    getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
+    getSvgElement(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
         height: number;
         svg: SVGSVGElement;
         width: number;
@@ -3553,13 +3574,27 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      * @public
      */
-    getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
+    getSvgString(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<{
         height: number;
         svg: string;
         width: number;
     } | undefined>;
     /** @deprecated Use {@link Editor.getSvgString} or {@link Editor.getSvgElement} instead. */
-    getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<SVGSVGElement | undefined>;
+    getSvg(shapes: TLShape[] | TLShapeId[], opts?: TLSvgExportOptions): Promise<SVGSVGElement | undefined>;
+    /**
+     * Get an exported image of the given shapes.
+     *
+     * @param shapes - The shapes (or shape ids) to export.
+     * @param opts - Options for the export.
+     *
+     * @returns A blob of the image.
+     * @public
+     */
+    toImage(shapes: TLShape[] | TLShapeId[], opts?: TLImageExportOptions): Promise<{
+        blob: Blob;
+        height: number;
+        width: number;
+    }>;
     /**
      * The app's current input state.
      *
@@ -4073,6 +4108,15 @@ export declare function getPolygonVertices(width: number, height: number, sides:
 /** @public */
 export declare function getSnapshot(store: TLStore): TLEditorSnapshot;
 
+/** @public */
+export declare function getSvgAsImage(svgString: string, options: {
+    height: number;
+    pixelRatio?: number;
+    quality?: number;
+    type: 'jpeg' | 'png' | 'webp';
+    width: number;
+}): Promise<Blob | null>;
+
 /**
  * Turn an array of points into a path of quadradic curves.
  *
@@ -4652,6 +4696,23 @@ export declare interface ResizeBoxOptions {
     maxHeight?: number;
 }
 
+/**
+ * Resize a shape that has a scale prop.
+ *
+ * @param shape - The shape to resize
+ * @param info - The resize info
+ *
+ * @public */
+export declare function resizeScaled(shape: TLBaseShape<any, {
+    scale: number;
+}>, { initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>): {
+    props: {
+        scale: number;
+    };
+    x: number;
+    y: number;
+};
+
 /** @public */
 export declare const ROTATE_CORNER_TO_SELECTION_CORNER: {
     readonly bottom_left_rotate: "bottom_left";
@@ -5023,6 +5084,15 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
      * @public
      */
     onBeforeUpdate?(prev: Shape, next: Shape): Shape | void;
+    /**
+     * A callback called when a shape changes from a crop.
+     *
+     * @param shape - The shape at the start of the crop.
+     * @param info - Info about the crop.
+     * @returns A change to apply to the shape, or void.
+     * @public
+     */
+    onCrop?(shape: Shape, info: TLCropInfo<Shape>): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void;
     /**
      * A callback called when some other shapes are dragged over this one.
      *
@@ -5404,10 +5474,27 @@ export declare interface SvgExportContext {
      * method depending on your use-case.
      */
     waitUntil(promise: Promise<void>): void;
+    /**
+     * Resolve an asset URL in the context of this export. Supply the asset ID and the width in
+     * shape-pixels it'll be displayed at, and this will resolve the asset according to the export
+     * options.
+     */
+    resolveAssetUrl(assetId: TLAssetId, width: number): Promise<null | string>;
     /**
      * Whether the export should be in dark mode.
      */
     readonly isDarkMode: boolean;
+    /**
+     * The scale of the export - how much CSS pixels will be scaled up/down by.
+     */
+    readonly scale: number;
+    /**
+     * Use this value to optionally downscale images in the export. If we're exporting directly to
+     * an SVG, this will usually be null, and you shouldn't downscale images. If the export is to a
+     * raster format like PNG, this will be the number of raster pixels in the resulting bitmap per
+     * CSS pixel in the resulting SVG.
+     */
+    readonly pixelRatio: null | number;
 }
 
 /** @public */
@@ -5498,6 +5585,12 @@ export declare interface TLBaseEventInfo {
     accelKey: boolean;
 }
 
+/** @public */
+export declare interface TLBaseExternalContent {
+    sources?: TLExternalContentSource[];
+    point?: VecLike;
+}
+
 /** @public */
 export declare interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends BindingUtil<T> = BindingUtil<T>> {
     new (editor: Editor): U;
@@ -5663,6 +5756,24 @@ export declare interface TLContent {
     schema: SerializedSchema;
 }
 
+/**
+ * Info about a crop.
+ * @param handle - The handle being dragged.
+ * @param change - The distance the handle is moved.
+ * @param initialShape - The shape at the start of the resize.
+ * @public
+ */
+export declare interface TLCropInfo<T extends TLShape> {
+    handle: SelectionHandle;
+    change: Vec;
+    crop: TLShapeCrop;
+    uncroppedSize: {
+        h: number;
+        w: number;
+    };
+    initialShape: T;
+}
+
 /** @public */
 export declare interface TLCursorProps {
     className?: string;
@@ -5915,6 +6026,15 @@ export declare interface TldrawOptions {
     readonly exportProvider: ComponentType<{
         children: React.ReactNode;
     }>;
+    /**
+     * How should the note shape resize? By default it does not resize (except automatically based on its text content),
+     * but you can set it to be user-resizable using scale.
+     */
+    readonly noteShapeResizeMode: 'none' | 'scale';
+    /**
+     * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
+     */
+    readonly enableToolbarKeyboardShortcuts: boolean;
 }
 
 /** @public */
@@ -6016,6 +6136,13 @@ export declare interface TLEditorSnapshot {
     session: TLSessionStateSnapshot;
 }
 
+/** @public */
+export declare interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
+    type: 'embed';
+    url: string;
+    embed: EmbedDefinition;
+}
+
 /** @public */
 export declare type TLEnterEventHandler = (info: any, from: string) => void;
 
@@ -6041,6 +6168,13 @@ export declare interface TLErrorBoundaryProps {
     fallback: TLErrorFallbackComponent;
 }
 
+/** @public */
+export declare interface TLErrorExternalContentSource {
+    type: 'error';
+    data: null | string;
+    reason: string;
+}
+
 /** @public */
 export declare type TLErrorFallbackComponent = ComponentType<{
     editor?: Editor;
@@ -6086,6 +6220,7 @@ export declare interface TLEventMap {
     }];
     'stop-camera-animation': [];
     'stop-following': [];
+    'before-event': [TLEventInfo];
     event: [TLEventInfo];
     tick: [number];
     frame: [number];
@@ -6100,58 +6235,40 @@ export declare type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TL
 /** @public */
 export declare type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'tick' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
 
+/** @public */
+export declare interface TLExcalidrawExternalContentSource {
+    type: 'excalidraw';
+    data: any;
+}
+
 /** @public */
 export declare type TLExitEventHandler = (info: any, to: string) => void;
 
 /** @public */
-export declare type TLExternalAssetContent = {
-    assetId?: TLAssetId;
-    file: File;
+export declare type TLExportType = 'jpeg' | 'png' | 'svg' | 'webp';
+
+/** @public */
+export declare type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset;
+
+/** @public */
+export declare type TLExternalContent<EmbedDefinition> = TLEmbedExternalContent<EmbedDefinition> | TLFilesExternalContent | TLSvgTextExternalContent | TLTextExternalContent | TLUrlExternalContent;
+
+/** @public */
+export declare type TLExternalContentSource = TLErrorExternalContentSource | TLExcalidrawExternalContentSource | TLTextExternalContentSource | TLTldrawExternalContentSource;
+
+/** @public */
+export declare interface TLFileExternalAsset {
     type: 'file';
-} | {
-    type: 'url';
-    url: string;
-};
+    file: File;
+    assetId?: TLAssetId;
+}
 
 /** @public */
-export declare type TLExternalContent<EmbedDefinition> = {
-    point?: VecLike;
-    sources?: TLExternalContentSource[];
-} & ({
-    embed: EmbedDefinition;
-    type: 'embed';
-    url: string;
-} | {
+export declare interface TLFilesExternalContent extends TLBaseExternalContent {
+    type: 'files';
     files: File[];
     ignoreParent: boolean;
-    type: 'files';
-} | {
-    text: string;
-    type: 'svg-text';
-} | {
-    text: string;
-    type: 'text';
-} | {
-    type: 'url';
-    url: string;
-});
-
-/** @public */
-export declare type TLExternalContentSource = {
-    data: any;
-    type: 'excalidraw';
-} | {
-    data: null | string;
-    reason: string;
-    type: 'error';
-} | {
-    data: string;
-    subtype: 'html' | 'json' | 'text' | 'url';
-    type: 'text';
-} | {
-    data: TLContent;
-    type: 'tldraw';
-};
+}
 
 /** @public */
 export declare interface TLGridProps {
@@ -6209,15 +6326,16 @@ export declare interface TLHistoryMark {
 }
 
 /** @public */
-export declare interface TLImageExportOptions {
-    bounds?: Box;
-    scale?: number;
+export declare interface TLImageExportOptions extends TLSvgExportOptions {
+    /**
+     * If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of
+     * the export. This is a number between 0 and 1.
+     */
     quality?: number;
-    pixelRatio?: number;
-    background?: boolean;
-    padding?: number;
-    darkMode?: boolean;
-    preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
+    /**
+     * The format to export as. Defaults to 'png'.
+     */
+    format?: TLExportType;
 }
 
 /** @public */
@@ -6721,12 +6839,75 @@ export declare type TLStoreWithStatus = {
     readonly store: TLStore;
 };
 
+/** @public */
+export declare interface TLSvgExportOptions {
+    /**
+     * The bounding box, in page coordinates, of the area being exported.
+     */
+    bounds?: Box;
+    /**
+     * The logical scale of the export. This scales the resulting size of the SVG being generated.
+     */
+    scale?: number;
+    /**
+     * When exporting an SVG, the expected pixel ratio of the export will be passed in to
+     * {@link @tldraw/tlschema#TLAssetStore.resolve} as the `dpr` property, so that assets can be
+     * downscaled to the appropriate resolution.
+     *
+     * When exporting to a bitmap image format, the size of the resulting image will be multiplied
+     * by this number.
+     *
+     * For SVG exports, this defaults to undefined - which means we'll request original-quality
+     * assets. For bitmap exports, this defaults to 2.
+     */
+    pixelRatio?: number;
+    /**
+     * Should the background color be included in the export? If false, the generated image will be
+     * transparent (if exporting to a format that supports transparency).
+     */
+    background?: boolean;
+    /**
+     * How much padding to include around the bounds of exports? Defaults to 32px.
+     */
+    padding?: number;
+    /**
+     * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the
+     * current instance's dark mode setting.
+     */
+    darkMode?: boolean;
+    /**
+     * The
+     * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio | `preserveAspectRatio` }
+     * attribute of the SVG element.
+     */
+    preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
+}
+
 /**
  * @public
  * @deprecated use {@link TLImageExportOptions} instead
  */
 export declare type TLSvgOptions = TLImageExportOptions;
 
+/** @public */
+export declare interface TLSvgTextExternalContent extends TLBaseExternalContent {
+    type: 'svg-text';
+    text: string;
+}
+
+/** @public */
+export declare interface TLTextExternalContent extends TLBaseExternalContent {
+    type: 'text';
+    text: string;
+}
+
+/** @public */
+export declare interface TLTextExternalContentSource {
+    type: 'text';
+    data: string;
+    subtype: 'html' | 'json' | 'text' | 'url';
+}
+
 /** @public */
 export declare type TLTickEvent = (info: TLTickEventInfo) => void;
 
@@ -6744,6 +6925,24 @@ export declare interface TLTickEventInfo {
  */
 export declare const tltime: Timers;
 
+/** @public */
+export declare interface TLTldrawExternalContentSource {
+    type: 'tldraw';
+    data: TLContent;
+}
+
+/** @public */
+export declare interface TLUrlExternalAsset {
+    type: 'url';
+    url: string;
+}
+
+/** @public */
+export declare interface TLUrlExternalContent extends TLBaseExternalContent {
+    type: 'url';
+    url: string;
+}
+
 /** @public */
 export declare interface TLUser {
     readonly userPreferences: Signal<TLUserPreferences>;

package/dist-esm/index.mjs

@@ -23,6 +23,7 @@ import {
   useStateTracking,
   useValue
 } from "@tldraw/state-react";
+import { resizeScaled } from "./lib/editor/shapes/shared/resizeScaled.mjs";
 import { LocalIndexedDb, Table } from "./lib/utils/sync/LocalIndexedDb.mjs";
 export * from "@tldraw/store";
 export * from "@tldraw/tlschema";
@@ -142,6 +143,7 @@ import {
 import {
   EVENT_NAME_MAP
 } from "./lib/editor/types/event-types.mjs";
+import { getSvgAsImage } from "./lib/exports/getSvgAsImage.mjs";
 import { tlenv } from "./lib/globals/environment.mjs";
 import { tlmenus } from "./lib/globals/menus.mjs";
 import { tltime } from "./lib/globals/time.mjs";
@@ -250,6 +252,7 @@ import {
   SharedStyleMap
 } from "./lib/utils/SharedStylesMap.mjs";
 import { dataUrlToFile, getDefaultCdnBaseUrl } from "./lib/utils/assets.mjs";
+import { clampToBrowserMaxCanvasSize } from "./lib/utils/browserCanvasMaxSize.mjs";
 import {
   debugFlags,
   featureFlags
@@ -259,6 +262,7 @@ import {
   parseDeepLinkString
 } from "./lib/utils/deepLinks.mjs";
 import {
+  activeElementShouldCaptureKeys,
   loopToHtmlElement,
   preventDefault,
   releasePointerCapture,
@@ -285,7 +289,7 @@ function debugEnableLicensing() {
 }
 registerTldrawLibraryVersion(
   "@tldraw/editor",
-  "3.8.0-canary.ed9c077994c4",
+  "3.8.0-canary.f50a5a203139",
   "esm"
 );
 export {
@@ -367,6 +371,7 @@ export {
   USER_COLORS,
   UserPreferencesManager,
   Vec,
+  activeElementShouldCaptureKeys,
   angleDistance,
   applyRotationToSnapshotShapes,
   approximately,
@@ -377,6 +382,7 @@ export {
   centerOfCircleFromThreePoints,
   clamp,
   clampRadians,
+  clampToBrowserMaxCanvasSize,
   clockwiseAngleDist,
   computed,
   coreShapes,
@@ -407,6 +413,7 @@ export {
   getPolygonVertices,
   getRotationSnapshot,
   getSnapshot,
+  getSvgAsImage,
   getSvgPathFromPoints,
   getUserPreferences,
   hardReset,
@@ -443,6 +450,7 @@ export {
   refreshPage,
   releasePointerCapture,
   resizeBox,
+  resizeScaled,
   rotateSelectionHandle,
   runtime,
   sanitizeId,