feat: support excalidrawAPI and remove refs support ()

* feat: support excalidrawAPI and remove refs support

* update changelog

* remove ready and readyPromise

* update changelog

* update changelog
pull/7265/head
Aakansha Doshi committed by GitHub
parent 864c0b3ea8
commit cee00767df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -691,7 +691,7 @@ const ExcalidrawWrapper = () => {
})}
>
<Excalidraw
ref={excalidrawRefCallback}
excalidrawAPI={excalidrawRefCallback}
onChange={onChange}
initialData={initialStatePromiseRef.current.promise}
isCollaborating={isCollaborating}

@ -240,7 +240,6 @@ import {
isInputLike,
isToolIcon,
isWritableElement,
resolvablePromise,
sceneCoordsToViewportCoords,
tupleToCoors,
viewportCoordsToSceneCoords,
@ -540,7 +539,7 @@ class App extends React.Component<AppProps, AppState> {
super(props);
const defaultAppState = getDefaultAppState();
const {
excalidrawRef,
excalidrawAPI,
viewModeEnabled = false,
zenModeEnabled = false,
gridModeEnabled = false,
@ -571,14 +570,8 @@ class App extends React.Component<AppProps, AppState> {
this.rc = rough.canvas(this.canvas);
this.renderer = new Renderer(this.scene);
if (excalidrawRef) {
const readyPromise =
("current" in excalidrawRef && excalidrawRef.current?.readyPromise) ||
resolvablePromise<ExcalidrawImperativeAPI>();
if (excalidrawAPI) {
const api: ExcalidrawImperativeAPI = {
ready: true,
readyPromise,
updateScene: this.updateScene,
updateLibrary: this.library.updateLibrary,
addFiles: this.addFiles,
@ -603,12 +596,11 @@ class App extends React.Component<AppProps, AppState> {
onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
} as const;
if (typeof excalidrawRef === "function") {
excalidrawRef(api);
if (typeof excalidrawAPI === "function") {
excalidrawAPI(api);
} else {
excalidrawRef.current = api;
console.error("excalidrawAPI should be a function!");
}
readyPromise.resolve(api);
}
this.excalidrawContainerValue = {

@ -15,6 +15,14 @@ Please add the latest change on the top under the correct section.
### Features
- Support `excalidrawAPI` prop for accessing the Excalidraw API [#7251](https://github.com/excalidraw/excalidraw/pull/7251).
#### BREAKING CHANGE
- The `Ref` support has been removed in v0.17.0 so if you are using refs, please update the integration to use the [`excalidrawAPI`](http://localhost:3003/docs/@excalidraw/excalidraw/api/props/excalidraw-api)
- Additionally `ready` and `readyPromise` from the API have been discontinued. These APIs were found to be superfluous, and as part of the effort to streamline the APIs and maintain simplicity, they were removed in version v0.17.0.
- Export [`getCommonBounds`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#getcommonbounds) helper from the package [#7247](https://github.com/excalidraw/excalidraw/pull/7247).
- Support frames via programmatic API [#7205](https://github.com/excalidraw/excalidraw/pull/7205).

@ -665,7 +665,9 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
</div>
<div className="excalidraw-wrapper">
<Excalidraw
ref={(api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api)}
excalidrawAPI={(api: ExcalidrawImperativeAPI) =>
setExcalidrawAPI(api)
}
initialData={initialStatePromiseRef.current.promise}
onChange={(elements, state) => {
console.info("Elements :", elements, "State : ", state);

@ -1,4 +1,4 @@
import React, { useEffect, forwardRef } from "react";
import React, { useEffect } from "react";
import { InitializeApp } from "../../components/InitializeApp";
import App from "../../components/App";
import { isShallowEqual } from "../../utils";
@ -6,7 +6,7 @@ import { isShallowEqual } from "../../utils";
import "../../css/app.scss";
import "../../css/styles.scss";
import { AppProps, ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
import { AppProps, ExcalidrawProps } from "../../types";
import { defaultLang } from "../../i18n";
import { DEFAULT_UI_OPTIONS } from "../../constants";
import { Provider } from "jotai";
@ -20,7 +20,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
const {
onChange,
initialData,
excalidrawRef,
excalidrawAPI,
isCollaborating = false,
onPointerUpdate,
renderTopRightUI,
@ -95,7 +95,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
<App
onChange={onChange}
initialData={initialData}
excalidrawRef={excalidrawRef}
excalidrawAPI={excalidrawAPI}
isCollaborating={isCollaborating}
onPointerUpdate={onPointerUpdate}
renderTopRightUI={renderTopRightUI}
@ -127,12 +127,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
);
};
type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
const areEqual = (
prevProps: PublicExcalidrawProps,
nextProps: PublicExcalidrawProps,
) => {
const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
// short-circuit early
if (prevProps.children !== nextProps.children) {
return false;
@ -189,12 +184,7 @@ const areEqual = (
return isUIOptionsSame && isShallowEqual(prev, next);
};
const forwardedRefComp = forwardRef<
ExcalidrawAPIRefValue,
PublicExcalidrawProps
>((props, ref) => <ExcalidrawBase {...props} excalidrawRef={ref} />);
export const Excalidraw = React.memo(forwardedRefComp, areEqual);
export const Excalidraw = React.memo(ExcalidrawBase, areEqual);
Excalidraw.displayName = "Excalidraw";
export {

@ -15,7 +15,9 @@ describe("event callbacks", () => {
beforeEach(async () => {
const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
await render(
<Excalidraw ref={(api) => excalidrawAPIPromise.resolve(api as any)} />,
<Excalidraw
excalidrawAPI={(api) => excalidrawAPIPromise.resolve(api as any)}
/>,
);
excalidrawAPI = await excalidrawAPIPromise;
});

@ -14,7 +14,9 @@ describe("setActiveTool()", () => {
beforeEach(async () => {
const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
await render(
<Excalidraw ref={(api) => excalidrawAPIPromise.resolve(api as any)} />,
<Excalidraw
excalidrawAPI={(api) => excalidrawAPIPromise.resolve(api as any)}
/>,
);
excalidrawAPI = await excalidrawAPIPromise;
});

@ -23,7 +23,7 @@ import { LinearElementEditor } from "./element/linearElementEditor";
import { SuggestedBinding } from "./element/binding";
import { ImportedDataState } from "./data/types";
import type App from "./components/App";
import type { ResolvablePromise, throttleRAF } from "./utils";
import type { throttleRAF } from "./utils";
import { Spreadsheet } from "./charts";
import { Language } from "./i18n";
import { ClipboardData } from "./clipboard";
@ -34,7 +34,7 @@ import type { FileSystemHandle } from "./data/filesystem";
import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
import { ContextMenuItems } from "./components/ContextMenu";
import { SnapLine } from "./snapping";
import { Merge, ForwardRef, ValueOf } from "./utility-types";
import { Merge, ValueOf } from "./utility-types";
export type Point = Readonly<RoughPoint>;
@ -362,15 +362,6 @@ export type LibraryItemsSource =
| Promise<LibraryItems_anyVersion | Blob>;
// -----------------------------------------------------------------------------
// NOTE ready/readyPromise props are optional for host apps' sake (our own
// implem guarantees existence)
export type ExcalidrawAPIRefValue =
| ExcalidrawImperativeAPI
| {
readyPromise?: ResolvablePromise<ExcalidrawImperativeAPI>;
ready?: false;
};
export type ExcalidrawInitialDataState = Merge<
ImportedDataState,
{
@ -390,7 +381,7 @@ export interface ExcalidrawProps {
| ExcalidrawInitialDataState
| null
| Promise<ExcalidrawInitialDataState | null>;
excalidrawRef?: ForwardRef<ExcalidrawAPIRefValue>;
excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
isCollaborating?: boolean;
onPointerUpdate?: (payload: {
pointer: { x: number; y: number; tool: "pointer" | "laser" };
@ -630,8 +621,6 @@ export type ExcalidrawImperativeAPI = {
refresh: InstanceType<typeof App>["refresh"];
setToast: InstanceType<typeof App>["setToast"];
addFiles: (data: BinaryFileData[]) => void;
readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
ready: true;
id: string;
setActiveTool: InstanceType<typeof App>["setActiveTool"];
setCursor: InstanceType<typeof App>["setCursor"];

Loading…
Cancel
Save