fix: restore on paste or lib import (#3558)

This commit is contained in:
David Luzar 2021-05-09 21:42:12 +02:00 committed by GitHub
parent 5ee8e8249c
commit 91ab7f36e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 15 deletions

View File

@ -1281,7 +1281,8 @@ class App extends React.Component<AppProps, AppState> {
elements: readonly ExcalidrawElement[]; elements: readonly ExcalidrawElement[];
position: { clientX: number; clientY: number } | "cursor" | "center"; position: { clientX: number; clientY: number } | "cursor" | "center";
}) => { }) => {
const [minX, minY, maxX, maxY] = getCommonBounds(opts.elements); const elements = restoreElements(opts.elements);
const [minX, minY, maxX, maxY] = getCommonBounds(elements);
const elementsCenterX = distance(minX, maxX) / 2; const elementsCenterX = distance(minX, maxX) / 2;
const elementsCenterY = distance(minY, maxY) / 2; const elementsCenterY = distance(minY, maxY) / 2;
@ -1311,7 +1312,7 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize); const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
const oldIdToDuplicatedId = new Map(); const oldIdToDuplicatedId = new Map();
const newElements = opts.elements.map((element) => { const newElements = elements.map((element) => {
const newElement = duplicateElement( const newElement = duplicateElement(
this.state.editingGroupId, this.state.editingGroupId,
groupIdMap, groupIdMap,
@ -1328,11 +1329,7 @@ class App extends React.Component<AppProps, AppState> {
...this.scene.getElementsIncludingDeleted(), ...this.scene.getElementsIncludingDeleted(),
...newElements, ...newElements,
]; ];
fixBindingsAfterDuplication( fixBindingsAfterDuplication(nextElements, elements, oldIdToDuplicatedId);
nextElements,
opts.elements,
oldIdToDuplicatedId,
);
this.scene.replaceAllElements(nextElements); this.scene.replaceAllElements(nextElements);
this.history.resumeRecording(); this.history.resumeRecording();

View File

@ -2,7 +2,6 @@ import { loadLibraryFromBlob } from "./blob";
import { LibraryItems, LibraryItem } from "../types"; import { LibraryItems, LibraryItem } from "../types";
import { restoreElements } from "./restore"; import { restoreElements } from "./restore";
import { getNonDeletedElements } from "../element"; import { getNonDeletedElements } from "../element";
import { NonDeleted, ExcalidrawElement } from "../element/types";
import App from "../components/App"; import App from "../components/App";
class Library { class Library {
@ -18,6 +17,11 @@ class Library {
this.libraryCache = []; this.libraryCache = [];
}; };
restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
const elements = getNonDeletedElements(restoreElements(libraryItem));
return elements.length ? elements : null;
};
/** imports library (currently merges, removing duplicates) */ /** imports library (currently merges, removing duplicates) */
async importLibrary(blob: Blob) { async importLibrary(blob: Blob) {
const libraryFile = await loadLibraryFromBlob(blob); const libraryFile = await loadLibraryFromBlob(blob);
@ -52,12 +56,12 @@ class Library {
const existingLibraryItems = await this.loadLibrary(); const existingLibraryItems = await this.loadLibrary();
const filtered = libraryFile.library!.reduce((acc, libraryItem) => { const filtered = libraryFile.library!.reduce((acc, libraryItem) => {
const restored = getNonDeletedElements(restoreElements(libraryItem)); const restoredItem = this.restoreLibraryItem(libraryItem);
if (isUniqueitem(existingLibraryItems, restored)) { if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
acc.push(restored); acc.push(restoredItem);
} }
return acc; return acc;
}, [] as (readonly NonDeleted<ExcalidrawElement>[])[]); }, [] as Mutable<LibraryItems>);
await this.saveLibrary([...existingLibraryItems, ...filtered]); await this.saveLibrary([...existingLibraryItems, ...filtered]);
} }
@ -74,9 +78,13 @@ class Library {
return resolve([]); return resolve([]);
} }
const items = libraryItems.map( const items = libraryItems.reduce((acc, item) => {
(elements) => restoreElements(elements) as LibraryItem, const restoredItem = this.restoreLibraryItem(item);
); if (restoredItem) {
acc.push(item);
}
return acc;
}, [] as Mutable<LibraryItems>);
// clone to ensure we don't mutate the cached library elements in the app // clone to ensure we don't mutate the cached library elements in the app
this.libraryCache = JSON.parse(JSON.stringify(items)); this.libraryCache = JSON.parse(JSON.stringify(items));