tooltip edit

AutomateHowTo.md

@@ -18,66 +18,71 @@ 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
 ```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();
+  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();
+  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
+```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 +90,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 +172,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 +188,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 +207,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 +227,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 +264,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 exising 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 +284,146 @@ 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
 ```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 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.
 ```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:
+```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

@@ -74,7 +74,7 @@ div.excalidraw-svg-left {
 
 
 ## 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. 
+- 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. Obsidian mobile 0.18 has resolved this issue.
 - 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.

src/ExcalidrawTemplate.ts

@@ -12,6 +12,7 @@ import {
   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,6 +51,11 @@ 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;
   };
@@ -140,27 +145,87 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
           return "dark";
       }      
     },
-    async create(filename?: string, foldername?:string, templatePath?:string, onNewPane: boolean = false) {
+    addToGroup(objectIds:[]):void {
+      const id = nanoid();
+      objectIds.forEach((objectId)=>{
+        this.elementsDict[objectId]?.groupIds?.push(id);
+      });
+    },
+    async toClipboard(templatePath?:string) {
       let elements = templatePath ? (await getTemplate(templatePath)).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}) {
+      let elements = params?.templatePath ? (await getTemplate(params.templatePath)).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": this.canvas.theme,
+            "viewBackgroundColor": this.canvas.viewBackgroundColor
+          }
+        })
+      );  
+    },
+    async createSVG(templatePath?:string) {
+      let elements = templatePath ? (await getTemplate(templatePath)).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": this.canvas.theme,
+            "viewBackgroundColor": this.canvas.viewBackgroundColor
+          }
+        }),
+        {
+          withBackground: plugin.settings.exportWithBackground, 
+          withTheme: plugin.settings.exportWithTheme
+        }
+      )     
+    },
+    async createPNG(templatePath?:string) {
+      let elements = templatePath ? (await getTemplate(templatePath)).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": this.canvas.theme,
+            "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 +245,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 +282,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 +322,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 +353,8 @@ export function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       this.canvas.theme = "light";
       this.canvas.viewBackgroundColor="#FFFFFF";
     },
-  }
+  };
+  initFonts();
 }
 
 export function destroyExcalidrawAutomate() {
@@ -315,20 +396,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 +412,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,7 +3,7 @@ import {
   WorkspaceLeaf, 
   normalizePath,
   TFile,
-  Menu,
+  WorkspaceItem
 } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -26,13 +26,18 @@ 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 refresh: Function;
   private excalidrawRef: React.MutableRefObject<any>;
   private justLoaded: boolean;
   private plugin: ExcalidrawPlugin;
@@ -40,6 +45,7 @@ export default class ExcalidrawView extends TextFileView {
   constructor(leaf: WorkspaceLeaf, plugin: ExcalidrawPlugin) {
     super(leaf);
     this.getScene = null;
+    this.refresh = null;
     this.excalidrawRef = null;
     this.plugin = plugin;
     this.justLoaded = false;
@@ -97,20 +103,26 @@ 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());
+    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();})));
+    }
   }
 
+  //save current drawing when user closes workspace leaf
   async onunload() {
     if(this.excalidrawRef) await this.save();
   }
-  
+
   setViewData (data: string, clear: boolean) {   
     if (this.app.workspace.layoutReady) {
       this.loadDrawing(data,clear);
@@ -124,6 +136,7 @@ export default class ExcalidrawView extends TextFileView {
     if(this.excalidrawRef) {
       this.excalidrawRef = null;
       this.getScene = null;
+      this.refresh = null;
       ReactDOM.unmountComponentAtNode(this.contentEl);
     }
   }
@@ -182,7 +195,7 @@ export default class ExcalidrawView extends TextFileView {
         width: undefined,
         height: undefined
       });
-
+      
       this.excalidrawRef = excalidrawRef;
       React.useEffect(() => {
         setDimensions({
@@ -196,6 +209,7 @@ export default class ExcalidrawView extends TextFileView {
               width: this.contentEl.clientWidth, 
               height: this.contentEl.clientHeight, 
             });
+            console.log("Excalidraw resize",this.contentEl.clientWidth,this.contentEl.clientHeight);
           } catch(err) {console.log ("Excalidraw React-Wrapper, onResize ",err)}
         };
         window.addEventListener("resize", onResize); 
@@ -219,6 +233,11 @@ export default class ExcalidrawView extends TextFileView {
           }
         });
       };
+
+      this.refresh = () => {
+        if(!excalidrawRef?.current) return;
+        excalidrawRef.current.refresh();
+      };
       
       return React.createElement(
         React.Fragment,
@@ -232,7 +251,6 @@ export default class ExcalidrawView extends TextFileView {
           },
           React.createElement(Excalidraw.default, {
             ref: excalidrawRef,
-            key: "xyz",
             width: dimensions.width,
             height: dimensions.height,
             UIOptions: {
@@ -244,6 +262,7 @@ export default class ExcalidrawView extends TextFileView {
               },
             },
             initialData: initdata,
+            detectScroll: true,
             onChange: (et:ExcalidrawElement[],st:AppState) => {
               if(this.justLoaded) {
                 this.justLoaded = false;             

src/TransclusionIndex.ts

@@ -0,0 +1,117 @@
+import {Vault,TFile,TAbstractFile} from 'obsidian';
+
+export default class TransclusionIndex {
+  private vault: Vault;
+  private doc2ex: Map<string, Set<string>>;
+  private ex2doc: Map<string, Set<string>>;
+
+  constructor(vault: Vault) {
+    this.vault = vault;
+    this.doc2ex = new Map<string,Set<string>>(); //markdown document includes these excalidraw drawings
+    this.ex2doc = new Map<string,Set<string>>(); //excalidraw drawings are referenced in these markdown documents
+  }
+
+  async reloadIndex() {
+    await this.initialize();
+  }
+
+  async initialize(): Promise<void> {
+    const doc2ex = new Map<string,Set<string>>(); 
+    const ex2doc = new Map<string,Set<string>>();
+
+    const markdownFiles = this.vault.getMarkdownFiles();
+    for (const file of markdownFiles) {     
+      const drawings = await this.parseTransclusionsInFile(file);
+      if (drawings.size > 0) {
+        doc2ex.set(file.path, drawings);
+        drawings.forEach((drawing)=>{
+          if(ex2doc.has(drawing)) ex2doc.set(drawing,ex2doc.get(drawing).add(file.path));
+          else ex2doc.set(drawing,(new Set<string>()).add(file.path));
+        });
+      }
+    }
+
+    this.doc2ex = doc2ex;
+    this.ex2doc = ex2doc;
+    this.registerEventHandlers();
+  }
+
+  private updateMarkdownFile(file:TFile,oldExPath:string,newExPath:string) {
+    const fileContents = this.vault.read(file);
+    fileContents.then((c: string) => this.vault.modify(file, c.split("[["+oldExPath).join("[["+newExPath)));
+    const exlist = this.doc2ex.get(file.path);
+    exlist.delete(oldExPath);
+    exlist.add(newExPath);
+    this.doc2ex.set(file.path,exlist);
+  }
+
+  public updateTransclusion(oldExPath: string, newExPath: string): void {
+    if(!this.ex2doc.has(oldExPath)) return; //drawing is not transcluded in any markdown document
+    for(const filePath of this.ex2doc.get(oldExPath)) {
+      this.updateMarkdownFile(this.vault.getAbstractFileByPath(filePath) as TFile,oldExPath,newExPath);
+    }
+    this.ex2doc.set(newExPath, this.ex2doc.get(oldExPath));
+    this.ex2doc.delete(oldExPath);
+  }
+
+  private indexAbstractFile(file: TAbstractFile) {
+    if (!(file instanceof TFile)) return;
+    if (file.extension.toLowerCase() != "md") return; //not a markdown document
+    this.indexFile(file as TFile);
+  }
+
+  private indexFile(file: TFile) {
+    this.clearIndex(file.path);
+    this.parseTransclusionsInFile(file).then((drawings) => {
+      if(drawings.size == 0) return;
+      this.doc2ex.set(file.path, drawings);
+      drawings.forEach((drawing)=>{
+        if(this.ex2doc.has(drawing)) {
+          this.ex2doc.set(drawing,this.ex2doc.get(drawing).add(file.path));
+        }
+        else this.ex2doc.set(drawing,(new Set<string>()).add(file.path));
+      });
+    });
+  }
+
+  private clearIndex(path: string) {
+    if(!this.doc2ex.get(path)) return;
+    this.doc2ex.get(path).forEach((ex)=> {
+      const files = this.ex2doc.get(ex);
+      files.delete(path);
+      if(files.size>0) this.ex2doc.set(ex,files);
+      else this.ex2doc.delete(ex);
+    });
+    this.doc2ex.delete(path);
+  }
+
+  private async parseTransclusionsInFile(file: TFile): Promise<Set<string>> {
+    const fileContents = await this.vault.cachedRead(file);
+    const pattern =  new RegExp('('+String.fromCharCode(96,96,96)+'excalidraw\\s+.*\\[{2})([^|\\]]*).*\\]{2}[\\s]+'+String.fromCharCode(96,96,96),'gm');
+    const transclusions = new Set<string>();
+    for(const transclusion of [...fileContents.matchAll(pattern)]) {
+      if(transclusion[2] && transclusion[2].endsWith('.excalidraw'))
+        transclusions.add(transclusion[2]);
+    }
+    return transclusions;
+  }
+
+  private registerEventHandlers() {
+    this.vault.on('create', (file: TAbstractFile) => {
+      this.indexAbstractFile(file);
+    });
+    this.vault.on('modify', (file: TAbstractFile) => {
+      this.indexAbstractFile(file);
+    });
+    this.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.vault.on('rename', (file: TAbstractFile, oldPath: string) => {
+      this.clearIndex(oldPath);
+      this.indexAbstractFile(file);
+    });
+  }
+}
+
+

src/main.ts

@@ -43,7 +43,7 @@ import {
   initExcalidrawAutomate,
   destroyExcalidrawAutomate
 } from './ExcalidrawTemplate';
-import { norm } from '@excalidraw/excalidraw/types/ga';
+import TransclusionIndex from './TransclusionIndex';
 
 export interface ExcalidrawAutomate extends Window {
   ExcalidrawAutomate: {
@@ -55,7 +55,7 @@ export interface ExcalidrawAutomate extends Window {
 export default class ExcalidrawPlugin extends Plugin {
   public settings: ExcalidrawSettings;
   private openDialog: OpenFileDialog;
-  private excalidrawAutomate: ExcalidrawAutomate;
+  private transclusionIndex: TransclusionIndex;
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
@@ -185,7 +185,7 @@ export default class ExcalidrawPlugin extends Plugin {
             item.setTitle("Create Excalidraw drawing")
               .setIcon(ICON_NAME)
               .onClick(evt => {
-                this.createDrawing(file.path+this.getNextDefaultFilename(),false,file.path);
+                this.createDrawing(this.getNextDefaultFilename(),false,file.path);
               })
           });
         }
@@ -194,6 +194,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
     //watch filename change to rename .svg
     this.app.vault.on('rename',async (file,oldPath) => {
+      this.transclusionIndex.updateTransclusion(oldPath,file.path);
       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'; 
@@ -228,6 +229,17 @@ export default class ExcalidrawPlugin extends Plugin {
         }
       }
     });
+
+    //save open drawings when user quits the application
+    this.app.workspace.on('quit',(tasks) => {
+      const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);      
+      for (let i=0;i<leaves.length;i++) {
+        (leaves[i].view as ExcalidrawView).save(); 
+      }
+    });
+
+    this.transclusionIndex = new TransclusionIndex(this.app.vault);
+    this.transclusionIndex.initialize();
   }
   
   onunload() {
@@ -319,7 +331,7 @@ export default class ExcalidrawPlugin extends Plugin {
       .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;
 

styles.css

@@ -37,4 +37,8 @@ div.excalidraw-svg-right {
 
 div.excalidraw-svg-left {
   text-align: left;
+}
+
+button.ToolIcon_type_button[title="Export"] {
+  display:none;
 }

tsconfig.json

@@ -13,7 +13,7 @@
       "dom",
       "es5",
       "scripthost",
-      "es2015",
+      "es2020",
       "DOM.Iterable"
     ],
     "jsx": "react",