excalidraw
excalidraw copied to clipboard
Expose more declarative API
Current API is hard to work with when building apps where <Excalidraw /> component serves more as a "controlled" component.
Examples what could be added to make the work easier
<Excalidraw
/* elements to render - NOT ONLY INITIAL RENDER */
elements={elements: Array<ExcalidrawElement>}
/* called when element gets selected */
onElementSelected={(element: ExcalidrawElement) => void}
/* called when selection changes */
onSelectionChanged={(element: Array<ExcalidrawElement>) => void}
/* called when element is created */
onCreate={(element: ExcalidrawElement) => void}
/* called when elements are deleted */
onDelete={(elements: Array<ExcalidrawElement>) => void}
/* called when elements move is started */
onMoveStart={(elements: Array<ExcalidrawElement>) => void}
/* called when elements move ends */
onMoveEnd={(elements: Array<ExcalidrawElement>) => void}
/* called when elements resize starts */
onResizeStart={(elements: Array<ExcalidrawElement>) => void}
/* called when elements resize ends */
onResizeEnd={(elements: Array<ExcalidrawElements>) => void}
/* ...many more TBA */
/>
onElementSelected - called when element gets selected onResizeStart onResizeEnd onMoveStart onMoveEnd
Thanks to these user no longer would have to manually diff states of the excalidraw editor, which is quite hard especially because onChange is currently called many times (since app state holds cursor position onChange is called on each mouse event)