2.2.0

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-excalidraw-plugin",
   "name": "Excalidraw",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "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.1-obsidian-21",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-22",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "colormaster": "^1.2.1",

src/ExcalidrawView.ts

@@ -2375,8 +2375,10 @@ export default class ExcalidrawView extends TextFileView {
 
   public async convertExcalidrawToMD() {
     await this.save();
+    const file = await this.plugin.convertSingleExcalidrawToMD(this.file);
+    await sleep(250); //dirty hack to wait for Obsidian metadata to be updated
     this.plugin.openDrawing(
-      await this.plugin.convertSingleExcalidrawToMD(this.file),
+      file,
       "active-pane",
       true
     );

src/dialogs/Messages.ts

@@ -17,6 +17,40 @@ 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>
 `,
+"2.2.0":`
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/dV0NEOwn5NM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+
+⚠️⚠️⚠️ BREAKING CHANGE ⚠️⚠️⚠️
+Files you save with 2.2.0 are not backward compatible with earlier plugin versions!
+
+## New from excalidraw.com
+- Wrapable text elements (without the need for transparent sticky notes!)
+
+## New
+- File format. I nested all Excalidraw markup under ${String.fromCharCode(96)}# Excalidraw Data${String.fromCharCode(96)}.  Here's the new structure.
+${String.fromCharCode(96,96,96)}markdown
+---
+excalidraw-plugin: parsed
+other-frontmatter-properties: values
+---
+back of the note bla bla bla
+
+# Excalidraw Data
+## Text Element
+## Element Links
+## Embedded Files
+%%
+## Drawing
+%%
+${String.fromCharCode(96,96,96)}
+- When opening Excalidraw in Markdown ${String.fromCharCode(96)}# Excalidraw Data${String.fromCharCode(96)} will be folded.
+- New command palette action: ${String.fromCharCode(96)}Open the back-of-the-note of the selected Excalidraw image${String.fromCharCode(96)}. The action is only visible when selecting an embedded Excalidraw drawing in the Scene. On a desktop, the command will open the back of the selected card in a popout window, and on a mobile, in a new tab.
+
+## Fixed
+- Drag and drop from Finder/Explorer (OS external). Images will retain their filenames. PDFs will be imported to the Vault. [#1779](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1779)
+`,
 "2.1.8":`
 ## Fixed
 - Fixing issues that surfaced after upgrading to Obsidian 1.6.0

src/main.ts

@@ -42,7 +42,8 @@ import {
   LOCALE,
   IMAGE_TYPES,
   setExcalidrawPlugin,
-  DEVICE
+  DEVICE,
+  sceneCoordsToViewportCoords
 } from "./constants/constants";
 import {
   VIRGIL_FONT,
@@ -268,6 +269,11 @@ export default class ExcalidrawPlugin extends Plugin {
     addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
 
     await this.loadSettings({reEnableAutosave:true});
+    if(!this.settings.onceOffCompressFlagReset) {
+      this.settings.compress = true;
+      this.settings.onceOffCompressFlagReset = true;
+      await this.saveSettings();
+    }
     this.excalidrawConfig = new ExcalidrawConfig(this);
     await loadMermaid();
     this.editorHandler = new EditorHandler(this);
@@ -1606,7 +1612,15 @@ export default class ExcalidrawPlugin extends Plugin {
         }
         if(checking) return true;
         this.forceToOpenInMarkdownFilepath = ef.file?.path;
-        this.openDrawing(ef.file, DEVICE.isMobile ? "new-tab":"popout-window", true);
+        const appState = view.excalidrawAPI.getAppState();
+        const {x:centerX,y:centerY} = sceneCoordsToViewportCoords({sceneX:el.x+el.width/2,sceneY:el.y+el.height/2},appState);
+        const {width, height} = {width:600, height:600};
+        const {x,y} = {
+          x:centerX - width/2 + view.ownerWindow.screenX,
+          y:centerY - height/2 + view.ownerWindow.screenY,
+        }
+      
+        this.openDrawing(ef.file, DEVICE.isMobile ? "new-tab":"popout-window", true, undefined, false, {x,y,width,height});
       }
     })
 
@@ -3133,7 +3147,8 @@ export default class ExcalidrawPlugin extends Plugin {
     location: PaneTarget,
     active: boolean = false,
     subpath?: string,
-    justCreated: boolean = false
+    justCreated: boolean = false,
+    popoutLocation?: {x?: number, y?: number, width?: number, height?: number},
   ) {
 
     const fnGetLeaf = ():WorkspaceLeaf => {
@@ -3142,7 +3157,8 @@ export default class ExcalidrawPlugin extends Plugin {
       }
       let leaf: WorkspaceLeaf;
       if(location === "popout-window") {
-        leaf = this.app.workspace.openPopoutLeaf();
+        //@ts-ignore (the api does not include x,y)
+        leaf = this.app.workspace.openPopoutLeaf(popoutLocation);
       }
       if(location === "new-tab") {
         leaf = this.app.workspace.getLeaf('tab');

src/settings.ts

@@ -45,6 +45,7 @@ export interface ExcalidrawSettings {
   scriptFolderPath: string;
   compress: boolean;
   decompressForMDView: boolean;
+  onceOffCompressFlagReset: boolean; //used to reset compress to true in 2.2.0
   autosave: boolean;
   autosaveInterval: number;
   autosaveIntervalDesktop: number;
@@ -203,6 +204,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   scriptFolderPath: "Excalidraw/Scripts",
   compress: true,
   decompressForMDView: false,
+  onceOffCompressFlagReset: false,
   autosave: true,
   autosaveInterval: 15000,
   autosaveIntervalDesktop: 15000,

src/utils/ObsidianUtils.ts

@@ -31,11 +31,11 @@ export const getLeaf = (
   const newTab = ():WorkspaceLeaf => {
     if(!plugin.settings.openInMainWorkspace) return app.workspace.getLeaf('tab');
     const [leafLoc, mainLeavesIds] = getLeafLoc(origo);
-    if(leafLoc === 'main') return app.workspace.getLeaf('tab');
+    if(leafLoc === 'main') return plugin.app.workspace.getLeaf('tab');
     return getNewOrAdjacentLeaf(plugin,origo);
   }
   const newTabGroup = ():WorkspaceLeaf => getNewOrAdjacentLeaf(plugin,origo);
-  const newWindow = ():WorkspaceLeaf => app.workspace.openPopoutLeaf();
+  const newWindow = ():WorkspaceLeaf => plugin.app.workspace.openPopoutLeaf();
 
   switch(linkClickModifierType(ev)) {
     case "active-pane": return origo;