26f67d27ec
* Refactor: simplify linear element type * Refactor: dedupe scrollbar handling * First step towards binding - establish relationship and basic test for dragged lines * Refactor: use zoom from appstate * Refactor: generalize getElementAtPosition * Only consider bindable elements in hit test * Refactor: pull out pieces of hit test for reuse later * Refactor: pull out diamond from hit test for reuse later * Refactor: pull out text from hit test for reuse later * Suggest binding when hovering * Give shapes in regression test real size * Give shapes in undo/redo test real size * Keep bound element highlighted * Show binding suggestion for multi-point elements * Move binding to its on module with functions so that I can use it from actions, add support for binding end of multi-point elements * Use Id instead of ID * Improve boundary offset for non-squarish elements * Fix localStorage for binding on linear elements * Simplify dragging code and fix elements bound twice to the same shape * Fix binding for rectangles * Bind both ends at the end of the linear element creation, needed for focus points * wip * Refactor: Renames and reshapes for next commit * Calculate and store focus points and gaps, but dont use them yet * Focus points for rectangles * Dont blow up when canceling linear element * Stop suggesting binding when a non-compatible tool is selected * Clean up collision code * Using Geometric Algebra for hit tests * Correct binding for all shapes * Constant gap around polygon corners * Fix rotation handling * Generalize update and fix hit test for rotated elements * Handle rotation realtime * Handle scaling * Remove vibration when moving bound and binding element together * Handle simultenous scaling * Allow binding and unbinding when editing linear elements * Dont delete binding when the end point wasnt touched * Bind on enter/escape when editing * Support multiple suggested bindable elements in preparation for supporting linear elements dragging * Update binding when moving linear elements * Update binding when resizing linear elements * Dont re-render UI on binding hints * Update both ends when one is moved * Use distance instead of focus point for binding * Complicated approach for posterity, ignore this commit * Revert the complicated approach * Better focus point strategy, working for all shapes * Update snapshots * Dont break binding gap when mirroring shape * Dont break binding gap when grid mode pushes it inside * Dont bind draw elements * Support alt duplication * Fix alt duplication to * Support cmd+D duplication * All copy mechanisms are supported * Allow binding shapes to arrows, having arrows created first * Prevent arrows from disappearing for ellipses * Better binding suggestion highlight for shapes * Dont suggest second binding for simple elements when editing or moving them * Dont steal already bound linear elements when moving shapes * Fix highlighting diamonds and more precisely highlight other shapes * Highlight linear element edges for binding * Highlight text binding too * Handle deletion * Dont suggest second binding for simple linear elements when creating them * Dont highlight bound element during creation * Fix binding for rotated linear elements * Fix collision check for ellipses * Dont show suggested bindings for selected pairs * Bind multi-point linear elements when the tool is switched - important for mobile * Handle unbinding one of two bound edges correctly * Rename boundElement in state to startBoundElement * Dont double account for zoom when rendering binding highlight * Fix rendering of edited linear element point handles * Suggest binding when adding new point to a linear element * Bind when adding a new point to a linear element and dont unbind when moving middle elements * Handle deleting points * Add cmd modifier key to disable binding * Use state for enabling binding, fix not binding for linear elements during creation * Drop support for binding lines, only arrows are bindable * Reset binding mode on blur * Fix not binding lines
Excalidraw is a whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel.
Try it now
Go to https://excalidraw.com to start sketching.
Read our blog and follow the guides to learn more about Excalidraw and how to use it effectively.
Run the code
Code Sandbox
- Go to https://codesandbox.io/s/github/excalidraw/excalidraw
- You may need to sign in with Github and reload the page
- You can start coding instantly, and even send PRs from there!
Local Installation
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Clone the repo
git clone https://github.com/excalidraw/excalidraw.git
Commands
| Command | Description |
|---|---|
npm install |
Install the dependencies |
npm start |
Run the project |
npm run fix |
Reformat all files with Prettier |
npm test |
Run tests |
npm run test:update |
Update test snapshots |
npm run test:code |
Test for formatting with Prettier |
Docker Compose
You can use docker-compose to work on excalidraw locally if you don't want to setup a Node.js env.
docker-compose up --build -d
Self hosting
We publish a Docker image with the Excalidraw client at excalidraw/excalidraw. You can use it to self host your own client under your own domain, on Kubernetes, AWS ECS, etc.
docker build -t excalidraw/excalidraw .
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
The Docker image is free of analytics and other tracking libraries.
At the moment, self-hosting your own instance doesn't support sharing or collaboration features.
We are working towards providing a full-fledged solution for self hosting your own Excalidraw.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Translating
To translate Excalidraw into other languages, please visit our Crowdin page. To add a new language, open an issue so we can get things set up on our end first.
Translations will be available on the app if they exceed a certain threshold of completion (currently 85%).
Excalidraw is built using these awesome tools
And the main source of inspiration for starting the project is the awesome Zwibbler app.
Testimonials
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
