From 6d5813e9d2c5fe08b8069d666cf6a66601b4595c Mon Sep 17 00:00:00 2001 From: ad1992 Date: Thu, 13 Jan 2022 12:57:08 +0530 Subject: [PATCH] fix: restore elements and app state in updateScene --- src/components/App.tsx | 13 +- src/packages/excalidraw/example/App.js | 61 ++++++++ .../excalidraw/example/initialData.js | 146 +++++++++++++++--- 3 files changed, 196 insertions(+), 24 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index a582e26dd..a2854f700 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -72,7 +72,12 @@ import { import { loadFromBlob } from "../data"; import { isValidLibrary } from "../data/json"; import Library from "../data/library"; -import { restore, restoreElements, restoreLibraryItems } from "../data/restore"; +import { + restore, + restoreAppState, + restoreElements, + restoreLibraryItems, +} from "../data/restore"; import { dragNewElement, dragSelectedElements, @@ -1590,11 +1595,13 @@ class App extends React.Component { } if (sceneData.appState) { - this.setState(sceneData.appState); + this.setState(restoreAppState(sceneData.appState, null)); } if (sceneData.elements) { - this.scene.replaceAllElements(sceneData.elements); + this.scene.replaceAllElements( + restoreElements(sceneData.elements, null), + ); } if (sceneData.collaborators) { diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js index ecf6ab0ef..95153c9e0 100644 --- a/src/packages/excalidraw/example/App.js +++ b/src/packages/excalidraw/example/App.js @@ -79,6 +79,67 @@ export default function App() { seed: 1968410350, groupIds: [], }, + { + id: "Ioiq-J6pE6vMftvReHcq7", + type: "rectangle", + x: 530.01171875, + y: 120.31640625, + width: 158.34375, + height: 175.52734375, + angle: 0, + strokeColor: "#000000", + backgroundColor: "#e64980", + fillStyle: "solid", + strokeWidth: 1, + strokeStyle: "solid", + roughness: 1, + opacity: 100, + groupIds: [], + strokeSharpness: "sharp", + seed: 1752793487, + version: 243, + versionNonce: 1367252367, + isDeleted: false, + boundElementIds: ["QEIIo0aX3LIkipph5r9Vc"], + updated: 1642057965561, + }, + { + id: "QEIIo0aX3LIkipph5r9Vc", + type: "arrow", + x: 300.73046875, + y: 200.47265625, + width: 231.7578125, + height: 9.823413575122089, + angle: 0, + strokeColor: "#000000", + backgroundColor: "#e64980", + fillStyle: "solid", + strokeWidth: 1, + strokeStyle: "solid", + roughness: 1, + opacity: 100, + groupIds: [], + strokeSharpness: "round", + seed: 1335966913, + version: 180, + versionNonce: 24053473, + isDeleted: false, + boundElementIds: null, + updated: 1642057965562, + points: [ + [0, 0], + [231.7578125, -9.823413575122089], + ], + lastCommittedPoint: null, + startBinding: null, + endBinding: { + elementId: "Ioiq-J6pE6vMftvReHcq7", + focus: 0.012598149333175906, + gap: 8.5234375, + }, + startArrowhead: null, + endArrowhead: "arrow", + }, ], appState: { viewBackgroundColor: "#edf2ff", diff --git a/src/packages/excalidraw/example/initialData.js b/src/packages/excalidraw/example/initialData.js index 6a6cc9786..b254bc230 100644 --- a/src/packages/excalidraw/example/initialData.js +++ b/src/packages/excalidraw/example/initialData.js @@ -2,45 +2,149 @@ export default { elements: [ { type: "rectangle", - version: 141, - versionNonce: 361174001, + version: 75, + versionNonce: 812169490, isDeleted: false, - id: "oDVXy8D6rom3H1-LLH2-f", - fillStyle: "hachure", + id: "6sVDp9mCGQTomD9Cg5w1b", + fillStyle: "solid", strokeWidth: 1, strokeStyle: "solid", roughness: 1, opacity: 100, angle: 0, - x: 100.50390625, - y: 93.67578125, + x: 211.04296875, + y: -575.68359375, strokeColor: "#000000", - backgroundColor: "transparent", - width: 186.47265625, - height: 141.9765625, - seed: 1968410350, + backgroundColor: "#e64980", + width: 163, + height: 185, + seed: 1640006454, groupIds: [], + strokeSharpness: "sharp", + boundElements: [ + { + type: "text", + id: "MB9CSH621UIKH8MEgOhaM", + }, + ], + updated: 1642057378650, }, { - id: "-xMIs_0jIFqvpx-R9UnaG", - type: "ellipse", - x: 300.5703125, - y: 190.69140625, - width: 198.21875, - height: 129.51171875, + type: "text", + version: 81, + versionNonce: 2146024018, + isDeleted: false, + id: "MB9CSH621UIKH8MEgOhaM", + fillStyle: "solid", + strokeWidth: 1, + strokeStyle: "solid", + roughness: 1, + opacity: 100, + angle: 0, + x: 216.04296875, + y: -520.68359375, + strokeColor: "#000000", + backgroundColor: "#e64980", + width: 153, + height: 75, + seed: 802336758, + groupIds: [], + strokeSharpness: "sharp", + boundElements: [], + updated: 1642057383302, + fontSize: 20, + fontFamily: 1, + text: "Hello World!!!\n\nSticky notes:)", + baseline: 68, + textAlign: "center", + verticalAlign: "middle", + containerId: "6sVDp9mCGQTomD9Cg5w1b", + originalText: "Hello World!!!\n\nSticky notes:)", + }, + { + type: "diamond", + version: 49, + versionNonce: 2072814570, + isDeleted: false, + id: "lpW0Dxf_d5ZH4KencU57Q", + fillStyle: "solid", + strokeWidth: 1, + strokeStyle: "solid", + roughness: 1, + opacity: 100, + angle: 0, + x: 439.9140625, + y: -667.89453125, + strokeColor: "#000000", + backgroundColor: "#15aabf", + width: 172.76953125, + height: 194.109375, + seed: 1339998698, + groupIds: [], + strokeSharpness: "sharp", + boundElements: [], + updated: 1639729533735, + }, + { + id: "Ioiq-J6pE6vMftvReHcq7", + type: "rectangle", + x: 643.01171875, + y: -500.31640625, + width: 158.34375, + height: 175.52734375, angle: 0, strokeColor: "#000000", - backgroundColor: "transparent", - fillStyle: "hachure", + backgroundColor: "#e64980", + fillStyle: "solid", strokeWidth: 1, strokeStyle: "solid", roughness: 1, opacity: 100, groupIds: [], - seed: 957947807, - version: 47, - versionNonce: 1128618623, + strokeSharpness: "sharp", + seed: 1752793487, + version: 243, + versionNonce: 1367252367, isDeleted: false, + boundElementIds: ["QEIIo0aX3LIkipph5r9Vc"], + updated: 1642057965561, + }, + { + id: "QEIIo0aX3LIkipph5r9Vc", + type: "arrow", + x: 402.73046875, + y: -400.47265625, + width: 231.7578125, + height: 9.823413575122089, + angle: 0, + strokeColor: "#000000", + backgroundColor: "#e64980", + fillStyle: "solid", + strokeWidth: 1, + strokeStyle: "solid", + roughness: 1, + opacity: 100, + groupIds: [], + strokeSharpness: "round", + seed: 1335966913, + version: 180, + versionNonce: 24053473, + isDeleted: false, + boundElementIds: null, + updated: 1642057965562, + points: [ + [0, 0], + [231.7578125, -9.823413575122089], + ], + lastCommittedPoint: null, + startBinding: null, + endBinding: { + elementId: "Ioiq-J6pE6vMftvReHcq7", + focus: 0.012598149333175906, + gap: 8.5234375, + }, + startArrowhead: null, + endArrowhead: "arrow", }, ], appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },