tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -1,5 +1,4 @@
 import {
-	Mat,
 	StateNode,
 	TLArrowShape,
 	TLHandle,
@@ -27,20 +26,20 @@ export type DraggingHandleInfo = TLPointerEventInfo & {
 export class DraggingHandle extends StateNode {
 	static override id = 'dragging_handle'
 
-	shapeId!: TLShapeId
-	initialHandle!: TLHandle
-	initialAdjacentHandle!: TLHandle | null
-	initialPagePoint!: Vec
+	shapeId = '' as TLShapeId
+	initialHandle = {} as TLHandle
+	initialAdjacentHandle = null as TLHandle | null
+	initialPagePoint = {} as Vec
 
-	markId!: string
-	initialPageTransform!: Mat
-	initialPageRotation!: number
+	markId = ''
+	initialPageTransform: any
+	initialPageRotation: any
 
-	info!: DraggingHandleInfo
+	info = {} as DraggingHandleInfo
 
 	isPrecise = false
-	isPreciseId: TLShapeId | null = null
-	pointingId: TLShapeId | null = null
+	isPreciseId = null as TLShapeId | null
+	pointingId = null as TLShapeId | null
 
 	override onEnter(info: DraggingHandleInfo) {
 		const { shape, isCreating, creatingMarkId, handle } = info
@@ -67,6 +66,26 @@ export class DraggingHandle extends StateNode {
 
 		this.initialHandle = structuredClone(handle)
 
+		if (this.editor.isShapeOfType<TLLineShape>(shape, 'line')) {
+			// For line shapes, if we're dragging a "create" handle, then
+			// create a new vertex handle at that point; and make this handle
+			// the handle that we're dragging.
+			if (this.initialHandle.type === 'create') {
+				this.editor.updateShape({
+					...shape,
+					props: {
+						points: {
+							...shape.props.points,
+							[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
+						},
+					},
+				})
+				const handlesAfter = this.editor.getShapeHandles(shape)!
+				const handleAfter = handlesAfter.find((h) => h.index === handle.index)!
+				this.initialHandle = structuredClone(handleAfter)
+			}
+		}
+
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
 		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
@@ -116,19 +135,6 @@ export class DraggingHandle extends StateNode {
 		}
 		// -->
 
-		// Call onHandleDragStart callback
-		const handleDragInfo = {
-			handle: this.initialHandle,
-			isPrecise: this.isPrecise,
-			isCreatingShape: !!this.info.isCreating,
-			initial: shape,
-		}
-		const util = this.editor.getShapeUtil(shape)
-		const startChanges = util.onHandleDragStart?.(shape, handleDragInfo)
-		if (startChanges) {
-			this.editor.updateShapes([{ ...startChanges, id: shape.id, type: shape.type }])
-		}
-
 		this.update()
 
 		this.editor.select(this.shapeId)
@@ -198,22 +204,6 @@ export class DraggingHandle extends StateNode {
 		this.editor.snaps.clearIndicators()
 		kickoutOccludedShapes(this.editor, [this.shapeId])
 
-		// Call onHandleDragEnd callback before state transitions
-		const shape = this.editor.getShape(this.shapeId)
-		if (shape) {
-			const util = this.editor.getShapeUtil(shape)
-			const handleDragInfo = {
-				handle: this.initialHandle,
-				isPrecise: this.isPrecise,
-				isCreatingShape: !!this.info.isCreating,
-				initial: this.info.shape,
-			}
-			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
-			if (endChanges) {
-				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
-			}
-		}
-
 		const { onInteractionEnd } = this.info
 		if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
 			// Return to the tool that was active before this one,
@@ -226,19 +216,6 @@ export class DraggingHandle extends StateNode {
 	}
 
 	private cancel() {
-		// Call onHandleDragCancel callback before bailing to mark
-		const shape = this.editor.getShape(this.shapeId)
-		if (shape) {
-			const util = this.editor.getShapeUtil(shape)
-			const handleDragInfo = {
-				handle: this.initialHandle,
-				isPrecise: this.isPrecise,
-				isCreatingShape: !!this.info.isCreating,
-				initial: this.info.shape,
-			}
-			util.onHandleDragCancel?.(shape, handleDragInfo)
-		}
-
 		this.editor.bailToMark(this.markId)
 		this.editor.snaps.clearIndicators()
 
@@ -307,7 +284,6 @@ export class DraggingHandle extends StateNode {
 		const changes = util.onHandleDrag?.(shape, {
 			handle: nextHandle,
 			isPrecise: this.isPrecise || altKey,
-			isCreatingShape: !!this.info.isCreating,
 			initial: initial,
 		})
 

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -1,7 +1,9 @@
 import {
 	Editor,
+	Group2d,
 	StateNode,
 	TLAdjacentDirection,
+	TLArrowShape,
 	TLClickEventInfo,
 	TLGroupShape,
 	TLKeyboardEventInfo,
@@ -16,7 +18,6 @@ import {
 	pointInPolygon,
 	toRichText,
 } from '@tldraw/editor'
-import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
@@ -97,6 +98,12 @@ export class Idle extends StateNode {
 			case 'shape': {
 				const { shape } = info
 
+				if (this.isOverArrowLabelTest(shape)) {
+					// We're moving the label on a shape.
+					this.parent.transition('pointing_arrow_label', info)
+					break
+				}
+
 				if (this.editor.isShapeOrAncestorLocked(shape)) {
 					this.parent.transition('pointing_canvas', info)
 					break
@@ -588,7 +595,22 @@ export class Idle extends StateNode {
 	isOverArrowLabelTest(shape: TLShape | undefined) {
 		if (!shape) return false
 
-		return isOverArrowLabel(this.editor, shape)
+		// todo: Extract into general hit test for arrows
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
+			const pointInShapeSpace = this.editor.getPointInShapeSpace(
+				shape,
+				this.editor.inputs.currentPagePoint
+			)
+			// How should we handle multiple labels? Do shapes ever have multiple labels?
+			const labelGeometry = this.editor.getShapeGeometry<Group2d>(shape).children[1]
+			// Knowing what we know about arrows... if the shape has no text in its label,
+			// then the label geometry should not be there.
+			if (labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)) {
+				return true
+			}
+		}
+
+		return false
 	}
 
 	handleDoubleClickOnCanvas(info: TLClickEventInfo) {

package/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -1,5 +1,4 @@
 import { StateNode, TLPointerEventInfo, TLShape } from '@tldraw/editor'
-import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
 export class PointingShape extends StateNode {
@@ -211,12 +210,6 @@ export class PointingShape extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
-			if (isOverArrowLabel(this.editor, this.hitShape)) {
-				// We're moving the label on a shape.
-				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })
-				return
-			}
-
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -122,19 +122,8 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
-		// Call onResizeCancel callback before resetting
-		const { shapeSnapshots } = this.snapshot
-
-		shapeSnapshots.forEach(({ shape }) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onResizeCancel?.(shape, current)
-			}
-		})
-
+		// Restore initial models
 		this.editor.bailToMark(this.markId)
-
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
 		} else {

package/src/lib/tools/SelectTool/childStates/Rotating.ts

@@ -109,17 +109,6 @@ export class Rotating extends StateNode {
 	}
 
 	private cancel() {
-		// Call onRotateCancel callback before bailing to mark
-		const { shapeSnapshots } = this.snapshot
-
-		shapeSnapshots.forEach(({ shape }) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onRotateCancel?.(shape, current)
-			}
-		})
-
 		this.editor.bailToMark(this.markId)
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -203,17 +203,6 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
-		// Call onTranslateCancel callback before resetting
-		const { movingShapes } = this.snapshot
-
-		movingShapes.forEach((shape) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onTranslateCancel?.(shape, current)
-			}
-		})
-
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,6 +1,5 @@
 import { Editor, TLShape } from '@tldraw/editor'
 
-/** @public */
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,
 	hitLabels = false

package/src/lib/ui/assetUrls.ts

@@ -1,4 +1,5 @@
 import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'
+import { useMemo } from 'react'
 import { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'
 import { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'
 import { TLUiIconType, iconTypes } from './icon-types'
@@ -41,15 +42,17 @@ export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 export function useDefaultUiAssetUrlsWithOverrides(
 	overrides?: TLUiAssetUrlOverrides
 ): TLUiAssetUrls {
-	if (!overrides) return defaultUiAssetUrls
+	return useMemo(() => {
+		if (!overrides) return defaultUiAssetUrls
 
-	return {
-		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
-		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
-		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
-		translations: Object.assign(
-			{ ...defaultUiAssetUrls.translations },
-			{ ...overrides?.translations }
-		),
-	}
+		return {
+			fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+			icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+			embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+			translations: Object.assign(
+				{ ...defaultUiAssetUrls.translations },
+				{ ...overrides?.translations }
+			),
+		}
+	}, [overrides])
 }

package/src/lib/ui/components/A11y.tsx

@@ -148,22 +148,20 @@ export const useSelectedShapesAnnouncer = () => {
 			if (!editor) return
 
 			const isInSelecting = editor.isIn('select.idle')
-			if (isInSelecting) {
-				const selectedShapeIds = editor.getSelectedShapeIds()
-				if (selectedShapeIds !== rPrevSelectedShapeIds.current) {
-					rPrevSelectedShapeIds.current = selectedShapeIds
-					unsafe__withoutCapture(() => {
-						const a11yLive = generateShapeAnnouncementMessage({
-							editor,
-							selectedShapeIds,
-							msg,
-						})
-
-						if (a11yLive) {
-							a11y.announce({ msg: a11yLive })
-						}
+			const selectedShapeIds = editor.getSelectedShapeIds()
+			if (isInSelecting && selectedShapeIds !== rPrevSelectedShapeIds.current) {
+				rPrevSelectedShapeIds.current = selectedShapeIds
+				unsafe__withoutCapture(() => {
+					const a11yLive = generateShapeAnnouncementMessage({
+						editor,
+						selectedShapeIds,
+						msg,
 					})
-				}
+
+					if (a11yLive) {
+						a11y.announce({ msg: a11yLive })
+					}
+				})
 			}
 		},
 		[editor, a11y, msg]

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -210,49 +210,9 @@ export function DefaultKeyboardShortcutsDialogContent() {
 						/* do nothing */
 					}}
 				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-cw"
-					label="a11y.rotate-shape-cw"
-					kbd="shift+﹥"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-cw-fine"
-					label="a11y.rotate-shape-cw-fine"
-					kbd="shift+alt+﹥"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-ccw"
-					label="a11y.rotate-shape-ccw"
-					kbd="shift+﹤"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-ccw-fine"
-					label="a11y.rotate-shape-ccw-fine"
-					kbd="shift+alt+﹤"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
 				<TldrawUiMenuActionItem actionId="enlarge-shapes" />
 				<TldrawUiMenuActionItem actionId="shrink-shapes" />
 				<TldrawUiMenuActionItem actionId="a11y-repeat-shape-announce" />
-				<TldrawUiMenuItem
-					id="a11y-open-keyboard-shortcuts"
-					label="a11y.open-keyboard-shortcuts"
-					kbd="cmd+alt+/"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
 			</TldrawUiMenuGroup>
 			{showCollaborationUi && (
 				<TldrawUiMenuGroup label="shortcuts-dialog.collaboration" id="collaboration">

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -1,5 +1,4 @@
 import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
-import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
 import { LanguageMenu } from '../LanguageMenu'
@@ -22,6 +21,7 @@ import {
 	ToggleGridItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
+	ToggleReduceMotionItem,
 	ToggleSnapModeItem,
 	ToggleToolLockItem,
 	ToggleTransparentBgMenuItem,
@@ -160,6 +160,7 @@ export function PreferencesGroup() {
 					<ToggleWrapModeItem />
 					<ToggleFocusModeItem />
 					<ToggleEdgeScrollingItem />
+					<ToggleReduceMotionItem />
 					<ToggleDynamicSizeModeItem />
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
@@ -167,9 +168,6 @@ export function PreferencesGroup() {
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>
-				<TldrawUiMenuGroup id="accessibility-menu">
-					<AccessibilityMenu />
-				</TldrawUiMenuGroup>
 			</TldrawUiMenuSubmenu>
 			<LanguageMenu />
 			<KeyboardShortcutsMenuItem />

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -45,7 +45,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 								onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon small icon="minus" />
+								<TldrawUiButtonIcon icon="minus" />
 							</TldrawUiToolbarButton>
 						)}
 						{ZoomMenu && <ZoomMenu key="zoom-menu" />}
@@ -56,7 +56,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 								onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon small icon="plus" />
+								<TldrawUiButtonIcon icon="plus" />
 							</TldrawUiToolbarButton>
 						)}
 						{Minimap && (
@@ -64,9 +64,10 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								type="icon"
 								data-testid="minimap.toggle-button"
 								title={msg('navigation-zone.toggle-minimap')}
+								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
 							>
-								<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />
+								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
 							</TldrawUiToolbarButton>
 						)}
 					</>

package/src/lib/ui/components/Spinner.tsx

@@ -1,4 +1,3 @@
-import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -6,5 +5,28 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
+	return (
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			{...props}
+			aria-label={msg('app.loading')}
+			aria-hidden="false"
+		>
+			<g strokeWidth={2} fill="none" fillRule="evenodd">
+				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</path>
+			</g>
+		</svg>
+	)
 }

package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx

@@ -1,4 +1,4 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
@@ -16,7 +16,6 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -51,7 +50,6 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 			ref={ref}
 			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 			data-ismobile={isMobile}
-			data-show-ui-labels={showUiLabels}
 			onPointerLeave={handlePointerOut}
 		>
 			{content}