updated navigation

2025-08-06 05:46:28 +00:00 · 2021-05-08 20:42:11 +02:00
parent 7455405425
commit 045ee288d5
12 changed files with 65 additions and 48 deletions
--- a/docs/API/attributes_functions_overview.md
+++ b/docs/API/attributes_functions_overview.md
@@ -1,4 +1,5 @@
-# Attributes and functions overivew
+# [◀ Excalidraw Automate How To](../readme.md)
+## Attributes and functions overivew
 Here's the interface implemented by ExcalidrawAutomate:

 ```javascript
--- a/docs/API/canvas_style.md
+++ b/docs/API/canvas_style.md
@@ -1,14 +1,15 @@
-# Canvas style settings
+# [◀ Excalidraw Automate How To](../readme.md)
+## Canvas style settings
 Sets the properties of the canvas. 

-## theme, setTheme()
+### theme, setTheme()
 String. Valid values are "light" and "dark".

 `setTheme()` accepts a number:
 - 0: "light"
 - any other number: "dark"

-## viewBackgroundColor
+### 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`.
--- a/docs/API/element_style.md
+++ b/docs/API/element_style.md
@@ -1,20 +1,21 @@
-# Element style settings
+# [◀ 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
+### 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
+### 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
+### angle
 Number. Rotation in radian. 90° == `Math.PI/2`.

-## fillStyle, setFillStyle()
+### fillStyle, setFillStyle()
 ```typescript
 type FillStyle = "hachure" | "cross-hatch" | "solid";
 setFillStyle (val:number);
@@ -26,10 +27,10 @@ fillStyle is a string.
 - 1: "cross-hatch"
 - any other number: "solid"

-## strokeWidth
+### strokeWidth
 Number, sets the width of the stroke.

-## strokeStyle, setStrokeStyle()
+### strokeStyle, setStrokeStyle()
 ```typescript
 type StrokeStyle = "solid" | "dashed" | "dotted";
 setStrokeStyle (val:number);
@@ -41,16 +42,16 @@ strokeStyle is a string.
 - 1: "dashed"
 - any other number: "dotted"

-## roughness
+### roughness
 Number. Called sloppiness in Excalidraw. Three values are accepted:
 - 0: Architect
 - 1: Artist
 - 2: Cartoonist

-## opacity
+### opacity
 Number between 0 and 100. The opacity of an object, both stroke and fill.

-## strokeSharpness, setStrokeSharpness()
+### strokeSharpness, setStrokeSharpness()
 ```typescript
 type StrokeSharpness = "round" | "sharp";
 setStrokeSharpness(val:nmuber);
@@ -63,7 +64,7 @@ strokeSharpness is a string.
 - 0: "round"
 - any other number: "sharp"

-## fontFamily, setFontFamily()
+### fontFamily, setFontFamily()
 Number. Valid values are 1,2 and 3.

 `setFontFamily()` will also accept a number and return the name of the font.
@@ -71,20 +72,20 @@ Number. Valid values are 1,2 and 3.
 - 2: "Helvetica, Segoe UI Emoji"
 - 3: "Cascadia, Segoe UI Emoji"

-## fontSize
+### fontSize
 Number. Default value is 20 px

-## textAlign
+### 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
+### 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
+### 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.
--- a/docs/API/introduction.md
+++ b/docs/API/introduction.md
@@ -1,4 +1,4 @@
-# [Excalidraw Automate How To](../readme.md)
+# [◀ Excalidraw Automate How To](../readme.md)
 ## Introduction to the API
 You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend staring your Automate scripts with the following code.

--- a/docs/API/objects.md
+++ b/docs/API/objects.md
@@ -1,9 +1,10 @@
-# Adding objects
+# [◀ 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()
+### addRect(), addDiamond(), addEllipse()
 ```typescript
 addRect(topX:number, topY:number, width:number, height:number):string
 addDiamond(topX:number, topY:number, width:number, height:number):string
@@ -11,7 +12,7 @@ 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
+### addText()
 ```typescript
 addText(topX:number, topY:number, text:string, formatting?:{width:number, height:number,textAlign: string, verticalAlign:string, box: boolean, boxPadding: number}):string
 ```
@@ -25,13 +26,13 @@ Formatting parameters are optional:

 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()
+### 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()
+### addArrow()
 ```typescript
 addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void
 ```
@@ -42,7 +43,7 @@ Adds an arrow following the points provided. Must include at least two points `p

 `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()
+### 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
@@ -57,7 +58,7 @@ Connects two objects with an arrow.

 `startArrowHead` and `endArrowHead` work as described for `addArrow()` above.

-## addToGroup()
+### addToGroup()
 ```typescript
 addToGroup(objectIds:[]):void
 ```
--- a/docs/API/utility.md
+++ b/docs/API/utility.md
@@ -1,17 +1,18 @@
-# Utility functions
-## clear()
+# [◀ Excalidraw Automate How To](../readme.md)
+## Utility functions
+### clear()
 `clear()` will clear objects from cache, but will retain element style settings.

-## reset()
+### reset()
 `reset()` will first call `clear()` and then reset element style to defaults.

-## toClipboard()
+### 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()
+### create()
 ```typescript
 async create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean})
 ```
@@ -29,13 +30,13 @@ Example:
 ```javascript
 create({filename:"my drawing", foldername:"myfolder/subfolder/", templatePath: "Excalidraw/template.excalidraw", onNewPane: true});
 ```
-## createSVG()
+### createSVG()
 ```typescript
 async createSVG(templatePath?:string)
 ```
 Returns an HTML SVGSVGElement containing the generated drawing.

-## createPNG()
+### createPNG()
 ```typescript
 async createPNG(templatePath?:string)
 ```
--- a/docs/Examples/apply_template.md
+++ b/docs/Examples/apply_template.md
@@ -1,3 +1,4 @@
+# [◀ 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.

--- a/docs/Examples/connect_objects.md
+++ b/docs/Examples/connect_objects.md
@@ -1,4 +1,5 @@
-# Connect Objects
+# [◀ 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!*
--- a/docs/Examples/dataviewjs_familytree.md
+++ b/docs/Examples/dataviewjs_familytree.md
@@ -1,6 +1,11 @@
-# Family tree from Tasklist using dataviewjs
+# [◀ 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
@@ -12,6 +17,7 @@ Task List looks like:
        - [ ] MeeMaw Li
 ```

+### dataviewjs script
 Code to render the excalidraw looks like:
 ```javascript
 function crawl(subtasks) {
@@ -58,6 +64,4 @@ buildMindmap(tasks.subtasks, 2, 0, tasks.objectID);
  const el=document.querySelector("div.block-language-dataviewjs"); 
  el.appendChild(svg); 
 })();
-```
-And the output is:
-![image](https://user-images.githubusercontent.com/14358394/117549637-d3ecc280-b03b-11eb-952a-840a9a75b6ca.png)
+```
--- a/docs/Examples/dataviewjs_mindmap.md
+++ b/docs/Examples/dataviewjs_mindmap.md
@@ -1,6 +1,11 @@
-# Mindmap from Tasklist using dataviewjs
+# [◀ 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
@@ -12,6 +17,7 @@ The input file is `Demo.md` with the following contents:
        - [ ] task 1.3.1
 ```

+### dataviewjs script
 The `dataviewjs` script looks like this: 
 *Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
@@ -51,7 +57,4 @@ buildMindmap(tasks.subtasks, 1, 0, tasks.objectID);
  const el=document.querySelector("div.block-language-dataviewjs"); 
  el.appendChild(svg); 
 })();
-```
-And the output is:
-
-![image](https://user-images.githubusercontent.com/14358394/117548665-71dd8e80-b036-11eb-8a45-4169fdd7cc05.png)
+```
--- a/docs/Examples/insert_new_drawing.md
+++ b/docs/Examples/insert_new_drawing.md
@@ -1,4 +1,5 @@
-# Insert new drawing into currently edited document
+# [◀ 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!*
--- a/docs/Examples/templater_mindmap.md
+++ b/docs/Examples/templater_mindmap.md
@@ -1,8 +1,11 @@
-# Generating a simple mindmap from a text outline
+# [◀ 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
@@ -18,8 +21,7 @@ Example input:
 	- Test 3.1
 ```

-The script:
-
+### Templater script
 *Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
 <%*