1.3.1 Drag&Drop + zoomToFit + no chunking

manifest.json

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

package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@zsviczian/excalidraw": "0.9.0-obsidian-4",
+    "@zsviczian/excalidraw": "0.9.0-obsidian-7",
     "monkey-around": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/ExcalidrawView.ts

@@ -34,7 +34,7 @@ import ExcalidrawPlugin from './main';
 import {ExcalidrawAutomate} from './ExcalidrawAutomate';
 import { t } from "./lang/helpers";
 import { ExcalidrawData, REG_LINKINDEX_HYPERLINK, REGEX_LINK } from "./ExcalidrawData";
-import { checkAndCreateFolder, download, getNewUniqueFilepath, splitFolderAndFilename } from "./Utils";
+import { checkAndCreateFolder, download, getNewUniqueFilepath, splitFolderAndFilename, viewportCoordsToSceneCoords } from "./Utils";
 import { Prompt } from "./Prompt";
 
 declare let window: ExcalidrawAutomate;
@@ -725,6 +725,21 @@ export default class ExcalidrawView extends TextFileView {
         }
       }
 
+      const dropAction = (transfer: DataTransfer) => {
+        // Return a 'copy' or 'link' action according to the content types, or undefined if no recognized type
+
+        //if (transfer.types.includes('text/uri-list')) return 'link';
+        let files = (this.app as any).dragManager.draggable?.files;
+        if(files) {
+          if(files[0] == this.file) {
+            files.shift();
+            (this.app as any).dragManager.draggable.title = files.length + " files";
+          }
+        }
+        if (['file', 'files'].includes((this.app as any).dragManager.draggable?.type)) return 'link';
+        //if (transfer.types.includes('text/html') || transfer.types.includes('text/plain')) return 'copy';
+      }                 
+
       const excalidrawDiv = React.createElement(
         "div",
         {
@@ -799,7 +814,15 @@ export default class ExcalidrawView extends TextFileView {
             clearHoverPreview();
             //console.log(e);
           },
-        
+          onDragOver: (e:any) => {
+            const action = dropAction(e.dataTransfer);
+            if (action) {
+              e.dataTransfer.dropEffect = action;
+              e.preventDefault();
+              return false;
+            }
+          },
+          onDragLeave: () => { },          
         },
         React.createElement(Excalidraw.default, {
           ref: excalidrawRef,
@@ -855,7 +878,7 @@ export default class ExcalidrawView extends TextFileView {
           onChange: (et:ExcalidrawElement[],st:AppState) => {
             if(this.justLoaded) {
               this.justLoaded = false;             
-              this.zoomToFit();
+              this.zoomToFit(false);
               previousSceneVersion = getSceneVersion(et);
               return;
             } 
@@ -879,6 +902,24 @@ export default class ExcalidrawView extends TextFileView {
             console.log(data,event);
             return true;
           },*/
+          onDrop: (event: React.DragEvent<HTMLDivElement>):boolean => {
+            const st: AppState = excalidrawRef.current.getAppState();
+            currentPosition = viewportCoordsToSceneCoords({ clientX: event.clientX, clientY: event.clientY },st);
+            const draggable = (this.app as any).dragManager.draggable;
+            switch(draggable?.type) {
+              case "file":
+                this.addText(`[[${this.app.metadataCache.fileToLinktext(draggable.file,this.file.path,true)}]]`);
+                return true;
+              case "files":
+                for(const f of draggable.files) {
+                  this.addText(`[[${this.app.metadataCache.fileToLinktext(f,this.file.path,true)}]]`);
+                  currentPosition.y+=st.currentItemFontSize*2;
+                }
+                return true;
+              default:
+                return false;
+            }
+          },
           onBeforeTextEdit: (textElement: ExcalidrawTextElement) => {
             if(this.autosaveTimer) { //stopping autosave to avoid autosave overwriting text while the user edits it
               clearInterval(this.autosaveTimer);
@@ -930,14 +971,16 @@ export default class ExcalidrawView extends TextFileView {
     ReactDOM.render(reactElement,this.contentEl,()=>this.excalidrawWrapperRef.current.focus());  
   }
 
-  private zoomToFit() {
+  private zoomToFit(delay:boolean = true) {
     if(!this.excalidrawRef) return;
     const current = this.excalidrawRef.current;
     const fullscreen = (document.fullscreenElement==this.contentEl);
-    setTimeout(()=> {//time for the DOM to render, I am sure there is a more elegant solution
-      const elements = current.getSceneElements();
+    const elements = current.getSceneElements();
+    if(delay) { //time for the DOM to render, I am sure there is a more elegant solution
+      setTimeout(() => current.zoomToFit(elements,10,fullscreen?0:0.05),100);
+    } else {
       current.zoomToFit(elements,10,fullscreen?0:0.05);
-    },100);
+    }
   }
 
   public static async getSVG(scene:any, exportSettings:ExportSettings):Promise<SVGSVGElement> {

src/Utils.ts

@@ -1,5 +1,6 @@
 import {  normalizePath, TAbstractFile, TFolder, Vault } from "obsidian";
 import { Random } from "roughjs/bin/math";
+import { Zoom } from "@zsviczian/excalidraw/types/types";
 
 /**
  * Splits a full path including a folderpath and a filename into separate folderpath and filename components
@@ -87,4 +88,26 @@ export function wrapText(text:string, lineLen:number):string {
     outstring += (parts.value[2]=='\n' || parts.value[4]=='\n') ?'\n\n':'\n';
   }
   return outstring.trimEnd();
-}
+}
+
+export const viewportCoordsToSceneCoords = (
+  { clientX, clientY }: { clientX: number; clientY: number },
+  {
+    zoom,
+    offsetLeft,
+    offsetTop,
+    scrollX,
+    scrollY,
+  }: {
+    zoom: Zoom;
+    offsetLeft: number;
+    offsetTop: number;
+    scrollX: number;
+    scrollY: number;
+  },
+) => {
+  const invScale = 1 / zoom.value;
+  const x = (clientX - zoom.translation.x - offsetLeft) * invScale - scrollX;
+  const y = (clientY - zoom.translation.y - offsetTop) * invScale - scrollY;
+  return { x, y };
+};

versions.json

@@ -1,3 +1,3 @@
 {
-  "1.3.0": "0.11.13"
+  "1.3.1": "0.11.13"
 }

yarn.lock

@@ -1024,10 +1024,10 @@
   dependencies:
     "@types/estree" "*"
 
-"@zsviczian/excalidraw@0.9.0-obsidian-4":
-  "integrity" "sha512-pjq8O5wyQr1bPWNlUZam/gAivjDDM+d1OtMDtCtLd5gRcDfmdghc4CncPdqmum0gbiRQH7kRiRN4nj9uY5Tx4w=="
-  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.9.0-obsidian-4.tgz"
-  "version" "0.9.0-obsidian-4"
+"@zsviczian/excalidraw@0.9.0-obsidian-7":
+  "integrity" "sha512-7J10Klh7QWyJoie/nymezF3YALJtk0NORGPwKEP0vQybmPHCSaPCmAoF6GFnrSvC5UiFoa8RYK00F0sa3HJulg=="
+  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.9.0-obsidian-7.tgz"
+  "version" "0.9.0-obsidian-7"
 
 "abab@^1.0.3":
   "integrity" "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="