79f46da199
Currently, the highlighter shape uses a single 0-width line for its geometry, same as the draw tool. For the draw tool this works ok - the visual line is thin enough that unless you zoom right in, it's hard to find areas where the hover should trigger but isn't. As the highlighter tool is much thicker though, it's relatively easy to find those areas. The fix is for the geometry to represent the line including its thick stroke, instead of at 0-width. There are two possible approaches here: 1. Update the polyline geometry to allow passing a stroke width. 2. Instead of a polyline, make the highlighter shape be a polygon that traces _around_ the stroke 1 is the more accurate approach, but is hard to fit into our geometry system. Our geometry is based around two primitives: `getVertices` which returns an array of points around the shape, and `nearestPoint` which returns the nearest point on the geometry to a vector we pass in. We can account for a stroke in `nearestPoint` pretty easily, including it in `getVertices` is hard - we'd have to expand the vertices and handle line join/caps etc. Just making the change in `nearestPoint` does fix the issue here, but i'm not sure about the knock-on effect elsewhere and don't really want to introduce 1-off hacks into the core geometry system. 2 actually means addressing the same hard problem around outlining strokes as 1, but it lets us do it in a more tightly-scoped one-off change just to the highlighter shape, instead of trying to come up with a generic solution for the whole geometry system. This is the approach I've taken in this diff. We outline the stroke using perfect-freehand, which works pretty well but produces inaccurate results at edge-cases, particularly when a line rapidly changes direction:  I think that given this is scoped to just the highlighter shape and is imo an improvement over the stroke issue from before, it's a reasonable solution for now. If we want to in the future we could implement real non-freehand-based outlining. ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Create a highlight shape 2. Zoom in 3. Make sure you can interact with the shape at its edges instead of right in the center |
||
|---|---|---|
| .github | ||
| .husky | ||
| .yarn | ||
| apps | ||
| assets | ||
| config | ||
| docs | ||
| packages | ||
| scripts | ||
| .eslintignore | ||
| .eslintplugin.js | ||
| .eslintrc.js | ||
| .gitignore | ||
| .ignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| lazy.config.ts | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| public-yarn.lock | ||
| README.md | ||
tldraw
Welcome to the public monorepo for tldraw.
What is tldraw?
tldraw is a collaborative digital whiteboard available at tldraw.com. Its editor, user interface, and other underlying libraries are open source and available in this repository. They are also distributed on npm. You can use tldraw to create a drop-in whiteboard for your product or as the foundation on which to build your own infinite canvas applications.
Learn more at tldraw.dev.
Note
This repo contains source code for the current version of tldraw. You can find the source for the original version here.
Installation & Usage
To learn more about using tldraw in your React application, follow our guide here or see the examples sandbox.
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
Local development
To run the local development server, first clone this repo.
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420.
Examples
Our development server contains several examples that demonstrates different ways that you can customize tldraw or use its APIs. Each example is found in the apps/examples folder.
- eg:
localhost:5420for the basic example. - eg:
localhost:5420/apifor the API example.
To learn more about using tldraw, visit our docs.
About this repository
Top-level layout
This repository's contents is divided across four primary sections:
/appscontains the source for our applications/packagescontains the source for our public packages/scriptscontains scripts used for building and publishing/assetscontains icons and translations relied on by the app/docscontains the content for our docs site at tldraw.dev
Applications
examples: our local development / examples projectvscode: our Visual Studio Code extension
Packages
assets: a library for working with tldraw's fonts and translationseditor: the tldraw editorstate: a signals library, also known as signiastore: an in-memory reactive databasetldraw: the main tldraw package containing both the editor and the UItlschema: shape definitions and migrationsutils: low-level data utilities shared by other librariesvalidate: a validation library used for run-time validation
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Distributions
You can find tldraw on npm here.
At the moment the tldraw package is in alpha. We also ship a canary version which is always up to date with the main branch of this repo.
License
The source code for various apps and packages in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.