From 8dbd1b80dfe27e3d38c8f528d59bcf994eed4c6e Mon Sep 17 00:00:00 2001 From: Preet <833927+pshihn@users.noreply.github.com> Date: Mon, 13 Jan 2020 11:04:28 -0800 Subject: [PATCH] Update to rough.js 4.0.1 (#363) * upgrade to latest rough.js * remove random.ts because roughjs now supports seeding. --- package-lock.json | 14 +--- package.json | 2 +- src/element/newElement.ts | 2 +- src/index.tsx | 2 +- src/random.ts | 18 ----- src/renderer/renderElement.ts | 122 ++++++++++++++++------------------ src/scene/data.ts | 2 +- 7 files changed, 66 insertions(+), 96 deletions(-) delete mode 100644 src/random.ts diff --git a/package-lock.json b/package-lock.json index 50af876d..067c8168 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 26ac9ca0..8149dc62 100644 --- a/package.json +++ b/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", diff --git a/src/element/newElement.ts b/src/element/newElement.ts index a347d1fd..c583670d 100644 --- a/src/element/newElement.ts +++ b/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"; diff --git a/src/index.tsx b/src/index.tsx index a018987f..1912fa40 100644 --- a/src/index.tsx +++ b/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 { diff --git a/src/random.ts b/src/random.ts deleted file mode 100644 index 9147c80c..00000000 --- a/src/random.ts +++ /dev/null @@ -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(seed: number, cb: () => T): T { - const random = Math.random; - Math.random = LCG(seed); - const result = cb(); - Math.random = random; - return result; -} diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index d468d33d..ea63f791 100644 --- a/src/renderer/renderElement.ts +++ b/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; diff --git a/src/scene/data.ts b/src/scene/data.ts index 3ef366f7..5808e707 100644 --- a/src/scene/data.ts +++ b/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";