@tldraw/tlschema 4.2.2 → 4.2.3

package/src/shapes/TLGeoShape.test.ts

@@ -0,0 +1,247 @@
+import { describe, expect, it } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import { toRichText } from '../misc/TLRichText'
+import { GeoShapeGeoStyle, geoShapeProps, geoShapeVersions } from './TLGeoShape'
+
+describe('TLGeoShape', () => {
+	describe('GeoShapeGeoStyle', () => {
+		it('should validate all geometric shape types', () => {
+			const validGeoTypes = [
+				'cloud',
+				'rectangle',
+				'ellipse',
+				'triangle',
+				'diamond',
+				'pentagon',
+				'hexagon',
+				'octagon',
+				'star',
+				'rhombus',
+				'rhombus-2',
+				'oval',
+				'trapezoid',
+				'arrow-right',
+				'arrow-left',
+				'arrow-up',
+				'arrow-down',
+				'x-box',
+				'check-box',
+				'heart',
+			]
+
+			validGeoTypes.forEach((geoType) => {
+				expect(() => GeoShapeGeoStyle.validate(geoType)).not.toThrow()
+			})
+		})
+
+		it('should reject invalid geometric shape types', () => {
+			const invalidGeoTypes = ['square', 'circle', 'invalid-shape', null, undefined]
+
+			invalidGeoTypes.forEach((geoType) => {
+				expect(() => GeoShapeGeoStyle.validate(geoType)).toThrow()
+			})
+		})
+	})
+
+	describe('geoShapeProps validation schema', () => {
+		it('should validate numeric constraints', () => {
+			// Test nonZeroNumber validation for w, h, scale
+			expect(() => geoShapeProps.w.validate(100)).not.toThrow()
+			expect(() => geoShapeProps.h.validate(50)).not.toThrow()
+			expect(() => geoShapeProps.scale.validate(1.5)).not.toThrow()
+
+			expect(() => geoShapeProps.w.validate(0)).toThrow()
+			expect(() => geoShapeProps.h.validate(0)).toThrow()
+			expect(() => geoShapeProps.scale.validate(0)).toThrow()
+
+			// Test positiveNumber validation for growY
+			expect(() => geoShapeProps.growY.validate(0)).not.toThrow()
+			expect(() => geoShapeProps.growY.validate(10)).not.toThrow()
+			expect(() => geoShapeProps.growY.validate(-1)).toThrow()
+		})
+
+		it('should validate rich text property', () => {
+			expect(() => geoShapeProps.richText.validate(toRichText('test'))).not.toThrow()
+			expect(() => geoShapeProps.richText.validate('plain string')).toThrow()
+		})
+	})
+
+	describe('geoShapeMigrations - AddUrlProp migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.AddUrlProp)
+
+		it('should add url property with empty string default', () => {
+			const oldRecord = {
+				props: {
+					geo: 'rectangle',
+					w: 100,
+					h: 80,
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.url).toBe('')
+		})
+	})
+
+	describe('geoShapeMigrations - AddLabelColor migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.AddLabelColor)
+
+		it('should add labelColor property with default value "black"', () => {
+			const oldRecord = {
+				props: {
+					geo: 'triangle',
+					color: 'blue',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.labelColor).toBe('black')
+		})
+	})
+
+	describe('geoShapeMigrations - RemoveJustify migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.RemoveJustify)
+
+		it('should convert justify alignment to start', () => {
+			const oldRecord = {
+				props: {
+					align: 'justify',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.align).toBe('start')
+		})
+
+		it('should preserve non-justify alignments', () => {
+			const oldRecord = {
+				props: {
+					align: 'middle',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.align).toBe('middle')
+		})
+	})
+
+	describe('geoShapeMigrations - AddVerticalAlign migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.AddVerticalAlign)
+
+		it('should add verticalAlign property with default value "middle"', () => {
+			const oldRecord = {
+				props: {
+					geo: 'rectangle',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.verticalAlign).toBe('middle')
+		})
+	})
+
+	describe('geoShapeMigrations - MigrateLegacyAlign migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.MigrateLegacyAlign)
+
+		it('should convert alignment values to legacy versions', () => {
+			const testCases = [
+				{ input: 'start', expected: 'start-legacy' },
+				{ input: 'end', expected: 'end-legacy' },
+				{ input: 'middle', expected: 'middle-legacy' },
+				{ input: 'unknown-align', expected: 'middle-legacy' },
+			]
+
+			testCases.forEach(({ input, expected }) => {
+				const oldRecord = {
+					props: {
+						align: input,
+					},
+				}
+
+				const result = up(oldRecord)
+				expect(result.props.align).toBe(expected)
+			})
+		})
+	})
+
+	describe('geoShapeMigrations - MakeUrlsValid migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.MakeUrlsValid)
+
+		it('should clear invalid URLs', () => {
+			const oldRecord = {
+				props: {
+					url: 'invalid-url',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.url).toBe('')
+		})
+
+		it('should preserve valid URLs', () => {
+			const oldRecord = {
+				props: {
+					url: 'https://example.com',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.url).toBe('https://example.com')
+		})
+	})
+
+	describe('geoShapeMigrations - AddScale migration', () => {
+		const { up, down } = getTestMigration(geoShapeVersions.AddScale)
+
+		it('should add scale property with default value 1', () => {
+			const oldRecord = {
+				props: {
+					geo: 'rectangle',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.scale).toBe(1)
+		})
+
+		it('should remove scale property on down migration', () => {
+			const newRecord = {
+				props: {
+					geo: 'rectangle',
+					scale: 1.5,
+				},
+			}
+
+			const result = down(newRecord)
+			expect(result.props.scale).toBeUndefined()
+		})
+	})
+
+	describe('geoShapeMigrations - AddRichText migration', () => {
+		const { up } = getTestMigration(geoShapeVersions.AddRichText)
+
+		it('should convert text property to richText', () => {
+			const oldRecord = {
+				props: {
+					text: 'Simple text content',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.richText).toBeDefined()
+			expect(result.props.text).toBeUndefined()
+		})
+
+		it('should handle empty text', () => {
+			const oldRecord = {
+				props: {
+					text: '',
+				},
+			}
+
+			const result = up(oldRecord)
+			expect(result.props.richText).toBeDefined()
+			expect(result.props.text).toBeUndefined()
+		})
+	})
+})

package/src/shapes/TLGeoShape.ts

@@ -193,7 +193,6 @@ const geoShapeVersions = createShapePropsMigrationIds('geo', {
 	MakeUrlsValid: 8,
 	AddScale: 9,
 	AddRichText: 10,
-	AddRichTextAttrs: 11,
 })
 
 /**
@@ -206,7 +205,7 @@ export { geoShapeVersions as geoShapeVersions }
 /**
  * Migration sequence for geo shape properties across different schema versions.
  * Handles evolution of geo shapes including URL support, label colors, alignment changes,
- * the transition from plain text to rich text, and support for attrs property on richText.
+ * and the transition from plain text to rich text.
  *
  * @public
  */
@@ -306,17 +305,5 @@ export const geoShapeMigrations = createShapePropsMigrationSequence({
 			// 	delete props.richText
 			// },
 		},
-		{
-			id: geoShapeVersions.AddRichTextAttrs,
-			up: (_props) => {
-				// noop - attrs is optional so old records are valid
-			},
-			down: (props) => {
-				// Remove attrs from richText when migrating down
-				if (props.richText && 'attrs' in props.richText) {
-					delete props.richText.attrs
-				}
-			},
-		},
 	],
 })

package/src/shapes/TLGroupShape.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import { createShapeValidator } from './TLBaseShape'
+import { groupShapeMigrations, groupShapeProps } from './TLGroupShape'
+
+describe('TLGroupShape', () => {
+	describe('groupShapeProps', () => {
+		it('should be an empty object', () => {
+			expect(groupShapeProps).toEqual({})
+		})
+	})
+
+	describe('groupShapeMigrations', () => {
+		it('should have empty migration sequence', () => {
+			expect(groupShapeMigrations.sequence).toEqual([])
+		})
+	})
+
+	describe('group shape validation', () => {
+		const groupValidator = createShapeValidator('group', groupShapeProps)
+
+		it('should validate valid group shapes', () => {
+			const validGroup = {
+				id: 'shape:test',
+				typeName: 'shape',
+				type: 'group',
+				x: 0,
+				y: 0,
+				rotation: 0,
+				index: 'a1',
+				parentId: 'page:main',
+				isLocked: false,
+				opacity: 1,
+				props: {},
+				meta: {},
+			}
+
+			expect(() => groupValidator.validate(validGroup)).not.toThrow()
+		})
+
+		it('should reject shapes with non-empty props', () => {
+			const invalidGroup = {
+				id: 'shape:invalid',
+				typeName: 'shape',
+				type: 'group',
+				x: 0,
+				y: 0,
+				rotation: 0,
+				index: 'a1',
+				parentId: 'page:main',
+				isLocked: false,
+				opacity: 1,
+				props: { invalid: 'prop' },
+				meta: {},
+			}
+
+			expect(() => groupValidator.validate(invalidGroup)).toThrow()
+		})
+	})
+})

package/src/shapes/TLHighlightShape.test.ts

@@ -0,0 +1,325 @@
+import { T } from '@tldraw/validate'
+import { describe, expect, it, test } from 'vitest'
+import { getTestMigration } from '../__tests__/migrationTestUtils'
+import {
+	highlightShapeMigrations,
+	highlightShapeProps,
+	highlightShapeVersions,
+} from './TLHighlightShape'
+
+describe('TLHighlightShape', () => {
+	describe('highlightShapeProps validation schema', () => {
+		it('should validate valid highlight shape properties', () => {
+			const validProps = {
+				color: 'yellow' as const,
+				size: 'l' as const,
+				segments: [
+					{
+						type: 'free' as const,
+						points: [{ x: 0, y: 0, z: 0.5 }],
+					},
+				],
+				isComplete: true,
+				isPen: false,
+				scale: 1,
+			}
+
+			const fullValidator = T.object(highlightShapeProps)
+			expect(() => fullValidator.validate(validProps)).not.toThrow()
+		})
+
+		it('should reject invalid color values', () => {
+			const invalidColors = ['purple', 'YELLOW', 'neon', '', null, undefined, 123, {}, []]
+
+			invalidColors.forEach((color) => {
+				expect(() => highlightShapeProps.color.validate(color)).toThrow()
+			})
+		})
+
+		it('should reject invalid size values', () => {
+			const invalidSizes = ['medium', 'SM', 'large', 'xxl', '', null, undefined, 123]
+
+			invalidSizes.forEach((size) => {
+				expect(() => highlightShapeProps.size.validate(size)).toThrow()
+			})
+		})
+
+		it('should validate segments array', () => {
+			const validSegmentArrays = [
+				[], // Empty array
+				[
+					{
+						type: 'free' as const,
+						points: [{ x: 0, y: 0, z: 0.5 }],
+					},
+				],
+			]
+
+			validSegmentArrays.forEach((segments) => {
+				expect(() => highlightShapeProps.segments.validate(segments)).not.toThrow()
+			})
+
+			const invalidSegmentArrays = [
+				'not-array',
+				null,
+				undefined,
+				[{ type: 'invalid', points: [] }], // Invalid segment type
+			]
+
+			invalidSegmentArrays.forEach((segments) => {
+				expect(() => highlightShapeProps.segments.validate(segments)).toThrow()
+			})
+		})
+
+		it('should validate boolean properties', () => {
+			// Valid boolean values
+			expect(() => highlightShapeProps.isComplete.validate(true)).not.toThrow()
+			expect(() => highlightShapeProps.isComplete.validate(false)).not.toThrow()
+			expect(() => highlightShapeProps.isPen.validate(true)).not.toThrow()
+			expect(() => highlightShapeProps.isPen.validate(false)).not.toThrow()
+
+			// Invalid boolean values
+			const invalidBooleans = ['true', 'false', 1, 0, null, undefined, {}, []]
+			invalidBooleans.forEach((value) => {
+				expect(() => highlightShapeProps.isComplete.validate(value)).toThrow()
+				expect(() => highlightShapeProps.isPen.validate(value)).toThrow()
+			})
+		})
+
+		it('should validate scale as nonZeroNumber', () => {
+			// Valid non-zero positive numbers
+			expect(() => highlightShapeProps.scale.validate(0.1)).not.toThrow()
+			expect(() => highlightShapeProps.scale.validate(1)).not.toThrow()
+			expect(() => highlightShapeProps.scale.validate(2)).not.toThrow()
+
+			// Invalid scales (zero, negative, and non-numbers)
+			expect(() => highlightShapeProps.scale.validate(0)).toThrow()
+			expect(() => highlightShapeProps.scale.validate(-1)).toThrow()
+			expect(() => highlightShapeProps.scale.validate('not-number')).toThrow()
+			expect(() => highlightShapeProps.scale.validate(null)).toThrow()
+		})
+
+		it('should reject objects with missing properties', () => {
+			const fullValidator = T.object(highlightShapeProps)
+
+			expect(() => fullValidator.validate({})).toThrow()
+			expect(() => fullValidator.validate({ color: 'yellow' })).toThrow()
+		})
+
+		it('should reject objects with extra properties', () => {
+			const fullValidator = T.object(highlightShapeProps)
+
+			const objectWithExtraProps = {
+				color: 'yellow',
+				size: 'm',
+				segments: [],
+				isComplete: true,
+				isPen: false,
+				scale: 1,
+				extraProp: 'extra',
+			}
+
+			expect(() => fullValidator.validate(objectWithExtraProps)).toThrow()
+		})
+	})
+
+	describe('highlightShapeVersions', () => {
+		it('should contain expected migration version IDs', () => {
+			expect(highlightShapeVersions).toBeDefined()
+			expect(typeof highlightShapeVersions).toBe('object')
+		})
+
+		it('should have all expected migration versions', () => {
+			const expectedVersions: Array<keyof typeof highlightShapeVersions> = ['AddScale']
+
+			expectedVersions.forEach((version) => {
+				expect(highlightShapeVersions[version]).toBeDefined()
+				expect(typeof highlightShapeVersions[version]).toBe('string')
+			})
+		})
+
+		it('should have properly formatted migration IDs', () => {
+			Object.values(highlightShapeVersions).forEach((versionId) => {
+				expect(versionId).toMatch(/^com\.tldraw\.shape\.highlight\//)
+				expect(versionId).toMatch(/\/\d+$/) // Should end with /number
+			})
+		})
+	})
+
+	describe('highlightShapeMigrations', () => {
+		it('should be defined and have required structure', () => {
+			expect(highlightShapeMigrations).toBeDefined()
+			expect(highlightShapeMigrations.sequence).toBeDefined()
+			expect(Array.isArray(highlightShapeMigrations.sequence)).toBe(true)
+		})
+
+		it('should have migrations for all version IDs', () => {
+			const migrationIds = highlightShapeMigrations.sequence
+				.filter((migration) => 'id' in migration)
+				.map((migration) => ('id' in migration ? migration.id : null))
+				.filter(Boolean)
+
+			const versionIds = Object.values(highlightShapeVersions)
+
+			versionIds.forEach((versionId) => {
+				expect(migrationIds).toContain(versionId)
+			})
+		})
+	})
+
+	describe('highlightShapeMigrations - AddScale migration', () => {
+		const { up, down } = getTestMigration(highlightShapeVersions.AddScale)
+
+		describe('AddScale up migration', () => {
+			it('should add scale property with default value 1', () => {
+				const oldRecord = {
+					id: 'shape:highlight1',
+					props: {
+						color: 'yellow',
+						size: 'm',
+						segments: [
+							{
+								type: 'free',
+								points: [{ x: 0, y: 0, z: 0.5 }],
+							},
+						],
+						isComplete: true,
+						isPen: false,
+					},
+				}
+
+				const result = up(oldRecord)
+				expect(result.props.scale).toBe(1)
+			})
+
+			it('should preserve existing properties during migration', () => {
+				const oldRecord = {
+					id: 'shape:highlight1',
+					props: {
+						color: 'green',
+						size: 'l',
+						segments: [
+							{
+								type: 'straight',
+								points: [
+									{ x: 10, y: 20 },
+									{ x: 100, y: 150 },
+								],
+							},
+						],
+						isComplete: true,
+						isPen: true,
+					},
+				}
+
+				const result = up(oldRecord)
+				expect(result.props.scale).toBe(1)
+				expect(result.props.color).toBe('green')
+				expect(result.props.size).toBe('l')
+				expect(result.props.segments).toEqual(oldRecord.props.segments)
+				expect(result.props.isComplete).toBe(true)
+				expect(result.props.isPen).toBe(true)
+			})
+		})
+
+		describe('AddScale down migration', () => {
+			it('should remove scale property', () => {
+				const newRecord = {
+					id: 'shape:highlight1',
+					props: {
+						color: 'yellow',
+						size: 'm',
+						segments: [
+							{
+								type: 'free',
+								points: [{ x: 0, y: 0, z: 0.5 }],
+							},
+						],
+						isComplete: true,
+						isPen: false,
+						scale: 1.5,
+					},
+				}
+
+				const result = down(newRecord)
+				expect(result.props.scale).toBeUndefined()
+				expect(result.props.color).toBe('yellow') // Preserve other props
+				expect(result.props.isPen).toBe(false) // Preserve other props
+			})
+
+			it('should preserve all other properties during down migration', () => {
+				const newRecord = {
+					id: 'shape:highlight1',
+					props: {
+						color: 'red',
+						size: 'xl',
+						segments: [
+							{
+								type: 'straight',
+								points: [
+									{ x: 0, y: 0 },
+									{ x: 200, y: 0 },
+								],
+							},
+						],
+						isComplete: true,
+						isPen: false,
+						scale: 2.0,
+					},
+				}
+
+				const result = down(newRecord)
+				expect(result.props.scale).toBeUndefined()
+				expect(result.props.color).toBe('red')
+				expect(result.props.size).toBe('xl')
+				expect(result.props.segments).toEqual(newRecord.props.segments)
+				expect(result.props.isComplete).toBe(true)
+				expect(result.props.isPen).toBe(false)
+			})
+		})
+
+		it('should support round-trip migration (up then down)', () => {
+			const originalRecord = {
+				id: 'shape:highlight1',
+				props: {
+					color: 'green',
+					size: 'l',
+					segments: [
+						{
+							type: 'free',
+							points: [{ x: 0, y: 0, z: 0.5 }],
+						},
+					],
+					isComplete: true,
+					isPen: true,
+				},
+			}
+
+			// Apply up migration
+			const upResult = up(originalRecord)
+			expect(upResult.props.scale).toBe(1)
+
+			// Apply down migration
+			const downResult = down(upResult)
+			expect(downResult.props.scale).toBeUndefined()
+			expect(downResult.props.color).toBe('green')
+			expect(downResult.props.size).toBe('l')
+			expect(downResult.props.isComplete).toBe(true)
+			expect(downResult.props.isPen).toBe(true)
+		})
+	})
+
+	test('should handle all migration versions in correct order', () => {
+		const expectedOrder: Array<keyof typeof highlightShapeVersions> = ['AddScale']
+
+		const migrationIds = highlightShapeMigrations.sequence
+			.filter((migration) => 'id' in migration)
+			.map((migration) => ('id' in migration ? migration.id : ''))
+			.filter(Boolean)
+
+		expectedOrder.forEach((expectedVersion) => {
+			const versionId = highlightShapeVersions[expectedVersion]
+			expect(migrationIds).toContain(versionId)
+		})
+	})
+})