From 4b7eb2f04ab6b6032125f4a761ad01ee79d5111f Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <me@gasim.xyz>
Date: Tue, 7 Jan 2020 23:49:39 +0400
Subject: [PATCH] Add IDs to elements (#236)

* Add IDs to elements

- Move round rect function within the renderer

* Generate IDs using nanoid

* If element ID does not exist, add the ID during restoration
---
 package-lock.json                    | 14 ++++++++++++++
 package.json                         |  2 ++
 src/element/newElement.ts            |  2 ++
 src/renderer/renderScene.ts          |  2 +-
 src/{scene => renderer}/roundRect.ts |  0
 src/scene/data.ts                    |  2 ++
 6 files changed, 21 insertions(+), 1 deletion(-)
 rename src/{scene => renderer}/roundRect.ts (100%)

diff --git a/package-lock.json b/package-lock.json
index 6243dba9..c9398675 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1473,6 +1473,7 @@
       "version": "24.0.25",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.25.tgz",
       "integrity": "sha512-hnP1WpjN4KbGEK4dLayul6lgtys6FPz0UfxMeMQCv0M+sTnzN3ConfiO72jHgLxl119guHgI8gLqDOrRLsyp2g==",
+      "dev": true,
       "requires": {
         "jest-diff": "^24.3.0"
       }
@@ -1487,6 +1488,14 @@
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
+    "@types/nanoid": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/nanoid/-/nanoid-2.1.0.tgz",
+      "integrity": "sha512-xdkn/oRTA0GSNPLIKZgHWqDTWZsVrieKomxJBOQUK9YDD+zfSgmwD5t4WJYra5S7XyhTw7tfvwznW+pFexaepQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/node": {
       "version": "13.1.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.2.tgz",
@@ -9848,6 +9857,11 @@
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
     },
+    "nanoid": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.9.tgz",
+      "integrity": "sha512-J2X7aUpdmTlkAuSe9WaQ5DsTZZPW1r/zmEWKsGhbADO6Gm9FMd2ZzJ8NhsmP4OtA9oFhXfxNqPlreHEDOGB4sg=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
diff --git a/package.json b/package.json
index cfd2ee8e..fc895d5b 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
+    "nanoid": "^2.1.9",
     "react": "16.12.0",
     "react-color": "^2.17.3",
     "react-dom": "16.12.0",
@@ -14,6 +15,7 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.25",
+    "@types/nanoid": "^2.1.0",
     "@types/react": "16.9.17",
     "@types/react-color": "^3.0.1",
     "@types/react-dom": "16.9.4",
diff --git a/src/element/newElement.ts b/src/element/newElement.ts
index 78586edf..57d2c954 100644
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@@ -1,4 +1,5 @@
 import { randomSeed } from "../random";
+import nanoid from "nanoid";
 
 export function newElement(
   type: string,
@@ -14,6 +15,7 @@ export function newElement(
   height = 0
 ) {
   const element = {
+    id: nanoid(),
     type,
     x,
     y,
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index dc4c5934..0901d47d 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -3,7 +3,7 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import { ExcalidrawElement } from "../element/types";
 import { getElementAbsoluteCoords, handlerRectangles } from "../element";
 
-import { roundRect } from "../scene/roundRect";
+import { roundRect } from "./roundRect";
 import { SceneState } from "../scene/types";
 import {
   getScrollBars,
diff --git a/src/scene/roundRect.ts b/src/renderer/roundRect.ts
similarity index 100%
rename from src/scene/roundRect.ts
rename to src/renderer/roundRect.ts
diff --git a/src/scene/data.ts b/src/scene/data.ts
index 892efef5..bfcaf490 100644
--- a/src/scene/data.ts
+++ b/src/scene/data.ts
@@ -6,6 +6,7 @@ import { getElementAbsoluteCoords } from "../element";
 
 import { renderScene } from "../renderer";
 import { AppState } from "../types";
+import nanoid from "nanoid";
 
 const LOCAL_STORAGE_KEY = "excalidraw";
 const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
@@ -143,6 +144,7 @@ function restore(
           : savedElements)
       );
       elements.forEach((element: ExcalidrawElement) => {
+        element.id = element.id || nanoid();
         element.fillStyle = element.fillStyle || "hachure";
         element.strokeWidth = element.strokeWidth || 1;
         element.roughness = element.roughness || 1;