Update to rough.js 4.0.1 (#363)

* upgrade to latest rough.js

* remove random.ts because roughjs now supports seeding.

package-lock.json

@@ -12833,12 +12833,9 @@
       }
     },
     "roughjs": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-3.1.0.tgz",
-      "integrity": "sha512-WJIKyWxBlEIuMeK0foUZD1KVYzT6Dn62ksawZrlu3BzxUxgtPdnlCMDgX/C3N5gxj/AMRazstKOFm70tqTo5Bw==",
-      "requires": {
-        "workly": "^1.2.0"
-      }
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.0.1.tgz",
+      "integrity": "sha512-uw5PHL7yXjjUAnIylegD1TzsygaeDLs4qrMHdu+9xY16Fd1Db8L8qHm7YQTeLOoqqjhlhDtMGdWda/Qw8rX3ww=="
     },
     "rsvp": {
       "version": "4.8.5",
@@ -15578,11 +15575,6 @@
         "microevent.ts": "~0.1.1"
       }
     },
-    "workly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/workly/-/workly-1.3.0.tgz",
-      "integrity": "sha512-eozpibnwnyvsWJEoADCfo3171Ncl4J/57PQnZN37eoVgQG7buf3KEpPNfewDKH4OXf3eAZaUAF57i4ko5zY9Cw=="
-    },
     "wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",

package.json

@@ -10,7 +10,7 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-scripts": "3.3.0",
-    "roughjs": "3.1.0"
+    "roughjs": "4.0.1"
   },
   "devDependencies": {
     "@types/jest": "^24.0.25",

src/element/newElement.ts

@@ -1,4 +1,4 @@
-import { randomSeed } from "../random";
+import { randomSeed } from "roughjs/bin/math";
 import nanoid from "nanoid";
 import { Drawable } from "roughjs/bin/core";
 

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import rough from "roughjs/bin/wrappers/rough";
+import rough from "roughjs/bin/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
 
 import {

src/random.ts

@@ -1,18 +0,0 @@
-// https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript/47593316#47593316
-export const LCG = (seed: number) => () =>
-  ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
-
-export function randomSeed() {
-  return Math.floor(Math.random() * 2 ** 31);
-}
-
-// Unfortunately, roughjs doesn't support a seed attribute (https://github.com/pshihn/rough/issues/27).
-// We can achieve the same result by overriding the Math.random function with a
-// pseudo random generator that supports a random seed and swapping it back after.
-export function withCustomMathRandom<T>(seed: number, cb: () => T): T {
-  const random = Math.random;
-  Math.random = LCG(seed);
-  const result = cb();
-  Math.random = random;
-  return result;
-}

src/renderer/renderElement.ts

@@ -1,5 +1,3 @@
-import { withCustomMathRandom } from "../random";
-
 import { ExcalidrawElement } from "../element/types";
 import { isTextElement } from "../element/typeChecks";
 import { getDiamondPoints, getArrowPoints } from "../element/bounds";
@@ -19,17 +17,16 @@ export function renderElement(
     context.fillStyle = fillStyle;
   } else if (element.type === "rectangle") {
     if (!element.shape) {
-      element.shape = withCustomMathRandom(element.seed, () => {
-        return generator.rectangle(0, 0, element.width, element.height, {
-          stroke: element.strokeColor,
-          fill:
-            element.backgroundColor === "transparent"
-              ? undefined
-              : element.backgroundColor,
-          fillStyle: element.fillStyle,
-          strokeWidth: element.strokeWidth,
-          roughness: element.roughness
-        });
+      element.shape = generator.rectangle(0, 0, element.width, element.height, {
+        stroke: element.strokeColor,
+        fill:
+          element.backgroundColor === "transparent"
+            ? undefined
+            : element.backgroundColor,
+        fillStyle: element.fillStyle,
+        strokeWidth: element.strokeWidth,
+        roughness: element.roughness,
+        seed: element.seed
       });
     }
 
@@ -38,36 +35,35 @@ export function renderElement(
     context.globalAlpha = 1;
   } else if (element.type === "diamond") {
     if (!element.shape) {
-      element.shape = withCustomMathRandom(element.seed, () => {
-        const [
-          topX,
-          topY,
-          rightX,
-          rightY,
-          bottomX,
-          bottomY,
-          leftX,
-          leftY
-        ] = getDiamondPoints(element);
-        return generator.polygon(
-          [
-            [topX, topY],
-            [rightX, rightY],
-            [bottomX, bottomY],
-            [leftX, leftY]
-          ],
-          {
-            stroke: element.strokeColor,
-            fill:
-              element.backgroundColor === "transparent"
-                ? undefined
-                : element.backgroundColor,
-            fillStyle: element.fillStyle,
-            strokeWidth: element.strokeWidth,
-            roughness: element.roughness
-          }
-        );
-      });
+      const [
+        topX,
+        topY,
+        rightX,
+        rightY,
+        bottomX,
+        bottomY,
+        leftX,
+        leftY
+      ] = getDiamondPoints(element);
+      element.shape = generator.polygon(
+        [
+          [topX, topY],
+          [rightX, rightY],
+          [bottomX, bottomY],
+          [leftX, leftY]
+        ],
+        {
+          stroke: element.strokeColor,
+          fill:
+            element.backgroundColor === "transparent"
+              ? undefined
+              : element.backgroundColor,
+          fillStyle: element.fillStyle,
+          strokeWidth: element.strokeWidth,
+          roughness: element.roughness,
+          seed: element.seed
+        }
+      );
     }
 
     context.globalAlpha = element.opacity / 100;
@@ -75,23 +71,22 @@ export function renderElement(
     context.globalAlpha = 1;
   } else if (element.type === "ellipse") {
     if (!element.shape) {
-      element.shape = withCustomMathRandom(element.seed, () =>
-        generator.ellipse(
-          element.width / 2,
-          element.height / 2,
-          element.width,
-          element.height,
-          {
-            stroke: element.strokeColor,
-            fill:
-              element.backgroundColor === "transparent"
-                ? undefined
-                : element.backgroundColor,
-            fillStyle: element.fillStyle,
-            strokeWidth: element.strokeWidth,
-            roughness: element.roughness
-          }
-        )
+      element.shape = generator.ellipse(
+        element.width / 2,
+        element.height / 2,
+        element.width,
+        element.height,
+        {
+          stroke: element.strokeColor,
+          fill:
+            element.backgroundColor === "transparent"
+              ? undefined
+              : element.backgroundColor,
+          fillStyle: element.fillStyle,
+          strokeWidth: element.strokeWidth,
+          roughness: element.roughness,
+          seed: element.seed
+        }
       );
     }
 
@@ -103,18 +98,19 @@ export function renderElement(
     const options = {
       stroke: element.strokeColor,
       strokeWidth: element.strokeWidth,
-      roughness: element.roughness
+      roughness: element.roughness,
+      seed: element.seed
     };
 
     if (!element.shape) {
-      element.shape = withCustomMathRandom(element.seed, () => [
+      element.shape = [
         //    \
         generator.line(x3, y3, x2, y2, options),
         // -----
         generator.line(x1, y1, x2, y2, options),
         //    /
         generator.line(x4, y4, x2, y2, options)
-      ]);
+      ];
     }
 
     context.globalAlpha = element.opacity / 100;

src/scene/data.ts

@@ -1,4 +1,4 @@
-import rough from "roughjs/bin/wrappers/rough";
+import rough from "roughjs/bin/rough";
 
 import { ExcalidrawElement } from "../element/types";