sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to rough.js 4.0.1 (#363)

Browse Source 
* upgrade to latest rough.js

* remove random.ts because roughjs now supports seeding.
This commit is contained in:
Preet 2020-01-13 11:04:28 -08:00 committed by Christopher Chedeau
parent bc2bae2a9a
commit 8dbd1b80df
7 changed files with 66 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

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

2
package.json
View File

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

2
src/element/newElement.ts
View File

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

2
src/index.tsx
View File

@ -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 {

18
src/random.ts
View File

@ -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;
}

122
src/renderer/renderElement.ts
View File

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

2
src/scene/data.ts
View File

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