1.6.31

ea-scripts/Change shape of selected elements.md

@@ -1,10 +1,13 @@
 /*
 ![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-change-shape.jpg)
 
-The script allows you to change the shape of selected Rectangles, Diamonds and Ellipses. 
+The script allows you to change the shape and fill style of selected Rectangles, Diamonds, Ellipses, Lines, Arrows and Freedraw. 
 
 ```javascript
 */
+const fillStylesDispaly=["Dots (⚠ VERY SLOW performance on large objects!)","Zigzag","Zigzag-line", "Dashed", "Hachure", "Cross-hatch", "Solid"];
+const fillStyles=["dots","zigzag","zigzag-line", "dashed", "hachure", "cross-hatch", "solid"];
+const fillShapes=["ellipse","rectangle","diamond", "freedraw", "line"];
 const boxShapesDispaly=["○ ellipse","□ rectangle","◇ diamond"];
 const boxShapes=["ellipse","rectangle","diamond"];
 const lineShapesDispaly=["- line","⭢ arrow"];
@@ -14,18 +17,27 @@ let editedElements = [];
 
 let elements = ea.getViewSelectedElements().filter(el=>boxShapes.contains(el.type));
 if (elements.length>0) {
-  newShape = await utils.suggester(boxShapesDispaly, boxShapes, "Change shape of 'box' type elements in selection");
+  newShape = await utils.suggester(boxShapesDispaly, boxShapes, "Change shape of 'box' type elements in selection, press ESC to skip");
   if(newShape) {
 	editedElements = elements;
     elements.forEach(el=>el.type = newShape);
   }
 }
 
+elements = ea.getViewSelectedElements().filter(el=>fillShapes.contains(el.type));
+if (elements.length>0) {
+  newFillStyle = await utils.suggester(fillStylesDispaly, fillStyles, "Change the fill style of elements in selection, press ESC to skip");
+  if(newFillStyle) {
+	editedElements = editedElements.concat(elements.filter(e=>!editedElements.some(el=>el.id===e.id)));
+    elements.forEach(el=>el.fillStyle = newFillStyle);
+  }
+}
+
 elements = ea.getViewSelectedElements().filter(el=>lineShapes.contains(el.type));
 if (elements.length>0) {
-  newShape = await utils.suggester(lineShapesDispaly, lineShapes, "Change shape of 'line' type elements in selection");
+  newShape = await utils.suggester(lineShapesDispaly, lineShapes, "Change shape of 'line' type elements in selection, press ESC to skip");
   if(newShape) {
-	editedElements = editedElements.concat(elements);
+	editedElements = editedElements.concat(elements.filter(e=>!editedElements.some(el=>el.id===e.id)));
     elements.forEach((el)=>{
 	  el.type = newShape;
 	  if(newShape === "arrow") {
@@ -37,4 +49,4 @@ if (elements.length>0) {
 
 ea.copyViewElementsToEAforEditing(editedElements);
 
-ea.addElementsToView(false,false);
+ea.addElementsToView(false,false);

ea-scripts/index-new.md

@@ -112,7 +112,7 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Change%20shape%20of%20selected%20elements.md
 ```
-<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Change%20shape%20of%20selected%20elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script allows you to change the shape of selected Rectangles, Diamonds and Ellipses.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-change-shape.jpg'></td></tr></table>
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Change%20shape%20of%20selected%20elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script allows you to change the shape and fill style of selected Rectangles, Diamonds, Ellipses, Lines, Arrows and Freedraw.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-change-shape.jpg'></td></tr></table>
 
 ## Connect elements
 ```excalidraw-script-install

manifest.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-excalidraw-plugin",
-  "version": "1.6.27-1",
+  "version": "1.6.29",
   "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings",
 	"main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -17,7 +17,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@zsviczian/excalidraw": "0.11.0-obsidian-18",
+    "@zsviczian/excalidraw": "0.11.0-obsidian-20",
     "monkey-around": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/EmbeddedFileLoader.ts

@@ -60,6 +60,8 @@ export class EmbeddedFile {
   public mimeType: MimeType = "application/octet-stream";
   public size: Size = { height: 0, width: 0 };
   public linkParts: LinkParts;
+  private hostPath: string;
+  public attemptCounter: number = 0;
   /*public isHyperlink: boolean = false;*/
 
   constructor(plugin: ExcalidrawPlugin, hostPath: string, imgPath: string) {
@@ -77,6 +79,7 @@ export class EmbeddedFile {
     this.imgInverted = this.img = "";
     this.mtime = 0;
     this.linkParts = getLinkParts(imgPath);
+    this.hostPath = hostPath;
     if (!this.linkParts.path) {
       new Notice(`Excalidraw Error\nIncorrect embedded filename: ${imgPath}`);
       return;
@@ -92,16 +95,25 @@ export class EmbeddedFile {
       hostPath,
     );
     if (!this.file) {
-      new Notice(
-        `Excalidraw Warning: could not find image file: ${imgPath}`,
-        5000,
-      );
+      if(this.attemptCounter++ === 0) {
+        new Notice(
+          `Excalidraw Warning: could not find image file: ${imgPath}`,
+          5000,
+        );
+      }
     }
   }
 
   private fileChanged(): boolean {
     if (!this.file) {
-      return false;
+      this.file = this.plugin.app.metadataCache.getFirstLinkpathDest(
+        this.linkParts.path,
+        this.hostPath,
+      ); // maybe the file has synchronized in the mean time
+      if(!this.file) {
+        this.attemptCounter++;
+        return false;
+      }
     }
     return this.mtime != this.file.stat.mtime;
   }
@@ -135,7 +147,14 @@ export class EmbeddedFile {
 
   public isLoaded(isDark: boolean): boolean {
     if (!this.file) {
-      return true;
+      this.file = this.plugin.app.metadataCache.getFirstLinkpathDest(
+        this.linkParts.path,
+        this.hostPath,
+      ); // maybe the file has synchronized in the mean time
+      if(!this.file) {
+        this.attemptCounter++;
+        return true;
+      }
     }
     if (this.fileChanged()) {
       return false;

src/ExcalidrawData.ts

@@ -212,27 +212,28 @@ const wrap = (text: string, lineLen: number) =>
   lineLen ? wrapText(text, lineLen, false, 0) : text;
 
 export class ExcalidrawData {
-  private textElements: Map<
+  public textElements: Map<
     string,
     { raw: string; parsed: string; wrapAt: number | null }
   > = null;
-  private elementLinks: Map<string, string> = null;
+  public elementLinks: Map<string, string> = null;
   public scene: any = null;
+  public deletedElements: ExcalidrawElement[] = [];
   private file: TFile = null;
   private app: App;
   private showLinkBrackets: boolean;
   private linkPrefix: string;
   private urlPrefix: string;
   private textMode: TextMode = TextMode.raw;
-  private plugin: ExcalidrawPlugin;
   public loaded: boolean = false;
   private files: Map<FileId, EmbeddedFile> = null; //fileId, path
   private equations: Map<FileId, { latex: string; isLoaded: boolean }> = null; //fileId, path
   private compatibilityMode: boolean = false;
   selectedElementIds: {[key:string]:boolean} = {}; //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/609
 
-  constructor(plugin: ExcalidrawPlugin) {
-    this.plugin = plugin;
+  constructor(
+    private plugin: ExcalidrawPlugin,
+  ) {
     this.app = plugin.app;
     this.files = new Map<FileId, EmbeddedFile>();
     this.equations = new Map<FileId, { latex: string; isLoaded: boolean }>();
@@ -375,7 +376,7 @@ export class ExcalidrawData {
   public async loadData(
     data: string,
     file: TFile,
-    textMode: TextMode,
+    textMode: TextMode
   ): Promise<boolean> {
     if (!file) {
       return false;
@@ -433,17 +434,10 @@ export class ExcalidrawData {
       }
       return sceneJSONandPOS;
     };
-    //try {
     sceneJSONandPOS = loadJSON();
-    /*} catch (e) {
-      if(await this.app.vault.adapter.exists(getBakPath(file))) {
-        data = await this.app.vault.adapter.read(getBakPath(file))
-        sceneJSONandPOS = loadJSON();
-        new Notice(t("LOAD_FROM_BACKUP"), 4000);
-      } else {
-        throw e;
-      
-    }*/
+
+    this.deletedElements = this.scene.elements.filter((el:ExcalidrawElement)=>el.isDeleted);
+    this.scene.elements = this.scene.elements.filter((el:ExcalidrawElement)=>!el.isDeleted);
 
     if (!this.scene.files) {
       this.scene.files = {}; //loading legacy scenes that do not yet have the files attribute.
@@ -641,23 +635,23 @@ export class ExcalidrawData {
     id: string,
     wrapResult: boolean = true,
   ): Promise<string> {
-    const t = this.textElements.get(id);
-    if (!t) {
+    const text = this.textElements.get(id);
+    if (!text) {
       return null;
     }
     if (this.textMode === TextMode.parsed) {
-      if (!t.parsed) {
+      if (!text.parsed) {
         this.textElements.set(id, {
-          raw: t.raw,
-          parsed: (await this.parse(t.raw)).parsed,
-          wrapAt: t.wrapAt,
+          raw: text.raw,
+          parsed: (await this.parse(text.raw)).parsed,
+          wrapAt: text.wrapAt,
         });
       }
       //console.log("parsed",this.textElements.get(id).parsed);
-      return wrapResult ? wrap(t.parsed, t.wrapAt) : t.parsed;
+      return wrapResult ? wrap(text.parsed, text.wrapAt) : text.parsed;
     }
     //console.log("raw",this.textElements.get(id).raw);
-    return t.raw;
+    return text.raw;
   }
 
   private findNewElementLinksInScene(): boolean {
@@ -720,11 +714,11 @@ export class ExcalidrawData {
         jsonString = jsonString.replaceAll(te.id, id); //brute force approach to replace all occurances (e.g. links, groups,etc.)
         if (this.textElements.has(te.id)) {
           //element was created with onBeforeTextSubmit
-          const t = this.textElements.get(te.id);
+          const text = this.textElements.get(te.id);
           this.textElements.set(id, {
-            raw: t.raw,
-            parsed: t.parsed,
-            wrapAt: t.wrapAt,
+            raw: text.raw,
+            parsed: text.parsed,
+            wrapAt: text.wrapAt,
           });
           this.textElements.delete(te.id); //delete the old ID from the Map
         }
@@ -962,7 +956,7 @@ export class ExcalidrawData {
    * @returns markdown string
    */
   disableCompression: boolean = false;
-  generateMD(): string {
+  generateMD(deletedElements: ExcalidrawElement[] = []): string {
     let outString = "# Text Elements\n";
     for (const key of this.textElements.keys()) {
       outString += `${this.textElements.get(key).raw} ^${key}\n\n`;
@@ -988,7 +982,14 @@ export class ExcalidrawData {
     }
     outString += this.equations.size > 0 || this.files.size > 0 ? "\n" : "";
 
-    const sceneJSONstring = JSON.stringify(this.scene, null, "\t");
+    const sceneJSONstring = JSON.stringify({
+      type: this.scene.type,
+      version: this.scene.version,
+      source: this.scene.source, 
+      elements: this.scene.elements.concat(deletedElements),
+      appState: this.scene.appState,
+      files: this.scene.files
+    }, null, "\t");
     return (
       outString +
       getMarkdownDrawingSection(
@@ -1355,6 +1356,10 @@ export class ExcalidrawData {
     });
   }
 
+  public getFiles(): EmbeddedFile[] {
+    return Object.values(this.files);
+  }
+
   public getFile(fileId: FileId): EmbeddedFile {
     return this.files.get(fileId);
   }

src/ExcalidrawView.ts

@@ -183,6 +183,7 @@ export default class ExcalidrawView extends TextFileView {
   private parentMoveObserver: MutationObserver;
   public linksAlwaysOpenInANewPane: boolean = false; //override the need for SHIFT+CTRL+click
   private hookServer: ExcalidrawAutomate;
+  public lastSaveTimestamp: number = 0; //used to validate if incoming file should sync with open file
 
   public semaphores: {
     //The role of justLoaded is to capture the Excalidraw.onChange event that fires right after the canvas was loaded for the first time to
@@ -439,7 +440,10 @@ export default class ExcalidrawView extends TextFileView {
         await this.excalidrawData.syncElements(scene, this.excalidrawAPI.getAppState().selectedElementIds)
         //&& !this.semaphores.autosaving
       ) {
-        await this.loadDrawing(false);
+        await this.loadDrawing(
+          false,
+          this.excalidrawAPI.getSceneElementsIncludingDeleted().filter((el:ExcalidrawElement)=>el.isDeleted)
+        );
       }
 
       if (allowSave) {
@@ -448,6 +452,7 @@ export default class ExcalidrawView extends TextFileView {
         //and we do not want to interrupt the flow by reloading the drawing into the canvas.
         this.semaphores.preventReload = preventReload;
         await super.save();
+        this.lastSaveTimestamp = this.file.stat.mtime;
         this.clearDirty();
       }
 
@@ -487,6 +492,9 @@ export default class ExcalidrawView extends TextFileView {
     if (!this.excalidrawData.loaded) {
       return this.data;
     }
+    //include deleted elements in save in case saving in markdown mode
+    //deleted elements are only used if sync modifies files while Excalidraw is open
+    //otherwise deleted elements are discarded when loading the scene
     const scene = this.getScene();
     if (!this.compatibilityMode) {
       let trimLocation = this.data.search(/(^%%\n)?# Text Elements\n/m);
@@ -502,7 +510,7 @@ export default class ExcalidrawView extends TextFileView {
         .replace(
           /excalidraw-plugin:\s.*\n/,
           `${FRONTMATTER_KEY}: ${
-            this.textMode == TextMode.raw ? "raw\n" : "parsed\n"
+            this.textMode === TextMode.raw ? "raw\n" : "parsed\n"
           }`,
         );
 
@@ -516,7 +524,9 @@ export default class ExcalidrawView extends TextFileView {
         this.excalidrawData.disableCompression =
           this.isEditedAsMarkdownInOtherView();
       }
-      const reuslt = header + this.excalidrawData.generateMD();
+      const reuslt = header + this.excalidrawData.generateMD(
+        this.excalidrawAPI.getSceneElementsIncludingDeleted().filter((el:ExcalidrawElement)=>el.isDeleted) //will be concatenated to scene.elements
+      );
       this.excalidrawData.disableCompression = false;
       return reuslt;
     }
@@ -629,6 +639,13 @@ export default class ExcalidrawView extends TextFileView {
   }
 
   async handleLinkClick(view: ExcalidrawView, ev: MouseEvent) {
+    const tooltip = document.body.querySelector(
+      "body>div.excalidraw-tooltip,div.excalidraw-tooltip--visible",
+    );
+    if (tooltip) {
+      document.body.removeChild(tooltip);
+    }
+
     const selectedText = this.getSelectedTextElement();
     const selectedImage = selectedText?.id
       ? null
@@ -888,28 +905,32 @@ export default class ExcalidrawView extends TextFileView {
     }
 
     const self = this;
-    this.app.workspace.onLayoutReady(() => {
-      self.addSlidingPanesListner();
+    this.app.workspace.onLayoutReady(async () => {
+      self.contentEl.addClass("excalidraw-view");
+      //https://github.com/zsviczian/excalibrain/issues/28
+      await self.addSlidingPanesListner(); //awaiting this because when using workspaces, onLayoutReady comes too early
       self.addParentMoveObserver();
     });
 
     this.setupAutosaveTimer();
-    this.contentEl.addClass("excalidraw-view");
   }
 
   //this is to solve sliding panes bug
   //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/9
   private slidingPanesListner: any;
-  private addSlidingPanesListner() {
+  private async addSlidingPanesListner() {
     const self = this;
     this.slidingPanesListner = () => {
       if (self.refresh) {
         self.refresh();
       }
     };
-    (
-      this.app.workspace.rootSplit as WorkspaceItem as WorkspaceItemExt
-    ).containerEl.addEventListener("scroll", this.slidingPanesListner);
+    let rootSplit = this.app.workspace.rootSplit as WorkspaceItem as WorkspaceItemExt;
+    while(!rootSplit) {
+      await sleep(50);
+      rootSplit = this.app.workspace.rootSplit as WorkspaceItem as WorkspaceItemExt;
+    }
+    rootSplit.containerEl.addEventListener("scroll", this.slidingPanesListner);
   }
 
   private removeSlidingPanesListner() {
@@ -1022,6 +1043,9 @@ export default class ExcalidrawView extends TextFileView {
         return;
       }
       const editing = api.getAppState().editingElement !== null;
+      //this will reset positioning of the cursor in case due to the popup keyboard,
+      //or the command palette, or some other unexpected reason the onResize would not fire...
+      this.refresh();
       if (
         this.isLoaded &&
         this.semaphores.dirty &&
@@ -1072,14 +1096,14 @@ export default class ExcalidrawView extends TextFileView {
         errorlog({where: "ExcalidrawView.onunload", fn: this.getHookServer().onViewUnloadHook, error: e});
       }
     }
-    this.removeParentMoveObserver();
-    this.removeSlidingPanesListner();
     const tooltip = document.body.querySelector(
       "body>div.excalidraw-tooltip,div.excalidraw-tooltip--visible",
     );
     if (tooltip) {
       document.body.removeChild(tooltip);
     }
+    this.removeParentMoveObserver();
+    this.removeSlidingPanesListner();
     if (this.autosaveTimer) {
       clearInterval(this.autosaveTimer);
       this.autosaveTimer = null;
@@ -1224,6 +1248,7 @@ export default class ExcalidrawView extends TextFileView {
     if (clear) {
       this.clear();
     }
+    this.lastSaveTimestamp = this.file.stat.mtime;
     data = this.data = data.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
     this.app.workspace.onLayoutReady(async () => {
       this.compatibilityMode = this.file.extension === "excalidraw";
@@ -1303,6 +1328,21 @@ export default class ExcalidrawView extends TextFileView {
           this.activeLoader = null;
           if (this.nextLoader) {
             runLoader(this.nextLoader);
+          } else {
+            //in case one or more files have not loaded retry later hoping that sync has delivered the file in the mean time.
+            this.excalidrawData.getFiles().some(ef=>{
+              if(ef && !ef.file && ef.attemptCounter<30) {
+                const self = this;
+                const currentFile = this.file.path;
+                setTimeout(async ()=>{
+                  if(self && self.excalidrawAPI && currentFile === self.file.path) {
+                    self.loadSceneFiles();
+                  }
+                },2000)
+                return true;
+              }
+              return false;
+            })
           }
         },0
       );
@@ -1314,12 +1354,142 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
+  public async synchronizeWithData(inData: ExcalidrawData) {
+    //check if saving, wait until not
+    let counter = 0;
+    while(this.semaphores.saving && counter++<30) {
+      await sleep(100);
+    }
+    if(counter>=30) {
+      errorlog({
+        where:"ExcalidrawView.synchronizeWithData",
+        message:`Aborting sync with received file (${this.file.path}) because semaphores.saving remained true for ower 3 seconds`, 
+        "fn": this.synchronizeWithData
+      });
+      return;
+    }
+    this.semaphores.saving = true;
+    let reloadFiles = false;
+
+    try {
+      const deletedIds = inData.deletedElements.map(el=>el.id);
+      const sceneElements = this.excalidrawAPI.getSceneElements()
+        //remove deleted elements
+        .filter((el: ExcalidrawElement)=>!deletedIds.contains(el.id));
+      const sceneElementIds = sceneElements.map((el:ExcalidrawElement)=>el.id);
+
+      const manageMapChanges = (incomingElement: ExcalidrawElement ) => {
+        switch(incomingElement.type) {
+          case "text":
+            this.excalidrawData.textElements.set(
+              incomingElement.id,
+              inData.textElements.get(incomingElement.id)
+            );
+            break;
+          case "image":
+            if(inData.getFile(incomingElement.fileId)) {
+              this.excalidrawData.setFile(
+                incomingElement.fileId,
+                inData.getFile(incomingElement.fileId)
+              );
+              reloadFiles = true;
+            } else if (inData.getEquation(incomingElement.fileId)) {
+              this.excalidrawData.setEquation(
+                incomingElement.fileId,
+                inData.getEquation(incomingElement.fileId)
+              )
+              reloadFiles = true;
+            }
+          break;
+        }
+
+        if(inData.elementLinks.has(incomingElement.id)) {
+          this.excalidrawData.elementLinks.set(
+            incomingElement.id,
+            inData.elementLinks.get(incomingElement.id)
+          )
+        }
+
+      }
+
+      //update items with higher version number then in scene
+      inData.scene.elements.forEach((
+        incomingElement:ExcalidrawElement,
+        idx: number,
+        inElements: ExcalidrawElement[]
+      )=>{
+        const sceneElement:ExcalidrawElement = sceneElements.filter(
+          (element:ExcalidrawElement)=>element.id === incomingElement.id
+        )[0];
+        if(
+          sceneElement && 
+          (sceneElement.version < incomingElement.version || 
+            //in case of competing versions of the truth, the incoming version will be honored
+            (sceneElement.version === incomingElement.version &&
+             JSON.stringify(sceneElement) !== JSON.stringify(incomingElement))
+          )
+        ) {
+          manageMapChanges(incomingElement);
+          //place into correct element layer sequence
+          const currentLayer = sceneElementIds.indexOf(incomingElement.id);
+          //remove current element from scene
+          const elToMove = sceneElements.splice(currentLayer,1);
+          if(idx === 0) {
+            sceneElements.splice(0,0,incomingElement);
+            if(currentLayer!== 0) {
+              sceneElementIds.splice(currentLayer,1);
+              sceneElementIds.splice(0,0,incomingElement.id);
+            } 
+          } else {
+            const prevId = inElements[idx-1].id;
+            const parentLayer = sceneElementIds.indexOf(prevId);
+            sceneElements.splice(parentLayer+1,0,incomingElement);
+            if(parentLayer!==currentLayer-1) {
+              sceneElementIds.splice(currentLayer,1)
+              sceneElementIds.splice(parentLayer+1,0,incomingElement.id);
+            }
+          }
+          return;
+        }
+        if(!sceneElement) {
+          manageMapChanges(incomingElement);
+
+          if(idx === 0) {
+            sceneElements.splice(0,0,incomingElement);
+            sceneElementIds.splice(0,0,incomingElement.id);
+          } else {
+            const prevId = inElements[idx-1].id;
+            const parentLayer = sceneElementIds.indexOf(prevId);
+            sceneElements.splice(parentLayer+1,0,incomingElement);
+            sceneElementIds.splice(parentLayer+1,0,incomingElement.id);
+          }
+        }
+      })
+      this.previousSceneVersion = getSceneVersion(sceneElements);
+      //changing files could result in a race condition for sync. If at the end of sync there are differences
+      //set dirty will trigger an autosave
+      if(getSceneVersion(inData.scene.elements) !== this.previousSceneVersion) {
+        this.setDirty();
+      }
+      this.excalidrawAPI.updateScene({elements: sceneElements});
+      if(reloadFiles) this.loadSceneFiles();
+    } catch(e) {
+      errorlog({
+        where:"ExcalidrawView.synchronizeWithData",
+        message:`Error during sync with received file (${this.file.path})`, 
+        "fn": this.synchronizeWithData,
+        error: e
+      });
+    }
+    this.semaphores.saving = false;
+  }
+
   initialContainerSizeUpdate = false;
   /**
    *
    * @param justloaded - a flag to trigger zoom to fit after the drawing has been loaded
    */
-  private async loadDrawing(justloaded: boolean) {
+  private async loadDrawing(justloaded: boolean, deletedElements?: ExcalidrawElement[]) {
     const excalidrawData = this.excalidrawData.scene;
     this.semaphores.justLoaded = justloaded;
     this.initialContainerSizeUpdate = justloaded;
@@ -1343,7 +1513,7 @@ export default class ExcalidrawView extends TextFileView {
 
       this.updateScene(
         {
-          elements: excalidrawData.elements,
+          elements: excalidrawData.elements.concat(deletedElements??[]), //need to preserve deleted elements during autosave if images, links, etc. are updated
           appState: {
             ...excalidrawData.appState,
             ...this.excalidrawData.selectedElementIds !== {} //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/609
@@ -2324,6 +2494,7 @@ export default class ExcalidrawView extends TextFileView {
               showHoverPreview();
             }
           },
+          libraryReturnUrl: "app://obsidian.md",
           autoFocus: true,
           onChange: (et: ExcalidrawElement[], st: AppState) => {
             viewModeEnabled = st.viewModeEnabled;
@@ -2673,6 +2844,12 @@ export default class ExcalidrawView extends TextFileView {
             if (!link || link === "") {
               return;
             }
+            const tooltip = document.body.querySelector(
+              "body>div.excalidraw-tooltip,div.excalidraw-tooltip--visible",
+            );
+            if (tooltip) {
+              document.body.removeChild(tooltip);
+            }
             const event = e?.detail?.nativeEvent;
             if(this.getHookServer().onLinkClickHook) {
               try {

src/LaTeX.ts

@@ -3,7 +3,7 @@ import ExcalidrawView from "./ExcalidrawView";
 import ExcalidrawPlugin from "./main";
 import { FileData, MimeType } from "./EmbeddedFileLoader";
 import { FileId } from "@zsviczian/excalidraw/types/element/types";
-import { getImageSize, log, sleep, svgToBase64 } from "./utils/Utils";
+import { errorlog, getImageSize, log, sleep, svgToBase64 } from "./utils/Utils";
 import { fileid } from "./Constants";
 import html2canvas from "html2canvas";
 import { count } from "console";
@@ -46,11 +46,14 @@ export async function tex2dataURL(
   //if network is slow, or not available, or mathjax has not yet fully loaded
   let counter = 0;
   while (!plugin.mathjax && !plugin.mathjaxLoaderFinished && counter < 10) {
-    log({ where: "tex2dataURL", counter });
     await sleep(100);
     counter++;
   }
 
+  if(!plugin.mathjaxLoaderFinished) {
+    errorlog({where: "text2dataURL", fn: tex2dataURL, message:"mathjaxLoader not ready, using fallback. Try reloading Obsidian or restarting the Excalidraw plugin"});
+  }
+
   //it is not clear why this works, but it seems that after loading the plugin sometimes only the third attempt is successful.
   try {
     return await mathjaxSVG(tex, plugin);
@@ -79,7 +82,7 @@ export async function tex2dataURL(
   }
 }
 
-async function mathjaxSVG(
+export async function mathjaxSVG(
   tex: string,
   plugin: ExcalidrawPlugin,
 ): Promise<{

src/MarkdownPostProcessor.ts

@@ -36,7 +36,7 @@ let metadataCache: MetadataCache;
 
 const getDefaultWidth = (plugin: ExcalidrawPlugin): string => {
   const width = parseInt(plugin.settings.width);
-  if (isNaN(width) || width === 0) {
+  if (isNaN(width) || width === 0 || width === null) {
     return "400";
   }
   return plugin.settings.width;
@@ -341,8 +341,8 @@ const tmpObsidianWYSIWYG = async (
 
     const basename = splitFolderAndFilename(attr.fname).basename;
     const setAttr = () => {
-      const hasWidth = internalEmbedDiv.getAttribute("width") !== "";
-      const hasHeight = internalEmbedDiv.getAttribute("height") !== "";
+      const hasWidth = internalEmbedDiv.getAttribute("width") && (internalEmbedDiv.getAttribute("width") !== "");
+      const hasHeight = internalEmbedDiv.getAttribute("height") && (internalEmbedDiv.getAttribute("height") !== "");
       if (hasWidth) {
         attr.fwidth = internalEmbedDiv.getAttribute("width");
       }

src/dialogs/Messages.ts

@@ -17,6 +17,28 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
 
 <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.6.31": `
+Minor update:
+
+## Fixes
+- Color picker hotkeys were not working. They are working again [627](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/627)
+- I updated MathJax (LaTeX) to the newest (3.2.1) release.`,
+"1.6.30": `
+## Fixed
+- The load stencil library button stopped working after 1.6.29 due to an error in the core Excalidraw package. It is now fixed. [#625](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/625).
+- On iPad (probably other Obsidian mobile devices as well) after opening the command palette the positioning of the pointer was off. From now on, the pointer is automatically re-calibrated every 5 seconds.
+- I improved shared-vault collaboration sync. If the open file has not been saved for the last 5 minutes (i.e. you are not working on the drawing actively), and a newer remote version of the file is received via sync, then the remote file will simply overwrite the local file (i.e. the behavior of Excalidraw Obsidian prior to implementing Shared (Multiplayer) Vault Synchronization support in 1.6.29). This solution will support active collaboration when parties participating are actively editing the drawing, but also caters to the scenario when you open a drawing on one device (e.g. your desktop) and once you are finished editing you do not close the drawing, but simply put your PC to sleep... then later you edit the same drawing on your tablet. When you turn your desktop PC on the next time, the changes you've made on your tablet will be synchronized by Obsidian sync. In this case the changes from your tablet should be honored. If you have not edited the open drawing for more then 5 minutes (like in this scenario) there is no value in running the file comparison between the local version and the received one. This approach reduces the probability of running into sync conflicts.`,
+"1.6.29": `
+## New
+- I implemented sync support inspired by the new [Obsidian Multiplayer Sync](https://youtu.be/ZyCPhbd51eo) feature (available in insider build v0.14.10). 
+  - To manage expectations, this is not real-time collaboration like on Excalidraw.com. Synchronization is delayed by the frequency of the autosave timer (every 10 secs) and the speed of Obsidian sync. Also if a file has conflicting versions, Obsidian sync may delay the delivery of the changed file.
+  - Even if you are not using multiplayer Obsidian Vaults, you may benefit from the improved synchronization, for example when using the freedraw tool on your tablet or phone, and in parallel editing the same drawing (e.g. typing text) on your desktop. I frequently do this in a mind-mapping scenario.
+  - If the same Excalidraw sketch is open on multiple devices then Excalidraw will try to merge changes into the open drawing, thus parallel modifications on different devices are possible. If the same element is edited by multiple parties at the same time, then the foreign (received) version will be honored and the local changes lost. 
+
+## Fixed:
+- Default embed width setting stopped working. [#622](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/622)
+- The link tooltip gets stuck on screen after Excalidraw closes [#621](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/621)
+- Layout error when using the Workspaces core plugin. [#28](https://github.com/zsviczian/excalibrain/issues/28)`,
 "1.6.28": `
 ## New
 - When dropping a link from a DataView query into Excalidraw the link will honor your "New link format" preferences in Obsidian. It will add the "shortest path when possible", if that is your setting. If the link includes a block or section reference, then the link will automatically include an alias, such that only the filename is displayed (shortest path possible allowing) [#610](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/610)

src/dialogs/ReleaseNotes.ts

@@ -36,7 +36,7 @@ export class ReleaseNotes extends Modal {
       ? Object.keys(RELEASE_NOTES)
           .filter((key) => key > prevRelease)
           .map((key: string) => `# ${key}\n${RELEASE_NOTES[key]}`)
-          .slice(0, 6)
+          .slice(0, 10)
           .join("\n\n---\n")
       : FIRST_RUN;
     await MarkdownRenderer.renderMarkdown(

src/main.ts

@@ -42,10 +42,11 @@ import {
   VIRGIL_FONT,
   VIRGIL_DATAURL,
 } from "./Constants";
-import ExcalidrawView, { TextMode } from "./ExcalidrawView";
+import ExcalidrawView, { TextMode, getTextMode } from "./ExcalidrawView";
 import {
   changeThemeOfExcalidrawMD,
   getMarkdownDrawingSection,
+  ExcalidrawData
 } from "./ExcalidrawData";
 import {
   ExcalidrawSettings,
@@ -94,7 +95,6 @@ import {
 } from "./MarkdownPostProcessor";
 import { FieldSuggester } from "./dialogs/FieldSuggester";
 import { ReleaseNotes } from "./dialogs/ReleaseNotes";
-import { debug } from "./utils/Utils";
 
 declare module "obsidian" {
   interface App {
@@ -273,6 +273,7 @@ export default class ExcalidrawPlugin extends Plugin {
         const script = doc.createElement("script");
         script.type = "text/javascript";
         script.onload = () => {
+          debugger;
           const win = iframe.contentWindow;
           //@ts-ignore
           win.MathJax.startup.pagePromise.then(async () => {
@@ -299,7 +300,7 @@ export default class ExcalidrawPlugin extends Plugin {
             self.mathjaxLoaderFinished = true;
           });
         };
-        script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
+        script.src = "https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-svg.js";
         //script.src = MATHJAX_DATAURL;
         doc.head.appendChild(script);
       } catch {
@@ -1414,7 +1415,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
       const modifyEventHandler = async (file: TFile) => {
         const leaves = self.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
-        leaves.forEach((leaf: WorkspaceLeaf) => {
+        leaves.forEach(async (leaf: WorkspaceLeaf) => {
           const excalidrawView = leaf.view as ExcalidrawView;
           if (
             excalidrawView.file &&
@@ -1425,8 +1426,24 @@ export default class ExcalidrawPlugin extends Plugin {
                   file.path.lastIndexOf(".excalidraw"),
                 )}.md` === excalidrawView.file.path))
           ) {
-            //debug({where:"ExcalidrawPlugin.modifyEventHandler",file:file.name,reloadfile:excalidrawView.file,before:"reload(true)"});
-            excalidrawView.reload(true, excalidrawView.file);
+            if(excalidrawView.semaphores.preventReload) {
+              excalidrawView.semaphores.preventReload = false;
+              return;
+            }
+            //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()) {
+              excalidrawView.reload(true, excalidrawView.file);
+              return;
+            }           
+            if(file.extension==="md") {
+              const inData = new ExcalidrawData(self);
+              const data = await app.vault.read(file);
+              await inData.loadData(data,file,getTextMode(data));
+              excalidrawView.synchronizeWithData(inData);
+            } else {
+              excalidrawView.reload(true, excalidrawView.file);
+            }
           }
         });
       };

src/utils/FileUtils.ts

@@ -1,4 +1,4 @@
-import { normalizePath, TAbstractFile, TFolder, Vault } from "obsidian";
+import { normalizePath, Notice, TAbstractFile, TFile, TFolder, Vault } from "obsidian";
 import { ExcalidrawSettings } from "src/Settings";
 
 /**
@@ -126,6 +126,9 @@ export async function checkAndCreateFolder(vault: Vault, folderpath: string) {
   if (folder && folder instanceof TFolder) {
     return;
   }
+  if (folder && folder instanceof TFile) {
+    new Notice(`The folder cannot be created because it already exists as a file: ${folderpath}.`)
+  }
   await vault.createFolder(folderpath);
 }
 

src/utils/ObsidianUtils.ts

@@ -14,7 +14,7 @@ export const getParentOfClass = (element: HTMLElement, cssClass: string):HTMLEle
   ) {
     parent = parent.parentElement;
   }
-  return parent.classList.contains(cssClass) ? parent : null;
+  return parent?.classList?.contains(cssClass) ? parent : null;
 };
 
 export const getNewOrAdjacentLeaf = (
@@ -78,7 +78,7 @@ export const getAttachmentsFolderAndFilePath = async (
     const activeFileFolder = `${splitFolderAndFilename(activeViewFilePath).folderpath}/`;
     folder = normalizePath(activeFileFolder + folder.substring(2));
   }
-  if (!folder) {
+  if (!folder || folder === "/") {
     folder = "";
   }
   await checkAndCreateFolder(app.vault, folder);

versions.json

@@ -1,4 +1,4 @@
 {
-  "1.6.27": "0.12.16",
+  "1.6.31": "0.12.16",
   "1.4.2": "0.11.13"
 }

yarn.lock

@@ -2215,10 +2215,10 @@
   dependencies:
     "@zerollup/ts-helpers" "^1.7.18"
 
-"@zsviczian/excalidraw@0.11.0-obsidian-18":
-  "integrity" "sha512-yG4R82ZiYLmplwX5teT02ZTG2usfahMBonlvblCdmaoTS/gr+D6PpYxugBuH07FzyWbW8tDlxgD27jz5Hq1O5w=="
-  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.11.0-obsidian-18.tgz"
-  "version" "0.11.0-obsidian-18"
+"@zsviczian/excalidraw@0.11.0-obsidian-20":
+  "integrity" "sha512-9r/F1q1K/uUFrDeJ81MrzD85deB77HioNkdVRU05IeAUSk7cSImvbKrtrCYefdx2jyICb5j/dY9/PKH8G/hbrA=="
+  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.11.0-obsidian-20.tgz"
+  "version" "0.11.0-obsidian-20"
   dependencies:
     "dotenv" "10.0.0"