1.9.3

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-excalidraw-plugin",
   "name": "Excalidraw",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "minAppVersion": "1.1.6",
   "description": "An Obsidian plugin to edit and view Excalidraw drawings",
   "author": "Zsolt Viczian",

package.json

@@ -18,7 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/lz-string": "^1.3.34",
-    "@zsviczian/excalidraw": "0.15.2-obsidian-2",
+    "@zsviczian/excalidraw": "0.15.2-obsidian-4",
     "chroma-js": "^2.4.2",
     "clsx": "^1.2.1",
     "colormaster": "^1.2.1",

src/ExcalidrawView.ts

@@ -30,8 +30,6 @@ import {
   ICON_NAME,
   DISK_ICON_NAME,
   SCRIPTENGINE_ICON_NAME,
-  PNG_ICON_NAME,
-  SVG_ICON_NAME,
   FRONTMATTER_KEY,
   TEXT_DISPLAY_RAW_ICON_NAME,
   TEXT_DISPLAY_PARSED_ICON_NAME,
@@ -45,6 +43,7 @@ import {
   FRONTMATTER_KEY_EXPORT_TRANSPARENT,
   DEVICE,
   GITHUB_RELEASES,
+  EXPORT_IMG_ICON_NAME,
 } from "./Constants";
 import ExcalidrawPlugin from "./main";
 import { repositionElementsToCursor, ExcalidrawAutomate, getTextElementsMatchingQuery, cloneElement } from "./ExcalidrawAutomate";
@@ -201,7 +200,7 @@ const warningUnknowSeriousError = () => {
 
 export default class ExcalidrawView extends TextFileView {
   public excalidrawContainer: HTMLDivElement;
-  private exportDialog: ExportDialog;
+  public exportDialog: ExportDialog;
   public excalidrawData: ExcalidrawData;
   public getScene: Function = null;
   public addElements: Function = null; //add elements to the active Excalidraw drawing
@@ -2129,15 +2128,6 @@ export default class ExcalidrawView extends TextFileView {
             })
             .setSection("pane");
         })
-        .addItem((item) => {
-          item
-            .setTitle(t("EXPORT_EXCALIDRAW"))
-            .setIcon(ICON_NAME)
-            .onClick(async () => {
-              this.exportExcalidraw();
-            })
-            .setSection("pane");
-        });
     } else {
       menu.addItem((item) => {
         item
@@ -2149,39 +2139,21 @@ export default class ExcalidrawView extends TextFileView {
     menu
       .addItem((item) => {
         item
-          .setTitle(t("SAVE_AS_PNG"))
-          .setIcon(PNG_ICON_NAME)
+          .setTitle(t("EXPORT_IMAGE"))
+          .setIcon(EXPORT_IMG_ICON_NAME)
           .setSection("pane")
           .onClick(async (ev) => {
             if (!this.getScene || !this.file) {
               return;
             }
-            if (isCTRL(ev)) {
-              this.exportPNG(isSHIFT(ev));
-              return;
+            if(!this.exportDialog) {
+              this.exportDialog = new ExportDialog(this.plugin, this,this.file);
+              this.exportDialog.createForm();
             }
-            this.savePNG(undefined,isSHIFT(ev));
-            new Notice(`PNG export is ready${isSHIFT(ev)?" with embedded scene":""}`);
+            this.exportDialog.open();
           })
           .setSection("pane");
       })
-      .addItem((item) => {
-        item
-          .setTitle(t("SAVE_AS_SVG"))
-          .setIcon(SVG_ICON_NAME)
-          .setSection("pane")
-          .onClick(async (ev) => {
-            if (!this.getScene || !this.file) {
-              return;
-            }
-            if (isCTRL(ev)) {
-              this.exportSVG(isSHIFT(ev));
-              return;
-            }
-            this.saveSVG(undefined,isSHIFT(ev));
-            new Notice(`SVG export is ready${isSHIFT(ev)?" with embedded scene":""}`);
-          });
-      })
       .addItem(item => {
         item
           .setTitle(t("INSTALL_SCRIPT_BUTTON"))

src/dialogs/Messages.ts

@@ -17,6 +17,15 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
 `,
+"1.9.3":`
+## New from Excalidraw.com
+- Eyedropper tool. The eyedropper is triggered with "i". If you hold the ALT key  while clicking the color it will set the stroke color of the selected element, else the background color.
+- Flipping multiple elements
+- Improved stencil library rendering performance + the stencil library will remember the scroll position from the previous time it was open
+
+## Fixed
+- Replaced command palette and tab export SVG/PNG/Excalidraw actions with "export image" which will take the user to the export image dialog.
+`,
 "1.9.2":`
 <div class="excalidraw-videoWrapper"><div>
 <iframe src="https://www.youtube.com/embed/diBT5iaoAYo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/lang/locale/en.ts

@@ -42,10 +42,6 @@ export default {
   NEW_IN_ACTIVE_PANE_EMBED:
     "Create new drawing - IN THE CURRENT ACTIVE WINDOW - and embed into active document",
   NEW_IN_POPOUT_WINDOW_EMBED: "Create new drawing - IN A POPOUT WINDOW - and embed into active document",
-  EXPORT_SVG: "Save as SVG next to current file",
-  EXPORT_PNG: "Save as PNG next to current file",
-  EXPORT_SVG_WITH_SCENE: "Save as SVG with embedded Excalidraw Scene next to current file",
-  EXPORT_PNG_WITH_SCENE: "Save as PNG with embedded Excalidraw Scene next to current file",
   TOGGLE_LOCK: "Toggle Text Element between edit RAW and PREVIEW",
   DELETE_FILE: "Delete selected image or Markdown file from Obsidian Vault",
   INSERT_LINK_TO_ELEMENT:
@@ -77,8 +73,7 @@ export default {
   //ExcalidrawView.ts
   INSTALL_SCRIPT_BUTTON: "Install or update Excalidraw Scripts",
   OPEN_AS_MD: "Open as Markdown",
-  SAVE_AS_PNG: `Save as PNG into Vault (${labelCTRL()}+CLICK to export; SHIFT to embed scene)`,
-  SAVE_AS_SVG: `Save as SVG into Vault (${labelCTRL()}+CLICK to export; SHIFT to embed scene)`,
+  EXPORT_IMAGE: `Export Image`,
   OPEN_LINK: "Open selected text as link\n(SHIFT+CLICK to open in a new pane)",
   EXPORT_EXCALIDRAW: "Export to an .Excalidraw file",
   LINK_BUTTON_CLICK_NO_TEXT:

src/main.ts

@@ -25,10 +25,6 @@ import {
   ICON_NAME,
   SCRIPTENGINE_ICON,
   SCRIPTENGINE_ICON_NAME,
-  PNG_ICON,
-  PNG_ICON_NAME,
-  SVG_ICON,
-  SVG_ICON_NAME,
   RERENDER_EVENT,
   FRONTMATTER_KEY,
   FRONTMATTER,
@@ -40,6 +36,8 @@ import {
   VIRGIL_FONT,
   VIRGIL_DATAURL,
   EXPORT_TYPES,
+  EXPORT_IMG_ICON_NAME,
+  EXPORT_IMG_ICON,
 } from "./Constants";
 import ExcalidrawView, { TextMode, getTextMode } from "./ExcalidrawView";
 import {
@@ -104,6 +102,7 @@ import { ScriptInstallPrompt } from "./dialogs/ScriptInstallPrompt";
 import Taskbone from "./ocr/Taskbone";
 import { emulateCTRLClickForLinks, linkClickModifierType, PaneTarget } from "./utils/ModifierkeyHelper";
 import { InsertPDFModal } from "./dialogs/InsertPDFModal";
+import { ExportDialog } from "./dialogs/ExportDialog";
 
 declare module "obsidian" {
   interface App {
@@ -198,8 +197,7 @@ export default class ExcalidrawPlugin extends Plugin {
   async onload() {
     addIcon(ICON_NAME, EXCALIDRAW_ICON);
     addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
-    addIcon(PNG_ICON_NAME, PNG_ICON);
-    addIcon(SVG_ICON_NAME, SVG_ICON);
+    addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
 
     await this.loadSettings({reEnableAutosave:true});
     
@@ -937,42 +935,6 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });    
 
-    this.addCommand({
-      id: "export-svg",
-      name: t("EXPORT_SVG"),
-      checkCallback: (checking: boolean) => {
-        if (checking) {
-          return (
-            Boolean(this.app.workspace.getActiveViewOfType(ExcalidrawView))
-          );
-        }
-        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
-        if (view) {
-          view.saveSVG();
-          return true;
-        }
-        return false;
-      },
-    });
-
-    this.addCommand({
-      id: "export-svg-scene",
-      name: t("EXPORT_SVG_WITH_SCENE"),
-      checkCallback: (checking: boolean) => {
-        if (checking) {
-          return (
-            Boolean(this.app.workspace.getActiveViewOfType(ExcalidrawView))
-          );
-        }
-        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
-        if (view) {
-          view.saveSVG(undefined,true);
-          return true;
-        }
-        return false;
-      },
-    });
-
     this.addCommand({
       id: "run-ocr",
       name: t("RUN_OCR"),
@@ -1054,8 +1016,8 @@ export default class ExcalidrawPlugin extends Plugin {
     });
 
     this.addCommand({
-      id: "export-png",
-      name: t("EXPORT_PNG"),
+      id: "export-image",
+      name: t("EXPORT_IMAGE"),
       checkCallback: (checking: boolean) => {
         if (checking) {
           return (
@@ -1064,25 +1026,11 @@ export default class ExcalidrawPlugin extends Plugin {
         }
         const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
         if (view) {
-          view.savePNG();
-          return true;
-        }
-        return false;
-      },
-    });
-
-    this.addCommand({
-      id: "export-png-scene",
-      name: t("EXPORT_PNG_WITH_SCENE"),
-      checkCallback: (checking: boolean) => {
-        if (checking) {
-          return (
-            Boolean(this.app.workspace.getActiveViewOfType(ExcalidrawView))
-          );
-        }
-        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
-        if (view) {
-          view.savePNG(undefined, true);
+          if(!view.exportDialog) {
+            view.exportDialog = new ExportDialog(this, view,view.file);
+            view.exportDialog.createForm();
+          }
+          view.exportDialog.open();
           return true;
         }
         return false;

src/menu/ActionIcons.tsx

@@ -246,46 +246,6 @@ export const ICONS = {
       <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" />
     </svg>
   ),
-  exportSVG: (
-    <svg 
-      viewBox="0 0 28 28"
-      stroke="var(--icon-fill-color)"
-      fill="var(--icon-fill-color)"
-      strokeWidth="1"
-    >
-      <text style={{ fontSize: "28px", fontWeight: "bold" }} x="4" y="24">
-        S
-      </text>
-    </svg>
-  ),
-  exportPNG: (
-    <svg 
-      viewBox="0 0 28 28"
-      stroke="var(--icon-fill-color)"
-      fill="var(--icon-fill-color)"
-      strokeWidth="1"
-    >
-      <text style={{ fontSize: "28px", fontWeight: "bold" }} x="4" y="24">
-        P
-      </text>
-    </svg>
-  ),
-  exportExcalidraw: (
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 100 100"
-      stroke="var(--icon-fill-color)"
-      strokeWidth="2"
-    >
-      <g transform="translate(30,5)">
-        <path d="M14.45 1.715c-2.723 2.148-6.915 5.797-10.223 8.93l-2.61 2.445.477 3.207c.258 1.75.738 5.176 1.031 7.582.332 2.406.66 4.668.773 4.996.145.438 0 .656-.406.656-.699 0-.734-.183 1.176 5.832.7 2.297 1.363 4.414 1.434 4.633.074.254.367.363.699.254.332-.145.515-.438.406-.691-.113-.293.074-.586.367-.696.403-.144.367-.437-.258-1.492-.992-1.64-3.53-15.64-3.675-20.164-.11-3.207-.11-3.242 1.25-5.066 1.324-1.786 4.375-4.485 9.078-7.91 1.324-.985 2.648-2.079 3.015-2.446.551-.656.809-.472 5.442 4.414 2.683 2.805 5.664 5.688 6.617 6.414l1.766 1.313-1.36 2.844c-.734 1.53-3.715 7.437-6.656 13.054-6.137 11.813-4.887 10.68-12.02 10.79l-4.632.038-1.547 1.75c-1.617 1.86-1.836 2.551-1.063 3.72.293.398.512 1.054.512 1.456 0 .656.258.766 1.73.84.918.035 1.762.145 1.875.254.11.11.258 2.371.368 5.031l.144 4.813-2.46 5.25C1.616 72.516 0 76.527 0 77.84c0 .691.148 1.273.293 1.273.367 0 .367-.035 15.332-30.988 6.95-14.363 13.531-27.89 14.633-30.113 1.101-2.227 2.094-4.266 2.168-4.559.074-.328-2.461-2.844-6.508-6.379C22.281 3.864 19.082.95 18.785.621c-.844-1.023-2.094-.695-4.336 1.094zM15.7 43.64c-1.692 3.246-1.766 3.28-6.4 3.5-4.081.218-4.152.183-4.152-.582 0-.438-.148-1.024-.332-1.313-.222-.328-.074-.914.442-1.715l.808-1.238h3.676c2.024-.04 4.34-.184 5.149-.328.808-.149 1.507-.219 1.578-.184.074.035-.293.875-.77 1.86zm-3.09 5.832c-.294.765-1.067 2.37-1.692 3.574-1.027 2.043-1.137 2.113-1.395 1.277-.148-.511-.257-2.008-.296-3.355-.036-2.66-.11-2.625 2.98-2.809l.992-.035zm0 0" />
-        <path d="M15.55 10.39c-.66.473-.843.95-.843 2.153 0 1.422.11 1.64 1.102 2.039.992.402 1.25.367 2.39-.398 1.508-1.024 1.543-1.278.442-2.918-.957-1.422-1.914-1.676-3.09-.875zm2.098 1.313c.586 1.02.22 1.785-.882 1.785-.993 0-1.434-.984-.883-1.968.441-.801 1.285-.727 1.765.183zm0 0M38.602 18.594c0 .183-.22.363-.477.363-.219 0-.844 1.023-1.324 2.262-1.469 3.793-16.176 32.629-16.211 31.718 0-.472-.223-.8-.59-.8-.516 0-.59.289-.367 1.71.219 1.641.074 2.008-5.149 12.071-2.941 5.723-6.101 11.703-7.02 13.305-.956 1.68-1.69 3.5-1.765 4.265-.11 1.313.035 1.496 3.235 4.23 1.84 1.606 4.191 3.61 5.222 4.52 4.63 4.196 6.801 5.871 7.387 5.762.883-.145 14.523-14.328 14.559-15.129 0-.367-.66-5.906-1.47-12.324-1.398-10.938-2.722-23.734-2.573-24.973.109-.765-.442-4.633-.844-6.308-.332-1.313-.184-1.86 2.46-7.84 1.544-3.535 3.567-7.875 4.45-9.625.844-1.75 1.582-3.281 1.582-3.39 0-.11-.258-.18-.55-.18-.298 0-.555.144-.555.363zm-8.454 27.234c.403 2.55 1.211 8.676 1.801 13.598 1.14 9.043 2.461 19.07 2.832 21.62.219 1.278.07 1.532-2.316 4.157-4.156 4.629-8.567 9.188-10.074 10.356l-1.399 1.093-7.168-6.636c-6.617-6.051-7.168-6.672-6.765-7.403.222-.398 2.097-3.789 4.156-7.508 2.058-3.718 4.777-8.68 6.027-11.011 1.29-2.371 2.465-4.41 2.684-4.52.258-.148.332 3.535.258 11.375-.149 11.703-.11 11.739 1.066 11.485.148 0 .258-5.907.258-13.09V56.293l3.86-7.656c2.132-4.23 3.898-7.621 3.972-7.586.07.039.441 2.187.808 4.777zm0 0" />
-      </g>
-    </svg>
-  ),
   //fa-solid fa-magnifying-glass
   search: (
     <svg
@@ -568,87 +528,60 @@ export const ICONS = {
       focusable="false"
       role="img"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 166 267"
+      viewBox="0 0 512 512"
     >
-      <path fill="transparent" d="M0 0h165.742v267.245H0z" />
-      <g fillRule="evenodd">
-        <path
-          fill="#bd7efc"
-          strokeWidth="0"
-          d="M55.5 96.49 39.92 57.05 111.28 10l4.58 36.54L55.5 95.65"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M55.5 96.49c-5.79-14.66-11.59-29.33-15.58-39.44M55.5 96.49c-3.79-9.59-7.58-19.18-15.58-39.44m0 0C60.13 43.72 80.34 30.4 111.28 10M39.92 57.05C60.82 43.27 81.73 29.49 111.28 10m0 0c.97 7.72 1.94 15.45 4.58 36.54M111.28 10c1.14 9.12 2.29 18.24 4.58 36.54m0 0C95.41 63.18 74.96 79.82 55.5 95.65m60.36-49.11C102.78 57.18 89.71 67.82 55.5 95.65m0 0v.84m0-.84v.84"
-        />
-      </g>
-      <g fillRule="evenodd">
-        <path
-          fill="#e2c4ff"
-          strokeWidth="0"
-          d="m111.234 10.06 44.51 42.07-40.66-5.08-3.85-36.99"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M111.234 10.06c11.83 11.18 23.65 22.36 44.51 42.07m-44.51-42.07 44.51 42.07m0 0c-13.07-1.63-26.13-3.27-40.66-5.08m40.66 5.08c-11.33-1.41-22.67-2.83-40.66-5.08m0 0c-1.17-11.29-2.35-22.58-3.85-36.99m3.85 36.99c-1.47-14.17-2.95-28.33-3.85-36.99m0 0s0 0 0 0m0 0s0 0 0 0"
-        />
-      </g>
-      <g fillRule="evenodd">
-        <path
-          fill="#2f005e"
-          strokeWidth="0"
-          d="m10 127.778 45.77-32.99-15.57-38.08-30.2 71.07"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M10 127.778c16.85-12.14 33.7-24.29 45.77-32.99M10 127.778c16.59-11.95 33.17-23.91 45.77-32.99m0 0c-6.14-15.02-12.29-30.05-15.57-38.08m15.57 38.08c-4.08-9.98-8.16-19.96-15.57-38.08m0 0c-11.16 26.27-22.33 52.54-30.2 71.07m30.2-71.07c-10.12 23.81-20.23 47.61-30.2 71.07m0 0s0 0 0 0m0 0s0 0 0 0"
-        />
-      </g>
-      <g fillRule="evenodd">
-        <path
-          fill="#410380"
-          strokeWidth="0"
-          d="m40.208 235.61 15.76-140.4-45.92 32.92 30.16 107.48"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M40.208 235.61c3.7-33.01 7.41-66.02 15.76-140.4m-15.76 140.4c3.38-30.16 6.77-60.32 15.76-140.4m0 0c-10.83 7.76-21.66 15.53-45.92 32.92m45.92-32.92c-11.69 8.38-23.37 16.75-45.92 32.92m0 0c6.84 24.4 13.69 48.8 30.16 107.48m-30.16-107.48c6.67 23.77 13.33 47.53 30.16 107.48m0 0s0 0 0 0m0 0s0 0 0 0"
-        />
-      </g>
-      <g fillRule="evenodd">
-        <path
-          fill="#943feb"
-          strokeWidth="0"
-          d="m111.234 240.434-12.47 16.67-42.36-161.87 58.81-48.3 40.46 5.25-44.44 188.25"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M111.234 240.434c-3.79 5.06-7.57 10.12-12.47 16.67m12.47-16.67c-4.43 5.93-8.87 11.85-12.47 16.67m0 0c-16.8-64.17-33.59-128.35-42.36-161.87m42.36 161.87c-9.74-37.2-19.47-74.41-42.36-161.87m0 0c15.03-12.35 30.07-24.7 58.81-48.3m-58.81 48.3c22.49-18.47 44.97-36.94 58.81-48.3m0 0c9.48 1.23 18.95 2.46 40.46 5.25m-40.46-5.25c13.01 1.69 26.02 3.38 40.46 5.25m0 0c-10.95 46.41-21.91 92.82-44.44 188.25m44.44-188.25c-12.2 51.71-24.41 103.42-44.44 188.25m0 0s0 0 0 0m0 0s0 0 0 0"
-        />
-      </g>
-      <g fillRule="evenodd">
-        <path
-          fill="#6212b3"
-          strokeWidth="0"
-          d="m40.379 235.667 15.9-140.21 42.43 161.79-58.33-21.58"
-        />
-        <path
-          fill="none"
-          stroke="#410380"
-          strokeWidth=".5"
-          d="M40.379 235.667c4.83-42.62 9.67-85.25 15.9-140.21m-15.9 140.21c5.84-51.52 11.69-103.03 15.9-140.21m0 0c10.98 41.87 21.96 83.74 42.43 161.79m-42.43-161.79c13.28 50.63 26.56 101.25 42.43 161.79m0 0c-11.8-4.37-23.6-8.74-58.33-21.58m58.33 21.58c-21.73-8.04-43.47-16.08-58.33-21.58m0 0s0 0 0 0m0 0s0 0 0 0"
-        />
+      <defs>
+        <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-48 -185 123 -32 179 429.7)">
+          <stop stop-color="#fff" stop-opacity=".4"/>
+          <stop offset="1" stop-opacity=".1"/>
+        </radialGradient>
+        <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(41 -310 229 30 341.6 351.3)">
+          <stop stop-color="#fff" stop-opacity=".6"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".1"/>
+        </radialGradient>
+        <radialGradient id="d" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(57 -261 178 39 190.5 296.3)">
+          <stop stop-color="#fff" stop-opacity=".8"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".4"/>
+        </radialGradient>
+        <radialGradient id="e" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-79 -133 153 -90 321.4 464.2)">
+          <stop stop-color="#fff" stop-opacity=".3"/>
+          <stop offset="1" stop-opacity=".3"/>
+        </radialGradient>
+        <radialGradient id="f" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-29 136 -92 -20 300.7 149.9)">
+          <stop stop-color="#fff" stop-opacity="0"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".2"/>
+        </radialGradient>
+        <radialGradient id="g" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(72 73 -155 153 137.8 225.2)">
+          <stop stop-color="#fff" stop-opacity=".2"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".4"/>
+        </radialGradient>
+        <radialGradient id="h" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(20 118 -251 43 215.1 273.7)">
+          <stop stop-color="#fff" stop-opacity=".1"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".3"/>
+        </radialGradient>
+        <radialGradient id="i" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-162 -85 268 -510 374.4 371.7)">
+          <stop stop-color="#fff" stop-opacity=".2"/>
+          <stop offset=".5" stop-color="#fff" stop-opacity=".2"/>
+          <stop offset="1" stop-color="#fff" stop-opacity=".3"/>
+        </radialGradient>
+        <filter id="a" x="80.1" y="37" width="351.1" height="443.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+          <feGaussianBlur stdDeviation="6.5" result="effect1_foregroundBlur_744_9191"/>
+        </filter>
+      </defs>
+      <g filter="url(#a)">
+        <path d="M359.2 437.5c-2.6 19-21.3 33.9-40 28.7-26.5-7.2-57.2-18.6-84.8-20.7l-42.4-3.2a28 28 0 0 1-18-8.3l-73-74.8a27.7 27.7 0 0 1-5.4-30.7s45-98.6 46.8-103.7c1.6-5.1 7.8-49.9 11.4-73.9a28 28 0 0 1 9-16.5L249 57.2a28 28 0 0 1 40.6 3.4l72.6 91.6a29.5 29.5 0 0 1 6.2 18.3c0 17.3 1.5 53 11.2 76a301.3 301.3 0 0 0 35.6 58.2 14 14 0 0 1 1 15.6c-6.3 10.7-18.9 31.3-36.6 57.6a142.2 142.2 0 0 0-20.5 59.6Z" fill="#000" fill-opacity=".3"/>
       </g>
+      <path id="arrow" d="M359.9 434.3c-2.6 19.1-21.3 34-40 28.9-26.4-7.3-57-18.7-84.7-20.8l-42.3-3.2a27.9 27.9 0 0 1-18-8.4l-73-75a27.9 27.9 0 0 1-5.4-31s45.1-99 46.8-104.2c1.7-5.1 7.8-50 11.4-74.2a28 28 0 0 1 9-16.6l86.2-77.5a28 28 0 0 1 40.6 3.5l72.5 92a29.7 29.7 0 0 1 6.2 18.3c0 17.4 1.5 53.2 11.1 76.3a303 303 0 0 0 35.6 58.5 14 14 0 0 1 1.1 15.7c-6.4 10.8-18.9 31.4-36.7 57.9a143.3 143.3 0 0 0-20.4 59.8Z" fill="#6c31e3"/>
+      <path d="M182.7 436.4c33.9-68.7 33-118 18.5-153-13.2-32.4-37.9-52.8-57.3-65.5-.4 1.9-1 3.7-1.8 5.4L96.5 324.8a27.9 27.9 0 0 0 5.5 31l72.9 75c2.3 2.3 5 4.2 7.8 5.6Z" fill="url(#b)"/>
+      <path d="M274.9 297c9.1.9 18 2.9 26.8 6.1 27.8 10.4 53.1 33.8 74 78.9 1.5-2.6 3-5.1 4.6-7.5a1222 1222 0 0 0 36.7-57.9 14 14 0 0 0-1-15.7 303 303 0 0 1-35.7-58.5c-9.6-23-11-58.9-11.1-76.3 0-6.6-2.1-13.1-6.2-18.3l-72.5-92-1.2-1.5c5.3 17.5 5 31.5 1.7 44.2-3 11.8-8.6 22.5-14.5 33.8-2 3.8-4 7.7-5.9 11.7a140 140 0 0 0-15.8 58c-1 24.2 3.9 54.5 20 95Z" fill="url(#c)"/>
+      <path d="M274.8 297c-16.1-40.5-21-70.8-20-95 1-24 8-42 15.8-58l6-11.7c5.8-11.3 11.3-22 14.4-33.8a78.5 78.5 0 0 0-1.7-44.2 28 28 0 0 0-39.4-2l-86.2 77.5a28 28 0 0 0-9 16.6L144.2 216c0 .7-.2 1.3-.3 2 19.4 12.6 44 33 57.3 65.3 2.6 6.4 4.8 13.1 6.4 20.4a200 200 0 0 1 67.2-6.8Z" fill="url(#d)"/>
+      <path d="M320 463.2c18.6 5.1 37.3-9.8 39.9-29a153 153 0 0 1 15.9-52.2c-21-45.1-46.3-68.5-74-78.9-29.5-11-61.6-7.3-94.2.6 7.3 33.1 3 76.4-24.8 132.7 3.1 1.6 6.6 2.5 10.1 2.8l43.9 3.3c23.8 1.7 59.3 14 83.2 20.7Z" fill="url(#e)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M255 200.5c-1.1 24 1.9 51.4 18 91.8l-5-.5c-14.5-42.1-17.7-63.7-16.6-88 1-24.3 8.9-43 16.7-59 2-4 6.6-11.5 8.6-15.3 5.8-11.3 9.7-17.2 13-27.5 4.8-14.4 3.8-21.2 3.2-28 3.7 24.5-10.4 45.8-21 67.5a145 145 0 0 0-17 59Z" fill="url(#f)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M206 285.1c2 4.4 3.7 8 4.9 13.5l-4.3 1c-1.7-6.4-3-11-5.5-16.5-14.6-34.3-38-52-57-65 23 12.4 46.7 31.9 61.9 67Z" fill="url(#g)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M211.1 303c8 37.5-1 85.2-27.5 131.6 22.2-46 33-90.1 24-131l3.5-.7Z" fill="url(#h)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M302.7 299.5c43.5 16.3 60.3 52 72.8 81.9-15.5-31.2-37-65.7-74.4-78.5-28.4-9.8-52.4-8.6-93.5.7l-.9-4c43.6-10 66.4-11.2 96 0Z" fill="url(#i)"/>
     </svg>
   )
 };

src/menu/ToolsPanel.tsx

@@ -14,6 +14,7 @@ import { ScriptInstallPrompt } from "src/dialogs/ScriptInstallPrompt";
 import { ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/types";
 import { isALT, isCTRL, isSHIFT, mdPropModifier } from "src/utils/ModifierkeyHelper";
 import { InsertPDFModal } from "src/dialogs/InsertPDFModal";
+import { ExportDialog } from "src/dialogs/ExportDialog";
 
 declare const PLUGIN_VERSION:string;
 const dark = '<svg style="stroke:#ced4da;#212529;color:#ced4da;fill:#ced4da" ';
@@ -438,42 +439,17 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
                     view={this.props.view}
                   />
                   <ActionButton
-                    key={"svg"}
-                    title={t("EXPORT_SVG")}
+                    key={"exportIMG"}
+                    title={t("EXPORT_IMAGE")}
                     action={() => {
-                      this.props.view.saveSVG();
-                      new Notice(
-                        `File saved: ${getIMGFilename(
-                          this.props.view.file.path,
-                          "svg",
-                        )}`,
-                      );
+                      const view = this.props.view;
+                      if(!view.exportDialog) {
+                        view.exportDialog = new ExportDialog(view.plugin, view,view.file);
+                        view.exportDialog.createForm();
+                      }
+                      view.exportDialog.open();
                     }}
-                    icon={ICONS.exportSVG}
-                    view={this.props.view}
-                  />
-                  <ActionButton
-                    key={"png"}
-                    title={t("EXPORT_PNG")}
-                    action={() => {
-                      this.props.view.savePNG();
-                      new Notice(
-                        `File saved: ${getIMGFilename(
-                          this.props.view.file.path,
-                          "png",
-                        )}`,
-                      );
-                    }}
-                    icon={ICONS.exportPNG}
-                    view={this.props.view}
-                  />
-                  <ActionButton
-                    key={"excalidraw"}
-                    title={t("EXPORT_EXCALIDRAW")}
-                    action={() => {
-                      this.props.view.exportExcalidraw();
-                    }}
-                    icon={ICONS.exportExcalidraw}
+                    icon={ICONS.ExportImage}
                     view={this.props.view}
                   />
                   <ActionButton

yarn.lock

@@ -2272,10 +2272,10 @@
   dependencies:
     "@zerollup/ts-helpers" "^1.7.18"
 
-"@zsviczian/excalidraw@0.15.2-obsidian-2":
-  "integrity" "sha512-TrXKrCYSMZMjNWVxNorV7vty7vLphponHDjh4MOKXW+3YmFx91Spzmp7GXhPr1IBTUDgcW+U5KXWvU77uuFJmg=="
-  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.15.2-obsidian-2.tgz"
-  "version" "0.15.2-obsidian-2"
+"@zsviczian/excalidraw@0.15.2-obsidian-4":
+  "integrity" "sha512-piFX8c6PXPZ1N5DdWZFaxQNfkVvaofizy2cPKFChHx5PDjhtlD8FXzQ7zztluYjFvCF5RpJ2OfJWaNKQ1vn+7A=="
+  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.15.2-obsidian-4.tgz"
+  "version" "0.15.2-obsidian-4"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="