tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

package/src/test/flipShapes.test.ts

@@ -637,3 +637,36 @@ it('Updates the image shape flip properties when flipped', () => {
 	editor.flipShapes(editor.getSelectedShapeIds(), 'vertical')
 	expect(editor.getLastCreatedShape<TLImageShape>().props.flipY).toBe(true)
 })
+
+it('Restores flipped shape positions when shape is rotated', () => {
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})
+
+it('Restores flipped shape positions with draw shapes when shape is rotated', () => {
+	editor
+		.cancel()
+		.setCurrentTool('draw')
+		.pointerDown(0, 0)
+		.pointerMove(-100, -100)
+		.pointerMove(0, -100)
+		.pointerMove(100, 100)
+		.pointerUp()
+
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})

package/src/test/frames.test.ts

@@ -10,6 +10,7 @@ import {
 } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
+import { FrameShapeUtil } from '../lib/shapes/frame/FrameShapeUtil'
 import { DEFAULT_FRAME_PADDING, fitFrameToContent, removeFrame } from '../lib/utils/frames/frames'
 import { TestEditor } from './TestEditor'
 
@@ -639,9 +640,13 @@ describe('frame shapes', () => {
 
 		editor.setCurrentTool('select')
 
+		// Not with enter key
 		editor.keyDown('Enter')
 		editor.keyUp('Enter')
+		expect(editor.getCurrentPageState().editingShapeId).toBe(null)
 
+		// Just with header click (tests against header's geometry)
+		editor.click(105, 95)
 		expect(editor.getCurrentPageState().editingShapeId).toBe(frameId)
 	})
 
@@ -850,6 +855,93 @@ describe('frame shapes', () => {
 		expect(editor.getSortedChildIdsForParent(insideFrameId)).toStrictEqual([rectAId, rectBId])
 		expect(editor.getSortedChildIdsForParent(outsideFrameId)).toStrictEqual([insideFrameId])
 	})
+
+	describe('resizeChildren configuration option', () => {
+		it('has default canResizeChildren behavior as false', () => {
+			const frameUtil = editor.getShapeUtil<TLFrameShape>('frame') as FrameShapeUtil
+			expect(frameUtil.options.resizeChildren).toBe(false)
+			expect(frameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('can be configured to allow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: true })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(true)
+		})
+
+		it('can be configured to disallow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: false })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(false)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('maintains other options when configuring resizeChildren', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({
+				resizeChildren: true,
+				showColors: true,
+			})
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.options.showColors).toBe(true)
+		})
+
+		it('resizes children when configured with resizeChildren: true', () => {
+			// Create a frame with a child shape using a configured frame util
+			editor.setCurrentTool('frame')
+			editor.pointerDown(100, 100).pointerMove(200, 200).pointerUp(200, 200)
+
+			const frameId = editor.getOnlySelectedShape()!.id
+
+			// Add a child shape
+			editor.setCurrentTool('geo')
+			editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175)
+
+			const childId = editor.getOnlySelectedShape()!.id
+
+			// Get initial bounds
+			const initialChildBounds = editor.getShapePageBounds(childId)!
+
+			// Create a new editor with configured frame util that allows resizing children
+			const configuredEditor = new TestEditor({
+				shapeUtils: [FrameShapeUtil.configure({ resizeChildren: true })],
+			})
+
+			// Create the same frame and child in the new editor
+			configuredEditor.createShapes([
+				{ id: frameId, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },
+				{
+					id: childId,
+					type: 'geo',
+					parentId: frameId,
+					x: 125,
+					y: 125,
+					props: { w: 50, h: 50 },
+				},
+			])
+
+			// Resize the frame to half size
+			configuredEditor.select(frameId)
+			configuredEditor.resizeSelection({ scaleX: 0.5, scaleY: 0.5 }, 'bottom_right')
+
+			// Verify the frame was resized
+			const resizedFrameBounds = configuredEditor.getShapePageBounds(frameId)!
+			expect(resizedFrameBounds).toCloselyMatchObject({
+				x: 100,
+				y: 100,
+				w: 50,
+				h: 50,
+			})
+
+			// Verify the child was also resized
+			const resizedChildBounds = configuredEditor.getShapePageBounds(childId)!
+			expect(resizedChildBounds.w).toBeCloseTo(initialChildBounds.w * 0.5)
+			expect(resizedChildBounds.h).toBeCloseTo(initialChildBounds.h * 0.5)
+
+			configuredEditor.dispose()
+		})
+	})
 })
 
 test('arrows bound to a shape within a group within a frame are reparented if the group is moved outside of the frame', () => {
@@ -1363,13 +1455,13 @@ describe('Unparenting behavior', () => {
 
 		// When the shape has a fill, it should not fall out of the frame
 		editor.undo()
-		editor.updateShape<TLGeoShape>({ ...largeRect, props: { fill: 'solid' } })
+		editor.updateShape({ ...largeRect, props: { fill: 'solid' } })
 		dragOntoFrame()
 		expect(editor.getShape(largeRect.id)!.parentId).toBe(frameId)
 
 		// When the shape has a label and that label is on top of the frame, it should not fall out of the frame
 		editor.undo()
-		editor.updateShape<TLGeoShape>({
+		editor.updateShape({
 			...largeRect,
 			props: { fill: 'none', richText: toRichText('hello') },
 		})

package/src/test/getCulledShapes.test.tsx

@@ -3,7 +3,7 @@ import {
 	Box,
 	RecordProps,
 	T,
-	TLBaseShape,
+	TLShape,
 	TLShapeId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -11,11 +11,19 @@ import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
+const UNCULLABLE_TYPE = 'uncullable'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[UNCULLABLE_TYPE]: { w: number; h: number }
+	}
+}
+
 // Custom uncullable shape type for testing canCull override
-type UncullableShape = TLBaseShape<'uncullable', { w: number; h: number }>
+type UncullableShape = TLShape<typeof UNCULLABLE_TYPE>
 
 class UncullableShapeUtil extends BaseBoxShapeUtil<UncullableShape> {
-	static override type = 'uncullable' as const
+	static override type = UNCULLABLE_TYPE
 	static override props: RecordProps<UncullableShape> = {
 		w: T.number,
 		h: T.number,

package/src/test/getShapeAtPoint.test.ts

@@ -1,4 +1,4 @@
-import { TLGeoShape, TLShape, createShapeId, toRichText } from '@tldraw/editor'
+import { TLShape, createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -146,7 +146,7 @@ describe('with hitLabels=true', () => {
 	it('hits geo shape label behind overlapping hollow shape', () => {
 		// label is empty
 		expect(editor.getShapeAtPoint({ x: 350, y: 350 }, opts)?.id).toBe(ids.box3)
-		editor.updateShape<TLGeoShape>({
+		editor.updateShape({
 			id: ids.box2,
 			type: 'geo',
 			props: { richText: toRichText('hello') },

package/src/test/groups.test.tsx

@@ -1,5 +1,6 @@
 import {
 	Box,
+	ExtractShapeByProps,
 	GroupShapeUtil,
 	TLArrowShape,
 	TLGroupShape,
@@ -35,14 +36,16 @@ const ids = {
 	groupA: createShapeId('groupA'),
 }
 
+type BoxShape = ExtractShapeByProps<{ fill: string }>
+
 const box = (
 	id: TLShapeId,
 	x: number,
 	y: number,
 	w = 10,
 	h = 10,
-	fill = 'solid'
-): TLShapePartial => ({
+	fill: BoxShape['props']['fill'] = 'solid'
+): TLShapePartial<BoxShape> => ({
 	type: 'geo',
 	id,
 	x,
@@ -1557,7 +1560,7 @@ describe('erasing', () => {
 		// move to group B
 		editor.pointerMove(65, 5)
 
-		expect(editor.getErasingShapeIds().length).toBe(2)
+		expect(editor.getErasingShapeIds().length).toBe(3)
 	})
 })
 
@@ -1980,7 +1983,7 @@ describe('Group opacity', () => {
 		editor.setOpacityForNextShapes(0.5)
 		editor.groupShapes(editor.getSelectedShapeIds())
 		const group = editor.getShape(onlySelectedId())!
-		assert(editor.isShapeOfType<TLGroupShape>(group, 'group'))
+		assert(editor.isShapeOfType(group, 'group'))
 		expect(group.opacity).toBe(1)
 	})
 })

package/src/test/modifiers.test.ts

@@ -13,25 +13,25 @@ it('Shift Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { shiftKey: true })
 	editor.pointerMove(100, 100, { shiftKey: false })
-	expect(editor.inputs.shiftKey).toBe(true)
+	expect(editor.inputs.getShiftKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.shiftKey).toBe(false)
+	expect(editor.inputs.getShiftKey()).toBe(false)
 })
 
 it('Alt Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { altKey: true })
 	editor.pointerMove(100, 100, { altKey: false })
-	expect(editor.inputs.altKey).toBe(true)
+	expect(editor.inputs.getAltKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.altKey).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
 })
 
 it('Ctrl Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { ctrlKey: true })
 	editor.pointerMove(100, 100, { ctrlKey: false })
-	expect(editor.inputs.ctrlKey).toBe(true)
+	expect(editor.inputs.getCtrlKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.ctrlKey).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
 })