Before implementing readyPromise for excalidrawRef

src/ExcalidrawAutomate.ts

@@ -10,7 +10,7 @@ import {
   TFile
 } from "obsidian"
 import ExcalidrawView from "./ExcalidrawView";
-import { getJSON } from "./ExcalidrawData";
+import { getJSON, getSVGString } from "./ExcalidrawData";
 import { 
   FRONTMATTER, 
   nanoid, 
@@ -813,7 +813,13 @@ export function measureText (newText:string, fontSize:number, fontFamily:number)
   return {w: width, h: height, baseline: baseline };
 };
 
-async function getTemplate(fileWithPath: string):Promise<{elements: any,appState: any, frontmatter: string}> {
+async function getTemplate(fileWithPath:string, loadFiles:boolean = false):Promise<{
+  elements: any,
+  appState: any, 
+  frontmatter: string,
+  files: any,
+  svgSnapshot: string
+}> {
   const app = window.ExcalidrawAutomate.plugin.app;
   const vault = app.vault;
   const file = app.metadataCache.getFirstLinkpathDest(normalizePath(fileWithPath),'');
@@ -823,17 +829,24 @@ async function getTemplate(fileWithPath: string):Promise<{elements: any,appState
     let trimLocation = data.search("# Text Elements\n");
     if(trimLocation == -1) trimLocation = data.search("# Drawing\n");
 
-    const excalidrawData = JSON_parse(getJSON(data)[0]);
+    const [scene,pos] = getJSON(data);
+    const svgSnapshot = getSVGString(data.substr(pos+scene.length));
+
+    const excalidrawData = JSON_parse(scene);
     return {
       elements: excalidrawData.elements,
       appState: excalidrawData.appState,  
-      frontmatter: data.substring(0,trimLocation)
+      frontmatter: data.substring(0,trimLocation),
+      files: null,
+      svgSnapshot: svgSnapshot
     };
   };
   return {
     elements: [],
     appState: {},
-    frontmatter: null
+    frontmatter: null,
+    files: [],
+    svgSnapshot: null,
   }
 }
 

src/ExcalidrawView.ts

@@ -36,9 +36,10 @@ import ExcalidrawPlugin from './main';
 import {ExcalidrawAutomate, repositionElementsToCursor} from './ExcalidrawAutomate';
 import { t } from "./lang/helpers";
 import { ExcalidrawData, REG_LINKINDEX_HYPERLINK, REGEX_LINK } from "./ExcalidrawData";
-import { checkAndCreateFolder, download, generateSVGString, getNewOrAdjacentLeaf, getNewUniqueFilepath, getObsidianImage, getPNG, getSVG, rotatedDimensions, splitFolderAndFilename, svgToBase64, viewportCoordsToSceneCoords } from "./Utils";
+import { checkAndCreateFolder, download, generateSVGString, getNewOrAdjacentLeaf, getNewUniqueFilepath, getObsidianImage, getPNG, getSVG, loadSceneFiles, rotatedDimensions, splitFolderAndFilename, svgToBase64, viewportCoordsToSceneCoords } from "./Utils";
 import { Prompt } from "./Prompt";
 import { ClipboardData } from "@zsviczian/excalidraw/types/clipboard";
+import { sceneCoordsToViewportCoords } from "@zsviczian/excalidraw/types/utils";
 
 declare let window: ExcalidrawAutomate;
 
@@ -434,14 +435,17 @@ export default class ExcalidrawView extends TextFileView {
       if((this.app.workspace.activeLeaf === this.leaf) && this.excalidrawWrapperRef) {
         this.excalidrawWrapperRef.current.focus();
       }
+      loadSceneFiles(this.app,this.excalidrawData.files,this.excalidrawRef.current.addFiles);
     } else {
       this.instantiateExcalidraw({
         elements: excalidrawData.elements,
         appState: excalidrawData.appState,
         libraryItems: await this.getLibrary(),
       });
+      setTimeout(()=>loadSceneFiles(this.app,this.excalidrawData.files,this.excalidrawRef.current.addFiles),1000);
     }
 
+    /*
     //load files
     this.excalidrawData.files.forEach((value,key)=> {
       const file = this.app.vault.getAbstractFileByPath(value);
@@ -458,7 +462,8 @@ export default class ExcalidrawView extends TextFileView {
             this.excalidrawRef.current.addFiles(files);
           });
       }
-    });
+    });*/
+    
   }
 
   //Compatibility mode with .excalidraw files
@@ -629,7 +634,6 @@ export default class ExcalidrawView extends TextFileView {
         return () => window.removeEventListener("resize", onResize);
       }, [excalidrawWrapperRef]);
 
-
       this.getSelectedTextElement = ():{id: string, text:string} => {
         if(!excalidrawRef?.current) return {id:null,text:null};
         if(this.excalidrawRef.current.getAppState().viewModeEnabled) {
@@ -1114,7 +1118,10 @@ export default class ExcalidrawView extends TextFileView {
       );
 
     });
-    ReactDOM.render(reactElement,this.contentEl,()=>this.excalidrawWrapperRef.current.focus());  
+
+    ReactDOM.render(reactElement,this.contentEl,()=>{
+      this.excalidrawWrapperRef.current.focus();
+    });  
   }
 
   public zoomToFit(delay:boolean = true) {

src/Utils.ts

@@ -1,7 +1,7 @@
 import Excalidraw,{exportToSvg} from "@zsviczian/excalidraw";
 import {  App, normalizePath, TAbstractFile, TFile, TFolder, Vault, WorkspaceLeaf } from "obsidian";
 import { Random } from "roughjs/bin/math";
-import { DataURL, Zoom } from "@zsviczian/excalidraw/types/types";
+import { BinaryFileData, DataURL, Zoom } from "@zsviczian/excalidraw/types/types";
 import { nanoid } from "nanoid";
 import { IMAGE_TYPES } from "./constants";
 import {ExcalidrawAutomate} from './ExcalidrawAutomate';
@@ -350,4 +350,28 @@ export const getPNG = async (scene:any, exportSettings:ExportSettings, scale:num
   } catch (error) {
     return null;
   }
+}
+
+export const loadSceneFiles = async (app:App, filesMap: Map<FileId, string>,addFiles:Function) => {
+  const entries = filesMap.entries();
+  let entry;
+  let files:BinaryFileData[] = [];
+  while(!(entry = entries.next()).done) {
+    const file = app.vault.getAbstractFileByPath(entry.value[1]);
+    if(file && file instanceof TFile) {
+      const data = await getObsidianImage(app,file);
+      files.push({
+        mimeType : data.mimeType,
+        id: entry.value[0],
+        dataURL: data.dataURL,
+        created: data.created
+      });
+    }
+  }
+
+  try { //in try block because by the time files are loaded the user may have closed the view
+    addFiles(files);
+  } catch(e) {
+
+  }
 }

src/main.ts

@@ -57,7 +57,6 @@ import { around } from "monkey-around";
 import { t } from "./lang/helpers";
 import { MigrationPrompt } from "./MigrationPrompt";
 import { checkAndCreateFolder, download, generateSVGString, getAttachmentsFolderAndFilePath, getIMGPathFromExcalidrawFile, getNewUniqueFilepath, getPNG, getSVG, splitFolderAndFilename, svgToBase64 } from "./Utils";
-import { directive } from "@babel/types";
 
 declare module "obsidian" {
   interface App {
@@ -225,7 +224,10 @@ export default class ExcalidrawPlugin extends Plugin {
       const [scene,pos] = getJSON(content);
       const svgSnapshot = getSVGString(content.substr(pos+scene.length));
       
-      if(!this.settings.displaySVGInPreview) {
+      //Removed in 1.4.0 when implementing ImageElement. Key reason for removing this
+      //is to use SVG snapshot in file, to avoid resource intensive process to generating PNG
+      //due to the need to load excalidraw plus all linked images
+/*      if(!this.settings.displaySVGInPreview) {
         const width = parseInt(imgAttributes.fwidth);
         let scale = 1;
         if(width>=800) scale = 2;
@@ -235,10 +237,9 @@ export default class ExcalidrawPlugin extends Plugin {
         if(!png) return null;
         img.src = URL.createObjectURL(png);
         return img;
-      }
+      }*/
       let svg:SVGSVGElement = null;
       if(svgSnapshot) {
-        console.log("using snapshot");
         const el = document.createElement('div');
         el.innerHTML = svgSnapshot;
         const firstChild = el.firstChild;

src/settings.ts

@@ -15,7 +15,7 @@ export interface ExcalidrawSettings {
   templateFilePath: string,
   drawingFilenamePrefix: string,
   drawingFilenameDateTime: string,
-  displaySVGInPreview: boolean,
+  //displaySVGInPreview: boolean,
   width: string,
   matchTheme: boolean,
   zoomToFitOnResize: boolean,
@@ -49,7 +49,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   templateFilePath: 'Excalidraw/Template.excalidraw',
   drawingFilenamePrefix: 'Drawing ',
   drawingFilenameDateTime: 'YYYY-MM-DD HH.mm.ss',
-  displaySVGInPreview: true,
+  //displaySVGInPreview: true,
   width: '400',
   matchTheme: false,
   zoomToFitOnResize: true,
@@ -307,8 +307,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
 
     this.containerEl.createEl('h1', {text: t("EMBED_HEAD")});
 
-
-    new Setting(containerEl)
+//Removed in 1.4.0 when implementing ImageElement.
+/*    new Setting(containerEl)
     .setName(t("EMBED_PREVIEW_SVG_NAME")) 
     .setDesc(t("EMBED_PREVIEW_SVG_DESC"))
     .addToggle(toggle => toggle
@@ -316,8 +316,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       .onChange(async (value) => {
         this.plugin.settings.displaySVGInPreview = value;
         this.applySettingsUpdate();
-      }));
-
+      }));*/
 
     new Setting(containerEl)
       .setName(t("EMBED_WIDTH_NAME"))