@tldraw/editor 3.15.0-canary.11f7238a9bfa → 3.15.0-canary.175d131e5195

package/src/lib/editor/Editor.ts

@@ -1803,7 +1803,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Select all direct children of the current page.
+	 * Select all shapes. If the user has selected shapes that share a parent,
+	 * select all shapes within that parent. If the user has not selected any shapes,
+	 * or if the shapes shapes are only on select all shapes on the current page.
 	 *
 	 * @example
 	 * ```ts
@@ -1813,11 +1815,34 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	selectAll(): this {
-		const ids = this.getSortedChildIdsForParent(this.getCurrentPageId())
-		// page might have no shapes
+		let parentToSelectWithinId: TLParentId | null = null
+
+		const selectedShapeIds = this.getSelectedShapeIds()
+
+		// If we have selected shapes, try to find a parent to select within
+		if (selectedShapeIds.length > 0) {
+			for (const id of selectedShapeIds) {
+				const shape = this.getShape(id)
+				if (!shape) continue
+				if (parentToSelectWithinId === null) {
+					// If we haven't found a parent yet, set this parent as the parent to select within
+					parentToSelectWithinId = shape.parentId
+				} else if (parentToSelectWithinId !== shape.parentId) {
+					// If we've found two different parents, we can't select all, do nothing
+					return this
+				}
+			}
+		}
+
+		// If we haven't found a parent from our selected shapes, select the current page
+		if (!parentToSelectWithinId) {
+			parentToSelectWithinId = this.getCurrentPageId()
+		}
+
+		// Select all the unlocked shapes within the parent
+		const ids = this.getSortedChildIdsForParent(parentToSelectWithinId)
 		if (ids.length <= 0) return this
 		this.setSelectedShapes(this._getUnlockedShapeIds(ids))
-
 		return this
 	}
 
@@ -1838,10 +1863,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
+		const filteredShapes = isSelectedWithinContainer
+			? this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
+			: this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId))
 		const readingOrderShapes = isSelectedWithinContainer
-			? this._getShapesInReadingOrder(
-					this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
-				)
+			? this._getShapesInReadingOrder(filteredShapes)
 			: this.getCurrentPageShapesInReadingOrder()
 		const currentShapeId: TLShapeId | undefined =
 			selectedShapeIds.length === 1
@@ -1858,7 +1884,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			adjacentShapeId = shapeIds[adjacentIndex]
 		} else {
 			if (!currentShapeId) return
-			adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction)
+			adjacentShapeId = this.getNearestAdjacentShape(filteredShapes, currentShapeId, direction)
 		}
 
 		const shape = this.getShape(adjacentShapeId)
@@ -1957,6 +1983,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	getNearestAdjacentShape(
+		shapes: TLShape[],
 		currentShapeId: TLShapeId,
 		direction: 'left' | 'right' | 'up' | 'down'
 	): TLShapeId {
@@ -1964,7 +1991,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const currentShape = this.getShape(currentShapeId)
 		if (!currentShape) return currentShapeId
 
-		const shapes = this.getCurrentPageShapes()
 		const tabbableShapes = shapes.filter(
 			(shape) => this.getShapeUtil(shape).canTabTo(shape) && shape.id !== currentShapeId
 		)
@@ -4395,21 +4421,28 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	deletePage(page: TLPageId | TLPage): this {
 		const id = typeof page === 'string' ? page : page.id
-		this.run(() => {
-			if (this.getIsReadonly()) return
-			const pages = this.getPages()
-			if (pages.length === 1) return
+		this.run(
+			() => {
+				if (this.getIsReadonly()) return
+				const pages = this.getPages()
+				if (pages.length === 1) return
 
-			const deletedPage = this.getPage(id)
-			if (!deletedPage) return
+				const deletedPage = this.getPage(id)
+				if (!deletedPage) return
 
-			if (id === this.getCurrentPageId()) {
-				const index = pages.findIndex((page) => page.id === id)
-				const next = pages[index - 1] ?? pages[index + 1]
-				this.setCurrentPage(next.id)
-			}
-			this.store.remove([deletedPage.id])
-		})
+				if (id === this.getCurrentPageId()) {
+					const index = pages.findIndex((page) => page.id === id)
+					const next = pages[index - 1] ?? pages[index + 1]
+					this.setCurrentPage(next.id)
+				}
+
+				const shapes = this.getSortedChildIdsForParent(deletedPage.id)
+				this.deleteShapes(shapes)
+
+				this.store.remove([deletedPage.id])
+			},
+			{ ignoreShapeLock: true }
+		)
 		return this
 	}
 

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

@@ -1,4 +1,5 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
+import { objectMapKeys } from '@tldraw/utils'
 import { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
@@ -60,10 +61,18 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
+const initialDefaultStyles = Object.freeze({
+	'overflow-wrap': 'break-word',
+	'word-break': 'auto',
+	width: null,
+	height: null,
+	'max-width': null,
+	'min-width': null,
+})
+
 /** @public */
 export class TextManager {
 	private elm: HTMLDivElement
-	private defaultStyles: Record<string, string | null>
 
 	constructor(public editor: Editor) {
 		const elm = document.createElement('div')
@@ -73,31 +82,34 @@ export class TextManager {
 		elm.tabIndex = -1
 		this.editor.getContainer().appendChild(elm)
 
-		// we need to save the default styles so that we can restore them when we're done
-		// these must be the css names, not the js names for the styles
-		this.defaultStyles = {
-			'overflow-wrap': 'break-word',
-			'word-break': 'auto',
-			width: null,
-			height: null,
-			'max-width': null,
-			'min-width': null,
+		this.elm = elm
+
+		for (const key of objectMapKeys(initialDefaultStyles)) {
+			elm.style.setProperty(key, initialDefaultStyles[key])
 		}
+	}
 
-		this.elm = elm
+	private setElementStyles(styles: Record<string, string | undefined>) {
+		const stylesToReinstate = {} as any
+		for (const key of objectMapKeys(styles)) {
+			if (typeof styles[key] === 'string') {
+				const oldValue = this.elm.style.getPropertyValue(key)
+				if (oldValue === styles[key]) continue
+				stylesToReinstate[key] = oldValue
+				this.elm.style.setProperty(key, styles[key])
+			}
+		}
+		return () => {
+			for (const key of objectMapKeys(stylesToReinstate)) {
+				this.elm.style.setProperty(key, stylesToReinstate[key])
+			}
+		}
 	}
 
 	dispose() {
 		return this.elm.remove()
 	}
 
-	private resetElmStyles() {
-		const { elm, defaultStyles } = this
-		for (const key in defaultStyles) {
-			elm.style.setProperty(key, defaultStyles[key])
-		}
-	}
-
 	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const div = document.createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
@@ -107,54 +119,36 @@ export class TextManager {
 	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const { elm } = this
 
-		if (opts.otherStyles) {
-			for (const key in opts.otherStyles) {
-				if (!this.defaultStyles[key]) {
-					// we need to save the original style so that we can restore it when we're done
-					this.defaultStyles[key] = elm.style.getPropertyValue(key)
-				}
-			}
+		const newStyles = {
+			'font-family': opts.fontFamily,
+			'font-style': opts.fontStyle,
+			'font-weight': opts.fontWeight,
+			'font-size': opts.fontSize + 'px',
+			'line-height': opts.lineHeight.toString(),
+			padding: opts.padding,
+			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
+			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
+			'overflow-wrap': opts.disableOverflowWrapBreaking ? 'normal' : undefined,
+			...opts.otherStyles,
 		}
 
-		elm.innerHTML = html
+		const restoreStyles = this.setElementStyles(newStyles)
 
-		// Apply the default styles to the element (for all styles here or that were ever seen in opts.otherStyles)
-		this.resetElmStyles()
+		try {
+			elm.innerHTML = html
 
-		elm.style.setProperty('font-family', opts.fontFamily)
-		elm.style.setProperty('font-style', opts.fontStyle)
-		elm.style.setProperty('font-weight', opts.fontWeight)
-		elm.style.setProperty('font-size', opts.fontSize + 'px')
-		elm.style.setProperty('line-height', opts.lineHeight.toString())
-		elm.style.setProperty('padding', opts.padding)
+			const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
+			const rect = elm.getBoundingClientRect()
 
-		if (opts.maxWidth) {
-			elm.style.setProperty('max-width', opts.maxWidth + 'px')
-		}
-
-		if (opts.minWidth) {
-			elm.style.setProperty('min-width', opts.minWidth + 'px')
-		}
-
-		if (opts.disableOverflowWrapBreaking) {
-			elm.style.setProperty('overflow-wrap', 'normal')
-		}
-
-		if (opts.otherStyles) {
-			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				elm.style.setProperty(key, value)
+			return {
+				x: 0,
+				y: 0,
+				w: rect.width,
+				h: rect.height,
+				scrollWidth,
 			}
-		}
-
-		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
-		const rect = elm.getBoundingClientRect()
-
-		return {
-			x: 0,
-			y: 0,
-			w: rect.width,
-			h: rect.height,
-			scrollWidth,
+		} finally {
+			restoreStyles()
 		}
 	}
 
@@ -274,82 +268,68 @@ export class TextManager {
 
 		const { elm } = this
 
-		if (opts.otherStyles) {
-			for (const key in opts.otherStyles) {
-				if (!this.defaultStyles[key]) {
-					// we need to save the original style so that we can restore it when we're done
-					this.defaultStyles[key] = elm.style.getPropertyValue(key)
-				}
-			}
-		}
-
-		this.resetElmStyles()
-
-		elm.style.setProperty('font-family', opts.fontFamily)
-		elm.style.setProperty('font-style', opts.fontStyle)
-		elm.style.setProperty('font-weight', opts.fontWeight)
-		elm.style.setProperty('font-size', opts.fontSize + 'px')
-		elm.style.setProperty('line-height', opts.lineHeight.toString())
-
-		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
-		elm.style.setProperty('width', `${elementWidth}px`)
-		elm.style.setProperty('height', 'min-content')
-		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
-
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
-
-		if (shouldTruncateToFirstLine) {
-			elm.style.setProperty('overflow-wrap', 'anywhere')
-			elm.style.setProperty('word-break', 'break-all')
-		}
-
-		if (opts.otherStyles) {
-			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				elm.style.setProperty(key, value)
-			}
+		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
+		const newStyles = {
+			'font-family': opts.fontFamily,
+			'font-style': opts.fontStyle,
+			'font-weight': opts.fontWeight,
+			'font-size': opts.fontSize + 'px',
+			'line-height': opts.lineHeight.toString(),
+			width: `${elementWidth}px`,
+			height: 'min-content',
+			'text-align': textAlignmentsForLtr[opts.textAlign],
+			'overflow-wrap': shouldTruncateToFirstLine ? 'anywhere' : undefined,
+			'word-break': shouldTruncateToFirstLine ? 'break-all' : undefined,
+			...opts.otherStyles,
 		}
+		const restoreStyles = this.setElementStyles(newStyles)
 
-		const normalizedText = normalizeTextForDom(textToMeasure)
-
-		// Render the text into the measurement element:
-		elm.textContent = normalizedText
-
-		// actually measure the text:
-		const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
-			shouldTruncateToFirstLine,
-		})
+		try {
+			const normalizedText = normalizeTextForDom(textToMeasure)
 
-		if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
-			// we need to measure the ellipsis to know how much space it takes up
-			elm.textContent = '…'
-			const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
-
-			// then, we need to subtract that space from the width we have and measure again:
-			elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
+			// Render the text into the measurement element:
 			elm.textContent = normalizedText
-			const truncatedSpans = this.measureElementTextNodeSpans(elm, {
-				shouldTruncateToFirstLine: true,
-			}).spans
-
-			// Finally, we add in our ellipsis at the end of the last span. We
-			// have to do this after measuring, not before, because adding the
-			// ellipsis changes how whitespace might be getting collapsed by the
-			// browser.
-			const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
-			truncatedSpans.push({
-				text: '…',
-				box: {
-					x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
-					y: lastSpan.box.y,
-					w: ellipsisWidth,
-					h: lastSpan.box.h,
-				},
+
+			// actually measure the text:
+			const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
+				shouldTruncateToFirstLine,
 			})
 
-			return truncatedSpans
-		}
+			if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
+				// we need to measure the ellipsis to know how much space it takes up
+				elm.textContent = '…'
+				const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
+
+				// then, we need to subtract that space from the width we have and measure again:
+				elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
+				elm.textContent = normalizedText
+				const truncatedSpans = this.measureElementTextNodeSpans(elm, {
+					shouldTruncateToFirstLine: true,
+				}).spans
+
+				// Finally, we add in our ellipsis at the end of the last span. We
+				// have to do this after measuring, not before, because adding the
+				// ellipsis changes how whitespace might be getting collapsed by the
+				// browser.
+				const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
+				truncatedSpans.push({
+					text: '…',
+					box: {
+						x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
+						y: lastSpan.box.y,
+						w: ellipsisWidth,
+						h: lastSpan.box.h,
+					},
+				})
+
+				return truncatedSpans
+			}
 
-		return spans
+			return spans
+		} finally {
+			restoreStyles()
+		}
 	}
 }

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

@@ -584,6 +584,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape resize is cancelled.
+	 *
+	 * @param initial - The shape at the start of the resize.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onResizeCancel?(initial: Shape, current: Shape): void
+
 	/**
 	 * A callback called when a shape starts being translated.
 	 *
@@ -613,6 +622,25 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape translation is cancelled.
+	 *
+	 * @param initial - The shape at the start of the translation.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onTranslateCancel?(initial: Shape, current: Shape): void
+
+	/**
+	 * A callback called when a shape's handle starts being dragged.
+	 *
+	 * @param shape - The shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
+
 	/**
 	 * A callback called when a shape's handle changes.
 	 *
@@ -623,6 +651,25 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape's handle finishes being dragged.
+	 *
+	 * @param current - The current shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
+
+	/**
+	 * A callback called when a shape's handle drag is cancelled.
+	 *
+	 * @param current - The current shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @public
+	 */
+	onHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void
+
 	/**
 	 * A callback called when a shape starts being rotated.
 	 *
@@ -652,6 +699,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape rotation is cancelled.
+	 *
+	 * @param initial - The shape at the start of the rotation.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onRotateCancel?(initial: Shape, current: Shape): void
+
 	/**
 	 * Not currently used.
 	 *
@@ -819,5 +875,6 @@ export interface TLResizeInfo<T extends TLShape> {
 export interface TLHandleDragInfo<T extends TLShape> {
 	handle: TLHandle
 	isPrecise: boolean
+	isCreatingShape: boolean
 	initial?: T | undefined
 }