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

perf: Reduce SVG export size by more than half by reducing precision to 2 decimal places (#3567)

Browse Source 
* render svg with a specified precision

* moved precision to a constant

* fix test case  to use rounded values
This commit is contained in:
Preet 2021-05-11 19:35:35 -07:00 committed by GitHub
parent 8068d1f853
commit 07839f8d20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -44,7 +44,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3",
"roughjs": "4.4.0",
"roughjs": "4.4.1",
"sass": "1.32.10",
"socket.io-client": "2.3.1",
"typescript": "4.2.4"

2
src/constants.ts
View File

@ -142,3 +142,5 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
export const MQ_MAX_WIDTH_PORTRAIT = 730;
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;

29
src/renderer/renderElement.ts
View File

@ -33,6 +33,7 @@ import rough from "roughjs/bin/rough";
import { Zoom } from "../types";
import { getDefaultAppState } from "../appState";
import getFreeDrawShape from "perfect-freehand";
import { MAX_DECIMALS_FOR_SVG_EXPORT } from "../constants";
const defaultAppState = getDefaultAppState();
@ -623,6 +624,22 @@ export const renderElement = (
}
};
const roughSVGDrawWithPrecision = (
rsvg: RoughSVG,
drawable: Drawable,
precision?: number,
) => {
if (typeof precision === "undefined") {
return rsvg.draw(drawable);
}
const pshape: Drawable = {
sets: drawable.sets,
shape: drawable.shape,
options: { ...drawable.options, fixedDecimalPlaceDigits: precision },
};
return rsvg.draw(pshape);
};
export const renderElementToSvg = (
element: NonDeletedExcalidrawElement,
rsvg: RoughSVG,
@ -645,7 +662,11 @@ export const renderElementToSvg = (
case "diamond":
case "ellipse": {
generateElementShape(element, generator);
const node = rsvg.draw(getShapeForElement(element) as Drawable);
const node = roughSVGDrawWithPrecision(
rsvg,
getShapeForElement(element) as Drawable,
MAX_DECIMALS_FOR_SVG_EXPORT,
);
const opacity = element.opacity / 100;
if (opacity !== 1) {
node.setAttribute("stroke-opacity", `${opacity}`);
@ -669,7 +690,11 @@ export const renderElementToSvg = (
group.setAttribute("stroke-linecap", "round");
(getShapeForElement(element) as Drawable[]).forEach((shape) => {
const node = rsvg.draw(shape);
const node = roughSVGDrawWithPrecision(
rsvg,
shape,
MAX_DECIMALS_FOR_SVG_EXPORT,
);
if (opacity !== 1) {
node.setAttribute("stroke-opacity", `${opacity}`);
node.setAttribute("fill-opacity", `${opacity}`);

8
src/tests/scene/__snapshots__/export.test.ts.snap
View File

File diff suppressed because one or more lines are too long

8
yarn.lock
View File

@ -10852,10 +10852,10 @@ rollup@^1.31.1:
"@types/node" "*"
acorn "^7.1.0"
roughjs@4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.0.tgz#56ee4b3c8a453af8debc03b81e636dcab9efcdb2"
integrity sha512-mDjSVK/RdRwdi4Dw9u5eoMiEsblEr6y2ZpOSyYa5IAAPbpUqplPezWbj4+J2gJlnxKKcRX+ccH26LFDyplhXXQ==
roughjs@4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.1.tgz#3af79db6abdcb0f32764d1138f99dc9e01027736"
integrity sha512-/RZvyVquID319VDc9HsF8wn8VPpbMBVdr4NMCi7mta9UeBBeqP6h5Hg4GZXG29DL6jwTkfMjyth/MF7Hn6Sq/w==
dependencies:
path-data-parser "^0.1.0"
points-on-curve "^0.2.0"