Tldraw/packages/tldraw
Mitja Bezenšek 4e50c9c162
Start scrolling if we are dragging close to the window edges. (#2299)
Start scrolling when we get close to the edges of the window. This works
for brush selecting, translating, and resizing.


https://github.com/tldraw/tldraw/assets/2523721/4a5effc8-5445-411b-b317-36097233d36c


### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Select a shape.
2. Move it towards the edge of the window. The camera position should
change.
3. Also try resizing, brush selecting.

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds the logic to change the camera position when you get close to the
edges of the window. This allows you to drag, resize, brush select past
the edges of the current viewport.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-15 23:37:03 +00:00
..
api Start scrolling if we are dragging close to the window edges. (#2299) 2023-12-15 23:37:03 +00:00
scripts
src Start scrolling if we are dragging close to the window edges. (#2299) 2023-12-15 23:37:03 +00:00
CHANGELOG.md
LICENSE
README.md
api-extractor.json
api-report.md Start scrolling if we are dragging close to the window edges. (#2299) 2023-12-15 23:37:03 +00:00
package.json
setupTests.js
tsconfig.json

README.md

tldraw

@tldraw/tldraw

This is the pre-release version of tldraw.

See the pre-release docs at canary.tldraw.dev.

Installation

Install the @tldraw/tldraw package using @canary for the latest canary release. (Or @alpha for the latest alpha release.)

yarn add @tldraw/tldraw@canary
# or
npm install @tldraw/tldraw@canary
# or
pnpm i @tldraw/tldraw@canary

Then start the local development server.

yarn dev
# or
npm run dev
# or
pnpm dev

Usage

An extremely minimal usage (without our UI) might look like this:

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'

export default function () {
	return <Tldraw />
}

See the examples folder for more examples.

License

The source code 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.