|
|
@@ -347,6 +347,31 @@ To view the full example visit :point_down:
|
|
|
|
|
|
</details>
|
|
|
|
|
|
+### Customizing styles
|
|
|
+
|
|
|
+Excalidraw is using CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
|
|
|
+
|
|
|
+Make sure the selector has higher specificity, e.g. by prefixing it with your app's selector:
|
|
|
+
|
|
|
+```css
|
|
|
+.your-app .excalidraw {
|
|
|
+ --color-primary: red;
|
|
|
+}
|
|
|
+.your-app .excalidraw.theme--dark {
|
|
|
+ --color-primary: pink;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Most notably, you can customize the primary colors, by overriding these variables:
|
|
|
+
|
|
|
+- `--color-primary`
|
|
|
+- `--color-primary-darker`
|
|
|
+- `--color-primary-darkest`
|
|
|
+- `--color-primary-light`
|
|
|
+- `--color-primary-contrast-offset` — a slightly darker (in light mode), or lighter (in dark mode) `--color-primary` color to fix contrast issues (see [Chubb illusion](https://en.wikipedia.org/wiki/Chubb_illusion)). It will fall back to `--color-primary` if not present.
|
|
|
+
|
|
|
+For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/src/css/theme.scss), though most of them will not make sense to override.
|
|
|
+
|
|
|
### Props
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
@@ -365,14 +390,16 @@ To view the full example visit :point_down:
|
|
|
| [`zenModeEnabled`](#zenModeEnabled) | boolean | | This implies if the zen mode is enabled |
|
|
|
| [`gridModeEnabled`](#gridModeEnabled) | boolean | | This implies if the grid mode is enabled |
|
|
|
| [`libraryReturnUrl`](#libraryReturnUrl) | string | | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
|
|
|
-| [`theme`](#theme) | `light` or `dark` | | The theme of the Excalidraw component |
|
|
|
+| [`theme`](#theme) | [THEME.LIGHT](#THEME-1) | [THEME.LIGHT](#THEME-1) | [THEME.LIGHT](#THEME-1) | The theme of the Excalidraw component |
|
|
|
| [`name`](#name) | string | | Name of the drawing |
|
|
|
| [`UIOptions`](#UIOptions) | <pre>{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }</pre> | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L129) | To customise UI options. Currently we support customising [`canvas actions`](#canvasActions) |
|
|
|
-| [`onPaste`](#onPaste) | <pre>(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L17">ClipboardData</a>, event: ClipboardEvent | null) => boolean</pre> | | Callback to be triggered if passed when the something is pasted in to the scene |
|
|
|
+| [`onPaste`](#onPaste) | <pre>(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L21">ClipboardData</a>, event: ClipboardEvent | null) => boolean</pre> | | Callback to be triggered if passed when the something is pasted in to the scene |
|
|
|
| [`detectScroll`](#detectScroll) | boolean | true | Indicates whether to update the offsets when nearest ancestor is scrolled. |
|
|
|
| [`handleKeyboardGlobally`](#handleKeyboardGlobally) | boolean | false | Indicates whether to bind the keyboard events to document. |
|
|
|
| [`onLibraryChange`](#onLibraryChange) | <pre>(items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any> </pre> | | The callback if supplied is triggered when the library is updated and receives the library items. |
|
|
|
| [`autoFocus`](#autoFocus) | boolean | false | Implies whether to focus the Excalidraw component on page load |
|
|
|
+| [`generateIdForFile`](#generateIdForFile) | `(file: File) => string | Promise<string>` | Allows you to override `id` generation for files added on canvas |
|
|
|
+| [`onLinkOpen`](#onLinkOpen) | <pre>(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">NonDeletedExcalidrawElement</a>, event: CustomEvent) </pre> | | This prop if passed will be triggered when link of an element is clicked |
|
|
|
|
|
|
### Dimensions of Excalidraw
|
|
|
|
|
|
@@ -383,12 +410,14 @@ Excalidraw takes `100%` of `width` and `height` of the containing block so make
|
|
|
Every time component updates, this callback if passed will get triggered and has the below signature.
|
|
|
|
|
|
```js
|
|
|
-(excalidrawElements, appState) => void;
|
|
|
+(excalidrawElements, appState, files) => void;
|
|
|
```
|
|
|
|
|
|
1.`excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) in the scene.
|
|
|
|
|
|
-2.`appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) of the scene
|
|
|
+2.`appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) of the scene.
|
|
|
+
|
|
|
+3. `files`: The [`BinaryFiles`]([BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) which are added to the scene.
|
|
|
|
|
|
Here you can try saving the data to your backend or local storage for example.
|
|
|
|
|
|
@@ -402,6 +431,7 @@ This helps to load Excalidraw with `initialData`. It must be an object or a [pro
|
|
|
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | The App state with which Excalidraw should be mounted. |
|
|
|
| `scrollToContent` | boolean | This attribute implies whether to scroll to the nearest element to center once Excalidraw is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained |
|
|
|
| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L151) | This library items with which Excalidraw should be mounted. |
|
|
|
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | The files added to the scene. |
|
|
|
|
|
|
```json
|
|
|
{
|
|
|
@@ -442,7 +472,8 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
|
|
|
| --- | --- | --- |
|
|
|
| ready | `boolean` | This is set to true once Excalidraw is rendered |
|
|
|
| readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
|
|
|
-| [updateScene](#updateScene) | <pre>(<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>)) => void </pre> | updates the scene with the sceneData |
|
|
|
+| [updateScene](#updateScene) | <pre>(scene: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>) => void </pre> | updates the scene with the sceneData |
|
|
|
+| [addFiles](#addFiles) | <pre>(files: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts">BinaryFileData</a>) => void </pre> | add files data to the appState |
|
|
|
| resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
|
|
|
| getSceneElementsIncludingDeleted | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a></pre> | Returns all the elements including the deleted in the scene |
|
|
|
| getSceneElements | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a></pre> | Returns all the elements excluding the deleted in the scene |
|
|
|
@@ -453,6 +484,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
|
|
|
| [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
|
|
|
| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. |
|
|
|
| [id](#id) | string | Unique ID for the excalidraw component. |
|
|
|
+| [getFiles](#getFiles) | <pre>() => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64">files</a> </pre> | This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements. |
|
|
|
|
|
|
#### `readyPromise`
|
|
|
|
|
|
@@ -465,7 +497,7 @@ Since plain object is passed as a `ref`, the `readyPromise` is resolved as soon
|
|
|
### `updateScene`
|
|
|
|
|
|
<pre>
|
|
|
-(<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>)) => void
|
|
|
+(scene: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>) => void
|
|
|
</pre>
|
|
|
|
|
|
You can use this function to update the scene with the sceneData. It accepts the below attributes.
|
|
|
@@ -476,6 +508,13 @@ You can use this function to update the scene with the sceneData. It accepts the
|
|
|
| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L18) | The `appState` to be updated in the scene. |
|
|
|
| `collaborators` | <pre>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L29">Collaborator></a></pre> | The list of collaborators to be updated in the scene. |
|
|
|
| `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. |
|
|
|
+| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L258) | The `libraryItems` to be update in the scene. |
|
|
|
+
|
|
|
+### `addFiles`
|
|
|
+
|
|
|
+<pre>(files: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts">BinaryFileData</a>) => void </pre>
|
|
|
+
|
|
|
+Adds supplied files data to the `appState.files` cache on top of existing files present in the cache.
|
|
|
|
|
|
#### `onCollabButtonClick`
|
|
|
|
|
|
@@ -558,7 +597,7 @@ If supplied, this URL will be used when user tries to install a library from [li
|
|
|
|
|
|
#### `theme`
|
|
|
|
|
|
-This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app.
|
|
|
+This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app. You can use [`THEME`](#THEME-1) to specify the theme.
|
|
|
|
|
|
#### `name`
|
|
|
|
|
|
@@ -599,18 +638,14 @@ The below attributes can be set in `UIOptions.canvasActions.export` to customize
|
|
|
This callback is triggered if passed when something is pasted into the scene. You can use this callback in case you want to do something additional when the paste event occurs.
|
|
|
|
|
|
<pre>
|
|
|
-(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L17">ClipboardData</a>, event: ClipboardEvent | null) => boolean
|
|
|
+(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L21">ClipboardData</a>, event: ClipboardEvent | null) => boolean
|
|
|
</pre>
|
|
|
|
|
|
This callback must return a `boolean` value or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to a boolean value.
|
|
|
|
|
|
In case you want to prevent the excalidraw paste action you must return `false`, it will stop the native excalidraw clipboard management flow (nothing will be pasted into the scene).
|
|
|
|
|
|
-### Does it support collaboration ?
|
|
|
-
|
|
|
-No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
|
|
|
-
|
|
|
-### importLibrary
|
|
|
+#### `importLibrary`
|
|
|
|
|
|
Imports library from given URL. You should call this on `hashchange`, passing the `addLibrary` value if you detect it as shown below. Optionally pass a CSRF `token` to skip prompting during installation (retrievable via `token` key from the url coming from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/)).
|
|
|
|
|
|
@@ -632,17 +667,17 @@ useEffect(() => {
|
|
|
|
|
|
Try out the [Demo](#Demo) to see it in action.
|
|
|
|
|
|
-### detectScroll
|
|
|
+#### `detectScroll`
|
|
|
|
|
|
Indicates whether Excalidraw should listen for `scroll` event on the nearest scrollable container in the DOM tree and recompute the coordinates (e.g. to correctly handle the cursor) when the component's position changes. You can disable this when you either know this doesn't affect your app or you want to take care of it yourself (calling the [`refresh()`](#ref) method).
|
|
|
|
|
|
-### handleKeyboardGlobally
|
|
|
+#### `handleKeyboardGlobally`
|
|
|
|
|
|
Indicates whether to bind keyboard events to `document`. Disabled by default, meaning the keyboard events are bound to the Excalidraw component. This allows for multiple Excalidraw components to live on the same page, and ensures that Excalidraw keyboard handling doesn't collide with your app's (or the browser) when the component isn't focused.
|
|
|
|
|
|
Enable this if you want Excalidraw to handle keyboard even if the component isn't focused (e.g. a user is interacting with the navbar, sidebar, or similar).
|
|
|
|
|
|
-### onLibraryChange
|
|
|
+#### `onLibraryChange`
|
|
|
|
|
|
Ths callback if supplied will get triggered when the library is updated and has the below signature.
|
|
|
|
|
|
@@ -652,58 +687,58 @@ Ths callback if supplied will get triggered when the library is updated and has
|
|
|
|
|
|
It is invoked with empty items when user clears the library. You can use this callback when you want to do something additional when library is updated for example persisting it to local storage.
|
|
|
|
|
|
-### id
|
|
|
+#### `id`
|
|
|
|
|
|
The unique id of the excalidraw component. This can be used to identify the excalidraw component, for example importing the library items to the excalidraw component from where it was initiated when you have multiple excalidraw components rendered on the same page as shown in [multiple excalidraw demo](https://codesandbox.io/s/multiple-excalidraw-k1xx5).
|
|
|
|
|
|
-### autoFocus
|
|
|
+#### `autoFocus`
|
|
|
|
|
|
This prop implies whether to focus the Excalidraw component on page load. Defaults to false.
|
|
|
|
|
|
-### Extra API's
|
|
|
-
|
|
|
-#### `getSceneVersion`
|
|
|
-
|
|
|
-**How to use**
|
|
|
-
|
|
|
-<pre>
|
|
|
-import { getSceneVersion } from "@excalidraw/excalidraw";
|
|
|
-getSceneVersion(elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>)
|
|
|
-</pre>
|
|
|
-
|
|
|
-This function returns the current scene version.
|
|
|
-
|
|
|
-#### `isInvisiblySmallElement`
|
|
|
+#### `generateIdForFile`
|
|
|
|
|
|
-**_Signature_**
|
|
|
+Allows you to override `id` generation for files added on canvas (images). By default, an SHA-1 digest of the file is used.
|
|
|
|
|
|
-<pre>
|
|
|
-isInvisiblySmallElement(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a>): boolean
|
|
|
-</pre>
|
|
|
-
|
|
|
-**How to use**
|
|
|
-
|
|
|
-```js
|
|
|
-import { isInvisiblySmallElement } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+(file: File) => string | Promise<string>
|
|
|
```
|
|
|
|
|
|
-Returns `true` if element is invisibly small (e.g. width & height are zero).
|
|
|
+#### `onLinkOpen`
|
|
|
|
|
|
-#### `getElementMap`
|
|
|
+This prop if passed will be triggered when clicked on link. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
|
|
|
|
|
|
-**_Signature_**
|
|
|
-
|
|
|
-<pre>
|
|
|
-getElementsMap(elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>): {[id: string]: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a>}
|
|
|
-</pre>
|
|
|
-
|
|
|
-**How to use**
|
|
|
+```
|
|
|
+(element: ExcalidrawElement, event: CustomEvent<{ nativeEvent: MouseEvent }>) => void
|
|
|
+```
|
|
|
|
|
|
-```js
|
|
|
-import { getElementsMap } from "@excalidraw/excalidraw";
|
|
|
+Example:
|
|
|
+
|
|
|
+```ts
|
|
|
+const history = useHistory();
|
|
|
+
|
|
|
+// open internal links using the app's router, but opens external links in
|
|
|
+// a new tab/window
|
|
|
+const onLinkOpen: ExcalidrawProps["onLinkOpen"] = useCallback(
|
|
|
+ (element, event) => {
|
|
|
+ const link = element.link;
|
|
|
+ const { nativeEvent } = event.detail;
|
|
|
+ const isNewTab = nativeEvent.ctrlKey || nativeEvent.metaKey;
|
|
|
+ const isNewWindow = nativeEvent.shiftKey;
|
|
|
+ const isInternalLink =
|
|
|
+ link.startsWith("/") || link.includes(window.location.origin);
|
|
|
+ if (isInternalLink && !isNewTab && !isNewWindow) {
|
|
|
+ history.push(link.replace(window.location.origin, ""));
|
|
|
+ // signal that we're handling the redirect ourselves
|
|
|
+ event.preventDefault();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [history],
|
|
|
+);
|
|
|
```
|
|
|
|
|
|
-This function returns an object where each element is mapped to its id.
|
|
|
+### Does it support collaboration ?
|
|
|
+
|
|
|
+No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
|
|
|
|
|
|
### Restore utilities
|
|
|
|
|
|
@@ -761,19 +796,6 @@ import { restore } from "@excalidraw/excalidraw";
|
|
|
|
|
|
This function makes sure elements and state is set to appropriate values and set to default value if not present. It is a combination of [restoreElements](#restoreElements) and [restoreAppState](#restoreAppState).
|
|
|
|
|
|
-#### `serializeAsJSON`
|
|
|
-
|
|
|
-**_Signature_**
|
|
|
-
|
|
|
-<pre>
|
|
|
-serializeAsJSON({
|
|
|
- elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>,
|
|
|
- appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42">AppState</a>,
|
|
|
-}): string
|
|
|
-</pre>
|
|
|
-
|
|
|
-Takes the scene elements and state and returns a JSON string. Deleted `elements`as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/src/data/json.ts#L16) source for details).
|
|
|
-
|
|
|
### Export utilities
|
|
|
|
|
|
#### `exportToCanvas`
|
|
|
@@ -785,14 +807,17 @@ Takes the scene elements and state and returns a JSON string. Deleted `elements`
|
|
|
elements,
|
|
|
appState
|
|
|
getDimensions,
|
|
|
-}: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L10">ExportOpts</a>
|
|
|
+ files
|
|
|
+}: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L12">ExportOpts</a>
|
|
|
</pre>
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
| --- | --- | --- | --- |
|
|
|
| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types) | | The elements to be exported to canvas |
|
|
|
| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L12) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The app state of the scene |
|
|
|
-| getDimensions | `(width: number, height: number) => {width: number, height: number, scale: number)` | `(width, height) => ({ width, height, scale: 1 })` | A function which returns the width, height and scale with which canvas is to be exported. |
|
|
|
+| getDimensions | `(width: number, height: number) => { width: number, height: number, scale?: number }` | undefined | A function which returns the `width`, `height`, and optionally `scale` (defaults `1`), with which canvas is to be exported. |
|
|
|
+| maxWidthOrHeight | `number` | undefined | The maximum width or height of the exported image. If provided, `getDimensions` is ignored. |
|
|
|
+| files | [BinaryFiles](The [`BinaryFiles`](<[BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64)>) | undefined | The files added to the scene. |
|
|
|
|
|
|
**How to use**
|
|
|
|
|
|
@@ -828,8 +853,6 @@ import { exportToBlob } from "@excalidraw/excalidraw";
|
|
|
|
|
|
Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). It internally uses [canvas.ToBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob).
|
|
|
|
|
|
-Note: `appState.exportBackground` is always set to `true` if exporting to `image/jpeg` to ensure the alpha channel isn't compressed to black.
|
|
|
-
|
|
|
#### `exportToSvg`
|
|
|
|
|
|
**_Signature_**
|
|
|
@@ -840,6 +863,7 @@ exportToSvg({
|
|
|
appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42">AppState</a>,
|
|
|
exportPadding?: number,
|
|
|
metadata?: string,
|
|
|
+ files?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64">BinaryFiles</a>
|
|
|
})
|
|
|
</pre>
|
|
|
|
|
|
@@ -848,6 +872,7 @@ exportToSvg({
|
|
|
| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | | The elements to exported as svg |
|
|
|
| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The app state of the scene |
|
|
|
| exportPadding | number | 10 | The padding to be added on canvas |
|
|
|
+| files | [BinaryFiles](The [`BinaryFiles`](<[BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64)>) | undefined | The files added to the scene. |
|
|
|
|
|
|
This function returns a promise which resolves to svg of the exported drawing.
|
|
|
|
|
|
@@ -860,25 +885,49 @@ This function returns a promise which resolves to svg of the exported drawing.
|
|
|
| exportWithDarkMode | boolean | false | Indicates whether to export with dark mode |
|
|
|
| exportEmbedScene | boolean | false | Indicates whether scene data should be embedded in svg. This will increase the svg size. |
|
|
|
|
|
|
-### FONT_FAMILY
|
|
|
+### Extra API's
|
|
|
+
|
|
|
+#### `serializeAsJSON`
|
|
|
+
|
|
|
+**_Signature_**
|
|
|
+
|
|
|
+<pre>
|
|
|
+serializeAsJSON({
|
|
|
+ elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>,
|
|
|
+ appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42">AppState</a>,
|
|
|
+}): string
|
|
|
+</pre>
|
|
|
+
|
|
|
+Takes the scene elements and state and returns a JSON string. Deleted `elements`as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/src/data/json.ts#L16) source for details).
|
|
|
+
|
|
|
+#### `getSceneVersion`
|
|
|
|
|
|
**How to use**
|
|
|
|
|
|
-```js
|
|
|
-import { FONT_FAMILY } from "@excalidraw/excalidraw";
|
|
|
-```
|
|
|
+<pre>
|
|
|
+import { getSceneVersion } from "@excalidraw/excalidraw";
|
|
|
+getSceneVersion(elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>)
|
|
|
+</pre>
|
|
|
|
|
|
-`FONT_FAMILY` contains all the font families used in `Excalidraw` as explained below
|
|
|
+This function returns the current scene version.
|
|
|
|
|
|
-| Font Family | Description |
|
|
|
-| ----------- | -------------------- |
|
|
|
-| Virgil | The handwritten font |
|
|
|
-| Helvetica | The Normal Font |
|
|
|
-| Cascadia | The Code Font |
|
|
|
+#### `isInvisiblySmallElement`
|
|
|
|
|
|
-Defaults to `FONT_FAMILY.Virgil` unless passed in `initialData.appState.currentItemFontFamily`.
|
|
|
+**_Signature_**
|
|
|
|
|
|
-### loadLibraryFromBlob
|
|
|
+<pre>
|
|
|
+isInvisiblySmallElement(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a>): boolean
|
|
|
+</pre>
|
|
|
+
|
|
|
+**How to use**
|
|
|
+
|
|
|
+```js
|
|
|
+import { isInvisiblySmallElement } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+
|
|
|
+Returns `true` if element is invisibly small (e.g. width & height are zero).
|
|
|
+
|
|
|
+#### `loadLibraryFromBlob`
|
|
|
|
|
|
```js
|
|
|
import { loadLibraryFromBlob } from "@excalidraw/excalidraw";
|
|
|
@@ -892,7 +941,7 @@ loadLibraryFromBlob(blob: <a href="https://developer.mozilla.org/en-US/docs/Web/
|
|
|
|
|
|
This function loads the library from the blob.
|
|
|
|
|
|
-### loadFromBlob
|
|
|
+#### `loadFromBlob`
|
|
|
|
|
|
**How to use**
|
|
|
|
|
|
@@ -908,7 +957,7 @@ loadFromBlob(blob: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blo
|
|
|
|
|
|
This function loads the scene data from the blob. If you pass `localAppState`, `localAppState` value will be preferred over the `appState` derived from `blob`
|
|
|
|
|
|
-### getFreeDrawSvgPath
|
|
|
+#### `getFreeDrawSvgPath`
|
|
|
|
|
|
**How to use**
|
|
|
|
|
|
@@ -924,6 +973,103 @@ getFreeDrawSvgPath(element: <a href="https://github.com/excalidraw/excalidraw/bl
|
|
|
|
|
|
This function returns the free draw svg path for the element.
|
|
|
|
|
|
+#### `isLinearElement`
|
|
|
+
|
|
|
+**How to use**
|
|
|
+
|
|
|
+```js
|
|
|
+import { isLinearElement } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+
|
|
|
+**Signature**
|
|
|
+
|
|
|
+<pre>
|
|
|
+isLinearElement(elementType?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L80">ExcalidrawElement</a>): boolean
|
|
|
+</pre>
|
|
|
+
|
|
|
+This function returns true if the element is linear type (`arrow` |`line`) else returns false.
|
|
|
+
|
|
|
+#### `getNonDeletedElements`
|
|
|
+
|
|
|
+**How to use**
|
|
|
+
|
|
|
+```js
|
|
|
+import { getNonDeletedElements } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+
|
|
|
+**Signature**
|
|
|
+
|
|
|
+<pre>
|
|
|
+getNonDeletedElements(elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L80"> readonly ExcalidrawElement[]</a>): as readonly <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L90">NonDeletedExcalidrawElement[]</a>
|
|
|
+</pre>
|
|
|
+
|
|
|
+This function returns an array of deleted elements.
|
|
|
+
|
|
|
+### Exported constants
|
|
|
+
|
|
|
+#### `FONT_FAMILY`
|
|
|
+
|
|
|
+**How to use**
|
|
|
+
|
|
|
+```js
|
|
|
+import { FONT_FAMILY } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+
|
|
|
+`FONT_FAMILY` contains all the font families used in `Excalidraw` as explained below
|
|
|
+
|
|
|
+| Font Family | Description |
|
|
|
+| ----------- | -------------------- |
|
|
|
+| Virgil | The handwritten font |
|
|
|
+| Helvetica | The Normal Font |
|
|
|
+| Cascadia | The Code Font |
|
|
|
+
|
|
|
+Defaults to `FONT_FAMILY.Virgil` unless passed in `initialData.appState.currentItemFontFamily`.
|
|
|
+
|
|
|
+#### `THEME`
|
|
|
+
|
|
|
+**How to use**
|
|
|
+
|
|
|
+```js
|
|
|
+import { THEME } from "@excalidraw/excalidraw";
|
|
|
+```
|
|
|
+
|
|
|
+`THEME` contains all the themes supported by `Excalidraw` as explained below
|
|
|
+
|
|
|
+| Theme | Description |
|
|
|
+| ----- | --------------- |
|
|
|
+| LIGHT | The light theme |
|
|
|
+| DARK | The Dark theme |
|
|
|
+
|
|
|
+Defaults to `THEME.LIGHT` unless passed in `initialData.appState.theme`
|
|
|
+
|
|
|
## Need help?
|
|
|
|
|
|
Check out the existing [Q&A](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw). If you have any queries or need help, ask us [here](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw).
|
|
|
+
|
|
|
+### Development
|
|
|
+
|
|
|
+#### Install the dependencies
|
|
|
+
|
|
|
+```bash
|
|
|
+yarn
|
|
|
+```
|
|
|
+
|
|
|
+#### Start the server
|
|
|
+
|
|
|
+```bash
|
|
|
+yarn start
|
|
|
+```
|
|
|
+
|
|
|
+[http://localhost:3001](http://localhost:3001) will open in your default browser.
|
|
|
+
|
|
|
+The example is same as the [codesandbox example](https://ehlz3.csb.app/)
|
|
|
+
|
|
|
+#### Create a test release
|
|
|
+
|
|
|
+You can create a test release by posting the below comment in your pull request
|
|
|
+
|
|
|
+```
|
|
|
+@excalibot release package
|
|
|
+```
|
|
|
+
|
|
|
+Once the version is released `@excalibot` will post a comment with the release version.
|
Aakansha Doshi