No description
Find a file
Mitja Bezenšek 04e08b1871
Fix an issue with not being able to group a shape an an arrow. (#2205)
There was an issue with preventing grouping of a shape and an arrow
bound to it.

There was another issue where you had a shape and an unbound arrow
grouped. If you then tried to bind the arrow to the shape it would
ungroup the two.

The underlying issue for both was the same and it goes something like
this:
1. We group the shape and the bound arrow.
2. This reparents both of them to the group.
3. This triggers `registerAfterChangeHandler` cb.
4. This reparents the arrow and it reparents it to the page since we
only have one binding.
5. This then triggers `onChildrenChange` in `GroupShapeUtil` which
removes the group.

## Before

**Cant create the group**


https://github.com/tldraw/tldraw/assets/2523721/d6717b8a-9a68-484b-bf2d-969140a9bfc1


**Binding ungroups**


https://github.com/tldraw/tldraw/assets/2523721/c85f99d5-9343-454f-a934-85d7489dbc72

## After

**Can create the group**


https://github.com/tldraw/tldraw/assets/2523721/e6c026d8-6a42-413c-9471-30669610910b


**Does not ungroup**


https://github.com/tldraw/tldraw/assets/2523721/74e43741-31a9-42a2-b1e0-6dca2e678669



Fixes https://github.com/tldraw/tldraw/issues/2088
Fixes https://github.com/tldraw/tldraw/issues/2089

### Change Type

- [x] `patch` — Bug fix
- [ ] `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

**Testing that you can correctly group a shape and an arrow bound to
it**
1. Insert a shape
7. Insert an arrow and bind it to the shape
8. Select both and group them (use the keyboard shortcut, seems like we
disable the UI for this case).
9. This should create a group.

**Testing that you don't ungroup an arrow when you unbind it from a
shape**
1. Start with a group that contains a shape and an arrow.
2. Bind the arrow to the shape and then unbind it.
3. The group should still be there.



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

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-11-14 07:14:51 +00:00
.github Only upload playwright to S3 if we have the right credentials (#2074) 2023-10-13 13:42:41 +00:00
.husky Replace Atom.value with Atom.get() (#2189) 2023-11-13 11:51:22 +00:00
.yarn Styles API (#1580) 2023-06-16 10:33:47 +00:00
apps No impure getters pt4 (#2206) 2023-11-13 16:02:50 +00:00
assets Japanese translations. (update) (#2199) 2023-11-13 12:10:56 +00:00
config Revert "Update dependencies (#1613)" (#1617) 2023-06-19 09:49:44 +00:00
packages Fix an issue with not being able to group a shape an an arrow. (#2205) 2023-11-14 07:14:51 +00:00
scripts fix standalone examples (#2042) 2023-10-09 10:55:16 +00:00
.eslintignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.eslintplugin.js transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.eslintrc.js tldraw zero - package shuffle (#1710) 2023-07-17 21:22:34 +00:00
.gitignore Publish api.json (#2034) 2023-10-08 15:00:58 +00:00
.ignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.prettierignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.prettierrc Revert "Update dependencies (#1613)" (#1617) 2023-06-19 09:49:44 +00:00
.yarnrc.yml lite: tweak lockfile name 2023-04-25 12:01:38 +01:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2023-11-10 10:49:37 +00:00
CODE_OF_CONDUCT.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
CONTRIBUTING.md Add contributor license agreement. (#1556) 2023-06-08 12:45:44 +00:00
lazy.config.ts untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
lerna.json Update CHANGELOG.md [skip ci] 2023-11-10 10:49:37 +00:00
LICENSE transfer-out: transfer out 2023-04-25 12:01:25 +01:00
package.json (chore) bump (#1744) 2023-07-18 10:19:28 +00:00
public-yarn.lock Fix an issue with edit link. (#2184) 2023-11-09 15:55:29 +00:00
README.md tldraw zero - package shuffle (#1710) 2023-07-17 21:22:34 +00:00
vercel.json Update readme (#2027) 2023-10-06 12:10:33 +00:00

tldraw

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:5420 for the basic example.
  • eg: localhost:5420/api for 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:

  • /apps contains the source for our applications
  • /packages contains the source for our public packages
  • /scripts contains scripts used for building and publishing
  • /assets contains icons and translations relied on by the app
  • /docs contains the content for our docs site at tldraw.dev

Applications

Packages

  • assets: a library for working with tldraw's fonts and translations
  • editor: the tldraw editor
  • state: a signals library, also known as signia
  • store: an in-memory reactive database
  • tldraw: the main tldraw package containing both the editor and the UI
  • tlschema: shape definitions and migrations
  • utils: low-level data utilities shared by other libraries
  • validate: 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.