pre mvp alpha 0.0.2

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +1,38 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +1,20 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

data.json

@@ -1 +1 @@
-{"openFile":"excalidraw/Drawing 2021-04-19 17.22.53.excalidraw","settings":{"folder":"excalidraw","templateFilePath":""}}
+{"folder":"excalidraw","templateFilePath":"","openFile":"excalidraw/new file.excalidraw","settings":{"folder":"excalidraw","templateFilePath":""}}

dist/manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "0.0.1",
-	"minAppVersion": "0.0.1",
+	"version": "0.1.0",
+	"minAppVersion": "0.0.2",
 	"description": "An obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",
 	"authorUrl": "https://zsolt.blog",

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "0.0.1",
-	"minAppVersion": "0.0.1",
+	"version": "0.1.0",
+	"minAppVersion": "0.0.2",
 	"description": "An obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",
 	"authorUrl": "https://zsolt.blog",

src/ExcalidrawView.ts

@@ -0,0 +1,131 @@
+import { TextFileView, WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Excalidraw from "@excalidraw/excalidraw";
+import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
+import { AppState } from "@excalidraw/excalidraw/types/types";
+
+
+export default class ExcalidrawView extends TextFileView {
+  private getScene: any;
+
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+    this.getScene = null;
+  }
+
+  // clear the view content
+  clear() {
+    ReactDOM.unmountComponentAtNode(this.contentEl);
+    this.getScene = null;
+  }
+
+  // get the new file content
+  getViewData () {
+    if(this.getScene) return this.getScene();
+    else return '';
+  }
+
+  setViewData (data: string, clear: boolean) {
+    if(clear) this.clear();
+    const excalidrawData = JSON.parse(data);
+    this.instantiateExcalidraw({
+      elements: excalidrawData.elements,
+      appState: excalidrawData.appState,
+      scrollToContent: true,
+    });
+  }
+
+  // gets the title of the document
+  getDisplayText() {
+    if(this.file) return this.file.basename;
+    else return "excalidraw (no file)";
+
+  }
+
+  // confirms this view can accept csv extension
+  canAcceptExtension(extension: string) {
+    return extension == 'excalidraw';
+  }  
+
+  // the view type name
+  getViewType() {
+    return "excalidraw";
+  }
+
+  // icon for the view
+  getIcon() {
+    return "document-excalidraw";
+  }
+
+  private instantiateExcalidraw(initdata: any) {  
+    ReactDOM.render(React.createElement(() => {
+      let previousSceneVersion = 0;
+      const excalidrawRef = React.useRef(null);
+      const excalidrawWrapperRef = React.useRef(null);
+      const [dimensions, setDimensions] = React.useState({
+        width: undefined,
+        height: undefined
+      });
+      
+      React.useEffect(() => {
+        setDimensions({
+          width: this.contentEl.clientWidth, 
+          height: this.contentEl.clientHeight, 
+        });
+        const onResize = () => {
+          try {
+            setDimensions({
+              width: this.contentEl.clientWidth, 
+              height: this.contentEl.clientHeight, 
+            });
+          } catch(err) {console.log ("onResize ",err)}
+        };
+        window.addEventListener("resize", onResize); 
+        return () => window.removeEventListener("resize", onResize);
+      }, [excalidrawWrapperRef]);
+       
+      this.getScene = function() {
+        const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements();
+        const st: AppState = excalidrawRef.current.getAppState();
+        return JSON.stringify({
+          "type": "excalidraw",
+          "version": 2,
+          "source": "https://excalidraw.com",
+          "elements": el.filter(e => !e.isDeleted),
+          "appState": {
+            "theme": st.theme,
+            "viewBackgroundColor": st.viewBackgroundColor,
+            "gridSize": st.gridSize,
+            "zenModeEnabled": st.zenModeEnabled
+          }
+        });
+      };
+
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          "div",
+          {
+            className: "excalidraw-wrapper",
+            ref: excalidrawWrapperRef
+          },
+          React.createElement(Excalidraw.default, {
+            ref: excalidrawRef,
+            width: dimensions.width,
+            height: dimensions.height,
+            UIOptions: {
+              canvasActions: {
+                loadScene: false,
+                saveScene: false,
+                saveAsScene: false
+              },
+            },
+            initialData: initdata
+          })
+        )
+      );
+    }),(this as any).contentEl);
+  }
+}

src/constants.ts

@@ -1,4 +1,4 @@
-export const VIEW_TYPE_EXCALIDRAW = "excalidraw-editor";
+export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
 export const MAX_COLORS = 5;
 export const COLOR_FREQ = 6;
 export const BLANK_DRAWING = '{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}';

src/main.ts

@@ -11,7 +11,7 @@ import {
 	TAbstractFile 
 } from 'obsidian';
 import { BLANK_DRAWING, VIEW_TYPE_EXCALIDRAW, PALETTE_ICON } from './constants';
-import ExcalidrawView from './view';
+import ExcalidrawView from './ExcalidrawView';
 import {
 	ExcalidrawSettings, 
 	DEFAULT_SETTINGS, 
@@ -34,111 +34,60 @@ export default class ExcalidrawPlugin extends Plugin {
 		this.activeDrawing = null;
 		this.activeDrawingFilename = '';
   }
-
+  
 	async onload() {
-		addIcon("palette", PALETTE_ICON);
+		addIcon("excalidraw", PALETTE_ICON);
 
-		this.registerView(
-			VIEW_TYPE_EXCALIDRAW,
-			(leaf: WorkspaceLeaf) => (this.view = new ExcalidrawView(leaf))
-		);	
+    this.registerView(
+      VIEW_TYPE_EXCALIDRAW, 
+      (leaf: WorkspaceLeaf) => (this.view = new ExcalidrawView(leaf))
+    );
+
+    this.registerExtensions(["excalidraw"],"excalidraw");
 
 		await this.loadSettings();
 		this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
 
 		this.openDialog = new OpenFileDialog(this.app, this);
-		this.addRibbonIcon('palette', 'Excalidraw', async () => {
+		this.addRibbonIcon('excalidraw', 'Excalidraw', async () => {
 			this.openDialog.start();
 		});
 
 		this.addCommand({
 			id: "excalidraw-open",
-			name: "Open Excalidraw",
+			name: "Open existing drawing or create new one",
 			callback: () => {
 				this.openDialog.start();
 			},
 		});
 
-/*		this.addCommand({
-      id: "excalidraw-new-drawing",
-      name: "Open Excalidraw View",
-      callback: () => {
-				if (this.app.workspace.layoutReady) {
-					this.initLeaf();
-				} else {
-					this.registerEvent(
-						this.app.workspace.on("layout-ready", this.initLeaf.bind(this)));
-				}
-      },
-    });*/
-
-		if (this.app.workspace.layoutReady) {
-			this.initLeaf();
-		} else {
-			this.registerEvent(
-				this.app.workspace.on("layout-ready", this.initLeaf.bind(this)));
-		}
-	}
-
-	onunload():void {
-		this.view.unload();
-	}
-
-	initLeaf(): void {
-		if (this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW).length) {
-			this.app.workspace.revealLeaf(this.view.leaf);
-			this.loadLastDrawing(this.activeDrawingFilename);
-			return;
-		}
-
-		this.app.workspace.getRightLeaf(false).setViewState({
-			type: VIEW_TYPE_EXCALIDRAW,
+    this.addCommand({
+			id: "excalidraw-autocreate",
+			name: "Create a new drawing",
+			callback: () => {
+				this.createDrawing(this.getNextDefaultFilename());
+			},
 		});
-		
-		this.app.workspace.revealLeaf(this.view.leaf);
-
-		this.loadLastDrawing(this.activeDrawingFilename);
 	}
 
 	private async loadSettings() {
-		const savedData = await this.loadData();
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, savedData?.settings);
-		this.activeDrawingFilename = savedData?.openFile != null ? savedData.openFile : '';
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
 	}
 
 	async saveSettings() {
-		if(this.view != null) {
-			await this.saveData({
-				openFile: this.activeDrawing?.path || '',
-				settings: this.settings,
-		  });
-		}
+  	await this.saveData(this.settings);
 	}
 
-	public openDrawing(drawingFile: TFile) {
+	public async openDrawing(drawingFile: TFile) {
 		this.activeDrawing = drawingFile;
 		this.saveSettings();
-		this.view.loadDrawing(drawingFile);
+    const leaf = this.view ? this.view.leaf : this.app.workspace.activeLeaf;
+    leaf.setViewState({
+      type: VIEW_TYPE_EXCALIDRAW,
+      state: {file: drawingFile.path}}
+    );
 	}
 
-  private loadLastDrawing(fname: string) {
-    let file:TFile = null;
-
-    if(fname != '') {
-			const fileToOpen = (this.app.vault.getAbstractFileByPath(fname) as TFile);
-      if (fileToOpen) {			
-				file = fileToOpen;
-			}
-		}
-
-		if(file) {
-			this.openDrawing(file);
-		} else {
-		  this.createDrawing(this.getNextDefaultFilename());
-		}
-
-  }
-
 	private getNextDefaultFilename():string {
 		return this.settings.folder+'/Drawing ' + getDateString('yyyy-MM-dd HH.mm.ss')+'.excalidraw';
 	}