@tldraw/editor 3.8.0-internal.af5331ba6061 → 3.8.1

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.8.0-internal.af5331ba6061'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-01-27T17:13:11.548Z',\n\tpatch: '2025-01-27T17:13:11.548Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.8.1'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-02-12T15:48:24.555Z',\n\tpatch: '2025-02-13T13:35:17.724Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -39,9 +39,10 @@
 	--layer-overlays-user-brush: 50;
 	--layer-overlays-user-indicator-selected: 60;
 	--layer-overlays-user-indicator-hovered: 70;
-	--layer-overlays-user-handles: 80;
 	--layer-overlays-user-snapline: 90;
 	--layer-overlays-selection-fg: 100;
+	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
+	--layer-overlays-user-handles: 105;
 	--layer-overlays-user-indicator-hint: 110;
 	--layer-overlays-collaborator-cursor-hint: 120;
 	--layer-overlays-collaborator-cursor: 130;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.8.0-internal.af5331ba6061",
+  "version": "3.8.1",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,12 +45,12 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.8.0-internal.af5331ba6061",
-    "@tldraw/state-react": "3.8.0-internal.af5331ba6061",
-    "@tldraw/store": "3.8.0-internal.af5331ba6061",
-    "@tldraw/tlschema": "3.8.0-internal.af5331ba6061",
-    "@tldraw/utils": "3.8.0-internal.af5331ba6061",
-    "@tldraw/validate": "3.8.0-internal.af5331ba6061",
+    "@tldraw/state": "3.8.1",
+    "@tldraw/state-react": "3.8.1",
+    "@tldraw/store": "3.8.1",
+    "@tldraw/tlschema": "3.8.1",
+    "@tldraw/utils": "3.8.1",
+    "@tldraw/validate": "3.8.1",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "canvas-size": "~2.0.0",

package/src/index.ts

@@ -25,6 +25,7 @@ export {
 	useStateTracking,
 	useValue,
 } from '@tldraw/state-react'
+export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
@@ -182,6 +183,7 @@ export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesMan
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export {
 	ShapeUtil,
+	type TLCropInfo,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
 	type TLResizeMode,
@@ -238,9 +240,23 @@ export {
 	type UiEventType,
 } from './lib/editor/types/event-types'
 export {
-	type TLExternalAssetContent,
+	type TLBaseExternalContent,
+	type TLEmbedExternalContent,
+	type TLErrorExternalContentSource,
+	type TLExcalidrawExternalContent,
+	type TLExcalidrawExternalContentSource,
+	type TLExternalAsset,
 	type TLExternalContent,
 	type TLExternalContentSource,
+	type TLFileExternalAsset,
+	type TLFilesExternalContent,
+	type TLSvgTextExternalContent,
+	type TLTextExternalContent,
+	type TLTextExternalContentSource,
+	type TLTldrawExternalContent,
+	type TLTldrawExternalContentSource,
+	type TLUrlExternalAsset,
+	type TLUrlExternalContent,
 } from './lib/editor/types/external-content'
 export {
 	type TLHistoryBatchOptions,
@@ -399,6 +415,7 @@ export {
 	type TLDeepLinkOptions,
 } from './lib/utils/deepLinks'
 export {
+	activeElementShouldCaptureKeys,
 	loopToHtmlElement,
 	preventDefault,
 	releasePointerCapture,

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -160,7 +160,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				<div className="tl-overlays">
 					<div ref={rHtmlLayer2} className="tl-html-layer">
 						{debugGeometry ? <GeometryDebuggingView /> : null}
-						<HandlesWrapper />
 						<BrushWrapper />
 						<ScribbleWrapper />
 						<ZoomBrushWrapper />
@@ -168,6 +167,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<HintedShapeIndicator />
 						<SnapIndicatorWrapper />
 						<SelectionForegroundWrapper />
+						<HandlesWrapper />
 						<LiveCollaborators />
 					</div>
 				</div>

package/src/lib/editor/Editor.ts

@@ -155,7 +155,7 @@ import {
 	TLPointerEventInfo,
 	TLWheelEventInfo,
 } from './types/event-types'
-import { TLExternalAssetContent, TLExternalContent } from './types/external-content'
+import { TLExternalAsset, TLExternalContent } from './types/external-content'
 import { TLHistoryBatchOptions } from './types/history-types'
 import {
 	OptionalKeys,
@@ -929,6 +929,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return shapeUtil
 	}
 
+	/**
+	 * 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
+	hasShapeUtil(arg: string | { type: string }): boolean {
+		const type = typeof arg === 'string' ? arg : arg.type
+		return hasOwnProperty(this.shapeUtils, type)
+	}
+
 	/* ------------------- Binding Utils ------------------ */
 	/**
 	 * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -1385,8 +1400,8 @@ export 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.
@@ -6760,6 +6775,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
+		let didResize = false
+
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
 			const newPagePoint = this._scalePagePoint(
@@ -6798,24 +6815,30 @@ export class Editor extends EventEmitter<TLEventMap> {
 				)
 			}
 
+			const resizedShape = util.onResize(
+				{ ...initialShape, x, y },
+				{
+					newPoint: newLocalPoint,
+					handle: opts.dragHandle ?? 'bottom_right',
+					// don't set isSingle to true for children
+					mode: opts.mode ?? 'scale_shape',
+					scaleX: myScale.x,
+					scaleY: myScale.y,
+					initialBounds,
+					initialShape,
+				}
+			)
+
+			if (resizedShape) {
+				didResize = true
+			}
+
 			workingShape = applyPartialToRecordWithProps(workingShape, {
 				id,
 				type: initialShape.type as any,
 				x: newLocalPoint.x,
 				y: newLocalPoint.y,
-				...util.onResize(
-					{ ...initialShape, x, y },
-					{
-						newPoint: newLocalPoint,
-						handle: opts.dragHandle ?? 'bottom_right',
-						// don't set isSingle to true for children
-						mode: opts.mode ?? 'scale_shape',
-						scaleX: myScale.x,
-						scaleY: myScale.y,
-						initialBounds,
-						initialShape,
-					}
-				),
+				...resizedShape,
 			})
 
 			if (!opts.skipStartAndEndCallbacks) {
@@ -6826,7 +6849,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 
 			this.updateShapes([workingShape])
-		} else {
+		}
+
+		if (!didResize) {
+			// reposition shape (rather than resizing it) based on where its resized center would be
+
 			const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center)
 			// get the model changes from the shape util
 			const newPageCenter = this._scalePagePoint(
@@ -7948,10 +7975,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	externalAssetContentHandlers: {
-		[K in TLExternalAssetContent['type']]: {
-			[Key in K]:
-				| null
-				| ((info: TLExternalAssetContent & { type: Key }) => Promise<TLAsset | undefined>)
+		[K in TLExternalAsset['type']]: {
+			[Key in K]: null | ((info: TLExternalAsset & { type: Key }) => Promise<TLAsset | undefined>)
 		}[K]
 	} = {
 		file: null,
@@ -7980,9 +8005,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(
+	registerExternalAssetHandler<T extends TLExternalAsset['type']>(
 		type: T,
-		handler: null | ((info: TLExternalAssetContent & { type: T }) => Promise<TLAsset>)
+		handler: null | ((info: TLExternalAsset & { type: T }) => Promise<TLAsset>)
 	): this {
 		this.externalAssetContentHandlers[type] = handler as any
 		return this
@@ -8050,18 +8075,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @param info - Info about the external content.
 	 * @returns The asset.
 	 */
-	async getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined> {
+	async getAssetForExternalContent(info: TLExternalAsset): Promise<TLAsset | undefined> {
 		return await this.externalAssetContentHandlers[info.type]?.(info as any)
 	}
 
-	hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean {
+	hasExternalAssetHandler(type: TLExternalAsset['type']): boolean {
 		return !!this.externalAssetContentHandlers[type]
 	}
 
 	/** @internal */
 	externalContentHandlers: {
 		[K in TLExternalContent<any>['type']]: {
-			[Key in K]: null | ((info: TLExternalContent<any> & { type: Key }) => void)
+			[Key in K]: null | ((info: Extract<TLExternalContent<any>, { type: Key }>) => void)
 		}[K]
 	} = {
 		text: null,
@@ -8069,6 +8094,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		embed: null,
 		'svg-text': null,
 		url: null,
+		tldraw: null,
+		excalidraw: null,
 	}
 
 	/**
@@ -8096,7 +8123,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			| null
 			| ((
 					info: T extends TLExternalContent<E>['type']
-						? TLExternalContent<E> & { type: T }
+						? Extract<TLExternalContent<E>, { type: T }>
 						: TLExternalContent<E>
 			  ) => void)
 	): this {
@@ -8638,7 +8665,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		switch (withDefaults.format) {
 			case 'svg':
 				return {
-					blob: new Blob([result.svg], { type: 'text/plain' }),
+					blob: new Blob([result.svg], { type: 'image/svg+xml' }),
 					width: result.width,
 					height: result.height,
 				}
@@ -9342,6 +9369,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// todo: replace with new readonly mode?
 		if (this.getCrashingError()) return this
 
+		this.emit('before-event', info)
+
 		const { inputs } = this
 		const { type } = info
 

package/src/lib/editor/managers/TextManager.ts

@@ -230,6 +230,7 @@ export class TextManager {
 		elm.style.setProperty('font-weight', opts.fontWeight)
 		elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
 		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
+		elm.style.setProperty('font-style', opts.fontStyle)
 
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -5,11 +5,12 @@ import {
 	TLHandle,
 	TLPropsMigrations,
 	TLShape,
+	TLShapeCrop,
 	TLShapePartial,
 	TLUnknownShape,
 } from '@tldraw/tlschema'
 import { ReactElement } from 'react'
-import { Box } from '../../primitives/Box'
+import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import type { Editor } from '../Editor'
@@ -52,8 +53,27 @@ export interface TLShapeUtilCanvasSvgDef {
 
 /** @public */
 export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
+	/** Configure this shape utils {@link ShapeUtil.options | `options`}. */
+	static configure<T extends TLShapeUtilConstructor<any, any>>(
+		this: T,
+		options: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never
+	): T {
+		// @ts-expect-error -- typescript has no idea what's going on here but it's fine
+		return class extends this {
+			// @ts-expect-error
+			options = { ...this.options, ...options }
+		}
+	}
+
 	constructor(public editor: Editor) {}
 
+	/**
+	 * Options for this shape util. If you're implementing a custom shape util, you can override
+	 * this to provide customization options for your shape. If using an existing shape util, you
+	 * can customizing this by calling {@link ShapeUtil.configure}.
+	 */
+	options = {}
+
 	/**
 	 * Props allow you to define the shape's properties in a way that the editor can understand.
 	 * This has two main uses:
@@ -419,6 +439,19 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	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.
 	 *
@@ -616,6 +649,21 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	onEditEnd?(shape: Shape): void
 }
 
+/**
+ * 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 interface TLCropInfo<T extends TLShape> {
+	handle: SelectionHandle
+	change: Vec
+	crop: TLShapeCrop
+	uncroppedSize: { w: number; h: number }
+	initialShape: T
+}
+
 /**
  * The type of resize.
  *

package/src/lib/editor/shapes/shared/resizeScaled.ts

@@ -0,0 +1,61 @@
+import { TLBaseShape } from '@tldraw/tlschema'
+import { exhaustiveSwitchError } from '@tldraw/utils'
+import { Vec } from '../../../primitives/Vec'
+import { TLResizeInfo } from '../ShapeUtil'
+
+/**
+ * Resize a shape that has a scale prop.
+ *
+ * @param shape - The shape to resize
+ * @param info - The resize info
+ *
+ * @public */
+export function resizeScaled(
+	shape: TLBaseShape<any, { scale: number }>,
+	{ initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>
+) {
+	let scaleDelta: number
+	switch (handle) {
+		case 'bottom_left':
+		case 'bottom_right':
+		case 'top_left':
+		case 'top_right': {
+			scaleDelta = Math.max(0.01, Math.max(Math.abs(scaleX), Math.abs(scaleY)))
+			break
+		}
+		case 'left':
+		case 'right': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleX))
+			break
+		}
+		case 'bottom':
+		case 'top': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleY))
+			break
+		}
+		default: {
+			throw exhaustiveSwitchError(handle)
+		}
+	}
+
+	// Compute the offset (if flipped X or flipped Y)
+	const offset = new Vec(0, 0)
+
+	if (scaleX < 0) {
+		offset.x = -(initialBounds.width * scaleDelta)
+	}
+	if (scaleY < 0) {
+		offset.y = -(initialBounds.height * scaleDelta)
+	}
+
+	// Apply the offset to the new point
+	const { x, y } = Vec.Add(newPoint, offset.rot(shape.rotation))
+
+	return {
+		x,
+		y,
+		props: {
+			scale: scaleDelta * shape.props.scale,
+		},
+	}
+}

package/src/lib/editor/types/emit-types.ts

@@ -12,6 +12,7 @@ export interface TLEventMap {
 	crash: [{ error: unknown }]
 	'stop-camera-animation': []
 	'stop-following': []
+	'before-event': [TLEventInfo]
 	event: [TLEventInfo]
 	tick: [number]
 	frame: [number]

package/src/lib/editor/types/external-content.ts

@@ -2,57 +2,111 @@ import { TLAssetId } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
 import { TLContent } from './clipboard-types'
 
+/** @public */
+export interface TLTldrawExternalContentSource {
+	type: 'tldraw'
+	data: TLContent
+}
+
+/** @public */
+export interface TLExcalidrawExternalContentSource {
+	type: 'excalidraw'
+	data: any
+}
+
+/** @public */
+export interface TLTextExternalContentSource {
+	type: 'text'
+	data: string
+	subtype: 'json' | 'html' | 'text' | 'url'
+}
+
+/** @public */
+export interface TLErrorExternalContentSource {
+	type: 'error'
+	data: string | null
+	reason: string
+}
+
 /** @public */
 export type TLExternalContentSource =
-	| {
-			type: 'tldraw'
-			data: TLContent
-	  }
-	| {
-			type: 'excalidraw'
-			data: any
-	  }
-	| {
-			type: 'text'
-			data: string
-			subtype: 'json' | 'html' | 'text' | 'url'
-	  }
-	| {
-			type: 'error'
-			data: string | null
-			reason: string
-	  }
-
-/** @public */
-export type TLExternalContent<EmbedDefinition> = {
+	| TLTldrawExternalContentSource
+	| TLExcalidrawExternalContentSource
+	| TLTextExternalContentSource
+	| TLErrorExternalContentSource
+
+/** @public */
+export interface TLBaseExternalContent {
 	sources?: TLExternalContentSource[]
 	point?: VecLike
-} & (
-	| {
-			type: 'text'
-			text: string
-	  }
-	| {
-			type: 'files'
-			files: File[]
-			ignoreParent: boolean
-	  }
-	| {
-			type: 'url'
-			url: string
-	  }
-	| {
-			type: 'svg-text'
-			text: string
-	  }
-	| {
-			type: 'embed'
-			url: string
-			embed: EmbedDefinition
-	  }
-)
-
-/** @public */
-export type TLExternalAssetContent =
-	| { type: 'file'; file: File; assetId?: TLAssetId }
-	| { type: 'url'; url: string }
+}
+
+/** @public */
+export interface TLTextExternalContent extends TLBaseExternalContent {
+	type: 'text'
+	text: string
+}
+
+/** @public */
+export interface TLFilesExternalContent extends TLBaseExternalContent {
+	type: 'files'
+	files: File[]
+	ignoreParent: boolean
+}
+
+/** @public */
+export interface TLUrlExternalContent extends TLBaseExternalContent {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export interface TLSvgTextExternalContent extends TLBaseExternalContent {
+	type: 'svg-text'
+	text: string
+}
+
+/** @public */
+export interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
+	type: 'embed'
+	url: string
+	embed: EmbedDefinition
+}
+
+/** @public */
+export interface TLTldrawExternalContent extends TLBaseExternalContent {
+	type: 'tldraw'
+	content: TLContent
+}
+
+/** @public */
+export interface TLExcalidrawExternalContent extends TLBaseExternalContent {
+	type: 'excalidraw'
+	content: any
+}
+
+/** @public */
+export type TLExternalContent<EmbedDefinition> =
+	| TLTextExternalContent
+	| TLFilesExternalContent
+	| TLUrlExternalContent
+	| TLSvgTextExternalContent
+	| TLEmbedExternalContent<EmbedDefinition>
+	| TLTldrawExternalContent
+	| TLExcalidrawExternalContent
+
+/** @public */
+export interface TLFileExternalAsset {
+	type: 'file'
+	file: File
+	assetId?: TLAssetId
+}
+
+/** @public */
+export interface TLUrlExternalAsset {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset

package/src/lib/hooks/useCanvasEvents.ts

@@ -117,16 +117,28 @@ export function useCanvasEvents() {
 			async function onDrop(e: React.DragEvent<Element>) {
 				preventDefault(e)
 				stopEventPropagation(e)
-				if (!e.dataTransfer?.files?.length) return
 
-				const files = Array.from(e.dataTransfer.files)
+				if (e.dataTransfer?.files?.length) {
+					const files = Array.from(e.dataTransfer.files)
 
-				await editor.putExternalContent({
-					type: 'files',
-					files,
-					point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
-					ignoreParent: false,
-				})
+					await editor.putExternalContent({
+						type: 'files',
+						files,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						ignoreParent: false,
+					})
+					return
+				}
+
+				const url = e.dataTransfer.getData('url')
+				if (url) {
+					await editor.putExternalContent({
+						type: 'url',
+						url,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+					})
+					return
+				}
 			}
 
 			function onClick(e: React.MouseEvent) {