@tldraw/editor 3.8.0-canary.80294e641ad6 → 3.8.0-canary.811fed79c8ad

package/dist-cjs/index.d.ts

@@ -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';
@@ -536,6 +537,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 +618,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 +852,7 @@ export declare const defaultTldrawOptions: {
     readonly edgeScrollDistance: 8;
     readonly edgeScrollEaseDuration: 200;
     readonly edgeScrollSpeed: 25;
+    readonly enableToolbarKeyboardShortcuts: true;
     readonly exportProvider: ExoticComponent<    {
     children?: ReactNode;
     }>;
@@ -880,6 +886,7 @@ export declare const defaultTldrawOptions: {
     readonly maxPointsPerDrawShape: 500;
     readonly maxShapesPerPage: 4000;
     readonly multiClickDurationMs: 200;
+    readonly noteShapeResizeMode: "none";
     readonly temporaryAssetPreviewLifetimeMs: 180000;
     readonly textShadowLod: 0.35;
 };
@@ -1113,6 +1120,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 +1380,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 +2363,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 +2371,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 +3445,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 +3491,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 +3557,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 +3572,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 +4106,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 +4694,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 +5082,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 +5472,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 +5583,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 +5754,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 +6024,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 +6134,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 +6166,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 +6218,7 @@ export declare interface TLEventMap {
     }];
     'stop-camera-animation': [];
     'stop-following': [];
+    'before-event': [TLEventInfo];
     event: [TLEventInfo];
     tick: [number];
     frame: [number];
@@ -6100,58 +6233,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 +6324,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 +6837,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 +6923,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-cjs/index.js

@@ -17,8 +17,8 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Arc2d: () => import_Arc2d.Arc2d,
   BaseBoxShapeTool: () => import_BaseBoxShapeTool.BaseBoxShapeTool,
   BaseBoxShapeUtil: () => import_BaseBoxShapeUtil.BaseBoxShapeUtil,
@@ -107,6 +107,7 @@ __export(src_exports, {
   centerOfCircleFromThreePoints: () => import_utils2.centerOfCircleFromThreePoints,
   clamp: () => import_utils2.clamp,
   clampRadians: () => import_utils2.clampRadians,
+  clampToBrowserMaxCanvasSize: () => import_browserCanvasMaxSize.clampToBrowserMaxCanvasSize,
   clockwiseAngleDist: () => import_utils2.clockwiseAngleDist,
   computed: () => import_state.computed,
   coreShapes: () => import_defaultShapes.coreShapes,
@@ -137,6 +138,7 @@ __export(src_exports, {
   getPolygonVertices: () => import_utils2.getPolygonVertices,
   getRotationSnapshot: () => import_rotation.getRotationSnapshot,
   getSnapshot: () => import_TLEditorSnapshot.getSnapshot,
+  getSvgAsImage: () => import_getSvgAsImage.getSvgAsImage,
   getSvgPathFromPoints: () => import_getSvgPathFromPoints.getSvgPathFromPoints,
   getUserPreferences: () => import_TLUserPreferences.getUserPreferences,
   hardReset: () => import_hardReset.hardReset,
@@ -173,6 +175,7 @@ __export(src_exports, {
   refreshPage: () => import_refreshPage.refreshPage,
   releasePointerCapture: () => import_dom.releasePointerCapture,
   resizeBox: () => import_resizeBox.resizeBox,
+  resizeScaled: () => import_resizeScaled.resizeScaled,
   rotateSelectionHandle: () => import_Box.rotateSelectionHandle,
   runtime: () => import_runtime.runtime,
   sanitizeId: () => import_useSafeId.sanitizeId,
@@ -230,7 +233,7 @@ __export(src_exports, {
   userTypeValidator: () => import_TLUserPreferences.userTypeValidator,
   whyAmIRunning: () => import_state.whyAmIRunning
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_utils = require("@tldraw/utils");
 var import_at = require("core-js/stable/array/at.js");
 var import_flat_map = require("core-js/stable/array/flat-map.js");
@@ -239,11 +242,12 @@ var import_at2 = require("core-js/stable/string/at.js");
 var import_replace_all = require("core-js/stable/string/replace-all.js");
 var import_state = require("@tldraw/state");
 var import_state_react = require("@tldraw/state-react");
+var import_resizeScaled = require("./lib/editor/shapes/shared/resizeScaled");
 var import_LocalIndexedDb = require("./lib/utils/sync/LocalIndexedDb");
-__reExport(src_exports, require("@tldraw/store"), module.exports);
-__reExport(src_exports, require("@tldraw/tlschema"), module.exports);
-__reExport(src_exports, require("@tldraw/utils"), module.exports);
-__reExport(src_exports, require("@tldraw/validate"), module.exports);
+__reExport(index_exports, require("@tldraw/store"), module.exports);
+__reExport(index_exports, require("@tldraw/tlschema"), module.exports);
+__reExport(index_exports, require("@tldraw/utils"), module.exports);
+__reExport(index_exports, require("@tldraw/validate"), module.exports);
 var import_TldrawEditor = require("./lib/TldrawEditor");
 var import_ErrorBoundary = require("./lib/components/ErrorBoundary");
 var import_HTMLContainer = require("./lib/components/HTMLContainer");
@@ -294,6 +298,7 @@ var import_Pointing = require("./lib/editor/tools/BaseBoxShapeTool/children/Poin
 var import_StateNode = require("./lib/editor/tools/StateNode");
 var import_SvgExportContext = require("./lib/editor/types/SvgExportContext");
 var import_event_types = require("./lib/editor/types/event-types");
+var import_getSvgAsImage = require("./lib/exports/getSvgAsImage");
 var import_environment = require("./lib/globals/environment");
 var import_menus = require("./lib/globals/menus");
 var import_time = require("./lib/globals/time");
@@ -339,6 +344,7 @@ var import_intersect = require("./lib/primitives/intersect");
 var import_utils2 = require("./lib/primitives/utils");
 var import_SharedStylesMap = require("./lib/utils/SharedStylesMap");
 var import_assets = require("./lib/utils/assets");
+var import_browserCanvasMaxSize = require("./lib/utils/browserCanvasMaxSize");
 var import_debug_flags = require("./lib/utils/debug-flags");
 var import_deepLinks = require("./lib/utils/deepLinks");
 var import_dom = require("./lib/utils/dom");
@@ -359,7 +365,7 @@ function debugEnableLicensing() {
 }
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "3.8.0-canary.80294e641ad6",
+  "3.8.0-canary.811fed79c8ad",
   "cjs"
 );
 //# sourceMappingURL=index.js.map