tldraw 3.15.0-next.f1dfcef63951 → 3.16.0-next.c30b1b5e551a

package/src/test/shapeutils.test.ts

@@ -1,4 +1,4 @@
-import { createShapeId, TLFrameShape, TLGeoShape } from '@tldraw/editor'
+import { createShapeId, TLFrameShape, TLGeoShape, TLLineShape } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -11,6 +11,8 @@ const ids = {
 	frame1: createShapeId('frame1'),
 	box1: createShapeId('box1'),
 	box2: createShapeId('box2'),
+	line1: createShapeId('line1'),
+	page1: createShapeId('page1'),
 }
 
 beforeEach(() => {
@@ -56,34 +58,93 @@ describe('When interacting with a shape...', () => {
 		// Set start / change / end events on only the geo shape
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onRotateStart = fnStart
+		const calls: string[] = []
+
+		util.onRotateStart = () => {
+			calls.push('start')
+		}
 
-		const fnChange = jest.fn()
-		util.onRotate = fnChange
+		util.onRotate = () => {
+			calls.push('change')
+		}
 
-		const fnEnd = jest.fn()
-		util.onRotateEnd = fnEnd
+		util.onRotateEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
 
-		editor
-			.pointerDown(300, 300, {
-				target: 'selection',
-				handle: 'bottom_right_rotate',
-			})
-			.pointerMove(200, 200)
-			.pointerUp(200, 200)
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+		})
 
-		// Once on start (for frame only)
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(200, 200)
 
-		// Once on start, once during the move
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(200, 210)
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'change', 'end'])
+	})
+
+	it('fires rotate cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onRotateStart = () => {
+			calls.push('start')
+		}
+
+		util.onRotate = () => {
+			calls.push('change')
+		}
+
+		util.onRotateEnd = () => {
+			calls.push('end')
+		}
+
+		util.onRotateCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+		})
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(200, 200)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	it('cleans up events', () => {
@@ -105,14 +166,19 @@ describe('When interacting with a shape...', () => {
 	it('Fires resisizing events', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onResizeStart = fnStart
+		const calls: string[] = []
+
+		util.onResizeStart = () => {
+			calls.push('start')
+		}
 
-		const fnChange = jest.fn()
-		util.onResize = fnChange
+		util.onResize = () => {
+			calls.push('change')
+		}
 
-		const fnEnd = jest.fn()
-		util.onResizeEnd = fnEnd
+		util.onResizeEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
@@ -123,48 +189,165 @@ describe('When interacting with a shape...', () => {
 		})
 
 		editor.expectToBeIn('select.pointing_resize_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
 		editor.pointerMove(200, 200)
 		editor.expectToBeIn('select.resizing')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
 		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
 		editor.pointerUp(200, 210)
 		editor.expectToBeIn('select.idle')
 
-		// Once on start (for frame only)
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'end'])
+	})
+
+	it('Fires resizing cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onResizeStart = () => {
+			calls.push('start')
+		}
 
-		// Once on start, once during the resize
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		util.onResize = () => {
+			calls.push('change')
+		}
+
+		util.onResizeEnd = () => {
+			calls.push('end')
+		}
+
+		util.onResizeCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right',
+		})
+
+		editor.expectToBeIn('select.pointing_resize_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(200, 200)
+		editor.expectToBeIn('select.resizing')
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	it('Fires translating events', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onTranslateStart = fnStart
+		const calls: string[] = []
+
+		util.onTranslateStart = () => {
+			calls.push('start')
+		}
 
-		const fnChange = jest.fn()
-		util.onTranslate = fnChange
+		util.onTranslate = () => {
+			calls.push('change')
+		}
 
-		const fnEnd = jest.fn()
-		util.onTranslateEnd = fnEnd
+		util.onTranslateEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
 
 		// Translate the shapes...
-		editor.pointerDown(50, 50, ids.box1).pointerMove(50, 40).pointerUp(50, 40)
+		editor.pointerDown(50, 50, ids.box1)
 
-		// Once on start for frame
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(50, 40)
 
-		// Once on start, once during the move
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		editor.pointerMove(50, 35)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(50, 35)
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'change', 'end'])
+	})
+
+	it('Fires translating cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onTranslateStart = () => {
+			calls.push('start')
+		}
+
+		util.onTranslate = () => {
+			calls.push('change')
+		}
+
+		util.onTranslateEnd = () => {
+			calls.push('end')
+		}
+
+		util.onTranslateCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		// Translate the shapes...
+		editor.pointerDown(50, 50, ids.box1)
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(50, 40)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(50, 35)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	it('Uses the shape utils onClick handler', () => {
@@ -201,4 +384,170 @@ describe('When interacting with a shape...', () => {
 		// it should not be selected.
 		expect(editor.getSelectedShapeIds().length).toBe(0)
 	})
+
+	it('Fires handle dragging events', () => {
+		const util = editor.getShapeUtil<TLLineShape>('line')
+
+		const calls: string[] = []
+
+		util.onHandleDragStart = () => {
+			calls.push('start')
+		}
+
+		util.onHandleDrag = () => {
+			calls.push('change')
+		}
+
+		util.onHandleDragEnd = () => {
+			calls.push('end')
+		}
+
+		util.onHandleDragCancel = () => {
+			calls.push('cancel')
+		}
+
+		// Create a line shape with handles
+		const lineShape: TLLineShape = {
+			id: ids.line1,
+			type: 'line',
+			typeName: 'shape',
+			parentId: ids.page1,
+			index: 'a1' as any,
+			x: 100,
+			y: 100,
+			rotation: 0,
+			isLocked: false,
+			opacity: 1,
+			meta: {},
+			props: {
+				dash: 'draw',
+				size: 'm',
+				color: 'black',
+				spline: 'line',
+				scale: 1,
+				points: {
+					a1: { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2' as any, x: 100, y: 100 },
+				},
+			},
+		}
+
+		editor.createShapes([lineShape])
+
+		// Get the handle point
+		const handlePagePoint = editor
+			.getShapePageTransform(lineShape.id)!
+			.applyToPoint(lineShape.props.points['a2'])
+
+		editor.pointerDown(handlePagePoint.x, handlePagePoint.y, {
+			target: 'handle',
+			shape: editor.getShape(lineShape.id)!,
+			handle: { id: 'a2', type: 'vertex', index: 'a2' as any, x: 100, y: 100 },
+		})
+
+		editor.expectToBeIn('select.pointing_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(handlePagePoint.x + 20, handlePagePoint.y + 20) // Larger move to trigger drag
+		editor.expectToBeIn('select.dragging_handle')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(150, 150)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(150, 150)
+		editor.expectToBeIn('select.idle')
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'end'])
+	})
+
+	it('Fires handle dragging cancel events', () => {
+		const util = editor.getShapeUtil<TLLineShape>('line')
+
+		const calls: string[] = []
+
+		util.onHandleDragStart = () => {
+			calls.push('start')
+		}
+
+		util.onHandleDrag = () => {
+			calls.push('change')
+		}
+
+		util.onHandleDragEnd = () => {
+			calls.push('end')
+		}
+
+		util.onHandleDragCancel = () => {
+			calls.push('cancel')
+		}
+
+		// Create a line shape with handles
+		const lineShape: TLLineShape = {
+			id: ids.line1,
+			type: 'line',
+			typeName: 'shape',
+			parentId: ids.page1,
+			index: 'a1' as any,
+			x: 100,
+			y: 100,
+			rotation: 0,
+			isLocked: false,
+			opacity: 1,
+			meta: {},
+			props: {
+				dash: 'draw',
+				size: 'm',
+				color: 'black',
+				spline: 'line',
+				scale: 1,
+				points: {
+					a1: { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2' as any, x: 100, y: 100 },
+				},
+			},
+		}
+
+		editor.createShapes([lineShape])
+
+		// Get the handle point
+		const handlePagePoint = editor
+			.getShapePageTransform(lineShape.id)!
+			.applyToPoint(lineShape.props.points['a2'])
+
+		editor.pointerDown(handlePagePoint.x, handlePagePoint.y, {
+			target: 'handle',
+			shape: editor.getShape(lineShape.id)!,
+			handle: { id: 'a2', type: 'vertex', index: 'a2' as any, x: 100, y: 100 },
+		})
+
+		editor.expectToBeIn('select.pointing_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(handlePagePoint.x + 20, handlePagePoint.y + 20) // Larger move to trigger drag
+		editor.expectToBeIn('select.dragging_handle')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(150, 150)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
+	})
 })

package/tldraw.css

@@ -171,7 +171,7 @@
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
 	--color-text-1: hsl(0, 0%, 18%);
-	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-3: hsl(204, 4%, 45%);
 	--color-text-shadow: hsl(0, 0%, 100%);
 	--color-text-highlight: hsl(52, 100%, 50%);
 	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -226,7 +226,7 @@
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
 	--color-text-1: hsl(0, 0%, 85%);
-	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-3: hsl(204, 4%, 75%);
 	--color-text-shadow: hsl(210, 13%, 18%);
 	--color-text-highlight: hsl(52, 100%, 41%);
 	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -778,8 +778,7 @@ input,
 	position: static;
 }
 
-.tl-text-wrapper[data-isediting='false'] .tl-text-input,
-.tl-arrow-label[data-isediting='false'] .tl-text-input {
+.tl-text-wrapper[data-isediting='false'] .tl-text-input {
 	opacity: 0;
 	cursor: var(--tl-cursor-default);
 }
@@ -972,14 +971,14 @@ input,
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: fade-in 0.2s ease-in-out forwards;
+	animation: tl-fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
 	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes fade-in {
+@keyframes tl-fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -988,6 +987,19 @@ input,
 	}
 }
 
+.tl-spinner {
+	animation: tl-spin 1s linear infinite;
+}
+
+@keyframes tl-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {
@@ -1179,7 +1191,7 @@ input,
 
 /* --------------------- Arrow shape -------------------- */
 
-.tl-arrow-label {
+.tl-shape[data-shape-type='arrow'] .tl-text-label {
 	position: absolute;
 	top: -1px;
 	left: -1px;
@@ -1194,33 +1206,15 @@ input,
 	text-shadow: var(--tl-text-outline);
 }
 
-.tl-arrow-label[data-isediting='true'] p {
-	opacity: 0;
-}
-
-.tl-arrow-label__inner {
+.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
 	border-radius: var(--radius-1);
 	box-sizing: content-box;
-	position: relative;
 	height: max-content;
 	width: max-content;
-	pointer-events: none;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 }
 
-.tl-arrow-label .tl-arrow {
-	position: relative;
+.tl-shape[data-shape-type='arrow'] .tl-text {
 	height: max-content;
-	padding: inherit;
-	overflow: visible;
-}
-
-.tl-arrow-label textarea {
-	padding: inherit;
-	/* Don't allow textarea to be zero width */
-	min-width: 4px;
 }
 
 .tl-arrow-hint {
@@ -2748,7 +2742,7 @@ it from receiving any pointer events or affecting the cursor. */
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: fade-in;
+	animation: tl-fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -2892,20 +2886,6 @@ it from receiving any pointer events or affecting the cursor. */
 	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 {
@@ -3163,11 +3143,11 @@ it from receiving any pointer events or affecting the cursor. */
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: hide 100ms ease-in;
+		animation: tlui-fade-out 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -3180,7 +3160,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: swipe-out 100ms ease-out;
+		animation: tlui-slide-out 100ms ease-out;
 	}
 }
 
@@ -3195,7 +3175,7 @@ it from receiving any pointer events or affecting the cursor. */
 	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: fadeIn 0.12s ease-out;
+	animation: tl-fade-in 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -3762,7 +3742,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes hide {
+@keyframes tlui-fade-out {
 	0% {
 		opacity: 1;
 	}
@@ -3771,7 +3751,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@keyframes slide-in {
+@keyframes tlui-slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -3780,7 +3760,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@keyframes swipe-out {
+@keyframes tlui-slide-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}