gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: cover collab field preservation

Browse Source
This commit is contained in:
Ryan Di
2026-03-20 19:55:40 +11:00
parent 8168d46f87
commit 16838ea792
12 changed files with 174 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
excalidraw-app/App.tsx
+4 -7
View File
@@ -286,13 +286,10 @@ const initializeScene = async (opts: {
scene = {
elements: bumpElementVersions(
restoreElements(
migrateSceneElements(
imported.elements,
{
payloadSchemaVersion: imported.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
},
),
migrateSceneElements(imported.elements, {
payloadSchemaVersion: imported.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
}),
null,
{
repairBindings: true,
excalidraw-app/data/LocalData.ts
+6 -4
View File
@@ -87,10 +87,12 @@ const saveDataStateToLocalStorage = (
_appState.openSidebar = null;
}
const persistedElements = getNonDeletedElements(elements).map((element) => ({
...element,
schemaVersion: SCHEMA_VERSIONS.latest,
}));
const persistedElements = getNonDeletedElements(elements).map(
(element) => ({
...element,
schemaVersion: SCHEMA_VERSIONS.latest,
}),
);
localStorage.setItem(
STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
excalidraw-app/tests/collab.test.tsx
+92
View File
@@ -69,6 +69,98 @@ vi.mock("socket.io-client", () => {
* i.e. multiplayer history tests could be a good first candidate, as we could test both history stacks simultaneously.
*/
describe("collaboration", () => {
it("should preserve future element fields across collab reconciliation", async () => {
await render(<ExcalidrawApp />);
const frame = API.createElement({
type: "frame",
id: "A",
width: 100,
height: 100,
x: 0,
y: 0,
backgroundColor: "#ff0000",
});
const frameWithFutureFields = {
...frame,
schemaVersion: 2,
futureField: "keep-me",
} as typeof frame & {
schemaVersion: number;
futureField: string;
};
API.updateScene({
elements: [frameWithFutureFields],
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
});
await waitFor(() => {
expect((h.elements[0] as any).futureField).toBe("keep-me");
expect((h.elements[0] as any).schemaVersion).toBe(2);
expect(h.elements[0].backgroundColor).toBe("#ff0000");
});
const remoteMovedFrame = newElementWith(h.elements[0] as any, {
x: 120,
y: 80,
});
const reconciled = (window.collab as any)._reconcileElements([
remoteMovedFrame,
]);
expect(reconciled[0]).toEqual(
expect.objectContaining({
x: 120,
y: 80,
backgroundColor: "#ff0000",
}),
);
expect((reconciled[0] as any).futureField).toBe("keep-me");
expect((reconciled[0] as any).schemaVersion).toBe(2);
});
it("should preserve future element fields on local edits before broadcast", async () => {
await render(<ExcalidrawApp />);
const rect = API.createElement({
type: "rectangle",
id: "A",
width: 100,
height: 100,
x: 0,
y: 0,
});
const rectWithFutureFields = {
...rect,
schemaVersion: 2,
futureField: { value: "keep-me" },
} as typeof rect & {
schemaVersion: number;
futureField: { value: string };
};
API.updateScene({
elements: [rectWithFutureFields],
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
});
const locallyEdited = newElementWith(h.elements[0] as any, { x: 200 });
API.updateScene({
elements: [locallyEdited],
captureUpdate: CaptureUpdateAction.NEVER,
});
await waitFor(() => {
expect((h.elements[0] as any).futureField).toEqual({ value: "keep-me" });
expect((h.elements[0] as any).schemaVersion).toBe(2);
expect(h.elements[0]).toEqual(expect.objectContaining({ x: 200 }));
});
});
it("should emit two ephemeral increments even though updates get batched", async () => {
const durableIncrements: DurableIncrement[] = [];
const ephemeralIncrements: EphemeralIncrement[] = [];
packages/excalidraw/clipboard.ts
+2 -1
View File
@@ -35,12 +35,13 @@ import {
import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
import { SCHEMA_VERSIONS } from "./data/schema";
import type { FileSystemHandle } from "./data/filesystem";
import type { Spreadsheet } from "./charts";
import type { BinaryFiles } from "./types";
import { SCHEMA_VERSIONS } from "./data/schema";
type ElementsClipboard = {
type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
packages/excalidraw/components/App.tsx
+7 -14
View File
@@ -2822,13 +2822,10 @@ class App extends React.Component<AppProps, AppState> {
? SCHEMA_VERSIONS.initial
: SCHEMA_VERSIONS.latest;
const restoredElements = restoreElements(
migrateSceneElements(
initialData?.elements,
{
payloadSchemaVersion: initialData?.schemaVersion,
fallbackVersion: initialDataSchemaFallback,
},
),
migrateSceneElements(initialData?.elements, {
payloadSchemaVersion: initialData?.schemaVersion,
fallbackVersion: initialDataSchemaFallback,
}),
null,
{
repairBindings: true,
@@ -3764,13 +3761,9 @@ class App extends React.Component<AppProps, AppState> {
? migrateLibraryElements(opts.elements, opts.schemaVersionSource)
: migrateAPIElements(opts.elements, opts.schemaVersionSource);
const elements = restoreElements(
migratedElements,
null,
{
deleteInvisibleElements: true,
},
);
const elements = restoreElements(migratedElements, null, {
deleteInvisibleElements: true,
});
const [minX, minY, maxX, maxY] = getCommonBounds(elements);
const elementsCenterX = distance(minX, maxX) / 2;
packages/excalidraw/components/PublishLibrary.tsx
+1
View File
@@ -9,6 +9,7 @@ import {
chunk,
getExportSource,
} from "@excalidraw/common";
import { SCHEMA_VERSIONS } from "../data/schema";
import { EditorLocalStorage } from "../data/EditorLocalStorage";
packages/excalidraw/data/blob.ts
+9 -19
View File
@@ -24,10 +24,7 @@ import {
restoreElements,
restoreLibraryItems,
} from "./restore";
import {
migrateSceneElements,
SCHEMA_VERSIONS,
} from "./schema";
import { migrateSceneElements, SCHEMA_VERSIONS } from "./schema";
import type { AppState, DataURL, LibraryItem } from "../types";
@@ -161,13 +158,10 @@ export const loadSceneOrLibraryFromBlob = async (
throw error;
}
if (isValidExcalidrawData(data)) {
const migratedElements = migrateSceneElements(
data.elements,
{
payloadSchemaVersion: data.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
},
);
const migratedElements = migrateSceneElements(data.elements, {
payloadSchemaVersion: data.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
});
return {
type: MIME_TYPES.excalidraw,
data: {
@@ -233,14 +227,10 @@ export const parseLibraryJSON = (
throw new Error("Invalid library");
}
const libraryItems = data.libraryItems || data.library;
return restoreLibraryItems(
libraryItems,
defaultStatus,
{
payloadSchemaVersion: data.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
},
);
return restoreLibraryItems(libraryItems, defaultStatus, {
payloadSchemaVersion: data.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
});
};
export const loadLibraryFromBlob = async (
packages/excalidraw/data/library.ts
+12 -14
View File
@@ -91,9 +91,10 @@ export interface LibraryPersistenceAdapter {
* purposes, in which case host app can implement more aggressive caching.
*/
source: LibraryAdatapterSource;
}): MaybePromise<
{ libraryItems: LibraryItems_anyVersion; schemaVersion?: number } | null
>;
}): MaybePromise<{
libraryItems: LibraryItems_anyVersion;
schemaVersion?: number;
} | null>;
/** Should persist to the database as is (do no change the data structure). */
save(libraryData: LibraryPersistedData): MaybePromise<void>;
}
@@ -103,9 +104,10 @@ export interface LibraryMigrationAdapter {
* loads data from legacy data source. Returns `null` if no data is
* to be migrated.
*/
load(): MaybePromise<
{ libraryItems: LibraryItems_anyVersion; schemaVersion?: number } | null
>;
load(): MaybePromise<{
libraryItems: LibraryItems_anyVersion;
schemaVersion?: number;
} | null>;
/** clears entire storage afterwards */
clear(): MaybePromise<void>;
@@ -561,14 +563,10 @@ class AdapterTransaction {
try {
const data = await adapter.load({ source });
resolve(
restoreLibraryItems(
data?.libraryItems || [],
"published",
{
payloadSchemaVersion: data?.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
},
),
restoreLibraryItems(data?.libraryItems || [], "published", {
payloadSchemaVersion: data?.schemaVersion,
fallbackVersion: SCHEMA_VERSIONS.initial,
}),
);
} catch (error: any) {
reject(error);
packages/excalidraw/data/restore.ts
+19 -12
View File
@@ -81,6 +81,7 @@ import {
getNormalizedGridStep,
getNormalizedZoom,
} from "../scene";
import {
migrateLibraryElements,
type SchemaVersionSource,
@@ -984,12 +985,15 @@ export const restoreLibraryItems = (
for (const item of libraryItems) {
// migrate older libraries
if (Array.isArray(item)) {
const restoredItem = restoreLibraryItem({
status: defaultStatus,
elements: item,
id: randomId(),
created: Date.now(),
}, schemaVersionSource);
const restoredItem = restoreLibraryItem(
{
status: defaultStatus,
elements: item,
id: randomId(),
created: Date.now(),
},
schemaVersionSource,
);
if (restoredItem) {
restoredItems.push(restoredItem);
}
@@ -998,12 +1002,15 @@ export const restoreLibraryItems = (
LibraryItem,
"id" | "status" | "created"
>;
const restoredItem = restoreLibraryItem({
..._item,
id: _item.id || randomId(),
status: _item.status || defaultStatus,
created: _item.created || Date.now(),
}, schemaVersionSource);
const restoredItem = restoreLibraryItem(
{
..._item,
id: _item.id || randomId(),
status: _item.status || defaultStatus,
created: _item.created || Date.now(),
},
schemaVersionSource,
);
if (restoredItem) {
restoredItems.push(restoredItem);
}
packages/excalidraw/data/schema.test.ts
+5 -7
View File
@@ -1,6 +1,7 @@
import { DEFAULT_ELEMENT_PROPS } from "@excalidraw/common";
import { API } from "../tests/helpers/api";
import {
ALL_SCOPES,
hasElementSchemaVersion,
@@ -194,13 +195,10 @@ describe("schema migration", () => {
schemaVersion: SCHEMA_VERSIONS.latest,
} as typeof modernFrame & { schemaVersion: number };
const migrated = migrateSceneElements(
[legacyFrame, modernFrameWithHint],
{
payloadSchemaVersion: undefined,
fallbackVersion: SCHEMA_VERSIONS.initial,
},
)!;
const migrated = migrateSceneElements([legacyFrame, modernFrameWithHint], {
payloadSchemaVersion: undefined,
fallbackVersion: SCHEMA_VERSIONS.initial,
})!;
expect(migrated[0].backgroundColor).toBe(
DEFAULT_ELEMENT_PROPS.backgroundColor,
packages/excalidraw/data/schema.ts
+13 -14
View File
@@ -15,7 +15,7 @@ export const SCHEMA_MIGRATION_SCOPES = [
"api",
] as const;
export type SchemaMigrationScope = (typeof SCHEMA_MIGRATION_SCOPES)[number];
export type SchemaMigrationScope = typeof SCHEMA_MIGRATION_SCOPES[number];
export const ALL_SCOPES: readonly SchemaMigrationScope[] =
SCHEMA_MIGRATION_SCOPES;
@@ -135,7 +135,9 @@ export const validateSchemaMigrations = (
);
}
if (!migration.scope.length) {
errors.push(`Migration "${migration.title}" must declare at least one scope.`);
errors.push(
`Migration "${migration.title}" must declare at least one scope.`,
);
}
for (const scope of migration.scope) {
if (!SCHEMA_MIGRATION_SCOPES.includes(scope)) {
@@ -155,12 +157,13 @@ export const validateSchemaMigrations = (
return errors;
};
const schemaMigrationValidationErrors = validateSchemaMigrations(
SCHEMA_MIGRATIONS,
);
const schemaMigrationValidationErrors =
validateSchemaMigrations(SCHEMA_MIGRATIONS);
if (schemaMigrationValidationErrors.length) {
throw new Error(
`Invalid schema migration configuration:\n${schemaMigrationValidationErrors.join("\n")}`,
`Invalid schema migration configuration:\n${schemaMigrationValidationErrors.join(
"\n",
)}`,
);
}
@@ -235,23 +238,19 @@ const migrateElementsByScope = (
export const migrateSceneElements = (
elements: readonly ExcalidrawElement[] | null | undefined,
source: SchemaVersionSource,
) =>
migrateElementsByScope(elements, "scene", source);
) => migrateElementsByScope(elements, "scene", source);
export const migrateLibraryElements = (
elements: readonly ExcalidrawElement[] | null | undefined,
source: SchemaVersionSource,
) =>
migrateElementsByScope(elements, "library", source);
) => migrateElementsByScope(elements, "library", source);
export const migrateClipboardElements = (
elements: readonly ExcalidrawElement[] | null | undefined,
source: SchemaVersionSource,
) =>
migrateElementsByScope(elements, "clipboard", source);
) => migrateElementsByScope(elements, "clipboard", source);
export const migrateAPIElements = (
elements: readonly ExcalidrawElement[] | null | undefined,
source: SchemaVersionSource,
) =>
migrateElementsByScope(elements, "api", source);
) => migrateElementsByScope(elements, "api", source);
packages/excalidraw/tests/data/restore.test.ts
+4 -2
View File
@@ -121,7 +121,8 @@ describe("restoreElements", () => {
);
expect(
(restoredLibraryItems[0].elements[0] as ExcalidrawElement).backgroundColor,
(restoredLibraryItems[0].elements[0] as ExcalidrawElement)
.backgroundColor,
).toBe("#a5d8ff");
});
@@ -145,7 +146,8 @@ describe("restoreElements", () => {
);
expect(
(restoredLibraryItems[0].elements[0] as ExcalidrawElement).backgroundColor,
(restoredLibraryItems[0].elements[0] as ExcalidrawElement)
.backgroundColor,
).toBe(DEFAULT_ELEMENT_PROPS.backgroundColor);
});