123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536 |
- import * as restore from "../../data/restore";
- import {
- ExcalidrawElement,
- ExcalidrawFreeDrawElement,
- ExcalidrawLinearElement,
- ExcalidrawTextElement,
- } from "../../element/types";
- import * as sizeHelpers from "../../element/sizeHelpers";
- import { API } from "../helpers/api";
- import { getDefaultAppState } from "../../appState";
- import { ImportedDataState } from "../../data/types";
- import { NormalizedZoomValue } from "../../types";
- import { FONT_FAMILY } from "../../constants";
- import { newElementWith } from "../../element/mutateElement";
- const mockSizeHelper = jest.spyOn(sizeHelpers, "isInvisiblySmallElement");
- beforeEach(() => {
- mockSizeHelper.mockReset();
- });
- describe("restoreElements", () => {
- 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).length).toBe(0);
- });
- 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),
- });
- });
- 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";
- const restoredText = restore.restoreElements(
- [textElement],
- null,
- )[0] as ExcalidrawTextElement;
- expect(restoredText).toMatchSnapshot({
- seed: expect.any(Number),
- });
- });
- it("should restore freedraw element correctly", () => {
- const freedrawElement = API.createElement({
- type: "freedraw",
- id: "id-freedraw01",
- });
- const restoredFreedraw = restore.restoreElements(
- [freedrawElement],
- null,
- )[0] as ExcalidrawFreeDrawElement;
- expect(restoredFreedraw).toMatchSnapshot({ seed: expect.any(Number) });
- });
- 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) });
- expect(restoredDraw).toMatchSnapshot({ seed: 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) });
- });
- it("when arrow element has defined endArrowHead", () => {
- 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("when arrow element has undefined endArrowHead", () => {
- const arrowElement = API.createElement({ type: "arrow" });
- Object.defineProperty(arrowElement, "endArrowhead", {
- get: jest.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("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: jest.fn(() => pointsEl_0),
- });
- const pointsEl_1 = [
- [3, 4],
- [5, 6],
- ];
- Object.defineProperty(lineElement_1, "points", {
- get: jest.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",
- 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"],
- strokeSharpness: "round",
- });
- elements.push(element);
- });
- const restoredElements = restore.restoreElements(elements, null);
- expect(restoredElements[0]).toMatchSnapshot({ seed: expect.any(Number) });
- expect(restoredElements[1]).toMatchSnapshot({ seed: expect.any(Number) });
- expect(restoredElements[2]).toMatchSnapshot({ seed: expect.any(Number) });
- });
- it("bump versions of local duplicate elements when supplied", () => {
- const rectangle = API.createElement({ type: "rectangle" });
- const ellipse = API.createElement({ type: "ellipse" });
- const rectangle_modified = newElementWith(rectangle, { isDeleted: true });
- const restoredElements = restore.restoreElements(
- [rectangle, ellipse],
- [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,
- versionNonce: ellipse.versionNonce,
- }),
- ]);
- });
- });
- describe("restoreAppState", () => {
- 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(
- stubImportedAppState.cursorButton,
- );
- expect(restoredAppState.name).toBe(stubImportedAppState.name);
- });
- 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(
- stubImportedAppState.cursorButton,
- );
- 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: jest.fn(() => null),
- });
- const stubLocalAppState = getDefaultAppState();
- const restoredAppState = restore.restoreAppState(
- stubImportedAppState,
- stubLocalAppState,
- );
- expect(restoredAppState.zoom).toMatchObject(getDefaultAppState().zoom);
- });
- });
- });
- describe("restore", () => {
- it("when imported data state is null it should return an empty array of elements", () => {
- const stubLocalAppState = getDefaultAppState();
- const restoredData = restore.restore(null, stubLocalAppState, null);
- expect(restoredData.elements.length).toBe(0);
- });
- it("when imported data state is null it should return the local app state property", () => {
- const stubLocalAppState = getDefaultAppState();
- stubLocalAppState.cursorButton = "down";
- stubLocalAppState.name = "local app state";
- const restoredData = restore.restore(null, stubLocalAppState, null);
- expect(restoredData.appState.cursorButton).toBe(
- stubLocalAppState.cursorButton,
- );
- expect(restoredData.appState.name).toBe(stubLocalAppState.name);
- });
- it("when imported data state has elements", () => {
- const stubLocalAppState = getDefaultAppState();
- const textElement = API.createElement({ type: "text" });
- const rectElement = API.createElement({ type: "rectangle" });
- const elements = [textElement, rectElement];
- const importedDataState = {} as ImportedDataState;
- importedDataState.elements = elements;
- const restoredData = restore.restore(
- importedDataState,
- stubLocalAppState,
- null,
- );
- expect(restoredData.elements.length).toBe(elements.length);
- });
- it("when local app state 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 restoredData = restore.restore(importedDataState, null, null);
- expect(restoredData.appState.cursorButton).toBe(
- stubImportedAppState.cursorButton,
- );
- expect(restoredData.appState.name).toBe(stubImportedAppState.name);
- });
- it("bump versions of local duplicate elements when supplied", () => {
- const rectangle = API.createElement({ type: "rectangle" });
- const ellipse = API.createElement({ type: "ellipse" });
- const rectangle_modified = newElementWith(rectangle, { isDeleted: true });
- const restoredData = restore.restore(
- { elements: [rectangle, ellipse] },
- null,
- [rectangle_modified],
- );
- expect(restoredData.elements[0].id).toBe(rectangle.id);
- expect(restoredData.elements[0].versionNonce).not.toBe(
- rectangle.versionNonce,
- );
- expect(restoredData.elements).toEqual([
- expect.objectContaining({ version: rectangle_modified.version + 1 }),
- expect.objectContaining({
- id: ellipse.id,
- version: ellipse.version,
- versionNonce: ellipse.versionNonce,
- }),
- ]);
- });
- });
|