Commit graph

59 commits

Author SHA1 Message Date
Steve Ruiz
ad58bbb98b
[fix] overlays, custom brush example (#2806)
This PR fixes the overlays / custom brush example

### 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
2024-02-12 18:04:15 +00:00
Steve Ruiz
79460cbf3a
Use canvas bounds for viewport bounds (#2798)
This PR changes the way that viewport bounds are calculated by using the
canvas element as the source of truth, rather than the container. This
allows for cases where the canvas is not the same dimensions as the
component. (Given the way our UI and context works, there are cases
where this is desired, i.e. toolbars and other items overlaid on top of
the canvas area).

The editor's `getContainer` is now only used for the text measurement.
It would be good to get that out somehow.

# Pros

We can inset the canvas

# Cons

We can no longer imperatively call `updateScreenBounds`, as we need to
provide those bounds externally.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Use the examples, including the new inset canvas example.

- [x] Unit Tests

### Release Notes

- Changes the source of truth for the viewport page bounds to be the
canvas instead.
2024-02-12 15:03:25 +00:00
alex
4d0aff8f01
Split snap manager into ShapeBoundsSnaps and HandleSnaps (#2747)
Taking the opportunity for some last-minute low-consequence breaking
changes before 2.0, this diff does some prep work for adding a new
snapping API by making the distinction between the two types of snapping
a bit clearer and cleaning up some naming.

- `SnapManager` has had most of the actual snapping logic moved into two
properties: `shapeBounds` (for snapping shape bounds on translate and
resize) and `handles` (for snapping handles)
- `SnapLine`s are renamed to `SnapIndicator`s. The 'line' name was a bit
confusing because not all of these indicators are lines (the new vertex
snap type will be a single point)

I'm not too worried about this being a breaking change as it touches an
area of the API that I'd be very surprised if more than a couple of
people were using.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- No user-facing changes.

### Release Notes

- `SnapLine`s are now called `SnapIndicator`s
- Snapping methods moved from `editor.snaps` to
`editor.snaps.shapeBounds` and `editor.snaps.handles` depending on the
type of snapping you're trying to do.
2024-02-07 10:40:01 +00:00
Mime Čuvalo
8cd8117acf
arrows: update cursor only when in Select mode (#2742)
The cursor was updating for the arrow label even when in other tools
(e.g. Draw) and it should only be updating when in Select mode. That
addresses this issue: https://github.com/tldraw/tldraw/issues/2750

Also, there was a problem with arrows and zero length arrows and labels.
The problem was actually in `Vec.ts` where we were dividing by zero.
Addresses this bug https://github.com/tldraw/tldraw/issues/2749

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Make sure that the cursor is only applicable to the Select tool.

### Release Notes

- Cursor tweak for arrow labels.
2024-02-06 14:42:35 +00:00
Mime Čuvalo
34a95b2ec8
arrows: separate out handle behavior from labels (#2621)
This is a followup on the arrows work.
- allow labels to go to the ends if no arrowhead is present
- avoid using / overloading TLHandle and use a new PointingLabel state
to specifically address label movement
- removes the feature flag to launch this feature!

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Arrow labels: provide more polish on label placement

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-31 11:17:03 +00:00
Steve Ruiz
8b73e77ec2
[Improvement] Text measurement tweaks (#2670)
This PR duplicates a template node rather than creating a new node each
time or querying for a selector. Functions clean up the node that is
created.

### Change Type

- [x] `patch`
2024-01-28 11:39:11 +00:00
Steve Ruiz
2610790873
[Fix] Overlapping non-adjacent handles (#2663)
In a previous PR, we improved logic for skipping virtual handles if a
handle's neighbor is too close to it. This PR improves this logic
further by testing against all other vertex handles, not just the
neighbors; and skipping tests against handles that are not vertices
(such as arrow text labels).

This PR also:
- removes some static cursors from `useCursors`
- adds a tiny bit of hover to text labels to differentiate them when
hovered

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an arrow with a text label
2. Select the arrow
3. The arrow's middle handle should be selectable and in front of the
text label

### Release Notes

- Fixed a bug with virtual / create handle visibility.
2024-01-27 15:01:18 +00:00
alex
cff5be4605
Make sure correct dark mode colours get used in exports (#2492)
Also tweaks the colours of menus in dark mode to have a little higher
contrast. Fixed #2493

### Change Type

- [x] `patch` — Bug fix


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

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-01-17 14:31:38 +00:00
David Sheldrick
8eba6704df
Prevent overlay content disappearing at some browser zoom levels (#2483)
This essentially reverts the change from #1858 – it seems to be no
longer necessary after we applied the transforms to each overlay item
individually rather than applying a single transform to the outer
container.

This fixes an issue where at certain zoom levels, overlay elements would
disappear when their parent div/svg (that we use for positioning) went
offscreen while their overflowing contents (the stuff you could see) did
not.

todos before merging
- [ ] test on android and ios
- [ ] test on windows


### Change Type

- [x] `patch` — Bug fix

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

### Release Notes

- removes the internal `useDprMultiple` hook
2024-01-17 10:44:40 +00:00
Steve Ruiz
1f425dcab3
[tweak] dark mode colors (#2469)
This PR fixes a few dark mode colors and removes some unused styles.

### Change Type

- [x] `patch` — Bug fix
2024-01-14 16:27:16 +00:00
Steve Ruiz
4dda5c4c46
[improvement] update dark mode (#2468)
This PR updates the colors on tldraw's dark mode.

### Change Type

- [x] `minor` — New feature

### Release Notes

- Updated dark mode colors.
2024-01-13 18:04:19 +00:00
Lu Wilson
4b4c258219
Stop shape text labels being hoverable when context menu is open (#2352)
Fixes https://github.com/tldraw/tldraw/issues/2351

This css change shouldn't affect any other interactions.

Tested on:
- Mac Chrome
- Mac Chrome with touch
- Mac Safari
- Mac Firefox

### 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

1. Right click to open context menu.
2. Click on a filled shape's text label.
3. Make sure the context menu has closed.

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

### Release Notes

- Add a brief release note for your PR here.
2023-12-19 14:26:10 +00:00
Mitja Bezenšek
e2ddbb16f6
Removing frames and adding elements to frames (#2219)
- Add simple frame removing - it just drops the frame and parent
children to frames parent.
- Select children after removing the frame.
- Add children to the frame if we resize the frame so that it encloses
them.

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### 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. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
2023-11-29 12:01:57 +00:00
Steve Ruiz
14e8d19a71
Custom Tools DX + screenshot example (#2198)
This PR adds a custom tool example, the `Screenshot Tool`.

It demonstrates how a user can create a custom tool together with custom
tool UI.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Use the screenshot example

### Release Notes

- adds ScreenshotTool custom tool example
- improvements and new exports related to copying and exporting images /
files
- loosens up types around icons and translations
- moving `StateNode.isActive` into an atom
- adding `Editor.path`
2023-11-15 18:06:02 +00:00
Mitja Bezenšek
6f12eaefa2
Revert back to the previous color. (#2210)
Fixes the color of culled shapes when using dark mode. Reverted to the
color that was set before the blue test color.


### 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

### Release Notes

- Fixes the color of culled shapes when using dark mode.
2023-11-14 08:21:24 +00:00
Taha
1cf4e69c47
add missing semicolon (#2182)
Fixes #2152

A semicolon was missing from the editor.css file

### 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


### Release Notes

- Fix typo in CSS file
2023-11-09 14:15:28 +00:00
Steve Ruiz
ddb73cb6cf
Tighten up editor ui (#2102)
This PR tightens up the editor UI. It removes padding around the editor.

![Kapture 2023-10-28 at 18 27
15](https://github.com/tldraw/tldraw/assets/23072548/18075308-7b62-43a1-8c80-ff4e4136197b)

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/a8205ef1-b142-4fdc-9745-e400c0c4939a">

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/87e9dcd1-39f5-466a-a256-9cbd2ff2cf7e">

### Change Type

- [x] `minor` — New feature

### Release Notes

- Small adjustment to editor ui.
2023-10-28 21:58:32 +00:00
Steve Ruiz
e2a6f3ed40
Restore background (#2037)
This PR restores the missing background component (which includes the
background color).

### Change Type

- [x] `patch` — Bug fix
2023-10-09 06:19:41 +00:00
Steve Ruiz
9c1dc00740
Debugging cleanup / misc cleanup (#2025)
This PR:
- removes feature flags for people menu, highlighter shape
- removes debugging for cursors
- adds a debug flag for hiding shapes
- changes Canvas to use `useValue` rather than `track`
- removes the default background color on `tl-background`
- in the editor components, makes `Background` null by default

### Change Type

- [x] `minor` — New feature
2023-10-06 08:57:46 +00:00
David Sheldrick
647977ceec
frame label fix (#2016)
Frame labels lost their editing outline at some point. 🤷🏼 any idea how
this happened?

## Before
![Kapture 2023-10-04 at 13 47
28](https://github.com/tldraw/tldraw/assets/1242537/5da612e3-6456-493d-a4d7-4a5b953284bb)

## After
![Kapture 2023-10-04 at 13 49
55](https://github.com/tldraw/tldraw/assets/1242537/1608af3b-aac8-4f1c-8a9b-09aab19b07fb)


### 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

1. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add a brief release note for your PR here.
2023-10-04 15:46:59 +00:00
Steve Ruiz
c63126ba5f
Contain all the things (#1999)
This PR adds some css containment where possible.

### Change Type

- [x] `patch` — minor
2023-10-03 14:26:36 +00:00
alex
92886e1f40
fix text in geo shapes not causing its container to grow (#2003)
We got things sliggghhhtly wrong in #1980. That diff was attempting to
fix a bug where the text measurement element would refuse to go above
the viewport size in safari. This was most obvious in the case where
there was no fixed width on a text shape, and that diff fixed that case,
but it was also happening when a fixed width text shape was wider than
viewport - which wasn't covered by that fix. It turned out that that fix
also introduced a bug where shapes would no longer grow along the y-axis
- in part because the relationship between `width`, `maxWidth`, and
`minWidth` is very confusing.

The one-liner fix is to just use `max-content` instead of `fit-content`
- that way, the div ignores the size of its container. But I also
cleared up the API for text measurement to remove the `width` property
entirely in favour of `maxWidth`. I think this makes things much clearer
and as far as I can tell doesn't affect anything.

Closes #1998 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an arrow & geo shape with labels, plus a note and text shape
2. Try to break text measurement - overflow the bounds, make very wide
text, experiment with fixed/auto-size text, etc.
2023-10-03 14:26:13 +00:00
Steve Ruiz
f2833b52c9
Sliiiightly darken muted-2 color. (#1981)
This PR slightly darkens the muted-2 color, shown when hovering menu
items.

<img width="881" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/ffe5f0c6-323e-4e78-a4eb-0a28a4b026c0">


### Change Type

- [x] `patch` — Bug fix
2023-10-02 11:48:34 +00:00
Steve Ruiz
3fa7dd359d
[fix] text shape outline (#1974)
This PR fixes the text shape outline.

### Change Type

- [x] `patch` — Bug fix
2023-10-02 11:14:37 +00:00
Steve Ruiz
9e4dbd1901
[fix] geo shape text label placement (#1927)
This PR fixes the text label placement for geo shapes. (It also fixes
the way an ellipse renders when set to dash or dotted).

There's still the slightest offset of the text label's outline when you
begin editing. Maybe we should keep the indicator instead?

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Create a hexagon shape
hit enter to type
indicator is offset, text label is no longer offset

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-09-26 14:05:05 +00:00
Brian Hung
930abaf5d7
avoid pixel rounding / transformation miscalc for overlay items (#1858)
Fixes pixel rounding when calculating css transformations for overlay
items. Also fixes issue where `editor.instanceState.devicePixelRatio`
wasn't properly updating.

TLDR; `width * window.devicePixelRatio` should be integer to avoid
rounding. `--tl-dpr-multiple` is smallest integer to multiply
`window.devicePixelRatio` such that its product is an integer.

#1852 
#1836 
#1834

### 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

Would need to add a test checking when `window.devicePixelRatio`
changes, that `editor.instanceState.devicePixelRatio` is equal.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-09-08 10:47:14 +00:00
David Sheldrick
c1f896b042
Fix indicator transform miscalculation (#1852)
Before

![image](https://github.com/tldraw/tldraw/assets/1242537/3bd21dda-2dab-4e1b-8c57-f90799b98f53)


After

![image](https://github.com/tldraw/tldraw/assets/1242537/8e55e154-a4dc-4f46-ac5a-4b322926733b)

follow up to https://github.com/tldraw/tldraw/pull/1836 should fix the
caveat raised by @leolorenzoluis #1834

### 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

### Release Notes

- Fixes indicator transform miscalculation on android and windows
2023-09-07 12:37:22 +00:00
Steve Ruiz
7c208e4225
[fix] pointer events in shapes (#1855)
This PR fixes a bug that would effect pointer events inside of shapes.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a frame
2. Try to edit its title by double clicking on it
2023-09-07 11:29:58 +00:00
Steve Ruiz
046718f241
[fix] overlays stacking (#1849)
This PR fixes a small bug introduced by #1842 where overlays would be
stacked behind shapes.

### Change Type

- [x] `patch` — Bug fix
2023-09-06 13:55:40 +00:00
Steve Ruiz
227c97a057
[fix] awful rendering issue (#1842)
This PR fixes an extremely performance-crushing bug that was happening
in Safari and Chrome when iframes were present.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create one hundred shapes
2. Create a gist or maps embed
3. Select all

If the app crashes or the rendering layers list grows to lots and lots
of layers, that's the bug.

### Release Notes

- [fix] iframe rendering issue
2023-09-05 12:41:57 +00:00
Steve Ruiz
249bacf50b
[fix] svg overlays when browser zoom is not 100% (#1836)
This PR fixes the effect of browser zoom on SVG overlays. I don't know
why this works.

Should fix https://github.com/tldraw/tldraw/issues/1834

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Draw a rectangle.
2. Change your browser's zoom level (note: not tldraw's zoom level, just
your browser's).
3. Select the rectangle.
2023-09-01 13:34:03 +00:00
Steve Ruiz
e76de88668
[fix] text editing outline when scaled (#1826)
This PR counter-scales the outline of editing text shapes.

<img width="410" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7a6652b9-10d3-42a5-a4b3-58508b862f8a">
<img width="654" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7d536dd8-e40f-495f-b059-cbcd450134c2">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a text shape
2. Scale it up
3. Edit it
4. Check that the outline isn't ridiculously big
2023-08-25 17:27:32 +00:00
Steve Ruiz
b203967341
[fix] remove CSS radius calculations (#1823)
This PR fixes some creative use of CSS in setting the radius property of
various SVGs. While this use is supported in all browsers, it was
confusing CSS processors. Moving these out of CSS and into JavaScript
seems to be a pretty minor trade. Closes
https://github.com/tldraw/tldraw/issues/1775.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Ensure that borders and handles adjust their radii correctly when
zoomed in or out.
2023-08-25 16:22:52 +00:00
Steve Ruiz
57b2cf6955
[fix] editing video shapes (#1821)
This PR fixes editing video shapes. The controls are now interactive
again.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a video shape.
2. Double click to edit the shape.
3. Use the controls to pause, change time, etc.

### Release Notes

- Fix bug with editing video shapes.
2023-08-25 05:49:06 +00:00
Steve Ruiz
d750da8f40
ShapeUtil.getGeometry, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.

It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs

This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.

## Geometry

All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:

```ts
class BoxyShapeUtil {
  getGeometry(shape: BoxyShape) {
    return new Rectangle2d({
        width: shape.props.width, 
        height: shape.props.height, 
        isFilled: true,
        margin: shape.props.strokeWidth
      })
    }
}
```

This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.

There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`

For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.

## Hit testing

Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.

## Selection

We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.

![Kapture 2023-07-23 at 23 27
27](https://github.com/tldraw/tldraw/assets/23072548/a743275c-acdb-42d9-a3fe-b3e20dce86b6)

every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions

This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.

![Kapture 2023-07-24 at 23 34
07](https://github.com/tldraw/tldraw/assets/23072548/871d67d0-8d06-42ae-a2b2-021effba37c5)

...as well as issues with labels and editing.

There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.

## Arrow binding

Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.

![Kapture 2023-07-22 at 07 46
25](https://github.com/tldraw/tldraw/assets/23072548/5aa724b3-b57d-4fb7-92d0-80e34246753c)

a thousand wise men could not improve on this

## Moving focus between editing shapes

Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.

![Kapture 2023-07-23 at 23 19
09](https://github.com/tldraw/tldraw/assets/23072548/a5e157fb-24a8-42bd-a692-04ce769b1a9c)

In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.

![Kapture 2023-07-23 at 23 22
21](https://github.com/tldraw/tldraw/assets/23072548/7384e7ea-9777-4e1a-8f63-15de2166a53a)

tldraw, glorious tldraw

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes

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

### Release Notes

- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
Steve Ruiz
fc36d5b577
[fix] arrow snapping bug (#1756)
This PR fixes snapping for arrow shapes. Previously, the middle handle
of an arrow was marked as a vertex, causing the arrow to have to
segments (one of which would be snapped to). In this PR we make the
second handle a "virtual" handle and tweak how we display handles to
preserve the same appearance.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Drag an arrow while snapping.

### Release Notes

- [fix] arrow snapping
2023-07-22 05:19:16 +00:00
Steve Ruiz
b22ea7cd4e
More cleanup, focus bug fixes (#1749)
This PR is another grab bag:
- renames `readOnly` to `readonly` throughout editor
- fixes a regression related to focus and keyboard shortcuts
- adds a small outline for focused editors

### Change Type

- [x] `major`

### Test Plan

- [x] End to end tests
2023-07-19 10:52:21 +00:00
Steve Ruiz
b7d9c8684c
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw

At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.

## Library changes

@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.

- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.

- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw

Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.

## API Changes

The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.

All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.

You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.

The `components` prop now also accepts `SelectionForeground`.

The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.

Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.

The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.

- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`

### Change Type

- [x] `major` — Breaking change

### Test Plan

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

### Release Notes

- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw

---------

Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
Steve Ruiz
cf2cc8c970
[improvement] add box sizing border box (#1674)
This PR adds `box-sizing: border-box` to the editor and its children.

### Change Type

- [x] `patch`

### Release Notes

- [@tldraw/editor] Add `box-sizing: border-box` to `tl-container`
2023-06-29 14:23:18 +00:00
alex
e8bc114bf3
Styles API follow-ups (#1636)
tldraw-zero themed follow-ups to the styles API added in #1580.

- Removed style related helpers from `ShapeUtil`
- `editor.css` no longer includes the tldraw default color palette.
Instead, a global `DefaultColorPalette` is defined as part of the color
style. If developers wish to cusomise the colors, they can mutate that
global.
- `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an
"svg export context" that can be used to add `<defs>` to the exported
SVG element. Converting e.g. fonts to inlined data urls is now the
responsibility of the shapes that use them rather than the Editor.
- `usePattern` is not longer a core part of the editor. Instead,
`ShapeUtil` has a `getCanvasSvgDefs` method for returning react
components representing anything a shape needs included in `<defs>` for
the canvas.
- The shape-specific cleanup logic in `setStyle` has been deleted. It
turned out that none of that logic has been running anyway, and instead
the relevant logic lives in shape `onBeforeChange` callbacks already.

### Change Type
- [x] `minor` — New feature

### Test Plan


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

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
Lu Wilson
39a4615fe5
Fix SVG cursors not being used (#1639)
This PR fixes a bug where our custom SVG cursors were not being used,
causing cursor chat to look worse on Windows.

It was the result of a dodgy merge!

### Change Type

- [x] `patch` — Bug fix

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

### Test Plan

To test this, you might need to change your OS cursor to something
different to usual. I set mine to off-black so that I can test this sort
of thing.

1. Make sure that your cursor is our custom black cursor when using the
app.

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

### Release Notes

- None: Fixing an unreleased bug.
2023-06-24 08:24:10 +00:00
Steve Ruiz
a4b5bcb8f7
3/2 Cursor chat (#1623)
This PR tweaks the cursor chat support.

### Change Type

- [x] `patch` — Bug fix
2023-06-20 12:08:49 +00:00
Steve Ruiz
4dfc59e5cb
tldraw.css (#1607)
This PR introduces `@tldraw/tldraw/tldraw.css`, an exported CSS file
that replaces the `editor.css` and `ui.css` that were previously copied
from the editor and ui packages. Instead, these files are combined into
the `tldraw.css` file, simplifying the import story when using
`@tldraw/tldraw`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [tldraw] Removes `editor.css` and `ui.css` exports, replaces with
`tldraw.css`
2023-06-17 22:33:21 +00:00
Lu Wilson
3bbb34eba8
(1/2) Cursor Chat - Presence (#1487)
This PR adds support for seeing **another user**'s chat messages.

It's part 1 of two PRs relating to Cursor Chat.
And it's needed for the much bigger part 2:
https://github.com/tldraw/brivate/pull/1981

# Presence

You can see another person's chat messages!

![2023-06-02 at 17 42 33 - Blush
Capybara](https://github.com/tldraw/tldraw/assets/15892272/8f3efb5f-9c05-459c-aa7e-24842be75e58)

If they have a name, it gets popped on top.

![2023-06-02 at 17 45 34 - Sapphire
Meerkat](https://github.com/tldraw/tldraw/assets/15892272/749bd924-c1f5-419b-a028-1fafe1b61292)

That's it!
With this PR, there's no way of actually *typing* your chat messages.
That comes with the [next
one](https://github.com/tldraw/brivate/pull/1981)!

# Admin

### To-do

- [x] Store chat message
- [x] Allow overflowing chat
- [x] Presence for chat message
- [x] Display chat message to others

### Change Type

- [x] `minor` — New Feature

### Test Plan

To test this, I recommend checking out both `lu/cursor-chat` branches,
and opening two browser sessions in the same shared project.

1. In one session, type some cursor chat by pressing the Enter key while
on the canvas (and typing).
2. On the other session, check that you can see the chat message appear.
3. Repeat this while being both named, and unnamed.

I recommend just focusing on the visible presense in this PR.
The [other PR](https://github.com/tldraw/brivate/pull/1981) is where we
can focus about how we _input_ the cursor chat.

### Release Notes

- [dev] Added support for cursor chat presence.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:10:08 +00:00
Mitja Bezenšek
86e0010523
Make sure loading screens use dark mode user preference. (#1552)
We load the user preferences a bit earlier, so that we can make sure
that the `LoadingScreen` and `ErrorScreen` also use the correct color
and background color based on the dark mode setting.

There's still a brief flash of white screen, but that's before any of
our components load, not sure if we can avoid that one.

Solves https://github.com/tldraw/tldraw/issues/1248

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Probably best if you throttle your network speed.
2. Reload the page.
3. The asset loading screen should use take your dark mode setting into
account.
4. Change the dark mode and try again.

### Release Notes

- Make sure our loading and error screens take dark mode setting into
account.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 11:57:19 +00:00
Steve Ruiz
1f0a20cc94
Simplify static cursors (#1520)
This PR simplifies the static cursors.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Test Plan

1. Use cursors throughout app.

### Release Notes

- (editor) Simplifies the cursors in our CSS.
2023-06-05 14:49:44 +00:00
alex
d6085e4ea6
[3/3] Highlighter styling (#1490)
This PR finalises the highlighter shape with new colors, sizing, and
perfect freehand options.

The colors are based on our existing colour palette, but take advantage
of wide-gamut displays to make the highlighter highlightier. I used my
[oklch color palette tool to pick the
palette](https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3).
I'm not sure happy about these colors as they are right now - in
particular, i think dark mode looks a bit rubbish and there are a few
colors where the highlight and original version are much too similar
(light-violet & light-red). Black uses yellow (like note shape) and grey
uses light-blue. Exports are forced into srgb color space rather than P3
for maximum compatibility.


![image](https://github.com/tldraw/tldraw/assets/1489520/e3de762b-6ef7-4d17-87db-3e2b71dd8de1)


![image](https://github.com/tldraw/tldraw/assets/1489520/3bd90aa9-bdbc-4a2b-9e56-e3a83a2a877b)



The size of a highlighter stroke is now based on the text size which
works nicely for making the highlighter play well with text:


![image](https://github.com/tldraw/tldraw/assets/1489520/dd3184fc-decd-4db5-90ce-e9cc75edd3d6)


Perfect freehands settings are very similar to the draw tool, but with
the thinning turned way down. There is still some, but it's pretty
minimal.

### The plan
1. initial highlighter shape/tool #1401 
2. sandwich rendering for highlighter shapes #1418
3. shape styling - new colours and sizes, lightweight perfect freehand
changes #1490 **>you are here<**

### Change Type
- [x] `minor` — New Feature

### Test Plan

1. You can find the highlighter tool in the extended toolbar
2. You can activate the highlighter tool by pressing shift-D
3. Highlighter draws nice and vibrantly when over the page background or
frame background
4. Highlighter is less vibrant but still visible when drawn over images
/ other fills
5. Highlighter size should nicely match the corresponding unscaled text
size
6. Exports with highlighter look as expected

### Release Notes

Highlighter pen is here! 🎉🎉🎉

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 15:34:59 +00:00
Steve Ruiz
f63371577d
[mini-feature] Following indicator (#1468)
This PR adds a colored box around the current window when following
another user.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Follow a user
2. Check out the box

### Release Notes

- Adds viewport following indicator
2023-05-25 15:41:49 +00:00
Mitja Bezenšek
787eab75d6
Add migration for horizontal alignment (#1443)
This adds a migration to migrate existing alignment options to their
legacy counter parts (`start` -> `start-legacy`, `end` -> `end-legacy`,
`middle` -> `middle-legacy`).

With this change the legacy options don't show any align as active in
the Styles panel:
![CleanShot 2023-05-23 at 19 53
45](https://github.com/tldraw/tldraw/assets/2523721/4017e03a-9492-4a02-b991-ac206f40ae17)

I think this is probably what we want.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Use some old preview link to create Geo and Note shapes with old
alignment options. You can use this one:
https://examples-kzwtf68jr-tldraw.vercel.app/
2. Copy and paste these shapes over to staging. Nothing should change
visually.
3. Also try out exporting to svg (with both old and new alignment
options)

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Add support for legacy alignment options.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-24 11:34:13 +00:00
Lu Wilson
ab0df9118e
Add SVG cursors for all cursor types (#1416)
Fixes #1410 

This PR adds custom SVGs for all cursor types.
This will unblock some upcoming collaboration features!

It also adds some basic debugging for custom cursors.

![2023-05-19 at 11 02 57 - Coffee
Shrimp](https://github.com/tldraw/tldraw/assets/15892272/dbc84d04-604f-43e5-acd2-69df956e5784)

It uses custom cursors for any shape-related UI, like links.

![2023-05-19 at 11 07 04 - Amaranth
Aphid](https://github.com/tldraw/tldraw/assets/15892272/7eb25f6a-0552-47bd-b2b9-f6c3dc2fca70)

But it sticks with the default browser cursors for the non-canvas UI.

![2023-05-23 at 15 06 29 - Apricot
Bovid](https://github.com/tldraw/tldraw/assets/15892272/2fe35afb-095a-4454-a6c3-aa8337b71506)

### Change Type

- [x] `minor`

### Test Plan

1. Enable debug mode.
2. From the debug menu, enable "Debug cursors".
3. Hover the cursor over the shapes that appear.
4. Check that the cursor appears correctly over each one.
5. (Don't forget to turn off "Debug cursors" after use).

### Release Notes

- Added consistent custom cursors.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-23 14:12:11 +00:00