@tldraw/tlschema 5.3.0-canary.fceaae5e9feb → 5.3.0-internal.1640468db8fd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/TLStore.js +7 -0
- package/dist-cjs/TLStore.js.map +2 -2
- package/dist-cjs/index.d.ts +196 -1
- package/dist-cjs/index.js +11 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/misc/TLCursor.js +1 -0
- package/dist-cjs/misc/TLCursor.js.map +2 -2
- package/dist-cjs/records/TLComment.js +187 -0
- package/dist-cjs/records/TLComment.js.map +7 -0
- package/dist-cjs/shapes/TLGeoShape.js +15 -1
- package/dist-cjs/shapes/TLGeoShape.js.map +2 -2
- package/dist-esm/TLStore.mjs +7 -0
- package/dist-esm/TLStore.mjs.map +2 -2
- package/dist-esm/index.d.mts +196 -1
- package/dist-esm/index.mjs +21 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/misc/TLCursor.mjs +1 -0
- package/dist-esm/misc/TLCursor.mjs.map +2 -2
- package/dist-esm/records/TLComment.mjs +167 -0
- package/dist-esm/records/TLComment.mjs.map +7 -0
- package/dist-esm/shapes/TLGeoShape.mjs +15 -1
- package/dist-esm/shapes/TLGeoShape.mjs.map +2 -2
- package/package.json +5 -5
- package/src/TLStore.ts +16 -0
- package/src/index.ts +16 -0
- package/src/migrations.test.ts +12 -0
- package/src/misc/TLCursor.ts +1 -0
- package/src/records/TLComment.test.ts +182 -0
- package/src/records/TLComment.ts +330 -0
- package/src/shapes/TLGeoShape.ts +21 -1
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var TLComment_exports = {};
|
|
20
|
+
__export(TLComment_exports, {
|
|
21
|
+
commentRecordConfig: () => commentRecordConfig,
|
|
22
|
+
commentSchemaRecords: () => commentSchemaRecords,
|
|
23
|
+
commentThreadRecordConfig: () => commentThreadRecordConfig,
|
|
24
|
+
createComment: () => createComment,
|
|
25
|
+
createCommentId: () => createCommentId,
|
|
26
|
+
createCommentThread: () => createCommentThread,
|
|
27
|
+
createCommentThreadId: () => createCommentThreadId,
|
|
28
|
+
isCommentId: () => isCommentId,
|
|
29
|
+
isCommentThreadId: () => isCommentThreadId
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(TLComment_exports);
|
|
32
|
+
var import_store = require("@tldraw/store");
|
|
33
|
+
var import_validate = require("@tldraw/validate");
|
|
34
|
+
var import_id_validator = require("../misc/id-validator");
|
|
35
|
+
var import_TLRichText = require("../misc/TLRichText");
|
|
36
|
+
var import_TLCustomRecord = require("./TLCustomRecord");
|
|
37
|
+
const commentAnchorValidator = import_validate.T.union("type", {
|
|
38
|
+
shape: import_validate.T.object({
|
|
39
|
+
type: import_validate.T.literal("shape"),
|
|
40
|
+
shapeId: (0, import_id_validator.idValidator)("shape"),
|
|
41
|
+
x: import_validate.T.number,
|
|
42
|
+
y: import_validate.T.number,
|
|
43
|
+
isPrecise: import_validate.T.boolean
|
|
44
|
+
}),
|
|
45
|
+
point: import_validate.T.object({
|
|
46
|
+
type: import_validate.T.literal("point"),
|
|
47
|
+
x: import_validate.T.number,
|
|
48
|
+
y: import_validate.T.number
|
|
49
|
+
}),
|
|
50
|
+
region: import_validate.T.object({
|
|
51
|
+
type: import_validate.T.literal("region"),
|
|
52
|
+
x: import_validate.T.number,
|
|
53
|
+
y: import_validate.T.number,
|
|
54
|
+
w: import_validate.T.number,
|
|
55
|
+
h: import_validate.T.number,
|
|
56
|
+
pinX: import_validate.T.number.optional(),
|
|
57
|
+
pinY: import_validate.T.number.optional()
|
|
58
|
+
}),
|
|
59
|
+
page: import_validate.T.object({
|
|
60
|
+
type: import_validate.T.literal("page")
|
|
61
|
+
}),
|
|
62
|
+
"text-range": import_validate.T.object({
|
|
63
|
+
type: import_validate.T.literal("text-range"),
|
|
64
|
+
shapeId: (0, import_id_validator.idValidator)("shape"),
|
|
65
|
+
from: import_validate.T.number,
|
|
66
|
+
to: import_validate.T.number
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
function createCommentGuardMigrations(typeName, extra = []) {
|
|
70
|
+
return (0, import_store.createRecordMigrationSequence)({
|
|
71
|
+
sequenceId: `com.tldraw.${typeName}`,
|
|
72
|
+
recordType: typeName,
|
|
73
|
+
retroactive: true,
|
|
74
|
+
sequence: [
|
|
75
|
+
{
|
|
76
|
+
id: `com.tldraw.${typeName}/1`,
|
|
77
|
+
up: (record) => record
|
|
78
|
+
},
|
|
79
|
+
...extra
|
|
80
|
+
]
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
const commentThreadRecordConfig = {
|
|
84
|
+
scope: "document",
|
|
85
|
+
migrations: createCommentGuardMigrations("comment-thread", [
|
|
86
|
+
{
|
|
87
|
+
// Shape anchors gained normalized x/y + isPrecise; existing ones were imprecise (top-right).
|
|
88
|
+
id: "com.tldraw.comment-thread/2",
|
|
89
|
+
up: (record) => {
|
|
90
|
+
const anchor = record.anchor;
|
|
91
|
+
if (anchor?.type === "shape" && anchor.x === void 0) {
|
|
92
|
+
;
|
|
93
|
+
record.anchor = { ...anchor, x: 1, y: 0, isPrecise: false };
|
|
94
|
+
}
|
|
95
|
+
return record;
|
|
96
|
+
},
|
|
97
|
+
down: (record) => {
|
|
98
|
+
const anchor = record.anchor;
|
|
99
|
+
if (anchor?.type === "shape") {
|
|
100
|
+
;
|
|
101
|
+
record.anchor = { type: "shape", shapeId: anchor.shapeId };
|
|
102
|
+
}
|
|
103
|
+
return record;
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
// Region anchors gained an optional pin corner (where the creating drag released).
|
|
108
|
+
id: "com.tldraw.comment-thread/3",
|
|
109
|
+
up: (record) => record,
|
|
110
|
+
down: (record) => {
|
|
111
|
+
const anchor = record.anchor;
|
|
112
|
+
if (anchor?.type === "region") {
|
|
113
|
+
const { pinX: _pinX, pinY: _pinY, ...rest } = anchor;
|
|
114
|
+
record.anchor = rest;
|
|
115
|
+
}
|
|
116
|
+
return record;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
]),
|
|
120
|
+
validator: import_validate.T.object({
|
|
121
|
+
id: (0, import_id_validator.idValidator)("comment-thread"),
|
|
122
|
+
typeName: import_validate.T.literal("comment-thread"),
|
|
123
|
+
pageId: (0, import_id_validator.idValidator)("page"),
|
|
124
|
+
anchor: commentAnchorValidator,
|
|
125
|
+
createdBy: import_validate.T.string,
|
|
126
|
+
createdAt: import_validate.T.number,
|
|
127
|
+
resolved: import_validate.T.object({ at: import_validate.T.number, by: import_validate.T.string }).nullable(),
|
|
128
|
+
meta: import_validate.T.jsonValue
|
|
129
|
+
})
|
|
130
|
+
};
|
|
131
|
+
const commentRecordConfig = {
|
|
132
|
+
scope: "document",
|
|
133
|
+
migrations: createCommentGuardMigrations("comment"),
|
|
134
|
+
validator: import_validate.T.object({
|
|
135
|
+
id: (0, import_id_validator.idValidator)("comment"),
|
|
136
|
+
typeName: import_validate.T.literal("comment"),
|
|
137
|
+
threadId: (0, import_id_validator.idValidator)("comment-thread"),
|
|
138
|
+
pageId: (0, import_id_validator.idValidator)("page"),
|
|
139
|
+
authorId: import_validate.T.string,
|
|
140
|
+
createdAt: import_validate.T.number,
|
|
141
|
+
editedAt: import_validate.T.number.nullable(),
|
|
142
|
+
body: import_TLRichText.richTextValidator,
|
|
143
|
+
meta: import_validate.T.jsonValue
|
|
144
|
+
})
|
|
145
|
+
};
|
|
146
|
+
const commentSchemaRecords = {
|
|
147
|
+
"comment-thread": commentThreadRecordConfig,
|
|
148
|
+
comment: commentRecordConfig
|
|
149
|
+
};
|
|
150
|
+
function createCommentThreadId(id) {
|
|
151
|
+
return (0, import_TLCustomRecord.createCustomRecordId)("comment-thread", id);
|
|
152
|
+
}
|
|
153
|
+
function createCommentId(id) {
|
|
154
|
+
return (0, import_TLCustomRecord.createCustomRecordId)("comment", id);
|
|
155
|
+
}
|
|
156
|
+
function isCommentThreadId(id) {
|
|
157
|
+
return (0, import_TLCustomRecord.isCustomRecordId)("comment-thread", id);
|
|
158
|
+
}
|
|
159
|
+
function isCommentId(id) {
|
|
160
|
+
return (0, import_TLCustomRecord.isCustomRecordId)("comment", id);
|
|
161
|
+
}
|
|
162
|
+
function createCommentThread(props) {
|
|
163
|
+
return {
|
|
164
|
+
id: createCommentThreadId(),
|
|
165
|
+
typeName: "comment-thread",
|
|
166
|
+
pageId: props.pageId,
|
|
167
|
+
anchor: props.anchor,
|
|
168
|
+
createdBy: props.createdBy,
|
|
169
|
+
createdAt: props.now ?? Date.now(),
|
|
170
|
+
resolved: null,
|
|
171
|
+
meta: props.meta ?? {}
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
function createComment(props) {
|
|
175
|
+
return {
|
|
176
|
+
id: createCommentId(),
|
|
177
|
+
typeName: "comment",
|
|
178
|
+
threadId: props.threadId,
|
|
179
|
+
pageId: props.pageId,
|
|
180
|
+
authorId: props.authorId,
|
|
181
|
+
createdAt: props.now ?? Date.now(),
|
|
182
|
+
editedAt: null,
|
|
183
|
+
body: props.body,
|
|
184
|
+
meta: props.meta ?? {}
|
|
185
|
+
};
|
|
186
|
+
}
|
|
187
|
+
//# sourceMappingURL=TLComment.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/records/TLComment.ts"],
|
|
4
|
+
"sourcesContent": ["import { BaseRecord, RecordId, createRecordMigrationSequence } from '@tldraw/store'\nimport { JsonObject } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { idValidator } from '../misc/id-validator'\nimport { richTextValidator, TLRichText } from '../misc/TLRichText'\nimport { CustomRecordInfo, createCustomRecordId, isCustomRecordId } from './TLCustomRecord'\nimport { TLPageId } from './TLPage'\nimport { TLShapeId } from './TLShape'\n\n/**\n * Where a comment thread is anchored on the canvas. Modeled as a discriminated union so new\n * anchor kinds can be added without breaking existing threads:\n *\n * - `shape` \u2014 pinned to a shape. `x`/`y` are normalized (0\u20131) within the shape's page bounds, so\n * the pin keeps its spot as the shape moves and resizes. `isPrecise` mirrors arrow bindings: when\n * true the pin sits at exactly `x`/`y`; when false (the default) it sits at a consumer-defined\n * spot (top-right out of the box), and `x`/`y` are the remembered precise position\n * - `point` \u2014 pinned to a fixed point on the page, in page coordinates\n * - `region` \u2014 pinned to a rectangular area of the page, in page coordinates\n * - `page` \u2014 a page-level thread with no spatial anchor\n * - `text-range` \u2014 pinned to a character range inside a shape's text\n *\n * @public\n */\nexport type TLCommentAnchor =\n\t| { type: 'shape'; shapeId: TLShapeId; x: number; y: number; isPrecise: boolean }\n\t| { type: 'point'; x: number; y: number }\n\t| {\n\t\t\ttype: 'region'\n\t\t\tx: number\n\t\t\ty: number\n\t\t\tw: number\n\t\t\th: number\n\t\t\t/** The normalized (0\u20131) corner the pin sits on \u2014 where the creating drag was released.\n\t\t\t * Absent on older records; consumers fall back to their configured corner. */\n\t\t\tpinX?: number\n\t\t\tpinY?: number\n\t }\n\t| { type: 'page' }\n\t| { type: 'text-range'; shapeId: TLShapeId; from: number; to: number }\n\n/**\n * A comment thread. The thread owns the anchor (where the conversation lives on the canvas) and\n * the resolution state; the messages themselves are `TLComment` records pointing at the thread\n * via `threadId`, ordered by `createdAt`. v1 threads are flat \u2014 no nested replies.\n *\n * Threads and comments are document records, but they're intended to be served through the sync\n * server's object-store lane: gated by the session's `objectAccess` rather than `isReadonly`\n * (so \"can comment but not edit\" is expressible), excluded from document snapshots and `.tldr`\n * exports server-side, and persisted in a separate lane from the main document.\n *\n * Opt-in: register with `createTLSchema({ records: commentSchemaRecords })` on the server and\n * the matching `records` option on the client \u2014 neither type is part of the default schema, and\n * both sides must register them identically.\n *\n * @public\n */\nexport interface TLCommentThread extends BaseRecord<'comment-thread', TLCommentThreadId> {\n\t/** The page the thread lives on. */\n\tpageId: TLPageId\n\t/** Where the thread is anchored on that page. */\n\tanchor: TLCommentAnchor\n\t/**\n\t * Who started the thread. Client-supplied for now; the sync server should stamp/verify this\n\t * from the session's authenticated identity once record-level authorization lands (the same\n\t * model presence already uses for self-ownership).\n\t */\n\tcreatedBy: string\n\tcreatedAt: number\n\t/** Resolution state: when and by whom the thread was resolved, or null while open. */\n\tresolved: { at: number; by: string } | null\n\tmeta: JsonObject\n}\n\n/** @public */\nexport type TLCommentThreadId = RecordId<TLCommentThread>\n\n/**\n * A single comment message within a thread. See `TLCommentThread` for the overall model and\n * sync/registration notes.\n *\n * Comment mutations are deliberately not undoable \u2014 create/edit them with\n * `{ history: 'ignore' }` to avoid multiplayer surprises like a comment reappearing after\n * someone else deleted it.\n *\n * @public\n */\nexport interface TLComment extends BaseRecord<'comment', TLCommentId> {\n\t/** The thread this comment belongs to. */\n\tthreadId: TLCommentThreadId\n\t/** Denormalized from the thread so per-page queries don't need a join. */\n\tpageId: TLPageId\n\t/** See `TLCommentThread.createdBy` \u2014 same server-stamping caveat applies. */\n\tauthorId: string\n\tcreatedAt: number\n\t/** Null until the comment is first edited. */\n\teditedAt: number | null\n\t/** Rich text body. Use `toRichText(...)` for plaintext input. */\n\tbody: TLRichText\n\tmeta: JsonObject\n}\n\n/** @public */\nexport type TLCommentId = RecordId<TLComment>\n\nconst commentAnchorValidator: T.Validator<TLCommentAnchor> = T.union('type', {\n\tshape: T.object({\n\t\ttype: T.literal('shape'),\n\t\tshapeId: idValidator<TLShapeId>('shape'),\n\t\tx: T.number,\n\t\ty: T.number,\n\t\tisPrecise: T.boolean,\n\t}),\n\tpoint: T.object({\n\t\ttype: T.literal('point'),\n\t\tx: T.number,\n\t\ty: T.number,\n\t}),\n\tregion: T.object({\n\t\ttype: T.literal('region'),\n\t\tx: T.number,\n\t\ty: T.number,\n\t\tw: T.number,\n\t\th: T.number,\n\t\tpinX: T.number.optional(),\n\t\tpinY: T.number.optional(),\n\t}),\n\tpage: T.object({\n\t\ttype: T.literal('page'),\n\t}),\n\t'text-range': T.object({\n\t\ttype: T.literal('text-range'),\n\t\tshapeId: idValidator<TLShapeId>('shape'),\n\t\tfrom: T.number,\n\t\tto: T.number,\n\t}),\n})\n\n/**\n * Guard migrations for the comment record types. Each sequence is retroactive and starts with an\n * identity migration that has no `down`: a sync server whose schema registers the comment types\n * cannot down-migrate records for a session whose schema predates them, so such sessions are\n * rejected with CLIENT_TOO_OLD (prompting a refresh) instead of being sent record types their\n * store cannot represent.\n */\nfunction createCommentGuardMigrations(\n\ttypeName: 'comment' | 'comment-thread',\n\textra: Parameters<typeof createRecordMigrationSequence>[0]['sequence'] = []\n) {\n\treturn createRecordMigrationSequence({\n\t\tsequenceId: `com.tldraw.${typeName}`,\n\t\trecordType: typeName,\n\t\tretroactive: true,\n\t\tsequence: [\n\t\t\t{\n\t\t\t\tid: `com.tldraw.${typeName}/1`,\n\t\t\t\tup: (record) => record,\n\t\t\t},\n\t\t\t...extra,\n\t\t],\n\t})\n}\n\n/**\n * Config for registering the `comment-thread` record type in a tldraw schema. Pass via\n * `commentSchemaRecords`; see `TLCommentThread`.\n *\n * @public\n */\nexport const commentThreadRecordConfig: CustomRecordInfo = {\n\tscope: 'document',\n\tmigrations: createCommentGuardMigrations('comment-thread', [\n\t\t{\n\t\t\t// Shape anchors gained normalized x/y + isPrecise; existing ones were imprecise (top-right).\n\t\t\tid: 'com.tldraw.comment-thread/2',\n\t\t\tup: (record) => {\n\t\t\t\tconst anchor = (record as any).anchor\n\t\t\t\tif (anchor?.type === 'shape' && anchor.x === undefined) {\n\t\t\t\t\t;(record as any).anchor = { ...anchor, x: 1, y: 0, isPrecise: false }\n\t\t\t\t}\n\t\t\t\treturn record\n\t\t\t},\n\t\t\tdown: (record) => {\n\t\t\t\tconst anchor = (record as any).anchor\n\t\t\t\tif (anchor?.type === 'shape') {\n\t\t\t\t\t;(record as any).anchor = { type: 'shape', shapeId: anchor.shapeId }\n\t\t\t\t}\n\t\t\t\treturn record\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// Region anchors gained an optional pin corner (where the creating drag released).\n\t\t\tid: 'com.tldraw.comment-thread/3',\n\t\t\tup: (record) => record,\n\t\t\tdown: (record) => {\n\t\t\t\tconst anchor = (record as any).anchor\n\t\t\t\tif (anchor?.type === 'region') {\n\t\t\t\t\tconst { pinX: _pinX, pinY: _pinY, ...rest } = anchor\n\t\t\t\t\t;(record as any).anchor = rest\n\t\t\t\t}\n\t\t\t\treturn record\n\t\t\t},\n\t\t},\n\t]),\n\tvalidator: T.object({\n\t\tid: idValidator<TLCommentThreadId>('comment-thread'),\n\t\ttypeName: T.literal('comment-thread'),\n\t\tpageId: idValidator<TLPageId>('page'),\n\t\tanchor: commentAnchorValidator,\n\t\tcreatedBy: T.string,\n\t\tcreatedAt: T.number,\n\t\tresolved: T.object({ at: T.number, by: T.string }).nullable(),\n\t\tmeta: T.jsonValue,\n\t}),\n}\n\n/**\n * Config for registering the `comment` record type in a tldraw schema. Pass via\n * `commentSchemaRecords`; see `TLComment`.\n *\n * @public\n */\nexport const commentRecordConfig: CustomRecordInfo = {\n\tscope: 'document',\n\tmigrations: createCommentGuardMigrations('comment'),\n\tvalidator: T.object({\n\t\tid: idValidator<TLCommentId>('comment'),\n\t\ttypeName: T.literal('comment'),\n\t\tthreadId: idValidator<TLCommentThreadId>('comment-thread'),\n\t\tpageId: idValidator<TLPageId>('page'),\n\t\tauthorId: T.string,\n\t\tcreatedAt: T.number,\n\t\teditedAt: T.number.nullable(),\n\t\tbody: richTextValidator,\n\t\tmeta: T.jsonValue,\n\t}),\n}\n\n/**\n * The `records` map to pass to `createTLSchema` / the client `records` option so comment\n * threads and comments sync. Register both types together \u2014 a comment without its thread type\n * (or vice versa) will fail schema validation on one side of the connection.\n *\n * @public\n */\nexport const commentSchemaRecords = {\n\t'comment-thread': commentThreadRecordConfig,\n\tcomment: commentRecordConfig,\n}\n\n/** @public */\nexport function createCommentThreadId(id?: string): TLCommentThreadId {\n\treturn createCustomRecordId('comment-thread', id) as TLCommentThreadId\n}\n\n/** @public */\nexport function createCommentId(id?: string): TLCommentId {\n\treturn createCustomRecordId('comment', id) as TLCommentId\n}\n\n/**\n * Type guard for `TLCommentThreadId`. Note `isCommentId` does not accept these: the prefixes\n * are `comment-thread:` vs `comment:`, and the character after `comment` differs (`-` vs `:`),\n * so the two never overlap.\n *\n * @public\n */\nexport function isCommentThreadId(id: string): id is TLCommentThreadId {\n\treturn isCustomRecordId('comment-thread', id)\n}\n\n/**\n * Type guard for `TLCommentId`. See `isCommentThreadId` for why `comment-thread:...` ids are\n * correctly rejected here.\n *\n * @public\n */\nexport function isCommentId(id: string): id is TLCommentId {\n\treturn isCustomRecordId('comment', id)\n}\n\n/**\n * Create a new comment thread record. Pair with `createComment` for the thread's first message.\n *\n * @public\n */\nexport function createCommentThread(props: {\n\tpageId: TLPageId\n\tanchor: TLCommentAnchor\n\tcreatedBy: string\n\tnow?: number\n\tmeta?: JsonObject\n}): TLCommentThread {\n\treturn {\n\t\tid: createCommentThreadId(),\n\t\ttypeName: 'comment-thread',\n\t\tpageId: props.pageId,\n\t\tanchor: props.anchor,\n\t\tcreatedBy: props.createdBy,\n\t\tcreatedAt: props.now ?? Date.now(),\n\t\tresolved: null,\n\t\tmeta: props.meta ?? {},\n\t}\n}\n\n/**\n * Create a new comment record within a thread.\n *\n * @public\n */\nexport function createComment(props: {\n\tthreadId: TLCommentThreadId\n\tpageId: TLPageId\n\tauthorId: string\n\tbody: TLRichText\n\tnow?: number\n\tmeta?: JsonObject\n}): TLComment {\n\treturn {\n\t\tid: createCommentId(),\n\t\ttypeName: 'comment',\n\t\tthreadId: props.threadId,\n\t\tpageId: props.pageId,\n\t\tauthorId: props.authorId,\n\t\tcreatedAt: props.now ?? Date.now(),\n\t\teditedAt: null,\n\t\tbody: props.body,\n\t\tmeta: props.meta ?? {},\n\t}\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -68,6 +68,8 @@ const geoShapeProps = {
|
|
|
68
68
|
h: import_validate.T.nonZeroNumber,
|
|
69
69
|
growY: import_validate.T.positiveNumber,
|
|
70
70
|
scale: import_validate.T.nonZeroNumber,
|
|
71
|
+
flipX: import_validate.T.boolean,
|
|
72
|
+
flipY: import_validate.T.boolean,
|
|
71
73
|
// Text properties
|
|
72
74
|
labelColor: import_TLColorStyle.DefaultLabelColorStyle,
|
|
73
75
|
color: import_TLColorStyle.DefaultColorStyle,
|
|
@@ -89,7 +91,8 @@ const geoShapeVersions = (0, import_TLShape.createShapePropsMigrationIds)("geo",
|
|
|
89
91
|
MakeUrlsValid: 8,
|
|
90
92
|
AddScale: 9,
|
|
91
93
|
AddRichText: 10,
|
|
92
|
-
AddRichTextAttrs: 11
|
|
94
|
+
AddRichTextAttrs: 11,
|
|
95
|
+
AddFlipProps: 12
|
|
93
96
|
});
|
|
94
97
|
const geoShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)({
|
|
95
98
|
sequence: [
|
|
@@ -193,6 +196,17 @@ const geoShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)
|
|
|
193
196
|
delete props.richText.attrs;
|
|
194
197
|
}
|
|
195
198
|
}
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
id: geoShapeVersions.AddFlipProps,
|
|
202
|
+
up: (props) => {
|
|
203
|
+
props.flipX = false;
|
|
204
|
+
props.flipY = false;
|
|
205
|
+
},
|
|
206
|
+
down: (props) => {
|
|
207
|
+
delete props.flipX;
|
|
208
|
+
delete props.flipY;
|
|
209
|
+
}
|
|
196
210
|
}
|
|
197
211
|
]
|
|
198
212
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shapes/TLGeoShape.ts"],
|
|
4
|
-
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions }\n\n/**\n * Migration sequence for geo shape properties across different schema versions.\n * Handles evolution of geo shapes including URL support, label colors, alignment changes,\n * the transition from plain text to rich text, and support for attrs property on richText.\n *\n * @public\n */\nexport const geoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: geoShapeVersions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddLabelColor,\n\t\t\tup: (props) => {\n\t\t\t\tprops.labelColor = 'black'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.RemoveJustify,\n\t\t\tup: (props) => {\n\t\t\t\tif (props.align === 'justify') {\n\t\t\t\t\tprops.align = 'start'\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCheckBox,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddVerticalAlign,\n\t\t\tup: (props) => {\n\t\t\t\tprops.verticalAlign = 'middle'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MigrateLegacyAlign,\n\t\t\tup: (props) => {\n\t\t\t\tlet newAlign: TLDefaultHorizontalAlignStyle\n\t\t\t\tswitch (props.align) {\n\t\t\t\t\tcase 'start':\n\t\t\t\t\t\tnewAlign = 'start-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tcase 'end':\n\t\t\t\t\t\tnewAlign = 'end-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tnewAlign = 'middle-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tprops.align = newAlign\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCloud,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddScale,\n\t\t\tup: (props) => {\n\t\t\t\tprops.scale = 1\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.scale\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.richText = toRichText(props.text)\n\t\t\t\tdelete props.text\n\t\t\t},\n\t\t\t// N.B. Explicitly no down state so that we force clients to update.\n\t\t\t// down: (props) => {\n\t\t\t// \tdelete props.richText\n\t\t\t// },\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichTextAttrs,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop - attrs is optional so old records are valid\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\t// Remove attrs from richText when migrating down\n\t\t\t\tif (props.richText && 'attrs' in props.richText) {\n\t\t\t\t\tdelete props.richText.attrs\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t],\n})\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAClB,wBAA0D;AAC1D,qBAAgF;AAEhF,uBAA0B;AAC1B,0BAIO;AACP,yBAAqD;AACrD,yBAAqD;AACrD,yBAAqD;AACrD,oCAGO;AACP,yBAAqD;AACrD,kCAGO;AAkBA,MAAM,mBAAmB,2BAAU,WAAW,cAAc;AAAA,EAClE,cAAc;AAAA,EACd,QAAQ;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD,CAAC;
|
|
4
|
+
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\t/** Whether to mirror the shape horizontally */\n\tflipX: boolean\n\t/** Whether to mirror the shape vertically */\n\tflipY: boolean\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1,\n * flipX: false,\n * flipY: false\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\tflipX: T.boolean,\n\tflipY: T.boolean,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n\tAddFlipProps: 12,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions }\n\n/**\n * Migration sequence for geo shape properties across different schema versions.\n * Handles evolution of geo shapes including URL support, label colors, alignment changes,\n * the transition from plain text to rich text, and support for attrs property on richText.\n *\n * @public\n */\nexport const geoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: geoShapeVersions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddLabelColor,\n\t\t\tup: (props) => {\n\t\t\t\tprops.labelColor = 'black'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.RemoveJustify,\n\t\t\tup: (props) => {\n\t\t\t\tif (props.align === 'justify') {\n\t\t\t\t\tprops.align = 'start'\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCheckBox,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddVerticalAlign,\n\t\t\tup: (props) => {\n\t\t\t\tprops.verticalAlign = 'middle'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MigrateLegacyAlign,\n\t\t\tup: (props) => {\n\t\t\t\tlet newAlign: TLDefaultHorizontalAlignStyle\n\t\t\t\tswitch (props.align) {\n\t\t\t\t\tcase 'start':\n\t\t\t\t\t\tnewAlign = 'start-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tcase 'end':\n\t\t\t\t\t\tnewAlign = 'end-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tnewAlign = 'middle-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tprops.align = newAlign\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCloud,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddScale,\n\t\t\tup: (props) => {\n\t\t\t\tprops.scale = 1\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.scale\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.richText = toRichText(props.text)\n\t\t\t\tdelete props.text\n\t\t\t},\n\t\t\t// N.B. Explicitly no down state so that we force clients to update.\n\t\t\t// down: (props) => {\n\t\t\t// \tdelete props.richText\n\t\t\t// },\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichTextAttrs,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop - attrs is optional so old records are valid\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\t// Remove attrs from richText when migrating down\n\t\t\t\tif (props.richText && 'attrs' in props.richText) {\n\t\t\t\t\tdelete props.richText.attrs\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddFlipProps,\n\t\t\tup: (props) => {\n\t\t\t\tprops.flipX = false\n\t\t\t\tprops.flipY = false\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.flipX\n\t\t\t\tdelete props.flipY\n\t\t\t},\n\t\t},\n\t],\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/TLStore.mjs
CHANGED
|
@@ -6,6 +6,7 @@ import { TLINSTANCE_ID } from "./records/TLInstance.mjs";
|
|
|
6
6
|
import { PageRecordType } from "./records/TLPage.mjs";
|
|
7
7
|
import { InstancePageStateRecordType } from "./records/TLPageState.mjs";
|
|
8
8
|
import { PointerRecordType, TLPOINTER_ID } from "./records/TLPointer.mjs";
|
|
9
|
+
import { isShapeId } from "./records/TLShape.mjs";
|
|
9
10
|
function redactRecordForErrorReporting(record) {
|
|
10
11
|
if (record.typeName === "asset") {
|
|
11
12
|
if ("src" in record) {
|
|
@@ -64,6 +65,7 @@ function getDefaultPages() {
|
|
|
64
65
|
function createIntegrityChecker(store) {
|
|
65
66
|
const $pageIds = store.query.ids("page");
|
|
66
67
|
const $pageStates = store.query.records("instance_page_state");
|
|
68
|
+
const $shapes = store.query.records("shape");
|
|
67
69
|
const ensureStoreIsUsable = () => {
|
|
68
70
|
if (!store.has(TLDOCUMENT_ID)) {
|
|
69
71
|
store.put([DocumentRecordType.create({ id: TLDOCUMENT_ID, name: store.props.defaultName })]);
|
|
@@ -119,6 +121,11 @@ function createIntegrityChecker(store) {
|
|
|
119
121
|
if (missingCameraIds.size > 0) {
|
|
120
122
|
store.put([...missingCameraIds].map((id) => CameraRecordType.create({ id })));
|
|
121
123
|
}
|
|
124
|
+
const orphanedShapeIds = $shapes.get().filter((shape) => isShapeId(shape.parentId) && !store.has(shape.parentId)).map((shape) => shape.id);
|
|
125
|
+
if (orphanedShapeIds.length > 0) {
|
|
126
|
+
store.remove(orphanedShapeIds);
|
|
127
|
+
return ensureStoreIsUsable();
|
|
128
|
+
}
|
|
122
129
|
const pageStates = $pageStates.get();
|
|
123
130
|
for (const pageState of pageStates) {
|
|
124
131
|
if (!pageIds.has(pageState.pageId)) {
|
package/dist-esm/TLStore.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/TLStore.ts"],
|
|
4
|
-
"sourcesContent": ["import { Signal, computed } from '@tldraw/state'\nimport {\n\tSerializedStore,\n\tStore,\n\tStoreSchema,\n\tStoreSnapshot,\n\tStoreValidationFailure,\n} from '@tldraw/store'\nimport { IndexKey, JsonObject, annotateError, sortByIndex, structuredClone } from '@tldraw/utils'\nimport { TLAsset, TLAssetId } from './records/TLAsset'\nimport { CameraRecordType, TLCameraId } from './records/TLCamera'\nimport { DocumentRecordType, TLDOCUMENT_ID } from './records/TLDocument'\nimport { TLINSTANCE_ID } from './records/TLInstance'\nimport { PageRecordType, TLPageId } from './records/TLPage'\nimport { InstancePageStateRecordType, TLInstancePageStateId } from './records/TLPageState'\nimport { PointerRecordType, TLPOINTER_ID } from './records/TLPointer'\nimport { TLRecord } from './records/TLRecord'\nimport { TLUser } from './records/TLUser'\n\n/**\n * Redacts the source of an asset record for error reporting.\n *\n * @param record - The asset record to redact\n * @returns The redacted record\n * @internal\n */\nexport function redactRecordForErrorReporting(record: any) {\n\tif (record.typeName === 'asset') {\n\t\tif ('src' in record) {\n\t\t\trecord.src = '<redacted>'\n\t\t}\n\n\t\tif ('src' in record.props) {\n\t\t\trecord.props.src = '<redacted>'\n\t\t}\n\t}\n}\n\n/**\n * The complete schema type for a tldraw store, defining the structure and validation rules\n * for all tldraw records and store properties.\n *\n * @public\n * @example\n * ```ts\n * import { createTLSchema } from '@tldraw/tlschema'\n *\n * const schema = createTLSchema()\n * const storeSchema: TLStoreSchema = schema\n * ```\n */\nexport type TLStoreSchema = StoreSchema<TLRecord, TLStoreProps>\n\n/**\n * A serialized representation of a tldraw store that can be persisted or transmitted.\n * Contains all store records in a JSON-serializable format.\n *\n * @public\n * @example\n * ```ts\n * // Serialize a store\n * const serializedStore: TLSerializedStore = store.serialize()\n *\n * // Save to localStorage\n * localStorage.setItem('drawing', JSON.stringify(serializedStore))\n * ```\n */\nexport type TLSerializedStore = SerializedStore<TLRecord>\n\n/**\n * A snapshot of a tldraw store at a specific point in time, containing all records\n * and metadata. Used for persistence, synchronization, and creating store backups.\n *\n * @public\n * @example\n * ```ts\n * // Create a snapshot\n * const snapshot: TLStoreSnapshot = store.getSnapshot()\n *\n * // Restore from snapshot\n * store.loadSnapshot(snapshot)\n * ```\n */\nexport type TLStoreSnapshot = StoreSnapshot<TLRecord>\n\n/**\n * Context information provided when resolving asset URLs, containing details about\n * the current rendering environment and user's connection to optimize asset delivery.\n *\n * @public\n * @example\n * ```ts\n * const assetStore: TLAssetStore = {\n * async resolve(asset, context: TLAssetContext) {\n * // Use low resolution for slow connections\n * if (context.networkEffectiveType === 'slow-2g') {\n * return `${asset.props.src}?quality=low`\n * }\n * // Use high DPI version for retina displays\n * if (context.dpr > 1) {\n * return `${asset.props.src}@2x`\n * }\n * return asset.props.src\n * }\n * }\n * ```\n */\nexport interface TLAssetContext {\n\t/**\n\t * The scale at which the asset is being rendered on-screen relative to its native dimensions.\n\t * If the asset is 1000px wide, but it's been resized/zoom so it takes 500px on-screen, this\n\t * will be 0.5.\n\t *\n\t * The scale measures CSS pixels, not device pixels.\n\t */\n\tscreenScale: number\n\t/** The {@link TLAssetContext.screenScale}, stepped to the nearest power-of-2 multiple. */\n\tsteppedScreenScale: number\n\t/** The device pixel ratio - how many CSS pixels are in one device pixel? */\n\tdpr: number\n\t/**\n\t * An alias for\n\t * {@link https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType | `navigator.connection.effectiveType` }\n\t * if it's available in the current browser. Use this to e.g. serve lower-resolution images to\n\t * users on slow connections.\n\t */\n\tnetworkEffectiveType: string | null\n\t/**\n\t * In some circumstances, we need to resolve a URL that points to the original version of a\n\t * particular asset. This is used when the asset will leave the current tldraw instance - e.g.\n\t * for copy/paste, or exports.\n\t */\n\tshouldResolveToOriginal: boolean\n}\n\n/**\n * Interface for storing and managing assets (images, videos, etc.) in tldraw.\n * Provides methods for uploading, resolving, and removing assets from storage.\n *\n * A `TLAssetStore` sits alongside the main {@link TLStore} and is responsible for storing and\n * retrieving large assets such as images. Generally, this should be part of a wider sync system:\n *\n * - By default, the store is in-memory only, so `TLAssetStore` converts images to data URLs\n * - When using\n * {@link @tldraw/editor#TldrawEditorWithoutStoreProps.persistenceKey | `persistenceKey`}, the\n * store is synced to the browser's local IndexedDB, so `TLAssetStore` stores images there too\n * - When using a multiplayer sync server, you would implement `TLAssetStore` to upload images to\n * e.g. an S3 bucket.\n *\n * @public\n * @example\n * ```ts\n * // Simple in-memory asset store\n * const assetStore: TLAssetStore = {\n * async upload(asset, file) {\n * const dataUrl = await fileToDataUrl(file)\n * return { src: dataUrl }\n * },\n *\n * async resolve(asset, context) {\n * return asset.props.src\n * },\n *\n * async remove(assetIds) {\n * // Clean up if needed\n * }\n * }\n * ```\n */\nexport interface TLAssetStore {\n\t/**\n\t * Upload an asset to your storage, returning a URL that can be used to refer to the asset\n\t * long-term.\n\t *\n\t * @param asset - Information & metadata about the asset being uploaded\n\t * @param file - The `File` to be uploaded\n\t * @returns A promise that resolves to the URL of the uploaded asset\n\t */\n\tupload(\n\t\tasset: TLAsset,\n\t\tfile: File,\n\t\tabortSignal?: AbortSignal\n\t): Promise<{ src: string; meta?: JsonObject }>\n\t/**\n\t * Resolve an asset to a URL. This is used when rendering the asset in the editor. By default,\n\t * this will just use `asset.props.src`, the URL returned by `upload()`. This can be used to\n\t * rewrite that URL to add access credentials, or optimized the asset for how it's currently\n\t * being displayed using the {@link TLAssetContext | information provided}.\n\t *\n\t * @param asset - the asset being resolved\n\t * @param ctx - information about the current environment and where the asset is being used\n\t * @returns The URL of the resolved asset, or `null` if the asset is not available\n\t */\n\tresolve?(asset: TLAsset, ctx: TLAssetContext): Promise<string | null> | string | null\n\t/**\n\t * Remove an asset from storage. This is called when the asset is no longer needed, e.g. when\n\t * the user deletes it from the editor.\n\t * @param asset - the asset being removed\n\t * @returns A promise that resolves when the asset has been removed\n\t */\n\tremove?(assetIds: TLAssetId[]): Promise<void>\n}\n\n/**\n * Interface for resolving user information in tldraw.\n *\n * A `TLUserStore` sits alongside the main {@link TLStore} and provides user\n * resolution for attribution labels and display names. Implement this interface\n * to connect tldraw to your auth/user system.\n *\n * `currentUser` and `resolve` are reactive {@link @tldraw/state#Signal | Signals}\n * so that the editor can automatically track changes to user data and\n * re-render when a user's name, color, or avatar updates.\n *\n * Implementations should cache signals returned by `resolve` \u2014 e.g. return the\n * same `Signal` for repeated calls with the same `userId` \u2014 to avoid\n * unnecessary re-computation.\n *\n * @public\n * @example\n * ```ts\n * const currentUser = computed('currentUser', () =>\n * UserRecordType.create({\n * id: createUserId(myAuth.userId),\n * name: myAuth.displayName,\n * color: myAuth.color,\n * })\n * )\n *\n * const userStore: TLUserStore = {\n * currentUser,\n * resolve(userId) {\n * return computed('resolve-' + userId, () =>\n * myUserCache.get(userId) ?? null\n * )\n * },\n * }\n * ```\n */\nexport interface TLUserStore {\n\t/**\n\t * A signal resolving to the currently authenticated user,\n\t * or `null` for anonymous / unknown.\n\t * Read when stamping attribution on shape create/update.\n\t */\n\tcurrentUser: Signal<TLUser | null>\n\n\t/**\n\t * Return a signal resolving an arbitrary user ID to display info.\n\t * Called when rendering attribution labels for shapes that may have been\n\t * created or edited by someone else.\n\t * The signal's value should be `null` if the user cannot be resolved.\n\t */\n\tresolve?(userId: string): Signal<TLUser | null>\n}\n\n/**\n * Create a cached {@link TLUserStore.resolve} implementation.\n *\n * Wraps a reactive lookup function so that each `userId` gets a single\n * stable {@link @tldraw/state#Signal | Signal} that is reused across calls.\n * The `resolveFn` is evaluated inside a `computed`, so any `.get()` calls\n * it makes are automatically tracked.\n *\n * @param resolveFn - A function that resolves a raw user-ID string to a\n * {@link TLUser} or `null`. Called reactively inside a `computed`.\n * @returns A function suitable for use as `TLUserStore.resolve`.\n *\n * @example\n * ```ts\n * const users: TLUserStore = {\n * currentUser: currentUserSignal,\n * resolve: createCachedUserResolve(\n * (userId) => usersAtom.get()[createUserId(userId)] ?? null\n * ),\n * }\n * ```\n *\n * @public\n */\nexport function createCachedUserResolve(\n\tresolveFn: (userId: string) => TLUser | null\n): (userId: string) => Signal<TLUser | null> {\n\tconst cache = new Map<string, Signal<TLUser | null>>()\n\treturn (userId: string) => {\n\t\tlet signal = cache.get(userId)\n\t\tif (!signal) {\n\t\t\tsignal = computed('resolve-user-' + userId, () => resolveFn(userId))\n\t\t\tcache.set(userId, signal)\n\t\t}\n\t\treturn signal\n\t}\n}\n\n/**\n * Configuration properties for a tldraw store, defining its behavior and integrations.\n * These props are passed when creating a new store instance.\n *\n * @public\n * @example\n * ```ts\n * const storeProps: TLStoreProps = {\n * defaultName: 'My Drawing',\n * assets: myAssetStore,\n * onMount: (editor) => {\n * console.log('Editor mounted')\n * return () => console.log('Editor unmounted')\n * },\n * collaboration: {\n * status: statusSignal,\n * mode: modeSignal\n * }\n * }\n *\n * const store = new Store({ schema, props: storeProps })\n * ```\n */\nexport interface TLStoreProps {\n\t/** Default name for new documents created in this store */\n\tdefaultName: string\n\t/** Asset store implementation for handling file uploads and storage */\n\tassets: Required<TLAssetStore>\n\t/** User store implementation for user resolution and attribution */\n\tusers: Required<TLUserStore>\n\t/**\n\t * Called when an {@link @tldraw/editor#Editor} connected to this store is mounted.\n\t * Can optionally return a cleanup function that will be called when unmounted.\n\t *\n\t * @param editor - The editor instance that was mounted\n\t * @returns Optional cleanup function\n\t */\n\tonMount(editor: unknown): void | (() => void)\n\t/** Optional collaboration configuration for multiplayer features */\n\tcollaboration?: {\n\t\t/** Signal indicating online/offline collaboration status */\n\t\tstatus: Signal<'online' | 'offline'> | null\n\t\t/** Signal indicating collaboration mode permissions */\n\t\tmode?: Signal<'readonly' | 'readwrite'> | null\n\t}\n}\n\n/**\n * The main tldraw store type, representing a reactive database of tldraw records\n * with associated store properties. This is the central data structure that holds\n * all shapes, assets, pages, and user state.\n *\n * @public\n * @example\n * ```ts\n * import { Store } from '@tldraw/store'\n * import { createTLSchema } from '@tldraw/tlschema'\n *\n * const schema = createTLSchema()\n * const store: TLStore = new Store({\n * schema,\n * props: {\n * defaultName: 'Untitled',\n * assets: myAssetStore,\n * onMount: () => console.log('Store mounted')\n * }\n * })\n * ```\n */\nexport type TLStore = Store<TLRecord, TLStoreProps>\n\n/**\n * Default validation failure handler for tldraw stores. This function is called\n * when a record fails validation during store operations. It annotates errors\n * with debugging information and determines whether to allow invalid records\n * during store initialization.\n *\n * @param options - The validation failure details\n * - error - The validation error that occurred\n * - phase - The store operation phase when validation failed\n * - record - The invalid record that caused the failure\n * - recordBefore - The previous state of the record (if applicable)\n * @returns The record to use (typically throws the annotated error)\n * @throws The original validation error with additional debugging context\n *\n * @public\n * @example\n * ```ts\n * const store = new Store({\n * schema,\n * props: storeProps,\n * onValidationFailure // Use this as the validation failure handler\n * })\n *\n * // The handler will be called automatically when validation fails\n * try {\n * store.put([invalidRecord])\n * } catch (error) {\n * // Error will contain debugging information added by onValidationFailure\n * }\n * ```\n */\nexport function onValidationFailure({\n\terror,\n\tphase,\n\trecord,\n\trecordBefore,\n}: StoreValidationFailure<TLRecord>): TLRecord {\n\tconst isExistingValidationIssue =\n\t\t// if we're initializing the store for the first time, we should\n\t\t// allow invalid records so people can load old buggy data:\n\t\tphase === 'initialize'\n\n\tannotateError(error, {\n\t\ttags: {\n\t\t\torigin: 'store.validateRecord',\n\t\t\tstorePhase: phase,\n\t\t\tisExistingValidationIssue,\n\t\t},\n\t\textras: {\n\t\t\trecordBefore: recordBefore\n\t\t\t\t? redactRecordForErrorReporting(structuredClone(recordBefore))\n\t\t\t\t: undefined,\n\t\t\trecordAfter: redactRecordForErrorReporting(structuredClone(record)),\n\t\t},\n\t})\n\n\tthrow error\n}\n\nfunction getDefaultPages() {\n\treturn [\n\t\tPageRecordType.create({\n\t\t\tid: 'page:page' as TLPageId,\n\t\t\tname: 'Page 1',\n\t\t\tindex: 'a1' as IndexKey,\n\t\t\tmeta: {},\n\t\t}),\n\t]\n}\n\n/**\n * Creates an integrity checker function that ensures the tldraw store maintains\n * a consistent and usable state. The checker validates that required records exist\n * and relationships between records are maintained.\n *\n * The integrity checker ensures:\n * - Document and pointer records exist\n * - At least one page exists\n * - Instance state references valid pages\n * - Page states and cameras exist for all pages\n * - Shape references in page states are valid\n *\n * @param store - The tldraw store to check for integrity\n * @returns A function that when called, validates and fixes store integrity\n *\n * @internal\n * @example\n * ```ts\n * const checker = createIntegrityChecker(store)\n *\n * // Run integrity check (typically called automatically)\n * checker()\n *\n * // The checker will create missing records and fix invalid references\n * ```\n */\nexport function createIntegrityChecker(store: Store<TLRecord, TLStoreProps>): () => void {\n\tconst $pageIds = store.query.ids('page')\n\tconst $pageStates = store.query.records('instance_page_state')\n\n\tconst ensureStoreIsUsable = (): void => {\n\t\t// make sure we have exactly one document\n\t\tif (!store.has(TLDOCUMENT_ID)) {\n\t\t\tstore.put([DocumentRecordType.create({ id: TLDOCUMENT_ID, name: store.props.defaultName })])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\tif (!store.has(TLPOINTER_ID)) {\n\t\t\tstore.put([PointerRecordType.create({ id: TLPOINTER_ID })])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\t// make sure there is at least one page\n\t\tconst pageIds = $pageIds.get()\n\t\tif (pageIds.size === 0) {\n\t\t\tstore.put(getDefaultPages())\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\tconst getFirstPageId = () => [...pageIds].map((id) => store.get(id)!).sort(sortByIndex)[0].id!\n\n\t\t// make sure we have state for the current user's current tab\n\t\tconst instanceState = store.get(TLINSTANCE_ID)\n\t\tif (!instanceState) {\n\t\t\tstore.put([\n\t\t\t\tstore.schema.types.instance.create({\n\t\t\t\t\tid: TLINSTANCE_ID,\n\t\t\t\t\tcurrentPageId: getFirstPageId(),\n\t\t\t\t\texportBackground: true,\n\t\t\t\t}),\n\t\t\t])\n\n\t\t\treturn ensureStoreIsUsable()\n\t\t} else if (!pageIds.has(instanceState.currentPageId)) {\n\t\t\tstore.put([{ ...instanceState, currentPageId: getFirstPageId() }])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\t// make sure we have page states and cameras for all the pages\n\t\tconst missingPageStateIds = new Set<TLInstancePageStateId>()\n\t\tconst missingCameraIds = new Set<TLCameraId>()\n\t\tfor (const id of pageIds) {\n\t\t\tconst pageStateId = InstancePageStateRecordType.createId(id)\n\t\t\tconst pageState = store.get(pageStateId)\n\t\t\tif (!pageState) {\n\t\t\t\tmissingPageStateIds.add(pageStateId)\n\t\t\t}\n\t\t\tconst cameraId = CameraRecordType.createId(id)\n\t\t\tif (!store.has(cameraId)) {\n\t\t\t\tmissingCameraIds.add(cameraId)\n\t\t\t}\n\t\t}\n\n\t\tif (missingPageStateIds.size > 0) {\n\t\t\tstore.put(\n\t\t\t\t[...missingPageStateIds].map((id) =>\n\t\t\t\t\tInstancePageStateRecordType.create({\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tpageId: InstancePageStateRecordType.parseId(id) as TLPageId,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t}\n\n\t\tif (missingCameraIds.size > 0) {\n\t\t\tstore.put([...missingCameraIds].map((id) => CameraRecordType.create({ id })))\n\t\t}\n\n\t\tconst pageStates = $pageStates.get()\n\t\tfor (const pageState of pageStates) {\n\t\t\tif (!pageIds.has(pageState.pageId)) {\n\t\t\t\tstore.remove([pageState.id])\n\t\t\t\tcontinue\n\t\t\t}\n\t\t\tif (pageState.croppingShapeId && !store.has(pageState.croppingShapeId)) {\n\t\t\t\tstore.put([{ ...pageState, croppingShapeId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tif (pageState.focusedGroupId && !store.has(pageState.focusedGroupId)) {\n\t\t\t\tstore.put([{ ...pageState, focusedGroupId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tif (pageState.hoveredShapeId && !store.has(pageState.hoveredShapeId)) {\n\t\t\t\tstore.put([{ ...pageState, hoveredShapeId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredSelectedIds = pageState.selectedShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredSelectedIds.length !== pageState.selectedShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, selectedShapeIds: filteredSelectedIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredHintingIds = pageState.hintingShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredHintingIds.length !== pageState.hintingShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, hintingShapeIds: filteredHintingIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredErasingIds = pageState.erasingShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredErasingIds.length !== pageState.erasingShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, erasingShapeIds: filteredErasingIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t}\n\t}\n\n\treturn ensureStoreIsUsable\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAiB,gBAAgB;AAQjC,SAA+B,eAAe,aAAa,uBAAuB;AAElF,SAAS,wBAAoC;AAC7C,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,sBAAgC;AACzC,SAAS,mCAA0D;AACnE,SAAS,mBAAmB,oBAAoB;
|
|
4
|
+
"sourcesContent": ["import { Signal, computed } from '@tldraw/state'\nimport {\n\tSerializedStore,\n\tStore,\n\tStoreSchema,\n\tStoreSnapshot,\n\tStoreValidationFailure,\n} from '@tldraw/store'\nimport { IndexKey, JsonObject, annotateError, sortByIndex, structuredClone } from '@tldraw/utils'\nimport { TLAsset, TLAssetId } from './records/TLAsset'\nimport { CameraRecordType, TLCameraId } from './records/TLCamera'\nimport { DocumentRecordType, TLDOCUMENT_ID } from './records/TLDocument'\nimport { TLINSTANCE_ID } from './records/TLInstance'\nimport { PageRecordType, TLPageId } from './records/TLPage'\nimport { InstancePageStateRecordType, TLInstancePageStateId } from './records/TLPageState'\nimport { PointerRecordType, TLPOINTER_ID } from './records/TLPointer'\nimport { TLRecord } from './records/TLRecord'\nimport { isShapeId } from './records/TLShape'\nimport { TLUser } from './records/TLUser'\n\n/**\n * Redacts the source of an asset record for error reporting.\n *\n * @param record - The asset record to redact\n * @returns The redacted record\n * @internal\n */\nexport function redactRecordForErrorReporting(record: any) {\n\tif (record.typeName === 'asset') {\n\t\tif ('src' in record) {\n\t\t\trecord.src = '<redacted>'\n\t\t}\n\n\t\tif ('src' in record.props) {\n\t\t\trecord.props.src = '<redacted>'\n\t\t}\n\t}\n}\n\n/**\n * The complete schema type for a tldraw store, defining the structure and validation rules\n * for all tldraw records and store properties.\n *\n * @public\n * @example\n * ```ts\n * import { createTLSchema } from '@tldraw/tlschema'\n *\n * const schema = createTLSchema()\n * const storeSchema: TLStoreSchema = schema\n * ```\n */\nexport type TLStoreSchema = StoreSchema<TLRecord, TLStoreProps>\n\n/**\n * A serialized representation of a tldraw store that can be persisted or transmitted.\n * Contains all store records in a JSON-serializable format.\n *\n * @public\n * @example\n * ```ts\n * // Serialize a store\n * const serializedStore: TLSerializedStore = store.serialize()\n *\n * // Save to localStorage\n * localStorage.setItem('drawing', JSON.stringify(serializedStore))\n * ```\n */\nexport type TLSerializedStore = SerializedStore<TLRecord>\n\n/**\n * A snapshot of a tldraw store at a specific point in time, containing all records\n * and metadata. Used for persistence, synchronization, and creating store backups.\n *\n * @public\n * @example\n * ```ts\n * // Create a snapshot\n * const snapshot: TLStoreSnapshot = store.getSnapshot()\n *\n * // Restore from snapshot\n * store.loadSnapshot(snapshot)\n * ```\n */\nexport type TLStoreSnapshot = StoreSnapshot<TLRecord>\n\n/**\n * Context information provided when resolving asset URLs, containing details about\n * the current rendering environment and user's connection to optimize asset delivery.\n *\n * @public\n * @example\n * ```ts\n * const assetStore: TLAssetStore = {\n * async resolve(asset, context: TLAssetContext) {\n * // Use low resolution for slow connections\n * if (context.networkEffectiveType === 'slow-2g') {\n * return `${asset.props.src}?quality=low`\n * }\n * // Use high DPI version for retina displays\n * if (context.dpr > 1) {\n * return `${asset.props.src}@2x`\n * }\n * return asset.props.src\n * }\n * }\n * ```\n */\nexport interface TLAssetContext {\n\t/**\n\t * The scale at which the asset is being rendered on-screen relative to its native dimensions.\n\t * If the asset is 1000px wide, but it's been resized/zoom so it takes 500px on-screen, this\n\t * will be 0.5.\n\t *\n\t * The scale measures CSS pixels, not device pixels.\n\t */\n\tscreenScale: number\n\t/** The {@link TLAssetContext.screenScale}, stepped to the nearest power-of-2 multiple. */\n\tsteppedScreenScale: number\n\t/** The device pixel ratio - how many CSS pixels are in one device pixel? */\n\tdpr: number\n\t/**\n\t * An alias for\n\t * {@link https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType | `navigator.connection.effectiveType` }\n\t * if it's available in the current browser. Use this to e.g. serve lower-resolution images to\n\t * users on slow connections.\n\t */\n\tnetworkEffectiveType: string | null\n\t/**\n\t * In some circumstances, we need to resolve a URL that points to the original version of a\n\t * particular asset. This is used when the asset will leave the current tldraw instance - e.g.\n\t * for copy/paste, or exports.\n\t */\n\tshouldResolveToOriginal: boolean\n}\n\n/**\n * Interface for storing and managing assets (images, videos, etc.) in tldraw.\n * Provides methods for uploading, resolving, and removing assets from storage.\n *\n * A `TLAssetStore` sits alongside the main {@link TLStore} and is responsible for storing and\n * retrieving large assets such as images. Generally, this should be part of a wider sync system:\n *\n * - By default, the store is in-memory only, so `TLAssetStore` converts images to data URLs\n * - When using\n * {@link @tldraw/editor#TldrawEditorWithoutStoreProps.persistenceKey | `persistenceKey`}, the\n * store is synced to the browser's local IndexedDB, so `TLAssetStore` stores images there too\n * - When using a multiplayer sync server, you would implement `TLAssetStore` to upload images to\n * e.g. an S3 bucket.\n *\n * @public\n * @example\n * ```ts\n * // Simple in-memory asset store\n * const assetStore: TLAssetStore = {\n * async upload(asset, file) {\n * const dataUrl = await fileToDataUrl(file)\n * return { src: dataUrl }\n * },\n *\n * async resolve(asset, context) {\n * return asset.props.src\n * },\n *\n * async remove(assetIds) {\n * // Clean up if needed\n * }\n * }\n * ```\n */\nexport interface TLAssetStore {\n\t/**\n\t * Upload an asset to your storage, returning a URL that can be used to refer to the asset\n\t * long-term.\n\t *\n\t * @param asset - Information & metadata about the asset being uploaded\n\t * @param file - The `File` to be uploaded\n\t * @returns A promise that resolves to the URL of the uploaded asset\n\t */\n\tupload(\n\t\tasset: TLAsset,\n\t\tfile: File,\n\t\tabortSignal?: AbortSignal\n\t): Promise<{ src: string; meta?: JsonObject }>\n\t/**\n\t * Resolve an asset to a URL. This is used when rendering the asset in the editor. By default,\n\t * this will just use `asset.props.src`, the URL returned by `upload()`. This can be used to\n\t * rewrite that URL to add access credentials, or optimized the asset for how it's currently\n\t * being displayed using the {@link TLAssetContext | information provided}.\n\t *\n\t * @param asset - the asset being resolved\n\t * @param ctx - information about the current environment and where the asset is being used\n\t * @returns The URL of the resolved asset, or `null` if the asset is not available\n\t */\n\tresolve?(asset: TLAsset, ctx: TLAssetContext): Promise<string | null> | string | null\n\t/**\n\t * Remove an asset from storage. This is called when the asset is no longer needed, e.g. when\n\t * the user deletes it from the editor.\n\t * @param asset - the asset being removed\n\t * @returns A promise that resolves when the asset has been removed\n\t */\n\tremove?(assetIds: TLAssetId[]): Promise<void>\n}\n\n/**\n * Interface for resolving user information in tldraw.\n *\n * A `TLUserStore` sits alongside the main {@link TLStore} and provides user\n * resolution for attribution labels and display names. Implement this interface\n * to connect tldraw to your auth/user system.\n *\n * `currentUser` and `resolve` are reactive {@link @tldraw/state#Signal | Signals}\n * so that the editor can automatically track changes to user data and\n * re-render when a user's name, color, or avatar updates.\n *\n * Implementations should cache signals returned by `resolve` \u2014 e.g. return the\n * same `Signal` for repeated calls with the same `userId` \u2014 to avoid\n * unnecessary re-computation.\n *\n * @public\n * @example\n * ```ts\n * const currentUser = computed('currentUser', () =>\n * UserRecordType.create({\n * id: createUserId(myAuth.userId),\n * name: myAuth.displayName,\n * color: myAuth.color,\n * })\n * )\n *\n * const userStore: TLUserStore = {\n * currentUser,\n * resolve(userId) {\n * return computed('resolve-' + userId, () =>\n * myUserCache.get(userId) ?? null\n * )\n * },\n * }\n * ```\n */\nexport interface TLUserStore {\n\t/**\n\t * A signal resolving to the currently authenticated user,\n\t * or `null` for anonymous / unknown.\n\t * Read when stamping attribution on shape create/update.\n\t */\n\tcurrentUser: Signal<TLUser | null>\n\n\t/**\n\t * Return a signal resolving an arbitrary user ID to display info.\n\t * Called when rendering attribution labels for shapes that may have been\n\t * created or edited by someone else.\n\t * The signal's value should be `null` if the user cannot be resolved.\n\t */\n\tresolve?(userId: string): Signal<TLUser | null>\n}\n\n/**\n * Create a cached {@link TLUserStore.resolve} implementation.\n *\n * Wraps a reactive lookup function so that each `userId` gets a single\n * stable {@link @tldraw/state#Signal | Signal} that is reused across calls.\n * The `resolveFn` is evaluated inside a `computed`, so any `.get()` calls\n * it makes are automatically tracked.\n *\n * @param resolveFn - A function that resolves a raw user-ID string to a\n * {@link TLUser} or `null`. Called reactively inside a `computed`.\n * @returns A function suitable for use as `TLUserStore.resolve`.\n *\n * @example\n * ```ts\n * const users: TLUserStore = {\n * currentUser: currentUserSignal,\n * resolve: createCachedUserResolve(\n * (userId) => usersAtom.get()[createUserId(userId)] ?? null\n * ),\n * }\n * ```\n *\n * @public\n */\nexport function createCachedUserResolve(\n\tresolveFn: (userId: string) => TLUser | null\n): (userId: string) => Signal<TLUser | null> {\n\tconst cache = new Map<string, Signal<TLUser | null>>()\n\treturn (userId: string) => {\n\t\tlet signal = cache.get(userId)\n\t\tif (!signal) {\n\t\t\tsignal = computed('resolve-user-' + userId, () => resolveFn(userId))\n\t\t\tcache.set(userId, signal)\n\t\t}\n\t\treturn signal\n\t}\n}\n\n/**\n * Configuration properties for a tldraw store, defining its behavior and integrations.\n * These props are passed when creating a new store instance.\n *\n * @public\n * @example\n * ```ts\n * const storeProps: TLStoreProps = {\n * defaultName: 'My Drawing',\n * assets: myAssetStore,\n * onMount: (editor) => {\n * console.log('Editor mounted')\n * return () => console.log('Editor unmounted')\n * },\n * collaboration: {\n * status: statusSignal,\n * mode: modeSignal\n * }\n * }\n *\n * const store = new Store({ schema, props: storeProps })\n * ```\n */\nexport interface TLStoreProps {\n\t/** Default name for new documents created in this store */\n\tdefaultName: string\n\t/** Asset store implementation for handling file uploads and storage */\n\tassets: Required<TLAssetStore>\n\t/** User store implementation for user resolution and attribution */\n\tusers: Required<TLUserStore>\n\t/**\n\t * Called when an {@link @tldraw/editor#Editor} connected to this store is mounted.\n\t * Can optionally return a cleanup function that will be called when unmounted.\n\t *\n\t * @param editor - The editor instance that was mounted\n\t * @returns Optional cleanup function\n\t */\n\tonMount(editor: unknown): void | (() => void)\n\t/** Optional collaboration configuration for multiplayer features */\n\tcollaboration?: {\n\t\t/** Signal indicating online/offline collaboration status */\n\t\tstatus: Signal<'online' | 'offline'> | null\n\t\t/** Signal indicating collaboration mode permissions */\n\t\tmode?: Signal<'readonly' | 'readwrite'> | null\n\t}\n}\n\n/**\n * The main tldraw store type, representing a reactive database of tldraw records\n * with associated store properties. This is the central data structure that holds\n * all shapes, assets, pages, and user state.\n *\n * @public\n * @example\n * ```ts\n * import { Store } from '@tldraw/store'\n * import { createTLSchema } from '@tldraw/tlschema'\n *\n * const schema = createTLSchema()\n * const store: TLStore = new Store({\n * schema,\n * props: {\n * defaultName: 'Untitled',\n * assets: myAssetStore,\n * onMount: () => console.log('Store mounted')\n * }\n * })\n * ```\n */\nexport type TLStore = Store<TLRecord, TLStoreProps>\n\n/**\n * Default validation failure handler for tldraw stores. This function is called\n * when a record fails validation during store operations. It annotates errors\n * with debugging information and determines whether to allow invalid records\n * during store initialization.\n *\n * @param options - The validation failure details\n * - error - The validation error that occurred\n * - phase - The store operation phase when validation failed\n * - record - The invalid record that caused the failure\n * - recordBefore - The previous state of the record (if applicable)\n * @returns The record to use (typically throws the annotated error)\n * @throws The original validation error with additional debugging context\n *\n * @public\n * @example\n * ```ts\n * const store = new Store({\n * schema,\n * props: storeProps,\n * onValidationFailure // Use this as the validation failure handler\n * })\n *\n * // The handler will be called automatically when validation fails\n * try {\n * store.put([invalidRecord])\n * } catch (error) {\n * // Error will contain debugging information added by onValidationFailure\n * }\n * ```\n */\nexport function onValidationFailure({\n\terror,\n\tphase,\n\trecord,\n\trecordBefore,\n}: StoreValidationFailure<TLRecord>): TLRecord {\n\tconst isExistingValidationIssue =\n\t\t// if we're initializing the store for the first time, we should\n\t\t// allow invalid records so people can load old buggy data:\n\t\tphase === 'initialize'\n\n\tannotateError(error, {\n\t\ttags: {\n\t\t\torigin: 'store.validateRecord',\n\t\t\tstorePhase: phase,\n\t\t\tisExistingValidationIssue,\n\t\t},\n\t\textras: {\n\t\t\trecordBefore: recordBefore\n\t\t\t\t? redactRecordForErrorReporting(structuredClone(recordBefore))\n\t\t\t\t: undefined,\n\t\t\trecordAfter: redactRecordForErrorReporting(structuredClone(record)),\n\t\t},\n\t})\n\n\tthrow error\n}\n\nfunction getDefaultPages() {\n\treturn [\n\t\tPageRecordType.create({\n\t\t\tid: 'page:page' as TLPageId,\n\t\t\tname: 'Page 1',\n\t\t\tindex: 'a1' as IndexKey,\n\t\t\tmeta: {},\n\t\t}),\n\t]\n}\n\n/**\n * Creates an integrity checker function that ensures the tldraw store maintains\n * a consistent and usable state. The checker validates that required records exist\n * and relationships between records are maintained.\n *\n * The integrity checker ensures:\n * - Document and pointer records exist\n * - At least one page exists\n * - Instance state references valid pages\n * - Page states and cameras exist for all pages\n * - Shape references in page states are valid\n *\n * @param store - The tldraw store to check for integrity\n * @returns A function that when called, validates and fixes store integrity\n *\n * @internal\n * @example\n * ```ts\n * const checker = createIntegrityChecker(store)\n *\n * // Run integrity check (typically called automatically)\n * checker()\n *\n * // The checker will create missing records and fix invalid references\n * ```\n */\nexport function createIntegrityChecker(store: Store<TLRecord, TLStoreProps>): () => void {\n\tconst $pageIds = store.query.ids('page')\n\tconst $pageStates = store.query.records('instance_page_state')\n\tconst $shapes = store.query.records('shape')\n\n\tconst ensureStoreIsUsable = (): void => {\n\t\t// make sure we have exactly one document\n\t\tif (!store.has(TLDOCUMENT_ID)) {\n\t\t\tstore.put([DocumentRecordType.create({ id: TLDOCUMENT_ID, name: store.props.defaultName })])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\tif (!store.has(TLPOINTER_ID)) {\n\t\t\tstore.put([PointerRecordType.create({ id: TLPOINTER_ID })])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\t// make sure there is at least one page\n\t\tconst pageIds = $pageIds.get()\n\t\tif (pageIds.size === 0) {\n\t\t\tstore.put(getDefaultPages())\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\tconst getFirstPageId = () => [...pageIds].map((id) => store.get(id)!).sort(sortByIndex)[0].id!\n\n\t\t// make sure we have state for the current user's current tab\n\t\tconst instanceState = store.get(TLINSTANCE_ID)\n\t\tif (!instanceState) {\n\t\t\tstore.put([\n\t\t\t\tstore.schema.types.instance.create({\n\t\t\t\t\tid: TLINSTANCE_ID,\n\t\t\t\t\tcurrentPageId: getFirstPageId(),\n\t\t\t\t\texportBackground: true,\n\t\t\t\t}),\n\t\t\t])\n\n\t\t\treturn ensureStoreIsUsable()\n\t\t} else if (!pageIds.has(instanceState.currentPageId)) {\n\t\t\tstore.put([{ ...instanceState, currentPageId: getFirstPageId() }])\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\t// make sure we have page states and cameras for all the pages\n\t\tconst missingPageStateIds = new Set<TLInstancePageStateId>()\n\t\tconst missingCameraIds = new Set<TLCameraId>()\n\t\tfor (const id of pageIds) {\n\t\t\tconst pageStateId = InstancePageStateRecordType.createId(id)\n\t\t\tconst pageState = store.get(pageStateId)\n\t\t\tif (!pageState) {\n\t\t\t\tmissingPageStateIds.add(pageStateId)\n\t\t\t}\n\t\t\tconst cameraId = CameraRecordType.createId(id)\n\t\t\tif (!store.has(cameraId)) {\n\t\t\t\tmissingCameraIds.add(cameraId)\n\t\t\t}\n\t\t}\n\n\t\tif (missingPageStateIds.size > 0) {\n\t\t\tstore.put(\n\t\t\t\t[...missingPageStateIds].map((id) =>\n\t\t\t\t\tInstancePageStateRecordType.create({\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tpageId: InstancePageStateRecordType.parseId(id) as TLPageId,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t}\n\n\t\tif (missingCameraIds.size > 0) {\n\t\t\tstore.put([...missingCameraIds].map((id) => CameraRecordType.create({ id })))\n\t\t}\n\n\t\t// remove any shape whose parent is another shape that no longer exists. This can happen\n\t\t// when a change is undone that references a shape (e.g. a frame) which has since been\n\t\t// deleted by another collaborator: the undo would otherwise leave a shape parented to a\n\t\t// record that doesn't exist. Such a shape has no valid place in the hierarchy, so we\n\t\t// discard it. Removing a shape can orphan its own children, which the re-run then handles.\n\t\tconst orphanedShapeIds = $shapes\n\t\t\t.get()\n\t\t\t.filter((shape) => isShapeId(shape.parentId) && !store.has(shape.parentId))\n\t\t\t.map((shape) => shape.id)\n\t\tif (orphanedShapeIds.length > 0) {\n\t\t\tstore.remove(orphanedShapeIds)\n\t\t\treturn ensureStoreIsUsable()\n\t\t}\n\n\t\tconst pageStates = $pageStates.get()\n\t\tfor (const pageState of pageStates) {\n\t\t\tif (!pageIds.has(pageState.pageId)) {\n\t\t\t\tstore.remove([pageState.id])\n\t\t\t\tcontinue\n\t\t\t}\n\t\t\tif (pageState.croppingShapeId && !store.has(pageState.croppingShapeId)) {\n\t\t\t\tstore.put([{ ...pageState, croppingShapeId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tif (pageState.focusedGroupId && !store.has(pageState.focusedGroupId)) {\n\t\t\t\tstore.put([{ ...pageState, focusedGroupId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tif (pageState.hoveredShapeId && !store.has(pageState.hoveredShapeId)) {\n\t\t\t\tstore.put([{ ...pageState, hoveredShapeId: null }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredSelectedIds = pageState.selectedShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredSelectedIds.length !== pageState.selectedShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, selectedShapeIds: filteredSelectedIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredHintingIds = pageState.hintingShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredHintingIds.length !== pageState.hintingShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, hintingShapeIds: filteredHintingIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t\tconst filteredErasingIds = pageState.erasingShapeIds.filter((id) => store.has(id))\n\t\t\tif (filteredErasingIds.length !== pageState.erasingShapeIds.length) {\n\t\t\t\tstore.put([{ ...pageState, erasingShapeIds: filteredErasingIds }])\n\t\t\t\treturn ensureStoreIsUsable()\n\t\t\t}\n\t\t}\n\t}\n\n\treturn ensureStoreIsUsable\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|