1598 lines
46 KiB
TypeScript
1598 lines
46 KiB
TypeScript
import { pointFrom } from "@excalidraw/math";
|
|
import { vi } from "vitest";
|
|
|
|
import {
|
|
COLOR_PALETTE,
|
|
DEFAULT_FONT_SIZE,
|
|
DEFAULT_SIDEBAR,
|
|
FONT_FAMILY,
|
|
ROUNDNESS,
|
|
STICKY_NOTE_MAX_FONT_SIZE,
|
|
DEFAULT_STICKY_NOTE_BG,
|
|
STICKY_NOTE_MIN_FONT_SIZE,
|
|
} from "@excalidraw/common";
|
|
|
|
import { newElementWith } from "@excalidraw/element";
|
|
import * as sizeHelpers from "@excalidraw/element";
|
|
|
|
import { getStickyNoteLayout } from "@excalidraw/element";
|
|
|
|
import type { LocalPoint } from "@excalidraw/math";
|
|
|
|
import type {
|
|
ExcalidrawStickyNoteElement,
|
|
ExcalidrawArrowElement,
|
|
ExcalidrawElement,
|
|
ExcalidrawFreeDrawElement,
|
|
ExcalidrawLinearElement,
|
|
ExcalidrawTextElement,
|
|
FractionalIndex,
|
|
} from "@excalidraw/element/types";
|
|
import type { NormalizedZoomValue } from "@excalidraw/excalidraw/types";
|
|
|
|
import { API } from "../helpers/api";
|
|
import * as restore from "../../data/restore";
|
|
import { getDefaultAppState } from "../../appState";
|
|
import { serializeAsJSON } from "../../data/json";
|
|
|
|
import type { ImportedDataState } from "../../data/types";
|
|
import type { LibraryItem, LibraryItem_v1, LibraryItems } from "../../types";
|
|
|
|
describe("restoreElements", () => {
|
|
const mockSizeHelper = vi.spyOn(sizeHelpers, "isInvisiblySmallElement");
|
|
|
|
beforeEach(() => {
|
|
mockSizeHelper.mockReset();
|
|
});
|
|
|
|
afterAll(() => {
|
|
mockSizeHelper.mockRestore();
|
|
});
|
|
|
|
it("basic restoreElements", () => {
|
|
const textElement = API.createElement({ type: "text" });
|
|
const rectElement = API.createElement({ type: "rectangle" });
|
|
const elements = [textElement, rectElement];
|
|
|
|
const restoredElements = restore.restoreElements(elements, null);
|
|
expect(restoredElements.length).toBe(elements.length);
|
|
});
|
|
|
|
it.each([123, 0, null, undefined])(
|
|
"restores created=%s without substituting load or last-update time",
|
|
(created) => {
|
|
const element = {
|
|
...API.createElement({
|
|
type: "rectangle",
|
|
index: "a0" as FractionalIndex,
|
|
}),
|
|
created,
|
|
updated: 456,
|
|
};
|
|
// JSON removes undefined, matching files from clients predating created.
|
|
const input: ImportedDataState = JSON.parse(
|
|
JSON.stringify({ elements: [element] }),
|
|
);
|
|
const restored = restore.restoreElements(input.elements, null);
|
|
|
|
expect(restored[0]).toMatchObject({
|
|
id: element.id,
|
|
created: created ?? null,
|
|
updated: 456,
|
|
});
|
|
|
|
const exported: ImportedDataState = JSON.parse(
|
|
serializeAsJSON(restored, getDefaultAppState(), {}, "local"),
|
|
);
|
|
expect(exported.elements?.[0]).toHaveProperty("created", created ?? null);
|
|
expect(restore.restoreElements(exported.elements, null)).toEqual(
|
|
restored,
|
|
);
|
|
},
|
|
);
|
|
|
|
it("preserves creation metadata when repairing duplicate element IDs", () => {
|
|
const element = API.createElement({ type: "rectangle", created: 123 });
|
|
const restored = restore.restoreElements(
|
|
[element, { ...element, created: null }],
|
|
null,
|
|
);
|
|
|
|
expect(restored.map(({ created }) => created)).toEqual([123, null]);
|
|
expect(restored[0].id).not.toBe(restored[1].id);
|
|
});
|
|
|
|
it("should restore transparent sticky note stroke as black", () => {
|
|
const stickyNote = {
|
|
...API.createElement({ type: "stickynote" }),
|
|
strokeColor: COLOR_PALETTE.transparent,
|
|
};
|
|
|
|
const restoredElement = restore.restoreElements([stickyNote], null)[0];
|
|
|
|
expect(restoredElement.strokeColor).toBe(COLOR_PALETTE.black);
|
|
});
|
|
|
|
it("when imported data state is null it should return an empty array of elements", () => {
|
|
const restoredElements = restore.restoreElements(null, null);
|
|
expect(restoredElements.length).toBe(0);
|
|
});
|
|
|
|
it("should return empty array when element is null", () => {
|
|
expect(restore.restoreElements(null, null)).toStrictEqual([]);
|
|
});
|
|
|
|
it("should not call isInvisiblySmallElement when element is a selection element", () => {
|
|
const selectionEl = { type: "selection" } as ExcalidrawElement;
|
|
const restoreElements = restore.restoreElements([selectionEl], null);
|
|
expect(restoreElements.length).toBe(0);
|
|
expect(sizeHelpers.isInvisiblySmallElement).toBeCalledTimes(0);
|
|
});
|
|
|
|
it("should return empty array when input type is not supported", () => {
|
|
const dummyNotSupportedElement: any = API.createElement({
|
|
type: "text",
|
|
});
|
|
|
|
dummyNotSupportedElement.type = "not supported";
|
|
expect(
|
|
restore.restoreElements([dummyNotSupportedElement], null).length,
|
|
).toBe(0);
|
|
});
|
|
|
|
it("should return empty array when isInvisiblySmallElement is true", () => {
|
|
const rectElement = API.createElement({ type: "rectangle" });
|
|
mockSizeHelper.mockImplementation(() => true);
|
|
|
|
expect(
|
|
restore.restoreElements([rectElement], null, {
|
|
deleteInvisibleElements: true,
|
|
}),
|
|
).toEqual([expect.objectContaining({ isDeleted: true })]);
|
|
});
|
|
|
|
it("should restore text element correctly passing value for each attribute", () => {
|
|
const textElement = API.createElement({
|
|
type: "text",
|
|
fontSize: 14,
|
|
fontFamily: FONT_FAMILY.Virgil,
|
|
text: "text",
|
|
textAlign: "center",
|
|
verticalAlign: "middle",
|
|
id: "id-text01",
|
|
});
|
|
|
|
const restoredText = restore.restoreElements(
|
|
[textElement],
|
|
null,
|
|
)[0] as ExcalidrawTextElement;
|
|
|
|
expect(restoredText).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("should not delete empty text element when opts.deleteInvisibleElements is not defined", () => {
|
|
const textElement = API.createElement({
|
|
type: "text",
|
|
text: "",
|
|
isDeleted: false,
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements([textElement], null);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: textElement.id,
|
|
isDeleted: false,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("should restore text element correctly with unknown font family, null text and undefined alignment", () => {
|
|
const textElement: any = API.createElement({
|
|
type: "text",
|
|
textAlign: undefined,
|
|
verticalAlign: undefined,
|
|
id: "id-text01",
|
|
});
|
|
|
|
textElement.text = null;
|
|
textElement.font = "10 unknown";
|
|
|
|
expect(textElement.isDeleted).toBe(false);
|
|
const restoredText = restore.restoreElements([textElement], null, {
|
|
deleteInvisibleElements: true,
|
|
})[0] as ExcalidrawTextElement;
|
|
expect(restoredText.isDeleted).toBe(true);
|
|
expect(restoredText).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("should sanitize non-finite font sizes on text elements", () => {
|
|
const textElement: any = API.createElement({
|
|
type: "text",
|
|
text: "text",
|
|
});
|
|
textElement.fontSize = NaN;
|
|
textElement.baseFontSize = "abc";
|
|
|
|
const restoredText = restore.restoreElements(
|
|
[textElement],
|
|
null,
|
|
)[0] as ExcalidrawTextElement;
|
|
|
|
expect(restoredText.fontSize).toBe(DEFAULT_FONT_SIZE);
|
|
expect(restoredText.baseFontSize).toBe(null);
|
|
});
|
|
|
|
it("should clamp restored font ceilings to the sticky note maximum", () => {
|
|
const textElement: any = API.createElement({
|
|
type: "text",
|
|
text: "text",
|
|
});
|
|
textElement.baseFontSize = 1e20;
|
|
|
|
const restoredText = restore.restoreElements(
|
|
[textElement],
|
|
null,
|
|
)[0] as ExcalidrawTextElement;
|
|
|
|
expect(restoredText.baseFontSize).toBe(STICKY_NOTE_MAX_FONT_SIZE);
|
|
});
|
|
|
|
it("should clear a font ceiling on text that is not bound to a sticky note", () => {
|
|
// generic binding repair (duplication, history) can detach a label without
|
|
// touching its ceiling; restore reconciles it against the container
|
|
const textElement: any = API.createElement({
|
|
type: "text",
|
|
text: "text",
|
|
fontSize: 20,
|
|
});
|
|
textElement.baseFontSize = 28;
|
|
|
|
const restoredText = restore.restoreElements([textElement], null, {
|
|
repairBindings: true,
|
|
})[0] as ExcalidrawTextElement;
|
|
|
|
expect(restoredText.baseFontSize).toBe(null);
|
|
});
|
|
|
|
it("should seed the font ceiling and a visible stroke on a sticky note label", () => {
|
|
const stickyNote = API.createElement({
|
|
type: "stickynote",
|
|
id: "sticky",
|
|
boundElements: [{ type: "text", id: "label" }],
|
|
});
|
|
const label: any = {
|
|
...API.createElement({
|
|
type: "text",
|
|
id: "label",
|
|
text: "text",
|
|
fontSize: 20,
|
|
containerId: "sticky",
|
|
}),
|
|
strokeColor: COLOR_PALETTE.transparent,
|
|
};
|
|
delete label.baseFontSize;
|
|
|
|
const restored = restore.restoreElements([stickyNote, label], null, {
|
|
repairBindings: true,
|
|
});
|
|
const restoredLabel = restored.find(
|
|
(element) => element.id === "label",
|
|
) as ExcalidrawTextElement;
|
|
|
|
expect(restoredLabel.baseFontSize).toBe(20);
|
|
expect(restoredLabel.strokeColor).toBe(COLOR_PALETTE.black);
|
|
});
|
|
|
|
it("should give a note its label's color when the two drifted apart", () => {
|
|
const stickyNote = API.createElement({
|
|
type: "stickynote",
|
|
id: "sticky",
|
|
strokeColor: COLOR_PALETTE.black,
|
|
boundElements: [{ type: "text", id: "label" }],
|
|
});
|
|
const label = API.createElement({
|
|
type: "text",
|
|
id: "label",
|
|
text: "text",
|
|
fontSize: 20,
|
|
containerId: "sticky",
|
|
strokeColor: COLOR_PALETTE.red[4],
|
|
});
|
|
|
|
const restored = restore.restoreElements([stickyNote, label], null, {
|
|
repairBindings: true,
|
|
});
|
|
|
|
expect(
|
|
restored.find((element) => element.id === "sticky")!.strokeColor,
|
|
).toBe(COLOR_PALETTE.red[4]);
|
|
expect(
|
|
restored.find((element) => element.id === "label")!.strokeColor,
|
|
).toBe(COLOR_PALETTE.red[4]);
|
|
});
|
|
|
|
it("should restore the sticky note defaults and top-pick slots", () => {
|
|
const restored = restore.restoreAppState(
|
|
{
|
|
currentItemStickynoteBackgroundColor: COLOR_PALETTE.transparent,
|
|
currentItemStickynoteStrokeColor: COLOR_PALETTE.transparent,
|
|
colorTopPicks: { stickyNoteBackground: ["#fcc2d7", "#b2f2bb"] },
|
|
} as any,
|
|
null,
|
|
);
|
|
|
|
expect(restored.currentItemStickynoteBackgroundColor).toBe(
|
|
DEFAULT_STICKY_NOTE_BG,
|
|
);
|
|
expect(restored.currentItemStickynoteStrokeColor).toBe(COLOR_PALETTE.black);
|
|
expect(restored.colorTopPicks.stickyNoteBackground).toEqual([
|
|
"#fcc2d7",
|
|
"#b2f2bb",
|
|
]);
|
|
expect(restored.colorTopPicks.stickyNoteStroke).toBe(null);
|
|
});
|
|
|
|
it("should refit a sticky note together with its label when refreshing dimensions", () => {
|
|
const stickyNote = API.createElement({
|
|
type: "stickynote",
|
|
id: "sticky",
|
|
width: 250,
|
|
height: 250,
|
|
baseHeight: 250,
|
|
boundElements: [{ type: "text", id: "label" }],
|
|
});
|
|
const label = API.createElement({
|
|
type: "text",
|
|
id: "label",
|
|
text: Array(40).fill("abcdefghijklmnopqrstuvwx").join("\n"),
|
|
fontSize: 28,
|
|
containerId: "sticky",
|
|
});
|
|
|
|
const restored = restore.restoreElements([stickyNote, label], null, {
|
|
repairBindings: true,
|
|
refreshDimensions: true,
|
|
});
|
|
const note = restored.find(
|
|
(element) => element.id === "sticky",
|
|
) as ExcalidrawStickyNoteElement;
|
|
const text = restored.find(
|
|
(element) => element.id === "label",
|
|
) as ExcalidrawTextElement;
|
|
|
|
// both halves: the note grew for the text at the minimum font, the base
|
|
// is untouched, and the pair agrees with the layout
|
|
expect(note.baseHeight).toBe(250);
|
|
expect(note.height).toBeGreaterThan(250);
|
|
expect(text.fontSize).toBe(STICKY_NOTE_MIN_FONT_SIZE);
|
|
expect(text.baseFontSize).toBe(28);
|
|
expect(note.height).toBeCloseTo(
|
|
getStickyNoteLayout(note, text).container.height,
|
|
);
|
|
});
|
|
|
|
it("should restore freedraw element correctly", () => {
|
|
const freedrawElement = API.createElement({
|
|
type: "freedraw",
|
|
id: "id-freedraw01",
|
|
points: [pointFrom(0, 0), pointFrom(10, 10)],
|
|
});
|
|
|
|
const restoredFreedraw = restore.restoreElements(
|
|
[freedrawElement],
|
|
null,
|
|
)[0] as ExcalidrawFreeDrawElement;
|
|
|
|
expect(restoredFreedraw).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("should restore only valid freedraw points and keep pressures aligned", () => {
|
|
const freedrawElement = API.createElement({
|
|
type: "freedraw",
|
|
id: "id-freedraw-invalid-points",
|
|
points: [pointFrom(0, 0), pointFrom(10, 10)],
|
|
});
|
|
|
|
const restoredFreedraw = restore.restoreElements(
|
|
[
|
|
{
|
|
...freedrawElement,
|
|
simulatePressure: false,
|
|
points: [
|
|
pointFrom(0, 0),
|
|
[Infinity, 10],
|
|
null,
|
|
pointFrom(20, 20),
|
|
[NaN, 30],
|
|
[40, null],
|
|
],
|
|
pressures: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6],
|
|
} as any,
|
|
],
|
|
null,
|
|
)[0] as ExcalidrawFreeDrawElement;
|
|
|
|
expect(restoredFreedraw.points).toEqual([
|
|
pointFrom(0, 0),
|
|
pointFrom(20, 20),
|
|
]);
|
|
expect(restoredFreedraw.pressures).toEqual([0.1, 0.4]);
|
|
});
|
|
|
|
it("should restore freedraw stroke variability", () => {
|
|
const freedrawElement = API.createElement({
|
|
type: "freedraw",
|
|
id: "id-freedraw-mode",
|
|
points: [pointFrom(0, 0), pointFrom(10, 10)],
|
|
});
|
|
|
|
const [missing, bogusString, bogusNumber, valid, variable] =
|
|
restore.restoreElements(
|
|
[
|
|
{ ...freedrawElement, id: "missing", strokeOptions: undefined },
|
|
{
|
|
...freedrawElement,
|
|
id: "bogusString",
|
|
strokeOptions: { variability: "scribble" },
|
|
},
|
|
{
|
|
...freedrawElement,
|
|
id: "bogusNumber",
|
|
strokeOptions: { variability: 42 },
|
|
},
|
|
{
|
|
...freedrawElement,
|
|
id: "valid",
|
|
strokeOptions: { variability: "constant", streamline: 0.8 },
|
|
},
|
|
{
|
|
...freedrawElement,
|
|
id: "variable",
|
|
strokeOptions: { variability: "variable", streamline: 0.8 },
|
|
},
|
|
] as any,
|
|
null,
|
|
) as ExcalidrawFreeDrawElement[];
|
|
|
|
expect(missing.strokeOptions?.variability).toBe("variable");
|
|
expect(bogusString.strokeOptions?.variability).toBe("variable");
|
|
expect(bogusNumber.strokeOptions?.variability).toBe("variable");
|
|
expect(valid.strokeOptions?.variability).toBe("constant");
|
|
expect(variable.strokeOptions?.variability).toBe("variable");
|
|
expect(missing.strokeOptions?.streamline).toBe(0.5);
|
|
expect(bogusString.strokeOptions?.streamline).toBe(0.5);
|
|
expect(bogusNumber.strokeOptions?.streamline).toBe(0.5);
|
|
expect(valid.strokeOptions?.streamline).toBe(0.8);
|
|
expect(variable.strokeOptions?.streamline).toBe(0.8);
|
|
});
|
|
|
|
it("should restore line and draw elements correctly", () => {
|
|
const lineElement = API.createElement({ type: "line", id: "id-line01" });
|
|
|
|
const drawElement: any = API.createElement({
|
|
type: "line",
|
|
id: "id-draw01",
|
|
});
|
|
drawElement.type = "draw";
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[lineElement, drawElement],
|
|
null,
|
|
);
|
|
|
|
const restoredLine = restoredElements[0] as ExcalidrawLinearElement;
|
|
const restoredDraw = restoredElements[1] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredLine).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
expect(restoredDraw).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("should restore arrow element correctly", () => {
|
|
const arrowElement = API.createElement({ type: "arrow", id: "id-arrow01" });
|
|
|
|
const restoredElements = restore.restoreElements([arrowElement], null);
|
|
|
|
const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredArrow).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("should normalize legacy crowfoot arrowheads on restore", () => {
|
|
const arrowElement = API.createElement({
|
|
type: "arrow",
|
|
});
|
|
|
|
const restoredArrow = restore.restoreElements(
|
|
[
|
|
{
|
|
...arrowElement,
|
|
startArrowhead: "crowfoot_one",
|
|
endArrowhead: "crowfoot_one_or_many",
|
|
} as any,
|
|
],
|
|
null,
|
|
)[0] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredArrow.startArrowhead).toBe("cardinality_one");
|
|
expect(restoredArrow.endArrowhead).toBe("cardinality_one_or_many");
|
|
});
|
|
|
|
it("should strip element if restore fails", () => {
|
|
const rect1 = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
const rect2 = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
|
|
// define getter for a property we access during restoreElement that throws
|
|
Object.defineProperty(rect2, "seed", {
|
|
get: () => {
|
|
throw new Error("FORBIDDEN!");
|
|
},
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements([rect1, rect2], null);
|
|
|
|
expect(restoredElements.length).toBe(1);
|
|
|
|
expect(restoredElements).toEqual(
|
|
expect.arrayContaining([
|
|
expect.objectContaining({
|
|
id: rect1.id,
|
|
}),
|
|
]),
|
|
);
|
|
});
|
|
|
|
it("should remove imperceptibly small elements", () => {
|
|
const arrowElement = API.createElement({
|
|
type: "arrow",
|
|
points: [
|
|
[0, 0],
|
|
[0.02, 0.05],
|
|
] as LocalPoint[],
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements([arrowElement], null, {
|
|
deleteInvisibleElements: true,
|
|
});
|
|
|
|
const restoredArrow = restoredElements[0] as
|
|
| ExcalidrawArrowElement
|
|
| undefined;
|
|
|
|
expect(restoredArrow).not.toBeUndefined();
|
|
expect(restoredArrow?.isDeleted).toBe(true);
|
|
});
|
|
|
|
it("should keep 'imperceptibly' small freedraw/line elements", () => {
|
|
const freedrawElement = API.createElement({
|
|
type: "freedraw",
|
|
points: [
|
|
[0, 0],
|
|
[0.0001, 0.0001],
|
|
] as LocalPoint[],
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
const lineElement = API.createElement({
|
|
type: "line",
|
|
points: [
|
|
[0, 0],
|
|
[0.0001, 0.0001],
|
|
] as LocalPoint[],
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[freedrawElement, lineElement],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({ id: freedrawElement.id }),
|
|
expect.objectContaining({ id: lineElement.id }),
|
|
]);
|
|
});
|
|
|
|
it("should restore loop linears correctly", () => {
|
|
const linearElement = API.createElement({
|
|
type: "line",
|
|
points: [
|
|
[0, 0],
|
|
[100, 100],
|
|
[100, 200],
|
|
[0, 0],
|
|
] as LocalPoint[],
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
const arrowElement = API.createElement({
|
|
type: "arrow",
|
|
points: [
|
|
[0, 0],
|
|
[100, 100],
|
|
[100, 200],
|
|
[0, 0],
|
|
] as LocalPoint[],
|
|
x: 500,
|
|
y: 500,
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[linearElement, arrowElement],
|
|
null,
|
|
);
|
|
|
|
const restoredLinear = restoredElements[0] as
|
|
| ExcalidrawLinearElement
|
|
| undefined;
|
|
const restoredArrow = restoredElements[1] as
|
|
| ExcalidrawArrowElement
|
|
| undefined;
|
|
|
|
expect(restoredLinear?.type).toBe("line");
|
|
expect(restoredLinear?.points).toEqual([
|
|
[0, 0],
|
|
[100, 100],
|
|
[100, 200],
|
|
[0, 0],
|
|
] as LocalPoint[]);
|
|
expect(restoredArrow?.type).toBe("arrow");
|
|
expect(restoredArrow?.points).toEqual([
|
|
[0, 0],
|
|
[100, 100],
|
|
[100, 200],
|
|
[0, 0],
|
|
] as LocalPoint[]);
|
|
});
|
|
|
|
it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is null', () => {
|
|
const arrowElement = API.createElement({ type: "arrow" });
|
|
const restoredElements = restore.restoreElements([arrowElement], null);
|
|
|
|
const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(arrowElement.endArrowhead).toBe(restoredArrow.endArrowhead);
|
|
});
|
|
|
|
it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is undefined', () => {
|
|
const arrowElement = API.createElement({ type: "arrow" });
|
|
Object.defineProperty(arrowElement, "endArrowhead", {
|
|
get: vi.fn(() => undefined),
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements([arrowElement], null);
|
|
|
|
const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredArrow.endArrowhead).toBe("arrow");
|
|
});
|
|
|
|
it("when element.points of a line element is not an array", () => {
|
|
const lineElement: any = API.createElement({
|
|
type: "line",
|
|
width: 100,
|
|
height: 200,
|
|
});
|
|
|
|
lineElement.points = "not an array";
|
|
|
|
const expectedLinePoints = [
|
|
[0, 0],
|
|
[lineElement.width, lineElement.height],
|
|
];
|
|
|
|
const restoredLine = restore.restoreElements(
|
|
[lineElement],
|
|
null,
|
|
)[0] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredLine.points).toMatchObject(expectedLinePoints);
|
|
});
|
|
|
|
it("should restore only valid linear points", () => {
|
|
const lineElement: any = API.createElement({
|
|
type: "line",
|
|
x: 10,
|
|
y: 20,
|
|
width: 100,
|
|
height: 200,
|
|
});
|
|
const arrowElement: any = API.createElement({
|
|
type: "arrow",
|
|
width: 100,
|
|
height: 200,
|
|
});
|
|
|
|
lineElement.points = [
|
|
[2, 3],
|
|
null,
|
|
[Infinity, 4],
|
|
[5, 7],
|
|
[NaN, 8],
|
|
[9, null],
|
|
];
|
|
arrowElement.points = [
|
|
[null, 0],
|
|
[Infinity, 4],
|
|
];
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[lineElement, arrowElement],
|
|
null,
|
|
);
|
|
const restoredLine = restoredElements[0] as ExcalidrawLinearElement;
|
|
const restoredArrow = restoredElements[1] as ExcalidrawArrowElement;
|
|
|
|
expect(restoredLine.points).toEqual([pointFrom(0, 0), pointFrom(3, 4)]);
|
|
expect(restoredLine.x).toBe(12);
|
|
expect(restoredLine.y).toBe(23);
|
|
expect(restoredLine.width).toBe(3);
|
|
expect(restoredLine.height).toBe(4);
|
|
|
|
expect(restoredArrow.points).toEqual([
|
|
pointFrom(0, 0),
|
|
pointFrom(100, 200),
|
|
]);
|
|
});
|
|
|
|
it("should mark extremely large linear elements as deleted to avoid freezing", () => {
|
|
const consoleError = vi
|
|
.spyOn(console, "error")
|
|
.mockImplementation(() => {});
|
|
|
|
// a degenerate line with astronomical coordinates (see #11497)
|
|
const hugeLine: any = API.createElement({
|
|
type: "line",
|
|
x: 419048829414166,
|
|
y: 8484,
|
|
});
|
|
hugeLine.points = [
|
|
[0, 0],
|
|
[-302985021938436, 0],
|
|
[-838097658820234, 30],
|
|
];
|
|
|
|
const hugeArrow: any = API.createElement({ type: "arrow" });
|
|
hugeArrow.points = [
|
|
[0, 0],
|
|
[900000, 0],
|
|
];
|
|
|
|
const normalLine: any = API.createElement({ type: "line" });
|
|
normalLine.points = [
|
|
[0, 0],
|
|
[100, 200],
|
|
];
|
|
|
|
const [restoredLine, restoredArrow, restoredNormal] =
|
|
restore.restoreElements([hugeLine, hugeArrow, normalLine], null);
|
|
|
|
expect(restoredLine.isDeleted).toBe(true);
|
|
expect(restoredLine.width).toBe(100);
|
|
expect(restoredLine.height).toBe(100);
|
|
|
|
expect(restoredArrow.isDeleted).toBe(true);
|
|
expect(restoredArrow.width).toBe(100);
|
|
expect(restoredArrow.height).toBe(100);
|
|
|
|
expect(restoredNormal.isDeleted).toBe(false);
|
|
expect(restoredNormal.width).toBe(100);
|
|
expect(restoredNormal.height).toBe(200);
|
|
|
|
consoleError.mockRestore();
|
|
});
|
|
|
|
it("when the number of points of a line is greater or equal 2", () => {
|
|
const lineElement_0 = API.createElement({
|
|
type: "line",
|
|
width: 100,
|
|
height: 200,
|
|
x: 10,
|
|
y: 20,
|
|
});
|
|
const lineElement_1 = API.createElement({
|
|
type: "line",
|
|
width: 200,
|
|
height: 400,
|
|
x: 30,
|
|
y: 40,
|
|
});
|
|
|
|
const pointsEl_0 = [
|
|
[0, 0],
|
|
[1, 1],
|
|
];
|
|
Object.defineProperty(lineElement_0, "points", {
|
|
get: vi.fn(() => pointsEl_0),
|
|
});
|
|
|
|
const pointsEl_1 = [
|
|
[3, 4],
|
|
[5, 6],
|
|
];
|
|
Object.defineProperty(lineElement_1, "points", {
|
|
get: vi.fn(() => pointsEl_1),
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[lineElement_0, lineElement_1],
|
|
null,
|
|
);
|
|
|
|
const restoredLine_0 = restoredElements[0] as ExcalidrawLinearElement;
|
|
const restoredLine_1 = restoredElements[1] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredLine_0.points).toMatchObject(pointsEl_0);
|
|
|
|
const offsetX = pointsEl_1[0][0];
|
|
const offsetY = pointsEl_1[0][1];
|
|
const restoredPointsEl1 = [
|
|
[pointsEl_1[0][0] - offsetX, pointsEl_1[0][1] - offsetY],
|
|
[pointsEl_1[1][0] - offsetX, pointsEl_1[1][1] - offsetY],
|
|
];
|
|
expect(restoredLine_1.points).toMatchObject(restoredPointsEl1);
|
|
expect(restoredLine_1.x).toBe(lineElement_1.x + offsetX);
|
|
expect(restoredLine_1.y).toBe(lineElement_1.y + offsetY);
|
|
});
|
|
|
|
it("should restore correctly with rectangle, ellipse and diamond elements", () => {
|
|
const types = ["rectangle", "ellipse", "diamond"];
|
|
|
|
const elements: ExcalidrawElement[] = [];
|
|
let idCount = 0;
|
|
types.forEach((elType) => {
|
|
idCount += 1;
|
|
const element = API.createElement({
|
|
type: elType as "rectangle" | "ellipse" | "diamond" | "embeddable",
|
|
id: idCount.toString(),
|
|
fillStyle: "cross-hatch",
|
|
strokeWidth: 2,
|
|
strokeStyle: "dashed",
|
|
roughness: 2,
|
|
opacity: 10,
|
|
x: 10,
|
|
y: 20,
|
|
strokeColor: "red",
|
|
backgroundColor: "blue",
|
|
width: 100,
|
|
height: 200,
|
|
groupIds: ["1", "2", "3"],
|
|
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
|
|
});
|
|
|
|
elements.push(element);
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(elements, null);
|
|
|
|
expect(restoredElements[0]).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
expect(restoredElements[1]).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
expect(restoredElements[2]).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
});
|
|
});
|
|
|
|
it("bump versions of local duplicate elements when supplied", () => {
|
|
const rectangle = API.createElement({ type: "rectangle" }); // version=1
|
|
const ellipse = API.createElement({ type: "ellipse" });
|
|
const rectangle_modified = newElementWith(rectangle as ExcalidrawElement, {
|
|
isDeleted: true,
|
|
}); // version=2
|
|
|
|
const restoredElements = restore.bumpElementVersions(
|
|
restore.restoreElements([rectangle, ellipse], null),
|
|
[rectangle_modified],
|
|
);
|
|
|
|
expect(restoredElements[0].id).toBe(rectangle.id);
|
|
expect(restoredElements[0].versionNonce).not.toBe(rectangle.versionNonce);
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: rectangle.id,
|
|
version: rectangle_modified.version + 1,
|
|
}),
|
|
expect.objectContaining({
|
|
id: ellipse.id,
|
|
version: ellipse.version + 1,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("bump versions of local duplicate elements when supplied even if both have same version", () => {
|
|
const rectangle = API.createElement({ type: "rectangle" });
|
|
|
|
const restored_rectangle_1 = restore.restoreElements([rectangle], null)[0];
|
|
const restored_rectangle_2 = restore.restoreElements(
|
|
[restored_rectangle_1],
|
|
null,
|
|
)[0];
|
|
|
|
// restored rectangle version should be +1 because of re-index
|
|
expect(rectangle.version).not.toBe(restored_rectangle_1.version);
|
|
|
|
// restoring it again shouldn't re-index again
|
|
expect(restored_rectangle_1.version).toBe(restored_rectangle_2.version);
|
|
expect(restored_rectangle_1.versionNonce).toBe(
|
|
restored_rectangle_2.versionNonce,
|
|
);
|
|
|
|
const modified_rectangle_1 = newElementWith(restored_rectangle_1, {
|
|
width: 500,
|
|
});
|
|
const modified_rectangle_2 = newElementWith(restored_rectangle_2, {
|
|
width: 600,
|
|
});
|
|
|
|
const restoredElements = restore.bumpElementVersions(
|
|
restore.restoreElements([modified_rectangle_1], null),
|
|
[modified_rectangle_2],
|
|
);
|
|
|
|
expect(restoredElements[0].id).toBe(rectangle.id);
|
|
expect(restoredElements[0].id).toBe(modified_rectangle_1.id);
|
|
expect(restoredElements[0].versionNonce).not.toBe(
|
|
modified_rectangle_1.versionNonce,
|
|
);
|
|
expect(restoredElements[0].version).toBe(modified_rectangle_2.version + 1);
|
|
});
|
|
});
|
|
|
|
describe("restoreAppState", () => {
|
|
it("should restore freedraw mode app state values", () => {
|
|
expect(
|
|
restore.restoreAppState(
|
|
{ currentItemStrokeVariability: "constant" } as any,
|
|
null,
|
|
).currentItemStrokeVariability,
|
|
).toBe("constant");
|
|
expect(
|
|
restore.restoreAppState(
|
|
{ currentItemStrokeVariability: "variable" } as any,
|
|
null,
|
|
).currentItemStrokeVariability,
|
|
).toBe("variable");
|
|
});
|
|
|
|
it("when appState is null it should return the local app state property", () => {
|
|
const stubLocalAppState = getDefaultAppState();
|
|
stubLocalAppState.cursorButton = "down";
|
|
stubLocalAppState.name = "local app state";
|
|
|
|
const restoredAppState = restore.restoreAppState(null, stubLocalAppState);
|
|
expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
|
|
expect(restoredAppState.name).toBe(stubLocalAppState.name);
|
|
});
|
|
|
|
it("when local appState is null but imported app state is supplied", () => {
|
|
const stubImportedAppState = getDefaultAppState();
|
|
stubImportedAppState.cursorButton = "down";
|
|
stubImportedAppState.name = "imported app state";
|
|
|
|
const importedDataState = {} as ImportedDataState;
|
|
importedDataState.appState = stubImportedAppState;
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
importedDataState.appState,
|
|
null,
|
|
);
|
|
expect(restoredAppState.cursorButton).toBe("up");
|
|
expect(restoredAppState.name).toBe(stubImportedAppState.name);
|
|
});
|
|
|
|
it("should restore with imported data", () => {
|
|
const stubImportedAppState = getDefaultAppState();
|
|
stubImportedAppState.activeTool.type = "selection";
|
|
stubImportedAppState.cursorButton = "down";
|
|
stubImportedAppState.name = "imported app state";
|
|
|
|
const stubLocalAppState = getDefaultAppState();
|
|
stubLocalAppState.activeTool.type = "rectangle";
|
|
stubLocalAppState.cursorButton = "up";
|
|
stubLocalAppState.name = "local app state";
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
expect(restoredAppState.activeTool).toEqual(
|
|
stubImportedAppState.activeTool,
|
|
);
|
|
expect(restoredAppState.cursorButton).toBe("up");
|
|
expect(restoredAppState.name).toBe(stubImportedAppState.name);
|
|
});
|
|
|
|
it("should migrate legacy current item stroke width to stroke width key", () => {
|
|
const stubImportedAppState = {
|
|
...getDefaultAppState(),
|
|
currentItemStrokeWidth: 4,
|
|
currentItemStrokeWidthKey: undefined,
|
|
} as any;
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
null,
|
|
);
|
|
|
|
expect(restoredAppState.currentItemStrokeWidthKey).toBe("bold");
|
|
});
|
|
|
|
it("should restore transparent current sticky note stroke as black", () => {
|
|
const restoredAppState = restore.restoreAppState(
|
|
{
|
|
currentItemStickynoteStrokeColor: COLOR_PALETTE.transparent,
|
|
} as any,
|
|
null,
|
|
);
|
|
|
|
expect(restoredAppState.currentItemStickynoteStrokeColor).toBe(
|
|
COLOR_PALETTE.black,
|
|
);
|
|
});
|
|
|
|
it("should restore with current app state when imported data state is undefined", () => {
|
|
const stubImportedAppState = {
|
|
...getDefaultAppState(),
|
|
cursorButton: undefined,
|
|
name: undefined,
|
|
};
|
|
|
|
const stubLocalAppState = getDefaultAppState();
|
|
stubLocalAppState.cursorButton = "down";
|
|
stubLocalAppState.name = "local app state";
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
|
|
expect(restoredAppState.name).toBe(stubLocalAppState.name);
|
|
});
|
|
|
|
it("should return imported data when local app state is null", () => {
|
|
const stubImportedAppState = getDefaultAppState();
|
|
stubImportedAppState.cursorButton = "down";
|
|
stubImportedAppState.name = "imported app state";
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
null,
|
|
);
|
|
expect(restoredAppState.cursorButton).toBe("up");
|
|
expect(restoredAppState.name).toBe(stubImportedAppState.name);
|
|
});
|
|
|
|
it("should return local app state when imported data state is null", () => {
|
|
const stubLocalAppState = getDefaultAppState();
|
|
stubLocalAppState.cursorButton = "down";
|
|
stubLocalAppState.name = "local app state";
|
|
|
|
const restoredAppState = restore.restoreAppState(null, stubLocalAppState);
|
|
expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
|
|
expect(restoredAppState.name).toBe(stubLocalAppState.name);
|
|
});
|
|
|
|
it("should return default app state when imported data state and local app state are undefined", () => {
|
|
const stubImportedAppState = {
|
|
...getDefaultAppState(),
|
|
cursorButton: undefined,
|
|
};
|
|
|
|
const stubLocalAppState = {
|
|
...getDefaultAppState(),
|
|
cursorButton: undefined,
|
|
};
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
expect(restoredAppState.cursorButton).toBe(
|
|
getDefaultAppState().cursorButton,
|
|
);
|
|
});
|
|
|
|
it("should return default app state when imported data state and local app state are null", () => {
|
|
const restoredAppState = restore.restoreAppState(null, null);
|
|
expect(restoredAppState.cursorButton).toBe(
|
|
getDefaultAppState().cursorButton,
|
|
);
|
|
});
|
|
|
|
it("when imported data state has a not allowed Excalidraw Element Types", () => {
|
|
const stubImportedAppState: any = getDefaultAppState();
|
|
|
|
stubImportedAppState.activeTool = "not allowed Excalidraw Element Types";
|
|
const stubLocalAppState = getDefaultAppState();
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
expect(restoredAppState.activeTool.type).toBe("selection");
|
|
});
|
|
|
|
describe("with zoom in imported data state", () => {
|
|
it("when imported data state has zoom as a number", () => {
|
|
const stubImportedAppState: any = getDefaultAppState();
|
|
|
|
stubImportedAppState.zoom = 10;
|
|
|
|
const stubLocalAppState = getDefaultAppState();
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
|
|
expect(restoredAppState.zoom.value).toBe(10);
|
|
});
|
|
|
|
it("when the zoom of imported data state is not a number", () => {
|
|
const stubImportedAppState = getDefaultAppState();
|
|
stubImportedAppState.zoom = {
|
|
value: 10 as NormalizedZoomValue,
|
|
};
|
|
|
|
const stubLocalAppState = getDefaultAppState();
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
|
|
expect(restoredAppState.zoom.value).toBe(10);
|
|
expect(restoredAppState.zoom).toMatchObject(stubImportedAppState.zoom);
|
|
});
|
|
|
|
it("when the zoom of imported data state zoom is null", () => {
|
|
const stubImportedAppState = getDefaultAppState();
|
|
|
|
Object.defineProperty(stubImportedAppState, "zoom", {
|
|
get: vi.fn(() => null),
|
|
});
|
|
|
|
const stubLocalAppState = getDefaultAppState();
|
|
|
|
const restoredAppState = restore.restoreAppState(
|
|
stubImportedAppState,
|
|
stubLocalAppState,
|
|
);
|
|
|
|
expect(restoredAppState.zoom).toMatchObject(getDefaultAppState().zoom);
|
|
});
|
|
});
|
|
|
|
it("should handle appState.openSidebar legacy values", () => {
|
|
expect(restore.restoreAppState({}, null).openSidebar).toBe(null);
|
|
expect(
|
|
restore.restoreAppState({ openSidebar: "library" } as any, null)
|
|
.openSidebar,
|
|
).toEqual({ name: DEFAULT_SIDEBAR.name });
|
|
expect(
|
|
restore.restoreAppState({ openSidebar: "xxx" } as any, null).openSidebar,
|
|
).toEqual({ name: DEFAULT_SIDEBAR.name });
|
|
// while "library" was our legacy sidebar name, we can't assume it's legacy
|
|
// value as it may be some host app's custom sidebar name ¯\_(ツ)_/¯
|
|
expect(
|
|
restore.restoreAppState({ openSidebar: { name: "library" } } as any, null)
|
|
.openSidebar,
|
|
).toEqual({ name: "library" });
|
|
expect(
|
|
restore.restoreAppState(
|
|
{ openSidebar: { name: DEFAULT_SIDEBAR.name, tab: "ola" } } as any,
|
|
null,
|
|
).openSidebar,
|
|
).toEqual({ name: DEFAULT_SIDEBAR.name, tab: "ola" });
|
|
});
|
|
});
|
|
|
|
describe("repairing bindings", () => {
|
|
it.each(["arrow", "rectangle"] as const)(
|
|
"should repair bound %s label order and fractional index",
|
|
(containerType) => {
|
|
const container = API.createElement({
|
|
type: containerType,
|
|
id: "container",
|
|
index: "b2f" as ExcalidrawElement["index"],
|
|
boundElements: [{ type: "text", id: "label" }],
|
|
});
|
|
const label = API.createElement({
|
|
type: "text",
|
|
id: "label",
|
|
index: "b2a" as ExcalidrawElement["index"],
|
|
containerId: container.id,
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[label, container],
|
|
null,
|
|
{
|
|
repairBindings: true,
|
|
},
|
|
);
|
|
|
|
expect(restoredElements.map((element) => element.id)).toEqual([
|
|
container.id,
|
|
label.id,
|
|
]);
|
|
expect(restoredElements[0].index).toBe(container.index);
|
|
expect(restoredElements[1].index! > restoredElements[0].index!).toBe(
|
|
true,
|
|
);
|
|
},
|
|
);
|
|
|
|
it("should strip arrow binding if repair throws", () => {
|
|
const container = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
const arrowElement = API.createElement({
|
|
type: "arrow",
|
|
id: "id-arrow01",
|
|
endBinding: {
|
|
elementId: container.id,
|
|
fixedPoint: [0.5, 0.5],
|
|
mode: "inside",
|
|
},
|
|
});
|
|
|
|
Object.assign(container, {
|
|
boundElements: [{ type: "arrow", id: arrowElement.id }],
|
|
});
|
|
// make invalid binding -> throws during repair
|
|
Object.assign(arrowElement, {
|
|
endBinding: {
|
|
// invalid reference
|
|
elementId: 42,
|
|
},
|
|
});
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[arrowElement, container],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual(
|
|
expect.arrayContaining([
|
|
expect.objectContaining({
|
|
id: arrowElement.id,
|
|
endBinding: null,
|
|
}),
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
}),
|
|
]),
|
|
);
|
|
|
|
const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(restoredArrow).toMatchSnapshot({
|
|
seed: expect.any(Number),
|
|
versionNonce: expect.any(Number),
|
|
// endBinding: expect.any(Object),
|
|
});
|
|
});
|
|
|
|
it("should repair container boundElements when repair is true", () => {
|
|
const container = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
const boundElement = API.createElement({
|
|
type: "text",
|
|
containerId: container.id,
|
|
});
|
|
|
|
expect(container.boundElements).toEqual([]);
|
|
|
|
let restoredElements = restore.restoreElements(
|
|
[container, boundElement],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [],
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
|
|
restoredElements = restore.restoreElements(
|
|
[container, boundElement],
|
|
null,
|
|
{ repairBindings: true },
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [{ type: boundElement.type, id: boundElement.id }],
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("should repair containerId of boundElements when repair is true", () => {
|
|
const boundElement = API.createElement({
|
|
type: "text",
|
|
containerId: null,
|
|
});
|
|
const container = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [{ type: boundElement.type, id: boundElement.id }],
|
|
});
|
|
|
|
let restoredElements = restore.restoreElements(
|
|
[container, boundElement],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [{ type: boundElement.type, id: boundElement.id }],
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: null,
|
|
}),
|
|
]);
|
|
|
|
restoredElements = restore.restoreElements(
|
|
[container, boundElement],
|
|
null,
|
|
{ repairBindings: true },
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [{ type: boundElement.type, id: boundElement.id }],
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("should ignore bound element if deleted", () => {
|
|
const container = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
const boundElement = API.createElement({
|
|
type: "text",
|
|
containerId: container.id,
|
|
isDeleted: true,
|
|
});
|
|
|
|
expect(container.boundElements).toEqual([]);
|
|
|
|
const restoredElements = restore.restoreElements(
|
|
[container, boundElement],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [],
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("should remove bindings of deleted elements from boundElements when repair is true", () => {
|
|
const container = API.createElement({
|
|
type: "rectangle",
|
|
boundElements: [],
|
|
});
|
|
const boundElement = API.createElement({
|
|
type: "text",
|
|
containerId: container.id,
|
|
isDeleted: true,
|
|
});
|
|
const invisibleBoundElement = API.createElement({
|
|
type: "text",
|
|
containerId: container.id,
|
|
width: 0,
|
|
height: 0,
|
|
});
|
|
|
|
const obsoleteBinding = { type: boundElement.type, id: boundElement.id };
|
|
const invisibleBinding = {
|
|
type: invisibleBoundElement.type,
|
|
id: invisibleBoundElement.id,
|
|
};
|
|
expect(container.boundElements).toEqual([]);
|
|
|
|
const nonExistentBinding = { type: "text", id: "non-existent" };
|
|
// @ts-ignore
|
|
container.boundElements = [
|
|
obsoleteBinding,
|
|
invisibleBinding,
|
|
nonExistentBinding,
|
|
];
|
|
|
|
let restoredElements = restore.restoreElements(
|
|
[container, invisibleBoundElement, boundElement],
|
|
null,
|
|
{ deleteInvisibleElements: true },
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [obsoleteBinding, invisibleBinding, nonExistentBinding],
|
|
}),
|
|
expect.objectContaining({
|
|
id: invisibleBoundElement.id,
|
|
containerId: container.id,
|
|
isDeleted: true,
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
|
|
restoredElements = restore.restoreElements(
|
|
[container, invisibleBoundElement, boundElement],
|
|
null,
|
|
{ repairBindings: true, deleteInvisibleElements: true },
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: container.id,
|
|
boundElements: [],
|
|
}),
|
|
expect.objectContaining({
|
|
id: invisibleBoundElement.id,
|
|
containerId: container.id,
|
|
isDeleted: true,
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: container.id,
|
|
}),
|
|
]);
|
|
});
|
|
|
|
it("should remove containerId if container not exists when repair is true", () => {
|
|
const boundElement = API.createElement({
|
|
type: "text",
|
|
containerId: "non-existent",
|
|
});
|
|
const boundElementDeleted = API.createElement({
|
|
type: "text",
|
|
containerId: "non-existent",
|
|
isDeleted: true,
|
|
});
|
|
|
|
let restoredElements = restore.restoreElements(
|
|
[boundElement, boundElementDeleted],
|
|
null,
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: "non-existent",
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElementDeleted.id,
|
|
containerId: "non-existent",
|
|
}),
|
|
]);
|
|
|
|
restoredElements = restore.restoreElements(
|
|
[boundElement, boundElementDeleted],
|
|
null,
|
|
{ repairBindings: true },
|
|
);
|
|
|
|
expect(restoredElements).toEqual([
|
|
expect.objectContaining({
|
|
id: boundElement.id,
|
|
containerId: null,
|
|
}),
|
|
expect.objectContaining({
|
|
id: boundElementDeleted.id,
|
|
containerId: null,
|
|
}),
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe("restoreLibraryItems creation timestamps", () => {
|
|
it.each([1, 2])(
|
|
"accepts v%s input with missing creation metadata",
|
|
(version) => {
|
|
const { created, ...legacyElement } = API.createElement({
|
|
type: "rectangle",
|
|
});
|
|
// models library data persisted before `created` existed; the declared
|
|
// input type is a complete element, restore fills the field at runtime
|
|
const elements = [
|
|
legacyElement,
|
|
API.createElement({ type: "rectangle", created: 123 }),
|
|
API.createElement({ type: "rectangle", created: null }),
|
|
] as unknown as LibraryItem["elements"];
|
|
const legacyItem: LibraryItem_v1 = elements;
|
|
const currentItem: LibraryItem = {
|
|
id: "library-item",
|
|
status: "unpublished",
|
|
created: 456,
|
|
elements,
|
|
};
|
|
const imported: ImportedDataState = {
|
|
libraryItems: version === 1 ? [legacyItem] : [currentItem],
|
|
};
|
|
|
|
const restoredItems: LibraryItems = restore.restoreLibraryItems(
|
|
imported.libraryItems,
|
|
"unpublished",
|
|
);
|
|
|
|
expect(restoredItems).toHaveLength(1);
|
|
expect(
|
|
restoredItems[0].elements.map((element) => element.created),
|
|
).toEqual([null, 123, null]);
|
|
expect(restoredItems[0].elements.map((element) => element.id)).toEqual(
|
|
elements.map((element) => element.id),
|
|
);
|
|
expect(legacyElement).not.toHaveProperty("created");
|
|
if (version === 2) {
|
|
expect(restoredItems[0].created).toBe(456);
|
|
}
|
|
},
|
|
);
|
|
});
|