working with libraryItems in ex0.7.0-autoprefix1

package.json

@@ -12,7 +12,7 @@
   "license": "MIT",
   "dependencies": {
     "@excalidraw/excalidraw": "0.6.0",
-    "aakansha-excalidraw": "0.7.0-libs2",
+    "aakansha-excalidraw": "0.7.0-autoprefix1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-scripts": "4.0.1"

src/ExcalidrawView.ts

@@ -1,12 +1,23 @@
-import { TextFileView, WorkspaceLeaf } from "obsidian";
+import { 
+  TextFileView, 
+  WorkspaceLeaf, 
+  TFile 
+} from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 //import Excalidraw, {exportToSvg} from "@excalidraw/excalidraw";
 import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
-import { AppState } from "@excalidraw/excalidraw/types/types";
-import Excalidraw, {exportToSvg} from "aakansha-excalidraw";
+import { AppState,LibraryItems } from "@excalidraw/excalidraw/types/types";
+import Excalidraw, {exportToSvg } from "aakansha-excalidraw";
+import {
+  VIEW_TYPE_EXCALIDRAW,
+  EXCALIDRAW_FILE_EXTENSION, 
+  ICON_NAME, 
+  BLANK_DRAWING, 
+  EXCALIDRAWLIB_FILE_EXTENSION
+} from './constants';
+import { getElementsAtPosition } from "@excalidraw/excalidraw/types/scene";
 
-import {VIEW_TYPE_EXCALIDRAW, EXCALIDRAW_FILE_EXTENSION, ICON_NAME} from './constants';
 
 export default class ExcalidrawView extends TextFileView {
   private getScene: any;
@@ -18,26 +29,24 @@ export default class ExcalidrawView extends TextFileView {
     this.excalidrawRef = null;
   }
 
-
-  // onload() {
-
-  // }
-
-  // onunload() {
-
-  // }
-
+  onload() {
+    const excalidrawData = JSON.parse(BLANK_DRAWING);
+    this.instantiateExcalidraw({
+      elements: excalidrawData.elements,
+      appState: excalidrawData.appState,
+      scrollToContent: true,
+      libraryItems: this.getLibraries()
+    });
+  }
 
   // get the new file content
   getViewData () {
-    console.log("getViewData");
     if(this.getScene) 
       return this.getScene();
     else return this.data;
   }
 
   setViewData (data: string, clear: boolean) {   
-    console.log("setViewData", this.leaf);
     if (this.app.workspace.layoutReady) {
       this.loadDrawing(data,clear);
     } else {
@@ -45,15 +54,28 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
-  private loadDrawing (data:string, clear:boolean) :void {  
-    console.log("loadDrawing clear?",clear,data); 
+  // clear the view content  
+  clear() {
+    if(this.excalidrawRef) this.excalidrawRef.current.resetScene();
+  }
+
+  private loadDrawing (data:string, clear:boolean) :void {   
     if(clear) this.clear();
     const excalidrawData = JSON.parse(data);
-    this.instantiateExcalidraw({
-      elements: excalidrawData.elements,
-      appState: excalidrawData.appState,
-      scrollToContent: true,
-    });
+    if(this.excalidrawRef) {
+      this.excalidrawRef.current.updateScene({
+        elements: excalidrawData.elements,
+        appState: excalidrawData.appState,  
+      });
+      this.excalidrawRef.current.setScrollToContent(excalidrawData.elements);
+    } else {
+      this.instantiateExcalidraw({
+        elements: excalidrawData.elements,
+        appState: excalidrawData.appState,
+        scrollToContent: true,
+        libraryItems: this.getLibraries()
+      });
+    }
   }
 
   // gets the title of the document
@@ -78,22 +100,23 @@ export default class ExcalidrawView extends TextFileView {
     return ICON_NAME;
   }
 
-  // clear the view content  
-  clear() {
-    
-    //this.excalidrawRef.resetScene();
-    return;
-    console.log("clear");
-    if(this.containerEl.hasChildNodes) {
-      console.log("unmount ReactDOM");
-      ReactDOM.unmountComponentAtNode(this.contentEl);
-      this.getScene = null;
+  async getLibraries() {
+    const excalidrawLibFiles = this.app.vault.getFiles();
+    const files = (excalidrawLibFiles || [])
+              .filter((f:TFile) => (f.extension==EXCALIDRAWLIB_FILE_EXTENSION));
+    let libs:LibraryItems = [];
+    let data;
+    for (let i=0;i<files.length;i++) {
+      data = JSON.parse(await this.app.vault.read(files[i]));
+      libs = libs.concat(data.library);
     }
+    const result = JSON.stringify(libs);
+    return result;
   }
 
+  
   private instantiateExcalidraw(initdata: any) {  
     //this.clear();
-    console.log("this.instantiateExcalidraw");
     const reactElement = React.createElement(() => {
       const excalidrawRef = React.useRef(null);
       const excalidrawWrapperRef = React.useRef(null);
@@ -103,7 +126,7 @@ export default class ExcalidrawView extends TextFileView {
       });
       
       this.excalidrawRef = excalidrawRef;
-
+      
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth, 
@@ -115,7 +138,7 @@ export default class ExcalidrawView extends TextFileView {
               width: this.contentEl.clientWidth, 
               height: this.contentEl.clientHeight, 
             });
-          } catch(err) {console.log ("onResize ",err)}
+          } catch(err) {console.log ("Excalidraw React-Wrapper, onResize ",err)}
         };
         window.addEventListener("resize", onResize); 
         return () => window.removeEventListener("resize", onResize);
@@ -161,7 +184,8 @@ export default class ExcalidrawView extends TextFileView {
                 saveAsScene: false
               },
             },
-            initialData: initdata
+            initialData: initdata,
+            onLibraryChange: (items:LibraryItems) => {console.log("onLibraryChange",items,JSON.stringify(items))}
           })
         )
       );

src/constants.ts

@@ -1,5 +1,6 @@
 export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
 export const EXCALIDRAW_FILE_EXTENSION = "excalidraw";
+export const EXCALIDRAWLIB_FILE_EXTENSION = "excalidrawlib";
 export const ICON_NAME = "excalidraw-icon";
 export const CODEBLOCK_EXCALIDRAW = "excalidraw";
 export const MAX_COLORS = 5;

src/settings.ts

@@ -27,15 +27,15 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     this.containerEl.empty();
 
     new Setting(containerEl)
-      .setName('Excalidraw folder') 
-      .setDesc('Default location for Excalidraw drawings. Leaving this empty means drawings will be saved to the Vault root.')
-      .addText(text => text
-        .setPlaceholder('excalidraw')
-        .setValue(this.plugin.settings.folder)
-        .onChange(async (value) => {
-          this.plugin.settings.folder = value;
-          await this.plugin.saveSettings();
-        }));
+    .setName('Excalidraw folder') 
+    .setDesc('Default location for your Excalidraw drawings. Leaving this empty means drawings will be created in the Vault root.')
+    .addText(text => text
+      .setPlaceholder('excalidraw')
+      .setValue(this.plugin.settings.folder)
+      .onChange(async (value) => {
+        this.plugin.settings.folder = value;
+        await this.plugin.saveSettings();
+      }));
 
     new Setting(containerEl)
       .setName('Excalidraw template file') 

yarn.lock

@@ -2156,10 +2156,10 @@
   "resolved" "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
   "version" "4.2.2"
 
-"aakansha-excalidraw@0.7.0-libs2":
-  "integrity" "sha512-R8PxtpKsenPeVH5ZVzKrtzCcLpCu2pCWD5j7fOMjmKu0uh69w4wvTbTX7oLtab/ajgbfDSeeffNz70YZrQ0R0w=="
-  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.7.0-libs2.tgz"
-  "version" "0.7.0-libs2"
+"aakansha-excalidraw@0.7.0-autoprefix1":
+  "integrity" "sha512-LMEb0OqtuoqE2PEusx3NX9can9ODPY1E+NGzRrse6cHV3Gvg8VxRO4jsCgRFfKKnLa9PpEE1Q5RTuibj+3f9mA=="
+  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.7.0-autoprefix1.tgz"
+  "version" "0.7.0-autoprefix1"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="