docs: release @excalidraw/excalidraw 0.7.0 🎉 (#3497)
* docs: release version 0.7.0 * update * fix * fix * fix * fix * fix * fix * version bump * fix readme * tweaks Co-authored-by: David Luzar <luzar.david@gmail.com> * update link Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi
GitHub
parent
4ef7cb7365
commit
23030a15f2
@ -11,23 +11,25 @@ The change should be grouped under one of the below section and must contain PR
|
||||
Please add the latest change on the top under the correct section.
|
||||
-->
|
||||
|
||||
## Unreleased
|
||||
## 0.7.0 (2021-04-26)
|
||||
|
||||
## Excalidraw API
|
||||
|
||||
### Features
|
||||
|
||||
- Support scrolling to center to a single Excalidraw element, or not supplying any argument at all which will default to current elements on the scene [#3482](https://github.com/excalidraw/excalidraw/pull/3482).
|
||||
- [`scrollToContent`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L265) API now supports passing just a single Excalidraw element, or none at all (which will default to current elements on the scene) [#3482](https://github.com/excalidraw/excalidraw/pull/3482).
|
||||
|
||||
#### BREAKING CHANGE
|
||||
|
||||
- Renamed `setScrollToContent` to [`scrollToContent`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L265)..
|
||||
- Renamed `setScrollToContent` to [`scrollToContent`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L265).
|
||||
|
||||
- Make library local to given excalidraw instance (previously, all instances on the same page shared one global library) [#3451](https://github.com/excalidraw/excalidraw/pull/3451).
|
||||
|
||||
- Added prop [onLibraryChange](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#onLibraryChange) which if supplied will be called when library is updated.
|
||||
|
||||
- Added attribute `libraryItems` to prop [initialData](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#initialdata) which can be used to load excalidraw with existing library items.
|
||||
- Assign a [unique id](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#Id) to the excalidraw component. The id can be accessed via [`ref`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L265).
|
||||
|
||||
- Assign a [unique id](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#Id) to the excalidraw component. The id can be accessed via [`ref`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L298).
|
||||
|
||||
#### BREAKING CHANGE
|
||||
|
||||
@ -40,15 +42,20 @@ Please add the latest change on the top under the correct section.
|
||||
- Earlier keyboard events were bind to document but now its bind to Excalidraw component by default. So you will need to set [`handleKeyboardGlobally`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#handleKeyboardGlobally) to true if you want the previous behaviour (bind the keyboard events to document).
|
||||
|
||||
- Recompute offsets on `scroll` of the nearest scrollable container [#3408](https://github.com/excalidraw/excalidraw/pull/3408). This can be disabled by setting [`detectScroll`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#detectScroll) to `false`.
|
||||
|
||||
- Add `onPaste` prop to handle custom clipboard behaviours [#3420](https://github.com/excalidraw/excalidraw/pull/3420).
|
||||
|
||||
### Fixes
|
||||
|
||||
- Changing z-index of elements (sorting them below/above other elements) now updates their `version` and `versionNonce` (only applies to the selected elements). This fix will allow you account for z-index changes if you're syncing just the elements that changed (and not the whole scene) [#3483](https://github.com/excalidraw/excalidraw/pull/3483).
|
||||
- Only handle cut/paste events inside excalidraw [#3484](https://github.com/excalidraw/excalidraw/pull/3484).
|
||||
|
||||
- Make history local to a given Excalidraw instance. This fixes a case where history was getting shared when you have multiple Excalidraw components on the same page [#3481](https://github.com/excalidraw/excalidraw/pull/3481).
|
||||
- Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page [#3478](https://github.com/excalidraw/excalidraw/pull/3478).
|
||||
- When switching theme, apply it only to the active Excalidraw component. This fixes a case where the theme was getting applied to the first Excalidraw component if you had multiple Excalidraw components on the same page [#3446](https://github.com/excalidraw/excalidraw/pull/3446)
|
||||
|
||||
- Fix library being pasted off-center [#3462](https://github.com/excalidraw/excalidraw/pull/3462).
|
||||
|
||||
- When switching theme, apply it only to the active Excalidraw component. This fixes a case where the theme was getting applied to the first Excalidraw component if you had multiple Excalidraw components on the same page [#3446](https://github.com/excalidraw/excalidraw/pull/3446).
|
||||
|
||||
### Refactor
|
||||
|
||||
@ -75,8 +82,24 @@ Please add the latest change on the top under the correct section.
|
||||
|
||||
### Features
|
||||
|
||||
- Support tab-to-indent when editing text [#3411](https://github.com/excalidraw/excalidraw/pull/3411).
|
||||
|
||||
- App now breaks into mobile view using the component dimensions, not viewport dimensions. This fixes a case where the app would break sooner than necessary when the component's size is smaller than viewport [#3414](https://github.com/excalidraw/excalidraw/pull/3414).
|
||||
|
||||
- Add screenshots to manifest.json [#3369](https://github.com/excalidraw/excalidraw/pull/3369).
|
||||
|
||||
- Enable drop event on the whole component [#3406](https://github.com/excalidraw/excalidraw/pull/3406).
|
||||
|
||||
### Fixes
|
||||
|
||||
- Focus on last active element when dialog closes [#3447](https://github.com/excalidraw/excalidraw/pull/3447).
|
||||
|
||||
- Fix incorrectly caching png file handle [#3407](https://github.com/excalidraw/excalidraw/pull/3407).
|
||||
|
||||
- Fix popover position incorrect on Safari for non-zero offsets/scroll [#3399](https://github.com/excalidraw/excalidraw/pull/3399).
|
||||
|
||||
---
|
||||
|
||||
## 0.6.0 (2021-04-04)
|
||||
|
||||
## Excalidraw API
|
||||
|
||||
@ -126,7 +126,7 @@ export default function App() {
|
||||
<Excalidraw
|
||||
ref={excalidrawRef}
|
||||
initialData={InitialData}
|
||||
onChange={(elements, state) => {
|
||||
onChange={(elements, state) =>
|
||||
console.log("Elements :", elements, "State : ", state)
|
||||
}
|
||||
onPointerUpdate={(payload) => console.log(payload)}
|
||||
@ -173,7 +173,7 @@ For development use :point_down:
|
||||
```js
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.development.js"
|
||||
></script>
|
||||
```
|
||||
|
||||
@ -182,7 +182,7 @@ For production use :point_down:
|
||||
```js
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.production.min.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.production.min.js"
|
||||
></script>
|
||||
```
|
||||
|
||||
@ -201,7 +201,7 @@ You will need to make sure `react`, `react-dom` is available as shown in the bel
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.development.js"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
@ -364,6 +364,10 @@ To view the full example visit :point_down:
|
||||
| [`theme`](#theme) | `light` or `dark` | | 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 |
|
||||
| [`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. |
|
||||
|
||||
### Dimensions of Excalidraw
|
||||
|
||||
@ -392,6 +396,7 @@ This helps to load Excalidraw with `initialData`. It must be an object or a [pro
|
||||
| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
|
||||
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) | 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. |
|
||||
|
||||
```json
|
||||
{
|
||||
@ -438,10 +443,11 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
|
||||
| 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 |
|
||||
| getAppState | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a></pre> | Returns current appState |
|
||||
| history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
|
||||
| setScrollToContent | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | Scroll to the nearest element to center |
|
||||
| scrollToContent | <pre> (target?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a> | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a>[]) => void </pre> | Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene. |
|
||||
| refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
|
||||
| [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. |
|
||||
|
||||
#### `readyPromise`
|
||||
|
||||
@ -528,7 +534,7 @@ This prop controls Excalidraw's theme. When supplied, the value takes precedence
|
||||
|
||||
This prop sets the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over `intialData.appState.name`, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
|
||||
|
||||
### `UIOptions`
|
||||
#### `UIOptions`
|
||||
|
||||
This prop can be used to customise UI of Excalidraw. Currently we support customising only [`canvasActions`](#canvasActions). It accepts the below parameters
|
||||
|
||||
@ -536,7 +542,7 @@ This prop can be used to customise UI of Excalidraw. Currently we support custom
|
||||
{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }
|
||||
</pre>
|
||||
|
||||
#### canvasActions
|
||||
##### canvasActions
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
@ -548,6 +554,18 @@ This prop can be used to customise UI of Excalidraw. Currently we support custom
|
||||
| `saveScene` | boolean | true | Implies whether to show `Save button` |
|
||||
| `theme` | boolean | true | Implies whether to show `Theme toggle` |
|
||||
|
||||
#### `onPaste`
|
||||
|
||||
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
|
||||
</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 `true`, 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, since this would have different implementations on the consumer so we expose the API's which you can use to communicate with Excalidraw as mentioned above. If you are interested in understanding how Excalidraw does it you can check it [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
|
||||
@ -574,6 +592,30 @@ useEffect(() => {
|
||||
|
||||
Try out the [Demo](#Demo) to see it in action.
|
||||
|
||||
### 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
|
||||
|
||||
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
|
||||
|
||||
Ths callback if supplied will get triggered when the library is updated and has the below signature.
|
||||
|
||||
<pre>
|
||||
(items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any>
|
||||
</pre>
|
||||
|
||||
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
|
||||
|
||||
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).
|
||||
|
||||
### Extra API's
|
||||
|
||||
#### `getSceneVersion`
|
||||
@ -587,21 +629,21 @@ getSceneVersion(elements: <a href="https://github.com/excalidraw/excalidraw/blo
|
||||
|
||||
This function returns the current scene version.
|
||||
|
||||
#### `getSyncableElements`
|
||||
#### `isInvisiblySmallElement`
|
||||
|
||||
**_Signature_**
|
||||
|
||||
<pre>
|
||||
getSyncableElements(elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>):<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>
|
||||
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 { getSyncableElements } from "@excalidraw/excalidraw";
|
||||
import { isInvisiblySmallElement } from "@excalidraw/excalidraw";
|
||||
```
|
||||
|
||||
Returns all elements including deleted ones, excluding elements which are are invisibly small (e.g. width & height are zero). Useful when you want to sync elements during collaboration.
|
||||
Returns `true` if element is invisibly small (e.g. width & height are zero).
|
||||
|
||||
#### `getElementMap`
|
||||
|
||||
|
||||
@ -126,7 +126,7 @@ export default function App() {
|
||||
<Excalidraw
|
||||
ref={excalidrawRef}
|
||||
initialData={InitialData}
|
||||
onChange={(elements, state) => {
|
||||
onChange={(elements, state) =>
|
||||
console.log("Elements :", elements, "State : ", state)
|
||||
}
|
||||
onPointerUpdate={(payload) => console.log(payload)}
|
||||
@ -173,7 +173,7 @@ For development use :point_down:
|
||||
```js
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.development.js"
|
||||
></script>
|
||||
```
|
||||
|
||||
@ -182,7 +182,7 @@ For production use :point_down:
|
||||
```js
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.production.min.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.production.min.js"
|
||||
></script>
|
||||
```
|
||||
|
||||
@ -201,7 +201,7 @@ You will need to make sure `react`, `react-dom` is available as shown in the bel
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
|
||||
src="https://unpkg.com/@excalidraw/excalidraw@0.7.0/dist/excalidraw.development.js"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@excalidraw/excalidraw",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"main": "main.js",
|
||||
"types": "types/packages/excalidraw/index.d.ts",
|
||||
"files": [
|
||||
@ -11,6 +11,11 @@
|
||||
"access": "public"
|
||||
},
|
||||
"description": "Excalidraw as a React component",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/excalidraw/excalidraw.git",
|
||||
"directory": "src/packages/excalidraw"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"excalidraw",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user