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

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;