195a743874
* feat: switch between basic shapes * add tab for testing * style tweaks * only show hint when a new node is created * fix panel state * refactor * combine captures into one * keep original font size * switch multi * switch different types altogether * use tab only * fix font size atom * do not switch from active tool change * prefer generic when mixed * provide an optional direction when shape switching * adjust panel bg & shadow * redraw to correctly position text * remove redundant code * only tab to switch if focusing on app container * limit which linear elements can be switched * add shape switch to command palette * remove hint * cache initial panel position * bend line to elbow if needed * remove debug logic * clean switch of arrows using app state * safe conversion between line, sharp, curved, and elbow * cache linear when panel shows up * type safe element conversion * rename type * respect initial type when switching between linears * fix elbow segment indexing * use latest linear * merge converted elbow points if too close * focus on panel after click * set roudness to null to fix drag points offset for elbows * remove Mutable * add arrowBoundToElement check * make it dependent on one signle state * unmount when not showing * simpler types, tidy up code * can change linear when it's linear + non-generic * fix popup component lifecycle * move constant to CLASSES * DRY out type detection * file & variable renaming * refactor * throw in not-prod instead * simplify * semi-fix bindings on `generic` type conversion --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Excalidraw
Excalidraw is exported as a component to be directly embedded in your project.
Installation
Use npm or yarn to install the package.
npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw
Note
: If you don't want to wait for the next stable release and try out the unreleased changes, use
@excalidraw/excalidraw@next.
Self-hosting fonts
By default, Excalidraw will try to download all the used fonts from the CDN.
For self-hosting purposes, you'll have to copy the content of the folder node_modules/@excalidraw/excalidraw/dist/prod/fonts to the path where your assets should be served from (i.e. public/ directory in your project). In that case, you should also set window.EXCALIDRAW_ASSET_PATH to the very same path, i.e. / in case it's in the root:
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
Dimensions of Excalidraw
Excalidraw takes 100% of width and height of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
Demo
Go to CodeSandbox example.
Integration
Head over to the docs.
API
Head over to the docs.
Contributing
Head over to the docs.