diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index 538f0e33..02aade54 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -15,10 +15,8 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.x - - name: Install - run: yarn --frozen-lockfile - name: Install in packages/excalidraw - run: yarn --frozen-lockfile + run: yarn working-directory: packages/excalidraw env: CI: true diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx index 77c746b8..e601a247 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx @@ -133,7 +133,7 @@ function App() { } ``` -Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/src/components/mainMenu/DefaultItems.tsx) of the default items. +Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items. ### MainMenu.Group diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx index a6c95ab2..029f5b05 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx @@ -37,7 +37,7 @@ Defaults to `THEME.LIGHT` unless passed in `initialData.appState.theme` ### MIME_TYPES -[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L101) contains all the mime types supported by `Excalidraw`. +[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L101) contains all the mime types supported by `Excalidraw`. **How to use ** diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx index 838896c4..b633236a 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx @@ -2,9 +2,9 @@ We support a simplified API to make it easier to generate Excalidraw elements programmatically. This API is in beta and subject to change before stable. You can check the [PR](https://github.com/excalidraw/excalidraw/pull/6546) for more details. -For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers). +For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers). -The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements). +The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements). ## convertToExcalidrawElements @@ -19,7 +19,7 @@ convertToExcalidrawElements( | Name | Type | Default | Description | | --- | --- | --- | --- | -| `elements` | [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L137) | | The Excalidraw element Skeleton which needs to be converted to Excalidraw elements. | +| `elements` | [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L137) | | The Excalidraw element Skeleton which needs to be converted to Excalidraw elements. | | `opts` | `{ regenerateIds: boolean }` | ` {regenerateIds: true}` | By default `id` will be regenerated for all the elements irrespective of whether you pass the `id` so if you don't want the ids to regenerated, you can set this attribute to `false`. | **_How to use_** @@ -71,7 +71,7 @@ function App() { } ``` -You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L27) as well to decorate the shapes. +You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L27) as well to decorate the shapes. :::info @@ -192,7 +192,7 @@ convertToExcalidrawElements([ ### Text Containers -In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional. +In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional. If you don't provide the dimensions of container, we calculate it based of the label dimensions. @@ -326,7 +326,7 @@ convertToExcalidrawElements([ ### Arrow bindings -To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional +To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional ```js convertToExcalidrawElements([ diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx index 22e9034f..c27e9614 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx @@ -2,7 +2,7 @@
(api:{" "} - + ExcalidrawAPI ) => void; @@ -17,7 +17,7 @@ export default function App() { } ``` -You can use this prop when you want to access some [Excalidraw APIs](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L616). We expose the below APIs :point_down: +You can use this prop when you want to access some [Excalidraw APIs](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L616). We expose the below APIs :point_down: | API | Signature | Usage | | --- | --- | --- | @@ -52,7 +52,7 @@ Additionally `ready` and `readyPromise` from the API have been discontinued. The(scene:{" "} - + sceneData ) => void @@ -62,9 +62,9 @@ You can use this function to update the scene with the sceneData. It accepts the | Name | Type | Description | | --- | --- | --- | -| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L38) | The `elements` to be updated in the scene | -| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L39) | The `appState` to be updated in the scene. | -| `collaborators` |Map
| The list of collaborators to be updated in the scene. | +| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene | +| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. | +| `collaborators` |Collaborator> Map
| The list of collaborators to be updated in the scene. | | `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. | ```jsx live @@ -125,13 +125,13 @@ function App() {Collaborator> (opts: {
libraryItems:{" "} - + LibraryItemsSource ;
merge?: boolean;
prompt?: boolean;
openLibraryMenu?: boolean;
defaultStatus?: "unpublished" | "published";
}) => Promise< - + LibraryItems > @@ -141,7 +141,7 @@ You can use this function to update the library. It accepts the below attributes | Name | Type | Default | Description | | --- | --- | --- | --- | -| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library | +| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library | | `merge` | boolean | `false` | Whether to merge with existing library items. | | `prompt` | boolean | `false` | Whether to prompt user for confirmation. | | `openLibraryMenu` | boolean | `false` | Keep the library menu open after library is updated. | @@ -189,7 +189,7 @@ function App() {setExcalidrawAPI(api)} - // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/src/initialData.js + // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/packages/excalidraw/initialData.js initialData={{ libraryItems: initialData.libraryItems, appState: { openSidebar: "library" }, @@ -204,7 +204,7 @@ function App() { (files:{" "} - + BinaryFileData ) => void @@ -224,7 +224,7 @@ Resets the scene. If `resetLoadingState` is passed as true then it will also for() =>{" "} - + ExcalidrawElement[]@@ -235,7 +235,7 @@ Returns all the elements including the deleted in the scene.() => NonDeleted< - + ExcalidrawElement []> @@ -247,7 +247,7 @@ Returns all the elements excluding the deleted in the scene() =>{" "} - + AppState@@ -288,7 +288,7 @@ Scroll the nearest element out of the elements supplied to the center of the vie | Attribute | type | default | Description | | --- | --- | --- | --- | -| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | All scene elements | The element(s) to scroll to. | +| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | All scene elements | The element(s) to scroll to. | | opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. | | opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. | | opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) | @@ -336,7 +336,7 @@ The unique id of the excalidraw component. This can be used to identify the exca() =>{" "} - + files@@ -364,7 +364,7 @@ This API has the below signature. It sets the `tool` passed in param as the acti | Name | Type | Default | Description | | --- | --- | --- | --- | -| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L91) | `selection` | The tool type which should be set as active tool. When setting `image` as active tool, the insertion onto canvas when using image tool is disabled by default, so you can enable it by setting `insertOnCanvasDirectly` to `true` | +| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool. When setting `image` as active tool, the insertion onto canvas when using image tool is disabled by default, so you can enable it by setting `insertOnCanvasDirectly` to `true` | | `locked` | `boolean` | `false` | Indicates whether the the active tool should be locked. It behaves the same way when using the `lock` tool in the editor interface | ## setCursor diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx index 7d79128f..0fec6ea0 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx @@ -1,18 +1,18 @@ # initialData-{ elements?: ExcalidrawElement[], appState?: AppState } +{ elements?: ExcalidrawElement[], appState?: AppState }This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields. | Name | Type | Description | | --- | --- | --- | -| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. | -| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. | +| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. | +| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. | | `scrollToContent` | `boolean` | This attribute indicates 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#L247) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)> | This library items with which `Excalidraw` should be mounted. | -| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L82) | The `files` added to the scene. | +| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L247) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200)> | This library items with which `Excalidraw` should be mounted. | +| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L82) | The `files` added to the scene. | You might want to use this when you want to load excalidraw with some initial elements and app state. diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx index 069b1590..40773a1a 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx @@ -23,7 +23,7 @@ All `props` are _optional_. | [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to | | [`theme`](#theme) | `"light"` | `"dark"` | `"light"` | The theme of the Excalidraw component | | [`name`](#name) | `string` | | Name of the drawing | -| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) | +| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) | | [`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. | | [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load | @@ -33,7 +33,7 @@ All `props` are _optional_. ### Storing custom data on Excalidraw elements -Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L66) and is optional. +Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record `](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L66) and is optional. You can use this to add any extra information you need to keep track of. @@ -59,11 +59,11 @@ Every time component updates, this callback if passed will get triggered and has (excalidrawElements, appState, files) => void; ``` -1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) in the scene. +1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) in the scene. -2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene. +2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene. -3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) which are added to the scene. +3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) which are added to the scene. Here you can try saving the data to your backend or local storage for example. @@ -79,14 +79,14 @@ This callback is triggered when mouse pointer is updated. 2.`button`: The position of the button. This will be one of `["down", "up"]` -3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L131) map of the scene +3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L131) map of the scene ```js (exportedElements, appState, canvas) => void ``` -1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L87) which needs to be exported. -2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene. +1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L87) which needs to be exported. +2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene. 3. `canvas`: The `HTMLCanvasElement` of the scene. ### onPointerDown @@ -96,11 +96,11 @@ This prop if passed will be triggered on pointer down events and has the below s (activeTool:{" "} - + {" "} AppState["activeTool"] - , pointerDownState: + , pointerDownState: PointerDownState ) => void@@ -119,7 +119,7 @@ This callback is triggered if passed when something is pasted into the scene. Yo(data:{" "} - + ClipboardData , event: ClipboardEvent | null) => boolean @@ -135,7 +135,7 @@ This callback if supplied will get triggered when the library is updated and has(items:{" "} - + LibraryItems ) => void | Promise<any> @@ -149,7 +149,7 @@ This prop if passed will be triggered when clicked on `link`. To handle the redi(element:{" "} - + ExcalidrawElement , event: CustomEvent<{ nativeEvent: MouseEvent }>) => void @@ -182,7 +182,7 @@ const onLinkOpen: ExcalidrawProps["onLinkOpen"] = useCallback( ### langCode -Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below. +Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below. ```js import { defaultLang, languages } from "@excalidraw/excalidraw"; @@ -191,7 +191,7 @@ import { defaultLang, languages } from "@excalidraw/excalidraw"; | name | type | | --- | --- | | `defaultLang` | `string` | -| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) | +| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) | ### viewModeEnabled diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx index f0f4adc4..0df7634c 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx @@ -4,7 +4,7 @@(isMobile: boolean, appState: - + AppState ) => JSX | null@@ -66,7 +66,7 @@ function App() {(element: NonDeleted<ExcalidrawEmbeddableElement>, appState:{" "} - + AppState ) => JSX.Element | null diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx index ac91f9e0..5c2c40cc 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx @@ -4,7 +4,7 @@ This prop can be used to customise UI of Excalidraw. Currently we support custom{ -| Name | Type | Default | Description | | --- | --- | --- | --- | -| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to be exported to canvas. | -| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L17) | The app state of the scene. | +| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to be exported to canvas. | +| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. | | [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. | | `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. | -| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59) | _ | The files added to the scene. | +| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. | | `exportPadding` | `number` | `10` | The `padding` to be added on canvas. | @@ -105,7 +105,7 @@ function App() {
canvasActions?: +
canvasActions?: CanvasActions ,
dockedSidebarBreakpoint?: number,
welcomeScreen?: boolean
@@ -55,7 +55,7 @@ If `UIOptions.canvasActions.export` is `false` the export button will not be ren ## dockedSidebarBreakpoint -This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L161). +This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L161). If the _width_ of the _excalidraw_ container exceeds _dockedSidebarBreakpoint_, the sidebar will be `dockable` and the button to `dock` the sidebar will be shown If user choses to `dock` the sidebar, it will push the right part of the UI towards the left, making space for the sidebar as shown below. diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx index f5469f01..ef59054c 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx @@ -20,16 +20,16 @@ exportToCanvas({
getDimensions,
files,
exportPadding?: number;
-}: ExportOpts +}: ExportOptsexportToBlob(
- opts: ExportOpts & {
+ opts: ExportOpts & {
mimeType?: string,
quality?: number,
exportPadding?: number;
@@ -134,16 +134,16 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-exportToSvg({
elements: - + ExcalidrawElement[] ,
appState: - AppState + AppState ,
exportPadding: number,
metadata: string,
files: - + BinaryFiles ,
}); @@ -151,10 +151,10 @@ exportToSvg({
| Name | Type | Default | Description | | --- | --- | --- | --- | -| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to exported as `svg `| -| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The `appState` of the scene | +| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to exported as `svg `| +| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene | | exportPadding | number | 10 | The `padding` to be added on canvas | -| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | undefined | The `files` added to the scene. | +| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. | This function returns a promise which resolves to `svg` of the exported drawing. @@ -164,7 +164,7 @@ This function returns a promise which resolves to `svg` of the exported drawing.exportToClipboard(| Prop | Type | Description | | ---- | ---- | ---- | -| `elements` | ImportedDataState["elements"] | The `elements` to be restored | -| [`localElements`](#localelements) | ExcalidrawElement[] | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. | +| `elements` | ImportedDataState["elements"] | The `elements` to be restored | +| [`localElements`](#localelements) | ExcalidrawElement[] | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. | | [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements #### localElements @@ -70,15 +70,15 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
- opts: ExportOpts & {
+ opts: ExportOpts & {
mimeType?: string,
quality?: number;
type: 'png' | 'svg' |'json'
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx index 665a1ef9..3f254648 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx @@ -8,7 +8,7 @@ id: "restore" **_Signature_**-restoreAppState(appState: ImportedDataState["appState"],**_How to use_** @@ -17,7 +17,7 @@ restoreAppState(appState: restoreElements( - elements: ImportedDataState["elements"],
localAppState: Partial<AppState> | null): AppState +restoreAppState(appState: ImportedDataState["appState"],
localAppState: Partial<AppState> | null): AppState
- localElements: ExcalidrawElement[] | null | undefined): ExcalidrawElement[],
+ elements: ImportedDataState["elements"],
+ localElements: ExcalidrawElement[] | null | undefined): ExcalidrawElement[],
opts: { refreshDimensions?: boolean, repairBindings?: boolean }
)restore( - data: ImportedDataState,-See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreElements) about `localElements`. +See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreElements) about `localElements`. **_How to use_** @@ -93,7 +93,7 @@ This function makes sure elements and state is set to appropriate values and set **_Signature_**
- localAppState: Partial<AppState> | null | undefined,
- localElements: ExcalidrawElement[] | null | undefined
): DataState
+ data: ImportedDataState,
+ localAppState: Partial<AppState> | null | undefined,
+ localElements: ExcalidrawElement[] | null | undefined
): DataState
opts: { refreshDimensions?: boolean, repairBindings?: boolean }
)-restoreLibraryItems(libraryItems: ImportedDataState["libraryItems"],diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md b/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md index 9f3d3287..69bd88a8 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md +++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md @@ -8,7 +8,7 @@ These are pure Javascript functions exported from the @excalidraw/excalidraw [`@ ### serializeAsJSON -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#L42) source for details). +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/packages/excalidraw/data/json.ts#L42) source for details). If you want to overwrite the `source` field in the `JSON` string, you can set `window.EXCALIDRAW_EXPORT_SOURCE` to the desired value. @@ -16,8 +16,8 @@ If you want to overwrite the `source` field in the `JSON` string, you can set `w
+restoreLibraryItems(libraryItems: ImportedDataState["libraryItems"],
defaultStatus: "published" | "unpublished")serializeAsJSON({@@ -37,7 +37,7 @@ If you want to overwrite the source field in the JSON string, you can set `windo
- elements: ExcalidrawElement[],
- appState: AppState,
+ elements: ExcalidrawElement[],
+ appState: AppState,
}): stringserializeLibraryAsJSON( - libraryItems: LibraryItems[]) + libraryItems: LibraryItems[])**How to use** @@ -53,7 +53,7 @@ Returns `true` if element is invisibly small (e.g. width & height are zero). **_Signature_**-isInvisiblySmallElement(element: ExcalidrawElement): boolean +isInvisiblySmallElement(element: ExcalidrawElement): boolean**How to use** @@ -80,10 +80,10 @@ excalidrawAPI.updateScene(scene);loadFromBlob(### loadLibraryFromBlob @@ -130,10 +130,10 @@ if (contents.type === MIME_TYPES.excalidraw) {
blob: Blob,
- localAppState: AppState | null,
- localElements: ExcalidrawElement[] | null,
+ localAppState: AppState | null,
+ localElements: ExcalidrawElement[] | null,
fileHandle?: FileSystemHandle | null
-) => Promise<RestoredDataState> +) => Promise<RestoredDataState>loadSceneOrLibraryFromBlob(### getFreeDrawSvgPath @@ -149,7 +149,7 @@ import { getFreeDrawSvgPath } from "@excalidraw/excalidraw"; **Signature**
blob: Blob,
- localAppState: AppState | null,
- localElements: ExcalidrawElement[] | null,
+ localAppState: AppState | null,
+ localElements: ExcalidrawElement[] | null,
fileHandle?: FileSystemHandle | null
-) => Promise<{ type: string, data: RestoredDataState | ImportedLibraryState}> +) => Promise<{ type: string, data: RestoredDataState | ImportedLibraryState}>-getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) +getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement)### isLinearElement @@ -165,7 +165,7 @@ import { isLinearElement } from "@excalidraw/excalidraw"; **Signature**-isLinearElement(elementType?: ExcalidrawElement): boolean +isLinearElement(elementType?: ExcalidrawElement): boolean### getNonDeletedElements @@ -181,7 +181,7 @@ import { getNonDeletedElements } from "@excalidraw/excalidraw"; **Signature**-getNonDeletedElements(elements: readonly ExcalidrawElement[]): as readonly NonDeletedExcalidrawElement[] +getNonDeletedElements(elements: readonly ExcalidrawElement[]): as readonly NonDeletedExcalidrawElement[]### mergeLibraryItems @@ -196,9 +196,9 @@ import { mergeLibraryItems } from "@excalidraw/excalidraw";mergeLibraryItems(### parseLibraryTokensFromUrl @@ -239,8 +239,8 @@ export const App = () => {
- localItems: LibraryItems,
- otherItems: LibraryItems
-): LibraryItems + localItems: LibraryItems,
+ otherItems: LibraryItems
+): LibraryItemsuseHandleLibrary(opts: {@@ -253,7 +253,7 @@ This function returns the current `scene` version. **_Signature_**
- excalidrawAPI: ExcalidrawAPI,
- getInitialLibraryItems?: () => LibraryItemsSource
+ excalidrawAPI: ExcalidrawAPI,
+ getInitialLibraryItems?: () => LibraryItemsSource
});-getSceneVersion(elements: ExcalidrawElement[]) +getSceneVersion(elements: ExcalidrawElement[])**How to use** @@ -274,7 +274,7 @@ import { sceneCoordsToViewportCoords } from "@excalidraw/excalidraw";sceneCoordsToViewportCoords({ sceneX: number, sceneY: number },### viewportCoordsToSceneCoords @@ -289,7 +289,7 @@ import { viewportCoordsToSceneCoords } from "@excalidraw/excalidraw";
- appState: AppState
): { x: number, y: number } + appState: AppState
): { x: number, y: number }viewportCoordsToSceneCoords({ clientX: number, clientY: number },### useDevice @@ -350,8 +350,8 @@ To help with localization, we export the following. | name | type | | --- | --- | | `defaultLang` | `string` | -| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) | -| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) | +| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) | +| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) | ```js import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw"; diff --git a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx index 9e0f9fcd..ea9073c1 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx @@ -21,7 +21,7 @@ Most notably, you can customize the primary colors, by overriding these variable - `--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. +For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/css/theme.scss), though most of them will not make sense to override. ```css showLineNumbers .custom-styles .excalidraw { diff --git a/dev-docs/docs/@excalidraw/excalidraw/development.mdx b/dev-docs/docs/@excalidraw/excalidraw/development.mdx index 2e73d573..3c405a7d 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/development.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/development.mdx @@ -13,7 +13,7 @@ To start the example app using the `@excalidraw/excalidraw` package, follow the 1. Install the dependencies ```bash - cd src/packages/excalidraw && yarn + cd packages/excalidraw && yarn ``` 2. Start the example app diff --git a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx index 9fc221bd..87eb3777 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx @@ -148,7 +148,7 @@ import TabItem from "@theme/TabItem";
- appState: AppState
): {x: number, y: number} + appState: AppState
): {x: number, y: number}Excalidraw Embed Example
- +