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/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;

src/scene/roundRect.ts

@@ -1,37 +0,0 @@
-/**
- * https://stackoverflow.com/a/3368118
- * Draws a rounded rectangle using the current state of the canvas.
- * @param {CanvasRenderingContext2D} context
- * @param {Number} x The top left x coordinate
- * @param {Number} y The top left y coordinate
- * @param {Number} width The width of the rectangle
- * @param {Number} height The height of the rectangle
- * @param {Number} radius The corner radius
- */
-export function roundRect(
-  context: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-) {
-  context.beginPath();
-  context.moveTo(x + radius, y);
-  context.lineTo(x + width - radius, y);
-  context.quadraticCurveTo(x + width, y, x + width, y + radius);
-  context.lineTo(x + width, y + height - radius);
-  context.quadraticCurveTo(
-    x + width,
-    y + height,
-    x + width - radius,
-    y + height
-  );
-  context.lineTo(x + radius, y + height);
-  context.quadraticCurveTo(x, y + height, x, y + height - radius);
-  context.lineTo(x, y + radius);
-  context.quadraticCurveTo(x, y, x + radius, y);
-  context.closePath();
-  context.fill();
-  context.stroke();
-}