excalidraw icon indicating copy to clipboard operation
excalidraw copied to clipboard

Expose more declarative API

Open krzysztofMlczk opened this issue 2 years ago • 0 comments

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)

krzysztofMlczk avatar Feb 12 '24 20:02 krzysztofMlczk