marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-23 16:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

add editor interface event listener

Browse Source
This commit is contained in:
Ryan Di
2025-10-15 11:56:20 +11:00
parent 0157d41dd5
commit 76b5f9a3f7
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/excalidraw/components/App.tsx
View File

@@ -2533,23 +2533,35 @@ class App extends React.Component<AppProps, AppState> {
? this.props.UIOptions.dockedSidebarBreakpoint ? this.props.UIOptions.dockedSidebarBreakpoint
: MQ_RIGHT_SIDEBAR_MIN_WIDTH; : MQ_RIGHT_SIDEBAR_MIN_WIDTH;
// if host doesn't control formFactor, we'll update it ourselves
if (!this.props.formFactor) {
const nextEditorInterface = updateObject(this.editorInterface, {
formFactor: deriveFormFactor(editorWidth, editorHeight, {
isMobile: (width, height) => this.isMobileBreakpoint(width, height),
isTablet: (width, height) => this.isTabletBreakpoint(width, height),
}),
canFitSidebar: editorWidth > sidebarBreakpoint,
isLandscape: editorWidth > editorHeight,
});
const didChange = nextEditorInterface !== this.editorInterface;
if (didChange) {
this.editorInterface = nextEditorInterface;
this.reconcileStylesPanelMode(nextEditorInterface);
this.props.onEditorInterfaceChange?.(nextEditorInterface);
}
return didChange;
}
// host controls formFactor, just update sidebar/landscape for context
const nextEditorInterface = updateObject(this.editorInterface, { const nextEditorInterface = updateObject(this.editorInterface, {
formFactor: deriveFormFactor(editorWidth, editorHeight, {
isMobile: (width, height) => this.isMobileBreakpoint(width, height),
isTablet: (width, height) => this.isTabletBreakpoint(width, height),
}),
canFitSidebar: editorWidth > sidebarBreakpoint, canFitSidebar: editorWidth > sidebarBreakpoint,
isLandscape: editorWidth > editorHeight, isLandscape: editorWidth > editorHeight,
}); });
const didChange = nextEditorInterface !== this.editorInterface; const didChange = nextEditorInterface !== this.editorInterface;
if (didChange) { if (didChange) {
this.editorInterface = nextEditorInterface; this.editorInterface = nextEditorInterface;
this.reconcileStylesPanelMode(nextEditorInterface);
} }
this.reconcileStylesPanelMode(nextEditorInterface);
return didChange; return didChange;
}; };

5
packages/excalidraw/types.ts
View File

@@ -697,6 +697,11 @@ export type AppProps = Merge<
*/ */
formFactor?: EditorInterface["formFactor"]; formFactor?: EditorInterface["formFactor"];
desktopUIMode?: EditorInterface["desktopUIMode"]; desktopUIMode?: EditorInterface["desktopUIMode"];
/**
* Listener called when the editor interface is refreshed and
* form factor is not controlled by host.
*/
onEditorInterfaceChange?: (editorInterface: EditorInterface) => void;
} }
>; >;