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

feat: Support exporting with dark mode (#3046)

Browse Source 
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Arun 2021-02-24 19:52:17 +05:30 committed by GitHub
parent d213dbb42d
commit 4e421e6e9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 264 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/actions/actionExport.tsx
View File

@ -5,6 +5,7 @@ import { ProjectName } from "../components/ProjectName";
import { ToolButton } from "../components/ToolButton";
import "../components/ToolIcon.scss";
import { Tooltip } from "../components/Tooltip";
import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
import { loadFromJSON, saveAsJSON } from "../data";
import { t } from "../i18n";
import useIsMobile from "../is-mobile";
@ -204,3 +205,31 @@ export const actionLoadScene = register({
/>
),
});
export const actionExportWithDarkMode = register({
name: "exportWithDarkMode",
perform: (_elements, appState, value) => {
return {
appState: { ...appState, exportWithDarkMode: value },
commitToHistory: false,
};
},
PanelComponent: ({ appState, updateData }) => (
<div
style={{
display: "flex",
justifyContent: "flex-end",
marginTop: "-45px",
marginBottom: "10px",
}}
>
<DarkModeToggle
value={appState.exportWithDarkMode ? "dark" : "light"}
onChange={(appearance: Appearence) => {
updateData(appearance === "dark");
}}
title={t("labels.toggleExportColorScheme")}
/>
</div>
),
});

3
src/actions/types.ts
View File

@ -85,7 +85,8 @@ export type ActionName =
| "alignHorizontallyCentered"
| "distributeHorizontally"
| "distributeVertically"
| "viewMode";
| "viewMode"
| "exportWithDarkMode";
export interface Action {
name: ActionName;

2
src/appState.ts
View File

@ -40,6 +40,7 @@ export const getDefaultAppState = (): Omit<
errorMessage: null,
exportBackground: true,
exportEmbedScene: false,
exportWithDarkMode: false,
fileHandle: null,
gridSize: null,
height: window.innerHeight,
@ -118,6 +119,7 @@ const APP_STATE_STORAGE_CONF = (<
errorMessage: { browser: false, export: false },
exportBackground: { browser: true, export: false },
exportEmbedScene: { browser: true, export: false },
exportWithDarkMode: { browser: true, export: false },
fileHandle: { browser: false, export: false },
gridSize: { browser: true, export: true },
height: { browser: false, export: false },

17
src/components/DarkModeToggle.tsx
View File

@ -10,13 +10,18 @@ export type Appearence = "light" | "dark";
export const DarkModeToggle = (props: {
value: Appearence;
onChange: (value: Appearence) => void;
title?: string;
}) => {
const title = props.title
? props.title
: props.value === "dark"
? t("buttons.lightMode")
: t("buttons.darkMode");
return (
<label
className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
title={
props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
}
title={title}
>
<input
className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@ -25,11 +30,7 @@ export const DarkModeToggle = (props: {
props.onChange(event.target.checked ? "dark" : "light")
}
checked={props.value === "dark"}
aria-label={
props.value === "dark"
? t("buttons.lightMode")
: t("buttons.darkMode")
}
aria-label={title}
/>
<div className="ToolIcon__icon">
{props.value === "light" ? ICONS.MOON : ICONS.SUN}

5
src/components/ExportDialog.tsx
View File

@ -19,6 +19,9 @@ import { ToolButton } from "./ToolButton";
const scales = [1, 2, 3];
const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
const supportsContextFilters =
"filter" in document.createElement("canvas").getContext("2d")!;
export const ErrorCanvasPreview = () => {
return (
<div>
@ -128,6 +131,8 @@ const ExportModal = ({
return (
<div className="ExportDialog">
<div className="ExportDialog__preview" ref={previewRef} />
{supportsContextFilters &&
actionManager.renderAction("exportWithDarkMode")}
<Stack.Col gap={2} align="center">
<div className="ExportDialog__actions">
<Stack.Row gap={2}>

3
src/constants.ts
View File

@ -1,4 +1,5 @@
import { FontFamily } from "./element/types";
import cssVariables from "./css/variables.module.scss";
export const APP_NAME = "Excalidraw";
@ -107,3 +108,5 @@ export const MODES = {
ZEN: "zenMode",
GRID: "gridMode",
};
export const APPEARANCE_FILTER = cssVariables.appearanceFilter;

3
src/css/theme.scss
View File

@ -1,4 +1,5 @@
@import "open-color/open-color.scss";
@import "./variables.module.scss";
:root {
--appearance-filter: none;
@ -45,7 +46,7 @@
}
&.Appearance_dark {
--appearance-filter: invert(93%) hue-rotate(180deg);
--appearance-filter: #{$appearance-filter};
--button-destructive-bg-color: #5a0000;
--button-destructive-color: #{$oc-red-3};
--button-gray-1: #363636;

2
src/css/variables.module.scss
View File

@ -2,7 +2,9 @@
// keep up to date with is-mobile.tsx
$is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
$appearance-filter: "invert(93%) hue-rotate(180deg)";
:export {
isMobileQuery: unquote($is-mobile-query);
appearanceFilter: unquote($appearance-filter);
}

1
src/data/index.ts
View File

@ -41,6 +41,7 @@ export const exportCanvas = async (
if (type === "svg" || type === "clipboard-svg") {
const tempSvg = exportToSvg(elements, {
exportBackground,
exportWithDarkMode: appState.exportWithDarkMode,
viewBackgroundColor,
exportPadding,
scale,

3
src/locales/en.json
View File

@ -92,7 +92,8 @@
"centerHorizontally": "Center horizontally",
"distributeHorizontally": "Distribute horizontally",
"distributeVertically": "Distribute vertically",
"viewMode": "View mode"
"viewMode": "View mode",
"toggleExportColorScheme": "Toggle export color scheme"
},
"buttons": {
"clearReset": "Reset the canvas",

2
src/packages/utils/package.json
View File

@ -44,7 +44,9 @@
"babel-loader": "8.2.2",
"babel-plugin-transform-class-properties": "6.24.1",
"cross-env": "7.0.3",
"css-loader": "5.0.2",
"file-loader": "6.2.0",
"sass-loader": "11.0.1",
"ts-loader": "8.0.17",
"webpack": "5.24.1",
"webpack-bundle-analyzer": "4.4.0",

7
src/packages/utils/webpack.prod.config.js
View File

@ -13,13 +13,18 @@ module.exports = {
libraryTarget: "umd",
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
},
optimization: {
runtimeChunk: false,
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
},
{
test: /\.(ts|tsx|js)$/,
use: [

115
src/packages/utils/yarn.lock
View File

@ -1291,6 +1291,11 @@ call-bind@^1.0.0:
function-bind "^1.1.1"
get-intrinsic "^1.0.2"
camelcase@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
caniuse-lite@^1.0.30001181:
version "1.0.30001187"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz#5706942631f83baa5a0218b7dfa6ced29f845438"
@ -1430,6 +1435,29 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
shebang-command "^2.0.0"
which "^2.0.1"
css-loader@5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.0.2.tgz#24f758dae349bad0a440c50d7e2067742e0899cb"
integrity sha512-gbkBigdcHbmNvZ1Cg6aV6qh6k9N6XOr8YWzISLQGrwk2mgOH8LLrizhkxbDhQtaLtktyKHD4970S0xwz5btfTA==
dependencies:
camelcase "^6.2.0"
cssesc "^3.0.0"
icss-utils "^5.1.0"
loader-utils "^2.0.0"
postcss "^8.2.4"
postcss-modules-extract-imports "^3.0.0"
postcss-modules-local-by-default "^4.0.0"
postcss-modules-scope "^3.0.0"
postcss-modules-values "^4.0.0"
postcss-value-parser "^4.1.0"
schema-utils "^3.0.0"
semver "^7.3.4"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
debug@^2.6.8:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -1699,6 +1727,11 @@ human-signals@^2.1.0:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
icss-utils@^5.0.0, icss-utils@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
import-local@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
@ -1707,6 +1740,11 @@ import-local@^3.0.2:
pkg-dir "^4.2.0"
resolve-cwd "^3.0.0"
indexes-of@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
inherits@~2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@ -1821,6 +1859,11 @@ kind-of@^6.0.2:
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
klona@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
loader-runner@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@ -1940,6 +1983,11 @@ ms@2.1.2:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
nanoid@^3.1.20:
version "3.1.20"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
neo-async@^2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@ -2037,6 +2085,58 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
dependencies:
find-up "^4.0.0"
postcss-modules-extract-imports@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
postcss-modules-local-by-default@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
dependencies:
icss-utils "^5.0.0"
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.1.0"
postcss-modules-scope@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
dependencies:
postcss-selector-parser "^6.0.4"
postcss-modules-values@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
dependencies:
icss-utils "^5.0.0"
postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
version "6.0.4"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
dependencies:
cssesc "^3.0.0"
indexes-of "^1.0.1"
uniq "^1.0.1"
util-deprecate "^1.0.2"
postcss-value-parser@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
postcss@^8.2.4:
version "8.2.6"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe"
integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==
dependencies:
colorette "^1.2.1"
nanoid "^3.1.20"
source-map "^0.6.1"
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@ -2162,6 +2262,14 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
sass-loader@11.0.1:
version "11.0.1"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-11.0.1.tgz#8672f896593466573b904f47693e0695368e38c9"
integrity sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==
dependencies:
klona "^2.0.4"
neo-async "^2.6.2"
schema-utils@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@ -2400,6 +2508,11 @@ unicode-property-aliases-ecmascript@^1.0.4:
resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
uniq@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
uri-js@^4.2.2:
version "4.4.1"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@ -2407,7 +2520,7 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
util-deprecate@~1.0.1:
util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=

5
src/renderer/renderScene.ts
View File

@ -49,6 +49,7 @@ import {
} from "../element/transformHandles";
import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
import { UserIdleState } from "../excalidraw-app/collab/types";
import { APPEARANCE_FILTER } from "../constants";
const hasEmojiSupport = supportsEmoji();
@ -211,6 +212,10 @@ export const renderScene = (
const normalizedCanvasWidth = canvas.width / scale;
const normalizedCanvasHeight = canvas.height / scale;
if (sceneState.exportWithDarkMode) {
context.filter = APPEARANCE_FILTER;
}
// Paint background
if (typeof sceneState.viewBackgroundColor === "string") {
const hasTransparence =

12
src/scene/export.ts
View File

@ -7,7 +7,11 @@ import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
import { distance, SVG_NS } from "../utils";
import { AppState } from "../types";
import { t } from "../i18n";
import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
import {
DEFAULT_FONT_FAMILY,
DEFAULT_VERTICAL_ALIGN,
APPEARANCE_FILTER,
} from "../constants";
import { getDefaultAppState } from "../appState";
export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
@ -61,6 +65,7 @@ export const exportToCanvas = (
tempCanvas,
{
viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
exportWithDarkMode: appState.exportWithDarkMode,
scrollX: -minX + exportPadding,
scrollY: -minY + exportPadding,
zoom: getDefaultAppState().zoom,
@ -87,6 +92,7 @@ export const exportToSvg = (
exportBackground,
exportPadding = 10,
viewBackgroundColor,
exportWithDarkMode,
scale = 1,
shouldAddWatermark,
metadata = "",
@ -95,6 +101,7 @@ export const exportToSvg = (
exportPadding?: number;
scale?: number;
viewBackgroundColor: string;
exportWithDarkMode?: boolean;
shouldAddWatermark: boolean;
metadata?: string;
},
@ -114,6 +121,9 @@ export const exportToSvg = (
svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
svgRoot.setAttribute("width", `${width * scale}`);
svgRoot.setAttribute("height", `${height * scale}`);
if (exportWithDarkMode) {
svgRoot.setAttribute("filter", APPEARANCE_FILTER);
}
svgRoot.innerHTML = `
${SVG_EXPORT_TAG}

1
src/scene/types.ts
View File

@ -6,6 +6,7 @@ export type SceneState = {
scrollY: number;
// null indicates transparent bg
viewBackgroundColor: string | null;
exportWithDarkMode?: boolean;
zoom: Zoom;
shouldCacheIgnoreZoom: boolean;
remotePointerViewportCoords: { [id: string]: { x: number; y: number } };

67
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -29,6 +29,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -489,6 +490,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -955,6 +957,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -1730,6 +1733,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -1933,6 +1937,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -2390,6 +2395,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -2642,6 +2648,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -2805,6 +2812,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -3281,6 +3289,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -3588,6 +3597,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -3791,6 +3801,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -4034,6 +4045,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -4285,6 +4297,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -4667,6 +4680,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -4961,6 +4975,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -5267,6 +5282,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -5474,6 +5490,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -5637,6 +5654,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -6089,6 +6107,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -6406,6 +6425,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -8439,6 +8459,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -8800,6 +8821,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -9054,6 +9076,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -9306,6 +9329,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -9620,6 +9644,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -9783,6 +9808,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -9946,6 +9972,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -10109,6 +10136,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -10302,6 +10330,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -10495,6 +10524,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -10688,6 +10718,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -10881,6 +10912,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -11044,6 +11076,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -11207,6 +11240,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -11400,6 +11434,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -11563,6 +11598,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -11756,6 +11792,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -12471,6 +12508,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -12723,6 +12761,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -12824,6 +12863,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -12923,6 +12963,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -13086,6 +13127,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -13393,6 +13435,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -13700,6 +13743,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -13863,6 +13907,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -14058,6 +14103,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -14306,6 +14352,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -14629,6 +14676,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -15467,6 +15515,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -15774,6 +15823,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -16081,6 +16131,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -16459,6 +16510,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -16625,6 +16677,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -16945,6 +16998,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -17183,6 +17237,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -17437,6 +17492,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -17763,6 +17819,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -17862,6 +17919,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -18025,6 +18083,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -18845,6 +18904,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -18944,6 +19004,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -19697,6 +19758,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -20101,6 +20163,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -20373,6 +20436,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -20474,6 +20538,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -20971,6 +21036,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,
@ -21070,6 +21136,7 @@ Object {
"errorMessage": null,
"exportBackground": true,
"exportEmbedScene": false,
"exportWithDarkMode": false,
"fileHandle": null,
"gridSize": null,
"height": 768,

1
src/types.ts
View File

@ -57,6 +57,7 @@ export type AppState = {
elementLocked: boolean;
exportBackground: boolean;
exportEmbedScene: boolean;
exportWithDarkMode: boolean;
shouldAddWatermark: boolean;
currentItemStrokeColor: string;
currentItemBackgroundColor: string;