PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[refactor] update record names (#1473)

Browse source 
This PR renames our record types to avoid a type collision with the type
that they are based on. For example `TLCamera` is both a type and a
record; after this PR, we use `CameraRecordType` for the camera's record
type.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [editor] rename record types
This commit is contained in:
Steve Ruiz 2023-05-26 14:37:59 +01:00 committed by GitHub
parent f8b6ee6ab9
commit 3450de5282
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 237 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/examples/src/11-user-presence/UserPresenceExample.tsx
View file

@ -1,4 +1,4 @@
import { Tldraw, TLInstance, TLInstancePresence } from '@tldraw/tldraw'
import { InstancePresenceRecordType, InstanceRecordType, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'
import { useRef } from 'react'
@ -18,11 +18,11 @@ export default function UserPresenceExample() {
// For every connected peer you should put a TLInstancePresence record in the
// store with their cursor position etc.
const peerPresence = TLInstancePresence.create({
id: TLInstancePresence.createCustomId('peer-1-presence'),
const peerPresence = InstancePresenceRecordType.create({
id: InstancePresenceRecordType.createCustomId('peer-1-presence'),
currentPageId: app.currentPageId,
userId: 'peer-1',
instanceId: TLInstance.createCustomId('peer-1-editor-instance'),
instanceId: InstanceRecordType.createCustomId('peer-1-editor-instance'),
userName: 'Peer 1',
cursor: { x: 0, y: 0, type: 'default', rotation: 0 },
})

4
apps/examples/src/5-exploded/ExplodedExample.tsx
View file

@ -1,16 +1,16 @@
import {
Canvas,
ContextMenu,
InstanceRecordType,
TldrawEditor,
TldrawEditorConfig,
TldrawUi,
TLInstance,
useLocalSyncClient,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'
const instanceId = TLInstance.createCustomId('example')
const instanceId = InstanceRecordType.createCustomId('example')
// for custom config, see 3-custom-config
const config = new TldrawEditorConfig()

4
packages/editor/src/lib/TldrawEditor.tsx
View file

@ -1,4 +1,4 @@
import { TLAsset, TLInstance, TLInstanceId, TLStore } from '@tldraw/tlschema'
import { InstanceRecordType, TLAsset, TLInstanceId, TLStore } from '@tldraw/tlschema'
import { Store } from '@tldraw/tlstore'
import { annotateError } from '@tldraw/utils'
import React, { useCallback, useMemo, useSyncExternalStore } from 'react'
@ -139,7 +139,7 @@ function TldrawEditorBeforeLoading({ config, instanceId, store, ...props }: Tldr
return (
store ??
config.createStore({
instanceId: instanceId ?? TLInstance.createId(),
instanceId: instanceId ?? InstanceRecordType.createId(),
})
)
}, [store, config, instanceId])

46
packages/editor/src/lib/app/App.ts
View file

@ -23,11 +23,13 @@ import {
} from '@tldraw/primitives'
import {
Box2dModel,
CameraRecordType,
InstancePageStateRecordType,
PageRecordType,
TLArrowShape,
TLAsset,
TLAssetId,
TLAssetPartial,
TLCamera,
TLColorStyle,
TLColorType,
TLCursor,
@ -649,7 +651,7 @@ export class App extends EventEmitter<TLEventMap> {
*/
@computed private get _pageTransformCache(): ComputedCache<Matrix2d, TLShape> {
return this.store.createComputedCache<Matrix2d, TLShape>('pageTransformCache', (shape) => {
if (TLPage.isId(shape.parentId)) {
if (PageRecordType.isId(shape.parentId)) {
return this.getTransform(shape)
}
// some weird circular type thing here that I had to work wround with (as any)
@ -685,7 +687,7 @@ export class App extends EventEmitter<TLEventMap> {
*/
@computed private get _pageMaskCache(): ComputedCache<VecLike[], TLShape> {
return this.store.createComputedCache<VecLike[], TLShape>('pageMaskCache', (shape) => {
if (TLPage.isId(shape.parentId)) {
if (PageRecordType.isId(shape.parentId)) {
return undefined
}
@ -1413,7 +1415,7 @@ export class App extends EventEmitter<TLEventMap> {
}
// if this shape moved to a new page, clean up any previous page's instance state
if (prev.parentId !== next.parentId && TLPage.isId(next.parentId)) {
if (prev.parentId !== next.parentId && PageRecordType.isId(next.parentId)) {
const allMovingIds = new Set([prev.id])
this.visitDescendants(prev.id, (id) => {
allMovingIds.add(id)
@ -1790,7 +1792,7 @@ export class App extends EventEmitter<TLEventMap> {
* @public
*/
getParentTransform(shape: TLShape) {
if (TLPage.isId(shape.parentId)) {
if (PageRecordType.isId(shape.parentId)) {
return Matrix2d.Identity()
}
return this._pageTransformCache.get(shape.parentId) ?? Matrix2d.Identity()
@ -2068,7 +2070,7 @@ export class App extends EventEmitter<TLEventMap> {
*/
getAncestors(shape: TLShape, acc: TLShape[] = []): TLShape[] {
const parentId = shape.parentId
if (TLPage.isId(parentId)) {
if (PageRecordType.isId(parentId)) {
acc.reverse()
return acc
}
@ -2110,7 +2112,7 @@ export class App extends EventEmitter<TLEventMap> {
findAncestor(shape: TLShape, predicate: (parent: TLShape) => boolean): TLShape | undefined {
const parentId = shape.parentId
if (TLPage.isId(parentId)) {
if (PageRecordType.isId(parentId)) {
return undefined
}
@ -2148,7 +2150,7 @@ export class App extends EventEmitter<TLEventMap> {
}
if (shapes.length === 1) {
const parentId = shapes[0].parentId
if (TLPage.isId(parentId)) {
if (PageRecordType.isId(parentId)) {
return
}
return predicate ? this.findAncestor(shapes[0], predicate)?.id : parentId
@ -2398,7 +2400,7 @@ export class App extends EventEmitter<TLEventMap> {
if (!shape) {
return new Vec2d(0, 0)
}
if (TLPage.isId(shape.parentId)) return Vec2d.From(point)
if (PageRecordType.isId(shape.parentId)) return Vec2d.From(point)
const parentTransform = this.getPageTransformById(shape.parentId)
if (!parentTransform) return Vec2d.From(point)
@ -2439,7 +2441,7 @@ export class App extends EventEmitter<TLEventMap> {
* @public
*/
getDeltaInParentSpace(shape: TLShape, delta: VecLike): Vec2d {
if (TLPage.isId(shape.parentId)) return Vec2d.From(delta)
if (PageRecordType.isId(shape.parentId)) return Vec2d.From(delta)
const parent = this.getShapeById(shape.parentId)
if (!parent) return Vec2d.From(delta)
@ -3155,7 +3157,7 @@ export class App extends EventEmitter<TLEventMap> {
/** Get the id of the containing page for a given shape. */
getParentPageId(shape?: TLShape): TLPageId | undefined {
if (shape === undefined) return undefined
if (TLPage.isId(shape.parentId)) {
if (PageRecordType.isId(shape.parentId)) {
return shape.parentId
} else {
return this.getParentPageId(this.getShapeById(shape.parentId))
@ -4218,7 +4220,7 @@ export class App extends EventEmitter<TLEventMap> {
let isDuplicating = false
if (!TLPage.isId(pasteParentId)) {
if (!PageRecordType.isId(pasteParentId)) {
const parent = this.getShapeById(pasteParentId)
if (parent) {
if (!this.viewportPageBounds.includes(this.getPageBounds(parent)!)) {
@ -4414,7 +4416,7 @@ export class App extends EventEmitter<TLEventMap> {
const bounds = Box2d.Common(newCreatedShapes.map((s) => this.getPageBounds(s)!))
if (point === undefined) {
if (!TLPage.isId(pasteParentId)) {
if (!PageRecordType.isId(pasteParentId)) {
// Put the shapes in the middle of the (on screen) parent
const shape = this.getShapeById(pasteParentId)!
const util = this.getShapeUtil(shape)
@ -5077,7 +5079,7 @@ export class App extends EventEmitter<TLEventMap> {
* @param title - The new page's title.
* @public
*/
createPage(title: string, id: TLPageId = TLPage.createId(), belowPageIndex?: string) {
createPage(title: string, id: TLPageId = PageRecordType.createId(), belowPageIndex?: string) {
this._createPage(title, id, belowPageIndex)
return this
}
@ -5085,7 +5087,7 @@ export class App extends EventEmitter<TLEventMap> {
/** @internal */
private _createPage = this.history.createCommand(
'createPage',
(title: string, id: TLPageId = TLPage.createId(), belowPageIndex?: string) => {
(title: string, id: TLPageId = PageRecordType.createId(), belowPageIndex?: string) => {
if (this.isReadOnly) return null
if (this.pages.length >= MAX_PAGES) return null
const pageInfo = this.pages
@ -5100,7 +5102,7 @@ export class App extends EventEmitter<TLEventMap> {
pageInfo.map((p) => p.name)
)
const newPage = TLPage.create({
const newPage = PageRecordType.create({
id,
name: title,
index:
@ -5109,9 +5111,9 @@ export class App extends EventEmitter<TLEventMap> {
: getIndexAbove(topIndex),
})
const newCamera = TLCamera.create({})
const newCamera = CameraRecordType.create({})
const newTabPageState = TLInstancePageState.create({
const newTabPageState = InstancePageStateRecordType.create({
pageId: newPage.id,
instanceId: this.instanceId,
cameraId: newCamera.id,
@ -5146,7 +5148,7 @@ export class App extends EventEmitter<TLEventMap> {
}
)
duplicatePage(id: TLPageId = this.currentPageId, createId: TLPageId = TLPage.createId()) {
duplicatePage(id: TLPageId = this.currentPageId, createId: TLPageId = PageRecordType.createId()) {
if (this.pages.length >= MAX_PAGES) return
const page = this.getPageById(id)
if (!page) return
@ -6972,7 +6974,7 @@ export class App extends EventEmitter<TLEventMap> {
reparentShapesById(ids: TLShapeId[], parentId: TLParentId, insertIndex?: string) {
const changes: TLShapePartial[] = []
const parentTransform = TLPage.isId(parentId)
const parentTransform = PageRecordType.isId(parentId)
? Matrix2d.Identity()
: this.getPageTransformById(parentId)!
@ -7184,10 +7186,10 @@ export class App extends EventEmitter<TLEventMap> {
{
do: ({ toId }) => {
if (!this.getPageStateByPageId(toId)) {
const camera = TLCamera.create({})
const camera = CameraRecordType.create({})
this.store.put([
camera,
TLInstancePageState.create({
InstancePageStateRecordType.create({
pageId: toId,
instanceId: this.instanceId,
cameraId: camera.id,

4
packages/editor/src/lib/app/derivations/shapeIdsInCurrentPage.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TLPage } from '@tldraw/tlschema'
import { PageRecordType, createCustomShapeId } from '@tldraw/tlschema'
import { TestApp } from '../../test/TestApp'
let app: TestApp
@ -51,7 +51,7 @@ describe('shapeIdsInCurrentPage', () => {
{ type: 'geo', id: ids.box2 },
{ type: 'geo', id: ids.box3 },
])
const id = TLPage.createCustomId('page2')
const id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', id)
app.setCurrentPageId(id)
app.createShapes([

12
packages/editor/src/lib/app/derivations/shapeIdsInCurrentPage.ts
View file

@ -1,4 +1,12 @@
import { isShape, isShapeId, TLPage, TLPageId, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema'
import {
isShape,
isShapeId,
PageRecordType,
TLPageId,
TLShape,
TLShapeId,
TLStore,
} from '@tldraw/tlschema'
import { IncrementalSetConstructor } from '@tldraw/tlstore'
import { computed, isUninitialized, RESET_VALUE, withDiff } from 'signia'
@ -10,7 +18,7 @@ import { computed, isUninitialized, RESET_VALUE, withDiff } from 'signia'
* @param shape - The the shape to check.
*/
const isShapeInPage = (store: TLStore, pageId: TLPageId, shape: TLShape): boolean => {
while (!TLPage.isId(shape.parentId)) {
while (!PageRecordType.isId(shape.parentId)) {
const parent = store.get(shape.parentId)
if (!parent) return false
shape = parent

4
packages/editor/src/lib/app/shapeutils/TLBookmarkUtil/TLBookmarkUtil.tsx
View file

@ -1,5 +1,5 @@
import { toDomPrecision } from '@tldraw/primitives'
import { TLAsset, TLAssetId, TLBookmarkAsset, TLBookmarkShape } from '@tldraw/tlschema'
import { AssetRecordType, TLAssetId, TLBookmarkAsset, TLBookmarkShape } from '@tldraw/tlschema'
import { debounce, getHashForString } from '@tldraw/utils'
import { HTMLContainer } from '../../../components/HTMLContainer'
import {
@ -126,7 +126,7 @@ export class TLBookmarkUtil extends TLBoxUtil<TLBookmarkShape> {
protected updateBookmarkAsset = debounce((shape: TLBookmarkShape) => {
const { url } = shape.props
const assetId: TLAssetId = TLAsset.createCustomId(getHashForString(url))
const assetId: TLAssetId = AssetRecordType.createCustomId(getHashForString(url))
const existing = this.app.getAssetById(assetId)
if (existing) {

6
packages/editor/src/lib/app/statechart/TLSelectTool/children/Translating.ts
View file

@ -1,5 +1,5 @@
import { Box2d, Matrix2d, Matrix2dModel, Vec2d } from '@tldraw/primitives'
import { TLPage, TLShape, TLShapePartial } from '@tldraw/tlschema'
import { PageRecordType, TLShape, TLShapePartial } from '@tldraw/tlschema'
import { compact } from '@tldraw/utils'
import type { App } from '../../../App'
import { DragAndDropManager } from '../../../managers/DragAndDropManager'
@ -257,7 +257,7 @@ export class Translating extends StateNode {
if (!shape) return null
movingShapes.push(shape)
const parentTransform = TLPage.isId(shape.parentId)
const parentTransform = PageRecordType.isId(shape.parentId)
? null
: Matrix2d.Inverse(app.getPageTransformById(shape.parentId)!)
@ -280,7 +280,7 @@ function getTranslatingSnapshot(app: App) {
if (!pagePoint) return null
pagePoints.push(pagePoint)
const parentTransform = TLPage.isId(shape.parentId)
const parentTransform = PageRecordType.isId(shape.parentId)
? null
: Matrix2d.Inverse(app.getPageTransformById(shape.parentId)!)

4
packages/editor/src/lib/config/TldrawEditorConfig.tsx
View file

@ -1,8 +1,8 @@
import {
CLIENT_FIXUP_SCRIPT,
InstanceRecordType,
TLDOCUMENT_ID,
TLDefaultShape,
TLInstance,
TLInstanceId,
TLInstancePresence,
TLRecord,
@ -121,7 +121,7 @@ export class TldrawEditorConfig {
schema: this.storeSchema,
initialData,
props: {
instanceId: config?.instanceId ?? TLInstance.createId(),
instanceId: config?.instanceId ?? InstanceRecordType.createId(),
documentId: TLDOCUMENT_ID,
},
})

4
packages/editor/src/lib/test/App.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TLPage } from '@tldraw/tlschema'
import { PageRecordType, createCustomShapeId } from '@tldraw/tlschema'
import { structuredClone } from '@tldraw/utils'
import { TestApp } from './TestApp'
@ -11,7 +11,7 @@ const ids = {
frame1: createCustomShapeId('frame1'),
group1: createCustomShapeId('group1'),
page2: TLPage.createCustomId('page2'),
page2: PageRecordType.createCustomId('page2'),
}
beforeEach(() => {

8
packages/editor/src/lib/test/TestApp.ts
View file

@ -9,8 +9,8 @@ import {
} from '@tldraw/primitives'
import {
Box2dModel,
TLInstance,
TLPage,
InstanceRecordType,
PageRecordType,
TLShapeId,
TLShapePartial,
createCustomShapeId,
@ -50,7 +50,7 @@ declare global {
}
}
}
export const TEST_INSTANCE_ID = TLInstance.createCustomId('testInstance1')
export const TEST_INSTANCE_ID = InstanceRecordType.createCustomId('testInstance1')
export class TestApp extends App {
constructor(options = {} as Partial<Omit<AppOptions, 'store'>>) {
@ -186,7 +186,7 @@ export class TestApp extends App {
return createCustomShapeId(id)
}
testPageID(id: string) {
return TLPage.createCustomId(id)
return PageRecordType.createCustomId(id)
}
expectToBeIn = (path: string) => {

6
packages/editor/src/lib/test/TldrawEditor.test.tsx
View file

@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react'
import { TLInstance } from '@tldraw/tlschema'
import { InstanceRecordType } from '@tldraw/tlschema'
import { TldrawEditor } from '../TldrawEditor'
import { TldrawEditorConfig } from '../config/TldrawEditorConfig'
@ -24,7 +24,7 @@ describe('<Tldraw />', () => {
const config = new TldrawEditorConfig()
const initialStore = config.createStore({
instanceId: TLInstance.createCustomId('test'),
instanceId: InstanceRecordType.createCustomId('test'),
})
const onMount = jest.fn()
@ -52,7 +52,7 @@ describe('<Tldraw />', () => {
// re-render with a new store:
const newStore = config.createStore({
instanceId: TLInstance.createCustomId('test'),
instanceId: InstanceRecordType.createCustomId('test'),
})
rendered.rerender(
<TldrawEditor config={config} store={newStore} onMount={onMount} autoFocus>

8
packages/editor/src/lib/test/commands/createPage.test.ts
View file

@ -1,4 +1,4 @@
import { TLPage } from '@tldraw/tlschema'
import { PageRecordType } from '@tldraw/tlschema'
import { MAX_PAGES } from '../../constants'
import { TestApp } from '../TestApp'
@ -36,17 +36,17 @@ it('[regression] does not die if every page has the same index', () => {
app.store.put([
{
...page,
id: TLPage.createCustomId('2'),
id: PageRecordType.createCustomId('2'),
name: 'a',
},
{
...page,
id: TLPage.createCustomId('3'),
id: PageRecordType.createCustomId('3'),
name: 'b',
},
{
...page,
id: TLPage.createCustomId('4'),
id: PageRecordType.createCustomId('4'),
name: 'c',
},
])

12
packages/editor/src/lib/test/commands/deletePage.test.ts
View file

@ -1,4 +1,4 @@
import { TLPage } from '@tldraw/tlschema'
import { PageRecordType } from '@tldraw/tlschema'
import { TestApp } from '../TestApp'
let app: TestApp
@ -9,7 +9,7 @@ beforeEach(() => {
describe('deletePage', () => {
it('deletes the page', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', page2Id)
const pages = app.pages
@ -19,7 +19,7 @@ describe('deletePage', () => {
expect(app.pages[0]).toEqual(pages[1])
})
it('is undoable and redoable', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.mark()
app.createPage('New Page 2', page2Id)
@ -38,7 +38,7 @@ describe('deletePage', () => {
expect(app.pages[0]).toEqual(pages[1])
})
it('does not allow deleting all pages', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.mark()
app.createPage('New Page 2', page2Id)
@ -52,7 +52,7 @@ describe('deletePage', () => {
expect(app.pages.length).toBe(1)
})
it('switches the page if you are deleting the current page', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.mark()
app.createPage('New Page 2', page2Id)
@ -64,7 +64,7 @@ describe('deletePage', () => {
})
it('switches the page if another user or tab deletes the current page', () => {
const currentPageId = app.currentPageId
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.mark()
app.createPage('New Page 2', page2Id)

10
packages/editor/src/lib/test/commands/misc.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TLInstance, TLPage } from '@tldraw/tlschema'
import { InstanceRecordType, PageRecordType, createCustomShapeId } from '@tldraw/tlschema'
import { TEST_INSTANCE_ID, TestApp } from '../TestApp'
let app: TestApp
@ -20,13 +20,13 @@ describe('running any commands', () => {
app.store.put([
{
...app.userDocumentSettings,
lastUsedTabId: TLInstance.createCustomId('nope'),
lastUpdatedPageId: TLPage.createCustomId('nope'),
lastUsedTabId: InstanceRecordType.createCustomId('nope'),
lastUpdatedPageId: PageRecordType.createCustomId('nope'),
},
])
expect(app.userDocumentSettings.lastUsedTabId).toBe(TLInstance.createCustomId('nope'))
expect(app.userDocumentSettings.lastUpdatedPageId).toBe(TLPage.createCustomId('nope'))
expect(app.userDocumentSettings.lastUsedTabId).toBe(InstanceRecordType.createCustomId('nope'))
expect(app.userDocumentSettings.lastUpdatedPageId).toBe(PageRecordType.createCustomId('nope'))
app.createShapes([{ type: 'geo', id: createCustomShapeId('geo'), parentId: app.currentPageId }])

12
packages/editor/src/lib/test/commands/moveShapesToPage.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TLPage, TLShape } from '@tldraw/tlschema'
import { createCustomShapeId, PageRecordType, TLShape } from '@tldraw/tlschema'
import { TestApp } from '../TestApp'
let app: TestApp
@ -8,8 +8,8 @@ const ids = {
box2: createCustomShapeId('box2'),
ellipse1: createCustomShapeId('ellipse1'),
ellipse2: createCustomShapeId('ellipse2'),
page1: TLPage.createCustomId('page1'),
page2: TLPage.createCustomId('page2'),
page1: PageRecordType.createCustomId('page1'),
page2: PageRecordType.createCustomId('page2'),
}
beforeEach(() => {
@ -68,7 +68,7 @@ describe('App.moveShapesToPage', () => {
it('Does nothing if the new page is not found or is deleted', () => {
app.history.clear()
app.moveShapesToPage([ids.box1], TLPage.createCustomId('missing'))
app.moveShapesToPage([ids.box1], PageRecordType.createCustomId('missing'))
expect(app.history.numUndos).toBe(0)
})
@ -101,7 +101,7 @@ describe('App.moveShapesToPage', () => {
it('Sets the correct indices', () => {
app = new TestApp()
const page2Id = TLPage.createCustomId('newPage2')
const page2Id = PageRecordType.createCustomId('newPage2')
app.createPage('New Page 2', page2Id)
expect(app.currentPageId).toBe(page2Id)
@ -112,7 +112,7 @@ describe('App.moveShapesToPage', () => {
index: 'a1',
})
const page3Id = TLPage.createCustomId('newPage3')
const page3Id = PageRecordType.createCustomId('newPage3')
app.createPage('New Page 3', page3Id)
expect(app.currentPageId).toBe(page3Id)
app.createShapes([{ id: ids.box2, type: 'geo', x: 0, y: 0, props: { geo: 'ellipse' } }])

14
packages/editor/src/lib/test/commands/setCurrentPage.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TLPage, TLPageId } from '@tldraw/tlschema'
import { createCustomShapeId, PageRecordType, TLPageId } from '@tldraw/tlschema'
import { TestApp } from '../TestApp'
let app: TestApp
@ -10,7 +10,7 @@ beforeEach(() => {
describe('setCurrentPage', () => {
it('sets the current page', () => {
const page1Id = app.pages[0].id
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', page2Id)
expect(app.currentPageId).toEqual(page2Id)
@ -20,7 +20,7 @@ describe('setCurrentPage', () => {
expect(app.currentPage).toEqual(app.pages[0])
const page3Id = TLPage.createCustomId('page3')
const page3Id = PageRecordType.createCustomId('page3')
app.createPage('New Page 3', page3Id)
expect(app.currentPageId).toEqual(page3Id)
@ -36,7 +36,7 @@ describe('setCurrentPage', () => {
app.setCamera(1, 2, 4)
expect(app.camera).toMatchObject({ x: 1, y: 2, z: 4 })
const page = TLPage.create({ name: 'test', index: 'a4' })
const page = PageRecordType.create({ name: 'test', index: 'a4' })
app.store.put([page])
expect(app.getPageStateByPageId(page.id)).toBeUndefined()
@ -49,7 +49,7 @@ describe('setCurrentPage', () => {
})
it('squashes', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', page2Id)
app.history.clear()
@ -61,7 +61,7 @@ describe('setCurrentPage', () => {
it('preserves the undo stack', () => {
const boxId = createCustomShapeId('geo')
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', page2Id)
app.history.clear()
@ -77,7 +77,7 @@ describe('setCurrentPage', () => {
})
it('logs an error when trying to navigate to a page that does not exist', () => {
const page2Id = TLPage.createCustomId('page2')
const page2Id = PageRecordType.createCustomId('page2')
app.createPage('New Page 2', page2Id)
console.error = jest.fn()

5
packages/editor/src/lib/utils/assets.ts
View file

@ -1,5 +1,6 @@
import { Box2d, Vec2d, VecLike } from '@tldraw/primitives'
import {
AssetRecordType,
TLAsset,
TLAssetId,
TLBookmarkAsset,
@ -165,7 +166,7 @@ export async function getMediaAssetFromFile(file: File): Promise<TLAsset> {
dataUrl = await getResizedImageDataUrl(dataUrl, size.w, size.h)
}
const assetId: TLAssetId = TLAsset.createCustomId(getHashForString(dataUrl))
const assetId: TLAssetId = AssetRecordType.createCustomId(getHashForString(dataUrl))
const metadata = await getFileMetaData(file)
@ -419,7 +420,7 @@ export function createEmbedShapeAtPoint(
* @public
*/
export async function createBookmarkShapeAtPoint(app: App, url: string, point: Vec2dModel) {
const assetId: TLAssetId = TLAsset.createCustomId(getHashForString(url))
const assetId: TLAssetId = AssetRecordType.createCustomId(getHashForString(url))
const existing = app.getAssetById(assetId) as TLBookmarkAsset
if (existing) {

9
packages/editor/src/lib/utils/buildFromV1Document.ts
View file

@ -1,5 +1,7 @@
import { clamp, Vec2d } from '@tldraw/primitives'
import {
AssetRecordType,
PageRecordType,
TLAlignType,
TLArrowheadType,
TLArrowShape,
@ -13,7 +15,6 @@ import {
TLGeoShape,
TLImageShape,
TLNoteShape,
TLPage,
TLPageId,
TLShapeId,
TLShapePartial,
@ -56,7 +57,7 @@ export function buildFromV1Document(app: App, document: LegacyTldrawDocument) {
Object.values(document.assets ?? {}).forEach((v1Asset) => {
switch (v1Asset.type) {
case TDAssetType.Image: {
const assetId: TLAssetId = TLAsset.createId()
const assetId: TLAssetId = AssetRecordType.createId()
v1AssetIdsToV2AssetIds.set(v1Asset.id, assetId)
const placeholderAsset: TLAsset = {
id: assetId,
@ -77,7 +78,7 @@ export function buildFromV1Document(app: App, document: LegacyTldrawDocument) {
}
case TDAssetType.Video:
{
const assetId: TLAssetId = TLAsset.createId()
const assetId: TLAssetId = AssetRecordType.createId()
v1AssetIdsToV2AssetIds.set(v1Asset.id, assetId)
app.createAssets([
{
@ -109,7 +110,7 @@ export function buildFromV1Document(app: App, document: LegacyTldrawDocument) {
if (i === 0) {
v1PageIdsToV2PageIds.set(v1Page.id, app.currentPageId)
} else {
const pageId = TLPage.createId()
const pageId = PageRecordType.createId()
v1PageIdsToV2PageIds.set(v1Page.id, pageId)
app.createPage(v1Page.name ?? 'Page', pageId)
}

4
packages/file-format/src/test/file.test.ts
View file

@ -1,4 +1,4 @@
import { createCustomShapeId, TldrawEditorConfig, TLInstance } from '@tldraw/editor'
import { createCustomShapeId, InstanceRecordType, TldrawEditorConfig } from '@tldraw/editor'
import { MigrationFailureReason, UnknownRecord } from '@tldraw/tlstore'
import { assert } from '@tldraw/utils'
import { parseTldrawJsonFile as _parseTldrawJsonFile, TldrawFile } from '../lib/file'
@ -7,7 +7,7 @@ const parseTldrawJsonFile = (config: TldrawEditorConfig, json: string) =>
_parseTldrawJsonFile({
config,
json,
instanceId: TLInstance.createCustomId('instance'),
instanceId: InstanceRecordType.createCustomId('instance'),
})
function serialize(file: TldrawFile): string {

54
packages/tlschema/api-report.md
View file

@ -34,6 +34,9 @@ export const arrowTerminalTypeValidator: T.Validator<TLArrowTerminal>;
// @internal (undocumented)
export const assetIdValidator: T.Validator<TLAssetId>;
// @public (undocumented)
export const AssetRecordType: RecordType<TLAsset, "props" | "type">;
// @public (undocumented)
export const assetTypeMigrations: Migrations;
@ -64,6 +67,9 @@ export interface Box2dModel {
y: number;
}
// @public (undocumented)
export const CameraRecordType: RecordType<TLCamera, never>;
// @public (undocumented)
export const cameraTypeValidator: T.Validator<TLCamera>;
@ -125,6 +131,9 @@ export const cursorValidator: T.Validator<TLCursor>;
// @internal (undocumented)
export const dashValidator: T.Validator<"dashed" | "dotted" | "draw" | "solid">;
// @public (undocumented)
export const DocumentRecordType: RecordType<TLDocument, never>;
// @public (undocumented)
export const documentTypeValidator: T.Validator<TLDocument>;
@ -396,9 +405,18 @@ export const instanceIdValidator: T.Validator<TLInstanceId>;
// @public (undocumented)
export const instancePageStateMigrations: Migrations;
// @public (undocumented)
export const InstancePageStateRecordType: RecordType<TLInstancePageState, "cameraId" | "instanceId" | "pageId">;
// @public (undocumented)
export const instancePageStateTypeValidator: T.Validator<TLInstancePageState>;
// @public (undocumented)
export const InstancePresenceRecordType: RecordType<TLInstancePresence, "currentPageId" | "instanceId" | "userId" | "userName">;
// @public (undocumented)
export const InstanceRecordType: RecordType<TLInstance, "currentPageId">;
// @public (undocumented)
export const instanceTypeMigrations: Migrations;
@ -432,12 +450,18 @@ export const opacityValidator: T.Validator<"0.1" | "0.25" | "0.5" | "0.75" | "1"
// @internal (undocumented)
export const pageIdValidator: T.Validator<TLPageId>;
// @public (undocumented)
export const PageRecordType: RecordType<TLPage, "index" | "name">;
// @public (undocumented)
export const pageTypeValidator: T.Validator<TLPage>;
// @internal (undocumented)
export const parentIdValidator: T.Validator<TLParentId>;
// @public (undocumented)
export const PointerRecordType: RecordType<TLPointer, never>;
// @public (undocumented)
export const pointerTypeValidator: T.Validator<TLPointer>;
@ -611,9 +635,6 @@ export type TLArrowTerminalType = SetValue<typeof TL_ARROW_TERMINAL_TYPE>;
// @public (undocumented)
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
// @public (undocumented)
export const TLAsset: RecordType<TLAsset, "props" | "type">;
// @public (undocumented)
export type TLAssetId = ID<TLBaseAsset<any, any>>;
@ -697,9 +718,6 @@ export interface TLCamera extends BaseRecord<'camera', TLCameraId> {
z: number;
}
// @public (undocumented)
export const TLCamera: RecordType<TLCamera, never>;
// @public (undocumented)
export type TLCameraId = ID<TLCamera>;
@ -747,9 +765,6 @@ export interface TLDocument extends BaseRecord<'document', ID<TLDocument>> {
gridSize: number;
}
// @public (undocumented)
export const TLDocument: RecordType<TLDocument, never>;
// @public (undocumented)
export const TLDOCUMENT_ID: ID<TLDocument>;
@ -996,9 +1011,6 @@ export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
zoomBrush: Box2dModel | null;
}
// @public (undocumented)
export const TLInstance: RecordType<TLInstance, "currentPageId">;
// @public (undocumented)
export type TLInstanceId = ID<TLInstance>;
@ -1026,9 +1038,6 @@ export interface TLInstancePageState extends BaseRecord<'instance_page_state', T
selectedIds: TLShapeId[];
}
// @public (undocumented)
export const TLInstancePageState: RecordType<TLInstancePageState, "cameraId" | "instanceId" | "pageId">;
// @public (undocumented)
export type TLInstancePageStateId = ID<TLInstancePageState>;
@ -1071,9 +1080,6 @@ export interface TLInstancePresence extends BaseRecord<'instance_presence', TLIn
userName: string;
}
// @public (undocumented)
export const TLInstancePresence: RecordType<TLInstancePresence, "currentPageId" | "instanceId" | "userId" | "userName">;
// @public (undocumented)
export type TLInstancePropsForNextShape = Pick<TLShapeProps, TLStyleType>;
@ -1131,9 +1137,6 @@ export interface TLPage extends BaseRecord<'page', TLPageId> {
name: string;
}
// @public (undocumented)
export const TLPage: RecordType<TLPage, "index" | "name">;
// @public (undocumented)
export type TLPageId = ID<TLPage>;
@ -1150,9 +1153,6 @@ export interface TLPointer extends BaseRecord<'pointer', TLPointerId> {
y: number;
}
// @public (undocumented)
export const TLPointer: RecordType<TLPointer, never>;
// @public (undocumented)
export const TLPOINTER_ID: TLPointerId;
@ -1303,9 +1303,6 @@ export interface TLUserDocument extends BaseRecord<'user_document', TLUserDocume
lastUsedTabId: ID<TLInstance> | null;
}
// @public (undocumented)
export const TLUserDocument: RecordType<TLUserDocument, never>;
// @public (undocumented)
export type TLUserDocumentId = ID<TLUserDocument>;
@ -1339,6 +1336,9 @@ export type TLVideoShapeProps = {
// @public (undocumented)
export const uiColorTypeValidator: T.Validator<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
// @public (undocumented)
export const UserDocumentRecordType: RecordType<TLUserDocument, never>;
// @public (undocumented)
export const userDocumentTypeMigrations: Migrations;

34
packages/tlschema/src/TLStore.ts
View file

@ -1,13 +1,13 @@
import { Store, StoreSchema, StoreSchemaOptions, StoreSnapshot } from '@tldraw/tlstore'
import { annotateError, structuredClone } from '@tldraw/utils'
import { TLRecord } from './TLRecord'
import { TLCamera } from './records/TLCamera'
import { TLDOCUMENT_ID, TLDocument } from './records/TLDocument'
import { TLInstance, TLInstanceId } from './records/TLInstance'
import { TLInstancePageState } from './records/TLInstancePageState'
import { TLPage } from './records/TLPage'
import { TLPOINTER_ID, TLPointer } from './records/TLPointer'
import { TLUserDocument } from './records/TLUserDocument'
import { CameraRecordType } from './records/TLCamera'
import { DocumentRecordType, TLDOCUMENT_ID } from './records/TLDocument'
import { InstanceRecordType, TLInstanceId } from './records/TLInstance'
import { InstancePageStateRecordType } from './records/TLInstancePageState'
import { PageRecordType } from './records/TLPage'
import { PointerRecordType, TLPOINTER_ID } from './records/TLPointer'
import { UserDocumentRecordType } from './records/TLUserDocument'
function sortByIndex<T extends { index: string }>(a: T, b: T) {
if (a.index < b.index) {
@ -73,7 +73,7 @@ export const onValidationFailure: StoreSchemaOptions<
}
function getDefaultPages() {
return [TLPage.create({ name: 'Page 1', index: 'a1' })]
return [PageRecordType.create({ name: 'Page 1', index: 'a1' })]
}
/** @internal */
@ -91,12 +91,12 @@ export function createIntegrityChecker(store: TLStore): () => void {
const { instanceId: tabId } = store.props
// make sure we have exactly one document
if (!store.has(TLDOCUMENT_ID)) {
store.put([TLDocument.create({ id: TLDOCUMENT_ID })])
store.put([DocumentRecordType.create({ id: TLDOCUMENT_ID })])
return ensureStoreIsUsable()
}
if (!store.has(TLPOINTER_ID)) {
store.put([TLPointer.create({ id: TLPOINTER_ID })])
store.put([PointerRecordType.create({ id: TLPOINTER_ID })])
return ensureStoreIsUsable()
}
@ -104,7 +104,7 @@ export function createIntegrityChecker(store: TLStore): () => void {
const userDocumentSettings = $userDocumentSettings.value
if (!userDocumentSettings) {
store.put([TLUserDocument.create({})])
store.put([UserDocumentRecordType.create({})])
return ensureStoreIsUsable()
}
@ -127,7 +127,7 @@ export function createIntegrityChecker(store: TLStore): () => void {
const currentPageId = userDocumentSettings?.lastUpdatedPageId ?? pages[0].id!
store.put([
TLInstance.create({
InstanceRecordType.create({
id: tabId,
currentPageId,
propsForNextShape,
@ -154,10 +154,14 @@ export function createIntegrityChecker(store: TLStore): () => void {
// make sure we only have one instancePageState per instance per page
store.remove(instancePageStates.slice(1).map((ips) => ips.id))
} else if (instancePageStates.length === 0) {
const camera = TLCamera.create({})
const camera = CameraRecordType.create({})
store.put([
camera,
TLInstancePageState.create({ pageId: page.id, instanceId: tabId, cameraId: camera.id }),
InstancePageStateRecordType.create({
pageId: page.id,
instanceId: tabId,
cameraId: camera.id,
}),
])
return ensureStoreIsUsable()
}
@ -165,7 +169,7 @@ export function createIntegrityChecker(store: TLStore): () => void {
// make sure the camera exists
const camera = store.get(instancePageStates[0].cameraId)
if (!camera) {
store.put([TLCamera.create({ id: instancePageStates[0].cameraId })])
store.put([CameraRecordType.create({ id: instancePageStates[0].cameraId })])
return ensureStoreIsUsable()
}
}

6
packages/tlschema/src/createPresenceStateDerivation.ts
View file

@ -1,6 +1,6 @@
import { Signal, computed } from 'signia'
import { TLStore } from './TLStore'
import { TLInstancePresence } from './records/TLInstancePresence'
import { InstancePresenceRecordType, TLInstancePresence } from './records/TLInstancePresence'
/** @internal */
export const createPresenceStateDerivation =
@ -29,8 +29,8 @@ export const createPresenceStateDerivation =
return null
}
return TLInstancePresence.create({
id: TLInstancePresence.createCustomId(store.props.instanceId),
return InstancePresenceRecordType.create({
id: InstancePresenceRecordType.createCustomId(store.props.instanceId),
instanceId: store.props.instanceId,
selectedIds: pageState.selectedIds,
brush: instance.brush,

36
packages/tlschema/src/createTLSchema.ts
View file

@ -2,16 +2,16 @@ import { Migrations, StoreSchema, createRecordType, defineMigrations } from '@tl
import { T } from '@tldraw/tlvalidate'
import { TLRecord } from './TLRecord'
import { TLStoreProps, createIntegrityChecker, onValidationFailure } from './TLStore'
import { TLAsset } from './records/TLAsset'
import { TLCamera } from './records/TLCamera'
import { TLDocument } from './records/TLDocument'
import { TLInstance } from './records/TLInstance'
import { TLInstancePageState } from './records/TLInstancePageState'
import { TLInstancePresence } from './records/TLInstancePresence'
import { TLPage } from './records/TLPage'
import { TLPointer } from './records/TLPointer'
import { AssetRecordType } from './records/TLAsset'
import { CameraRecordType } from './records/TLCamera'
import { DocumentRecordType } from './records/TLDocument'
import { InstanceRecordType } from './records/TLInstance'
import { InstancePageStateRecordType } from './records/TLInstancePageState'
import { InstancePresenceRecordType } from './records/TLInstancePresence'
import { PageRecordType } from './records/TLPage'
import { PointerRecordType } from './records/TLPointer'
import { TLShape, TLUnknownShape, rootShapeTypeMigrations } from './records/TLShape'
import { TLUserDocument } from './records/TLUserDocument'
import { UserDocumentRecordType } from './records/TLUserDocument'
import { storeMigrations } from './schema'
import { arrowShapeTypeMigrations, arrowShapeTypeValidator } from './shapes/TLArrowShape'
import { bookmarkShapeTypeMigrations, bookmarkShapeTypeValidator } from './shapes/TLBookmarkShape'
@ -108,16 +108,16 @@ export function createTLSchema<T extends TLUnknownShape>(
return StoreSchema.create<TLRecord, TLStoreProps>(
{
asset: TLAsset,
camera: TLCamera,
document: TLDocument,
instance: TLInstance,
instance_page_state: TLInstancePageState,
page: TLPage,
asset: AssetRecordType,
camera: CameraRecordType,
document: DocumentRecordType,
instance: InstanceRecordType,
instance_page_state: InstancePageStateRecordType,
page: PageRecordType,
shape: shapeRecord,
user_document: TLUserDocument,
instance_presence: TLInstancePresence,
pointer: TLPointer,
user_document: UserDocumentRecordType,
instance_presence: InstancePresenceRecordType,
pointer: PointerRecordType,
},
{
snapshotMigrations: storeMigrations,

33
packages/tlschema/src/index.ts
View file

@ -28,34 +28,48 @@ export { createTLSchema } from './createTLSchema'
export { CLIENT_FIXUP_SCRIPT, fixupRecord } from './fixup'
export { type Box2dModel, type Vec2dModel } from './geometry-types'
export {
TLAsset,
AssetRecordType,
assetTypeMigrations,
assetTypeValidator,
type TLAsset,
type TLAssetId,
type TLAssetPartial,
type TLAssetShape,
} from './records/TLAsset'
export { TLCamera, cameraTypeValidator, type TLCameraId } from './records/TLCamera'
export { TLDOCUMENT_ID, TLDocument, documentTypeValidator } from './records/TLDocument'
export {
TLInstance,
CameraRecordType,
cameraTypeValidator,
type TLCamera,
type TLCameraId,
} from './records/TLCamera'
export {
DocumentRecordType,
TLDOCUMENT_ID,
documentTypeValidator,
type TLDocument,
} from './records/TLDocument'
export {
InstanceRecordType,
instanceTypeMigrations,
instanceTypeValidator,
type TLInstance,
type TLInstanceId,
type TLInstancePropsForNextShape,
} from './records/TLInstance'
export {
TLInstancePageState,
InstancePageStateRecordType,
instancePageStateMigrations,
instancePageStateTypeValidator,
type TLInstancePageState,
type TLInstancePageStateId,
} from './records/TLInstancePageState'
export { TLInstancePresence } from './records/TLInstancePresence'
export { TLPage, pageTypeValidator, type TLPageId } from './records/TLPage'
export { InstancePresenceRecordType, type TLInstancePresence } from './records/TLInstancePresence'
export { PageRecordType, pageTypeValidator, type TLPage, type TLPageId } from './records/TLPage'
export {
PointerRecordType,
TLPOINTER_ID,
TLPointer,
pointerTypeValidator,
type TLPointer,
type TLPointerId,
} from './records/TLPointer'
export {
@ -75,9 +89,10 @@ export {
type TLUnknownShape,
} from './records/TLShape'
export {
TLUserDocument,
UserDocumentRecordType,
userDocumentTypeMigrations,
userDocumentTypeValidator,
type TLUserDocument,
type TLUserDocumentId,
} from './records/TLUserDocument'
export { storeMigrations } from './schema'

2
packages/tlschema/src/records/TLAsset.ts
View file

@ -44,7 +44,7 @@ export type TLAssetPartial<T extends TLAsset = TLAsset> = T extends T
: never
/** @public */
export const TLAsset = createRecordType<TLAsset>('asset', {
export const AssetRecordType = createRecordType<TLAsset>('asset', {
migrations: assetTypeMigrations,
validator: assetTypeValidator,
scope: 'document',

2
packages/tlschema/src/records/TLCamera.ts
View file

@ -29,7 +29,7 @@ export const cameraTypeValidator: T.Validator<TLCamera> = T.model(
)
/** @public */
export const TLCamera = createRecordType<TLCamera>('camera', {
export const CameraRecordType = createRecordType<TLCamera>('camera', {
validator: cameraTypeValidator,
scope: 'instance',
}).withDefaultProperties(

4
packages/tlschema/src/records/TLDocument.ts
View file

@ -21,7 +21,7 @@ export const documentTypeValidator: T.Validator<TLDocument> = T.model(
)
/** @public */
export const TLDocument = createRecordType<TLDocument>('document', {
export const DocumentRecordType = createRecordType<TLDocument>('document', {
validator: documentTypeValidator,
scope: 'document',
}).withDefaultProperties(
@ -32,7 +32,7 @@ export const TLDocument = createRecordType<TLDocument>('document', {
// all document records have the same ID: 'document:document'
/** @public */
export const TLDOCUMENT_ID: ID<TLDocument> = TLDocument.createCustomId('document')
export const TLDOCUMENT_ID: ID<TLDocument> = DocumentRecordType.createCustomId('document')
/** @public */
export const documentTypeMigrations = defineMigrations({})

2
packages/tlschema/src/records/TLInstance.ts
View file

@ -246,7 +246,7 @@ export const instanceTypeMigrations = defineMigrations({
})
/** @public */
export const TLInstance = createRecordType<TLInstance>('instance', {
export const InstanceRecordType = createRecordType<TLInstance>('instance', {
migrations: instanceTypeMigrations,
validator: instanceTypeValidator,
scope: 'instance',

13
packages/tlschema/src/records/TLInstancePageState.ts
View file

@ -66,11 +66,14 @@ export const instancePageStateMigrations = defineMigrations({
})
/** @public */
export const TLInstancePageState = createRecordType<TLInstancePageState>('instance_page_state', {
migrations: instancePageStateMigrations,
validator: instancePageStateTypeValidator,
scope: 'instance',
}).withDefaultProperties(
export const InstancePageStateRecordType = createRecordType<TLInstancePageState>(
'instance_page_state',
{
migrations: instancePageStateMigrations,
validator: instancePageStateTypeValidator,
scope: 'instance',
}
).withDefaultProperties(
(): Omit<
TLInstancePageState,
'id' | 'typeName' | 'userId' | 'instanceId' | 'cameraId' | 'pageId'

13
packages/tlschema/src/records/TLInstancePresence.ts
View file

@ -90,11 +90,14 @@ export const instancePresenceTypeMigrations = defineMigrations({
})
/** @public */
export const TLInstancePresence = createRecordType<TLInstancePresence>('instance_presence', {
migrations: instancePresenceTypeMigrations,
validator: instancePresenceTypeValidator,
scope: 'presence',
}).withDefaultProperties(() => ({
export const InstancePresenceRecordType = createRecordType<TLInstancePresence>(
'instance_presence',
{
migrations: instancePresenceTypeMigrations,
validator: instancePresenceTypeValidator,
scope: 'presence',
}
).withDefaultProperties(() => ({
lastActivityTimestamp: 0,
followingUserId: null,
color: '#FF0000',

2
packages/tlschema/src/records/TLPage.ts
View file

@ -27,7 +27,7 @@ export const pageTypeValidator: T.Validator<TLPage> = T.model(
)
/** @public */
export const TLPage = createRecordType<TLPage>('page', {
export const PageRecordType = createRecordType<TLPage>('page', {
validator: pageTypeValidator,
scope: 'document',
})

4
packages/tlschema/src/records/TLPointer.ts
View file

@ -29,7 +29,7 @@ export const pointerTypeValidator: T.Validator<TLPointer> = T.model(
)
/** @public */
export const TLPointer = createRecordType<TLPointer>('pointer', {
export const PointerRecordType = createRecordType<TLPointer>('pointer', {
validator: pointerTypeValidator,
scope: 'instance',
}).withDefaultProperties(
@ -41,7 +41,7 @@ export const TLPointer = createRecordType<TLPointer>('pointer', {
)
/** @public */
export const TLPOINTER_ID = TLPointer.createCustomId('pointer')
export const TLPOINTER_ID = PointerRecordType.createCustomId('pointer')
/** @public */
export const pointerTypeMigrations = defineMigrations({})

2
packages/tlschema/src/records/TLUserDocument.ts
View file

@ -93,7 +93,7 @@ export const userDocumentTypeMigrations = defineMigrations({
/* STEP 5: Add up + down migrations for your new version */
/** @public */
export const TLUserDocument = createRecordType<TLUserDocument>('user_document', {
export const UserDocumentRecordType = createRecordType<TLUserDocument>('user_document', {
migrations: userDocumentTypeMigrations,
validator: userDocumentTypeValidator,
scope: 'instance',

21
packages/tlsync-client/src/lib/TLLocalSyncClient.test.ts
View file

@ -1,4 +1,9 @@
import { TldrawEditorConfig, TLInstance, TLInstanceId, TLPage } from '@tldraw/editor'
import {
InstanceRecordType,
PageRecordType,
TldrawEditorConfig,
TLInstanceId,
} from '@tldraw/editor'
import { promiseWithResolve } from '@tldraw/utils'
import * as idb from './indexedDb'
import { TLLocalSyncClient } from './TLLocalSyncClient'
@ -23,7 +28,7 @@ class BroadcastChannelMock {
}
function testClient(
instanceId: TLInstanceId = TLInstance.createCustomId('test'),
instanceId: TLInstanceId = InstanceRecordType.createCustomId('test'),
channel = new BroadcastChannelMock('test')
) {
const store = new TldrawEditorConfig().createStore({
@ -115,12 +120,12 @@ test('when a client receives an announce with a newer schema version shortly aft
test('the first db write after a client connects is a full db overwrite', async () => {
const { client } = testClient()
await tick()
client.store.put([TLPage.create({ name: 'test', index: 'a0' })])
client.store.put([PageRecordType.create({ name: 'test', index: 'a0' })])
await tick()
expect(idb.storeSnapshotInIndexedDb).toHaveBeenCalledTimes(1)
expect(idb.storeChangesInIndexedDb).not.toHaveBeenCalled()
client.store.put([TLPage.create({ name: 'test2', index: 'a1' })])
client.store.put([PageRecordType.create({ name: 'test2', index: 'a1' })])
await tick()
expect(idb.storeSnapshotInIndexedDb).toHaveBeenCalledTimes(1)
expect(idb.storeChangesInIndexedDb).toHaveBeenCalledTimes(1)
@ -129,12 +134,12 @@ test('the first db write after a client connects is a full db overwrite', async
test('it clears the diff queue after every write', async () => {
const { client } = testClient()
await tick()
client.store.put([TLPage.create({ name: 'test', index: 'a0' })])
client.store.put([PageRecordType.create({ name: 'test', index: 'a0' })])
await tick()
// @ts-expect-error
expect(client.diffQueue.length).toBe(0)
client.store.put([TLPage.create({ name: 'test2', index: 'a1' })])
client.store.put([PageRecordType.create({ name: 'test2', index: 'a1' })])
await tick()
// @ts-expect-error
expect(client.diffQueue.length).toBe(0)
@ -146,7 +151,7 @@ test('writes that come in during a persist operation will get persisted afterwar
const { client } = testClient()
await tick()
client.store.put([TLPage.create({ name: 'test', index: 'a0' })])
client.store.put([PageRecordType.create({ name: 'test', index: 'a0' })])
await tick()
// we should have called into idb but not resolved the promise yet
@ -154,7 +159,7 @@ test('writes that come in during a persist operation will get persisted afterwar
expect(idb.storeChangesInIndexedDb).toHaveBeenCalledTimes(0)
// if another change comes in, loads of time can pass, but nothing else should get called
client.store.put([TLPage.create({ name: 'test', index: 'a2' })])
client.store.put([PageRecordType.create({ name: 'test', index: 'a2' })])
await tick()
expect(idb.storeSnapshotInIndexedDb).toHaveBeenCalledTimes(1)
expect(idb.storeChangesInIndexedDb).toHaveBeenCalledTimes(0)

4
packages/tlsync-client/src/lib/persistence-constants.ts
View file

@ -1,4 +1,4 @@
import { TLInstance, TLInstanceId, uniqueId } from '@tldraw/editor'
import { InstanceRecordType, TLInstanceId, uniqueId } from '@tldraw/editor'
const tabIdKey = 'TLDRAW_TAB_ID_v2' as const
@ -38,7 +38,7 @@ export const STORE_PREFIX = 'TLDRAW_DOCUMENT_v2'
/** @public */
export const TAB_ID: TLInstanceId =
window?.[tabIdKey] ?? window?.sessionStorage[tabIdKey] ?? TLInstance.createId()
window?.[tabIdKey] ?? window?.sessionStorage[tabIdKey] ?? InstanceRecordType.createId()
if (window) {
window[tabIdKey] = TAB_ID
if (iOS()) {

4
packages/ui/src/lib/components/MoveToPageMenu.tsx
View file

@ -1,5 +1,5 @@
import * as _ContextMenu from '@radix-ui/react-context-menu'
import { TLPage, TLPageId, useApp, useContainer } from '@tldraw/editor'
import { PageRecordType, TLPageId, useApp, useContainer } from '@tldraw/editor'
import { track } from 'signia-react'
import { useToasts } from '../hooks/useToastsProvider'
import { useTranslation } from '../hooks/useTranslation/useTranslation'
@ -79,7 +79,7 @@ export const MoveToPageMenu = track(function MoveToPageMenu() {
key="new-page"
onSelect={() => {
app.mark('move_shapes_to_page')
const newPageId = TLPage.createId()
const newPageId = PageRecordType.createId()
const ids = app.selectedIds
const oldPageId = app.currentPageId
app.batch(() => {

4
packages/ui/src/lib/components/PageMenu/PageItemSubmenu.tsx
View file

@ -1,5 +1,5 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { MAX_PAGES, TLPage, TLPageId, useApp } from '@tldraw/editor'
import { MAX_PAGES, PageRecordType, TLPageId, useApp } from '@tldraw/editor'
import { useCallback } from 'react'
import { track } from 'signia-react'
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@ -26,7 +26,7 @@ export const PageItemSubmenu = track(function PageItemSubmenu({
const onDuplicate = useCallback(() => {
app.mark('creating page')
const newId = TLPage.createId()
const newId = PageRecordType.createId()
app.duplicatePage(item.id as TLPageId, newId)
}, [app, item])

4
packages/ui/src/lib/components/PageMenu/PageMenu.tsx
View file

@ -1,5 +1,5 @@
import { MAX_PAGES, useApp } from '@tldraw/editor'
import { TLPage, TLPageId } from '@tldraw/tlschema'
import { PageRecordType, TLPageId } from '@tldraw/tlschema'
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { useValue } from 'signia-react'
import { useBreakpoint } from '../../hooks/useBreakpoint'
@ -230,7 +230,7 @@ export const PageMenu = function PageMenu() {
if (isReadonlyMode) return
app.mark('creating page')
const newPageId = TLPage.createId()
const newPageId = PageRecordType.createId()
app.createPage(msg('page-menu.new-page-initial-name'), newPageId)
setIsEditing(true)
}, [app, msg, isReadonlyMode])

4
packages/ui/src/lib/hooks/clipboard/pasteExcalidrawContent.ts
View file

@ -1,8 +1,8 @@
import {
App,
AssetRecordType,
TLAlignType,
TLArrowheadType,
TLAsset,
TLAssetId,
TLClipboardModel,
TLColorType,
@ -288,7 +288,7 @@ export async function pasteExcalidrawContent(app: App, clipboard: any, point?: V
const file = files[element.fileId]
if (!file) break
const assetId: TLAssetId = TLAsset.createId()
const assetId: TLAssetId = AssetRecordType.createId()
tldrawContent.assets.push({
id: assetId,
typeName: 'asset',