1.0.5-test2

.gitignore

@@ -10,3 +10,4 @@ package-lock.json
 main.js
 *.js.map
 stats.html
+hot-reload.bat

dist/manifest.json

@@ -1,10 +0,0 @@
-{
-	"id": "obsidian-excalidraw-plugin",
-	"name": "Excalidraw",
-	"version": "1.0.2",
-	"minAppVersion": "0.11.13",
-	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
-	"author": "Zsolt Viczian",
-	"authorUrl": "https://zsolt.blog",
-	"isDesktopOnly": false
-}

dist/styles.css

@@ -1,18 +0,0 @@
-.App {
-    font-family: sans-serif;
-    text-align: center;
-  }
-    
-  .excalidraw-wrapper {
-    height: 100%;
-    margin: 0px;
-    background-color: white;
-  }
-  
-  .context-menu-option__shortcut {
-      background-color: transparent !important;
-  }
-
-.block-language-excalidraw {
-  text-align:center;
-}

package.json

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

rollup.config.js

@@ -1,22 +1,19 @@
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
+//import copy from 'rollup-plugin-copy';
 import { env } from "process";
 import babel from '@rollup/plugin-babel';
 import replace from "@rollup/plugin-replace";
 import visualizer from "rollup-plugin-visualizer";
 
 const isProd = (process.env.NODE_ENV === "production");
-
-console.log(process.env.NODE_ENV);
 console.log("Is production", isProd);
 
 export default {
   input: 'src/main.ts',
   output: {
-    dir: isProd ? './dist' : '.',
+    dir: '.',
     sourcemap: 'inline',
     format: 'cjs',
     exports: 'default'
@@ -33,14 +30,6 @@ export default {
       exclude: "node_modules/**"
     }),
     commonjs(),
-    postcss({
-      plugins: []
-    }),
-    copy({
-      targets: [
-        { src: ['manifest.json', 'styles.css'], dest: './dist' }
-      ], flatten: true
-    }),
     visualizer(),
   ]
 };

src/ExcalidrawView.ts

@@ -1,7 +1,7 @@
 import { 
   TextFileView, 
   WorkspaceLeaf, 
-  TFile 
+  TFile, 
 } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -12,31 +12,24 @@ import Excalidraw, {exportToSvg } from "aakansha-excalidraw";
 import {
   VIEW_TYPE_EXCALIDRAW,
   EXCALIDRAW_FILE_EXTENSION, 
-  ICON_NAME, 
-  BLANK_DRAWING, 
-  EXCALIDRAWLIB_FILE_EXTENSION
+  ICON_NAME,
+  EXCALIDRAW_LIB_HEADER,
 } from './constants';
-import { getElementsAtPosition } from "@excalidraw/excalidraw/types/scene";
-
+import ExcalidrawPlugin from './main';
+import { THEME_FILTER } from "@excalidraw/excalidraw/types/constants";
 
 export default class ExcalidrawView extends TextFileView {
   private getScene: any;
   private excalidrawRef: React.MutableRefObject<any>;
+  private justLoaded: boolean;
+  private plugin: ExcalidrawPlugin;
 
-  constructor(leaf: WorkspaceLeaf) {
+  constructor(leaf: WorkspaceLeaf, plugin: ExcalidrawPlugin) {
     super(leaf);
     this.getScene = null;
     this.excalidrawRef = null;
-  }
-
-  onload() {
-    const excalidrawData = JSON.parse(BLANK_DRAWING);
-    this.instantiateExcalidraw({
-      elements: excalidrawData.elements,
-      appState: excalidrawData.appState,
-      scrollToContent: true,
-      libraryItems: this.getLibraries()
-    });
+    this.plugin = plugin;
+    this.justLoaded = false;
   }
 
   // get the new file content
@@ -46,6 +39,10 @@ export default class ExcalidrawView extends TextFileView {
     else return this.data;
   }
 
+  async onunload() {
+    if(this.excalidrawRef) await this.save();
+  }
+
   setViewData (data: string, clear: boolean) {   
     if (this.app.workspace.layoutReady) {
       this.loadDrawing(data,clear);
@@ -56,24 +53,29 @@ export default class ExcalidrawView extends TextFileView {
 
   // clear the view content  
   clear() {
-    if(this.excalidrawRef) this.excalidrawRef.current.resetScene();
+    if(this.excalidrawRef) {
+      this.excalidrawRef = null;
+      this.getScene = null;
+      ReactDOM.unmountComponentAtNode(this.contentEl);
+    }
+    //this.excalidrawRef.current.resetScene({ resetLoadingState: true });
   }
 
-  private loadDrawing (data:string, clear:boolean) :void {   
+  private async loadDrawing (data:string, clear:boolean) {   
     if(clear) this.clear();
+    this.justLoaded = true; //a flag to trigger zoom to fit after the drawing has been loaded
     const excalidrawData = JSON.parse(data);
     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()
+        libraryItems: await this.getLibrary(),
       });
     }
   }
@@ -100,23 +102,13 @@ export default class ExcalidrawView extends TextFileView {
     return ICON_NAME;
   }
 
-  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;
+  async getLibrary() {
+    const data = JSON.parse(this.plugin.settings.library);
+    return data?.library ? data.library : [];
   }
 
   
   private instantiateExcalidraw(initdata: any) {  
-    //this.clear();
     const reactElement = React.createElement(() => {
       const excalidrawRef = React.useRef(null);
       const excalidrawWrapperRef = React.useRef(null);
@@ -124,14 +116,14 @@ export default class ExcalidrawView extends TextFileView {
         width: undefined,
         height: undefined
       });
-      
+
       this.excalidrawRef = excalidrawRef;
-      
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth, 
           height: this.contentEl.clientHeight, 
         });
+        
         const onResize = () => {
           try {
             setDimensions({
@@ -143,7 +135,7 @@ export default class ExcalidrawView extends TextFileView {
         window.addEventListener("resize", onResize); 
         return () => window.removeEventListener("resize", onResize);
       }, [excalidrawWrapperRef]);
-      
+
       this.getScene = () => {
         if(!excalidrawRef?.current) {
           return null;
@@ -158,8 +150,6 @@ export default class ExcalidrawView extends TextFileView {
           "appState": {
             "theme": st.theme,
             "viewBackgroundColor": st.viewBackgroundColor,
-            "gridSize": st.gridSize,
-            "zenModeEnabled": st.zenModeEnabled
           }
         });
       };
@@ -172,9 +162,11 @@ export default class ExcalidrawView extends TextFileView {
           {
             className: "excalidraw-wrapper",
             ref: excalidrawWrapperRef,
+            key: "abc",
           },
           React.createElement(Excalidraw.default, {
             ref: excalidrawRef,
+            key: "xyz",
             width: dimensions.width,
             height: dimensions.height,
             UIOptions: {
@@ -185,12 +177,23 @@ export default class ExcalidrawView extends TextFileView {
               },
             },
             initialData: initdata,
-            onLibraryChange: (items:LibraryItems) => {console.log("onLibraryChange",items,JSON.stringify(items))}
+            onChange: (et:ExcalidrawElement[],st:AppState) => {
+              if(this.justLoaded) {
+                this.justLoaded = false;             
+                const e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, shiftKey : true, code:"Digit1"});
+                this.contentEl.querySelector("canvas")?.dispatchEvent(e);
+              }
+            },
+            onLibraryChange: async (items:LibraryItems) => {
+              this.plugin.settings.library = EXCALIDRAW_LIB_HEADER+JSON.stringify(items)+'}';
+              this.plugin.saveSettings();
+            }
           })
         )
       );
     });
     ReactDOM.render(reactElement,(this as any).contentEl);
+    
   }
 
   public static getSVG(data:string):SVGSVGElement {

src/constants.ts

@@ -1,6 +1,5 @@
 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;
@@ -8,3 +7,4 @@ export const COLOR_FREQ = 6;
 export const BLANK_DRAWING = '{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}';
 export const EMPTY_MESSAGE = "Hit enter to create a new drawing";
 export const EXCALIDRAW_ICON = `<g transform="translate(30,0)"><path fill="currentColor" stroke="currentColor" d="M14.45 1.715c-2.723 2.148-6.915 5.797-10.223 8.93l-2.61 2.445.477 3.207c.258 1.75.738 5.176 1.031 7.582.332 2.406.66 4.668.773 4.996.145.438 0 .656-.406.656-.699 0-.734-.183 1.176 5.832.7 2.297 1.363 4.414 1.434 4.633.074.254.367.363.699.254.332-.145.515-.438.406-.691-.113-.293.074-.586.367-.696.403-.144.367-.437-.258-1.492-.992-1.64-3.53-15.64-3.675-20.164-.11-3.207-.11-3.242 1.25-5.066 1.324-1.786 4.375-4.485 9.078-7.91 1.324-.985 2.648-2.079 3.015-2.446.551-.656.809-.472 5.442 4.414 2.683 2.805 5.664 5.688 6.617 6.414l1.766 1.313-1.36 2.844c-.734 1.53-3.715 7.437-6.656 13.054-6.137 11.813-4.887 10.68-12.02 10.79l-4.632.038-1.547 1.75c-1.617 1.86-1.836 2.551-1.063 3.72.293.398.512 1.054.512 1.456 0 .656.258.766 1.73.84.918.035 1.762.145 1.875.254.11.11.258 2.371.368 5.031l.144 4.813-2.46 5.25C1.616 72.516 0 76.527 0 77.84c0 .691.148 1.273.293 1.273.367 0 .367-.035 15.332-30.988 6.95-14.363 13.531-27.89 14.633-30.113 1.101-2.227 2.094-4.266 2.168-4.559.074-.328-2.461-2.844-6.508-6.379C22.281 3.864 19.082.95 18.785.621c-.844-1.023-2.094-.695-4.336 1.094zM15.7 43.64c-1.692 3.246-1.766 3.28-6.4 3.5-4.081.218-4.152.183-4.152-.582 0-.438-.148-1.024-.332-1.313-.222-.328-.074-.914.442-1.715l.808-1.238h3.676c2.024-.04 4.34-.184 5.149-.328.808-.149 1.507-.219 1.578-.184.074.035-.293.875-.77 1.86zm-3.09 5.832c-.294.765-1.067 2.37-1.692 3.574-1.027 2.043-1.137 2.113-1.395 1.277-.148-.511-.257-2.008-.296-3.355-.036-2.66-.11-2.625 2.98-2.809l.992-.035zm0 0"/><path fill="currentColor" stroke="currentColor" d="M15.55 10.39c-.66.473-.843.95-.843 2.153 0 1.422.11 1.64 1.102 2.039.992.402 1.25.367 2.39-.398 1.508-1.024 1.543-1.278.442-2.918-.957-1.422-1.914-1.676-3.09-.875zm2.098 1.313c.586 1.02.22 1.785-.882 1.785-.993 0-1.434-.984-.883-1.968.441-.801 1.285-.727 1.765.183zm0 0M38.602 18.594c0 .183-.22.363-.477.363-.219 0-.844 1.023-1.324 2.262-1.469 3.793-16.176 32.629-16.211 31.718 0-.472-.223-.8-.59-.8-.516 0-.59.289-.367 1.71.219 1.641.074 2.008-5.149 12.071-2.941 5.723-6.101 11.703-7.02 13.305-.956 1.68-1.69 3.5-1.765 4.265-.11 1.313.035 1.496 3.235 4.23 1.84 1.606 4.191 3.61 5.222 4.52 4.63 4.196 6.801 5.871 7.387 5.762.883-.145 14.523-14.328 14.559-15.129 0-.367-.66-5.906-1.47-12.324-1.398-10.938-2.722-23.734-2.573-24.973.109-.765-.442-4.633-.844-6.308-.332-1.313-.184-1.86 2.46-7.84 1.544-3.535 3.567-7.875 4.45-9.625.844-1.75 1.582-3.281 1.582-3.39 0-.11-.258-.18-.55-.18-.298 0-.555.144-.555.363zm-8.454 27.234c.403 2.55 1.211 8.676 1.801 13.598 1.14 9.043 2.461 19.07 2.832 21.62.219 1.278.07 1.532-2.316 4.157-4.156 4.629-8.567 9.188-10.074 10.356l-1.399 1.093-7.168-6.636c-6.617-6.051-7.168-6.672-6.765-7.403.222-.398 2.097-3.789 4.156-7.508 2.058-3.718 4.777-8.68 6.027-11.011 1.29-2.371 2.465-4.41 2.684-4.52.258-.148.332 3.535.258 11.375-.149 11.703-.11 11.739 1.066 11.485.148 0 .258-5.907.258-13.09V56.293l3.86-7.656c2.132-4.23 3.898-7.621 3.972-7.586.07.039.441 2.187.808 4.777zm0 0"/></g>`;
+export const EXCALIDRAW_LIB_HEADER = `{"type":"excalidrawlib","version":1,"library":`;

src/main.ts

@@ -42,7 +42,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
     this.registerView(
       VIEW_TYPE_EXCALIDRAW, 
-      (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf)
+      (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf, this)
     );
 
     this.registerExtensions([EXCALIDRAW_FILE_EXTENSION],VIEW_TYPE_EXCALIDRAW);

src/settings.ts

@@ -5,12 +5,14 @@ export interface ExcalidrawSettings {
   folder: string,
   templateFilePath: string,
   width: string,
+  library: string,
 }
 
 export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   folder: 'excalidraw',
   templateFilePath: '',
   width: '400',
+  library: `{"type":"excalidrawlib","version":1,"library":[]}`,
 }
 
 export class ExcalidrawSettingTab extends PluginSettingTab {

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-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"
+"aakansha-excalidraw@0.7.0-ccp":
+  "integrity" "sha512-/RQBh8x9WBmuwT2xebmQnktJlPkD58eLuc9D8wT4bL1X+mf4q5jK6TF4YxUUn2qbyvHVunHenz+N9Z6Az5bB/w=="
+  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.7.0-ccp.tgz"
+  "version" "0.7.0-ccp"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="
@@ -3791,6 +3791,11 @@
   "resolved" "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
   "version" "1.0.0"
 
+"cyclist@^1.0.1":
+  "integrity" "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+  "resolved" "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
+  "version" "1.0.1"
+
 "css-blank-pseudo@^0.1.4":
   "integrity" "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w=="
   "resolved" "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz"
@@ -4002,11 +4007,6 @@
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz"
   "version" "3.0.6"
 
-"cyclist@^1.0.1":
-  "integrity" "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
-  "resolved" "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
-  "version" "1.0.1"
-
 "d@^1.0.1", "d@1":
   "integrity" "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA=="
   "resolved" "https://registry.npmjs.org/d/-/d-1.0.1.tgz"
@@ -11354,11 +11354,6 @@
   dependencies:
     "tslib" "^1.8.1"
 
-"tty-browserify@0.0.0":
-  "integrity" "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
-  "resolved" "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
-  "version" "0.0.0"
-
 "tunnel-agent@^0.6.0":
   "integrity" "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0="
   "resolved" "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
@@ -11450,6 +11445,11 @@
   "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz"
   "version" "4.1.5"
 
+"tty-browserify@0.0.0":
+  "integrity" "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+  "resolved" "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
+  "version" "0.0.0"
+
 "uglify-js@^2.7.4":
   "integrity" "sha1-KcVzMUgFe7Th913zW3qcty5qWd0="
   "resolved" "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz"