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

package/src/lib/ui.css

@@ -97,7 +97,7 @@
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left'] {
+.tlui-button[aria-expanded='true'][data-direction='left']::after {
 	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
@@ -964,7 +964,7 @@
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: tl-fade-in;
+	animation: fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -1000,12 +1000,6 @@
 	max-width: 148px;
 }
 
-.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
-	border-radius: 10px;
-	outline: 2px solid var(--color-text);
-	outline-offset: -5px;
-}
-
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -1070,26 +1064,6 @@
 	}
 }
 
-/* Accessibility subheadings */
-
-.tlui-style-panel__section .tlui-style-panel__subheading,
-.tlui-style-panel__section__common .tlui-style-panel__subheading,
-.tlui-style-panel__subheading + .tlui-slider__container {
-	margin: 0;
-	padding: var(--space-2) var(--space-3) 0px var(--space-4);
-	font-size: 12px;
-	font-weight: inherit;
-	line-height: inherit;
-}
-
-.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
-	padding-top: var(--space-3);
-}
-
-.tlui-style-panel__subheading + .tlui-slider__container {
-	padding-top: 0px;
-}
-
 /* --------------------- Bottom --------------------- */
 
 .tlui-layout__bottom {
@@ -1134,6 +1108,20 @@
 	display: none;
 }
 
+.tlui-navigation-panel__toggle .tlui-icon {
+	opacity: 0.24;
+}
+
+.tlui-navigation-panel__toggle:active .tlui-icon {
+	opacity: 1;
+}
+
+@media (hover: hover) {
+	.tlui-navigation-panel__toggle:hover .tlui-icon {
+		opacity: 1;
+	}
+}
+
 /* Minimap */
 
 .tlui-minimap {
@@ -1248,36 +1236,6 @@
 	transition: transform 0.15s ease-out 0.05s;
 }
 
-/* ------------------- Tooltip -------------------- */
-
-.tlui-tooltip {
-	font-size: 12px;
-	padding: 2px 8px;
-	border-radius: 4px;
-	background-color: var(--color-tooltip);
-	box-shadow: none;
-	color: var(--color-text-shadow);
-	max-width: 400px;
-	width: fit-content;
-	text-align: center;
-	pointer-events: none;
-	will-change: transform, opacity;
-	z-index: 2;
-}
-
-.tlui-tooltip__arrow {
-	fill: var(--color-tooltip);
-	will-change: opacity;
-}
-
-[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
-	z-index: var(--layer-toasts) !important;
-}
-
-[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
-	transition: all 0.1s ease-out;
-}
-
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {
@@ -1421,11 +1379,11 @@
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: tlui-fade-out 100ms ease-in;
+		animation: hide 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -1438,7 +1396,7 @@
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: tlui-slide-out 100ms ease-out;
+		animation: swipe-out 100ms ease-out;
 	}
 }
 
@@ -1453,7 +1411,7 @@
 	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: tl-fade-in 0.12s ease-out;
+	animation: fadeIn 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -2020,7 +1978,7 @@
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes tlui-fade-out {
+@keyframes hide {
 	0% {
 		opacity: 1;
 	}
@@ -2029,7 +1987,7 @@
 	}
 }
 
-@keyframes tlui-slide-in {
+@keyframes slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -2038,7 +1996,7 @@
 	}
 }
 
-@keyframes tlui-slide-out {
+@keyframes swipe-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -149,20 +149,13 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
       "kind": "arc",
       "labelColor": "black",
       "labelPosition": 0.5,
-      "richText": {
-        "content": [
-          {
-            "type": "paragraph",
-          },
-        ],
-        "type": "doc",
-      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
+      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -322,20 +315,13 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
       "kind": "elbow",
       "labelColor": "black",
       "labelPosition": 0.5,
-      "richText": {
-        "content": [
-          {
-            "type": "paragraph",
-          },
-        ],
-        "type": "doc",
-      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
+      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

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

@@ -221,7 +221,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						richText: toRichText(text),
+						text,
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
 						dash: getDash(element),

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -112,20 +112,13 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
-      "richText": {
-        "content": [
-          {
-            "type": "paragraph",
-          },
-        ],
-        "type": "doc",
-      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 146.32,
         "y": 0,
       },
+      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -248,20 +241,13 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
-      "richText": {
-        "content": [
-          {
-            "type": "paragraph",
-          },
-        ],
-        "type": "doc",
-      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 293.36,
         "y": 0,
       },
+      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -403,20 +389,13 @@ exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
-      "richText": {
-        "content": [
-          {
-            "type": "paragraph",
-          },
-        ],
-        "type": "doc",
-      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 252.64,
         "y": 0,
       },
+      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -405,7 +405,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 									...inCommon,
 									type: 'arrow',
 									props: {
-										richText: toRichText(v1Shape.label ?? ''),
+										text: v1Shape.label ?? '',
 										color: getV2Color(v1Shape.style.color),
 										labelColor: getV2Color(v1Shape.style.color),
 										size: getV2Size(v1Shape.style.size),
@@ -562,7 +562,6 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										y: point.y,
 									},
 									isPrecise: point.x !== 0.5 || point.y !== 0.5,
-									isCreatingShape: true,
 								})
 
 								if (change) {

package/src/test/Editor.test.tsx

@@ -33,7 +33,7 @@ beforeEach(() => {
 	editor = new TestEditor({})
 
 	editor.createShapes([
-		// on its own
+		// on it's own
 		{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
 		// in a frame
 		{ id: ids.frame1, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },

package/src/test/SelectTool.test.ts

@@ -275,27 +275,17 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: {
-					richText: toRichText('Test Label'),
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
+				props: { text: 'Test Label', end: { x: 100, y: 100 } },
 			},
 		])
-		const shape = editor.getShape(ids.arrow1)!
-		// First select the shape so it's already selected
-		editor.select(shape.id)
-
-		// Click at the middle of the arrow where the label would be and drag to move the label
-		editor.pointerDown(150, 100, {
+		const shape = editor.getShape(ids.arrow1)
+		editor.pointerDown(150, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(160, 100)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 
-		// Continue dragging to actually move the label, then it should go to idle
-		editor.pointerMove(170, 100)
 		editor.pointerUp()
 		editor.expectToBeIn('select.idle')
 	})
@@ -307,21 +297,16 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: {
-					richText: toRichText('Test Label'),
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
+				props: { text: 'Test Label', end: { x: 100, y: 100 } },
 			},
 		])
 		const shape = editor.getShape(ids.arrow1)
 
-		// Click at the middle of the arrow where the label would be
-		editor.pointerDown(150, 100, {
+		editor.pointerDown(150, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(160, 100)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
@@ -329,25 +314,14 @@ describe('PointingLabel', () => {
 
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
 		editor.createShapes<TLArrowShape>([
-			{
-				id: ids.arrow1,
-				type: 'arrow',
-				x: 100,
-				y: 100,
-				props: {
-					richText: toRichText(''), // Empty label
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
-			},
+			{ id: ids.arrow1, type: 'arrow', x: 100, y: 100, props: { text: 'Test Label' } },
 		])
-		const shape = editor.getShape(ids.arrow1)!
-		// Click anywhere on the arrow - since there's no label, it should go to translating
-		editor.pointerDown(150, 100, {
+		const shape = editor.getShape(ids.arrow1)
+		editor.pointerDown(0, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(155, 105)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.translating')
 
 		editor.pointerUp()

package/src/test/arrows-megabus.test.tsx

@@ -288,13 +288,11 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 70) // box3 is higher
+		editor.pointerMove(225, 50) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -306,18 +304,14 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
+		editor.pointerMove(150, 90) // box3 is smaller and at the front
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
+		editor.pointerMove(175, 50)
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -87,7 +87,7 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline);"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap;"
           >
             <p
               dir="auto"
@@ -219,7 +219,7 @@ exports[`Returns all shapes when no ids are provided: All shapes 1`] = `
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline);"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap;"
           >
             <p
               dir="auto"

package/src/test/commands/deletePage.test.ts

@@ -1,4 +1,4 @@
-import { PageRecordType, createShapeId } from '@tldraw/editor'
+import { PageRecordType } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -76,87 +76,4 @@ describe('deletePage', () => {
 		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
 		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
 	})
-
-	it('deletes all shapes that belong to the deleted page', () => {
-		// Create a second page
-		const page2Id = PageRecordType.createId('page2')
-		editor.createPage({ name: 'Page 2', id: page2Id })
-
-		// Switch to the second page
-		editor.setCurrentPage(page2Id)
-
-		// Add some shapes to the second page
-		const shape1Id = createShapeId('shape1')
-		const shape2Id = createShapeId('shape2')
-		const shape3Id = createShapeId('shape3')
-
-		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
-		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
-		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
-
-		// Verify shapes were created and belong to the second page
-		expect(editor.getShape(shape1Id)).toBeDefined()
-		expect(editor.getShape(shape2Id)).toBeDefined()
-		expect(editor.getShape(shape3Id)).toBeDefined()
-		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
-
-		// Delete the second page
-		editor.deletePage(page2Id)
-
-		// Verify the page was deleted
-		expect(editor.getPages().length).toBe(1)
-		expect(editor.getPages()[0].id).not.toBe(page2Id)
-
-		// Verify all shapes that belonged to the deleted page were also deleted
-		expect(editor.getShape(shape1Id)).toBeUndefined()
-		expect(editor.getShape(shape2Id)).toBeUndefined()
-		expect(editor.getShape(shape3Id)).toBeUndefined()
-	})
-
-	it('deletes locked shapes that belong to the deleted page', () => {
-		// Create a second page
-		const page2Id = PageRecordType.createId('page2')
-		editor.createPage({ name: 'Page 2', id: page2Id })
-
-		// Switch to the second page
-		editor.setCurrentPage(page2Id)
-
-		// Add some shapes to the second page
-		const shape1Id = createShapeId('shape1')
-		const shape2Id = createShapeId('shape2')
-		const shape3Id = createShapeId('shape3')
-
-		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
-		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
-		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
-
-		// Lock some of the shapes
-		editor.updateShape({ id: shape1Id, type: 'text', isLocked: true })
-		editor.updateShape({ id: shape2Id, type: 'geo', isLocked: true })
-
-		// Verify shapes were created and belong to the second page
-		expect(editor.getShape(shape1Id)).toBeDefined()
-		expect(editor.getShape(shape2Id)).toBeDefined()
-		expect(editor.getShape(shape3Id)).toBeDefined()
-		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape1Id)?.isLocked).toBe(true)
-		expect(editor.getShape(shape2Id)?.isLocked).toBe(true)
-		expect(editor.getShape(shape3Id)?.isLocked).toBe(false)
-
-		// Delete the second page
-		editor.deletePage(page2Id)
-
-		// Verify the page was deleted
-		expect(editor.getPages().length).toBe(1)
-		expect(editor.getPages()[0].id).not.toBe(page2Id)
-
-		// Verify all shapes that belonged to the deleted page were also deleted, including locked ones
-		expect(editor.getShape(shape1Id)).toBeUndefined()
-		expect(editor.getShape(shape2Id)).toBeUndefined()
-		expect(editor.getShape(shape3Id)).toBeUndefined()
-	})
 })

package/src/test/groups.test.tsx

@@ -1941,7 +1941,7 @@ describe('snapping', () => {
 		expect(editor.snaps.getIndicators().length).toBe(0)
 	})
 
-	it('does not happen between children and their group', () => {
+	it('does not happen between children and thier group', () => {
 		editor.select(ids.boxD)
 		editor.pointerDown(65, 5, ids.boxD)
 		editor.pointerMove(80, 105, ids.boxD, { ctrlKey: true })