diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index 01868f68..aab3aa83 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -13,6 +13,10 @@ import { KEYS } from "../keys"; import { register } from "./register"; import { supported as fsSupported } from "browser-fs-access"; import { CheckboxItem } from "../components/CheckboxItem"; +import { getExportSize } from "../scene/export"; +import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES } from "../constants"; +import { getSelectedElements, isSomeElementSelected } from "../scene"; +import { getNonDeletedElements } from "../element"; export const actionChangeProjectName = register({ name: "changeProjectName", @@ -32,6 +36,54 @@ export const actionChangeProjectName = register({ ), }); +export const actionChangeExportScale = register({ + name: "changeExportScale", + perform: (_elements, appState, value) => { + return { + appState: { ...appState, exportScale: value }, + commitToHistory: false, + }; + }, + PanelComponent: ({ elements: allElements, appState, updateData }) => { + const elements = getNonDeletedElements(allElements); + const exportSelected = isSomeElementSelected(elements, appState); + const exportedElements = exportSelected + ? getSelectedElements(elements, appState) + : elements; + + return ( + <> + {EXPORT_SCALES.map((s) => { + const [width, height] = getExportSize( + exportedElements, + DEFAULT_EXPORT_PADDING, + s, + ); + + const scaleButtonTitle = `${t( + "buttons.scale", + )} ${s}x (${width}x${height})`; + + return ( + updateData(s)} + /> + ); + })} + + ); + }, +}); + export const actionChangeExportBackground = register({ name: "changeExportBackground", perform: (_elements, appState, value) => { diff --git a/src/actions/types.ts b/src/actions/types.ts index 7a98d96e..c9658148 100644 --- a/src/actions/types.ts +++ b/src/actions/types.ts @@ -66,6 +66,7 @@ export type ActionName = | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" + | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" diff --git a/src/appState.ts b/src/appState.ts index 13b5dc3b..88e293f0 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -3,11 +3,16 @@ import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, + EXPORT_SCALES, } from "./constants"; import { t } from "./i18n"; import { AppState, NormalizedZoomValue } from "./types"; import { getDateTime } from "./utils"; +const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio) + ? devicePixelRatio + : 1; + export const getDefaultAppState = (): Omit< AppState, "offsetTop" | "offsetLeft" | "width" | "height" @@ -39,6 +44,7 @@ export const getDefaultAppState = (): Omit< elementType: "selection", errorMessage: null, exportBackground: true, + exportScale: defaultExportScale, exportEmbedScene: false, exportWithDarkMode: false, fileHandle: null, @@ -117,6 +123,7 @@ const APP_STATE_STORAGE_CONF = (< errorMessage: { browser: false, export: false }, exportBackground: { browser: true, export: false }, exportEmbedScene: { browser: true, export: false }, + exportScale: { browser: true, export: false }, exportWithDarkMode: { browser: true, export: false }, fileHandle: { browser: false, export: false }, gridSize: { browser: true, export: true }, diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx index c86fec3f..e02b43d8 100644 --- a/src/components/ImageExportDialog.tsx +++ b/src/components/ImageExportDialog.tsx @@ -8,20 +8,17 @@ import { CanvasError } from "../errors"; import { t } from "../i18n"; import { useIsMobile } from "./App"; import { getSelectedElements, isSomeElementSelected } from "../scene"; -import { exportToCanvas, getExportSize } from "../scene/export"; +import { exportToCanvas } from "../scene/export"; import { AppState } from "../types"; import { Dialog } from "./Dialog"; import { clipboard, exportImage } from "./icons"; import Stack from "./Stack"; import { ToolButton } from "./ToolButton"; - import "./ExportDialog.scss"; import { supported as fsSupported } from "browser-fs-access"; import OpenColor from "open-color"; import { CheckboxItem } from "./CheckboxItem"; - -const scales = [1, 2, 3]; -const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1; +import { DEFAULT_EXPORT_PADDING } from "../constants"; const supportsContextFilters = "filter" in document.createElement("canvas").getContext("2d")!; @@ -82,7 +79,7 @@ const ExportButton: React.FC<{ const ImageExportModal = ({ elements, appState, - exportPadding = 10, + exportPadding = DEFAULT_EXPORT_PADDING, actionManager, onExportToPng, onExportToSvg, @@ -98,7 +95,6 @@ const ImageExportModal = ({ onCloseRequest: () => void; }) => { const someElementIsSelected = isSomeElementSelected(elements, appState); - const [scale, setScale] = useState(defaultScale); const [exportSelected, setExportSelected] = useState(someElementIsSelected); const previewRef = useRef(null); const { exportBackground, viewBackgroundColor } = appState; @@ -121,7 +117,6 @@ const ImageExportModal = ({ exportBackground, viewBackgroundColor, exportPadding, - scale, }); // if converting to blob fails, there's some problem that will @@ -144,7 +139,6 @@ const ImageExportModal = ({ exportBackground, exportPadding, viewBackgroundColor, - scale, ]); return ( @@ -175,33 +169,8 @@ const ImageExportModal = ({
- - {scales.map((_scale) => { - const [width, height] = getExportSize( - exportedElements, - exportPadding, - _scale, - ); - - const scaleButtonTitle = `${t( - "buttons.scale", - )} ${_scale}x (${width}x${height})`; - - return ( - setScale(_scale)} - /> - ); - })} + + {actionManager.renderAction("changeExportScale")}

Scale

@@ -220,7 +189,7 @@ const ImageExportModal = ({ color="indigo" title={t("buttons.exportToPng")} aria-label={t("buttons.exportToPng")} - onClick={() => onExportToPng(exportedElements, scale)} + onClick={() => onExportToPng(exportedElements)} > PNG @@ -228,14 +197,14 @@ const ImageExportModal = ({ color="red" title={t("buttons.exportToSvg")} aria-label={t("buttons.exportToSvg")} - onClick={() => onExportToSvg(exportedElements, scale)} + onClick={() => onExportToSvg(exportedElements)} > SVG {probablySupportsClipboardBlob && ( onExportToClipboard(exportedElements, scale)} + onClick={() => onExportToClipboard(exportedElements)} color="gray" shade={7} > @@ -250,7 +219,7 @@ const ImageExportModal = ({ export const ImageExportDialog = ({ elements, appState, - exportPadding = 10, + exportPadding = DEFAULT_EXPORT_PADDING, actionManager, onExportToPng, onExportToSvg, diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 75963936..c69d87f6 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -400,13 +400,11 @@ const LayerUI = ({ const createExporter = (type: ExportType): ExportCB => async ( exportedElements, - scale, ) => { await exportCanvas(type, exportedElements, appState, { exportBackground: appState.exportBackground, name: appState.name, viewBackgroundColor: appState.viewBackgroundColor, - scale, }) .catch(muteFSAbortError) .catch((error) => { diff --git a/src/constants.ts b/src/constants.ts index b4429db0..6dee670b 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -144,3 +144,6 @@ export const MQ_MAX_WIDTH_LANDSCAPE = 1000; export const MQ_MAX_HEIGHT_LANDSCAPE = 500; export const MAX_DECIMALS_FOR_SVG_EXPORT = 2; + +export const EXPORT_SCALES = [1, 2, 3]; +export const DEFAULT_EXPORT_PADDING = 10; // px diff --git a/src/data/index.ts b/src/data/index.ts index 5e7f6c54..62d7e864 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -3,6 +3,7 @@ import { copyBlobToClipboardAsPng, copyTextToSystemClipboard, } from "../clipboard"; +import { DEFAULT_EXPORT_PADDING } from "../constants"; import { NonDeletedExcalidrawElement } from "../element/types"; import { t } from "../i18n"; import { exportToCanvas, exportToSvg } from "../scene/export"; @@ -20,16 +21,14 @@ export const exportCanvas = async ( appState: AppState, { exportBackground, - exportPadding = 10, + exportPadding = DEFAULT_EXPORT_PADDING, viewBackgroundColor, name, - scale = 1, }: { exportBackground: boolean; exportPadding?: number; viewBackgroundColor: string; name: string; - scale?: number; }, ) => { if (elements.length === 0) { @@ -41,7 +40,7 @@ export const exportCanvas = async ( exportWithDarkMode: appState.exportWithDarkMode, viewBackgroundColor, exportPadding, - scale, + exportScale: appState.exportScale, metadata: appState.exportEmbedScene && type === "svg" ? await ( @@ -67,7 +66,6 @@ export const exportCanvas = async ( exportBackground, viewBackgroundColor, exportPadding, - scale, }); tempCanvas.style.display = "none"; document.body.appendChild(tempCanvas); diff --git a/src/index-node.ts b/src/index-node.ts index b9129a44..7b46f880 100644 --- a/src/index-node.ts +++ b/src/index-node.ts @@ -69,7 +69,6 @@ const canvas = exportToCanvas( { exportBackground: true, viewBackgroundColor: "#ffffff", - scale: 1, }, createCanvas, ); diff --git a/src/scene/export.ts b/src/scene/export.ts index cdce2d2e..81823c14 100644 --- a/src/scene/export.ts +++ b/src/scene/export.ts @@ -4,7 +4,7 @@ import { getCommonBounds } from "../element/bounds"; import { renderScene, renderSceneToSvg } from "../renderer/renderScene"; import { distance, SVG_NS } from "../utils"; import { AppState } from "../types"; -import { THEME_FILTER } from "../constants"; +import { DEFAULT_EXPORT_PADDING, THEME_FILTER } from "../constants"; import { getDefaultAppState } from "../appState"; export const SVG_EXPORT_TAG = ``; @@ -14,39 +14,34 @@ export const exportToCanvas = ( appState: AppState, { exportBackground, - exportPadding = 10, + exportPadding = DEFAULT_EXPORT_PADDING, viewBackgroundColor, - scale = 1, }: { exportBackground: boolean; exportPadding?: number; - scale?: number; viewBackgroundColor: string; }, createCanvas: ( width: number, height: number, ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => { - const tempCanvas = document.createElement("canvas"); - tempCanvas.width = width * scale; - tempCanvas.height = height * scale; - return { canvas: tempCanvas, scale }; + const canvas = document.createElement("canvas"); + canvas.width = width * appState.exportScale; + canvas.height = height * appState.exportScale; + return { canvas, scale: appState.exportScale }; }, ) => { const [minX, minY, width, height] = getCanvasSize(elements, exportPadding); - const { canvas: tempCanvas, scale: newScale = scale } = createCanvas( - width, - height, - ); + const { canvas, scale = 1 } = createCanvas(width, height); renderScene( elements, appState, null, - newScale, - rough.canvas(tempCanvas), - tempCanvas, + scale, + rough.canvas(canvas), + canvas, { viewBackgroundColor: exportBackground ? viewBackgroundColor : null, exportWithDarkMode: appState.exportWithDarkMode, @@ -67,22 +62,22 @@ export const exportToCanvas = ( }, ); - return tempCanvas; + return canvas; }; export const exportToSvg = ( elements: readonly NonDeletedExcalidrawElement[], { exportBackground, - exportPadding = 10, + exportPadding = DEFAULT_EXPORT_PADDING, viewBackgroundColor, exportWithDarkMode, - scale = 1, + exportScale = 1, metadata = "", }: { exportBackground: boolean; exportPadding?: number; - scale?: number; + exportScale?: number; viewBackgroundColor: string; exportWithDarkMode?: boolean; metadata?: string; @@ -95,8 +90,8 @@ export const exportToSvg = ( svgRoot.setAttribute("version", "1.1"); svgRoot.setAttribute("xmlns", SVG_NS); svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`); - svgRoot.setAttribute("width", `${width * scale}`); - svgRoot.setAttribute("height", `${height * scale}`); + svgRoot.setAttribute("width", `${width * exportScale}`); + svgRoot.setAttribute("height", `${height * exportScale}`); if (exportWithDarkMode) { svgRoot.setAttribute("filter", THEME_FILTER); } diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap index ce153536..9bb7b735 100644 --- a/src/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap @@ -28,6 +28,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -194,6 +195,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -506,6 +508,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -818,6 +821,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -984,6 +988,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -1183,6 +1188,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -1435,6 +1441,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -1765,6 +1772,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -2497,6 +2505,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -2809,6 +2818,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3121,6 +3131,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3507,6 +3518,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3765,6 +3777,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4098,6 +4111,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4199,6 +4213,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4278,6 +4293,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 02c4e17c..46ce9e99 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -28,6 +28,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -496,6 +497,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -970,6 +972,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -1759,6 +1762,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -1966,6 +1970,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -2431,6 +2436,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -2687,6 +2693,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -2853,6 +2860,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3301,6 +3309,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3541,6 +3550,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3748,6 +3758,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -3996,6 +4007,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4251,6 +4263,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4638,6 +4651,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -4936,6 +4950,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -5212,6 +5227,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -5422,6 +5438,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -5588,6 +5605,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -6048,6 +6066,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -6370,6 +6389,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -8427,6 +8447,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -8793,6 +8814,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -9049,6 +9071,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -9269,6 +9292,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -9552,6 +9576,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -9718,6 +9743,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -9884,6 +9910,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -10050,6 +10077,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -10246,6 +10274,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -10442,6 +10471,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -10650,6 +10680,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -10846,6 +10877,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -11012,6 +11044,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -11178,6 +11211,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -11374,6 +11408,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -11540,6 +11575,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -11748,6 +11784,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -12474,6 +12511,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -12730,6 +12768,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -12833,6 +12872,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -12934,6 +12974,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -13103,6 +13144,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -13428,6 +13470,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -13631,6 +13674,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -14466,6 +14510,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -14567,6 +14612,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -15335,6 +15381,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -15744,6 +15791,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -16020,6 +16068,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -16123,6 +16172,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -16626,6 +16676,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, @@ -16727,6 +16778,7 @@ Object { "errorMessage": null, "exportBackground": true, "exportEmbedScene": false, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap index 1945f236..3fd22f6d 100644 --- a/src/tests/packages/__snapshots__/utils.test.ts.snap +++ b/src/tests/packages/__snapshots__/utils.test.ts.snap @@ -29,6 +29,7 @@ Object { "exportBackground": true, "exportEmbedScene": false, "exportPadding": undefined, + "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, "gridSize": null, diff --git a/src/tests/scene/export.test.ts b/src/tests/scene/export.test.ts index dabc925a..e31d4ff4 100644 --- a/src/tests/scene/export.test.ts +++ b/src/tests/scene/export.test.ts @@ -69,7 +69,7 @@ describe("exportToSvg", () => { const svgElement = exportUtils.exportToSvg(ELEMENTS, { ...DEFAULT_OPTIONS, exportPadding: 0, - scale: SCALE, + exportScale: SCALE, }); expect(svgElement).toHaveAttribute( diff --git a/src/types.ts b/src/types.ts index d4b16204..b8adaf34 100644 --- a/src/types.ts +++ b/src/types.ts @@ -58,6 +58,7 @@ export type AppState = { exportBackground: boolean; exportEmbedScene: boolean; exportWithDarkMode: boolean; + exportScale: number; currentItemStrokeColor: string; currentItemBackgroundColor: string; currentItemFillStyle: ExcalidrawElement["fillStyle"];