wip: adaptive roughness

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@dwelle/tunnel-rat": "0.1.1",
+    "@excalidraw/roughjs": "4.5.3",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",

public/index.html

@@ -94,7 +94,7 @@
         // if its present redirect
         document.cookie.includes("excplus-autoredirect=true")
       ) {
-        window.location.href = "https://app.excalidraw.com";
+        // window.location.href = "https://app.excalidraw.com";
       }
     </script>
 

src/components/App.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";
 
-import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
 

src/element/bounds.ts

@@ -7,8 +7,8 @@ import {
   ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
-import { Drawable, Op } from "roughjs/bin/core";
+import { Drawable, Op } from "@excalidraw/roughjs/bin/core";
 import { Point } from "../types";
 import {
   getShapeForElement,

src/element/collision.ts

@@ -30,7 +30,7 @@ import {
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
 import { Point } from "../types";
-import { Drawable } from "roughjs/bin/core";
+import { Drawable } from "@excalidraw/roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
 import { hasBoundTextElement, isImageElement } from "./typeChecks";

src/random.ts

@@ -1,4 +1,4 @@
-import { Random } from "roughjs/bin/math";
+import { Random } from "@excalidraw/roughjs/bin/math";
 import { nanoid } from "nanoid";
 import { isTestEnv } from "./utils";
 

src/renderer/renderElement.ts

@@ -21,15 +21,15 @@ import {
   getElementAbsoluteCoords,
   getArrowheadPoints,
 } from "../element/bounds";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { Drawable, Options } from "roughjs/bin/core";
+import { Drawable, Options } from "@excalidraw/roughjs/bin/core";
-import { RoughSVG } from "roughjs/bin/svg";
+import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
-import { RoughGenerator } from "roughjs/bin/generator";
+import { RoughGenerator } from "@excalidraw/roughjs/bin/generator";
 
 import { RenderConfig } from "../scene/types";
 import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
 import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
@@ -389,6 +389,16 @@ export const setShapeForElement = <T extends ExcalidrawElement>(
 export const invalidateShapeForElement = (element: ExcalidrawElement) =>
   shapeCache.delete(element);
 
+function adjustRoughness(size: number, roughness: number): number {
+  if (size >= 50) {
+    return roughness;
+  }
+  const factor = 2 + (50 - size) / 10;
+
+  // console.log({ ret: roughness / factor, roughness, factor, size });
+  return roughness / factor;
+}
+
 export const generateRoughOptions = (
   element: ExcalidrawElement,
   continuousPath = false,
@@ -415,7 +425,10 @@ export const generateRoughOptions = (
     // calculate them (and we don't want the fills to be modified)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
-    roughness: element.roughness,
+    roughness: adjustRoughness(
+      Math.min(element.width, element.height),
+      element.roughness,
+    ),
     stroke: element.strokeColor,
     preserveVertices: continuousPath,
   };

src/renderer/renderScene.ts

@@ -1,5 +1,5 @@
-import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { RoughSVG } from "roughjs/bin/svg";
+import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
 import oc from "open-color";
 
 import { AppState, BinaryFiles, Point, Zoom } from "../types";

src/scene/export.ts

@@ -1,4 +1,4 @@
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";

src/types.ts

@@ -16,7 +16,7 @@ import {
   StrokeRoundness,
 } from "./element/types";
 import { SHAPES } from "./shapes";
-import { Point as RoughPoint } from "roughjs/bin/geometry";
+import { Point as RoughPoint } from "@excalidraw/roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
 import { ImportedDataState } from "./data/types";

yarn.lock

@@ -1484,6 +1484,15 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"
   integrity sha512-rFIq8+A8WvkEzBsF++Rw6gzxE+hU3ZNkdg8foI+Upz2y/rOC/gUpWJaggPbCkoH3nlREVU59axQjZ1+F6ePRGg==
 
+"@excalidraw/roughjs@4.5.3":
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/@excalidraw/roughjs/-/roughjs-4.5.3.tgz#7d91897bfd1aaeb19a48d5272bd4776cb19f015b"
+  integrity sha512-X9HPfNjPLNHt+gN7t1LN7nN4h4o8M2EWuN/Y4YgG0ODsDZn51gRBeIPuhSo2hsDgLeTQHnkrmpPTm4XeeQVtoA==
+  dependencies:
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
 "@firebase/analytics-types@0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"