tldraw 3.16.0-canary.514c34dff258 → 3.16.0-canary.54408756ac9c

package/src/index.ts

@@ -171,11 +171,7 @@ export {
 export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
 export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
 export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
-export {
-	PlainTextLabel,
-	TextLabel,
-	type PlainTextLabelProps,
-} from './lib/shapes/shared/PlainTextLabel'
+export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
 export {
 	RichTextLabel,
 	RichTextSVG,
@@ -183,10 +179,9 @@ export {
 	type RichTextSVGProps,
 } from './lib/shapes/shared/RichTextLabel'
 export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
-export { useEditablePlainText, useEditableText } from './lib/shapes/shared/useEditablePlainText'
+export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
 export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
 export {
-	useAsset,
 	useImageOrVideoAsset,
 	type UseImageOrVideoAssetOptions,
 } from './lib/shapes/shared/useImageOrVideoAsset'
@@ -365,10 +360,6 @@ export {
 	TldrawUiMenuSubmenu,
 	type TLUiMenuSubmenuProps,
 } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
-export {
-	TldrawUiButtonPicker,
-	type TLUiButtonPickerProps,
-} from './lib/ui/components/primitives/TldrawUiButtonPicker'
 export {
 	TldrawUiContextualToolbar,
 	type TLUiContextualToolbarProps,
@@ -448,17 +439,44 @@ export {
 	type TLUiStylePanelProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanel'
 export {
-	ArrowheadStylePickerSet,
-	CommonStylePickerSet,
 	DefaultStylePanelContent,
-	GeoStylePickerSet,
-	OpacitySlider,
-	SplineStylePickerSet,
-	TextStylePickerSet,
-	type StylePickerSetProps,
-	type ThemeStylePickerSetProps,
-	type TLUiStylePanelContentProps,
+	StylePanelArrowheadPicker,
+	StylePanelArrowKindPicker,
+	StylePanelColorPicker,
+	StylePanelDashPicker,
+	StylePanelFillPicker,
+	StylePanelFontPicker,
+	StylePanelGeoShapePicker,
+	StylePanelLabelAlignPicker,
+	StylePanelOpacityPicker,
+	StylePanelSection,
+	StylePanelSizePicker,
+	StylePanelSplinePicker,
+	StylePanelTextAlignPicker,
+	type StylePanelSectionProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
+export {
+	StylePanelButtonPicker,
+	type StylePanelButtonPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
+export {
+	StylePanelContextProvider,
+	useStylePanelContext,
+	type StylePanelContext,
+	type StylePanelContextProviderProps,
+} from './lib/ui/components/StylePanel/StylePanelContext'
+export {
+	StylePanelDoubleDropdownPicker,
+	type StylePanelDoubleDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
+export {
+	StylePanelDropdownPicker,
+	type StylePanelDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
+export {
+	StylePanelSubheading,
+	type StylePanelSubheadingProps,
+} from './lib/ui/components/StylePanel/StylePanelSubheading'
 export {
 	DefaultImageToolbar,
 	type TLUiImageToolbarProps,
@@ -636,7 +654,6 @@ export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
 export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
 export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
 export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
-export { exportToBlob } from './lib/utils/export/export'
 export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
 export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
 export {

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -227,6 +227,14 @@ interface ArrowheadInfo {
 	hasEndArrowhead: boolean
 }
 export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
+	const isEditing = editor.getEditingShapeId() === shape.id
+	if (!isEditing && isEmptyRichText(shape.props.richText)) {
+		// Short-circuit for empty labels.
+		const bodyGeom = getArrowBodyGeometry(editor, shape)
+		const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
+		return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
+	}
+
 	const debugGeom: Geometry2d[] = []
 	const info = getArrowInfo(editor, shape)!
 

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -100,6 +100,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return false
 	}
 
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
+
 	override getDefaultProps(): TLFrameShape['props'] {
 		return { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }
 	}
@@ -335,6 +339,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return true
 	}
 
+	override getClipPath(shape: TLFrameShape) {
+		return this.editor.getShapeGeometry(shape.id).vertices
+	}
+
 	override canReceiveNewChildrenOfType(shape: TLShape) {
 		return !shape.isLocked
 	}

package/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -57,6 +57,9 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 	override canCrop() {
 		return true
 	}
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
 
 	override getDefaultProps(): TLImageShape['props'] {
 		return {

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -130,9 +130,3 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 		</div>
 	)
 })
-
-/**
- * @deprecated Use `PlainTextLabel` instead.
- * @public
- */
-export const TextLabel = PlainTextLabel

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -167,9 +167,3 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		isReadyForEditing,
 	}
 }
-
-/**
- * @deprecated Use `useEditablePlainText` instead.
- * @public
- */
-export const useEditableText = useEditablePlainText

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -158,10 +158,3 @@ function resolveAssetUrl(
 			callback(url)
 		})
 }
-
-/**
- * @deprecated Use {@link useImageOrVideoAsset} instead.
- *
- * @public
- */
-export const useAsset = useImageOrVideoAsset

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

@@ -157,7 +157,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-direction"
 					label="a11y.select-shape-direction"
-					kbd="cmd+↑→↓←"
+					kbd="cmd+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+↑→"
+					kbd="cmd+shift+[[↑→]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -173,7 +173,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-pan-camera"
 					label="a11y.pan-camera"
-					kbd="[[Space]]+↑→↓←"
+					kbd="[[Space]]+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -197,7 +197,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape"
 					label="a11y.move-shape"
-					kbd="↑→↓←"
+					kbd="[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -205,7 +205,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape-faster"
 					label="a11y.move-shape-faster"
-					kbd="shift+↑→↓←"
+					kbd="shift+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

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

@@ -1,18 +1,26 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import {
+	ReadonlySharedStyleMap,
+	useEditor,
+	usePassThroughWheelEvents,
+	useValue,
+} from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
 import { DefaultStylePanelContent } from './DefaultStylePanelContent'
+import { StylePanelContextProvider } from './StylePanelContext'
 
 /** @public */
 export interface TLUiStylePanelProps {
 	isMobile?: boolean
+	styles?: ReadonlySharedStyleMap | null
 	children?: ReactNode
 }
 
 /** @public @react */
 export const DefaultStylePanel = memo(function DefaultStylePanel({
 	isMobile,
+	styles,
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
@@ -21,15 +29,16 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
 
-	const styles = useRelevantStyles()
-
 	const handlePointerOut = useCallback(() => {
 		if (!isMobile) {
 			editor.updateInstanceState({ isChangingStyle: false })
 		}
 	}, [editor, isMobile])
 
-	const content = children ?? <DefaultStylePanelContent styles={styles} />
+	const defaultStyles = useRelevantStyles()
+	if (styles === undefined) {
+		styles = defaultStyles
+	}
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
@@ -47,14 +56,19 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	}, [editor])
 
 	return (
-		<div
-			ref={ref}
-			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
-			data-ismobile={isMobile}
-			data-show-ui-labels={showUiLabels}
-			onPointerLeave={handlePointerOut}
-		>
-			{content}
-		</div>
+		styles && (
+			<div
+				ref={ref}
+				data-testid="style.panel"
+				className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
+				data-ismobile={isMobile}
+				data-show-ui-labels={showUiLabels}
+				onPointerLeave={handlePointerOut}
+			>
+				<StylePanelContextProvider styles={styles}>
+					{children ?? <DefaultStylePanelContent />}
+				</StylePanelContextProvider>
+			</div>
+		)
 	)
 })