renun/obsidian-excalidraw-plugin
1
0
Fork 0
mirror of https://github.com/zsviczian/obsidian-excalidraw-plugin.git synced 2025-08-06 05:46:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated navigation

Browse Source
This commit is contained in:
Zsolt Viczian
2021-05-08 20:42:11 +02:00
parent 7455405425
commit 045ee288d5
12 changed files with 65 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/API/attributes_functions_overview.md
View File

@@ -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

7
docs/API/canvas_style.md
View File

@@ -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`.

31
docs/API/element_style.md
View File

@@ -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.

2
docs/API/introduction.md
View File

@@ -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.

15
docs/API/objects.md
View File

@@ -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
```

15
docs/API/utility.md
View File

@@ -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)
```