tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.71f83a8a571b

package/src/lib/ui.css

@@ -1007,9 +1007,23 @@
 	flex-direction: column;
 }
 
-.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
+/*
+add a border to the bottom of all but the last section. we have to handle empty sections too, which
+are hidden and shouldn't be counted
+*/
+.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
 	border-bottom: 1px solid var(--tl-color-divider);
 }
+/*
+if a section ends with a slider and we're adding a border, we need some extra space for visual
+balance. we need to handle empty sections as above. is this the most complex css selector in all of
+tldraw? probably.
+*/
+.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
+		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
+	) {
+	margin-bottom: 7px;
+}
 
 .tlui-style-panel__section:empty {
 	display: none;
@@ -1021,7 +1035,7 @@
 }
 
 .tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+	flex: 1;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -1047,6 +1061,9 @@
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -143,7 +143,7 @@ export async function putExcalidrawContent(
 						align,
 						dash: getDash(element),
 						fill: getFill(element),
-					},
+					} as any,
 				})
 				break
 			}
@@ -165,7 +165,7 @@ export async function putExcalidrawContent(
 								})),
 							},
 						],
-					},
+					} as any,
 				})
 				break
 			}
@@ -192,7 +192,7 @@ export async function putExcalidrawContent(
 								})
 							),
 						},
-					},
+					} as any,
 				})
 
 				break
@@ -231,7 +231,7 @@ export async function putExcalidrawContent(
 						end: { x: end[0], y: end[1] },
 						arrowheadEnd: arrowheadsToArrowheadTypes[element.endArrowhead] ?? 'none',
 						arrowheadStart: arrowheadsToArrowheadTypes[element.startArrowhead] ?? 'none',
-					},
+					} as any,
 				})
 
 				if (startTargetId) {
@@ -281,7 +281,7 @@ export async function putExcalidrawContent(
 						color: colorsToColors[element.strokeColor] ?? 'black',
 						richText: toRichText(element.text),
 						textAlign: textAlignToTextAlignTypes[element.textAlign],
-					},
+					} as any,
 				})
 				break
 			}
@@ -313,7 +313,7 @@ export async function putExcalidrawContent(
 						w: element.width,
 						h: element.height,
 						assetId,
-					},
+					} as any,
 				})
 			}
 		}

package/src/lib/utils/export/copyAs.ts

@@ -31,30 +31,7 @@ export interface CopyAsOptions extends TLImageExportOptions {
  *
  * @public
  */
-export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>
-/**
- * @deprecated The format parameter is now part of the opts object.
- * @public
- */
-export function copyAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format: TLCopyType,
-	opts?: TLImageExportOptions & { format?: undefined }
-): Promise<void>
-export function copyAs(
-	...args:
-		| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format: TLCopyType,
-				opts?: TLImageExportOptions & { format?: undefined },
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args
-
+export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {
 	// Note:  it's important that this function itself isn't async and doesn't really use promises -
 	// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write
 	// synchronously to make sure safari knows that the user _wants_ to copy See

package/src/lib/utils/export/export.ts

@@ -1,7 +1,6 @@
 import {
 	Editor,
 	FileHelpers,
-	TLExportType,
 	TLImageExportOptions,
 	TLShapeId,
 	exhaustiveSwitchError,
@@ -35,41 +34,6 @@ export async function exportToString(
 	}
 }
 
-/**
- * Export the given shapes as a blob.
- * @param editor - The editor instance.
- * @param ids - The ids of the shapes to export.
- * @param format - The format to export as.
- * @param opts - Rendering options.
- * @returns A promise that resolves to a blob.
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
- * @public
- */
-export async function exportToBlob({
-	editor,
-	ids,
-	format,
-	opts = {},
-}: {
-	editor: Editor
-	ids: TLShapeId[]
-	format: TLExportType
-	opts?: TLImageExportOptions
-}): Promise<Blob> {
-	const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]
-	switch (format) {
-		case 'jpeg':
-		case 'png':
-		case 'webp':
-		case 'svg': {
-			return (await editor.toImage(idsToUse, { ...opts, format })).blob
-		}
-		default: {
-			exhaustiveSwitchError(format)
-		}
-	}
-}
-
 const clipboardMimeTypesByFormat = {
 	jpeg: 'image/jpeg',
 	png: 'image/png',

package/src/lib/utils/export/exportAs.ts

@@ -28,38 +28,7 @@ export async function exportAs(
 	editor: Editor,
 	ids: TLShapeId[],
 	opts: ExportAsOptions
-): Promise<void>
-/**
- * @deprecated The format & name parameters are now part of the opts object.
- * @public
- */
-export async function exportAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format?: TLExportType,
-	name?: string,
-	opts?: TLImageExportOptions
-): Promise<void>
-export async function exportAs(
-	...args:
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				opts: TLImageExportOptions & { format: TLExportType; name?: string },
-		  ]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format?: TLExportType,
-				name?: string,
-				opts?: TLImageExportOptions,
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'object'
-			? args
-			: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]
-
+): Promise<void> {
 	// If we don't get name then use a predefined one
 	let name = opts.name
 	if (!name) {

package/src/test/Editor.test.tsx

@@ -4,6 +4,7 @@ import {
 	Geometry2d,
 	PageRecordType,
 	Rectangle2d,
+	TLBaseShape,
 	TLGeoShapeProps,
 	TLShape,
 	TldrawEditorProps,
@@ -472,6 +473,18 @@ describe('isFocused', () => {
 	})
 })
 
+declare module '@tldraw/tlschema' {
+	export interface GlobalShapePropsMap {
+		blorg: TLBaseShape<
+			'blorg',
+			{
+				w: number
+				h: number
+			}
+		>
+	}
+}
+
 describe('getShapeUtil', () => {
 	let myUtil: any
 
@@ -519,16 +532,22 @@ describe('getShapeUtil', () => {
 	})
 
 	it('throws if that shape type isnt registered', () => {
-		const myMissingShape = { type: 'missing' } as TLShape
-		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`[Error: No shape util found for type "missing"]`
-		)
+		const myMissingShape = { type: 'missing' }
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				myMissingShape
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 
 	it('throws if that type isnt registered', () => {
-		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`[Error: No shape util found for type "missing"]`
-		)
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				'missing'
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 })
 
@@ -866,9 +885,17 @@ describe('instance.isReadonly', () => {
 	})
 })
 
+type MyCustomShape = TLBaseShape<'my-custom-shape', { w: number; h: number }>
+
+declare module '@tldraw/tlschema' {
+	export interface GlobalShapePropsMap {
+		'my-custom-shape': MyCustomShape
+	}
+}
+
 describe('the geometry cache', () => {
-	class CustomShapeUtil extends BaseBoxShapeUtil<any> {
-		static override type = 'custom'
+	class CustomShapeUtil extends BaseBoxShapeUtil<MyCustomShape> {
+		static override type = 'custom' as const
 
 		getDefaultProps() {
 			return {
@@ -896,7 +923,7 @@ describe('the geometry cache', () => {
 		})
 		const { A } = editor.createShapesFromJsx([<TL.custom ref="A" x={0} y={0} w={100} h={100} />])
 		expect(editor.getShapePageBounds(A)!.width).toBe(100)
-		editor.updateShape({ id: A, type: 'custom', meta: { double: true } })
+		editor.updateShape({ id: A, type: 'my-custom-shape', meta: { double: true } })
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })

package/src/test/TldrawEditor.test.tsx

@@ -411,15 +411,21 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-describe('Custom shapes', () => {
-	type CardShape = TLBaseShape<
-		'card',
-		{
-			w: number
-			h: number
-		}
-	>
+declare module '@tldraw/tlschema' {
+	export interface GlobalShapePropsMap {
+		card: CardShape
+	}
+}
 
+type CardShape = TLBaseShape<
+	'card',
+	{
+		w: number
+		h: number
+	}
+>
+
+describe('Custom shapes', () => {
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
 		static override type = 'card' as const
 
@@ -463,7 +469,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card'
+		override shapeType = 'card' as const
 	}
 
 	const tools = [CardTool]

package/src/test/commands/putContent.test.ts

@@ -25,6 +25,7 @@ describe('Migrations', () => {
 
 	it('Throws error if any shape is invalid due to wrong type', () => {
 		const withInvalidShapeType = structuredClone(clipboardContent)
+		// @ts-expect-error
 		withInvalidShapeType.shapes[0].type = 'invalid'
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrow()
 	})

package/src/test/commands/updateShapes.test.ts

@@ -15,22 +15,26 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// No error here because no generic, the editor doesn't know what this guy is
 		editor.updateShapes([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])
 
-		// Yep error here because we are giving the wrong props to the shape
+		// error here because we are giving the wrong props to the shape
 		editor.updateShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
-				//@ts-expect-error
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])