@tldraw/editor 3.14.0-canary.f8af44c4d1e2 → 3.14.0-canary.faba3f64c07f

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

@@ -4,18 +4,21 @@ import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
 	TLHandle,
+	TLParentId,
 	TLPropsMigrations,
 	TLShape,
 	TLShapeCrop,
+	TLShapeId,
 	TLShapePartial,
 	TLUnknownShape,
 } from '@tldraw/tlschema'
+import { IndexKey } from '@tldraw/utils'
 import { ReactElement } from 'react'
 import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import type { Editor } from '../Editor'
-import { TLFontFace } from '../managers/FontManager'
+import { TLFontFace } from '../managers/FontManager/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
@@ -387,17 +390,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return false
 	}
 
-	/**
-	 * Get whether the shape can receive children of a given type.
-	 *
-	 * @param shape - The shape type.
-	 * @param shapes - The shapes that are being dropped.
-	 * @public
-	 */
-	canDropShapes(_shape: Shape, _shapes: TLShape[]) {
-		return false
-	}
-
 	/**
 	 * Get the shape as an SVG object.
 	 *
@@ -517,7 +509,16 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
 
 	/**
-	 * A callback called when some other shapes are dragged over this one.
+	 * A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.
+	 *
+	 * @param shape - The shape.
+	 * @param shapes - The shapes that are being dragged in.
+	 * @public
+	 */
+	onDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void
+
+	/**
+	 * A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.
 	 *
 	 * @example
 	 *
@@ -531,7 +532,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dragged over this one.
 	 * @public
 	 */
-	onDragShapesOver?(shape: Shape, shapes: TLShape[]): void
+	onDragShapesOver?(shape: Shape, shapes: TLShape[], info: TLDragShapesOverInfo): void
 
 	/**
 	 * A callback called when some other shapes are dragged out of this one.
@@ -540,7 +541,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dragged out.
 	 * @public
 	 */
-	onDragShapesOut?(shape: Shape, shapes: TLShape[]): void
+	onDragShapesOut?(shape: Shape, shapes: TLShape[], info: TLDragShapesOutInfo): void
 
 	/**
 	 * A callback called when some other shapes are dropped over this one.
@@ -549,7 +550,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dropped over this one.
 	 * @public
 	 */
-	onDropShapesOver?(shape: Shape, shapes: TLShape[]): void
+	onDropShapesOver?(shape: Shape, shapes: TLShape[], info: TLDropShapesOverInfo): void
 
 	/**
 	 * A callback called when a shape starts being resized.
@@ -745,6 +746,37 @@ export interface TLCropInfo<T extends TLShape> {
 	crop: TLShapeCrop
 	uncroppedSize: { w: number; h: number }
 	initialShape: T
+	aspectRatioLocked?: boolean
+}
+
+/** @public */
+export interface TLDragShapesInInfo {
+	initialDraggingOverShapeId: TLShapeId | null
+	prevDraggingOverShapeId: TLShapeId | null
+	initialParentIds: Map<TLShapeId, TLParentId>
+	initialIndices: Map<TLShapeId, IndexKey>
+}
+
+/** @public */
+export interface TLDragShapesOverInfo {
+	initialDraggingOverShapeId: TLShapeId | null
+	initialParentIds: Map<TLShapeId, TLParentId>
+	initialIndices: Map<TLShapeId, IndexKey>
+}
+
+/** @public */
+export interface TLDragShapesOutInfo {
+	nextDraggingOverShapeId: TLShapeId | null
+	initialDraggingOverShapeId: TLShapeId | null
+	initialParentIds: Map<TLShapeId, TLParentId>
+	initialIndices: Map<TLShapeId, IndexKey>
+}
+
+/** @public */
+export interface TLDropShapesOverInfo {
+	initialDraggingOverShapeId: TLShapeId | null
+	initialParentIds: Map<TLShapeId, TLParentId>
+	initialIndices: Map<TLShapeId, IndexKey>
 }
 
 /**

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -21,7 +21,7 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 	}
 
 	canResize() {
-		return false
+		return true
 	}
 
 	canResizeChildren() {

package/src/lib/editor/tools/StateNode.ts

@@ -206,15 +206,15 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	}
 
 	// todo: move this logic into transition
-	exit(info: any, from: string) {
+	exit(info: any, to: string) {
 		if (debugFlags.measurePerformance.get() && this.performanceTracker.isStarted()) {
 			this.performanceTracker.stop()
 		}
 		this._isActive.set(false)
-		this.onExit?.(info, from)
+		this.onExit?.(info, to)
 
 		if (!this.getIsActive()) {
-			this.getCurrent()?.exit(info, from)
+			this.getCurrent()?.exit(info, to)
 		}
 	}
 

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

@@ -18,6 +18,10 @@ export interface TLEventMap {
 	frame: [number]
 	'select-all-text': [{ shapeId: TLShapeId }]
 	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
+	'created-shapes': [TLRecord[]]
+	'edited-shapes': [TLRecord[]]
+	'deleted-shapes': [TLShapeId[]]
+	edit: []
 }
 
 /** @public */

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

@@ -1,4 +1,4 @@
-import { TLAssetId } from '@tldraw/tlschema'
+import { TLAssetId, TLShapeId } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
 import { TLContent } from './clipboard-types'
 
@@ -52,7 +52,15 @@ export interface TLTextExternalContent extends TLBaseExternalContent {
 export interface TLFilesExternalContent extends TLBaseExternalContent {
 	type: 'files'
 	files: File[]
-	ignoreParent: boolean
+	ignoreParent?: boolean
+}
+
+/** @public */
+export interface TLFileReplaceExternalContent extends TLBaseExternalContent {
+	type: 'file-replace'
+	file: File
+	shapeId: TLShapeId
+	isImage: boolean
 }
 
 /** @public */
@@ -90,6 +98,7 @@ export interface TLExcalidrawExternalContent extends TLBaseExternalContent {
 export type TLExternalContent<EmbedDefinition> =
 	| TLTextExternalContent
 	| TLFilesExternalContent
+	| TLFileReplaceExternalContent
 	| TLUrlExternalContent
 	| TLSvgTextExternalContent
 	| TLEmbedExternalContent<EmbedDefinition>

package/src/lib/exports/getSvgJsx.tsx

@@ -21,7 +21,7 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import { Editor, TLRenderingShape } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager'
+import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {
 	SvgExportContext,

package/src/lib/hooks/useCanvasEvents.ts

@@ -137,7 +137,6 @@ export function useCanvasEvents() {
 						type: 'files',
 						files,
 						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
-						ignoreParent: false,
 					})
 					return
 				}

package/src/lib/primitives/Box.ts

@@ -591,14 +591,6 @@ export class Box {
 		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
 	}
 
-	prettyMuchEquals(other: Box | BoxModel) {
-		return this.clone().toFixed().equals(Box.From(other).toFixed())
-	}
-
-	static PrettyMuchEquals(a: Box | BoxModel, b: Box | BoxModel) {
-		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
-	}
-
 	zeroFix() {
 		this.w = Math.max(1, this.w)
 		this.h = Math.max(1, this.h)

package/src/lib/primitives/geometry/Geometry2d.ts

@@ -44,6 +44,7 @@ export const Geometry2dFilters: {
 /** @public */
 export interface TransformedGeometry2dOptions {
 	isLabel?: boolean
+	isEmptyLabel?: boolean
 	isInternal?: boolean
 	debugColor?: string
 	ignore?: boolean
@@ -57,20 +58,24 @@ export interface Geometry2dOptions extends TransformedGeometry2dOptions {
 
 /** @public */
 export abstract class Geometry2d {
+	// todo: consider making accessors for these too, so that they can be overridden in subclasses by geometries with more complex logic
 	isFilled = false
 	isClosed = true
 	isLabel = false
+	isEmptyLabel = false
 	isInternal = false
 	debugColor?: string
 	ignore?: boolean
 
 	constructor(opts: Geometry2dOptions) {
+		const { isLabel = false, isEmptyLabel = false, isInternal = false } = opts
 		this.isFilled = opts.isFilled
 		this.isClosed = opts.isClosed
-		this.isLabel = opts.isLabel ?? false
-		this.isInternal = opts.isInternal ?? false
 		this.debugColor = opts.debugColor
 		this.ignore = opts.ignore
+		this.isLabel = isLabel
+		this.isEmptyLabel = isEmptyLabel
+		this.isInternal = isInternal
 	}
 
 	isExcludedByFilter(filters?: Geometry2dFilters) {

package/src/lib/utils/areShapesContentEqual.ts

@@ -1,5 +1,4 @@
 import { TLShape } from '@tldraw/tlschema'
 
-/** @public */
 export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
-	a.parentId === b.parentId && a.props === b.props && a.meta === b.meta
+	a.props === b.props && a.meta === b.meta

package/src/lib/utils/reorderShapes.ts

@@ -1,8 +1,6 @@
 import { TLParentId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
 import { IndexKey, compact, getIndicesBetween, sortByIndex } from '@tldraw/utils'
 import { Editor } from '../editor/Editor'
-import { Vec } from '../primitives/Vec'
-import { polygonsIntersect } from '../primitives/intersect'
 
 export function getReorderingShapesChanges(
 	editor: Editor,
@@ -155,19 +153,18 @@ function reorderToFront(moving: Set<TLShape>, children: TLShape[], changes: TLSh
 }
 
 function getOverlapChecker(editor: Editor, moving: Set<TLShape>) {
-	const movingVertices = Array.from(moving)
-		.map((shape) => {
-			const vertices = editor.getShapePageGeometry(shape).vertices
-			if (!vertices) return null
-			return { shape, vertices }
+	const movingBounds = compact(
+		Array.from(moving).map((shape) => {
+			const bounds = editor.getShapePageBounds(shape)
+			if (!bounds) return null
+			return { shape, bounds }
 		})
-		.filter(Boolean) as { shape: TLShape; vertices: Vec[] }[]
-
+	)
 	const isOverlapping = (child: TLShape) => {
-		const vertices = editor.getShapePageGeometry(child).vertices
-		if (!vertices) return false
-		return movingVertices.some((other) => {
-			return polygonsIntersect(other.vertices, vertices)
+		const bounds = editor.getShapePageBounds(child)
+		if (!bounds) return false
+		return movingBounds.some((other) => {
+			return other.bounds.includes(bounds)
 		})
 	}