@ -16,6 +16,9 @@ Please add the latest change on the top under the correct section.
### Features
- Remove language picker, and add `langCode`, `renderFooter` [#2644](https://github.com/excalidraw/excalidraw/pull/2644):
- BREAKING: removed the language picker from UI. It is now the host app's responsibility to implement a language picker if desirable, using the newly added [`renderFooter`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderFooter) prop. The reasoning is that the i18n should be controlled by the app itself, not by the nested Excalidraw component.
- Added [`langCode`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#langCode) prop to control the UI language.
- Add support for `exportToBackend` prop to allow host apps to implement shareable links [#2612](https://github.com/excalidraw/excalidraw/pull/2612/files)
- Add zoom to selection [#2522](https://github.com/excalidraw/excalidraw/pull/2522)
- Insert Library items in the middle of the screen [#2527](https://github.com/excalidraw/excalidraw/pull/2527)
| [`renderFooter `](#renderFooter) | Function | | Function that renders custom UI footer |
#### `width`
@ -270,3 +272,21 @@ This callback is triggered when the shareable-link button is clicked in the expo
1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/6e45cb95dbd7a8be1859c7055b06957298e3097c/src/element/types.ts#L76) which needs to be exported.
2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/4c90ea5667d29effe8ec4a115e49efc7c340cdb3/src/types.ts#L33) of the scene.
3. `canvas`: The `HTMLCanvasElement` of the scene.
#### `langCode`
Determines the language of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/d337c8b15f6c1085287b12ecbe59c96e2c4e0ff4/src/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";
| languages | [Language []](https://github.com/excalidraw/excalidraw/blob/c35d983fef8a83ba842dd892c0f461111a3e8589/src/i18n.ts#L9) |
#### `renderFooter`
A function that renders (returns JSX) custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of elements 1`] = `3`;
exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of renders 1`] = `24`;
exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of renders 1`] = `25`;
exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] appState 1`] = `
Object {
@ -920,7 +920,7 @@ Object {
exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of elements 1`] = `3`;
exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of renders 1`] = `20`;
exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of renders 1`] = `21`;
exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] appState 1`] = `
Object {
@ -1693,7 +1693,7 @@ Object {
exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of elements 1`] = `3`;
exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of renders 1`] = `39`;
exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of renders 1`] = `40`;
exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] appState 1`] = `
Object {
@ -1894,7 +1894,7 @@ Object {
exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of elements 1`] = `1`;
exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of renders 1`] = `8`;
exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of renders 1`] = `9`;
exports[`regression tests adjusts z order when grouping: [end of test] appState 1`] = `
Object {
@ -2349,7 +2349,7 @@ Object {
exports[`regression tests adjusts z order when grouping: [end of test] number of elements 1`] = `3`;
exports[`regression tests adjusts z order when grouping: [end of test] number of renders 1`] = `18`;
exports[`regression tests adjusts z order when grouping: [end of test] number of renders 1`] = `19`;
exports[`regression tests alt-drag duplicates an element: [end of test] appState 1`] = `
Object {
@ -2599,7 +2599,7 @@ Object {
exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `2`;
exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `8`;
exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `9`;
exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`;
exports[`regression tests arrow keys: [end of test] number of renders 1`] = `17`;
exports[`regression tests arrow keys: [end of test] number of renders 1`] = `18`;
exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] appState 1`] = `
Object {
@ -3234,7 +3234,7 @@ Object {
exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of elements 1`] = `3`;
exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of renders 1`] = `16`;
exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of renders 1`] = `17`;
exports[`regression tests change the properties of a shape: [end of test] appState 1`] = `
Object {
@ -3539,7 +3539,7 @@ Object {
exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`;
exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `9`;
exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `10`;
exports[`regression tests click on an element and drag it: [dragged] appState 1`] = `
Object {
@ -3740,7 +3740,7 @@ Object {
exports[`regression tests click on an element and drag it: [dragged] number of elements 1`] = `1`;
exports[`regression tests click on an element and drag it: [dragged] number of renders 1`] = `8`;
exports[`regression tests click on an element and drag it: [dragged] number of renders 1`] = `9`;
exports[`regression tests click on an element and drag it: [end of test] appState 1`] = `
Object {
@ -3981,7 +3981,7 @@ Object {
exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `1`;
exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `11`;
exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `12`;
exports[`regression tests click to select a shape: [end of test] appState 1`] = `
Object {
@ -4230,7 +4230,7 @@ Object {
exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `2`;
exports[`regression tests click to select a shape: [end of test] number of renders 1`] = `11`;
exports[`regression tests click to select a shape: [end of test] number of renders 1`] = `12`;
exports[`regression tests click-drag to select a group: [end of test] appState 1`] = `
Object {
@ -4588,7 +4588,7 @@ Object {
exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `3`;
exports[`regression tests click-drag to select a group: [end of test] number of renders 1`] = `17`;
exports[`regression tests click-drag to select a group: [end of test] number of renders 1`] = `18`;
exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] appState 1`] = `
Object {
@ -4880,7 +4880,7 @@ Object {
exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `2`;
exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `12`;
exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `13`;
exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] appState 1`] = `
Object {
@ -5184,7 +5184,7 @@ Object {
exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of elements 1`] = `2`;
exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of renders 1`] = `13`;
exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of renders 1`] = `14`;
exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] appState 1`] = `
Object {
@ -5389,7 +5389,7 @@ Object {
exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `1`;
exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `6`;
exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `7`;
exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] appState 1`] = `
Object {
@ -5572,7 +5572,7 @@ Object {
exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of elements 1`] = `1`;
exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of renders 1`] = `7`;
exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of renders 1`] = `8`;
exports[`regression tests double click to edit a group: [end of test] appState 1`] = `
Object {
@ -6022,7 +6022,7 @@ Object {
exports[`regression tests double click to edit a group: [end of test] number of elements 1`] = `3`;
exports[`regression tests double click to edit a group: [end of test] number of renders 1`] = `16`;
exports[`regression tests double click to edit a group: [end of test] number of renders 1`] = `17`;
exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] appState 1`] = `
Object {
@ -6337,7 +6337,7 @@ Object {
exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of elements 1`] = `2`;
exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of renders 1`] = `14`;
exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of renders 1`] = `15`;
exports[`regression tests draw every type of shape: [end of test] appState 1`] = `
Object {
@ -8368,7 +8368,7 @@ Object {
exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `8`;
exports[`regression tests draw every type of shape: [end of test] number of renders 1`] = `49`;
exports[`regression tests draw every type of shape: [end of test] number of renders 1`] = `50`;
exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] appState 1`] = `
Object {
@ -8727,7 +8727,7 @@ Object {
exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of elements 1`] = `3`;
exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of renders 1`] = `17`;
exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of renders 1`] = `18`;
exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] appState 1`] = `
Object {
@ -8979,7 +8979,7 @@ Object {
exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `15`;
exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `16`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] appState 1`] = `
Object {
@ -9229,7 +9229,7 @@ Object {
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `2`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `15`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `16`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] appState 1`] = `
Object {
@ -9541,7 +9541,7 @@ Object {
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `2`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `16`;
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `17`;