perf: Reduce SVG export size by more than half by reducing precision to 2 decimal places (#3567)
* render svg with a specified precision * moved precision to a constant * fix test case to use rounded values
This commit is contained in:
parent
8068d1f853
commit
07839f8d20
@ -44,7 +44,7 @@
|
|||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"roughjs": "4.4.0",
|
"roughjs": "4.4.1",
|
||||||
"sass": "1.32.10",
|
"sass": "1.32.10",
|
||||||
"socket.io-client": "2.3.1",
|
"socket.io-client": "2.3.1",
|
||||||
"typescript": "4.2.4"
|
"typescript": "4.2.4"
|
||||||
|
@ -142,3 +142,5 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
|
|||||||
export const MQ_MAX_WIDTH_PORTRAIT = 730;
|
export const MQ_MAX_WIDTH_PORTRAIT = 730;
|
||||||
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
|
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
|
||||||
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
|
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
|
||||||
|
|
||||||
|
export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
|
||||||
|
@ -33,6 +33,7 @@ import rough from "roughjs/bin/rough";
|
|||||||
import { Zoom } from "../types";
|
import { Zoom } from "../types";
|
||||||
import { getDefaultAppState } from "../appState";
|
import { getDefaultAppState } from "../appState";
|
||||||
import getFreeDrawShape from "perfect-freehand";
|
import getFreeDrawShape from "perfect-freehand";
|
||||||
|
import { MAX_DECIMALS_FOR_SVG_EXPORT } from "../constants";
|
||||||
|
|
||||||
const defaultAppState = getDefaultAppState();
|
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 = (
|
export const renderElementToSvg = (
|
||||||
element: NonDeletedExcalidrawElement,
|
element: NonDeletedExcalidrawElement,
|
||||||
rsvg: RoughSVG,
|
rsvg: RoughSVG,
|
||||||
@ -645,7 +662,11 @@ export const renderElementToSvg = (
|
|||||||
case "diamond":
|
case "diamond":
|
||||||
case "ellipse": {
|
case "ellipse": {
|
||||||
generateElementShape(element, generator);
|
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;
|
const opacity = element.opacity / 100;
|
||||||
if (opacity !== 1) {
|
if (opacity !== 1) {
|
||||||
node.setAttribute("stroke-opacity", `${opacity}`);
|
node.setAttribute("stroke-opacity", `${opacity}`);
|
||||||
@ -669,7 +690,11 @@ export const renderElementToSvg = (
|
|||||||
group.setAttribute("stroke-linecap", "round");
|
group.setAttribute("stroke-linecap", "round");
|
||||||
|
|
||||||
(getShapeForElement(element) as Drawable[]).forEach((shape) => {
|
(getShapeForElement(element) as Drawable[]).forEach((shape) => {
|
||||||
const node = rsvg.draw(shape);
|
const node = roughSVGDrawWithPrecision(
|
||||||
|
rsvg,
|
||||||
|
shape,
|
||||||
|
MAX_DECIMALS_FOR_SVG_EXPORT,
|
||||||
|
);
|
||||||
if (opacity !== 1) {
|
if (opacity !== 1) {
|
||||||
node.setAttribute("stroke-opacity", `${opacity}`);
|
node.setAttribute("stroke-opacity", `${opacity}`);
|
||||||
node.setAttribute("fill-opacity", `${opacity}`);
|
node.setAttribute("fill-opacity", `${opacity}`);
|
||||||
|
File diff suppressed because one or more lines are too long
@ -10852,10 +10852,10 @@ rollup@^1.31.1:
|
|||||||
"@types/node" "*"
|
"@types/node" "*"
|
||||||
acorn "^7.1.0"
|
acorn "^7.1.0"
|
||||||
|
|
||||||
roughjs@4.4.0:
|
roughjs@4.4.1:
|
||||||
version "4.4.0"
|
version "4.4.1"
|
||||||
resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.0.tgz#56ee4b3c8a453af8debc03b81e636dcab9efcdb2"
|
resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.1.tgz#3af79db6abdcb0f32764d1138f99dc9e01027736"
|
||||||
integrity sha512-mDjSVK/RdRwdi4Dw9u5eoMiEsblEr6y2ZpOSyYa5IAAPbpUqplPezWbj4+J2gJlnxKKcRX+ccH26LFDyplhXXQ==
|
integrity sha512-/RZvyVquID319VDc9HsF8wn8VPpbMBVdr4NMCi7mta9UeBBeqP6h5Hg4GZXG29DL6jwTkfMjyth/MF7Hn6Sq/w==
|
||||||
dependencies:
|
dependencies:
|
||||||
path-data-parser "^0.1.0"
|
path-data-parser "^0.1.0"
|
||||||
points-on-curve "^0.2.0"
|
points-on-curve "^0.2.0"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user