link index draft - not working yet

AutomateHowTo.md

@@ -4,8 +4,9 @@ Excalidraw Automate allows you to create Excalidraw drawings using the [Template
 
 With a little work, using Excalidraw Automate you can generate simple mindmaps, fill out SVG forms, create customized charts, etc. based on documents in your vault.
 
-You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend staring your Automate scripts with the following code.
+You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend starting your Automate scripts with the following code.
 
+*Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
 const ea = ExcalidrawAutomate;
 ea.reset();
@@ -18,66 +19,90 @@ The second line resets ExcalidrawAutomate to defaults. This is important as you
 ## Basic logic of using Excalidraw Automate
 1. Set the styling of the elements you want to draw
 2. Add elements. As you add elements, each new element is added one layer above the previous, thus in case of overlapping objects the later one will be on the top of the prior one.
-3. Call create to instantiate the drawing
+3. Call `await ea.create();` to instantiate the drawing
 
 You can change styling between adding different elements. My logic for separating element styling and creation is based on the assumption that you will probably set a stroke color, stroke style, stroke roughness, etc. and draw most of your elements using this. There would be no point in setting all these parameters each time you add an element.
 
-### Before we dive deeper, here's a simple example script
+### Before we dive deeper, here are two a simple example scripts
+#### Create a new drawing with custom name, in a custom folder, using a template
+This simple script gives you significant additional flexibility over Excalidraw Plugin settings to name your drawings, place them into folders, and to apply templates.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
 <%*
-    const ea = ExcalidrawAutomate;
-	ea.reset();
-	ea.addRect(-150,-50,450,300);
-	await ea.addText(-100,70,"Left to right");
-	ea.addArrow([[-100,100],[100,100]]);
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  await ea.create({
+    filename    : tp.date.now("HH.mm"), 
+    foldername  : tp.date.now("YYYY-MM-DD"),
+    templatePath: "Excalidraw/Template1.excalidraw",
+    onNewPane   : false
+  });
+%>
+```
 
-    ea.style.strokeColor = "red";
-	await ea.addText(100,-30,"top to bottom",200,null,"center");
-	ea.addArrow([[200,0],[200,200]]);
-	await ea.create();
+#### Create a simple drawing
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.addRect(-150,-50,450,300);
+  ea.addText(-100,70,"Left to right");
+  ea.addArrow([[-100,100],[100,100]]);
+
+  ea.style.strokeColor = "red";
+  ea.addText(100,-30,"top to bottom",{width:200,textAligh:"center"});
+  ea.addArrow([[200,0],[200,200]]);
+  await ea.create();
 %>
 ```
 The script will generate the following drawing:
-![[./images/FristDemo.png]]
+
+![FristDemo](https://user-images.githubusercontent.com/14358394/116825643-6e5a8b00-ab90-11eb-9e3a-37c524620d0d.png)
 
 ## Attributes and functions at a glance
 Here's the interface implemented by ExcalidrawAutomate:
-
-```typescript
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
 ExcalidrawAutomate: {
-	style: {
-		strokeColor: string;
-		backgroundColor: string;
-		angle: number;
-		fillStyle: FillStyle;
-		strokeWidth: number;
-		storkeStyle: StrokeStyle;
-		roughness: number;
-		opacity: number;
-		strokeSharpness: StrokeSharpness;
-		fontFamily: FontFamily;
-		fontSize: number;
-		textAlign: string;
-		verticalAlign: string;
-		startArrowHead: string;
-		endArrowHead: string;
-	}
-	canvas: {theme: string, viewBackgroundColor: string};
-	setFillStyle: Function;
-	setStrokeStyle: Function;
-	setStrokeSharpness: Function;
-	setFontFamily: Function;
-	setTheme: Function;
-	create: Function;
-	addRect: Function;
-	addDiamond: Function;
-	addEllipse: Function;
-	addText: Function;
-	addLine: Function;
-	addArrow: Function;
-	connectObjects: Function;
-	clear: Function;
-	reset: Function;
+  style: {
+    strokeColor: string;
+    backgroundColor: string;
+    angle: number;
+    fillStyle: FillStyle;
+    strokeWidth: number;
+    storkeStyle: StrokeStyle;
+    roughness: number;
+    opacity: number;
+    strokeSharpness: StrokeSharpness;
+    fontFamily: FontFamily;
+    fontSize: number;
+    textAlign: string;
+    verticalAlign: string;
+    startArrowHead: string;
+    endArrowHead: string;
+  }
+  canvas: {theme: string, viewBackgroundColor: string};
+  setFillStyle: Function;
+  setStrokeStyle: Function;
+  setStrokeSharpness: Function;
+  setFontFamily: Function;
+  setTheme: Function;
+  addRect: Function;
+  addDiamond: Function;
+  addEllipse: Function;
+  addText: Function;
+  addLine: Function;
+  addArrow: Function;
+  connectObjects: Function;
+  addToGroup: Function;
+  toClipboard: Function;
+  create: Function;
+  createPNG: Function;
+  createSVG: Function;
+  clear: Function;
+  reset: Function;
 };
 ```
 
@@ -85,12 +110,12 @@ ExcalidrawAutomate: {
 As you will notice, some styles have setter functions. This is to help you navigate the allowed values for the property. You do not need to use the setter function however, you can use set the value directly as well.
 
 ### strokeColor
-String. The color of the line.
+String. The color of the line. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
 
-Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp) or hexadecimal RGB strings e.g. `#FF0000` for red.
+Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings, or  e.g. `#FF0000` for red.
 
 ### backgroundColor
-String. This is the fill color of an object.
+String. This is the fill color of an object. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
 
 Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.
 
@@ -167,7 +192,7 @@ String. Alignment of the text vertically. Valid values are "top" and "middle".
 
 This is relevant when setting a fix height using the `addText()` function.
 
-### startArroHead, endArrowHead
+### startArrowHead, endArrowHead
 String. Valid values are "arrow", "bar", "dot", and "none". Specifies the beginning and ending of an arrow.
 
 This is relavant when using the `addArrow()` and the `connectObjects()` functions.
@@ -183,15 +208,16 @@ String. Valid values are "light" and "dark".
 - any other number: "dark"
 
 ### viewBackgroundColor
-String. This is the fill color of an object.
+String. This is the fill color of an object. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
 
 Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.
 
 ## Adding objects
-These functions will add objects to your drawing. The canvas is infinite, and it accepts negative and positive X and Y values. The top left corner x values increase left to right, y values increase top to bottom.
-![[./images/coordinates.png]]
+These functions will add objects to your drawing. The canvas is infinite, and it accepts negative and positive X and Y values. X values increase left to right, Y values increase top to bottom.
 
-### addRect(), addDiamond, addEllipse
+![coordinates](https://user-images.githubusercontent.com/14358394/116825632-6569b980-ab90-11eb-827b-ada598e91e46.png)
+
+### addRect(), addDiamond(), addEllipse()
 ```typescript
 addRect(topX:number, topY:number, width:number, height:number):string
 addDiamond(topX:number, topY:number, width:number, height:number):string
@@ -201,16 +227,17 @@ Returns the `id` of the object. The `id` is required when connecting objects wit
 
 ### addText
 ```typescript
-async addText(topX:number, topY:number, text:string, width?:number, height?:number,textAlign?: string, verticalAlign?:string):Promise<string>
+addText(topX:number, topY:number, text:string, formatting?:{width:number, height:number,textAlign: string, verticalAlign:string, box: boolean, boxPadding: number}):string
 ```
 
-Adds text to the drawing. If `width` and `height` are not specified, the function will calculate the width and height based on the fontFamily, the fontSize and the text provided.
+Adds text to the drawing. 
 
-In case you want to position a text in the center compared to other elements on the drawing, you can provide a fixed height and width, and you can also specify `textAlign` and `verticalAlign` as described above.
+Formatting parameters are optional:
+- If `width` and `height` are not specified, the function will calculate the width and height based on the fontFamily, the fontSize and the text provided.
+- In case you want to position a text in the center compared to other elements on the drawing, you can provide a fixed height and width, and you can also specify `textAlign` and `verticalAlign` as described above. e.g.: `{width:500, textAlign:"center"}`
+- If you want to add a box around the text, set `{box:true}`
 
-Returns the `id` of the object. The `id` is required when connecting objects with lines. See later.
-
-This is an asynchronous function. It must be called with an `await` from the Templater script, otherwise the text will not appear. See code example above.
+Returns the `id` of the object. The `id` is required when connecting objects with lines. See later. If `{box:true}` then returns the id of the enclosing box.
 
 ### addLine()
 ```typescript
@@ -220,30 +247,35 @@ Adds a line following the points provided. Must include at least two points `poi
 
 ### addArrow()
 ```typescript
-addArrow(points: [[x:number,y:number]],startArrowHead?:string,endArrowHead?:string,startBinding?:string,endBinding?:string):void
+addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void
 ```
 
-Adds an arrow following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if `strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".
+Adds an arrow following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if element `style.strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".
 
-`startArrowHead` and `endArrowHead` specify the type of arrow head to use, as described above. Valid values are "none", "arrow", "dot", and "bar".
+`startArrowHead` and `endArrowHead` specify the type of arrow head to use, as described above. Valid values are "none", "arrow", "dot", and "bar". e.g. `{startArrowHead: "dot", endArrowHead: "arrow"}`
 
-`startBinding` and `endBinding` are the object id's of connected objects. Do not use directly with this function. Use `connectObjects` instead.
+`startObjectId` and `endObjectId` are the object id's of connected objects. I recommend using `connectObjects` instead calling addArrow() for the purpose of connecting objects.
 
 ### connectObjects()
 ```typescript
 declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
-
-connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, numberOfPoints: number = 1,startArrowHead?:string,endArrowHead?:string):void
+connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints: number,startArrowHead:string,endArrowHead:string, padding: number}):void
 ```
 Connects two objects with an arrow.
 
-`objectA` and `objectB` are strings. These are the ids of the objects to connect. IDs are returned by addRect(), addDiamond(), addEllipse() and addText() when creating these objects.
+`objectA` and `objectB` are strings. These are the ids of the objects to connect. These IDs are returned by addRect(), addDiamond(), addEllipse() and addText() when creating those objects.
 
 `connectionA` and `connectionB` specify where to connect on the object. Valid values are: "top", "bottom", "left", and "right".
 
-`numberOfPoints` set the number of interim break points for the line. Default value is one, meaning there will be 1 breakpoint between the start and the end points of the arrow. When moving objects on the drawing, these breakpoints will influence how the line is rerouted by Excalidraw.
+`numberOfPoints` set the number of interim break points for the line. Default value is zero, meaning there will be no breakpoint in between the start and the end points of the arrow. When moving objects on the drawing, these breakpoints will influence how the line is rerouted by Excalidraw.
 
-`startArrowHead` and `endArrowHead` function as described for `addArrow()` above.
+`startArrowHead` and `endArrowHead` work as described for `addArrow()` above.
+
+### addToGroup()
+```typescript
+addToGroup(objectIds:[]):void
+```
+Groups objects listed in `objectIds`.
 
 ## Utility functions
 ### clear()
@@ -252,9 +284,15 @@ Connects two objects with an arrow.
 ### reset()
 `reset()` will first call `clear()` and then reset element style to defaults.
 
+### toClipboard()
+```typescript
+async toClipboard(templatePath?:string)
+```
+Places the generated drawing to the clipboard. Useful when you don't want to create a new drawing, but want to paste additional items onto an existing drawing.
+
 ### create()
 ```typescript
-async create(filename?: string, foldername?:string, templatePath?:string, onNewPane: boolean = false)
+async create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean})
 ```
 Creates the drawing and opens it.
 
@@ -266,36 +304,174 @@ Creates the drawing and opens it.
 
 `onNewPane` defines where the new drawing should be created. `false` will open the drawing on the current active leaf. `true` will open the drawing by vertically splitting the current leaf.
 
+Example:
+```javascript
+create({filename:"my drawing", foldername:"myfolder/subfolder/", templatePath: "Excalidraw/template.excalidraw", onNewPane: true});
+```
+### createSVG()
+```typescript
+async createSVG(templatePath?:string)
+```
+Returns an HTML SVGSVGElement containing the generated drawing.
+
+### createPNG()
+```typescript
+async createPNG(templatePath?:string)
+```
+Returns a blob containing a PNG image of the generated drawing.
+
 ## Examples
-### Connect objects
+### Insert new drawing into currently edited document
+This template will prompt you for the title of the drawing. It will create a new drawing with the provided title, and in the folder of the document you were editing. It will then transclude the new drawing at the cursor location and open the new drawing in a new workspace leaf by splitting the current leaf.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
 <%*
-    const ea = ExcalidrawAutomate;
-	ea.reset();
-	await ea.addText(-130,-100,"Connecting two objects");
-	const a = ea.addRect(-100,-100,100,100);
-	const b = ea.addEllipse(200,200,100,100);
-	ea.connectObjects(a,"bottom",b,"left",2); //see how the line breaks differently when moving objects around
-	ea.style.strokeColor = "red";
-	ea.connectObjects(a,"right",b,"top",1);
-	await ea.create();
+  const defaultTitle = tp.date.now("HHmm")+' '+tp.file.title;
+  const title = await tp.system.prompt("Title of the drawing?", defaultTitle);
+  const folder = tp.file.folder(true);
+  const transcludePath = (folder== '/' ? '' : folder + '/') + title + '.excalidraw';
+  tR = String.fromCharCode(96,96,96)+'excalidraw\n[['+transcludePath+']]\n'+String.fromCharCode(96,96,96);
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.setTheme(1); //set Theme to dark
+  await ea.create({
+    filename : title,
+    foldername : folder,
+    //templatePath: 'Excalidraw/Template.excalidraw', //uncomment if you want to use a template
+    onNewPane : true
+  });
+%>
+```
+
+### Connect objects
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.addText(-130,-100,"Connecting two objects");
+  const a = ea.addRect(-100,-100,100,100);
+  const b = ea.addEllipse(200,200,100,100);
+  ea.connectObjects(a,"bottom",b,"left",{numberOfPoints: 2}); //see how the line breaks differently when moving objects around
+  ea.style.strokeColor = "red";
+  ea.connectObjects(a,"right",b,"top",1);
+  await ea.create();
 %>
 ```
 ### Using a template
 This example is similar to the first one, but rotated 90°, and using a template, plus specifying a filename and folder to save the drawing, and opening the new drawing in a new pane.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
 <%*
-    const ea = ExcalidrawAutomate;
-	ea.reset();
-	ea.style.angle = Math.PI/2;
-	ea.style.strokeWidth = 3.5;
-	ea.addRect(-150,-50,450,300);
-	await ea.addText(-100,70,"Left to right");
-	ea.addArrow([[-100,100],[100,100]]);
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.style.angle = Math.PI/2; 
+  ea.style.strokeWidth = 3.5;
+  ea.addRect(-150,-50,450,300);
+  ea.addText(-100,70,"Left to right");
+  ea.addArrow([[-100,100],[100,100]]);
 
-    ea.style.strokeColor = "red";
-	await ea.addText(100,-30,"top to bottom",200,null,"center");
-	ea.addArrow([[200,0],[200,200]]);
-	await ea.create("My Drawing","myfolder/fordemo/","Excalidraw/Template2.excalidraw",true);
+  ea.style.strokeColor = "red";
+  await ea.addText(100,-30,"top to bottom",{width:200,textAlign:"center"});
+  ea.addArrow([[200,0],[200,200]]);
+  await ea.create({filename:"My Drawing",foldername:"myfolder/fordemo/",templatePath:"Excalidraw/Template2.excalidraw",onNewPane:true});
 %>
-```
+```
+
+### Generating a simple mindmap from a text outline
+This is a slightly more elaborate example. This will generate an a mindmap from a tabulated outline.
+
+![Drawing 2021-05-05 20 52 34](https://user-images.githubusercontent.com/14358394/117194124-00a69d00-ade4-11eb-8b75-5e18a9cbc3cd.png)
+
+Example input:
+```
+- Test 1
+	- Test 1.1
+- Test 2
+	- Test 2.1
+	- Test 2.2 
+		- Test 2.2.1
+		- Test 2.2.2
+		- Test 2.2.3
+			- Test 2.2.3.1
+- Test 3
+	- Test 3.1
+```
+
+The script:
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+const IDX = Object.freeze({"depth":0, "text":1, "parent":2, "size":3, "children": 4, "objectId":5});
+
+//check if an editor is the active view
+const editor = this.app.workspace.activeLeaf?.view?.editor;
+if(!editor) return;
+
+//initialize the tree with the title of the document as the first element
+let tree = [[0,this.app.workspace.activeLeaf?.view?.getDisplayText(),-1,0,[],0]];
+const linecount = editor.lineCount();
+
+//helper function, use regex to calculate indentation depth, and to get line text
+function getLineProps (i) {
+  props = editor.getLine(i).match(/^(\t*)-\s+(.*)/);
+  return [props[1].length+1, props[2]];
+}
+
+//a vector that will hold last valid parent for each depth
+let parents = [0];
+
+//load outline into tree
+for(i=0;i<linecount;i++) {
+  [depth,text] = getLineProps(i);
+  if(depth>parents.length) parents.push(i+1);
+  else parents[depth] = i+1;
+  tree.push([depth,text,parents[depth-1],1,[]]);
+  tree[parents[depth-1]][IDX.children].push(i+1);
+}
+
+//recursive function to crawl the tree and identify height aka. size of each node
+function crawlTree(i) {
+  if(i>linecount) return 0;
+  size = 0;
+  if((i+1<=linecount && tree[i+1][IDX.depth] <= tree[i][IDX.depth])|| i == linecount) { //I am a leaf
+    tree[i][IDX.size] = 1; 
+    return 1; 
+  }
+  tree[i][IDX.children].forEach((node)=>{ 
+    size += crawlTree(node);
+  });
+  tree[i][IDX.size] = size; 
+  return size;   
+}
+
+crawlTree(0);
+
+//Build the mindmap in Excalidraw
+const width = 300;
+const height = 100;
+const ea = ExcalidrawAutomate;
+ea.reset();
+
+//stores position offset of branch/leaf in height units
+offsets = [0];
+
+for(i=0;i<=linecount;i++) {
+  depth = tree[i][IDX.depth];
+  if (depth == 1) ea.style.strokeColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
+  tree[i][IDX.objectId] = ea.addText(depth*width,((tree[i][IDX.size]/2)+offsets[depth])*height,tree[i][IDX.text],{box:true});  
+  //set child offset equal to parent offset
+  if((depth+1)>offsets.length) offsets.push(offsets[depth]);
+  else offsets[depth+1] = offsets[depth];
+  offsets[depth] += tree[i][IDX.size];
+  if(tree[i][IDX.parent]!=-1) {
+    ea.connectObjects(tree[tree[i][IDX.parent]][IDX.objectId],"right",tree[i][IDX.objectId],"left",{startArrowHead: 'dot'});
+  }
+}
+
+await ea.create({onNewPane: true});
+%>
+```

README.md

@@ -1,25 +1,34 @@
-# Obsidian Excalidraw Plugin
-The Obsidian-Excalidraw plugin integrates [Excalidraw](https://excalidraw.com/), a feature rich sketching tool, into Obsidian. You can store and edit Excalidraw files in your vault and you can transclude drawings into your documents. For a showcase of Excalidraw features, please read my blog post [here](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html).
-
-**See details of the 1.0.6 and 1.0.7 release including a short video, further below**
+The Obsidian-Excalidraw plugin integrates [Excalidraw](https://excalidraw.com/), a feature rich sketching tool, into Obsidian. You can store and edit Excalidraw files in your vault and you can transclude drawings into your documents. For a showcase of Excalidraw features, please read my blog post [here](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html) and/or watch the videos below.
 
 ![image](https://user-images.githubusercontent.com/14358394/115983515-d06c2c80-a5a1-11eb-8d12-c7df91d18107.png)
 
-## Key features
-- The plugin adds the following actions to the **command palette**:
-  - To create a new drawing
-  - To find and edit existing drawings in your vault, 
-  - To embed (transclude) a drawing into a document, and
-  - To export a drawing as PNG or SVG.
-- You can also use the **file explorer** in your vault to open Excalidraw files. 
-- Use the **ribbon button** to create a new drawing, do CTRL+Click to open on a new page.
-- Open settings to set up a **default folder** for new drawings. 
-- Set up a **Template** by creating a drawing, customizing it the way you like it, and specifying the file as the template in settings.
-- The plugin saves drawings to your vault as a file with the *.excalidraw* file extension.
-- You can customize the **size and position of the embedded image** using the `[[image.excalidraw|100]]`, `[[image.excalidraw|100x100]]`, `[[image.excalidraw|100|left]]`, `[[image.excalidraw|right-wrap]]`, formatting options. `[[<filename.excalidraw>|<width>x<height>|<alignment>]]`. You can add your custom alignment via css. Any text that appears in `<alignment>` will be added as style to the SVG element and the wrapper DIV element. Check below and styles.css for more insight.
-- You can setup Excalidraw to **automatically export SVG and/or PNG** files for your drawings, and to keep those in sync with your drawing.
+## Important notice to the 1.1.x update!
 
-## How to?
+Thank you for updating to Excalidraw 1.1.x!
+
+I have improved how drawings are embedded! You no longer need an Excalidraw codeblock. You can now embed drawings just like any other images: `![[my drawing.excalidraw]]` or `![[my drawing.excalidraw|500|left]]` or `![[my drawing.excalidraw|right-wrap]]`, `![alttext|500|right](drawing.excalidraw)`, `![](folder/drawing.excalidraw)`, etc. You get the idea.
+
+### Detailed release notes are under the How to videos. 
+
+# Key features
+- The plugin saves drawings to your vault as a file with the *.excalidraw* file extension.
+- The plugin adds the following actions to the **command palette**:
+  - Create a new drawing
+  - Find and edit existing drawings in your vault, 
+  - Transclude (embed) a drawing into a document, and
+  - Export a drawing as PNG or SVG.
+- You can also use the **file explorer** in your vault to open existing Excalidraw files. 
+- Use the **ribbon button** to create a new drawing, CTRL+Click to open on a new page.
+- Open settings to set up
+  - a **default folder** for new drawings, 
+  - a **Template** by first creating a drawing, customizing it the way you like it, and specifying the file as the template in settings,
+  - Excalidraw to **automatically export SVG and/or PNG** files for your drawings, and to keep those in sync with your drawing,
+  - default width of embedded drawings 
+- You can also ustomize the **size and position of the embedded image** using the `[[image.excalidraw|100]]`, `[[image.excalidraw|100x100]]`, `[[image.excalidraw|100|left]]`, `[[image.excalidraw|right-wrap]]`, formatting options. `[[<filename.excalidraw>|<width>x<height>|<alignment>]]`. You can add your custom alignment via css. Any text that appears in `<alignment>` will be added as style to the SVG element and the wrapper DIV element. Check below and styles.css for more insight.
+- Includes full [Templater](https://silentvoid13.github.io/Templater/) and [Dataview](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/) support through ExcalidrawAutomate. Read detailed help + examples: [here](https://zsviczian.github.io/obsidian-excalidraw-plugin/)
+- REQUIRES AN OBSIDIAN SYNC SUBSCRIPTION: Temporary hack/workaround to enable Obsidian Sync for Excalidraw files. This enables almost real-time two-way sync for Excalidraw files between your devices. You can draw on your iPad with your pencil, on your Android with your stylus, and the image will be available in Obsidian on your desktop as well and vice versa. 
+
+# How to?
 Part 1: Intro to Obsidian-Excalidraw - Start a new drawing (3:12)
 
 [![Part 1: Intro to Obsidian-Excalidraw - Start a new drawing](https://user-images.githubusercontent.com/14358394/115983840-05797e80-a5a4-11eb-93cd-bae4b1973f72.jpg)](https://youtu.be/i-hIfY-Ecjg)
@@ -44,56 +53,115 @@ Part 6: Intro to Obsidian-Excalidraw: Embedding drawings (2:08)
 
 [![Part 6: Intro to Obsidian-Excalidraw: Embedding drawings](https://user-images.githubusercontent.com/14358394/115983954-bbdd6380-a5a4-11eb-9243-f0151451afcd.jpg)](https://youtu.be/JQeJ-Hh-xAI)
 
-## 1.0.6 and 1.0.7 update
+# Release Notes
+
+## 1.1.6
+[![Obsidian-Excalidraw 1.1.6 - Links](https://user-images.githubusercontent.com/14358394/119559279-bdb46580-bda2-11eb-88cb-7614dc452034.jpg)](https://youtu.be/FDsMH-aLw_I)
+
+## 1.1.5
+- The template will now restore stroke properties. This means you can set up defaults in your template for stroke color, stroke width, opacity, font family, font size, fill style, stroke style, etc. This also applies to ExcalidrawAutomate.
+- Added settings to customize the autogenerated filename
+- Minor fixes for occasional console.log errors.
+
+## 1.1.0
+- ALT+Enter and CTRL+ALT+Enter on the filename in edit mode will open up the Excalidraw editor. Click and CTRL+Click on the image in preview mode will also bring up the Excalidraw editor as expected.
+- I have also added two new Command Palette commands. Both create a new drawing and immediately embed it in the document you are editing, one will open the drawing in a new workspace pane, the other within the currently active pane.
+- [Ozan's Image in Editor Plugin](https://github.com/ozntel/oz-image-in-editor-obsidian)
+In a nice collaboration with Ozan, his Image in Editor plugin now supports Excalidraw. I recommend installing his plugin to display drawings also in Edit mode.
+
+### MIGRATION to 1.1.0
+I have added a Migration command to the Command Palette. When you select this, the program will run a search and replace for all the excalidraw codeblocks in your vault and will convert them to the new format.
+
+## 1.0.12 Freehand drawing
+- now includes the new freehand drawing features from Excalidraw.com
+- If you use Obsydian sync with Excalidraw sync, be sure to update all your devices to the new version, as the old excalidraw will simply delete the freehand drawn images and/or simply not show the drawing.
+
+### Temporary workaround - use it only if you are ok with hacky solutions
+- I implemented a temporary workaround to enable Obsidian Sync for Excalidraw files. This enables almost real-time two-way sync between your devices. You can draw on your iPad with your pencil, on your Android with your stylus, and the image will be available in Obsidian as well and vice versa. 
+- By enabling this feature Excalidraw will sync drawings to a sync folder where drawings are stored in an ".md" file. This will allow Obsidian sync to synchronize Excalidraw drawings as well... Whenever your drawing changes, the corresponding file in the sync folder will also get updated. Similarly, whenever a file is synchronized to the sync folder by Obsidian sync, Excalidraw will sync it with the .excalidraw file in your vault.
+- Because this is a temporary workaround until Obsidian sync is ready, I didn't implement extensive application logic to manage sync. Sync might get confused requiring some manual intervention.
+
+### QoL improvement
+- I added an autosave feature. Your active drawing gets saved every 30 seconds if you've made changes to it. Drawings otherwise get saved when the window loses focus, or when you close the drawing, etc. Autosave limits the risk of accidental data loss on mobiles when you "swipe out" Obsidian to close it.
+
+## 1.0.10 
+[![Obsidian-Excalidraw 1.0.10 update](https://user-images.githubusercontent.com/14358394/117579017-60a58800-b0f1-11eb-8553-7820964662aa.jpg)](https://youtu.be/W7pWXGIe4rQ)
+ 
+## 1.0.8 and 1.0.9 (minor fixes)  
+[![Obsidian-Excalidraw 1.0.8 update](https://user-images.githubusercontent.com/14358394/117492534-029e6680-af72-11eb-90a3-086e67e70c1c.jpg)](https://youtu.be/AtEhmHJjnxM)
+
+### QoL improvements
+- Adds context menu to File Explorer to create new drawings
+- Adds a new command to the palette: “Transclude (embed) the most recently edited Excalidraw drawing”
+- Automatically update file-links in transclusions when you rename or move your drawing
+- Saves drawing and updates all active pre-views when drawing loses focus
+- File is closed and removed when you select “Delete file” from more options
+- Saves drawing when exiting Obsidian
+- Fixes pen positioning bug with sliding panes after panes scroll
+
+### ExcalidrawAutomte full Templater and DataviewJS support
+You now have ultimate flexibility over your Excalidraw templates using Templater and Dataview.
+- Detailed documentation available [here](https://zsviczian.github.io/obsidian-excalidraw-plugin/)
+- I created few examples from the simple to the more complex
+	- Simple use-case: Creating a drawing using a custom template and following a file and folder naming convention of your choice.
+	- Complex use-case: Create a mindmap from a tabulated outline.
+  ![Drawing 2021-05-05 20 52 34](https://user-images.githubusercontent.com/14358394/117194124-00a69d00-ade4-11eb-8b75-5e18a9cbc3cd.png)
+ 
+## 1.0.6 and 1.0.7 
 [![1.0.6 Update](https://user-images.githubusercontent.com/14358394/116312909-58725200-a7ad-11eb-89b9-c67cb48ffebb.jpg)](https://youtu.be/ipZPbcP2B0M)
 
-### SVG styling when embedding using a code block
+### SVG styling when embedding
 - 1.0.7 adds further flexibility to styling
 - new formatting option for the code block embedding
 - Valid values: `left`, `right`, `left-wrap`, `right-wrap`... but anything after the last `|` character will be added to the class of the SVG element and the wrapper DIV element.
 Here is the corresponding CSS:
-```
-svg.excalidraw-svg-right-wrap {
+```css
+img.excalidraw-svg-right-wrap {
   float: right;
   margin: 0px 0px 20px 20px;
 }
 
-svg.excalidraw-svg-left-wrap {
+img.excalidraw-svg-left-wrap {
   float: left;
   margin: 0px 35px 20px 0px;
 }
 
-div.excalidraw-svg-right {
-  text-align: right;
+img.excalidraw-svg-right {
+  float: right;
 }
 
+img.excalidraw-svg-left {
+  float: left;
+}
+
+div.excalidraw-svg-right,
 div.excalidraw-svg-left {
-  text-align: left;
+  display: table;
+  width: 100%;
 }
 ```
 
-
-## Known issues
-- On mobile (iOS and Android): As you draw left to right it opens left sidebar. Draw right to left, opens right sidebar. Draw down, opens commands palette. So seems open is emulating the gestures, even when drawing towards the center. I understand that the issue will be resolved in the next release of Obsidian mobile. 
+# Known issues
 - I have seen two cases when adding a stencil library did not work. In both cases, the end solution was a reinstall of Obsidian. The root cause is not clear, but maybe because of  the incremental updates of Obsidian from an early version.
-- Sync does not support .excalidraw files. This issue will be addressed in a later release of Obsidian sync. Until then, here are two hacks you can play with: 
-  - You have the option to use OneDrive, Google Drive, iCloud, DropBox, etc. to sync your vault between devices.
-  - You can also use Obsidian Sync in conjunction with "Obsidian Git" (find it in community plugins). Be sure to set up git to ignore all files except for .excalidraw by adding the following to `.gitignore`. Obsidian Git does not work on mobile, but on Android you can use an app like MGIT to sync your `.excalidraw` files from/to the git repository.
-  ```
-  #ignore all kind of files
-  *.*
-  #except excalidraw files
-  !*.excalidraw
-  ```
-## Tips and tricks
-- If you want to sketch in fullscreen, I recommend installing the [Fullscreen Focus Mode](https://github.com/razumihin/obsidian-fullscreen-plugin) plugin.
+- Mobile support
+  - Positioning of the pen gets misaligned after you open the command palette.
+  - Partially mitigated in 1.0.10 by the introduction of autosave: Your drawing will not be saved when you terminate the mobile app by closing the Obsidian task. 
+### Resolved known issues:
+- Resolved with 1.0.10 Temporary workaround: 
+  - Sync does not support .excalidraw files. This issue will be addressed in a later release of Obsidian sync. Until then, you can use my temporary workaround. 
+- Resolved with Obsidian mobile 0.18: 
+  - On mobile (iOS and Android): As you draw left to right it opens left sidebar. Draw right to left, opens right sidebar. Draw down, opens commands palette. So seems open is emulating the gestures, even when drawing towards the center. 
 
-## Feedback, questions, ideas, problems
+# Tips and tricks
+- If you want to sketch in fullscreen, I recommend installing the [Fullscreen Focus Mode](https://github.com/razumihin/obsidian-fullscreen-plugin) plugin.
+- [Ozan's Image in Editor Plugin](https://github.com/ozntel/oz-image-in-editor-obsidian). In a nice collaboration with Ozan, his Image-in-Editor plugin now supports Excalidraw. I recommend installing his plugin to display drawings also in Edit mode.
+
+# Feedback, questions, ideas, problems
 Join the conversation about the Excalidraw plugin on [forum.obsidian.md](https://forum.obsidian.md/t/excalidraw-full-featured-sketching-plugin-in-obsidian)
 
 Please head over to [GitHub](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) to report a bug or request an enhancement.
 
-## Say Thank You
+# Say Thank You
 If you are enjoying Excalidraw then please support my work and enthusiasm by buying me a coffee on [https://ko-fi/zsolt](https://ko-fi.com/zsolt).
 
 Please also help spread the word by sharing about the Obsidian Excalidraw Plugin on Twitter, Reddit, or any other social media platform you regularly use. 

docs/API/attributes_functions_overview.md

@@ -0,0 +1,45 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Attributes and functions overview
+Here's the interface implemented by ExcalidrawAutomate:
+
+```javascript
+ExcalidrawAutomate: {
+  style: {
+    strokeColor: string;
+    backgroundColor: string;
+    angle: number;
+    fillStyle: FillStyle;
+    strokeWidth: number;
+    storkeStyle: StrokeStyle;
+    roughness: number;
+    opacity: number;
+    strokeSharpness: StrokeSharpness;
+    fontFamily: FontFamily;
+    fontSize: number;
+    textAlign: string;
+    verticalAlign: string;
+    startArrowHead: string;
+    endArrowHead: string;
+  }
+  canvas: {theme: string, viewBackgroundColor: string};
+  setFillStyle: Function;
+  setStrokeStyle: Function;
+  setStrokeSharpness: Function;
+  setFontFamily: Function;
+  setTheme: Function;
+  addRect: Function;
+  addDiamond: Function;
+  addEllipse: Function;
+  addText: Function;
+  addLine: Function;
+  addArrow: Function;
+  connectObjects: Function;
+  addToGroup: Function;
+  toClipboard: Function;
+  create: Function;
+  createPNG: Function;
+  createSVG: Function;
+  clear: Function;
+  reset: Function;
+};
+```

docs/API/canvas_style.md

@@ -0,0 +1,15 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Canvas style settings
+Sets the properties of the canvas. 
+
+### theme, setTheme()
+String. Valid values are "light" and "dark".
+
+`setTheme()` accepts a number:
+- 0: "light"
+- any other number: "dark"
+
+### viewBackgroundColor
+String. This is the fill color of an object. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
+
+Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.

docs/API/element_style.md

@@ -0,0 +1,91 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Element style settings
+As you will notice, some styles have setter functions. This is to help you navigate the allowed values for the property. You do not need to use the setter function however, you can use set the value directly as well.
+
+### strokeColor
+String. The color of the line. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
+
+Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings, or  e.g. `#FF0000` for red.
+
+### backgroundColor
+String. This is the fill color of an object. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
+
+Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.
+
+### angle
+Number. Rotation in radian. 90° == `Math.PI/2`.
+
+### fillStyle, setFillStyle()
+```typescript
+type FillStyle = "hachure" | "cross-hatch" | "solid";
+setFillStyle (val:number);
+```
+fillStyle is a string.
+
+`setFillStyle()` accepts a number:
+- 0: "hachure"
+- 1: "cross-hatch"
+- any other number: "solid"
+
+### strokeWidth
+Number, sets the width of the stroke.
+
+### strokeStyle, setStrokeStyle()
+```typescript
+type StrokeStyle = "solid" | "dashed" | "dotted";
+setStrokeStyle (val:number);
+```
+strokeStyle is a string. 
+
+`setStrokeStyle()` accepts a number:
+- 0: "solid"
+- 1: "dashed"
+- any other number: "dotted"
+
+### roughness
+Number. Called sloppiness in Excalidraw. Three values are accepted:
+- 0: Architect
+- 1: Artist
+- 2: Cartoonist
+
+### opacity
+Number between 0 and 100. The opacity of an object, both stroke and fill.
+
+### strokeSharpness, setStrokeSharpness()
+```typescript
+type StrokeSharpness = "round" | "sharp";
+setStrokeSharpness(val:nmuber);
+```
+strokeSharpness is a string.
+
+"round" lines are curvey, "sharp" lines break at the turning point.
+
+`setStrokeSharpness()` accepts a number:
+- 0: "round"
+- any other number: "sharp"
+
+### fontFamily, setFontFamily()
+Number. Valid values are 1,2 and 3.
+
+`setFontFamily()` will also accept a number and return the name of the font.
+- 1: "Virgil, Segoe UI Emoji"
+- 2: "Helvetica, Segoe UI Emoji"
+- 3: "Cascadia, Segoe UI Emoji"
+
+### fontSize
+Number. Default value is 20 px
+
+### textAlign
+String. Alignment of the text horizontally. Valid values are "left", "center", "right".
+
+This is relevant when setting a fix width using the `addText()` function.
+
+### verticalAlign
+String. Alignment of the text vertically. Valid values are "top" and "middle".
+
+This is relevant when setting a fix height using the `addText()` function.
+
+### startArrowHead, endArrowHead
+String. Valid values are "arrow", "bar", "dot", and "none". Specifies the beginning and ending of an arrow.
+
+This is relavant when using the `addArrow()` and the `connectObjects()` functions.

docs/API/introduction.md

@@ -0,0 +1,58 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Introduction to the API
+You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend starting your Automate scripts with the following code.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+const ea = ExcalidrawAutomate;
+ea.reset();
+```
+
+The first line creates a practical constant so you can avoid writing ExcalidrawAutomate 100x times.
+
+The second line resets ExcalidrawAutomate to defaults. This is important as you will not know which template you executed before, thus you won't know what state you left Excalidraw in.
+
+### Basic logic of using Excalidraw Automate
+1. Set the styling of the elements you want to draw
+2. Add elements. As you add elements, each new element is added one layer above the previous, thus in case of overlapping objects the later one will be on the top of the prior one.
+3. Call `await ea.create();` to instantiate the drawing
+
+You can change styling between adding different elements. My logic for separating element styling and creation is based on the assumption that you will probably set a stroke color, stroke style, stroke roughness, etc. and draw most of your elements using this. There would be no point in setting all these parameters each time you add an element.
+
+### Before we dive deeper, here are two a simple example scripts
+#### Create a new drawing with custom name, in a custom folder, using a template
+This simple script gives you significant additional flexibility over Excalidraw Plugin settings to name your drawings, place them into folders, and to apply templates.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  await ea.create({
+    filename    : tp.date.now("HH.mm"), 
+    foldername  : tp.date.now("YYYY-MM-DD"),
+    templatePath: "Excalidraw/Template1.excalidraw",
+    onNewPane   : false
+  });
+%>
+```
+
+#### Create a simple drawing
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.addRect(-150,-50,450,300);
+  ea.addText(-100,70,"Left to right");
+  ea.addArrow([[-100,100],[100,100]]);
+
+  ea.style.strokeColor = "red";
+  ea.addText(100,-30,"top to bottom",{width:200,textAligh:"center"});
+  ea.addArrow([[200,0],[200,200]]);
+  await ea.create();
+%>
+```
+The script will generate the following drawing:
+
+![FristDemo](https://user-images.githubusercontent.com/14358394/116825643-6e5a8b00-ab90-11eb-9e3a-37c524620d0d.png)

docs/API/objects.md

@@ -0,0 +1,65 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Adding objects
+These functions will add objects to your drawing. The canvas is infinite, and it accepts negative and positive X and Y values. X values increase left to right, Y values increase top to bottom.
+
+![coordinates](https://user-images.githubusercontent.com/14358394/116825632-6569b980-ab90-11eb-827b-ada598e91e46.png)
+
+### addRect(), addDiamond(), addEllipse()
+```typescript
+addRect(topX:number, topY:number, width:number, height:number):string
+addDiamond(topX:number, topY:number, width:number, height:number):string
+addEllipse(topX:number, topY:number, width:number, height:number):string
+```
+Returns the `id` of the object. The `id` is required when connecting objects with lines. See later.
+
+### addText()
+```typescript
+addText(topX:number, topY:number, text:string, formatting?:{width:number, height:number,textAlign: string, verticalAlign:string, box: boolean, boxPadding: number}):string
+```
+
+Adds text to the drawing. 
+
+Formatting parameters are optional:
+- If `width` and `height` are not specified, the function will calculate the width and height based on the fontFamily, the fontSize and the text provided.
+- In case you want to position a text in the center compared to other elements on the drawing, you can provide a fixed height and width, and you can also specify `textAlign` and `verticalAlign` as described above. e.g.: `{width:500, textAlign:"center"}`
+- If you want to add a box around the text, set `{box:true}`
+
+Returns the `id` of the object. The `id` is required when connecting objects with lines. See later. If `{box:true}` then returns the id of the enclosing box.
+
+### addLine()
+```typescript
+addLine(points: [[x:number,y:number]]):void
+```
+Adds a line following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if `strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".
+
+### addArrow()
+```typescript
+addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void
+```
+
+Adds an arrow following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if element `style.strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".
+
+`startArrowHead` and `endArrowHead` specify the type of arrow head to use, as described above. Valid values are "none", "arrow", "dot", and "bar". e.g. `{startArrowHead: "dot", endArrowHead: "arrow"}`
+
+`startObjectId` and `endObjectId` are the object id's of connected objects. I recommend using `connectObjects` instead calling addArrow() for the purpose of connecting objects.
+
+### connectObjects()
+```typescript
+declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
+connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints: number,startArrowHead:string,endArrowHead:string, padding: number}):void
+```
+Connects two objects with an arrow.
+
+`objectA` and `objectB` are strings. These are the ids of the objects to connect. These IDs are returned by addRect(), addDiamond(), addEllipse() and addText() when creating those objects.
+
+`connectionA` and `connectionB` specify where to connect on the object. Valid values are: "top", "bottom", "left", and "right".
+
+`numberOfPoints` set the number of interim break points for the line. Default value is zero, meaning there will be no breakpoint in between the start and the end points of the arrow. When moving objects on the drawing, these breakpoints will influence how the line is rerouted by Excalidraw.
+
+`startArrowHead` and `endArrowHead` work as described for `addArrow()` above.
+
+### addToGroup()
+```typescript
+addToGroup(objectIds:[]):void
+```
+Groups objects listed in `objectIds`.

docs/API/utility.md

@@ -0,0 +1,43 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Utility functions
+### clear()
+`clear()` will clear objects from cache, but will retain element style settings.
+
+### reset()
+`reset()` will first call `clear()` and then reset element style to defaults.
+
+### toClipboard()
+```typescript
+async toClipboard(templatePath?:string)
+```
+Places the generated drawing to the clipboard. Useful when you don't want to create a new drawing, but want to paste additional items onto an existing drawing.
+
+### create()
+```typescript
+async create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean})
+```
+Creates the drawing and opens it.
+
+`filename` is the filename without extension of the drawing to be created. If `null`, then Excalidraw will generate a filename.
+
+`foldername` is the folder where the file should be created. If `null` then the default folder for new drawings will be used according to Excalidraw settings.
+
+`templatePath` the filename including full path and extension for a template file to use. This template file will be added as the base layer, all additional objects added via ExcalidrawAutomate will appear on top of elements in the template. If `null` then no template will be used, i.e. an empty white drawing will be the base for adding objects.
+
+`onNewPane` defines where the new drawing should be created. `false` will open the drawing on the current active leaf. `true` will open the drawing by vertically splitting the current leaf.
+
+Example:
+```javascript
+create({filename:"my drawing", foldername:"myfolder/subfolder/", templatePath: "Excalidraw/template.excalidraw", onNewPane: true});
+```
+### createSVG()
+```typescript
+async createSVG(templatePath?:string)
+```
+Returns an HTML SVGSVGElement containing the generated drawing.
+
+### createPNG()
+```typescript
+async createPNG(templatePath?:string)
+```
+Returns a blob containing a PNG image of the generated drawing.

docs/Examples/apply_template.md

@@ -0,0 +1,25 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Applying an Excalidraw Template to a New Drawing
+This example is similar to the one in the introduction, only rotated 90°, and using a template, plus specifying a filename and folder to save the drawing, and opening the new drawing in a new pane.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.style.angle = Math.PI/2; 
+  ea.style.strokeWidth = 3.5;
+  ea.addRect(-150,-50,450,300);
+  ea.addText(-100,70,"Left to right");
+  ea.addArrow([[-100,100],[100,100]]);
+
+  ea.style.strokeColor = "red";
+  await ea.addText(100,-30,"top to bottom",{width:200,textAlign:"center"});
+  ea.addArrow([[200,0],[200,200]]);
+  await ea.create({
+    filename    :"My Drawing",
+    foldername  :"myfolder/fordemo/",
+    templatePath:"Excalidraw/Template2.excalidraw",
+    onNewPane   :true});
+%>
+```

docs/Examples/connect_objects.md

@@ -0,0 +1,18 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Connect Objects
+This [Templater](https://github.com/SilentVoid13/Templater) template demonstrates how to connect two objects using ExcalidrawAutomate.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.addText(-130,-100,"Connecting two objects");
+  const a = ea.addRect(-100,-100,100,100);
+  const b = ea.addEllipse(200,200,100,100);
+  ea.connectObjects(a,"bottom",b,"left",{numberOfPoints: 2}); //see how the line breaks differently when moving objects around
+  ea.style.strokeColor = "red";
+  ea.connectObjects(a,"right",b,"top",1);
+  await ea.create();
+%>
+```

docs/Examples/dataviewjs_familytree.md

@@ -0,0 +1,67 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Family tree from Tasklist using dataviewjs
+This is similar to the mindmap script using dataviewjs, but the output is rendered vertically.
+
+### Output
+![image](https://user-images.githubusercontent.com/14358394/117549637-d3ecc280-b03b-11eb-952a-840a9a75b6ca.png)
+
+### Input file
+Task List looks like:
+```markdown
+- [ ] OBSIDIAN
+    - [ ] Silver
+        - [ ] PawPaw Silv
+        - [ ] MawMaw Silv
+    - [ ] Licat
+        - [ ] PeePaw Li
+        - [ ] MeeMaw Li
+```
+
+### dataviewjs script
+Code to render the excalidraw looks like:
+```javascript
+function crawl(subtasks) {
+  let size = subtasks.length > 0 ? 0 : 1; //if no children then a leaf with size 1
+  for (let task of subtasks) {
+    task["size"] = crawl(task.subtasks);
+    size += task.size;
+  }
+  return size;
+}
+
+const tasks = dv.page("Demo.md").file.tasks[0];
+tasks["size"] = crawl(tasks.subtasks);
+
+const width = 300;
+const height = 100;
+const ea = ExcalidrawAutomate;
+ea.reset();
+
+function buildMindmap(subtasks, depth, offset, parentObjectID) {
+  if (subtasks.length == 0) return;
+  let task;
+  
+  for (let i = 0; i < subtasks.length; i++) {
+  task = subtasks[i]
+  if (depth == 1) ea.style.strokeColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6,"0");
+    task["objectID"] = ea.addText((task.size/2+offset)*width,depth*height,task.text,{box:true})
+    ea.connectObjects(parentObjectID,"top",task.objectID,"bottom",{startArrowHead: 'arrow', endArrowHead: 'dot'});
+    if (i >= 1) {
+            ea.connectObjects(subtasks[i-1]['objectID'],"right",task.objectID,"left", {endArrowHead: 'none'});
+    }
+
+    buildMindmap(task.subtasks, depth-1,offset,task.objectID);
+    offset += task.size/1.5;
+  }
+ 
+}
+
+tasks["objectID"] = ea.addText(width*1.5,width,tasks.text,{box:true, textAlign:"center"});    
+buildMindmap(tasks.subtasks, 2, 0, tasks.objectID);
+
+(async ()=> {
+  const svg = await ea.createSVG(); 
+  const el=document.querySelector("div.block-language-dataviewjs"); 
+  el.appendChild(svg); 
+})();
+```

docs/Examples/dataviewjs_mindmap.md

@@ -0,0 +1,60 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Mindmap from Tasklist using dataviewjs
+This is similar to the mindmap script using templater, but because dataview already returns tasks in a tree, it is slightly simpler
+
+### Output
+![image](https://user-images.githubusercontent.com/14358394/117548665-71dd8e80-b036-11eb-8a45-4169fdd7cc05.png)
+
+### Input file
+The input file is `Demo.md` with the following contents:
+```markdown
+- [ ] Root task
+    - [ ] task 1.1
+    - [ ] task 1.2
+        - [ ] task 1.2.1
+        - [ ] task 1.2.2
+    - [ ] task 1.3
+        - [ ] task 1.3.1
+```
+
+### dataviewjs script
+The `dataviewjs` script looks like this: 
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+function crawl(subtasks) {
+  let size = subtasks.length > 0 ? 0 : 1; //if no children then a leaf with size 1
+  for (let task of subtasks) {
+    task["size"] = crawl(task.subtasks);
+    size += task.size;
+  }
+  return size;
+}
+
+const tasks = dv.page("Demo.md").file.tasks[0];
+tasks["size"] = crawl(tasks.subtasks);
+
+const width = 300;
+const height = 100;
+const ea = ExcalidrawAutomate;
+ea.reset();
+
+function buildMindmap(subtasks, depth, offset, parentObjectID) {
+  if (subtasks.length == 0) return;
+  for (let task of subtasks) {
+    if (depth == 1) ea.style.strokeColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6,"0");
+    task["objectID"] = ea.addText(depth*width,(task.size/2+offset)*height,task.text,{box:true})
+    ea.connectObjects(parentObjectID,"right",task.objectID,"left",{startArrowHead: 'dot'});
+    buildMindmap(task.subtasks, depth+1,offset,task.objectID);
+    offset += task.size;
+  }
+}
+
+tasks["objectID"] = ea.addText(0,(tasks.size/2)*height,tasks.text,{box:true});    
+buildMindmap(tasks.subtasks, 1, 0, tasks.objectID);
+
+(async ()=> {
+  const svg = await ea.createSVG(); 
+  const el=document.querySelector("div.block-language-dataviewjs"); 
+  el.appendChild(svg); 
+})();
+```

docs/Examples/insert_new_drawing.md

@@ -0,0 +1,23 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Insert new drawing into currently edited document
+This [Templater](https://github.com/SilentVoid13/Templater) template will prompt you for the title of the drawing. It will create a new drawing with the provided title, and in the folder of the document you were editing. It will then transclude the new drawing at the cursor location and open the new drawing in a new workspace leaf by splitting the current leaf.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const defaultTitle = tp.date.now("HHmm")+' '+tp.file.title;
+  const title = await tp.system.prompt("Title of the drawing?", defaultTitle);
+  const folder = tp.file.folder(true);
+  const transcludePath = (folder== '/' ? '' : folder + '/') + title + '.excalidraw';
+  tR = '![['+transcludePath+']]';
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.setTheme(1); //set Theme to dark
+  await ea.create({
+    filename : title,
+    foldername : folder,
+    //templatePath: 'Excalidraw/Template.excalidraw', //uncomment if you want to use a template
+    onNewPane : true
+  });
+%>
+```

docs/Examples/templater_mindmap.md

@@ -0,0 +1,97 @@
+# [◀ Excalidraw Automate How To](../readme.md)
+## Generating a simple mindmap from a text outline
+This is a slightly more elaborate example. This will generate an a mindmap from a tabulated outline.
+
+### Output
+![Drawing 2021-05-05 20 52 34](https://user-images.githubusercontent.com/14358394/117194124-00a69d00-ade4-11eb-8b75-5e18a9cbc3cd.png)
+
+### Input file
+Example input:
+```
+- Test 1
+	- Test 1.1
+- Test 2
+	- Test 2.1
+	- Test 2.2 
+		- Test 2.2.1
+		- Test 2.2.2
+		- Test 2.2.3
+			- Test 2.2.3.1
+- Test 3
+	- Test 3.1
+```
+
+### Templater script
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+const IDX = Object.freeze({"depth":0, "text":1, "parent":2, "size":3, "children": 4, "objectId":5});
+
+//check if an editor is the active view
+const editor = this.app.workspace.activeLeaf?.view?.editor;
+if(!editor) return;
+
+//initialize the tree with the title of the document as the first element
+let tree = [[0,this.app.workspace.activeLeaf?.view?.getDisplayText(),-1,0,[],0]];
+const linecount = editor.lineCount();
+
+//helper function, use regex to calculate indentation depth, and to get line text
+function getLineProps (i) {
+  props = editor.getLine(i).match(/^(\t*)-\s+(.*)/);
+  return [props[1].length+1, props[2]];
+}
+
+//a vector that will hold last valid parent for each depth
+let parents = [0];
+
+//load outline into tree
+for(i=0;i<linecount;i++) {
+  [depth,text] = getLineProps(i);
+  if(depth>parents.length) parents.push(i+1);
+  else parents[depth] = i+1;
+  tree.push([depth,text,parents[depth-1],1,[]]);
+  tree[parents[depth-1]][IDX.children].push(i+1);
+}
+
+//recursive function to crawl the tree and identify height aka. size of each node
+function crawlTree(i) {
+  if(i>linecount) return 0;
+  size = 0;
+  if((i+1<=linecount && tree[i+1][IDX.depth] <= tree[i][IDX.depth])|| i == linecount) { //I am a leaf
+    tree[i][IDX.size] = 1; 
+    return 1; 
+  }
+  tree[i][IDX.children].forEach((node)=>{ 
+    size += crawlTree(node);
+  });
+  tree[i][IDX.size] = size; 
+  return size;   
+}
+
+crawlTree(0);
+
+//Build the mindmap in Excalidraw
+const width = 300;
+const height = 100;
+const ea = ExcalidrawAutomate;
+ea.reset();
+
+//stores position offset of branch/leaf in height units
+offsets = [0];
+
+for(i=0;i<=linecount;i++) {
+  depth = tree[i][IDX.depth];
+  if (depth == 1) ea.style.strokeColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6,"0");
+  tree[i][IDX.objectId] = ea.addText(depth*width,((tree[i][IDX.size]/2)+offsets[depth])*height,tree[i][IDX.text],{box:true});  
+  //set child offset equal to parent offset
+  if((depth+1)>offsets.length) offsets.push(offsets[depth]);
+  else offsets[depth+1] = offsets[depth];
+  offsets[depth] += tree[i][IDX.size];
+  if(tree[i][IDX.parent]!=-1) {
+    ea.connectObjects(tree[tree[i][IDX.parent]][IDX.objectId],"right",tree[i][IDX.objectId],"left",{startArrowHead: 'dot'});
+  }
+}
+
+await ea.create({onNewPane: true});
+%>
+```

docs/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-leap-day

docs/readme.md

@@ -0,0 +1,35 @@
+# Excalidraw Automate How To
+
+Excalidraw Automate allows you to create Excalidraw drawings using the [Templater](https://silentvoid13.github.io/Templater/docs/) plugin, and to generate embedded SVG and PNG images using [DataviewJS](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/)
+
+With a little work, using Excalidraw Automate you can generate simple mindmaps, build a family tree, fill out SVG forms, create customized charts, etc. based on documents in your vault.
+![image](https://user-images.githubusercontent.com/14358394/117549619-bae41180-b03b-11eb-968d-c909e79a7524.png)
+
+## API documentation
+- [Introduction to the API](API/introduction.md)
+- [Overview of Attributes and Functions](API/attributes_functions_overview.md)
+- [Element Sytle](API/element_style.md)
+- [Canvas Style](API/canvas_style.md)
+- [Adding Objects](API/objects.md)
+- [Utility Functions](API/utility.md)
+
+
+## Examples
+- **Templater** 
+  - [Insert new drawing into currently edited document](Examples/insert_new_drawing.md)
+  - [Connect objects](Examples/connect_objects.md)
+  - [Apply an Excalidraw template](Examples/apply_template.md)
+  - [Mindmap with Templater](Examples/templater_mindmap.md)
+
+- **Dataview** 
+  - [Mindmap with Dataview](Examples/dataviewjs_mindmap.md)
+  - [Family tree with Dataview](Examples/dataviewjs_familytree.md)
+
+## If you are enjoying the Obsidian Excalidraw Plugin...
+Help spread the word by sharing about the Plugin on social media.
+
+You can find me on Twitter [@zsviczian](https://twitter.com/zsviczian), and on my blog [zsolt.blog](https://zsolt.blog).
+
+[<img style="float:left" src="https://user-images.githubusercontent.com/14358394/115450238-f39e8100-a21b-11eb-89d0-fa4b82cdbce8.png" width="150">](https://ko-fi.com/zsolt)
+
+

manifest.json

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

package.json

@@ -11,8 +11,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@excalidraw/excalidraw": "0.7.0",
-    "aakansha-excalidraw": "0.7.0-draft",
+    "@excalidraw/excalidraw": "0.8.0",
+    "aakansha-excalidraw": "0.8.0-bec34f2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-scripts": "4.0.1"

src/ExcalidrawLinkIndex.ts

@@ -0,0 +1,119 @@
+import {TFile,TAbstractFile, App} from 'obsidian';
+import {EXCALIDRAW_FILE_EXTENSION } from './constants';
+
+export default class ExcalidrawLinkIndex {
+  private app: App;
+  private link2ex: Map<string, Set<string>>;
+  private ex2link: Map<string, Set<string>>;
+
+  constructor(app: App) {
+    this.app = app;
+    this.link2ex = new Map<string,Set<string>>(); //file is referenced by set of excalidraw drawings
+    this.ex2link = new Map<string,Set<string>>(); //excalidraw drawing references these files
+  }
+
+  async reloadIndex() {
+    await this.initialize();
+  }
+
+  async initialize(): Promise<void> {
+    const link2ex = new Map<string,Set<string>>(); 
+    const ex2link = new Map<string,Set<string>>();
+    const timeStart = new Date().getTime();
+    let counter=0;
+
+    const files = this.app.vault.getFiles().filter((f)=>f.extension==EXCALIDRAW_FILE_EXTENSION);
+    for (const file of files) {
+      const links = await this.parseLinks(file);
+      if (links.size > 0) {
+        counter += links.size;
+        ex2link.set(file.path, links);
+        links.forEach((link)=>{
+          if(link2ex.has(link)) link2ex.set(link,link2ex.get(link).add(file.path));
+          else link2ex.set(link,(new Set<string>()).add(file.path));
+        });
+      }
+    }
+
+    this.link2ex = link2ex;
+    this.ex2link = ex2link;
+    const totalTimeMs = new Date().getTime() - timeStart;
+    console.log(
+      `Excalidraw: Parsed ${files.length} drawings and indexed ${counter} links 
+       (${totalTimeMs / 1000.0}s)`,
+    );
+    this.registerEventHandlers();
+  }
+
+  private indexAbstractFile(file: TAbstractFile) {
+    if (!(file instanceof TFile)) return;
+    if (file.extension != EXCALIDRAW_FILE_EXTENSION) return;
+    this.indexFile(file as TFile);
+  }
+
+  private indexFile(file: TFile) {
+    this.clearIndex(file.path);
+    this.parseLinks(file).then((links) => {
+      if(links.size == 0) return;
+      this.ex2link.set(file.path, links);
+      links.forEach((link)=>{
+        if(this.link2ex.has(link)) {
+          this.link2ex.set(link,this.link2ex.get(link).add(file.path));
+        }
+        else this.link2ex.set(link,(new Set<string>()).add(file.path));
+      });
+    });
+  }
+
+  private clearIndex(path: string) {
+    if(!this.ex2link.get(path)) return;
+    this.ex2link.get(path).forEach((ex)=> {
+      const files = this.link2ex.get(ex);
+      files.delete(path);
+      if(files.size>0) this.link2ex.set(ex,files);
+      else this.link2ex.delete(ex);
+    });
+    this.ex2link.delete(path);
+  }
+
+  public static getLinks(textElements:any,filepath:string,app:App): Set<string>{
+    const links = new Set<string>();
+    if(!textElements) return links;
+    let parts, f, text;
+    for (const element of textElements) {
+      text = element.text;
+      parts = text?.matchAll(/\[\[(.+)]]/g).next();
+      if(parts && parts.value) text = parts.value[1];
+      if(!text?.match(/^\w+:\/\//) && !text?.match(/[<>:"\\|?*]/g)) { //not a hyperlink and not invalid filename
+        f = app.metadataCache.getFirstLinkpathDest(text,filepath); 
+        if(f) {
+          links.add(f.path);
+        }
+      }
+    }
+    return links;
+  }
+
+  private async parseLinks(file: TFile): Promise<Set<string>> {
+    const fileContents = await this.app.vault.cachedRead(file);
+    const textElements = JSON.parse(fileContents)?.elements?.filter((el:any)=> el.type=="text");
+    return ExcalidrawLinkIndex.getLinks(textElements,file.path,this.app);
+  }
+
+  private registerEventHandlers() {
+    this.app.vault.on('create', (file: TAbstractFile) => {
+      this.indexAbstractFile(file);
+    });
+    this.app.vault.on('modify', (file: TAbstractFile) => {
+      this.indexAbstractFile(file);
+    });
+    this.app.vault.on('delete', (file: TAbstractFile) => {
+      this.clearIndex(file.path);
+    });
+    // We could simply change the references to the old path, but parsing again does the trick as well
+    this.app.vault.on('rename', (file: TAbstractFile, oldPath: string) => {
+      this.clearIndex(oldPath);
+      this.indexAbstractFile(file);
+    });
+  }
+}

src/ExcalidrawTemplate.ts

@@ -6,12 +6,13 @@ import {
   StrokeSharpness,
   FontFamily,
 } from "@excalidraw/excalidraw/types/element/types";
-import {nanoid} from "nanoid";
+import {customAlphabet} from "nanoid";
 import {
   normalizePath,
   parseFrontMatterAliases,
   TFile
 } from "obsidian"
+import ExcalidrawView from "./ExcalidrawView"
 
 declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
 
@@ -43,7 +44,6 @@ export interface ExcalidrawAutomate extends Window {
     setStrokeSharpness: Function;
     setFontFamily: Function;
     setTheme: Function;
-    create: Function;
     addRect: Function;
     addDiamond: Function;
     addEllipse: Function;
@@ -51,13 +51,18 @@ export interface ExcalidrawAutomate extends Window {
     addLine: Function;
     addArrow: Function;
     connectObjects: Function;
+    addToGroup: Function;
+    toClipboard: Function;
+    create: Function;
+    createPNG: Function;
+    createSVG: Function;
     clear: Function;
     reset: Function;
   };
 }
 
 declare let window: ExcalidrawAutomate;
-
+const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',8);
 export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
   window.ExcalidrawAutomate = {
     plugin: plugin,
@@ -136,31 +141,109 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
           this.canvas.theme = "light";
           return "light";
         default:
-          this.canvas = "dark";
+          this.canvas.theme = "dark";
           return "dark";
       }      
     },
-    async create(filename?: string, foldername?:string, templatePath?:string, onNewPane: boolean = false) {
-      let elements = templatePath ? (await getTemplate(templatePath)).elements : [];
+    addToGroup(objectIds:[]):void {
+      const id = nanoid();
+      objectIds.forEach((objectId)=>{
+        this.elementsDict[objectId]?.groupIds?.push(id);
+      });
+    },
+    async toClipboard(templatePath?:string) {
+      const template = templatePath ? (await getTemplate(templatePath)) : null;
+      let elements = template ? template.elements : [];
+      for (let i=0;i<this.elementIds.length;i++) {
+        elements.push(this.elementsDict[this.elementIds[i]]);
+      }
+      navigator.clipboard.writeText(
+        JSON.stringify({
+          "type":"excalidraw/clipboard",
+          "elements": elements,
+      }));
+    },
+    async create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean}) {
+      const template = params?.templatePath ? (await getTemplate(params.templatePath)) : null;
+      let elements = template ? template.elements : [];
       for (let i=0;i<this.elementIds.length;i++) {
         elements.push(this.elementsDict[this.elementIds[i]]);
       }
       plugin.createDrawing(
-        filename ? filename + '.excalidraw' : this.plugin.getNextDefaultFilename(),
-        onNewPane,
-        foldername ? foldername : this.plugin.settings.folder,
-        (()=>{
-          return JSON.stringify({
-            "type": "excalidraw",
-            "version": 2,
-            "source": "https://excalidraw.com",
-            "elements": elements,
-            "appState": {
-              "theme": this.canvas.theme,
-              "viewBackgroundColor": this.canvas.viewBackgroundColor
-            }
-          });
-      })());  
+        params?.filename ? params.filename + '.excalidraw' : this.plugin.getNextDefaultFilename(),
+        params?.onNewPane ? params.onNewPane : false,
+        params?.foldername ? params.foldername : this.plugin.settings.folder,
+        JSON.stringify({
+          type: "excalidraw",
+          version: 2,
+          source: "https://excalidraw.com",
+          elements: elements,
+          appState: {
+            theme: template ? template.appState.theme : this.canvas.theme,
+            viewBackgroundColor: template? template.appState.viewBackgroundColor : this.canvas.viewBackgroundColor,
+            currentItemStrokeColor: template? template.appState.currentItemStrokeColor : this.style.strokeColor,
+            currentItemBackgroundColor: template? template.appState.currentItemBackgroundColor : this.style.backgroundColor,
+            currentItemFillStyle: template? template.appState.currentItemFillStyle : this.style.fillStyle,
+            currentItemStrokeWidth: template? template.appState.currentItemStrokeWidth : this.style.strokeWidth,
+            currentItemStrokeStyle: template? template.appState.currentItemStrokeStyle : this.style.strokeStyle,
+            currentItemRoughness: template? template.appState.currentItemRoughness : this.style.roughness,
+            currentItemOpacity: template? template.appState.currentItemOpacity : this.style.opacity,
+            currentItemFontFamily: template? template.appState.currentItemFontFamily : this.style.fontFamily,
+            currentItemFontSize: template? template.appState.currentItemFontSize : this.style.fontSize,
+            currentItemTextAlign: template? template.appState.currentItemTextAlign : this.style.textAlign,
+            currentItemStrokeSharpness: template? template.appState.currentItemStrokeSharpness : this.style.strokeSharpness,
+            currentItemStartArrowhead: template? template.appState.currentItemStartArrowhead: this.style.startArrowHead,
+            currentItemEndArrowhead: template? template.appState.currentItemEndArrowhead : this.style.endArrowHead,
+            currentItemLinearStrokeSharpness: template? template.appState.currentItemLinearStrokeSharpness : this.style.strokeSharpness,
+          }
+        })
+      );  
+    },
+    async createSVG(templatePath?:string) {
+      const template = templatePath ? (await getTemplate(templatePath)) : null;
+      let elements = template ? template.elements : [];
+      for (let i=0;i<this.elementIds.length;i++) {
+        elements.push(this.elementsDict[this.elementIds[i]]);
+      }
+      return ExcalidrawView.getSVG(
+        JSON.stringify({
+          "type": "excalidraw",
+          "version": 2,
+          "source": "https://excalidraw.com",
+          "elements": elements,
+          "appState": {
+            "theme": template ? template.appState.theme : this.canvas.theme,
+            "viewBackgroundColor": template? template.appState.viewBackgroundColor : this.canvas.viewBackgroundColor
+          }
+        }),
+        {
+          withBackground: plugin.settings.exportWithBackground, 
+          withTheme: plugin.settings.exportWithTheme
+        }
+      )     
+    },
+    async createPNG(templatePath?:string) {
+      const template = templatePath ? (await getTemplate(templatePath)) : null;
+      let elements = template ? template.elements : [];
+      for (let i=0;i<this.elementIds.length;i++) {
+        elements.push(this.elementsDict[this.elementIds[i]]);
+      }
+      return ExcalidrawView.getPNG(
+        JSON.stringify({
+          "type": "excalidraw",
+          "version": 2,
+          "source": "https://excalidraw.com",
+          "elements": elements,
+          "appState": {
+            "theme": template ? template.appState.theme : this.canvas.theme,
+            "viewBackgroundColor": template? template.appState.viewBackgroundColor : this.canvas.viewBackgroundColor
+          }
+        }),
+        {
+          withBackground: plugin.settings.exportWithBackground, 
+          withTheme: plugin.settings.exportWithTheme
+        }
+      )  
     },
     addRect(topX:number, topY:number, width:number, height:number):string {
       const id = nanoid();
@@ -180,19 +263,27 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       this.elementsDict[id] = boxedElement(id,"ellipse",topX,topY,width,height);
       return id;
     },
-    async addText(topX:number, topY:number, text:string, width?:number, height?:number,textAlign?: string, verticalAlign?:string):Promise<string> {
+    addText(topX:number, topY:number, text:string, formatting?:{width:number, height:number,textAlign: string, verticalAlign:string, box: boolean, boxPadding: number}):string {
       const id = nanoid();    
-      const {w, h, baseline} = await measureText(text);
+      const {w, h, baseline} = measureText(text);
+      const width = formatting?.width ? formatting.width : w;
+      const height = formatting?.height ? formatting.height : h;
       this.elementIds.push(id);
       this.elementsDict[id] = {
         text: text,
         fontSize: window.ExcalidrawAutomate.style.fontSize,
         fontFamily: window.ExcalidrawAutomate.style.fontFamily,
-        textAlign: textAlign ? textAlign : window.ExcalidrawAutomate.style.textAlign,
-        verticalAlign: verticalAlign ? verticalAlign : window.ExcalidrawAutomate.style.verticalAlign,
+        textAlign: formatting?.textAlign ? formatting.textAlign : window.ExcalidrawAutomate.style.textAlign,
+        verticalAlign: formatting?.verticalAlign ? formatting.verticalAlign : window.ExcalidrawAutomate.style.verticalAlign,
         baseline: baseline,
-        ... boxedElement(id,"text",topX,topY,width ? width:w, height ? height:h)
+        ... boxedElement(id,"text",topX,topY,width,height)
       };
+      if(formatting?.box) {
+        const boxPadding = formatting?.boxPadding ? formatting.boxPadding : 10;
+        const boxId = this.addRect(topX-boxPadding,topY-boxPadding,width+2*boxPadding,height+2*boxPadding);
+        this.addToGroup([id,boxId])
+        return boxId; 
+      }
       return id;
     },
     addLine(points: [[x:number,y:number]]):void {
@@ -209,36 +300,38 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         ... boxedElement(id,"line",box.x,box.y,box.w,box.h)
       };
     },
-    addArrow(points: [[x:number,y:number]],startArrowHead?:string,endArrowHead?:string,startBinding?:string,endBinding?:string):void {
+    addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void {
       const box = getLineBox(points);
       const id = nanoid();
       this.elementIds.push(id);
       this.elementsDict[id] = {
         points: normalizeLinePoints(points),
         lastCommittedPoint: null,
-        startBinding: {elementId:startBinding,focus:0.1,gap:4},
-        endBinding: {elementId:endBinding,focus:0.1,gap:4},
-        startArrowhead: startArrowHead ? startArrowHead : this.style.startArrowHead,
-        endArrowhead: endArrowHead ? endArrowHead : this.style.endArrowHead,
+        startBinding: {elementId:formatting?.startObjectId,focus:0.1,gap:4},
+        endBinding: {elementId:formatting?.endObjectId,focus:0.1,gap:4},
+        startArrowhead: formatting?.startArrowHead ? formatting.startArrowHead : this.style.startArrowHead,
+        endArrowhead: formatting?.endArrowHead ? formatting.endArrowHead : this.style.endArrowHead,
         ... boxedElement(id,"arrow",box.x,box.y,box.w,box.h)
       };
-      if(startBinding) this.elementsDict[startBinding].boundElementIds.push(id);
-      if(endBinding) this.elementsDict[endBinding].boundElementIds.push(id);
+      if(formatting?.startObjectId) this.elementsDict[formatting.startObjectId].boundElementIds.push(id);
+      if(formatting?.endObjectId) this.elementsDict[formatting.endObjectId].boundElementIds.push(id);
     },
-    connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, numberOfPoints: number = 1,startArrowHead?:string,endArrowHead?:string):void {
+    connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints: number,startArrowHead:string,endArrowHead:string, padding: number}):void {
       if(!(this.elementsDict[objectA] && this.elementsDict[objectB])) {
         return;
       }
+      const padding = formatting?.padding ? formatting.padding : 10;
+      const numberOfPoints = formatting?.numberOfPoints ? formatting.numberOfPoints : 0;
       const getSidePoints = (side:string, el:any) => {
         switch(side) {
           case "bottom": 
-            return [((el.x) + (el.x+el.width))/2, el.y+el.height];
+            return [((el.x) + (el.x+el.width))/2, el.y+el.height+padding];
           case "left": 
-            return [el.x, ((el.y) + (el.y+el.height))/2];
+            return [el.x-padding, ((el.y) + (el.y+el.height))/2];
           case "right": 
-            return [el.x+el.width, ((el.y) + (el.y+el.height))/2];
+            return [el.x+el.width+padding, ((el.y) + (el.y+el.height))/2];
           default: //"top"
-            return [((el.x) + (el.x+el.width))/2, el.y];
+            return [((el.x) + (el.x+el.width))/2, el.y-padding];
         }
       }
       const [aX, aY] = getSidePoints(connectionA,this.elementsDict[objectA]);
@@ -247,7 +340,12 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       let points = [];
       for(let i=0;i<numAP;i++)
         points.push([aX+i*(bX-aX)/(numAP-1), aY+i*(bY-aY)/(numAP-1)]);
-      this.addArrow(points,startArrowHead,endArrowHead,objectA,objectB);
+      this.addArrow(points,{ 
+        startArrowHead: formatting?.startArrowHead,
+        endArrowHead: formatting?.endArrowHead,
+        startObjectId: objectA, 
+        endObjectId: objectB
+      });
     },
     clear() {
       this.elementIds = [];
@@ -273,7 +371,8 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       this.canvas.theme = "light";
       this.canvas.viewBackgroundColor="#FFFFFF";
     },
-  }
+  };
+  initFonts();
 }
 
 export function destroyExcalidrawAutomate() {
@@ -315,20 +414,12 @@ function boxedElement(id:string,eltype:any,x:number,y:number,w:number,h:number)
 }
 
 function getLineBox(points: [[x:number,y:number]]) {
-  let leftX:number,rightX:number = points[0][0];
-  let topY:number,bottomY:number = points[0][1];
-  for (let i=0;i<points.length;i++) {
-    leftX = (leftX < points[i][0]) ? leftX : points[i][0];
-    topY = (topY < points[i][1]) ? topY : points[i][1];
-    rightX = (rightX > points[i][0]) ? rightX : points[i][0];
-    bottomY = (bottomY > points[i][1]) ? bottomY : points[i][1];
-  }
   return {
-    x: leftX,
-    y: topY,
-    w: rightX-leftX,
-    h: bottomY-topY
-  };
+    x: points[0][0],
+    y: points[0][1],
+    w: Math.abs(points[points.length-1][0]-points[0][0]),
+    h: Math.abs(points[points.length-1][1]-points[0][1])
+  }
 }
 
 function getFontFamily(id:number) {
@@ -339,14 +430,23 @@ function getFontFamily(id:number) {
   }
 }
 
-async function measureText (newText:string) {
+async function initFonts () {
+  for (let i=0;i<3;i++) {
+    await (document as any).fonts.load(
+      window.ExcalidrawAutomate.style.fontSize.toString()+'px ' +
+      getFontFamily(window.ExcalidrawAutomate.style.fontFamily)
+    );
+  }
+}
+
+function measureText (newText:string) {
   const line = document.createElement("div");
   const body = document.body;
   line.style.position = "absolute";
   line.style.whiteSpace = "pre";
   line.style.font = window.ExcalidrawAutomate.style.fontSize.toString()+'px ' +
                     getFontFamily(window.ExcalidrawAutomate.style.fontFamily);
-  await (document as any).fonts.load(line.style.font);
+//  await (document as any).fonts.load(line.style.font);
   body.appendChild(line);
   line.innerText = newText
     .split("\n")

src/ExcalidrawView.ts

@@ -3,11 +3,13 @@ import {
   WorkspaceLeaf, 
   normalizePath,
   TFile,
-  Menu,
+  WorkspaceItem,
+  Notice
 } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import Excalidraw, {exportToSvg} from "@excalidraw/excalidraw";
+import Excalidraw, {exportToSvg, getSceneVersion} from "@excalidraw/excalidraw";
+//import Excalidraw, {exportToSvg, getSceneVersion} from "aakansha-excalidraw";
 import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
 import { 
   AppState,
@@ -26,23 +28,38 @@ import {
 } from './constants';
 import ExcalidrawPlugin from './main';
 
+interface WorkspaceItemExt extends WorkspaceItem {
+  containerEl: HTMLElement;
+}
+
 export interface ExportSettings {
   withBackground: boolean,
   withTheme: boolean
 }
 
 export default class ExcalidrawView extends TextFileView {
-  private getScene: any;
+  private getScene: Function;
+  private getSelectedText: Function;
+  private refresh: Function;
   private excalidrawRef: React.MutableRefObject<any>;
   private justLoaded: boolean;
   private plugin: ExcalidrawPlugin;
+  private dirty: boolean;
+  private autosaveTimer: any;
+  private previousSceneVersion: number;
 
   constructor(leaf: WorkspaceLeaf, plugin: ExcalidrawPlugin) {
     super(leaf);
     this.getScene = null;
+    this.getSelectedText = null;
+    this.refresh = null;
     this.excalidrawRef = null;
     this.plugin = plugin;
     this.justLoaded = false;
+    this.dirty = false;
+    this.autosaveTimer = null;
+    this.previousSceneVersion = 0;
+
   }
 
   public async saveSVG(data?: string) {
@@ -58,6 +75,12 @@ export default class ExcalidrawView extends TextFileView {
     }
     const svg = ExcalidrawView.getSVG(data,exportSettings);
     if(!svg) return;
+    const svgString = ExcalidrawView.embedFontsInSVG(svg).outerHTML;                  
+    if(file && file instanceof TFile) await this.app.vault.modify(file,svgString);
+    else await this.app.vault.create(filepath,svgString);
+  }
+
+  public static embedFontsInSVG(svg:SVGSVGElement):SVGSVGElement {
     //replace font references with base64 fonts
     const includesVirgil = svg.querySelector("text[font-family^='Virgil']") != null;
     const includesCascadia = svg.querySelector("text[font-family^='Cascadia']") != null; 
@@ -65,9 +88,7 @@ export default class ExcalidrawView extends TextFileView {
     if (defs && (includesCascadia || includesVirgil)) {
       defs.innerHTML = "<style>" + (includesVirgil ? VIRGIL_FONT : "") + (includesCascadia ? CASCADIA_FONT : "")+"</style>";
     }
-    const svgString = svg.outerHTML;                  
-    if(file && file instanceof TFile) await this.app.vault.modify(file,svgString);
-    else await this.app.vault.create(filepath,svgString);
+    return svg;
   }
 
   public async savePNG(data?: string) {
@@ -97,20 +118,73 @@ export default class ExcalidrawView extends TextFileView {
     }
     else return this.data;
   }
-
+  
   async onload() {
-    this.addAction(DISK_ICON_NAME,"Save drawing",async (ev)=> {
+    this.addAction(DISK_ICON_NAME,"Force-save now to update transclusion visible in adjacent workspace pane\n(Please note, that autosave is always on)",async (ev)=> {
       await this.save();
       this.plugin.triggerEmbedUpdates();
     });
     this.addAction(PNG_ICON_NAME,"Export as PNG",async (ev)=>this.savePNG());
     this.addAction(SVG_ICON_NAME,"Export as SVG",async (ev)=>this.saveSVG());
+    this.addAction("link","Open selected text as link\n(CTRL/META to open in new pane)",(ev)=>{
+      let text = this.getSelectedText();
+      if(!text) {
+        new Notice('Select a text element.\n'+
+                   'If it is a web link, it will open in a new browser window.\n'+
+                   'Else if it is a valid filename Excalidraw will handle it as an Obsidian internal link.\n'+
+                   'Use CTRL+Click to open it in a new pane.',20000); 
+        return;
+      }
+      const parts = text.matchAll(/\[\[(.+)]]/g).next();
+      if(parts.value) text = parts.value[1];
+      if(text.match(/^\w+:\/\//)) {
+        window.open(text,"_blank");
+        return;
+      }
+      if(text.match(/[<>:"\\|?*]/g)) {
+        new Notice('File name cannot contain any of the following characters: * " \\  < > : | ?',4000); 
+        return;
+      }
+      if (!ev.shiftKey) {
+        const file = this.app.metadataCache.getFirstLinkpathDest(text,this.file.path); 
+        if (!file) {
+          new Notice("File does not exist. Hold down SHIFT (or CTRL+SHIFT) and click link button to create.", 4000);
+          return;
+        }
+      }
+      try {
+        this.app.workspace.openLinkText(text,this.file.path,ev.ctrlKey||ev.metaKey);
+      } catch (e) {
+        new Notice(e,4000);
+      }
+    });
+    //this is to solve sliding panes bug
+    if (this.app.workspace.layoutReady) {
+      (this.app.workspace.rootSplit as WorkspaceItem as WorkspaceItemExt).containerEl.addEventListener('scroll',(e)=>{if(this.refresh) this.refresh();});
+    } else {
+      this.registerEvent(this.app.workspace.on('layout-ready', async () => (this.app.workspace.rootSplit as WorkspaceItem as WorkspaceItemExt).containerEl.addEventListener('scroll',(e)=>{if(this.refresh) this.refresh();})));
+    }
+
+    this.setupAutosaveTimer();
   }
 
+  private setupAutosaveTimer() {
+    const timer = async () => {
+      if(this.dirty) {
+        this.dirty = false;
+        if(this.excalidrawRef) await this.save();
+        this.plugin.triggerEmbedUpdates();
+      }
+    }
+    this.autosaveTimer = setInterval(timer,30000);
+  }
+
+  //save current drawing when user closes workspace leaf
   async onunload() {
+    if(this.autosaveTimer) clearInterval(this.autosaveTimer);
     if(this.excalidrawRef) await this.save();
   }
-  
+
   setViewData (data: string, clear: boolean) {   
     if (this.app.workspace.layoutReady) {
       this.loadDrawing(data,clear);
@@ -121,11 +195,12 @@ export default class ExcalidrawView extends TextFileView {
 
   // clear the view content  
   clear() {
-    if(this.excalidrawRef) {
+    /*if(this.excalidrawRef) {
       this.excalidrawRef = null;
       this.getScene = null;
+      this.refresh = null;
       ReactDOM.unmountComponentAtNode(this.contentEl);
-    }
+    }*/
   }
   
   private async loadDrawing (data:string, clear:boolean) {   
@@ -175,6 +250,8 @@ export default class ExcalidrawView extends TextFileView {
 
   
   private instantiateExcalidraw(initdata: any) {  
+    this.dirty = false;
+    this.previousSceneVersion = 0;
     const reactElement = React.createElement(() => {
       const excalidrawRef = React.useRef(null);
       const excalidrawWrapperRef = React.useRef(null);
@@ -182,7 +259,7 @@ export default class ExcalidrawView extends TextFileView {
         width: undefined,
         height: undefined
       });
-
+      
       this.excalidrawRef = excalidrawRef;
       React.useEffect(() => {
         setDimensions({
@@ -202,6 +279,14 @@ export default class ExcalidrawView extends TextFileView {
         return () => window.removeEventListener("resize", onResize);
       }, [excalidrawWrapperRef]);
 
+      this.getSelectedText = ():string => {
+        if(!excalidrawRef?.current) return null;
+        const selectedElement = excalidrawRef.current.getSceneElements().filter((el:any)=>el.id==Object.keys(excalidrawRef.current.getAppState().selectedElementIds)[0]);
+        if(selectedElement.length==0) return null;
+        if(selectedElement[0].type != "text") return null;
+        return selectedElement[0].text;
+      };
+      
       this.getScene = () => {
         if(!excalidrawRef?.current) {
           return null;
@@ -209,16 +294,35 @@ export default class ExcalidrawView extends TextFileView {
         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, 
-          "appState": {
-            "theme": st.theme,
-            "viewBackgroundColor": st.viewBackgroundColor,
+          type: "excalidraw",
+          version: 2,
+          source: "https://excalidraw.com",
+          elements: el, 
+          appState: {
+            theme: st.theme,
+            viewBackgroundColor: st.viewBackgroundColor,
+            currentItemStrokeColor: st.currentItemStrokeColor,
+            currentItemBackgroundColor: st.currentItemBackgroundColor,
+            currentItemFillStyle: st.currentItemFillStyle,
+            currentItemStrokeWidth: st.currentItemStrokeWidth,
+            currentItemStrokeStyle: st.currentItemStrokeStyle,
+            currentItemRoughness: st.currentItemRoughness,
+            currentItemOpacity: st.currentItemOpacity,
+            currentItemFontFamily: st.currentItemFontFamily,
+            currentItemFontSize: st.currentItemFontSize,
+            currentItemTextAlign: st.currentItemTextAlign,
+            currentItemStrokeSharpness: st.currentItemStrokeSharpness,
+            currentItemStartArrowhead: st.currentItemStartArrowhead,
+            currentItemEndArrowhead: st.currentItemEndArrowhead,
+            currentItemLinearStrokeSharpness: st.currentItemLinearStrokeSharpness,
           }
         });
       };
+
+      this.refresh = () => {
+        if(!excalidrawRef?.current) return;
+        excalidrawRef.current.refresh();
+      };
       
       return React.createElement(
         React.Fragment,
@@ -232,7 +336,6 @@ export default class ExcalidrawView extends TextFileView {
           },
           React.createElement(Excalidraw.default, {
             ref: excalidrawRef,
-            key: "xyz",
             width: dimensions.width,
             height: dimensions.height,
             UIOptions: {
@@ -244,11 +347,21 @@ export default class ExcalidrawView extends TextFileView {
               },
             },
             initialData: initdata,
+            detectScroll: true,
             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);
+              } 
+              if (st.editingElement == null && st.resizingElement == null && 
+                  st.draggingElement == null && st.editingGroupId == null &&
+                  st.editingLinearElement == null ) {
+                const sceneVersion = Excalidraw.getSceneVersion(et);
+                if(sceneVersion != this.previousSceneVersion) {
+                  this.previousSceneVersion = sceneVersion;
+                  this.dirty=true;
+                }
               }
             },
             onLibraryChange: (items:LibraryItems) => {

src/constants.ts

@@ -1,5 +1,6 @@
 export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
 export const EXCALIDRAW_FILE_EXTENSION = "excalidraw";
+export const EXCALIDRAW_FILE_EXTENSION_LEN = EXCALIDRAW_FILE_EXTENSION.length;
 export const ICON_NAME = "excalidraw-icon";
 export const CODEBLOCK_EXCALIDRAW = "excalidraw";
 export const MAX_COLORS = 5;

src/main.ts

@@ -11,14 +11,19 @@ import {
   MarkdownPostProcessorContext,
   Menu,
   MenuItem,
-} from 'obsidian';
+  TAbstractFile,
+  Notice,
+  Tasks,
+  Workspace,
+} from "obsidian";
+
 import { 
   BLANK_DRAWING,
   VIEW_TYPE_EXCALIDRAW, 
   EXCALIDRAW_ICON,
   ICON_NAME,
   EXCALIDRAW_FILE_EXTENSION,
-  CODEBLOCK_EXCALIDRAW,
+  EXCALIDRAW_FILE_EXTENSION_LEN,
   DISK_ICON,
   DISK_ICON_NAME,
   PNG_ICON,
@@ -28,22 +33,21 @@ import {
   RERENDER_EVENT,
   VIRGIL_FONT,
   CASCADIA_FONT
-} from './constants';
-import ExcalidrawView, {ExportSettings} from './ExcalidrawView';
+} from "./constants";
+import ExcalidrawView, {ExportSettings} from "./ExcalidrawView";
 import {
   ExcalidrawSettings, 
   DEFAULT_SETTINGS, 
   ExcalidrawSettingTab
-} from './settings';
+} from "./settings";
 import {
   openDialogAction, 
   OpenFileDialog
-} from './openDrawing';
+} from "./openDrawing";
 import {
   initExcalidrawAutomate,
   destroyExcalidrawAutomate
-} from './ExcalidrawTemplate';
-import { norm } from '@excalidraw/excalidraw/types/ga';
+} from "./ExcalidrawTemplate";
 
 export interface ExcalidrawAutomate extends Window {
   ExcalidrawAutomate: {
@@ -55,10 +59,28 @@ export interface ExcalidrawAutomate extends Window {
 export default class ExcalidrawPlugin extends Plugin {
   public settings: ExcalidrawSettings;
   private openDialog: OpenFileDialog;
-  private excalidrawAutomate: ExcalidrawAutomate;
+  private activeExcalidrawView: ExcalidrawView;
+  public lastActiveExcalidrawFilePath: string;
+  private workspaceEventHandlers:Map<string,any>;
+  private vaultEventHandlers:Map<string,any>;
+  private hover: {linkText: string, sourcePath: string};
+  private observer: MutationObserver;
+  /*Excalidraw Sync Begin*/
+  private excalidrawSync: Set<string>;
+  private syncModifyCreate: any;
+  /*Excalidraw Sync Begin*/
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
+    this.activeExcalidrawView = null;
+    this.lastActiveExcalidrawFilePath = null;
+    this.workspaceEventHandlers = new Map();
+    this.vaultEventHandlers = new Map();
+    this.hover = {linkText: null, sourcePath: null};
+    /*Excalidraw Sync Begin*/
+    this.excalidrawSync = new Set<string>();
+    this.syncModifyCreate = null;
+    /*Excalidraw Sync End*/
   }
   
   async onload() {
@@ -66,37 +88,198 @@ export default class ExcalidrawPlugin extends Plugin {
     addIcon(DISK_ICON_NAME,DISK_ICON);
     addIcon(PNG_ICON_NAME,PNG_ICON);
     addIcon(SVG_ICON_NAME,SVG_ICON);
-
+    
     const myFonts = document.createElement('style');
     myFonts.appendChild(document.createTextNode(VIRGIL_FONT));
     myFonts.appendChild(document.createTextNode(CASCADIA_FONT));
     document.head.appendChild(myFonts);
 
-    initExcalidrawAutomate(this);
+    await this.loadSettings();
+    this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
 
     this.registerView(
       VIEW_TYPE_EXCALIDRAW, 
       (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf, this)
     );
 
+    initExcalidrawAutomate(this);
     this.registerExtensions([EXCALIDRAW_FILE_EXTENSION],VIEW_TYPE_EXCALIDRAW);
+    this.addMarkdownPostProcessor();
+    this.addCommands();
 
-    this.registerMarkdownCodeBlockProcessor(CODEBLOCK_EXCALIDRAW, async (source,el,ctx) => {
-      el.addEventListener(RERENDER_EVENT,async (e) => {
-        e.stopPropagation();
-        el.empty();
-        this.codeblockProcessor(source,el,ctx,this);
-      });
-      this.codeblockProcessor(source,el,ctx,this);
-    }); 
+    if (this.app.workspace.layoutReady) {
+      this.addEventListeners(this);
+    } else {
+      this.registerEvent(this.app.workspace.on("layout-ready", async () => this.addEventListeners(this)));
+    }
+  }
 
-    await this.loadSettings();
-    this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
+  private addMarkdownPostProcessor() {
 
-    this.openDialog = new OpenFileDialog(this.app, this);
-    this.addRibbonIcon(ICON_NAME, 'Create a new drawing in Excalidraw', async (e) => {
-      this.createDrawing(this.getNextDefaultFilename(), e.ctrlKey);
+    const getIMG = async (parts:any) => {
+      const file = this.app.vault.getAbstractFileByPath(parts.fname);
+      if(!(file && file instanceof TFile)) {
+        return null;
+      }
+    
+      const content = await this.app.vault.read(file);
+      const exportSettings: ExportSettings = {
+        withBackground: this.settings.exportWithBackground, 
+        withTheme: this.settings.exportWithTheme
+      }
+      let svg = ExcalidrawView.getSVG(content,exportSettings);
+      if(!svg) return null;
+      svg = ExcalidrawView.embedFontsInSVG(svg);
+      const img = createEl("img");
+      svg.removeAttribute('width');
+      svg.removeAttribute('height');
+      img.setAttribute("width",parts.fwidth);
+      
+      if(parts.fheight) img.setAttribute("height",parts.fheight);
+      img.addClass(parts.style);
+      img.setAttribute("src","data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(svg.outerHTML))));
+      return img;
+    }
+
+    const markdownPostProcessor = async (el:HTMLElement,ctx:MarkdownPostProcessorContext) => {
+      const drawings = el.querySelectorAll('.internal-embed[src$=".excalidraw"]');
+      let fname:string, fwidth:string,fheight:string, alt:string, divclass:string, img:any, parts, div, file:TFile;
+      for (const drawing of drawings) {
+        fname    = drawing.getAttribute("src");
+        fwidth   = drawing.getAttribute("width");
+        fheight  = drawing.getAttribute("height");
+        alt      = drawing.getAttribute("alt");
+        if(alt == fname) alt = ""; //when the filename starts with numbers followed by a space Obsidian recognizes the filename as alt-text
+        divclass = "excalidraw-svg";
+        if(alt) {
+          //for some reason ![]() is rendered in a DIV and ![[]] in a span by Obsidian
+          //also the alt text of the DIV does not include the altext of the image
+          //thus need to add an additional "|" character when its a span
+          if(drawing.tagName.toLowerCase()=="span") alt = "|"+alt;
+          parts = alt.match(/[^\|]*\|?(\d*)x?(\d*)\|?(.*)/);
+          fwidth = parts[1]? parts[1] : this.settings.width;
+          fheight = parts[2];
+          if(parts[3]!=fname) divclass = "excalidraw-svg" + (parts[3] ? "-" + parts[3] : "");
+        }
+        file = this.app.metadataCache.getFirstLinkpathDest(fname, ctx.sourcePath); 
+        if(file) {  //file exists. Display drawing
+          fname = file?.path;
+          img = await getIMG({fname:fname,fwidth:fwidth,fheight:fheight,style:divclass});
+          div = createDiv(divclass, (el)=>{
+            el.append(img);
+            el.setAttribute("src",file.path);
+            el.setAttribute("w",fwidth);
+            el.setAttribute("h",fheight);
+            el.onClickEvent((ev)=>{
+              if(ev.target instanceof Element && ev.target.tagName.toLowerCase() != "img") return;
+              let src = el.getAttribute("src");
+              if(src) this.openDrawing(this.app.vault.getAbstractFileByPath(src) as TFile,ev.ctrlKey||ev.metaKey);
+            });
+            el.addEventListener(RERENDER_EVENT, async(e) => {
+              e.stopPropagation;
+              el.empty();
+              const img = await getIMG({ 
+                fname:el.getAttribute("src"),
+                fwidth:el.getAttribute("w"),
+                fheight:el.getAttribute("h"),
+                style:el.getAttribute("class")
+              });
+              el.append(img);
+            });
+          });
+        } else { //file does not exist. Replace standard Obsidian div with mine to create a new drawing on click
+          div = createDiv("excalidraw-new",(el)=> {
+            el.setAttribute("src",fname);
+            el.createSpan("internal-embed file-embed mod-empty is-loaded", (el) => {
+              el.setText('"'+fname+'" is not created yet. Click to create.');
+            });
+            el.onClickEvent(async (ev)=> {
+              const fname = el.getAttribute("src");
+              if(!fname) return;
+              const i = fname.lastIndexOf("/");
+              if(i>-1) 
+                this.createDrawing(fname.substring(i+1),false,fname.substring(0,i));
+              else
+                this.createDrawing(fname,false); 
+            });
+          }); 
+        }
+        drawing.parentElement.replaceChild(div,drawing);
+      }
+    }
+
+    this.registerMarkdownPostProcessor(markdownPostProcessor);
+
+    /*****************************
+      internal-link quick preview
+    ******************************/
+    const hoverEvent = (e:any) => {
+      //@ts-ignore
+      if(!e.linktext) return;
+      if(!e.linktext.endsWith('.'+EXCALIDRAW_FILE_EXTENSION)) {
+        this.hover.linkText = null;
+        return;
+      }
+      this.hover.linkText = e.linktext;
+      this.hover.sourcePath = e.sourcePath;
+    };
+    //@ts-ignore
+    this.app.workspace.on('hover-link',hoverEvent);
+    this.workspaceEventHandlers.set('hover-link',hoverEvent);
+
+    //monitoring for div.popover.hover-popover.file-embed.is-loaded to be added to the DOM tree
+    this.observer = new MutationObserver((m)=>{
+      if(!this.hover.linkText) return;
+      if(m.length!=1) return;
+      if(m[0].addedNodes.length != 1) return;
+      //@ts-ignore
+      if(m[0].addedNodes[0].className!="popover hover-popover file-embed is-loaded") return;
+      const node = m[0].addedNodes[0];
+      node.empty();
+      const file = this.app.metadataCache.getFirstLinkpathDest(this.hover.linkText, this.hover.sourcePath?this.hover.sourcePath:""); 
+      if(file) {  
+        //this div will be on top of original DIV. By stopping the propagation of the click
+        //I prevent the default Obsidian feature of openning the link in the native app
+        const div = createDiv("",async (el)=>{
+          const img = await getIMG({fname:file.path,fwidth:300,fheight:null,style:"excalidraw-svg"});
+          el.appendChild(img);
+          el.setAttribute("src",file.path);
+          el.onClickEvent((ev)=>{
+            ev.stopImmediatePropagation();
+            let src = el.getAttribute("src");
+            if(src) this.openDrawing(this.app.vault.getAbstractFileByPath(src) as TFile,ev.ctrlKey||ev.metaKey);
+          });
+        });
+        node.appendChild(div);
+      }
     });
+    this.observer.observe(document, {childList: true, subtree: true});
+  }
+
+  private addCommands() {
+    this.openDialog = new OpenFileDialog(this.app, this);
+
+    this.addRibbonIcon(ICON_NAME, 'Create a new drawing in Excalidraw', async (e) => {
+      this.createDrawing(this.getNextDefaultFilename(), e.ctrlKey||e.metaKey);
+    });
+  
+    const fileMenuHandler = (menu: Menu, file: TFile) => {
+      if (file instanceof TFolder) {
+        menu.addItem((item: MenuItem) => {
+          item.setTitle("Create Excalidraw drawing")
+            .setIcon(ICON_NAME)
+            .onClick(evt => {
+              this.createDrawing(this.getNextDefaultFilename(),false,file.path);
+            })
+        });
+      }
+    };
+
+    this.registerEvent(
+      this.app.workspace.on("file-menu", fileMenuHandler)
+    );
+
+    this.workspaceEventHandlers.set("file-menu",fileMenuHandler);
 
     this.addCommand({
       id: "excalidraw-open",
@@ -106,7 +289,6 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
-
     this.addCommand({
       id: "excalidraw-open-on-current",
       name: "Open an existing drawing - IN THE CURRENT ACTIVE PANE",
@@ -117,7 +299,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
     this.addCommand({
       id: "excalidraw-insert-transclusion",
-      name: "Transclude (embed) an ."+EXCALIDRAW_FILE_EXTENSION+" drawing",
+      name: "Transclude (embed) an Excalidraw drawing",
       checkCallback: (checking: boolean) => {
         if (checking) {
           return this.app.workspace.activeLeaf.view.getViewType() == "markdown";
@@ -128,6 +310,19 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
+    this.addCommand({
+      id: "excalidraw-insert-last-active-transclusion",
+      name: "Transclude (embed) the most recently edited Excalidraw drawing",
+      checkCallback: (checking: boolean) => {
+        if (checking) {
+          return (this.app.workspace.activeLeaf.view.getViewType() == "markdown") && (this.lastActiveExcalidrawFilePath!=null);
+        } else {
+          this.embedDrawing(this.lastActiveExcalidrawFilePath);
+          return true;
+        }
+      },
+    });
+
     this.addCommand({
       id: "excalidraw-autocreate",
       name: "Create a new drawing - IN A NEW PANE",
@@ -144,6 +339,36 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
+    this.addCommand({
+      id: "excalidraw-autocreate-and-embed",
+      name: "Create a new drawing - IN A NEW PANE - and embed in current document",
+      checkCallback: (checking: boolean) => {
+        if (checking) {
+          return (this.app.workspace.activeLeaf.view.getViewType() == "markdown");
+        } else {
+          const filename = this.getNextDefaultFilename();
+          this.embedDrawing(filename);
+          this.createDrawing(filename, true);
+          return true;
+        }
+      },
+    });
+
+    this.addCommand({
+      id: "excalidraw-autocreate-and-embed-on-current",
+      name: "Create a new drawing - IN THE CURRENT ACTIVE PANE - and embed in current document",
+      checkCallback: (checking: boolean) => {
+        if (checking) {
+          return (this.app.workspace.activeLeaf.view.getViewType() == "markdown");
+        } else {
+          const filename = this.getNextDefaultFilename();
+          this.embedDrawing(filename);
+          this.createDrawing(filename, false);
+          return true;
+        }
+      },
+    });
+
     this.addCommand({
       id: 'export-svg',
       name: 'Export SVG. Save it next to the current file',
@@ -178,126 +403,273 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
-    this.registerEvent(
-      this.app.workspace.on("file-menu", (menu: Menu, file: TFile) => {
-        if (file instanceof TFolder) {
-          menu.addItem((item: MenuItem) => {
-            item.setTitle("Create Excalidraw drawing")
-              .setIcon(ICON_NAME)
-              .onClick(evt => {
-                this.createDrawing(file.path+this.getNextDefaultFilename(),false,file.path);
-              })
-          });
+    /*1.1 migration command*/
+    const migrateCodeblock = async () => {
+      const timeStart = new Date().getTime();
+      let counter = 0;
+      const markdownFiles = this.app.vault.getMarkdownFiles();
+      let fileContents:string;
+      const pattern =  new RegExp(String.fromCharCode(96,96,96)+'excalidraw\\s+([^`]*)\\s+'+String.fromCharCode(96,96,96),'gms');
+      for (const file of markdownFiles) {
+        fileContents = await this.app.vault.read(file);
+        for(const match of [...fileContents.matchAll(pattern)]) {
+          if(match[0] && match[1]) {
+            fileContents = fileContents.split(match[0]).join("!"+match[1]);
+            counter++;
+          }
         }
-      })
-    );
-
-    //watch filename change to rename .svg
-    this.app.vault.on('rename',async (file,oldPath) => {
-      if (!(this.settings.keepInSync  && file instanceof TFile)) return;
-      if (file.extension != EXCALIDRAW_FILE_EXTENSION) return;
-      const oldSVGpath = oldPath.substring(0,oldPath.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg'; 
-      const svgFile = this.app.vault.getAbstractFileByPath(normalizePath(oldSVGpath));
-      if(svgFile && svgFile instanceof TFile) {
-        const newSVGpath = file.path.substring(0,file.path.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg';
-        await this.app.vault.rename(svgFile,newSVGpath); 
+        await this.app.vault.modify(file,fileContents)
       }
-    });
+      const totalTimeMs = new Date().getTime() - timeStart;
+      console.log(`Excalidraw: Parsed ${markdownFiles.length} markdown files 
+                   and made ${counter} replacements in ${totalTimeMs / 1000.0} seconds.`);      
+    }
 
-    //watch file delete and delete corresponding .svg
-    this.app.vault.on('delete',async (file:TFile) => {
-      if (!(file instanceof TFile)) return;
-      if (file.extension != EXCALIDRAW_FILE_EXTENSION) return;
-      
-      const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+    this.addCommand({
+      id: "migrate-codeblock-transclusions",
+      name: "MIGRATE to version 1.1: Replace codeblocks with ![[...]] style embedments",
+      callback: async () => migrateCodeblock(),  
+    });
+  }
+  
+  /*Excalidraw Sync Begin*/
+  public initiateSync() {
+    if(!this.syncModifyCreate) return;
+    const files = this.app.vault.getFiles();
+    (files || [])
+      .filter((f:TFile) => (f.path.startsWith(this.settings.syncFolder) && f.extension == "md"))
+      .forEach((f)=>this.syncModifyCreate(f));
+    (files || [])
+      .filter((f:TFile) => (!f.path.startsWith(this.settings.syncFolder) && f.extension == EXCALIDRAW_FILE_EXTENSION))
+      .forEach((f)=>this.syncModifyCreate(f));
+  }
+  /*Excalidraw Sync End*/
+
+  private async addEventListeners(plugin: ExcalidrawPlugin) {
+
+    const closeDrawing = async (filePath:string) => {
+      const leaves = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
       for (let i=0;i<leaves.length;i++) {
-        if((leaves[i].view as ExcalidrawView).file.path == file.path) {
-          //(leaves[i].view as ExcalidrawView).clear();
-          leaves[i].setViewState({
+        if((leaves[i].view as ExcalidrawView).file.path == filePath) {
+          await leaves[i].setViewState({
             type: VIEW_TYPE_EXCALIDRAW,
             state: {file: null}}
           );
         }
-      }      
-      
-      if (this.settings.keepInSync) {
-        const svgPath = file.path.substring(0,file.path.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg'; 
-        const svgFile = this.app.vault.getAbstractFileByPath(normalizePath(svgPath));
-        if(svgFile && svgFile instanceof TFile) {
-          await this.app.vault.delete(svgFile); 
+      }   
+    }
+
+    /*Excalidraw Sync Begin*/
+    const reloadDrawing = async (oldPath:string, newPath: string) => {
+      const file = plugin.app.vault.getAbstractFileByPath(newPath);
+      if(!(file && file instanceof TFile)) return;
+      let leaves = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+      for (let i=0;i<leaves.length;i++) {
+        if((leaves[i].view as ExcalidrawView).file.path == oldPath) {
+          (leaves[i].view as ExcalidrawView).setViewData(await plugin.app.vault.read(file),false);
         }
       }
-    });
+      plugin.triggerEmbedUpdates(oldPath);
+    }
+
+    const createPathIfNotThere = async (path:string) => {
+      const folderArray = path.split("/");
+      folderArray.pop();
+      const folderPath = folderArray.join("/");
+      const folder = plugin.app.vault.getAbstractFileByPath(folderPath);
+      if(!folder)
+        await plugin.app.vault.createFolder(folderPath); 
+    }
+
+    const getSyncFilepath = (excalidrawPath:string):string => {
+      return normalizePath(plugin.settings.syncFolder)+'/'+excalidrawPath.slice(0,excalidrawPath.length-EXCALIDRAW_FILE_EXTENSION_LEN)+"md";
+    }
+
+    const getExcalidrawFilepath = (syncFilePath:string):string => {
+      const syncFolder = normalizePath(plugin.settings.syncFolder)+'/';
+      const normalFilePath = syncFilePath.slice(syncFolder.length);
+      return normalFilePath.slice(0,normalFilePath.length-2)+EXCALIDRAW_FILE_EXTENSION; //2=="md".length
+    }
+
+    const syncCopy = async (source:TFile, targetPath: string) => {
+      await createPathIfNotThere(targetPath);
+      const target = plugin.app.vault.getAbstractFileByPath(targetPath);
+      plugin.excalidrawSync.add(targetPath);
+      if(target && target instanceof TFile) {
+        await plugin.app.vault.modify(target,await plugin.app.vault.read(source));
+      } else {
+        await plugin.app.vault.create(targetPath,await plugin.app.vault.read(source))
+        //await plugin.app.vault.copy(source,targetPath);
+      }
+    }
+
+    const syncModifyCreate = async (file:TAbstractFile) => {
+      if(!(file instanceof TFile)) return;
+      if(plugin.excalidrawSync.has(file.path)) {
+        plugin.excalidrawSync.delete(file.path);
+        return;
+      }
+      if(plugin.settings.excalidrawSync) {
+        switch (file.extension) {
+          case EXCALIDRAW_FILE_EXTENSION: 
+            const syncFilePath = getSyncFilepath(file.path); 
+            await syncCopy(file,syncFilePath);
+            break;
+          case 'md':
+            if(file.path.startsWith(normalizePath(plugin.settings.syncFolder))) {
+              const excalidrawNewPath = getExcalidrawFilepath(file.path); 
+              await syncCopy(file,excalidrawNewPath);
+              reloadDrawing(excalidrawNewPath,excalidrawNewPath);
+            }
+            break;
+        }
+      }
+    };
+    this.syncModifyCreate = syncModifyCreate;
+
+    plugin.app.vault.on("create", syncModifyCreate);
+    plugin.app.vault.on("modify", syncModifyCreate);
+    this.vaultEventHandlers.set("create",syncModifyCreate);
+    this.vaultEventHandlers.set("modify",syncModifyCreate);
+    /*Excalidraw Sync End*/
+
+    //watch filename change to rename .svg
+    const renameEventHandler = async (file:TAbstractFile,oldPath:string) => {
+      if(!(file instanceof TFile)) return;
+      /*Excalidraw Sync Begin*/
+      if(plugin.settings.excalidrawSync) {
+        if(plugin.excalidrawSync.has(file.path)) {
+          plugin.excalidrawSync.delete(file.path);
+        } else {
+          switch (file.extension) {
+            case EXCALIDRAW_FILE_EXTENSION: 
+              const syncOldPath = getSyncFilepath(oldPath);
+              const syncNewPath = getSyncFilepath(file.path); 
+              const oldFile = plugin.app.vault.getAbstractFileByPath(syncOldPath);
+              if(oldFile && oldFile instanceof TFile) {
+                plugin.excalidrawSync.add(syncNewPath);
+                await createPathIfNotThere(syncNewPath);
+                await plugin.app.vault.rename(oldFile,syncNewPath);
+              } else {
+                await syncCopy(file,syncNewPath);
+              }
+              break;
+            case 'md':
+              if(file.path.startsWith(normalizePath(plugin.settings.syncFolder))) {
+                const excalidrawOldPath = getExcalidrawFilepath(oldPath);
+                const excalidrawNewPath = getExcalidrawFilepath(file.path); 
+                const excalidrawOldFile = plugin.app.vault.getAbstractFileByPath(excalidrawOldPath);
+                if(excalidrawOldFile && excalidrawOldFile instanceof TFile) {
+                  plugin.excalidrawSync.add(excalidrawNewPath);
+                  await createPathIfNotThere(excalidrawNewPath);
+                  await plugin.app.vault.rename(excalidrawOldFile,excalidrawNewPath);
+                } else {
+                  await syncCopy(file,excalidrawNewPath);
+                }
+                reloadDrawing(excalidrawOldFile.path,excalidrawNewPath);
+              }
+              break;
+          }
+        }
+      }
+      /*Excalidraw Sync End*/
+      if (file.extension != EXCALIDRAW_FILE_EXTENSION) return;
+      if (!plugin.settings.keepInSync) return;
+      const oldSVGpath = oldPath.substring(0,oldPath.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg'; 
+      const svgFile = plugin.app.vault.getAbstractFileByPath(normalizePath(oldSVGpath));
+      if(svgFile && svgFile instanceof TFile) {
+        const newSVGpath = file.path.substring(0,file.path.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg';
+        await plugin.app.vault.rename(svgFile,newSVGpath); 
+      }
+    };
+    plugin.app.vault.on("rename",renameEventHandler);
+    this.vaultEventHandlers.set("rename",renameEventHandler);
+
+
+    //watch file delete and delete corresponding .svg
+    const deleteEventHandler = async (file:TFile) => {
+      if (!(file instanceof TFile)) return;
+      /*Excalidraw Sync Begin*/
+      if(plugin.settings.excalidrawSync) {
+        if(plugin.excalidrawSync.has(file.path)) {
+          plugin.excalidrawSync.delete(file.path);
+        } else { 
+          switch (file.extension) {
+            case EXCALIDRAW_FILE_EXTENSION: 
+              const syncFilePath = getSyncFilepath(file.path);
+              const oldFile = plugin.app.vault.getAbstractFileByPath(syncFilePath);
+              if(oldFile && oldFile instanceof TFile) {
+                plugin.excalidrawSync.add(oldFile.path);
+                plugin.app.vault.delete(oldFile);
+              }
+              break;
+            case "md":
+              if(file.path.startsWith(normalizePath(plugin.settings.syncFolder))) {
+                const excalidrawPath = getExcalidrawFilepath(file.path); 
+                const excalidrawFile = plugin.app.vault.getAbstractFileByPath(excalidrawPath);
+                if(excalidrawFile && excalidrawFile instanceof TFile) {
+                  plugin.excalidrawSync.add(excalidrawFile.path);
+                  await closeDrawing(excalidrawFile.path);
+                  plugin.app.vault.delete(excalidrawFile);
+                } 
+              }
+              break;
+          }
+        }
+      }
+      /*Excalidraw Sync End*/
+      if (file.extension != EXCALIDRAW_FILE_EXTENSION) return;      
+      closeDrawing(file.path);
+      
+      if (plugin.settings.keepInSync) {
+        const svgPath = file.path.substring(0,file.path.lastIndexOf('.'+EXCALIDRAW_FILE_EXTENSION)) + '.svg'; 
+        const svgFile = plugin.app.vault.getAbstractFileByPath(normalizePath(svgPath));
+        if(svgFile && svgFile instanceof TFile) {
+          await plugin.app.vault.delete(svgFile); 
+        }
+      }
+    }
+    plugin.app.vault.on("delete",deleteEventHandler);
+    this.vaultEventHandlers.set("delete",deleteEventHandler);
+
+    //save open drawings when user quits the application
+    const quitEventHandler = (tasks: Tasks) => {
+      const leaves = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);      
+      for (let i=0;i<leaves.length;i++) {
+        (leaves[i].view as ExcalidrawView).save(); 
+      }
+    }
+    plugin.app.workspace.on("quit",quitEventHandler);
+    this.workspaceEventHandlers.set("quit",quitEventHandler);
+
+    //save Excalidraw leaf and update embeds when switching to another leaf
+    const activeLeafChangeEventHandler = (leaf:WorkspaceLeaf) => {
+      if(plugin.activeExcalidrawView) {
+        plugin.activeExcalidrawView.save();
+        plugin.triggerEmbedUpdates(plugin.activeExcalidrawView.file?.path);
+      }
+      plugin.activeExcalidrawView = (leaf.view.getViewType() == VIEW_TYPE_EXCALIDRAW) ? leaf.view as ExcalidrawView : null;
+      if(plugin.activeExcalidrawView)
+        plugin.lastActiveExcalidrawFilePath = plugin.activeExcalidrawView.file?.path;
+    };
+    plugin.app.workspace.on("active-leaf-change",activeLeafChangeEventHandler);
+    this.workspaceEventHandlers.set("active-leaf-change",activeLeafChangeEventHandler);
   }
-  
+
   onunload() {
     destroyExcalidrawAutomate();
+    for(const key of this.vaultEventHandlers.keys()) 
+      this.app.vault.off(key,this.vaultEventHandlers.get(key))
+    for(const key of this.workspaceEventHandlers.keys())
+      this.app.workspace.off(key,this.workspaceEventHandlers.get(key));
+    this.observer.disconnect();
   }
 
-  private async codeblockProcessor(source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext, plugin: ExcalidrawPlugin) {
-    const parseError = (message: string) => {
-      el.createDiv("excalidraw-error",(el)=> {
-        el.createEl("p","Please provide a link to an excalidraw file: [[file."+EXCALIDRAW_FILE_EXTENSION+"]]");
-        el.createEl("p",message);
-        el.createEl("p",source);
-      })  
-    }
-
-    const parts = source.match(/\[{2}([^|]*)\|?(\d*)x?(\d*)\|?(.*)\]{2}/m);
-    if(!parts) {
-      parseError("No link to file found in codeblock.");
-      return;
-    }
-    const fname = parts[1];
-    const fwidth = parts[2]? parts[2] : plugin.settings.width;
-    const fheight = parts[3];
-    const style = "excalidraw-svg" + (parts[4] ? "-" + parts[4] : "");
-
-    if(!fname) {
-      parseError("No link to file found in codeblock.");
-      return;
-    }
-
-    const file = plugin.app.vault.getAbstractFileByPath(fname);
-    if(!(file && file instanceof TFile)) {
-      parseError("File does not exist. " + fname);
-      return;
-    }
-
-    if(file.extension != EXCALIDRAW_FILE_EXTENSION) {
-      parseError("Not an excalidraw file. Must have extension " + EXCALIDRAW_FILE_EXTENSION);
-      return;
-    }
-
-    const content = await plugin.app.vault.read(file);
-    const exportSettings: ExportSettings = {
-      withBackground: plugin.settings.exportWithBackground, 
-      withTheme: plugin.settings.exportWithTheme
-    }
-    const svg = ExcalidrawView.getSVG(content,exportSettings);
-    if(!svg) {
-      parseError("Parse error. Not a valid Excalidraw file.");
-      return;
-    }
-    el.createDiv(style,(el)=> {
-      svg.removeAttribute('width');
-      svg.removeAttribute('height');
-      svg.style.setProperty('width',fwidth);
-      if(fheight) svg.style.setProperty('height',fheight);
-      svg.addClass(style);
-      el.appendChild(svg);
-    });
-  }
-
-  public insertCodeblock(data:string) {
+  public embedDrawing(data:string) {
     const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
     if(activeView) {
       const editor = activeView.editor;
-      editor.replaceSelection(
-        String.fromCharCode(96,96,96) + 
-        CODEBLOCK_EXCALIDRAW +
-        "\n[["+data+"]]\n" +
-        String.fromCharCode(96,96,96));
+      editor.replaceSelection("![["+data+"]]");
       editor.focus();
     }
   
@@ -311,15 +683,15 @@ export default class ExcalidrawPlugin extends Plugin {
     await this.saveData(this.settings);
   }
 
-  public triggerEmbedUpdates(){
+  public triggerEmbedUpdates(filepath?:string){
     const e = document.createEvent("Event")
     e.initEvent(RERENDER_EVENT,true,false);
     document
-      .querySelectorAll("svg[class^='excalidraw-svg']")
+      .querySelectorAll("div[class^='excalidraw-svg']"+ (filepath ? "[src='"+filepath.replaceAll("'","\\'")+"']" : ""))
       .forEach((el) => el.dispatchEvent(e));
   }
 
-  public async openDrawing(drawingFile: TFile, onNewPane: boolean) {
+  public openDrawing(drawingFile: TFile, onNewPane: boolean) {
     const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
     let leaf:WorkspaceLeaf = null;
 
@@ -345,14 +717,23 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   private getNextDefaultFilename():string {
-    return 'Drawing ' + window.moment().format('YYYY-MM-DD HH.mm.ss')+'.'+EXCALIDRAW_FILE_EXTENSION;
+    return this.settings.drawingFilenamePrefix + window.moment().format(this.settings.drawingFilenameDateTime)+'.'+EXCALIDRAW_FILE_EXTENSION;
   }
  
   public async createDrawing(filename: string, onNewPane: boolean, foldername?: string, initData?:string) {
-    const fname = foldername ? normalizePath(foldername)+'/'+filename : normalizePath(this.settings.folder) + '/' + filename;
-    const folder = this.app.vault.getAbstractFileByPath(normalizePath(foldername ? foldername: this.settings.folder));
+    const folderpath = normalizePath(foldername ? foldername: this.settings.folder);
+    let fname = folderpath +'/'+ filename; 
+    const folder = this.app.vault.getAbstractFileByPath(folderpath);
     if (!(folder && folder instanceof TFolder)) {
-      await this.app.vault.createFolder(this.settings.folder);
+      await this.app.vault.createFolder(folderpath);
+    }
+
+    let file:TAbstractFile = this.app.vault.getAbstractFileByPath(fname);
+    let i = 0;
+    while(file) {
+      fname = folderpath + '/' + filename.slice(0,filename.lastIndexOf("."))+"_"+i+filename.slice(filename.lastIndexOf("."));
+      i++;
+      file = this.app.vault.getAbstractFileByPath(fname);
     }
 
     if(initData) {
@@ -360,9 +741,9 @@ export default class ExcalidrawPlugin extends Plugin {
       return;
     }
 
-    const file = this.app.vault.getAbstractFileByPath(normalizePath(this.settings.templateFilePath));
-    if(file && file instanceof TFile) {
-      const content = await this.app.vault.read(file);
+    const template = this.app.vault.getAbstractFileByPath(normalizePath(this.settings.templateFilePath));
+    if(template && template instanceof TFile) {
+      const content = await this.app.vault.read(template);
       this.openDrawing(await this.app.vault.create(fname,content==''?BLANK_DRAWING:content), onNewPane);
     } else {
       this.openDrawing(await this.app.vault.create(fname,BLANK_DRAWING), onNewPane);

src/openDrawing.ts

@@ -56,7 +56,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
         this.plugin.openDrawing(item, this.onNewPane);
         break;
       case(openDialogAction.insertLink):
-        this.plugin.insertCodeblock(item.path);
+        this.plugin.embedDrawing(item.path);
         break;
     }
   }

src/settings.ts

@@ -4,11 +4,14 @@ import {
   PluginSettingTab, 
   Setting
 } from 'obsidian';
+import { EXCALIDRAW_FILE_EXTENSION } from './constants';
 import type ExcalidrawPlugin from "./main";
 
 export interface ExcalidrawSettings {
   folder: string,
   templateFilePath: string,
+  drawingFilenamePrefix: string,
+  drawingFilenameDateTime: string,
   width: string,
   exportWithTheme: boolean,
   exportWithBackground: boolean,
@@ -16,11 +19,17 @@ export interface ExcalidrawSettings {
   autoexportPNG: boolean,
   keepInSync: boolean,
   library: string,
+  /*Excalidraw Sync Begin*/
+  syncFolder: string,
+  excalidrawSync: boolean,
+  /*Excalidraw Sync End*/
 }
 
 export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   folder: 'Excalidraw',
   templateFilePath: 'Excalidraw/Template.excalidraw',
+  drawingFilenamePrefix: 'Drawing ',
+  drawingFilenameDateTime: 'YYYY-MM-DD HH.mm.ss',
   width: '400',
   exportWithTheme: true,
   exportWithBackground: true,
@@ -28,6 +37,10 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   autoexportPNG: false,
   keepInSync: false,
   library: `{"type":"excalidrawlib","version":1,"library":[]}`,
+  /*Excalidraw Sync Begin*/
+  syncFolder: 'excalidraw_sync',
+  excalidrawSync: false,
+  /*Excalidraw Sync End*/
 }
 
 export class ExcalidrawSettingTab extends PluginSettingTab {
@@ -42,6 +55,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     let {containerEl} = this;
     this.containerEl.empty();
 
+    new Setting(containerEl)
+    .setName('Default width of embedded (transcluded) image') 
+    .setDesc('The default width of an embedded drawing. You can specify a different ' +
+             'width when embedding an image using the ![[drawing.excalidraw|100]] or ' +
+             '[[drawing.excalidraw|100x100]] format.')
+    .addText(text => text
+      .setPlaceholder('400')
+      .setValue(this.plugin.settings.width)
+      .onChange(async (value) => {
+        this.plugin.settings.width = value;
+        await this.plugin.saveSettings();
+        this.plugin.triggerEmbedUpdates();
+      }));
+
     new Setting(containerEl)
     .setName('Excalidraw folder') 
     .setDesc('Default location for your Excalidraw drawings. Leaving this empty means drawings will be created in the Vault root.')
@@ -66,19 +93,51 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           await this.plugin.saveSettings();
         }));
 
+    this.containerEl.createEl('h1', {text: 'New drawing filename'});
+    containerEl.createDiv('',(el) => {
+      el.innerHTML = '<p>The automatically generated filename consists of a prefix and a date. ' + 
+                     'e.g."Drawing 2021-05-24 12.58.07".</p>'+
+                     '<p>Click this link for the <a href="https://momentjs.com/docs/#/displaying/format/">'+
+                     'date and time format reference</a>.</p>';
+
+    });
+
+    const getFilenameSample = () => {
+      return 'The current file format is: <b>' + 
+             this.plugin.settings.drawingFilenamePrefix + 
+            window.moment().format(this.plugin.settings.drawingFilenameDateTime) +
+            '.' + EXCALIDRAW_FILE_EXTENSION + '</b>';
+    };
+
+    const filenameEl = containerEl.createEl('p',{text: ''});
+    filenameEl.innerHTML = getFilenameSample();
+    
     new Setting(containerEl)
-      .setName('Default width of embedded (transcluded) image') 
-      .setDesc('The default width of an embedded drawing. You can specify a different ' +
-               'width when embedding an image using the [[drawing.excalidraw|100]] or ' +
-               '[[drawing.excalidraw|100x100]] format.')
+      .setName('Filename prefix') 
+      .setDesc('The first part of the filename')
       .addText(text => text
-        .setPlaceholder('400')
-        .setValue(this.plugin.settings.width)
+        .setPlaceholder('Drawing ')
+        .setValue(this.plugin.settings.drawingFilenamePrefix)
         .onChange(async (value) => {
-          this.plugin.settings.width = value;
+          this.plugin.settings.drawingFilenamePrefix = value.replaceAll(/[<>:"/\\|?*]/g,'_');
+          text.setValue(this.plugin.settings.drawingFilenamePrefix);
+          filenameEl.innerHTML = getFilenameSample();
           await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
         }));
+
+    new Setting(containerEl)
+      .setName('Filename date') 
+      .setDesc('The second part of the filename')
+      .addText(text => text
+        .setPlaceholder('YYYY-MM-DD HH.mm.ss')
+        .setValue(this.plugin.settings.drawingFilenameDateTime)
+        .onChange(async (value) => {
+          this.plugin.settings.drawingFilenameDateTime = value.replaceAll(/[<>:"/\\|?*]/g,'_');
+          text.setValue(this.plugin.settings.drawingFilenameDateTime);
+          filenameEl.innerHTML = getFilenameSample();
+          await this.plugin.saveSettings();
+        }));
+
    
     this.containerEl.createEl('h1', {text: 'Embedded image settings'});
 
@@ -140,5 +199,42 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           await this.plugin.saveSettings();
         }));
 
+    /*Excalidraw Sync Begin*/
+    this.containerEl.createEl('h1', {text: 'Excalidraw sync'});
+    this.containerEl.createEl('h3', {text: 'This is a hack and a temporary workaround. Turn it on only if you are comfortable with hacky solutions...'});
+    this.containerEl.createEl('p', {text: 'By enabling this feature Excalidraw will sync drawings to a sync folder where drawings are stored in an ".md" file.  ' +
+                                   'This will allow Obsidian sync to synchronize Excalidraw drawings as well... ' + 
+                                   'Whenever your drawing changes, the corresponding file in the sync folder will also get updated. Similarly, whenever a file is synchronized to the sync folder ' +
+                                   'by Obsidian sync, Excalidraw will sync it with the .excalidraw file in your vault.'});
+    this.containerEl.createEl('p', {text: 'Because this is a temporary workaround until Obsidian sync is ready, I didn\'t implement extensive application logic to manage sync. ' +
+                                   'Sync might get confused requiring some manual intervention.'});
+
+    new Setting(containerEl)
+    .setName('Excalidraw sync folder') 
+    .setDesc('Configure the folder first, before activating the feature! ' +
+             'This is the root folder for your mirrored excalidraw drawings. ' +
+             'Don\'t save other files here, as my algorithm is not prepared to handle those... and I can\'t predict the outcome. ')
+    .addText(text => text
+      .setPlaceholder('.excalidraw_sync')
+      .setValue(this.plugin.settings.syncFolder)
+      .onChange(async (value) => {
+        this.plugin.settings.syncFolder = value;
+        await this.plugin.saveSettings();
+      }));
+
+    new Setting(containerEl)
+      .setName('Excalidraw sync') 
+      .setDesc('Enable Excalidraw Sync')
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.excalidrawSync)
+        .onChange(async (value) => {
+          this.plugin.settings.excalidrawSync = value;
+          await this.plugin.saveSettings();
+          this.plugin.initiateSync();
+        }));
+      
+
+    /*Excalidraw Sync End*/
+
   }
 }

styles.css

@@ -21,20 +21,30 @@
   display: none;
 }
 
-svg.excalidraw-svg-right-wrap {
+img.excalidraw-svg-right-wrap {
   float: right;
   margin: 0px 0px 20px 20px;
 }
 
-svg.excalidraw-svg-left-wrap {
+img.excalidraw-svg-left-wrap {
   float: left;
   margin: 0px 35px 20px 0px;
 }
 
-div.excalidraw-svg-right {
-  text-align: right;
+img.excalidraw-svg-right {
+  float: right;
 }
 
+img.excalidraw-svg-left {
+  float: left;
+}
+
+div.excalidraw-svg-right,
 div.excalidraw-svg-left {
-  text-align: left;
-}
+  display: table;
+  width: 100%;
+}
+
+button.ToolIcon_type_button[title="Export"] {
+  display:none;
+}

tsconfig.json

@@ -11,9 +11,9 @@
     "importHelpers": true,
     "lib": [
       "dom",
-      "es5",
       "scripthost",
-      "es2015",
+      "es2020",
+      "esnext",
       "DOM.Iterable"
     ],
     "jsx": "react",

versions.json

@@ -1,5 +1,3 @@
 {
-  "1.0.7": "0.11.13",
-  "1.0.6": "0.11.13",
-  "1.0.5": "0.11.13"
+  "1.1.7": "0.11.13"
 }

yarn.lock

@@ -1190,10 +1190,10 @@
     "minimatch" "^3.0.4"
     "strip-json-comments" "^3.1.1"
 
-"@excalidraw/excalidraw@0.7.0":
-  "integrity" "sha512-D1yMXhOjWjCJIXT0puZD2QaGQ28QN2DNrVUQTsOouhPSELwhFoM7Exg/ulSwkLBI2l2KN7m39+2tj6QVijv4Sg=="
-  "resolved" "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.7.0.tgz"
-  "version" "0.7.0"
+"@excalidraw/excalidraw@0.8.0":
+  "integrity" "sha512-QSCorwl2NVZr1kv6+pSfMgxwb85v7qmjW37p0n+LMWrW+VgGWQxa3LtQqTIJ8OvdLNLNfO3kN7nHXNC4Z1h3ug=="
+  "resolved" "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.8.0.tgz"
+  "version" "0.8.0"
 
 "@hapi/address@2.x.x":
   "integrity" "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ=="
@@ -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-draft":
-  "integrity" "sha512-bafyy/qQES3E+uI7YHGuMzIh2kKlTKx+NYYpHwR5QhdAdDsA+Tru56Yglo+8cLCSDncN/KyEb1ffQlYJyBqQwA=="
-  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.7.0-draft.tgz"
-  "version" "0.7.0-draft"
+"aakansha-excalidraw@0.8.0-bec34f2":
+  "integrity" "sha512-Bvz/vyh3KL6G7KaoIDVCDjHerR8thX3SRUEMZS2fqbzNTe5dT19u44ujonDPGP3YAcXRZ5RhsIO+rv16ucx76A=="
+  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.8.0-bec34f2.tgz"
+  "version" "0.8.0-bec34f2"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="