From 045ee288d514fb6d131d89cfb86fb30da83772c3 Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Sat, 8 May 2021 20:42:11 +0200 Subject: [PATCH] updated navigation --- docs/API/attributes_functions_overview.md | 3 ++- docs/API/canvas_style.md | 7 ++--- docs/API/element_style.md | 31 ++++++++++++----------- docs/API/introduction.md | 2 +- docs/API/objects.md | 15 ++++++----- docs/API/utility.md | 15 ++++++----- docs/Examples/apply_template.md | 1 + docs/Examples/connect_objects.md | 3 ++- docs/Examples/dataviewjs_familytree.md | 12 ++++++--- docs/Examples/dataviewjs_mindmap.md | 13 ++++++---- docs/Examples/insert_new_drawing.md | 3 ++- docs/Examples/templater_mindmap.md | 8 +++--- 12 files changed, 65 insertions(+), 48 deletions(-) diff --git a/docs/API/attributes_functions_overview.md b/docs/API/attributes_functions_overview.md index 77004b4..527134e 100644 --- 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 diff --git a/docs/API/canvas_style.md b/docs/API/canvas_style.md index 5baa3b5..6f361fd 100644 --- 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`. \ No newline at end of file diff --git a/docs/API/element_style.md b/docs/API/element_style.md index cac5f0c..decc020 100644 --- 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. \ No newline at end of file diff --git a/docs/API/introduction.md b/docs/API/introduction.md index 257bb79..4367687 100644 --- 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. diff --git a/docs/API/objects.md b/docs/API/objects.md index d75c936..888310e 100644 --- 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 ``` diff --git a/docs/API/utility.md b/docs/API/utility.md index 04eb176..4bf47d6 100644 --- 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) ``` diff --git a/docs/Examples/apply_template.md b/docs/Examples/apply_template.md index 5f55c47..19ab66f 100644 --- 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. diff --git a/docs/Examples/connect_objects.md b/docs/Examples/connect_objects.md index df64722..1774df3 100644 --- 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!* diff --git a/docs/Examples/dataviewjs_familytree.md b/docs/Examples/dataviewjs_familytree.md index d94b525..0356721 100644 --- 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) +``` \ No newline at end of file diff --git a/docs/Examples/dataviewjs_mindmap.md b/docs/Examples/dataviewjs_mindmap.md index d0fd900..0ee596f 100644 --- 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) +``` \ No newline at end of file diff --git a/docs/Examples/insert_new_drawing.md b/docs/Examples/insert_new_drawing.md index ea0a4be..751e093 100644 --- 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!* diff --git a/docs/Examples/templater_mindmap.md b/docs/Examples/templater_mindmap.md index 6b91bf6..528eeaf 100644 --- 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 <%*