support embedding scene data to PNG/SVG (#2219)

Co-authored-by: Lipis <lipiridis@gmail.com>

CHANGELOG.md

+## 2020-10-13
+
+- Added ability to embed scene source into exported PNG/SVG files so you can import the scene from them (open via `Load` button or drag & drop). #2219

package-lock.json

         }
       }
     },
+    "crc-32": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-0.3.0.tgz",
+      "integrity": "sha1-aj02h/W67EH36bmf4ZU6Ll0Zd14="
+    },
     "crc32-stream": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-3.0.1.tgz",
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
     },
+    "png-chunk-text": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-chunk-text/-/png-chunk-text-1.0.0.tgz",
+      "integrity": "sha1-HGAG2ONLpHHTjhycVLP1PhCF4Y8="
+    },
+    "png-chunks-encode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-chunks-encode/-/png-chunks-encode-1.0.0.tgz",
+      "integrity": "sha1-2epeNcru7XgmWMGre6+npe2xqHg=",
+      "requires": {
+        "crc-32": "^0.3.0",
+        "sliced": "^1.0.1"
+      }
+    },
+    "png-chunks-extract": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-chunks-extract/-/png-chunks-extract-1.0.0.tgz",
+      "integrity": "sha1-+tSpBeZmUhlzUcZeNbksZDEeRy0=",
+      "requires": {
+        "crc-32": "^0.3.0"
+      }
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
         }
       }
     },
+    "sliced": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
+      "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

     "nanoid": "2.1.11",
     "node-sass": "4.14.1",
     "open-color": "1.7.0",
+    "png-chunk-text": "1.0.0",
+    "png-chunks-encode": "1.0.0",
+    "png-chunks-extract": "1.0.0",
     "points-on-curve": "0.2.0",
     "pwacompat": "2.0.17",
     "react": "16.13.1",

src/actions/actionExport.tsx

   ),
 });
 
+export const actionChangeExportEmbedScene = register({
+  name: "changeExportEmbedScene",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportEmbedScene: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <label title={t("labels.exportEmbedScene_details")}>
+      <input
+        type="checkbox"
+        checked={appState.exportEmbedScene}
+        onChange={(event) => updateData(event.target.checked)}
+      />{" "}
+      {t("labels.exportEmbedScene")}
+    </label>
+  ),
+});
+
 export const actionChangeShouldAddWatermark = register({
   name: "changeShouldAddWatermark",
   perform: (_elements, appState, value) => {

src/actions/types.ts

   | "finalize"
   | "changeProjectName"
   | "changeExportBackground"
+  | "changeExportEmbedScene"
   | "changeShouldAddWatermark"
   | "saveScene"
   | "saveAsScene"

src/appState.ts

     elementType: "selection",
     elementLocked: false,
     exportBackground: true,
+    exportEmbedScene: false,
     shouldAddWatermark: false,
     currentItemStrokeColor: oc.black,
     currentItemBackgroundColor: "transparent",
   elementType: { browser: true, export: false },
   errorMessage: { browser: false, export: false },
   exportBackground: { browser: true, export: false },
+  exportEmbedScene: { browser: true, export: false },
   gridSize: { browser: true, export: true },
   height: { browser: false, export: false },
   isBindingEnabled: { browser: false, export: false },

src/base64.ts

+// `btoa(unescape(encodeURIComponent(str)))` hack doesn't work in edge cases and
+// `unescape` API shouldn't be used anyway.
+// This implem is ~10x faster than using fromCharCode in a loop (in Chrome).
+const stringToByteString = (str: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const blob = new Blob([new TextEncoder().encode(str)]);
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      if (!event.target || typeof event.target.result !== "string") {
+        return reject(new Error("couldn't convert to byte string"));
+      }
+      resolve(event.target.result);
+    };
+    reader.readAsBinaryString(blob);
+  });
+};
+
+function byteStringToArrayBuffer(byteString: string) {
+  const buffer = new ArrayBuffer(byteString.length);
+  const bufferView = new Uint8Array(buffer);
+  for (let i = 0, len = byteString.length; i < len; i++) {
+    bufferView[i] = byteString.charCodeAt(i);
+  }
+  return buffer;
+}
+
+const byteStringToString = (byteString: string) => {
+  return new TextDecoder("utf-8").decode(byteStringToArrayBuffer(byteString));
+};
+
+// -----------------------------------------------------------------------------
+
+export const stringToBase64 = async (str: string) => {
+  return btoa(await stringToByteString(str));
+};
+
+// async to align with stringToBase64
+export const base64ToString = async (base64: string) => {
+  return byteStringToString(atob(base64));
+};

src/components/App.tsx

   DEFAULT_VERTICAL_ALIGN,
   GRID_SIZE,
   LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
+  MIME_TYPES,
 } from "../constants";
 import {
   INITIAL_SCENE_UPDATE_TIMEOUT,
   private handleCanvasOnDrop = async (
     event: React.DragEvent<HTMLCanvasElement>,
   ) => {
-    const libraryShapes = event.dataTransfer.getData(
-      "application/vnd.excalidrawlib+json",
-    );
+    try {
+      const file = event.dataTransfer.files[0];
+      if (file?.type === "image/png" || file?.type === "image/svg+xml") {
+        const { elements, appState } = await loadFromBlob(file, this.state);
+        this.syncActionResult({
+          elements,
+          appState: {
+            ...(appState || this.state),
+            isLoading: false,
+          },
+          commitToHistory: true,
+        });
+        return;
+      }
+    } catch (error) {
+      return this.setState({
+        isLoading: false,
+        errorMessage: error.message,
+      });
+    }
+
+    const libraryShapes = event.dataTransfer.getData(MIME_TYPES.excalidraw);
     if (libraryShapes !== "") {
       this.addElementsFromPasteOrLibrary(
         JSON.parse(libraryShapes),
           this.setState({ isLoading: false, errorMessage: error.message });
         });
     } else if (
-      file?.type === "application/vnd.excalidrawlib+json" ||
+      file?.type === MIME_TYPES.excalidrawlib ||
       file?.name.endsWith(".excalidrawlib")
     ) {
       Library.importLibrary(file)

src/components/ExportDialog.tsx

           </Stack.Row>
         </div>
         {actionManager.renderAction("changeExportBackground")}
+        {actionManager.renderAction("changeExportEmbedScene")}
         {someElementIsSelected && (
           <div>
             <label>

src/components/LibraryUnit.tsx

 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { LibraryItem } from "../types";
+import { MIME_TYPES } from "../constants";
 
 // fa-plus
 const PLUS_ICON = (
         onDragStart={(event) => {
           setIsHovered(false);
           event.dataTransfer.setData(
-            "application/vnd.excalidrawlib+json",
+            MIME_TYPES.excalidrawlib,
             JSON.stringify(elements),
           );
         }}

src/constants.ts

 export const GRID_SIZE = 20; // TODO make it configurable?
 
 export const LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG = "collabLinkForceLoadFlag";
+
+export const MIME_TYPES = {
+  excalidraw: "application/vnd.excalidraw+json",
+  excalidrawlib: "application/vnd.excalidrawlib+json",
+};

src/data/blob.ts

 import { AppState } from "../types";
 import { LibraryData, ImportedDataState } from "./types";
 import { calculateScrollCenter } from "../scene";
+import { MIME_TYPES } from "../constants";
+import { base64ToString } from "../base64";
 
-const loadFileContents = async (blob: any) => {
+export const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
-  if ("text" in Blob) {
-    contents = await blob.text();
+  if (blob.type === "image/png") {
+    const { default: decodePng } = await import("png-chunks-extract");
+    const { default: tEXt } = await import("png-chunk-text");
+    const chunks = decodePng(new Uint8Array(await blob.arrayBuffer()));
+
+    const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
+    if (metadataChunk) {
+      const metadata = tEXt.decode(metadataChunk.data);
+      if (metadata.keyword === MIME_TYPES.excalidraw) {
+        return metadata.text;
+      }
+      throw new Error(t("alerts.imageDoesNotContainScene"));
+    } else {
+      throw new Error(t("alerts.imageDoesNotContainScene"));
+    }
   } else {
-    contents = await new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.readAsText(blob, "utf8");
-      reader.onloadend = () => {
-        if (reader.readyState === FileReader.DONE) {
-          resolve(reader.result as string);
+    if ("text" in Blob) {
+      contents = await blob.text();
+    } else {
+      contents = await new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.readAsText(blob, "utf8");
+        reader.onloadend = () => {
+          if (reader.readyState === FileReader.DONE) {
+            resolve(reader.result as string);
+          }
+        };
+      });
+    }
+    if (blob.type === "image/svg+xml") {
+      if (contents.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
+        const match = contents.match(
+          /<!-- payload-start -->(.+?)<!-- payload-end -->/,
+        );
+        if (!match) {
+          throw new Error(t("alerts.imageDoesNotContainScene"));
         }
-      };
-    });
+        return base64ToString(match[1]);
+      }
+      throw new Error(t("alerts.imageDoesNotContainScene"));
+    }
   }
   return contents;
 };
     (window as any).handle = blob.handle;
   }
 
-  const contents = await loadFileContents(blob);
+  const contents = await parseFileContents(blob);
   try {
     const data: ImportedDataState = JSON.parse(contents);
     if (data.type !== "excalidraw") {
   }
 };
 
-export const loadLibraryFromBlob = async (blob: any) => {
-  const contents = await loadFileContents(blob);
+export const loadLibraryFromBlob = async (blob: Blob) => {
+  const contents = await parseFileContents(blob);
   const data: LibraryData = JSON.parse(contents);
   if (data.type !== "excalidrawlib") {
     throw new Error(t("alerts.couldNotLoadInvalidFile"));

src/data/index.ts

 import { ExportType } from "../scene/types";
 import { restore } from "./restore";
 import { ImportedDataState } from "./types";
+import { MIME_TYPES } from "../constants";
+import { stringToBase64 } from "../base64";
 
 export { loadFromBlob } from "./blob";
 export { saveAsJSON, loadFromJSON } from "./json";
     return window.alert(t("alerts.cannotExportEmptyCanvas"));
   }
   if (type === "svg" || type === "clipboard-svg") {
+    let metadata = "";
+
+    if (appState.exportEmbedScene && type === "svg") {
+      metadata += `<!-- payload-type:${MIME_TYPES.excalidraw} -->`;
+      metadata += "<!-- payload-start -->";
+      metadata += await stringToBase64(serializeAsJSON(elements, appState));
+      metadata += "<!-- payload-end -->";
+    }
+
     const tempSvg = exportToSvg(elements, {
       exportBackground,
       viewBackgroundColor,
       exportPadding,
       shouldAddWatermark,
+      metadata,
     });
     if (type === "svg") {
       await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
 
   if (type === "png") {
     const fileName = `${name}.png`;
-    tempCanvas.toBlob(async (blob: any) => {
+    tempCanvas.toBlob(async (blob) => {
       if (blob) {
+        if (appState.exportEmbedScene) {
+          const { default: tEXt } = await import("png-chunk-text");
+          const { default: encodePng } = await import("png-chunks-encode");
+          const { default: decodePng } = await import("png-chunks-extract");
+          const chunks = decodePng(new Uint8Array(await blob.arrayBuffer()));
+          const metadata = tEXt.encode(
+            MIME_TYPES.excalidraw,
+            serializeAsJSON(elements, appState),
+          );
+          // insert metadata before last chunk (iEND)
+          chunks.splice(-1, 0, metadata);
+          blob = new Blob([encodePng(chunks)], { type: "image/png" });
+        }
+
         await fileSave(blob, {
           fileName: fileName,
           extensions: [".png"],

src/data/json.ts

 import { loadFromBlob } from "./blob";
 import { loadLibrary } from "./localStorage";
 import { Library } from "./library";
+import { MIME_TYPES } from "../constants";
 
 export const serializeAsJSON = (
   elements: readonly ExcalidrawElement[],
 export const loadFromJSON = async (localAppState: AppState) => {
   const blob = await fileOpen({
     description: "Excalidraw files",
-    extensions: [".json", ".excalidraw"],
-    mimeTypes: ["application/json"],
+    extensions: [".json", ".excalidraw", ".png", ".svg"],
+    mimeTypes: ["application/json", "image/png", "image/svg+xml"],
   });
   return loadFromBlob(blob, localAppState);
 };
   );
   const fileName = "library.excalidrawlib";
   const blob = new Blob([serialized], {
-    type: "application/vnd.excalidrawlib+json",
+    type: MIME_TYPES.excalidrawlib,
   });
   await fileSave(blob, {
     fileName,

src/global.d.ts

 // https://github.com/krzkaczor/ts-essentials
 type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
+// PNG encoding/decoding
+// -----------------------------------------------------------------------------
+type TEXtChunk = { name: "tEXt"; data: Uint8Array };
+
+declare module "png-chunk-text" {
+  function encode(
+    name: string,
+    value: string,
+  ): { name: "tEXt"; data: Uint8Array };
+  function decode(data: Uint8Array): { keyword: string; text: string };
+}
+declare module "png-chunks-encode" {
+  function encode(chunks: TEXtChunk[]): Uint8Array;
+  export = encode;
+}
+declare module "png-chunks-extract" {
+  function extract(buffer: Uint8Array): TEXtChunk[];
+  export = extract;
+}
+// -----------------------------------------------------------------------------
+
+// -----------------------------------------------------------------------------
 // type getter for interface's callable type
 // src: https://stackoverflow.com/a/58658851/927631
 // -----------------------------------------------------------------------------

src/index-node.ts

 
 const fs = require("fs");
 const out = fs.createWriteStream("test.png");
-const stream = canvas.createPNGStream();
+const stream = (canvas as any).createPNGStream();
 stream.pipe(out);
 out.on("finish", () => {
   console.info("test.png was created.");

src/locales/en.json

     "fontFamily": "Font family",
     "onlySelected": "Only selected",
     "withBackground": "With Background",
+    "exportEmbedScene": "Embed scene into exported file",
+    "exportEmbedScene_details": "Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\nWill increase exported file size.",
     "addWatermark": "Add \"Made with Excalidraw\"",
     "handDrawn": "Hand-drawn",
     "normal": "Normal",
     "uploadedSecurly": "The upload has been secured with end-to-end encryption, which means that Excalidraw server and third parties can't read the content.",
     "loadSceneOverridePrompt": "Loading external drawing will replace your existing content. Do you wish to continue?",
     "errorLoadingLibrary": "There was an error loading the third party library.",
-    "confirmAddLibrary": "This will add {{numShapes}} shape(s) to your library. Are you sure?"
+    "confirmAddLibrary": "This will add {{numShapes}} shape(s) to your library. Are you sure?",
+    "imageDoesNotContainScene": "Image file doesn't contain scene data. Have you enabled this during export?",
+    "cannotRestoreFromImage": "Scene couldn't be restored from this image file"
   },
   "toolBar": {
     "selection": "Selection",

src/scene/export.ts

     viewBackgroundColor: string;
     shouldAddWatermark: boolean;
   },
-  createCanvas: (width: number, height: number) => any = (width, height) => {
+  createCanvas: (width: number, height: number) => HTMLCanvasElement = (
+    width,
+    height,
+  ) => {
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = width * scale;
     tempCanvas.height = height * scale;
     shouldAddWatermark,
   );
 
-  const tempCanvas: any = createCanvas(width, height);
+  const tempCanvas = createCanvas(width, height);
 
   renderScene(
     sceneElements,
     exportPadding = 10,
     viewBackgroundColor,
     shouldAddWatermark,
+    metadata = "",
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
     shouldAddWatermark: boolean;
+    metadata?: string;
   },
 ): SVGSVGElement => {
   const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
 
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
+  ${metadata}
   <defs>
     <style>
       @font-face {

src/tests/__snapshots__/regressionTests.test.tsx.snap

   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": false,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "rectangle",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "text",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
+  "exportEmbedScene": false,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,

src/types.ts

   elementType: typeof SHAPES[number]["value"];
   elementLocked: boolean;
   exportBackground: boolean;
+  exportEmbedScene: boolean;
   shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;