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

@@ -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",

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",

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,

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,

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;