2.6.8-beta-1 - settings loading is async, added detailed load timestamps ea.printStartupBreakdown(), delayed settings load

manifest-beta.json

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

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.6-14",
+    "@zsviczian/excalidraw": "0.17.6-15",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

rollup.config.js

@@ -52,14 +52,15 @@ if (!isLib) console.log(manifest.version);
 
 const packageString = isLib
   ? ""
-  : ';' + lzstring_pkg +
+  : ';const INITIAL_TIMESTAMP=Date.now();' + lzstring_pkg +
   '\nlet REACT_PACKAGES = `' +
   jsesc(react_pkg + reactdom_pkg, { quotes: 'backtick' }) +
   '`;\n' +
   'let EXCALIDRAW_PACKAGE = ""; const unpackExcalidraw = () => {EXCALIDRAW_PACKAGE = LZString.decompressFromBase64("' + LZString.compressToBase64(excalidraw_pkg) + '");};\n' +
   'let {react, reactDOM } = window.eval.call(window, `(function() {' + '${REACT_PACKAGES};' + 'return {react: React, reactDOM: ReactDOM};})();`);\n' +
   `let excalidrawLib = {};\n` +
-  'let PLUGIN_VERSION="' + manifest.version + '";';
+  'const PLUGIN_VERSION="' + manifest.version + '";';
+  
 
 const BASE_CONFIG = {
   input: 'src/main.ts',

src/ExcalidrawAutomate.ts

@@ -133,6 +133,10 @@ export class ExcalidrawAutomate {
     return DEVICE;
   }
 
+  public printStartupBreakdown() {
+    this.plugin.printStarupBreakdown();
+  }
+
   public help(target: Function | string) {
     if (!target) {
       log("Usage: ea.help(ea.functionName) or ea.help('propertyName') or ea.help('utils.functionName') - notice property name and utils function name is in quotes");
@@ -1820,7 +1824,7 @@ export class ExcalidrawAutomate {
       viewBackgroundColor: "#FFFFFF",
       gridSize: 0
     };
-  }; 
+  };
 
   /**
    * returns true if MD file is an Excalidraw file

src/MarkdownPostProcessor.ts

@@ -886,6 +886,7 @@ export const markdownPostProcessor = async (
   el: HTMLElement,
   ctx: MarkdownPostProcessorContext,
 ) => {
+  await plugin.awaitSettings();
   const isPrinting = Boolean(document.body.querySelectorAll("body > .print").length>0);
   //firstElementChild: https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1956
   const isFrontmatter = el.hasClass("mod-frontmatter") ||

src/main.ts

@@ -145,7 +145,6 @@ import { WeakArray } from "./utils/WeakArray";
 import { getCJKDataURLs } from "./utils/CJKLoader";
 import { ExcalidrawLoading, switchToExcalidraw } from "./dialogs/ExcalidrawLoading";
 import { insertImageToView } from "./utils/ExcalidrawViewUtils";
-import tr from "./lang/locale/tr";
 
 declare let EXCALIDRAW_PACKAGE:string;
 declare let REACT_PACKAGES:string;
@@ -153,7 +152,8 @@ declare const unpackExcalidraw: Function;
 declare let react:any;
 declare let reactDOM:any;
 declare let excalidrawLib: typeof ExcalidrawLib;
-declare let PLUGIN_VERSION:string;
+declare const PLUGIN_VERSION:string;
+declare const INITIAL_TIMESTAMP: number;
 
 export default class ExcalidrawPlugin extends Plugin {
   public eaInstances = new WeakArray<ExcalidrawAutomate>();
@@ -199,13 +199,17 @@ export default class ExcalidrawPlugin extends Plugin {
   //if set, the next time this file is opened it will be opened as markdown
   public forceToOpenInMarkdownFilepath: string = null;
   //private slob:string;
-  private ribbonIcon:HTMLElement;
   public loadTimestamp:number;
   private isLocalCJKFontAvailabe:boolean = undefined
   public isReady = false;
+  private startupAnalytics: string[] = [];
+  private lastLogTimestamp: number;
+  private settingsReady: boolean = false;
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
+    this.loadTimestamp = INITIAL_TIMESTAMP;
+    this.lastLogTimestamp = this.loadTimestamp;
     this.packageMap.set(window,{react, reactDOM, excalidrawLib});
     this.filesMaster = new Map<
       FileId,
@@ -219,6 +223,16 @@ export default class ExcalidrawPlugin extends Plugin {
     }*/
   }
 
+  private logStartupEvent(message:string) {
+    const timestamp = Date.now();
+    this.startupAnalytics.push(`${message}\nTotal: ${timestamp - this.loadTimestamp}ms Delta: ${timestamp - this.lastLogTimestamp}ms\n`);
+    this.lastLogTimestamp = timestamp;
+  }
+
+  public printStarupBreakdown() {
+    console.log(`Excalidraw ${PLUGIN_VERSION} startup breakdown:\n`+this.startupAnalytics.join("\n"));
+  }
+
   get locale() {
     return LOCALE;
   }
@@ -352,6 +366,7 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   async onload() {
+    this.logStartupEvent("Plugin Constructor ready, starting onload()");
     this.registerView(
       VIEW_TYPE_EXCALIDRAW,
       (leaf: WorkspaceLeaf) => {
@@ -365,26 +380,34 @@ export default class ExcalidrawPlugin extends Plugin {
     //Compatibility mode with .excalidraw files
     this.registerExtensions(["excalidraw"], VIEW_TYPE_EXCALIDRAW);
 
+    addIcon(ICON_NAME, EXCALIDRAW_ICON);
+    addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
+    addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
+    this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), this.actionRibbonClick.bind(this));
+
     try {
-      await this.loadSettings({reEnableAutosave:true});
-      const updateSettings = !this.settings.onceOffCompressFlagReset || !this.settings.onceOffGPTVersionReset;
-      if(!this.settings.onceOffCompressFlagReset) {
-        this.settings.compress = true;
-        this.settings.onceOffCompressFlagReset = true;
-      }
-      if(!this.settings.onceOffGPTVersionReset) {
-        if(this.settings.openAIDefaultVisionModel === "gpt-4-vision-preview") {
-          this.settings.openAIDefaultVisionModel = "gpt-4o";
+      this.loadSettings({reEnableAutosave:true}).then(async () => {
+        const updateSettings = !this.settings.onceOffCompressFlagReset || !this.settings.onceOffGPTVersionReset;
+        if(!this.settings.onceOffCompressFlagReset) {
+          this.settings.compress = true;
+          this.settings.onceOffCompressFlagReset = true;
         }
-      }
-      if(updateSettings) {
-        await this.saveSettings();
-      }
-      this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
+        if(!this.settings.onceOffGPTVersionReset) {
+          if(this.settings.openAIDefaultVisionModel === "gpt-4-vision-preview") {
+            this.settings.openAIDefaultVisionModel = "gpt-4o";
+          }
+        }
+        if(updateSettings) {
+          await this.saveSettings();
+        }
+        this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
+        this.settingsReady = true;
+      });
     } catch (e) {
       new Notice("Error loading plugin settings", 6000);
       console.error("Error loading plugin settings", e);
     }
+    this.logStartupEvent("Settings loaded");
 
     try {
       // need it her for ExcaliBrain
@@ -393,6 +416,7 @@ export default class ExcalidrawPlugin extends Plugin {
       new Notice("Error initializing Excalidraw Automate", 6000);
       console.error("Error initializing Excalidraw Automate", e);
     }
+    this.logStartupEvent("Excalidraw Automate initialized");
 
     try {
       //Licat: Are you registering your post processors in onLayoutReady? You should register them in onload instead
@@ -401,8 +425,14 @@ export default class ExcalidrawPlugin extends Plugin {
       new Notice("Error adding markdown post processor", 6000);
       console.error("Error adding markdown post processor", e);
     }
+    this.logStartupEvent("Markdown post processor added");
 
     this.app.workspace.onLayoutReady(async () => {
+      this.loadTimestamp = Date.now();
+      this.lastLogTimestamp = this.loadTimestamp;
+      this.logStartupEvent("\n----------------------------------\nWorkspace onLayoutReady event fired (these actions are outside the plugin initialization)");
+      await this.awaitSettings();
+      this.logStartupEvent("Settings awaited");
       try {
         unpackExcalidraw();
         excalidrawLib = window.eval.call(window,`(function() {${EXCALIDRAW_PACKAGE};return ExcalidrawLib;})()`);
@@ -412,6 +442,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error loading the Excalidraw package", 6000);
         console.error("Error loading the Excalidraw package", e);
       }
+      this.logStartupEvent("Excalidraw package unpacked");
 
       try {
         initCompressionWorker();
@@ -419,11 +450,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing compression worker", 6000);
         console.error("Error initializing compression worker", e);
       }
-
-      this.loadTimestamp = Date.now();
-      addIcon(ICON_NAME, EXCALIDRAW_ICON);
-      addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
-      addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
+      this.logStartupEvent("Compression worker initialized");
 
       try {
         this.excalidrawConfig = new ExcalidrawConfig(this);
@@ -431,6 +458,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing Excalidraw config", 6000);
         console.error("Error initializing Excalidraw config", e);
       }
+      this.logStartupEvent("Excalidraw config initialized");
 
       try {
         await loadMermaid();
@@ -438,6 +466,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error loading Mermaid", 6000);
         console.error("Error loading Mermaid", e);
       }
+      this.logStartupEvent("Mermaid loaded");
 
       try {
         this.addThemeObserver();
@@ -445,6 +474,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error adding theme observer", 6000);
         console.error("Error adding theme observer", e);
       }
+      this.logStartupEvent("Theme observer added");
 
       try {
         //inspiration taken from kanban:
@@ -454,6 +484,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error registering monkey patches", 6000);
         console.error("Error registering monkey patches", e);
       }
+      this.logStartupEvent("Monkey patches registered");
 
       try {
         this.stylesManager = new StylesManager(this);
@@ -461,6 +492,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing styles manager", 6000);
         console.error("Error initializing styles manager", e);
       }
+      this.logStartupEvent("Styles manager initialized");
 
       try {
         this.scriptEngine = new ScriptEngine(this);
@@ -468,6 +500,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing script engine", 6000);
         console.error("Error initializing script engine", e);
       }
+      this.logStartupEvent("Script engine initialized");
 
       try {
         await this.initializeFonts();
@@ -475,6 +508,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing fonts", 6000);
         console.error("Error initializing fonts", e);
       }
+      this.logStartupEvent("Fonts initialized");
 
       try {
         imageCache.initializeDB(this);
@@ -482,6 +516,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error initializing image cache", 6000);
         console.error("Error initializing image cache", e);
       }
+      this.logStartupEvent("Image cache initialized");
 
       try {
         this.isReady = true;
@@ -491,6 +526,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error switching views to Excalidraw", 6000);
         console.error("Error switching views to Excalidraw", e);
       }
+      this.logStartupEvent("Switched to Excalidraw views");
 
       try {
         if (this.settings.showReleaseNotes) {
@@ -509,6 +545,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error opening release notes", 6000);
         console.error("Error opening release notes", e);
       }
+      this.logStartupEvent("Release notes opened");
 
       //---------------------------------------------------------------------
       //initialization that can happen after Excalidraw views are initialized
@@ -519,6 +556,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error registering event listeners", 6000);
         console.error("Error registering event listeners", e);
       }
+      this.logStartupEvent("Event listeners registered");
 
       try { 
         this.runStartupScript();
@@ -526,6 +564,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error running startup script", 6000);
         console.error("Error running startup script", e);
       }
+      this.logStartupEvent("Startup script run");
 
       try {
         this.editorHandler = new EditorHandler(this);
@@ -534,6 +573,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error setting up editor handler", 6000);
         console.error("Error setting up editor handler", e);
       }
+      this.logStartupEvent("Editor handler initialized");
 
       try {
         this.registerInstallCodeblockProcessor();
@@ -541,6 +581,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error registering script install-codeblock processor", 6000);
         console.error("Error registering script install-codeblock processor", e);
       }
+      this.logStartupEvent("Script install-codeblock processor registered");
 
       try {
         this.experimentalFileTypeDisplayToggle(this.settings.experimentalFileType);
@@ -548,6 +589,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error setting up experimental file type display", 6000);
         console.error("Error setting up experimental file type display", e);
       }
+      this.logStartupEvent("Experimental file type display set");
 
       try {
         this.registerCommands();
@@ -555,6 +597,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error registering commands", 6000);
         console.error("Error registering commands", e);
       }
+      this.logStartupEvent("Commands registered");
 
       try {
         this.registerEditorSuggest(new FieldSuggester(this));
@@ -562,6 +605,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error registering editor suggester", 6000);
         console.error("Error registering editor suggester", e);
       }
+      this.logStartupEvent("Editor suggester registered");
 
       try {
         this.setPropertyTypes();
@@ -569,6 +613,7 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error setting up property types", 6000);
         console.error("Error setting up property types", e);
       }
+      this.logStartupEvent("Property types set");
 
       try {
         this.taskbone = new Taskbone(this);
@@ -576,9 +621,17 @@ export default class ExcalidrawPlugin extends Plugin {
         new Notice("Error setting up taskbone", 6000);
         console.error("Error setting up taskbone", e);
       }
+      this.logStartupEvent("Taskbone set up");
     });
+    this.logStartupEvent("Workspace ready event handler added");
   }
 
+  public async awaitSettings() {
+    let counter = 0;
+    while(!this.settingsReady && counter < 150) {
+      await sleep(20);
+    }
+  }
 
   public async awaitInit() {
     let counter = 0;
@@ -1083,8 +1136,6 @@ export default class ExcalidrawPlugin extends Plugin {
     this.importSVGDialog = new ImportSVGDialog(this);
     this.insertMDDialog = new InsertMDDialog(this);
 
-    this.ribbonIcon = this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), this.actionRibbonClick.bind(this));
-
     const createNewAction = (e: MouseEvent | KeyboardEvent, file: TFile) => {
       let folderpath = file.path;
       if (file instanceof TFile) {
@@ -3248,7 +3299,11 @@ export default class ExcalidrawPlugin extends Plugin {
           }
           //if the user hasn't touched the file for 5 minutes, don't synchronize, reload.
           //this is to avoid complex sync scenarios of multiple remote changes outside an active collaboration session
-          if(excalidrawView.lastSaveTimestamp + 300000 < Date.now()) {
+          const activeView = this.app.workspace.activeLeaf.view;
+          const isEditingMarkdownSideInSplitView = (activeView !== excalidrawView) &&
+            activeView instanceof MarkdownView && activeView.file === excalidrawView.file;
+
+          if(!isEditingMarkdownSideInSplitView && (excalidrawView.lastSaveTimestamp + 300000 < Date.now())) {
             excalidrawView.reload(true, excalidrawView.file);
             return;
           }           
@@ -3496,11 +3551,6 @@ export default class ExcalidrawPlugin extends Plugin {
       window.clearTimeout(versionUpdateCheckTimer);
     }
 
-    if(this.ribbonIcon) {
-      this.ribbonIcon.remove();
-      this.ribbonIcon = null;
-    }
-
     if(this.scriptEngine) {
       this.scriptEngine.destroy();
       this.scriptEngine = null;
@@ -3602,7 +3652,7 @@ export default class ExcalidrawPlugin extends Plugin {
     EXCALIDRAW_PACKAGE = "";
     REACT_PACKAGES = "";
     //pluginPackages = null;
-    PLUGIN_VERSION = null;
+    //PLUGIN_VERSION = null;
     //@ts-ignore
     delete window.PolyBool;
     this.deletePackage(window);