New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@tldraw/file-format

Package Overview
Dependencies
Maintainers
4
Versions
260
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tldraw/file-format - npm Package Compare versions

Comparing version 2.0.0-canary.b86c751b0362 to 2.0.0-canary.b88a2370b314

5

dist-cjs/index.d.ts

@@ -5,2 +5,3 @@ import { Editor } from '@tldraw/editor';

import { SerializedSchema } from '@tldraw/store';
import { TLSchema } from '@tldraw/editor';
import { TLStore } from '@tldraw/editor';

@@ -109,4 +110,4 @@ import { TLUiToastsContextType } from '@tldraw/ui';

/** @public */
export declare function parseTldrawJsonFile({ json, store, }: {
store: TLStore;
export declare function parseTldrawJsonFile({ json, schema, }: {
schema: TLSchema;
json: string;

@@ -113,0 +114,0 @@ }): Result<TLStore, TldrawFileParseError>;

309

dist-cjs/lib/buildFromV1Document.js

@@ -41,3 +41,3 @@ "use strict";

switch (v1Asset.type) {
case TDAssetType.Image: {
case "image" /* Image */: {
const assetId = import_editor.AssetRecordType.createId();

@@ -62,3 +62,3 @@ v1AssetIdsToV2AssetIds.set(v1Asset.id, assetId);

}
case TDAssetType.Video:
case "video" /* Video */:
{

@@ -102,3 +102,3 @@ const assetId = import_editor.AssetRecordType.createId();

v1Shapes.forEach((v1Shape) => {
if (v1Shape.type !== TDShapeType.Group)
if (v1Shape.type !== "group" /* Group */)
return;

@@ -118,3 +118,3 @@ const shapeId = (0, import_editor.createShapeId)();

v1Shapes.forEach((v1Shape) => {
if (v1Shape.type === TDShapeType.Group) {
if (v1Shape.type === "group" /* Group */) {
return;

@@ -141,36 +141,38 @@ }

switch (v1Shape.type) {
case TDShapeType.Sticky: {
const partial = {
...inCommon,
type: "note",
props: {
text: v1Shape.text ?? "",
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign)
case "sticky" /* Sticky */: {
editor.createShapes([
{
...inCommon,
type: "note",
props: {
text: v1Shape.text ?? "",
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign)
}
}
};
editor.createShapes([partial]);
]);
break;
}
case TDShapeType.Rectangle: {
const partial = {
...inCommon,
type: "geo",
props: {
geo: "rectangle",
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
text: v1Shape.label ?? "",
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
case "rectangle" /* Rectangle */: {
editor.createShapes([
{
...inCommon,
type: "geo",
props: {
geo: "rectangle",
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
text: v1Shape.label ?? "",
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
}
}
};
editor.createShapes([partial]);
]);
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id);

@@ -208,20 +210,21 @@ editor.updateShapes([

}
case TDShapeType.Triangle: {
const partial = {
...inCommon,
type: "geo",
props: {
geo: "triangle",
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
case "triangle" /* Triangle */: {
editor.createShapes([
{
...inCommon,
type: "geo",
props: {
geo: "triangle",
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
}
}
};
editor.createShapes([partial]);
]);
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id);

@@ -259,20 +262,21 @@ editor.updateShapes([

}
case TDShapeType.Ellipse: {
const partial = {
...inCommon,
type: "geo",
props: {
geo: "ellipse",
w: coerceDimension(v1Shape.radius[0]) * 2,
h: coerceDimension(v1Shape.radius[1]) * 2,
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
case "ellipse" /* Ellipse */: {
editor.createShapes([
{
...inCommon,
type: "geo",
props: {
geo: "ellipse",
w: coerceDimension(v1Shape.radius[0]) * 2,
h: coerceDimension(v1Shape.radius[1]) * 2,
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: "middle"
}
}
};
editor.createShapes([partial]);
]);
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id);

@@ -310,3 +314,3 @@ editor.updateShapes([

}
case TDShapeType.Draw: {
case "draw" /* Draw */: {
if (v1Shape.points.length === 0) {

@@ -316,19 +320,20 @@ decideNotToCreateShape(v1Shape);

}
const partial = {
...inCommon,
type: "draw",
props: {
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
dash: getV2Dash(v1Shape.style.dash),
isPen: false,
isComplete: v1Shape.isComplete,
segments: [{ type: "free", points: v1Shape.points.map(getV2Point) }]
editor.createShapes([
{
...inCommon,
type: "draw",
props: {
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
dash: getV2Dash(v1Shape.style.dash),
isPen: false,
isComplete: v1Shape.isComplete,
segments: [{ type: "free", points: v1Shape.points.map(getV2Point) }]
}
}
};
editor.createShapes([partial]);
]);
break;
}
case TDShapeType.Arrow: {
case "arrow" /* Arrow */: {
const v1Bend = coerceNumber(v1Shape.bend);

@@ -339,47 +344,49 @@ const v1Start = getV2Point(v1Shape.handles.start.point);

const v2Bend = dist * -v1Bend / 2;
const partial = {
...inCommon,
type: "arrow",
props: {
text: v1Shape.label ?? "",
color: getV2Color(v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
start: {
type: "point",
x: coerceNumber(v1Shape.handles.start.point[0]),
y: coerceNumber(v1Shape.handles.start.point[1])
},
end: {
type: "point",
x: coerceNumber(v1Shape.handles.end.point[0]),
y: coerceNumber(v1Shape.handles.end.point[1])
},
bend: v2Bend
editor.createShapes([
{
...inCommon,
type: "arrow",
props: {
text: v1Shape.label ?? "",
color: getV2Color(v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
start: {
type: "point",
x: coerceNumber(v1Shape.handles.start.point[0]),
y: coerceNumber(v1Shape.handles.start.point[1])
},
end: {
type: "point",
x: coerceNumber(v1Shape.handles.end.point[0]),
y: coerceNumber(v1Shape.handles.end.point[1])
},
bend: v2Bend
}
}
};
editor.createShapes([partial]);
]);
break;
}
case TDShapeType.Text: {
const partial = {
...inCommon,
type: "text",
props: {
text: v1Shape.text ?? " ",
color: getV2Color(v1Shape.style.color),
size: getV2TextSize(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
scale: v1Shape.style.scale ?? 1
case "text" /* Text */: {
editor.createShapes([
{
...inCommon,
type: "text",
props: {
text: v1Shape.text ?? " ",
color: getV2Color(v1Shape.style.color),
size: getV2TextSize(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
scale: v1Shape.style.scale ?? 1
}
}
};
editor.createShapes([partial]);
]);
break;
}
case TDShapeType.Image: {
case "image" /* Image */: {
const assetId = v1AssetIdsToV2AssetIds.get(v1Shape.assetId);

@@ -390,15 +397,16 @@ if (!assetId) {

}
const partial = {
...inCommon,
type: "image",
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId
editor.createShapes([
{
...inCommon,
type: "image",
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId
}
}
};
editor.createShapes([partial]);
]);
break;
}
case TDShapeType.Video: {
case "video" /* Video */: {
const assetId = v1AssetIdsToV2AssetIds.get(v1Shape.assetId);

@@ -409,12 +417,13 @@ if (!assetId) {

}
const partial = {
...inCommon,
type: "video",
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId
editor.createShapes([
{
...inCommon,
type: "video",
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId
}
}
};
editor.createShapes([partial]);
]);
break;

@@ -441,3 +450,3 @@ }

v1Shapes.forEach((v1Shape) => {
if (v1Shape.type !== TDShapeType.Arrow) {
if (v1Shape.type !== "arrow" /* Arrow */) {
return;

@@ -531,3 +540,3 @@ }

});
const newAsset = await editor.onCreateAssetFromFile(file);
const newAsset = await editor.externalContentManager.createAssetFromFile(editor, file);
if (newAsset.type === "bookmark")

@@ -564,3 +573,3 @@ return;

}
if (shape.type === TDShapeType.Group && children) {
if (shape.type === "group" /* Group */ && children) {
children.forEach((childId) => {

@@ -583,6 +592,6 @@ if (!page.shapes[childId]) {

Object.values(document.pages).forEach((page) => {
Object.values(page.shapes).filter((shape) => shape.type === TDShapeType.Text).forEach((shape) => {
Object.values(page.shapes).filter((shape) => shape.type === "text" /* Text */).forEach((shape) => {
if (shape.style.font === void 0) {
;
shape.style.font === FontStyle.Script;
shape.style.font === "script" /* Script */;
}

@@ -603,3 +612,3 @@ });

});
if (shape.type === TDShapeType.Arrow) {
if (shape.type === "arrow" /* Arrow */) {
if (shape.decorations) {

@@ -610,3 +619,3 @@ Object.entries(shape.decorations).forEach(([id, decoration]) => {

...shape.decorations,
[id]: Decoration.Arrow
[id]: "arrow" /* Arrow */
};

@@ -629,3 +638,3 @@ }

if (version < 15.2) {
if ((shape.type === TDShapeType.Image || shape.type === TDShapeType.Video) && shape.style.isFilled == null) {
if ((shape.type === "image" /* Image */ || shape.type === "video" /* Video */) && shape.style.isFilled == null) {
shape.style.isFilled = true;

@@ -635,3 +644,3 @@ }

if (version < 15.3) {
if (shape.type === TDShapeType.Rectangle || shape.type === TDShapeType.Triangle || shape.type === TDShapeType.Ellipse || shape.type === TDShapeType.Arrow) {
if (shape.type === "rectangle" /* Rectangle */ || shape.type === "triangle" /* Triangle */ || shape.type === "ellipse" /* Ellipse */ || shape.type === "arrow" /* Arrow */) {
if ("text" in shape && typeof shape.text === "string") {

@@ -638,0 +647,0 @@ shape.label = shape.text;

9

dist-cjs/lib/file.js

@@ -71,3 +71,3 @@ "use strict";

json,
store
schema
}) {

@@ -96,3 +96,3 @@ let data;

const storeSnapshot = Object.fromEntries(data.records.map((r) => [r.id, r]));
migrationResult = store.schema.migrateStoreSnapshot(storeSnapshot, data.schema);
migrationResult = schema.migrateStoreSnapshot(storeSnapshot, data.schema);
} catch (e) {

@@ -107,3 +107,4 @@ return import_utils.Result.err({ type: "invalidRecords", cause: e });

(0, import_editor.createTLStore)({
initialData: migrationResult.value
initialData: migrationResult.value,
schema
})

@@ -163,3 +164,3 @@ );

const parseFileResult = parseTldrawJsonFile({
store: (0, import_editor.createTLStore)(),
schema: editor.store.schema,
json: document

@@ -166,0 +167,0 @@ });

14

package.json
{
"name": "@tldraw/file-format",
"description": "A tiny little drawing app (file-format).",
"version": "2.0.0-canary.b86c751b0362",
"version": "2.0.0-canary.b88a2370b314",
"packageManager": "yarn@3.5.0",

@@ -45,8 +45,8 @@ "author": {

"dependencies": {
"@tldraw/editor": "2.0.0-canary.b86c751b0362",
"@tldraw/primitives": "2.0.0-canary.b86c751b0362",
"@tldraw/store": "2.0.0-canary.b86c751b0362",
"@tldraw/ui": "2.0.0-canary.b86c751b0362",
"@tldraw/utils": "2.0.0-canary.b86c751b0362",
"@tldraw/validate": "2.0.0-canary.b86c751b0362"
"@tldraw/editor": "2.0.0-canary.b88a2370b314",
"@tldraw/primitives": "2.0.0-canary.b88a2370b314",
"@tldraw/store": "2.0.0-canary.b88a2370b314",
"@tldraw/ui": "2.0.0-canary.b88a2370b314",
"@tldraw/utils": "2.0.0-canary.b88a2370b314",
"@tldraw/validate": "2.0.0-canary.b88a2370b314"
},

@@ -53,0 +53,0 @@ "jest": {

317

src/lib/buildFromV1Document.ts

@@ -7,12 +7,13 @@ import {

PageRecordType,
TLAlignType,
TLArrowShape,
TLArrowTerminal,
TLArrowheadType,
TLArrowShapeArrowheadStyle,
TLArrowShapeTerminal,
TLAsset,
TLAssetId,
TLColorType,
TLDashType,
TLDefaultColorStyle,
TLDefaultDashStyle,
TLDefaultFontStyle,
TLDefaultHorizontalAlignStyle,
TLDefaultSizeStyle,
TLDrawShape,
TLFontType,
TLGeoShape,

@@ -23,4 +24,2 @@ TLImageShape,

TLShapeId,
TLShapePartial,
TLSizeType,
TLTextShape,

@@ -187,38 +186,38 @@ TLVideoShape,

case TDShapeType.Sticky: {
const partial: TLShapePartial<TLNoteShape> = {
...inCommon,
type: 'note',
props: {
text: v1Shape.text ?? '',
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
editor.createShapes<TLNoteShape>([
{
...inCommon,
type: 'note',
props: {
text: v1Shape.text ?? '',
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
},
},
}
editor.createShapes([partial])
])
break
}
case TDShapeType.Rectangle: {
const partial: TLShapePartial<TLGeoShape> = {
...inCommon,
type: 'geo',
props: {
geo: 'rectangle',
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
text: v1Shape.label ?? '',
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
editor.createShapes<TLGeoShape>([
{
...inCommon,
type: 'geo',
props: {
geo: 'rectangle',
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
text: v1Shape.label ?? '',
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
},
},
}
])
editor.createShapes([partial])
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!

@@ -260,21 +259,21 @@

case TDShapeType.Triangle: {
const partial: TLShapePartial<TLGeoShape> = {
...inCommon,
type: 'geo',
props: {
geo: 'triangle',
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
editor.createShapes<TLGeoShape>([
{
...inCommon,
type: 'geo',
props: {
geo: 'triangle',
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
},
},
}
])
editor.createShapes([partial])
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!

@@ -316,21 +315,21 @@

case TDShapeType.Ellipse: {
const partial: TLShapePartial<TLGeoShape> = {
...inCommon,
type: 'geo',
props: {
geo: 'ellipse',
w: coerceDimension(v1Shape.radius[0]) * 2,
h: coerceDimension(v1Shape.radius[1]) * 2,
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
editor.createShapes<TLGeoShape>([
{
...inCommon,
type: 'geo',
props: {
geo: 'ellipse',
w: coerceDimension(v1Shape.radius[0]) * 2,
h: coerceDimension(v1Shape.radius[1]) * 2,
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
align: 'middle',
},
},
}
])
editor.createShapes([partial])
const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!

@@ -378,17 +377,17 @@

const partial: TLShapePartial<TLDrawShape> = {
...inCommon,
type: 'draw',
props: {
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
dash: getV2Dash(v1Shape.style.dash),
isPen: false,
isComplete: v1Shape.isComplete,
segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
editor.createShapes<TLDrawShape>([
{
...inCommon,
type: 'draw',
props: {
fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
color: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
dash: getV2Dash(v1Shape.style.dash),
isPen: false,
isComplete: v1Shape.isComplete,
segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
},
},
}
editor.createShapes([partial])
])
break

@@ -404,47 +403,47 @@ }

// Could also be a line... but we'll use it as an arrow anyway
const partial: TLShapePartial<TLArrowShape> = {
...inCommon,
type: 'arrow',
props: {
text: v1Shape.label ?? '',
color: getV2Color(v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
start: {
type: 'point',
x: coerceNumber(v1Shape.handles.start.point[0]),
y: coerceNumber(v1Shape.handles.start.point[1]),
editor.createShapes<TLArrowShape>([
{
...inCommon,
type: 'arrow',
props: {
text: v1Shape.label ?? '',
color: getV2Color(v1Shape.style.color),
labelColor: getV2Color(v1Shape.style.color),
size: getV2Size(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
dash: getV2Dash(v1Shape.style.dash),
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
start: {
type: 'point',
x: coerceNumber(v1Shape.handles.start.point[0]),
y: coerceNumber(v1Shape.handles.start.point[1]),
},
end: {
type: 'point',
x: coerceNumber(v1Shape.handles.end.point[0]),
y: coerceNumber(v1Shape.handles.end.point[1]),
},
bend: v2Bend,
},
end: {
type: 'point',
x: coerceNumber(v1Shape.handles.end.point[0]),
y: coerceNumber(v1Shape.handles.end.point[1]),
},
bend: v2Bend,
},
}
])
editor.createShapes([partial])
break
}
case TDShapeType.Text: {
const partial: TLShapePartial<TLTextShape> = {
...inCommon,
type: 'text',
props: {
text: v1Shape.text ?? ' ',
color: getV2Color(v1Shape.style.color),
size: getV2TextSize(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
scale: v1Shape.style.scale ?? 1,
editor.createShapes<TLTextShape>([
{
...inCommon,
type: 'text',
props: {
text: v1Shape.text ?? ' ',
color: getV2Color(v1Shape.style.color),
size: getV2TextSize(v1Shape.style.size),
font: getV2Font(v1Shape.style.font),
align: getV2Align(v1Shape.style.textAlign),
scale: v1Shape.style.scale ?? 1,
},
},
}
editor.createShapes([partial])
])
break

@@ -460,13 +459,13 @@ }

const partial: TLShapePartial<TLImageShape> = {
...inCommon,
type: 'image',
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId,
editor.createShapes<TLImageShape>([
{
...inCommon,
type: 'image',
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId,
},
},
}
editor.createShapes([partial])
])
break

@@ -482,13 +481,13 @@ }

const partial: TLShapePartial<TLVideoShape> = {
...inCommon,
type: 'video',
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId,
editor.createShapes<TLVideoShape>([
{
...inCommon,
type: 'video',
props: {
w: coerceDimension(v1Shape.size[0]),
h: coerceDimension(v1Shape.size[1]),
assetId,
},
},
}
editor.createShapes([partial])
])
break

@@ -576,3 +575,3 @@ }

if (change.props?.[handleId]) {
const terminal = change.props?.[handleId] as TLArrowTerminal
const terminal = change.props?.[handleId] as TLArrowShapeTerminal
if (terminal.type === 'binding') {

@@ -642,3 +641,3 @@ terminal.isExact = binding.distance === 0

const newAsset = await editor.onCreateAssetFromFile(file)
const newAsset = await editor.externalContentManager.createAssetFromFile(editor, file)
if (newAsset.type === 'bookmark') return

@@ -1091,3 +1090,3 @@

const v1ColorsToV2Colors: Record<ColorStyle, TLColorType> = {
const v1ColorsToV2Colors: Record<ColorStyle, TLDefaultColorStyle> = {
[ColorStyle.White]: 'black',

@@ -1107,3 +1106,3 @@ [ColorStyle.Black]: 'black',

const v1FontsToV2Fonts: Record<FontStyle, TLFontType> = {
const v1FontsToV2Fonts: Record<FontStyle, TLDefaultFontStyle> = {
[FontStyle.Mono]: 'mono',

@@ -1115,3 +1114,3 @@ [FontStyle.Sans]: 'sans',

const v1AlignsToV2Aligns: Record<AlignStyle, TLAlignType> = {
const v1AlignsToV2Aligns: Record<AlignStyle, TLDefaultHorizontalAlignStyle> = {
[AlignStyle.Start]: 'start',

@@ -1123,3 +1122,3 @@ [AlignStyle.Middle]: 'middle',

const v1TextSizesToV2TextSizes: Record<SizeStyle, TLSizeType> = {
const v1TextSizesToV2TextSizes: Record<SizeStyle, TLDefaultSizeStyle> = {
[SizeStyle.Small]: 's',

@@ -1130,3 +1129,3 @@ [SizeStyle.Medium]: 'l',

const v1SizesToV2Sizes: Record<SizeStyle, TLSizeType> = {
const v1SizesToV2Sizes: Record<SizeStyle, TLDefaultSizeStyle> = {
[SizeStyle.Small]: 'm',

@@ -1137,3 +1136,3 @@ [SizeStyle.Medium]: 'l',

const v1DashesToV2Dashes: Record<DashStyle, TLDashType> = {
const v1DashesToV2Dashes: Record<DashStyle, TLDefaultDashStyle> = {
[DashStyle.Solid]: 'solid',

@@ -1145,23 +1144,23 @@ [DashStyle.Dashed]: 'dashed',

function getV2Color(color: ColorStyle | undefined): TLColorType {
function getV2Color(color: ColorStyle | undefined): TLDefaultColorStyle {
return color ? v1ColorsToV2Colors[color] ?? 'black' : 'black'
}
function getV2Font(font: FontStyle | undefined): TLFontType {
function getV2Font(font: FontStyle | undefined): TLDefaultFontStyle {
return font ? v1FontsToV2Fonts[font] ?? 'draw' : 'draw'
}
function getV2Align(align: AlignStyle | undefined): TLAlignType {
function getV2Align(align: AlignStyle | undefined): TLDefaultHorizontalAlignStyle {
return align ? v1AlignsToV2Aligns[align] ?? 'middle' : 'middle'
}
function getV2TextSize(size: SizeStyle | undefined): TLSizeType {
function getV2TextSize(size: SizeStyle | undefined): TLDefaultSizeStyle {
return size ? v1TextSizesToV2TextSizes[size] ?? 'm' : 'm'
}
function getV2Size(size: SizeStyle | undefined): TLSizeType {
function getV2Size(size: SizeStyle | undefined): TLDefaultSizeStyle {
return size ? v1SizesToV2Sizes[size] ?? 'l' : 'l'
}
function getV2Dash(dash: DashStyle | undefined): TLDashType {
function getV2Dash(dash: DashStyle | undefined): TLDefaultDashStyle {
return dash ? v1DashesToV2Dashes[dash] ?? 'draw' : 'draw'

@@ -1178,3 +1177,3 @@ }

function getV2Arrowhead(decoration: Decoration | undefined): TLArrowheadType {
function getV2Arrowhead(decoration: Decoration | undefined): TLArrowShapeArrowheadStyle {
return decoration === Decoration.Arrow ? 'arrow' : 'none'

@@ -1181,0 +1180,0 @@ }

10

src/lib/file.ts

@@ -8,2 +8,3 @@ import {

TLRecord,
TLSchema,
TLStore,

@@ -86,5 +87,5 @@ } from '@tldraw/editor'

json,
store,
schema,
}: {
store: TLStore
schema: TLSchema
json: string

@@ -126,3 +127,3 @@ }): Result<TLStore, TldrawFileParseError> {

const storeSnapshot = Object.fromEntries(data.records.map((r) => [r.id, r as TLRecord]))
migrationResult = store.schema.migrateStoreSnapshot(storeSnapshot, data.schema)
migrationResult = schema.migrateStoreSnapshot(storeSnapshot, data.schema)
} catch (e) {

@@ -144,2 +145,3 @@ // junk data in the migration

initialData: migrationResult.value,
schema,
})

@@ -223,3 +225,3 @@ )

const parseFileResult = parseTldrawJsonFile({
store: createTLStore(),
schema: editor.store.schema,
json: document,

@@ -226,0 +228,0 @@ })

26

src/test/file.test.ts

@@ -1,2 +0,2 @@

import { createShapeId, createTLStore, TLStore } from '@tldraw/editor'
import { createShapeId, createTLStore, defaultShapes, TLStore } from '@tldraw/editor'
import { MigrationFailureReason, UnknownRecord } from '@tldraw/store'

@@ -6,8 +6,6 @@ import { assert } from '@tldraw/utils'

const parseTldrawJsonFile = (store: TLStore, json: string) =>
_parseTldrawJsonFile({
store,
json,
})
const schema = createTLStore({ shapes: defaultShapes }).schema
const parseTldrawJsonFile = (store: TLStore, json: string) => _parseTldrawJsonFile({ schema, json })
function serialize(file: TldrawFile): string {

@@ -19,3 +17,3 @@ return JSON.stringify(file)

it('returns an error if the file is not json', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(store, 'not json')

@@ -27,3 +25,3 @@ assert(!result.ok)

it("returns an error if the file doesn't look like a tldraw file", () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(store, JSON.stringify({ not: 'a tldraw file' }))

@@ -35,3 +33,3 @@ assert(!result.ok)

it('returns an error if the file version is too old', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(

@@ -50,3 +48,3 @@ store,

it('returns an error if the file version is too new', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(

@@ -65,3 +63,3 @@ store,

it('returns an error if migrations fail', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const serializedSchema = store.schema.serialize()

@@ -81,3 +79,3 @@ serializedSchema.storeVersion = 100

const store2 = createTLStore()
const store2 = createTLStore({ shapes: defaultShapes })
const serializedSchema2 = store2.schema.serialize()

@@ -100,3 +98,3 @@ serializedSchema2.recordVersions.shape.version = 100

it('returns an error if a record is invalid', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(

@@ -126,3 +124,3 @@ store,

it('returns a store if the file is valid', () => {
const store = createTLStore()
const store = createTLStore({ shapes: defaultShapes })
const result = parseTldrawJsonFile(

@@ -129,0 +127,0 @@ store,

dist-cjs/lib/buildFromV1Document.js.map

Sorry, the diff of this file is not supported yet

dist-cjs/lib/file.js.map

Sorry, the diff of this file is not supported yet

dist-esm/index.d.mts

Sorry, the diff of this file is not supported yet

dist-esm/lib/buildFromV1Document.mjs

Sorry, the diff of this file is not supported yet

dist-esm/lib/buildFromV1Document.mjs.map

Sorry, the diff of this file is not supported yet

dist-esm/lib/file.mjs

Sorry, the diff of this file is not supported yet

dist-esm/lib/file.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc