Compare commits
1 Commits
mrazator/v
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5639bb8e87 |
@ -1,5 +1,3 @@
|
||||
MODE="development"
|
||||
|
||||
VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
|
||||
VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
|
||||
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
MODE="production"
|
||||
|
||||
VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
|
||||
VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
|
||||
VITE_APP_BACKEND_V2_GET_URL=https://ex.dylanbanta.com/api/v2/scenes/
|
||||
VITE_APP_BACKEND_V2_POST_URL=https://ex.dylanbanta.com/api/v2/scenes/
|
||||
|
||||
VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
|
||||
VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
|
||||
|
||||
@ -34,9 +34,6 @@
|
||||
<a href="https://discord.gg/UexuTaE">
|
||||
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
|
||||
</a>
|
||||
<a href="https://deepwiki.com/excalidraw/excalidraw">
|
||||
<img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" />
|
||||
</a>
|
||||
<a href="https://twitter.com/excalidraw">
|
||||
<img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
|
||||
</a>
|
||||
|
||||
@ -19,7 +19,7 @@ services:
|
||||
- ./:/opt/node_app/app:delegated
|
||||
- ./package.json:/opt/node_app/package.json
|
||||
- ./yarn.lock:/opt/node_app/yarn.lock
|
||||
- notused:/opt/node_app/app/node_modules
|
||||
# - notused:/opt/node_app/app/node_modules
|
||||
|
||||
volumes:
|
||||
notused:
|
||||
# volumes:
|
||||
# notused:
|
||||
|
||||
@ -926,16 +926,21 @@ const ExcalidrawWrapper = () => {
|
||||
<ShareDialog
|
||||
collabAPI={collabAPI}
|
||||
onExportToBackend={async () => {
|
||||
if (excalidrawAPI) {
|
||||
try {
|
||||
await onExportToBackend(
|
||||
excalidrawAPI.getSceneElements(),
|
||||
excalidrawAPI.getAppState(),
|
||||
excalidrawAPI.getFiles(),
|
||||
);
|
||||
} catch (error: any) {
|
||||
setErrorMessage(error.message);
|
||||
if (!excalidrawAPI) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { url, errorMessage } = await exportToBackend(
|
||||
excalidrawAPI.getSceneElements(),
|
||||
excalidrawAPI.getAppState(),
|
||||
excalidrawAPI.getFiles(),
|
||||
);
|
||||
if (errorMessage) {
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
setLatestShareableLink(url);
|
||||
} catch (error: any) {
|
||||
setErrorMessage(error.message);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -41,8 +41,8 @@
|
||||
"prettier": "@excalidraw/prettier-config",
|
||||
"scripts": {
|
||||
"build-node": "node ./scripts/build-node.js",
|
||||
"build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
|
||||
"build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
|
||||
"build:app:docker": "vite build",
|
||||
"build:app": "vite build",
|
||||
"build:version": "node ../scripts/build-version.js",
|
||||
"build": "yarn build:app && yarn build:version",
|
||||
"start": "yarn && vite",
|
||||
|
||||
@ -205,7 +205,6 @@ describe("collaboration", () => {
|
||||
// with explicit undo (as addition) we expect our item to be restored from the snapshot!
|
||||
await waitFor(() => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(API.getSnapshot()).toEqual([
|
||||
expect.objectContaining(rect1Props),
|
||||
expect.objectContaining({ ...rect2Props, isDeleted: false }),
|
||||
@ -237,7 +236,7 @@ describe("collaboration", () => {
|
||||
|
||||
// with explicit redo (as removal) we again restore the element from the snapshot!
|
||||
await waitFor(() => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(API.getSnapshot()).toEqual([
|
||||
expect.objectContaining(rect1Props),
|
||||
@ -249,11 +248,13 @@ describe("collaboration", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
act(() => h.app.actionManager.executeAction(undoAction));
|
||||
|
||||
// simulate local update
|
||||
API.updateScene({
|
||||
elements: syncInvalidIndices([
|
||||
h.elements[0],
|
||||
newElementWith(h.elements[1], { x: 100, isDeleted: false }),
|
||||
newElementWith(h.elements[1], { x: 100 }),
|
||||
]),
|
||||
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
|
||||
});
|
||||
@ -270,5 +271,55 @@ describe("collaboration", () => {
|
||||
expect.objectContaining({ ...rect2Props, isDeleted: false, x: 100 }),
|
||||
]);
|
||||
});
|
||||
|
||||
act(() => h.app.actionManager.executeAction(undoAction));
|
||||
|
||||
// we expect to iterate the stack to the first visible change
|
||||
await waitFor(() => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(API.getSnapshot()).toEqual([
|
||||
expect.objectContaining(rect1Props),
|
||||
expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }),
|
||||
]);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining(rect1Props),
|
||||
expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }),
|
||||
]);
|
||||
});
|
||||
|
||||
// simulate force deleting the element remotely
|
||||
API.updateScene({
|
||||
elements: syncInvalidIndices([rect1]),
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
// snapshot was correctly updated and marked the element as deleted
|
||||
await waitFor(() => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(API.getSnapshot()).toEqual([
|
||||
expect.objectContaining(rect1Props),
|
||||
expect.objectContaining({ ...rect2Props, isDeleted: true, x: 0 }),
|
||||
]);
|
||||
expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
|
||||
});
|
||||
|
||||
act(() => h.app.actionManager.executeAction(redoAction));
|
||||
|
||||
// with explicit redo (as update) we again restored the element from the snapshot!
|
||||
await waitFor(() => {
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(API.getSnapshot()).toEqual([
|
||||
expect.objectContaining({ id: "A", isDeleted: false }),
|
||||
expect.objectContaining({ id: "B", isDeleted: true, x: 100 }),
|
||||
]);
|
||||
expect(h.history.isRedoStackEmpty).toBeTruthy();
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({ id: "A", isDeleted: false }),
|
||||
expect.objectContaining({ id: "B", isDeleted: true, x: 100 }),
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -712,8 +712,8 @@ export const arrayToObject = <T>(
|
||||
array: readonly T[],
|
||||
groupBy?: (value: T) => string | number,
|
||||
) =>
|
||||
array.reduce((acc, value, idx) => {
|
||||
acc[groupBy ? groupBy(value) : idx] = value;
|
||||
array.reduce((acc, value) => {
|
||||
acc[groupBy ? groupBy(value) : String(value)] = value;
|
||||
return acc;
|
||||
}, {} as { [key: string]: T });
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
|
||||
import type {
|
||||
ExcalidrawElement,
|
||||
ExcalidrawFreeDrawElement,
|
||||
ExcalidrawImageElement,
|
||||
ExcalidrawLinearElement,
|
||||
ExcalidrawTextElement,
|
||||
NonDeleted,
|
||||
@ -18,12 +18,7 @@ import type {
|
||||
SceneElementsMap,
|
||||
} from "@excalidraw/element/types";
|
||||
|
||||
import type {
|
||||
DTO,
|
||||
Mutable,
|
||||
SubtypeOf,
|
||||
ValueOf,
|
||||
} from "@excalidraw/common/utility-types";
|
||||
import type { DTO, SubtypeOf, ValueOf } from "@excalidraw/common/utility-types";
|
||||
|
||||
import type {
|
||||
AppState,
|
||||
@ -56,8 +51,6 @@ import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
|
||||
|
||||
import { Scene } from "./Scene";
|
||||
|
||||
import { StoreSnapshot } from "./store";
|
||||
|
||||
import type { BindableProp, BindingProp } from "./binding";
|
||||
|
||||
import type { ElementUpdate } from "./mutateElement";
|
||||
@ -263,14 +256,12 @@ export class Delta<T> {
|
||||
arrayToObject(deletedArray, groupBy),
|
||||
arrayToObject(insertedArray, groupBy),
|
||||
),
|
||||
(x) => x,
|
||||
);
|
||||
const insertedDifferences = arrayToObject(
|
||||
Delta.getRightDifferences(
|
||||
arrayToObject(deletedArray, groupBy),
|
||||
arrayToObject(insertedArray, groupBy),
|
||||
),
|
||||
(x) => x,
|
||||
);
|
||||
|
||||
if (
|
||||
@ -867,17 +858,10 @@ export class AppStateDelta implements DeltaContainer<AppState> {
|
||||
}
|
||||
}
|
||||
|
||||
type ElementPartial<TElement extends ExcalidrawElement = ExcalidrawElement> =
|
||||
Omit<Partial<Ordered<TElement>>, "id" | "updated" | "seed">;
|
||||
|
||||
export type ApplyToOptions = {
|
||||
excludedProperties: Set<keyof ElementPartial>;
|
||||
};
|
||||
|
||||
type ApplyToFlags = {
|
||||
containsVisibleDifference: boolean;
|
||||
containsZindexDifference: boolean;
|
||||
};
|
||||
type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> = Omit<
|
||||
ElementUpdate<Ordered<T>>,
|
||||
"seed"
|
||||
>;
|
||||
|
||||
/**
|
||||
* Elements change is a low level primitive to capture a change between two sets of elements.
|
||||
@ -1166,15 +1150,12 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
|
||||
public applyTo(
|
||||
elements: SceneElementsMap,
|
||||
snapshot: StoreSnapshot["elements"] = StoreSnapshot.empty().elements,
|
||||
options: ApplyToOptions = {
|
||||
excludedProperties: new Set(),
|
||||
},
|
||||
elementsSnapshot: Map<string, OrderedExcalidrawElement>,
|
||||
): [SceneElementsMap, boolean] {
|
||||
let nextElements = new Map(elements) as SceneElementsMap;
|
||||
let changedElements: Map<string, OrderedExcalidrawElement>;
|
||||
|
||||
const flags: ApplyToFlags = {
|
||||
const flags = {
|
||||
containsVisibleDifference: false,
|
||||
containsZindexDifference: false,
|
||||
};
|
||||
@ -1183,14 +1164,13 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
try {
|
||||
const applyDeltas = ElementsDelta.createApplier(
|
||||
nextElements,
|
||||
snapshot,
|
||||
options,
|
||||
elementsSnapshot,
|
||||
flags,
|
||||
);
|
||||
|
||||
const addedElements = applyDeltas(this.added);
|
||||
const removedElements = applyDeltas(this.removed);
|
||||
const updatedElements = applyDeltas(this.updated);
|
||||
const addedElements = applyDeltas("added", this.added);
|
||||
const removedElements = applyDeltas("removed", this.removed);
|
||||
const updatedElements = applyDeltas("updated", this.updated);
|
||||
|
||||
const affectedElements = this.resolveConflicts(elements, nextElements);
|
||||
|
||||
@ -1249,12 +1229,18 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
private static createApplier =
|
||||
(
|
||||
nextElements: SceneElementsMap,
|
||||
snapshot: StoreSnapshot["elements"],
|
||||
options: ApplyToOptions,
|
||||
flags: ApplyToFlags,
|
||||
snapshot: Map<string, OrderedExcalidrawElement>,
|
||||
flags: {
|
||||
containsVisibleDifference: boolean;
|
||||
containsZindexDifference: boolean;
|
||||
},
|
||||
) =>
|
||||
(deltas: Record<string, Delta<ElementPartial>>) => {
|
||||
(
|
||||
type: "added" | "removed" | "updated",
|
||||
deltas: Record<string, Delta<ElementPartial>>,
|
||||
) => {
|
||||
const getElement = ElementsDelta.createGetter(
|
||||
type,
|
||||
nextElements,
|
||||
snapshot,
|
||||
flags,
|
||||
@ -1264,13 +1250,7 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
const element = getElement(id, delta.inserted);
|
||||
|
||||
if (element) {
|
||||
const newElement = ElementsDelta.applyDelta(
|
||||
element,
|
||||
delta,
|
||||
options,
|
||||
flags,
|
||||
);
|
||||
|
||||
const newElement = ElementsDelta.applyDelta(element, delta, flags);
|
||||
nextElements.set(newElement.id, newElement);
|
||||
acc.set(newElement.id, newElement);
|
||||
}
|
||||
@ -1281,9 +1261,13 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
|
||||
private static createGetter =
|
||||
(
|
||||
type: "added" | "removed" | "updated",
|
||||
elements: SceneElementsMap,
|
||||
snapshot: StoreSnapshot["elements"],
|
||||
flags: ApplyToFlags,
|
||||
snapshot: Map<string, OrderedExcalidrawElement>,
|
||||
flags: {
|
||||
containsVisibleDifference: boolean;
|
||||
containsZindexDifference: boolean;
|
||||
},
|
||||
) =>
|
||||
(id: string, partial: ElementPartial) => {
|
||||
let element = elements.get(id);
|
||||
@ -1297,7 +1281,10 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
flags.containsZindexDifference = true;
|
||||
|
||||
// as the element was force deleted, we need to check if adding it back results in a visible change
|
||||
if (!partial.isDeleted || (partial.isDeleted && !element.isDeleted)) {
|
||||
if (
|
||||
partial.isDeleted === false ||
|
||||
(partial.isDeleted !== true && element.isDeleted === false)
|
||||
) {
|
||||
flags.containsVisibleDifference = true;
|
||||
}
|
||||
} else {
|
||||
@ -1317,28 +1304,16 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
private static applyDelta(
|
||||
element: OrderedExcalidrawElement,
|
||||
delta: Delta<ElementPartial>,
|
||||
options: ApplyToOptions,
|
||||
flags: ApplyToFlags,
|
||||
flags: {
|
||||
containsVisibleDifference: boolean;
|
||||
containsZindexDifference: boolean;
|
||||
} = {
|
||||
// by default we don't care about about the flags
|
||||
containsVisibleDifference: true,
|
||||
containsZindexDifference: true,
|
||||
},
|
||||
) {
|
||||
const directlyApplicablePartial: Mutable<ElementPartial> = {};
|
||||
|
||||
// some properties are not directly applicable, such as:
|
||||
// - boundElements which contains only diff)
|
||||
// - version & versionNonce, if we don't want to return to previous versions
|
||||
for (const key of Object.keys(delta.inserted) as Array<
|
||||
keyof typeof delta.inserted
|
||||
>) {
|
||||
if (key === "boundElements") {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (options.excludedProperties.has(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const value = delta.inserted[key];
|
||||
Reflect.set(directlyApplicablePartial, key, value);
|
||||
}
|
||||
const { boundElements, ...directlyApplicablePartial } = delta.inserted;
|
||||
|
||||
if (
|
||||
delta.deleted.boundElements?.length ||
|
||||
@ -1356,6 +1331,19 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: this looks wrong, shouldn't be here
|
||||
if (element.type === "image") {
|
||||
const _delta = delta as Delta<ElementPartial<ExcalidrawImageElement>>;
|
||||
// we want to override `crop` only if modified so that we don't reset
|
||||
// when undoing/redoing unrelated change
|
||||
if (_delta.deleted.crop || _delta.inserted.crop) {
|
||||
Object.assign(directlyApplicablePartial, {
|
||||
// apply change verbatim
|
||||
crop: _delta.inserted.crop ?? null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!flags.containsVisibleDifference) {
|
||||
// strip away fractional index, as even if it would be different, it doesn't have to result in visible change
|
||||
const { index, ...rest } = directlyApplicablePartial;
|
||||
@ -1662,32 +1650,6 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
): [ElementPartial, ElementPartial] {
|
||||
try {
|
||||
Delta.diffArrays(deleted, inserted, "boundElements", (x) => x.id);
|
||||
|
||||
// don't diff the points as:
|
||||
// - we can't ensure the multiplayer order consistency without fractional index on each point
|
||||
// - we prefer to not merge the points, as it might just lead to unexpected / incosistent results
|
||||
const deletedPoints =
|
||||
(
|
||||
deleted as ElementPartial<
|
||||
ExcalidrawFreeDrawElement | ExcalidrawLinearElement
|
||||
>
|
||||
).points ?? [];
|
||||
|
||||
const insertedPoints =
|
||||
(
|
||||
inserted as ElementPartial<
|
||||
ExcalidrawFreeDrawElement | ExcalidrawLinearElement
|
||||
>
|
||||
).points ?? [];
|
||||
|
||||
if (
|
||||
!Delta.isLeftDifferent(deletedPoints, insertedPoints) &&
|
||||
!Delta.isRightDifferent(deletedPoints, insertedPoints)
|
||||
) {
|
||||
// delete the points from delta if there is no difference, otherwise leave them as they were captured due to consistency
|
||||
Reflect.deleteProperty(deleted, "points");
|
||||
Reflect.deleteProperty(inserted, "points");
|
||||
}
|
||||
} catch (e) {
|
||||
// if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it
|
||||
console.error(`Couldn't postprocess elements delta.`);
|
||||
@ -1703,7 +1665,7 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
|
||||
private static stripIrrelevantProps(
|
||||
partial: Partial<OrderedExcalidrawElement>,
|
||||
): ElementPartial {
|
||||
const { id, updated, ...strippedPartial } = partial;
|
||||
const { id, updated, version, versionNonce, ...strippedPartial } = partial;
|
||||
|
||||
return strippedPartial;
|
||||
}
|
||||
|
||||
@ -974,25 +974,6 @@ export const updateElbowArrowPoints = (
|
||||
),
|
||||
"Elbow arrow segments must be either horizontal or vertical",
|
||||
);
|
||||
|
||||
invariant(
|
||||
updates.fixedSegments?.find(
|
||||
(segment) =>
|
||||
segment.index === 1 &&
|
||||
pointsEqual(segment.start, (updates.points ?? arrow.points)[0]),
|
||||
) == null &&
|
||||
updates.fixedSegments?.find(
|
||||
(segment) =>
|
||||
segment.index === (updates.points ?? arrow.points).length - 1 &&
|
||||
pointsEqual(
|
||||
segment.end,
|
||||
(updates.points ?? arrow.points)[
|
||||
(updates.points ?? arrow.points).length - 1
|
||||
],
|
||||
),
|
||||
) == null,
|
||||
"The first and last segments cannot be fixed",
|
||||
);
|
||||
}
|
||||
|
||||
const fixedSegments = updates.fixedSegments ?? arrow.fixedSegments ?? [];
|
||||
|
||||
@ -2,9 +2,7 @@ import { generateNKeysBetween } from "fractional-indexing";
|
||||
|
||||
import { arrayToMap } from "@excalidraw/common";
|
||||
|
||||
import type { Mutable } from "@excalidraw/common/utility-types";
|
||||
|
||||
import { mutateElement, newElementWith } from "./mutateElement";
|
||||
import { mutateElement } from "./mutateElement";
|
||||
import { getBoundTextElement } from "./textElement";
|
||||
import { hasBoundTextElement } from "./typeChecks";
|
||||
|
||||
@ -163,15 +161,9 @@ export const syncMovedIndices = (
|
||||
|
||||
// try generatating indices, throws on invalid movedElements
|
||||
const elementsUpdates = generateIndices(elements, indicesGroups);
|
||||
const elementsCandidates = elements.map((x) => {
|
||||
const elementUpdates = elementsUpdates.get(x);
|
||||
|
||||
if (elementUpdates) {
|
||||
return { ...x, index: elementUpdates.index };
|
||||
}
|
||||
|
||||
return x;
|
||||
});
|
||||
const elementsCandidates = elements.map((x) =>
|
||||
elementsUpdates.has(x) ? { ...x, ...elementsUpdates.get(x) } : x,
|
||||
);
|
||||
|
||||
// ensure next indices are valid before mutation, throws on invalid ones
|
||||
validateFractionalIndices(
|
||||
@ -185,8 +177,8 @@ export const syncMovedIndices = (
|
||||
);
|
||||
|
||||
// split mutation so we don't end up in an incosistent state
|
||||
for (const [element, { index }] of elementsUpdates) {
|
||||
mutateElement(element, elementsMap, { index });
|
||||
for (const [element, update] of elementsUpdates) {
|
||||
mutateElement(element, elementsMap, update);
|
||||
}
|
||||
} catch (e) {
|
||||
// fallback to default sync
|
||||
@ -197,33 +189,19 @@ export const syncMovedIndices = (
|
||||
};
|
||||
|
||||
/**
|
||||
* Synchronizes all invalid fractional indices with the array order by mutating passed elements array.
|
||||
*
|
||||
* When `shouldCreateNewInstances` is true, it creates new instances of the elements, instead of mutating the existing ones.
|
||||
* Synchronizes all invalid fractional indices with the array order by mutating passed elements.
|
||||
*
|
||||
* WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.
|
||||
*/
|
||||
export const syncInvalidIndices = (
|
||||
elements: readonly ExcalidrawElement[],
|
||||
{
|
||||
shouldCreateNewInstances = false,
|
||||
}: {
|
||||
shouldCreateNewInstances?: boolean;
|
||||
} = {},
|
||||
): OrderedExcalidrawElement[] => {
|
||||
const elementsMap = arrayToMap(elements);
|
||||
const indicesGroups = getInvalidIndicesGroups(elements);
|
||||
const elementsUpdates = generateIndices(elements, indicesGroups);
|
||||
|
||||
for (const [element, { index, arrayIndex }] of elementsUpdates) {
|
||||
if (shouldCreateNewInstances) {
|
||||
const updatedElement = newElementWith(element, { index });
|
||||
|
||||
// mutate the element in the array with the new updated instance
|
||||
(elements as Mutable<typeof elements>)[arrayIndex] = updatedElement;
|
||||
} else {
|
||||
const elementsMap = arrayToMap(elements);
|
||||
mutateElement(element, elementsMap, { index });
|
||||
}
|
||||
for (const [element, update] of elementsUpdates) {
|
||||
mutateElement(element, elementsMap, update);
|
||||
}
|
||||
|
||||
return elements as OrderedExcalidrawElement[];
|
||||
@ -402,7 +380,7 @@ const generateIndices = (
|
||||
) => {
|
||||
const elementsUpdates = new Map<
|
||||
ExcalidrawElement,
|
||||
{ index: FractionalIndex; arrayIndex: number }
|
||||
{ index: FractionalIndex }
|
||||
>();
|
||||
|
||||
for (const indices of indicesGroups) {
|
||||
@ -420,7 +398,6 @@ const generateIndices = (
|
||||
|
||||
elementsUpdates.set(element, {
|
||||
index: fractionalIndices[i],
|
||||
arrayIndex: indices[i],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,7 +213,16 @@ export class Store {
|
||||
// using the same instance, since in history we have a check against `HistoryEntry`, so that we don't re-record the same delta again
|
||||
storeDelta = delta;
|
||||
} else {
|
||||
storeDelta = StoreDelta.calculate(prevSnapshot, snapshot);
|
||||
// calculate the deltas based on the previous and next snapshot
|
||||
const elementsDelta = snapshot.metadata.didElementsChange
|
||||
? ElementsDelta.calculate(prevSnapshot.elements, snapshot.elements)
|
||||
: ElementsDelta.empty();
|
||||
|
||||
const appStateDelta = snapshot.metadata.didAppStateChange
|
||||
? AppStateDelta.calculate(prevSnapshot.appState, snapshot.appState)
|
||||
: AppStateDelta.empty();
|
||||
|
||||
storeDelta = StoreDelta.create(elementsDelta, appStateDelta);
|
||||
}
|
||||
|
||||
if (!storeDelta.isEmpty()) {
|
||||
@ -496,24 +505,6 @@ export class StoreDelta {
|
||||
return new this(opts.id, elements, appState);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the delta between the previous and next snapshot.
|
||||
*/
|
||||
public static calculate(
|
||||
prevSnapshot: StoreSnapshot,
|
||||
nextSnapshot: StoreSnapshot,
|
||||
) {
|
||||
const elementsDelta = nextSnapshot.metadata.didElementsChange
|
||||
? ElementsDelta.calculate(prevSnapshot.elements, nextSnapshot.elements)
|
||||
: ElementsDelta.empty();
|
||||
|
||||
const appStateDelta = nextSnapshot.metadata.didAppStateChange
|
||||
? AppStateDelta.calculate(prevSnapshot.appState, nextSnapshot.appState)
|
||||
: AppStateDelta.empty();
|
||||
|
||||
return this.create(elementsDelta, appStateDelta);
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore a store delta instance from a DTO.
|
||||
*/
|
||||
@ -533,7 +524,9 @@ export class StoreDelta {
|
||||
id,
|
||||
elements: { added, removed, updated },
|
||||
}: DTO<StoreDelta>) {
|
||||
const elements = ElementsDelta.create(added, removed, updated);
|
||||
const elements = ElementsDelta.create(added, removed, updated, {
|
||||
shouldRedistribute: false,
|
||||
});
|
||||
|
||||
return new this(id, elements, AppStateDelta.empty());
|
||||
}
|
||||
@ -541,10 +534,27 @@ export class StoreDelta {
|
||||
/**
|
||||
* Inverse store delta, creates new instance of `StoreDelta`.
|
||||
*/
|
||||
public static inverse(delta: StoreDelta) {
|
||||
public static inverse(delta: StoreDelta): StoreDelta {
|
||||
return this.create(delta.elements.inverse(), delta.appState.inverse());
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply latest (remote) changes to the delta, creates new instance of `StoreDelta`.
|
||||
*/
|
||||
public static applyLatestChanges(
|
||||
delta: StoreDelta,
|
||||
elements: SceneElementsMap,
|
||||
modifierOptions: "deleted" | "inserted",
|
||||
): StoreDelta {
|
||||
return this.create(
|
||||
delta.elements.applyLatestChanges(elements, modifierOptions),
|
||||
delta.appState,
|
||||
{
|
||||
id: delta.id,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the delta to the passed elements and appState, does not modify the snapshot.
|
||||
*/
|
||||
@ -552,9 +562,12 @@ export class StoreDelta {
|
||||
delta: StoreDelta,
|
||||
elements: SceneElementsMap,
|
||||
appState: AppState,
|
||||
prevSnapshot: StoreSnapshot = StoreSnapshot.empty(),
|
||||
): [SceneElementsMap, AppState, boolean] {
|
||||
const [nextElements, elementsContainVisibleChange] =
|
||||
delta.elements.applyTo(elements);
|
||||
const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
|
||||
elements,
|
||||
prevSnapshot.elements,
|
||||
);
|
||||
|
||||
const [nextAppState, appStateContainsVisibleChange] =
|
||||
delta.appState.applyTo(appState, nextElements);
|
||||
@ -674,10 +687,11 @@ export class StoreSnapshot {
|
||||
nextElements.set(id, changedElement);
|
||||
}
|
||||
|
||||
const nextAppState = getObservedAppState({
|
||||
...this.appState,
|
||||
...change.appState,
|
||||
});
|
||||
const nextAppState = Object.assign(
|
||||
{},
|
||||
this.appState,
|
||||
change.appState,
|
||||
) as ObservedAppState;
|
||||
|
||||
return StoreSnapshot.create(nextElements, nextAppState, {
|
||||
// by default we assume that change is different from what we have in the snapshot
|
||||
@ -930,26 +944,18 @@ const getDefaultObservedAppState = (): ObservedAppState => {
|
||||
};
|
||||
};
|
||||
|
||||
export const getObservedAppState = (
|
||||
appState: AppState | ObservedAppState,
|
||||
): ObservedAppState => {
|
||||
export const getObservedAppState = (appState: AppState): ObservedAppState => {
|
||||
const observedAppState = {
|
||||
name: appState.name,
|
||||
editingGroupId: appState.editingGroupId,
|
||||
viewBackgroundColor: appState.viewBackgroundColor,
|
||||
selectedElementIds: appState.selectedElementIds,
|
||||
selectedGroupIds: appState.selectedGroupIds,
|
||||
editingLinearElementId: appState.editingLinearElement?.elementId || null,
|
||||
selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
|
||||
croppingElementId: appState.croppingElementId,
|
||||
activeLockedId: appState.activeLockedId,
|
||||
lockedMultiSelections: appState.lockedMultiSelections,
|
||||
editingLinearElementId:
|
||||
(appState as AppState).editingLinearElement?.elementId ?? // prefer app state, as it's likely newer
|
||||
(appState as ObservedAppState).editingLinearElementId ?? // fallback to observed app state, as it's likely older coming from a previous snapshot
|
||||
null,
|
||||
selectedLinearElementId:
|
||||
(appState as AppState).selectedLinearElement?.elementId ??
|
||||
(appState as ObservedAppState).selectedLinearElementId ??
|
||||
null,
|
||||
};
|
||||
|
||||
Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
|
||||
|
||||
@ -505,6 +505,8 @@ describe("group-related duplication", () => {
|
||||
mouse.up(frame.x + frame.width + 50, frame.y + frame.height + 50);
|
||||
});
|
||||
|
||||
// console.log(h.elements);
|
||||
|
||||
assertElements(h.elements, [
|
||||
{ id: frame.id },
|
||||
{ id: rectangle1.id, frameId: frame.id },
|
||||
|
||||
@ -1483,13 +1483,13 @@ const getArrowheadOptions = (flip: boolean) => {
|
||||
value: "crowfoot_one",
|
||||
text: t("labels.arrowhead_crowfoot_one"),
|
||||
icon: <ArrowheadCrowfootOneIcon flip={flip} />,
|
||||
keyBinding: "x",
|
||||
keyBinding: "c",
|
||||
},
|
||||
{
|
||||
value: "crowfoot_many",
|
||||
text: t("labels.arrowhead_crowfoot_many"),
|
||||
icon: <ArrowheadCrowfootIcon flip={flip} />,
|
||||
keyBinding: "c",
|
||||
keyBinding: "x",
|
||||
},
|
||||
{
|
||||
value: "crowfoot_one_or_many",
|
||||
|
||||
@ -104,11 +104,7 @@ import {
|
||||
Emitter,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import {
|
||||
getCommonBounds,
|
||||
getElementAbsoluteCoords,
|
||||
getObservedAppState,
|
||||
} from "@excalidraw/element";
|
||||
import { getCommonBounds, getElementAbsoluteCoords } from "@excalidraw/element";
|
||||
|
||||
import {
|
||||
bindOrUnbindLinearElement,
|
||||
@ -3997,30 +3993,22 @@ class App extends React.Component<AppProps, AppState> {
|
||||
}) => {
|
||||
const { elements, appState, collaborators, captureUpdate } = sceneData;
|
||||
|
||||
const nextElements = elements
|
||||
? syncInvalidIndices(elements, {
|
||||
// we have to create new instances here, otherwise scheduled micro action below won't be able to
|
||||
// detect the fractional index change and won't update the store snapshot
|
||||
shouldCreateNewInstances: true,
|
||||
})
|
||||
: undefined;
|
||||
const nextElements = elements ? syncInvalidIndices(elements) : undefined;
|
||||
|
||||
if (captureUpdate) {
|
||||
const nextElementsMap = elements
|
||||
? (arrayToMap(nextElements ?? []) as SceneElementsMap)
|
||||
: undefined;
|
||||
|
||||
const nextObservedAppState = appState
|
||||
? getObservedAppState({
|
||||
...this.store.snapshot.appState,
|
||||
...appState,
|
||||
})
|
||||
const nextAppState = appState
|
||||
? // new instance, with partial appstate applied to previously captured one, including hidden prop inside `prevCommittedAppState`
|
||||
Object.assign({}, this.store.snapshot.appState, appState)
|
||||
: undefined;
|
||||
|
||||
this.store.scheduleMicroAction({
|
||||
action: captureUpdate,
|
||||
elements: nextElementsMap,
|
||||
appState: nextObservedAppState,
|
||||
appState: nextAppState,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -564,7 +564,7 @@ export const convertElementTypes = (
|
||||
continue;
|
||||
}
|
||||
const fixedSegments: FixedSegment[] = [];
|
||||
for (let i = 1; i < nextPoints.length - 2; i++) {
|
||||
for (let i = 0; i < nextPoints.length - 1; i++) {
|
||||
fixedSegments.push({
|
||||
start: nextPoints[i],
|
||||
end: nextPoints[i + 1],
|
||||
@ -581,7 +581,6 @@ export const convertElementTypes = (
|
||||
);
|
||||
mutateElement(element, app.scene.getNonDeletedElementsMap(), {
|
||||
...updates,
|
||||
endArrowhead: "arrow",
|
||||
});
|
||||
} else {
|
||||
// if we're converting to non-elbow linear element, check if
|
||||
|
||||
@ -7,62 +7,11 @@ import {
|
||||
type Store,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
import type { StoreSnapshot } from "@excalidraw/element";
|
||||
|
||||
import type { SceneElementsMap } from "@excalidraw/element/types";
|
||||
|
||||
import type { AppState } from "./types";
|
||||
|
||||
export class HistoryDelta extends StoreDelta {
|
||||
/**
|
||||
* Apply the delta to the passed elements and appState, does not modify the snapshot.
|
||||
*/
|
||||
public applyTo(
|
||||
elements: SceneElementsMap,
|
||||
appState: AppState,
|
||||
snapshot: StoreSnapshot,
|
||||
): [SceneElementsMap, AppState, boolean] {
|
||||
const [nextElements, elementsContainVisibleChange] = this.elements.applyTo(
|
||||
elements,
|
||||
// used to fallback into local snapshot in case we couldn't apply the delta
|
||||
// due to a missing elements in the scene (force deleted)
|
||||
snapshot.elements,
|
||||
// we don't want to apply the `version` and `versionNonce` properties for history
|
||||
// as we always need to end up with a new version due to collaboration,
|
||||
// approaching each undo / redo as a new user operation
|
||||
{
|
||||
excludedProperties: new Set(["version", "versionNonce"]),
|
||||
},
|
||||
);
|
||||
|
||||
const [nextAppState, appStateContainsVisibleChange] = this.appState.applyTo(
|
||||
appState,
|
||||
nextElements,
|
||||
);
|
||||
|
||||
const appliedVisibleChanges =
|
||||
elementsContainVisibleChange || appStateContainsVisibleChange;
|
||||
|
||||
return [nextElements, nextAppState, appliedVisibleChanges];
|
||||
}
|
||||
|
||||
/**
|
||||
* Overriding once to avoid type casting everywhere.
|
||||
*/
|
||||
public static override calculate(
|
||||
prevSnapshot: StoreSnapshot,
|
||||
nextSnapshot: StoreSnapshot,
|
||||
) {
|
||||
return super.calculate(prevSnapshot, nextSnapshot) as HistoryDelta;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overriding once to avoid type casting everywhere.
|
||||
*/
|
||||
public static override inverse(delta: StoreDelta): HistoryDelta {
|
||||
return super.inverse(delta) as HistoryDelta;
|
||||
}
|
||||
}
|
||||
class HistoryEntry extends StoreDelta {}
|
||||
|
||||
export class HistoryChangedEvent {
|
||||
constructor(
|
||||
@ -76,8 +25,8 @@ export class History {
|
||||
[HistoryChangedEvent]
|
||||
>();
|
||||
|
||||
public readonly undoStack: HistoryDelta[] = [];
|
||||
public readonly redoStack: HistoryDelta[] = [];
|
||||
public readonly undoStack: HistoryEntry[] = [];
|
||||
public readonly redoStack: HistoryEntry[] = [];
|
||||
|
||||
public get isUndoStackEmpty() {
|
||||
return this.undoStack.length === 0;
|
||||
@ -99,16 +48,16 @@ export class History {
|
||||
* Do not re-record history entries, which were already pushed to undo / redo stack, as part of history action.
|
||||
*/
|
||||
public record(delta: StoreDelta) {
|
||||
if (delta.isEmpty() || delta instanceof HistoryDelta) {
|
||||
if (delta.isEmpty() || delta instanceof HistoryEntry) {
|
||||
return;
|
||||
}
|
||||
|
||||
// construct history entry, so once it's emitted, it's not recorded again
|
||||
const historyDelta = HistoryDelta.inverse(delta);
|
||||
const entry = HistoryEntry.inverse(delta);
|
||||
|
||||
this.undoStack.push(historyDelta);
|
||||
this.undoStack.push(entry);
|
||||
|
||||
if (!historyDelta.elements.isEmpty()) {
|
||||
if (!entry.elements.isEmpty()) {
|
||||
// don't reset redo stack on local appState changes,
|
||||
// as a simple click (unselect) could lead to losing all the redo entries
|
||||
// only reset on non empty elements changes!
|
||||
@ -125,7 +74,7 @@ export class History {
|
||||
elements,
|
||||
appState,
|
||||
() => History.pop(this.undoStack),
|
||||
(entry: HistoryDelta) => History.push(this.redoStack, entry),
|
||||
(entry: HistoryEntry) => History.push(this.redoStack, entry, elements),
|
||||
);
|
||||
}
|
||||
|
||||
@ -134,20 +83,20 @@ export class History {
|
||||
elements,
|
||||
appState,
|
||||
() => History.pop(this.redoStack),
|
||||
(entry: HistoryDelta) => History.push(this.undoStack, entry),
|
||||
(entry: HistoryEntry) => History.push(this.undoStack, entry, elements),
|
||||
);
|
||||
}
|
||||
|
||||
private perform(
|
||||
elements: SceneElementsMap,
|
||||
appState: AppState,
|
||||
pop: () => HistoryDelta | null,
|
||||
push: (entry: HistoryDelta) => void,
|
||||
pop: () => HistoryEntry | null,
|
||||
push: (entry: HistoryEntry) => void,
|
||||
): [SceneElementsMap, AppState] | void {
|
||||
try {
|
||||
let historyDelta = pop();
|
||||
let historyEntry = pop();
|
||||
|
||||
if (historyDelta === null) {
|
||||
if (historyEntry === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -160,10 +109,15 @@ export class History {
|
||||
let containsVisibleChange = false;
|
||||
|
||||
// iterate through the history entries in case they result in no visible changes
|
||||
while (historyDelta) {
|
||||
while (historyEntry) {
|
||||
try {
|
||||
[nextElements, nextAppState, containsVisibleChange] =
|
||||
historyDelta.applyTo(nextElements, nextAppState, prevSnapshot);
|
||||
StoreDelta.applyTo(
|
||||
historyEntry,
|
||||
nextElements,
|
||||
nextAppState,
|
||||
prevSnapshot,
|
||||
);
|
||||
|
||||
const nextSnapshot = prevSnapshot.maybeClone(
|
||||
action,
|
||||
@ -171,31 +125,24 @@ export class History {
|
||||
nextAppState,
|
||||
);
|
||||
|
||||
const change = StoreChange.create(prevSnapshot, nextSnapshot);
|
||||
|
||||
// update the history entry, so that it's the a new history entry instance
|
||||
// and so that it contains the latest changes in both inserted and deleted partials
|
||||
// including version and versionNonce or properties which were in the meantime updated by a remote client
|
||||
historyDelta = HistoryDelta.calculate(prevSnapshot, nextSnapshot);
|
||||
|
||||
// schedule immediate capture, so that it's emitted for the sync purposes
|
||||
this.store.scheduleMicroAction({
|
||||
action,
|
||||
change,
|
||||
delta: historyDelta,
|
||||
change: StoreChange.create(prevSnapshot, nextSnapshot),
|
||||
delta: historyEntry,
|
||||
});
|
||||
|
||||
prevSnapshot = nextSnapshot;
|
||||
} finally {
|
||||
// make sure to always push, even if the delta is corrupted
|
||||
push(historyDelta);
|
||||
push(historyEntry);
|
||||
}
|
||||
|
||||
if (containsVisibleChange) {
|
||||
break;
|
||||
}
|
||||
|
||||
historyDelta = pop();
|
||||
historyEntry = pop();
|
||||
}
|
||||
|
||||
return [nextElements, nextAppState];
|
||||
@ -208,7 +155,7 @@ export class History {
|
||||
}
|
||||
}
|
||||
|
||||
private static pop(stack: HistoryDelta[]): HistoryDelta | null {
|
||||
private static pop(stack: HistoryEntry[]): HistoryEntry | null {
|
||||
if (!stack.length) {
|
||||
return null;
|
||||
}
|
||||
@ -222,12 +169,18 @@ export class History {
|
||||
return null;
|
||||
}
|
||||
|
||||
private static push(stack: HistoryDelta[], entry: HistoryDelta) {
|
||||
if (entry.isEmpty()) {
|
||||
return;
|
||||
}
|
||||
private static push(
|
||||
stack: HistoryEntry[],
|
||||
entry: HistoryEntry,
|
||||
prevElements: SceneElementsMap,
|
||||
) {
|
||||
const inversedEntry = HistoryEntry.inverse(entry);
|
||||
const updatedEntry = HistoryEntry.applyLatestChanges(
|
||||
inversedEntry,
|
||||
prevElements,
|
||||
"inserted",
|
||||
);
|
||||
|
||||
const inversedEntry = HistoryDelta.inverse(entry);
|
||||
return stack.push(inversedEntry);
|
||||
return stack.push(updatedEntry);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1277,7 +1277,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -1526,7 +1525,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -1581,7 +1579,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -1617,11 +1614,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
||||
"id0": {
|
||||
"deleted": {
|
||||
"index": "a2",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"index": "a0",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -1863,7 +1858,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -1918,7 +1912,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -1954,11 +1947,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
||||
"id0": {
|
||||
"deleted": {
|
||||
"index": "a2",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"index": "a0",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -2168,7 +2159,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -2381,7 +2371,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -2413,11 +2402,9 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
|
||||
"id0": {
|
||||
"deleted": {
|
||||
"isDeleted": true,
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"isDeleted": false,
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -2661,7 +2648,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -2716,7 +2702,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 5,
|
||||
"width": 20,
|
||||
"x": 0,
|
||||
"y": 10,
|
||||
@ -2974,7 +2959,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -3029,7 +3013,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -3085,11 +3068,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
"id3": {
|
||||
@ -3097,11 +3078,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3345,7 +3324,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -3400,7 +3378,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -3428,11 +3405,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"strokeColor": "#e03131",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"strokeColor": "#1e1e1e",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3453,11 +3428,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"backgroundColor": "#a5d8ff",
|
||||
"version": 5,
|
||||
},
|
||||
"inserted": {
|
||||
"backgroundColor": "transparent",
|
||||
"version": 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3478,11 +3451,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"fillStyle": "cross-hatch",
|
||||
"version": 6,
|
||||
},
|
||||
"inserted": {
|
||||
"fillStyle": "solid",
|
||||
"version": 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3503,11 +3474,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"strokeStyle": "dotted",
|
||||
"version": 7,
|
||||
},
|
||||
"inserted": {
|
||||
"strokeStyle": "solid",
|
||||
"version": 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3528,11 +3497,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"roughness": 2,
|
||||
"version": 8,
|
||||
},
|
||||
"inserted": {
|
||||
"roughness": 1,
|
||||
"version": 7,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3553,11 +3520,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"opacity": 60,
|
||||
"version": 9,
|
||||
},
|
||||
"inserted": {
|
||||
"opacity": 100,
|
||||
"version": 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3591,7 +3556,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"roughness": 2,
|
||||
"strokeColor": "#e03131",
|
||||
"strokeStyle": "dotted",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"backgroundColor": "transparent",
|
||||
@ -3600,7 +3564,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"roughness": 1,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -3842,7 +3805,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -3897,7 +3859,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -3925,11 +3886,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"index": "Zz",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"index": "a1",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -4171,7 +4130,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -4226,7 +4184,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -4254,11 +4211,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"index": "Zz",
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"index": "a1",
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -4503,7 +4458,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -4558,7 +4512,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": 20,
|
||||
"y": 30,
|
||||
@ -4614,11 +4567,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
"id3": {
|
||||
@ -4626,11 +4577,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -4657,25 +4606,21 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"id0": {
|
||||
"deleted": {
|
||||
"groupIds": [],
|
||||
"version": 5,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
},
|
||||
"id3": {
|
||||
"deleted": {
|
||||
"groupIds": [],
|
||||
"version": 5,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [
|
||||
"id9",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -5794,7 +5739,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 10,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -5849,7 +5793,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 10,
|
||||
"x": 12,
|
||||
"y": 0,
|
||||
@ -7023,7 +6966,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 10,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
@ -7078,7 +7020,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 10,
|
||||
"x": 12,
|
||||
"y": 0,
|
||||
@ -7156,11 +7097,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
"groupIds": [
|
||||
"id12",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
"id3": {
|
||||
@ -7168,11 +7107,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
"groupIds": [
|
||||
"id12",
|
||||
],
|
||||
"version": 4,
|
||||
},
|
||||
"inserted": {
|
||||
"groupIds": [],
|
||||
"version": 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -9989,7 +9926,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] un
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 3,
|
||||
"width": 20,
|
||||
"x": -10,
|
||||
"y": 0,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -25,7 +25,7 @@ import "@excalidraw/utils/test-utils";
|
||||
|
||||
import { ElementsDelta, AppStateDelta } from "@excalidraw/element";
|
||||
|
||||
import { CaptureUpdateAction } from "@excalidraw/element";
|
||||
import { CaptureUpdateAction, StoreDelta } from "@excalidraw/element";
|
||||
|
||||
import type { LocalPoint, Radians } from "@excalidraw/math";
|
||||
|
||||
@ -34,7 +34,6 @@ import type {
|
||||
ExcalidrawFrameElement,
|
||||
ExcalidrawGenericElement,
|
||||
ExcalidrawLinearElement,
|
||||
ExcalidrawRectangleElement,
|
||||
ExcalidrawTextElement,
|
||||
FixedPointBinding,
|
||||
FractionalIndex,
|
||||
@ -54,8 +53,6 @@ import { getDefaultAppState } from "../appState";
|
||||
import { Excalidraw } from "../index";
|
||||
import * as StaticScene from "../renderer/staticScene";
|
||||
|
||||
import { HistoryDelta } from "../history";
|
||||
|
||||
import { API } from "./helpers/api";
|
||||
import { Keyboard, Pointer, UI } from "./helpers/ui";
|
||||
import {
|
||||
@ -123,19 +120,9 @@ describe("history", () => {
|
||||
|
||||
API.setElements([rect]);
|
||||
|
||||
const corrupedEntry = HistoryDelta.create(
|
||||
const corrupedEntry = StoreDelta.create(
|
||||
ElementsDelta.empty(),
|
||||
// delta can't be empty, otherwise it won't be pushed into the undo stack
|
||||
AppStateDelta.restore({
|
||||
delta: {
|
||||
inserted: {
|
||||
selectedElementIds: {},
|
||||
},
|
||||
deleted: {
|
||||
selectedElementIds: { [rect.id]: true },
|
||||
},
|
||||
},
|
||||
}),
|
||||
AppStateDelta.empty(),
|
||||
);
|
||||
|
||||
vi.spyOn(corrupedEntry.elements, "applyTo").mockImplementation(() => {
|
||||
@ -402,7 +389,7 @@ describe("history", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("should not push into redo stack when selection changes dooes not produce a visible change", async () => {
|
||||
it("should iterate through the history when selection changes do not produce visible change", async () => {
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
|
||||
const rect = UI.createElement("rectangle", { x: 10 });
|
||||
@ -433,18 +420,18 @@ describe("history", () => {
|
||||
expect(API.getSelectedElements().length).toBe(0);
|
||||
|
||||
Keyboard.redo(); // acceptable empty redo
|
||||
expect(API.getUndoStack().length).toBe(2); // empty change, nothing goes into undo stack
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(API.getSelectedElements().length).toBe(0);
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
assertSelectedElements(rect);
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(2);
|
||||
expect(API.getUndoStack().length).toBe(0); // now we iterated through the same undos!
|
||||
expect(API.getRedoStack().length).toBe(3);
|
||||
expect(API.getSelectedElements().length).toBe(0);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({ id: rect.id, isDeleted: true }),
|
||||
@ -1326,10 +1313,6 @@ describe("history", () => {
|
||||
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
|
||||
});
|
||||
|
||||
rect1 = h.elements[0] as ExcalidrawRectangleElement;
|
||||
text = h.elements[1] as ExcalidrawTextElement;
|
||||
rect2 = h.elements[2] as ExcalidrawRectangleElement;
|
||||
|
||||
// bind text1 to rect1
|
||||
mouse.select([rect1, text]);
|
||||
fireEvent.contextMenu(GlobalTestState.interactiveCanvas);
|
||||
@ -2379,10 +2362,10 @@ describe("history", () => {
|
||||
}),
|
||||
]);
|
||||
|
||||
// We reached the bottom, again we iterate through invisible changes and reach the top
|
||||
Keyboard.redo();
|
||||
assertSelectedElements();
|
||||
// We reached the bottom, now there is only one non-empty history delta, which will be pushed to the undo stack
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -2447,31 +2430,7 @@ describe("history", () => {
|
||||
]);
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(3);
|
||||
// visible change detected, so we don't iterate up again
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
id: rect1.id,
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: rect2.id,
|
||||
isDeleted: true,
|
||||
backgroundColor: transparent,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: rect3.id,
|
||||
isDeleted: true,
|
||||
x: 30,
|
||||
y: 30,
|
||||
}),
|
||||
]);
|
||||
|
||||
Keyboard.redo();
|
||||
// we iterate all the way up, as there are no visible changes
|
||||
expect(API.getUndoStack().length).toBe(4);
|
||||
expect(API.getUndoStack().length).toBe(5);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.elements).toEqual([
|
||||
@ -2530,8 +2489,8 @@ describe("history", () => {
|
||||
]);
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
// do not expect any selectedElementIds, as all relate to deleted elements
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.elements).toEqual([
|
||||
@ -2547,6 +2506,7 @@ describe("history", () => {
|
||||
expect.objectContaining({ id: rect1.id, isDeleted: false }),
|
||||
]);
|
||||
|
||||
// Simulate remote update
|
||||
API.updateScene({
|
||||
elements: [
|
||||
h.elements[0],
|
||||
@ -2563,13 +2523,14 @@ describe("history", () => {
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
// redo entry was calculated again with the latest undo, which goes back to nothing being selected
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(API.getSelectedElements()).toEqual([
|
||||
expect.objectContaining({ id: rect2.id, isDeleted: false }),
|
||||
]);
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
// now we again expect these as selected, as they got restored remotely and this redo entry was calculated in the beginning
|
||||
// now we again expect these as selected, as they got restored remotely
|
||||
expect(API.getSelectedElements()).toEqual([
|
||||
expect.objectContaining({ id: rect2.id }),
|
||||
expect.objectContaining({ id: rect3.id }),
|
||||
@ -2638,14 +2599,16 @@ describe("history", () => {
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(1); // iterated two steps back and reduce two empty entries into one!
|
||||
expect(API.getRedoStack().length).toBe(2); // iterated two steps back!
|
||||
expect(h.state.selectedGroupIds).toEqual({});
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(0); // no changes applied, so there is no new entry
|
||||
expect(API.getUndoStack().length).toBe(2); // iterated two steps forward!
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.state.selectedGroupIds).toEqual({});
|
||||
|
||||
Keyboard.undo();
|
||||
|
||||
// Simulate remote update
|
||||
API.updateScene({
|
||||
elements: [
|
||||
@ -2658,6 +2621,22 @@ describe("history", () => {
|
||||
],
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(h.state.selectedGroupIds).toEqual({ A: true });
|
||||
|
||||
// Simulate remote update
|
||||
API.updateScene({
|
||||
elements: [h.elements[0], h.elements[1], rect3, rect4],
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.state.selectedGroupIds).toEqual({ A: true, B: true });
|
||||
});
|
||||
|
||||
it("should iterate through the history when editing group contains only remotely deleted elements", async () => {
|
||||
@ -2702,7 +2681,33 @@ describe("history", () => {
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(0); // all changes relate to remotely deleted elements, there is no change and thus nothing to redo
|
||||
expect(API.getRedoStack().length).toBe(3);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
|
||||
// Simulate remote update
|
||||
API.updateScene({
|
||||
elements: [
|
||||
newElementWith(h.elements[0], {
|
||||
isDeleted: false,
|
||||
}),
|
||||
h.elements[1],
|
||||
],
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(h.state.editingGroupId).toBe("A");
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
});
|
||||
|
||||
@ -2739,13 +2744,13 @@ describe("history", () => {
|
||||
});
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(1); // iterated few entries back
|
||||
expect(API.getRedoStack().length).toBe(1); // added just one non-empty entry into redo stack
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(3);
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull();
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getUndoStack().length).toBe(4);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull();
|
||||
@ -2833,7 +2838,7 @@ describe("history", () => {
|
||||
// We iterated two steps as there was no change in order!
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(2);
|
||||
assertSelectedElements([]);
|
||||
expect(API.getSelectedElements().length).toBe(0);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({ id: rect1.id }), // a "Zx"
|
||||
expect.objectContaining({ id: rect3.id }), // c "Zy"
|
||||
@ -2841,7 +2846,7 @@ describe("history", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("should tolerate remote z-index changes with incorrect fractional indices", async () => {
|
||||
it("should iterate through the history when z-index changes do not produce visible change and we synced all indices", async () => {
|
||||
const rect1 = API.createElement({ type: "rectangle", x: 10, y: 10 });
|
||||
const rect2 = API.createElement({ type: "rectangle", x: 20, y: 20 });
|
||||
const rect3 = API.createElement({ type: "rectangle", x: 30, y: 30 });
|
||||
@ -2894,32 +2899,22 @@ describe("history", () => {
|
||||
// Simulate remote update
|
||||
API.updateScene({
|
||||
elements: [
|
||||
h.elements[1], // rect2
|
||||
h.elements[0], // rect3
|
||||
h.elements[2], // rect1
|
||||
h.elements[1], // rect2
|
||||
],
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
assertSelectedElements([rect2]);
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(2); // now we iterated two steps back!
|
||||
assertSelectedElements([]);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({ id: rect2.id }),
|
||||
expect.objectContaining({ id: rect3.id }),
|
||||
expect.objectContaining({ id: rect1.id }),
|
||||
]);
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
assertSelectedElements([rect2]);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({ id: rect3.id }),
|
||||
expect.objectContaining({ id: rect1.id }),
|
||||
expect.objectContaining({ id: rect2.id }),
|
||||
]);
|
||||
});
|
||||
|
||||
it("should not let remote changes to interfere with in progress freedraw", async () => {
|
||||
@ -3729,52 +3724,54 @@ describe("history", () => {
|
||||
captureUpdate: CaptureUpdateAction.NEVER,
|
||||
});
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
id: container.id,
|
||||
// previously bound text is preserved
|
||||
// text bindings are not duplicated
|
||||
boundElements: [{ id: remoteText.id, type: "text" }],
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: text.id,
|
||||
// unbound
|
||||
containerId: null,
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: remoteText.id,
|
||||
// preserved existing binding!
|
||||
containerId: container.id,
|
||||
isDeleted: false,
|
||||
}),
|
||||
]);
|
||||
runTwice(() => {
|
||||
Keyboard.redo();
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
id: container.id,
|
||||
// previously bound text is preserved
|
||||
// text bindings are not duplicated
|
||||
boundElements: [{ id: remoteText.id, type: "text" }],
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: text.id,
|
||||
// unbound
|
||||
containerId: null,
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: remoteText.id,
|
||||
// preserved existing binding!
|
||||
containerId: container.id,
|
||||
isDeleted: false,
|
||||
}),
|
||||
]);
|
||||
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
id: container.id,
|
||||
boundElements: [{ id: remoteText.id, type: "text" }],
|
||||
isDeleted: false, // isDeleted got remotely updated to false
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: text.id,
|
||||
containerId: null,
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: remoteText.id,
|
||||
// unbound
|
||||
containerId: container.id,
|
||||
isDeleted: false,
|
||||
}),
|
||||
]);
|
||||
Keyboard.undo();
|
||||
expect(API.getUndoStack().length).toBe(0);
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
id: container.id,
|
||||
boundElements: [{ id: remoteText.id, type: "text" }],
|
||||
isDeleted: false, // isDeleted got remotely updated to false
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: text.id,
|
||||
containerId: null,
|
||||
isDeleted: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: remoteText.id,
|
||||
// unbound
|
||||
containerId: container.id,
|
||||
isDeleted: false,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
it("should preserve latest remotely added binding and unbind previous one when the text is added through history", async () => {
|
||||
|
||||
@ -435,17 +435,12 @@ export const assertElements = <T extends AllPossibleKeys<ExcalidrawElement>>(
|
||||
expect(h.state.selectedElementIds).toEqual(selectedElementIds);
|
||||
};
|
||||
|
||||
const stripProps = (
|
||||
deltas: Record<string, { deleted: any; inserted: any }>,
|
||||
props: string[],
|
||||
) =>
|
||||
const stripSeed = (deltas: Record<string, { deleted: any; inserted: any }>) =>
|
||||
Object.entries(deltas).reduce((acc, curr) => {
|
||||
const { inserted, deleted, ...rest } = curr[1];
|
||||
|
||||
for (const prop of props) {
|
||||
delete inserted[prop];
|
||||
delete deleted[prop];
|
||||
}
|
||||
delete inserted.seed;
|
||||
delete deleted.seed;
|
||||
|
||||
acc[curr[0]] = {
|
||||
inserted,
|
||||
@ -462,9 +457,9 @@ export const checkpointHistory = (history: History, name: string) => {
|
||||
...x,
|
||||
elements: {
|
||||
...x.elements,
|
||||
added: stripProps(x.elements.added, ["seed", "versionNonce"]),
|
||||
removed: stripProps(x.elements.removed, ["seed", "versionNonce"]),
|
||||
updated: stripProps(x.elements.updated, ["seed", "versionNonce"]),
|
||||
added: stripSeed(x.elements.added),
|
||||
removed: stripSeed(x.elements.removed),
|
||||
updated: stripSeed(x.elements.updated),
|
||||
},
|
||||
})),
|
||||
).toMatchSnapshot(`[${name}] undo stack`);
|
||||
@ -474,9 +469,9 @@ export const checkpointHistory = (history: History, name: string) => {
|
||||
...x,
|
||||
elements: {
|
||||
...x.elements,
|
||||
added: stripProps(x.elements.added, ["seed", "versionNonce"]),
|
||||
removed: stripProps(x.elements.removed, ["seed", "versionNonce"]),
|
||||
updated: stripProps(x.elements.updated, ["seed", "versionNonce"]),
|
||||
added: stripSeed(x.elements.added),
|
||||
removed: stripSeed(x.elements.removed),
|
||||
updated: stripSeed(x.elements.updated),
|
||||
},
|
||||
})),
|
||||
).toMatchSnapshot(`[${name}] redo stack`);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user