Commit graph

74 commits

Author SHA1 Message Date
Steve Ruiz
41601ac61e
Stickies: release candidate (#3249)
This PR is the target for the stickies PRs that are moving forward. It
should collect changes.

- [x] New icon
- [x] Improved shadows
- [x] Shadow LOD
- [x] New colors / theme options
- [x] Shrink text size to avoid word breaks on the x axis
- [x] Hide indicator whilst typing (reverted)
- [x] Adjacent note positions
  - [x] buttons / clone handles
  - [x] position helpers for creating / translating (pits)
- [x] keyboard shortcuts: (Tab, Shift+tab (RTL aware), Cmd-Enter,
Shift+Cmd+enter)
  - [x] multiple shape translating 
- [x] Text editing
  - [x] Edit on type (feature flagged)
  - [x] click goes in correct place
- [x] Notes as parents (reverted)
- [x] Update colors
- [x] Update SVG appearance

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

Todo: fold in test plans for child PRs

### Unit tests:

- [ ] Shrink text size to avoid word breaks on the x axis
- [x] Adjacent notes
  - [x] buttons (clone handles)
  - [x] position helpers (pits)
- [x] keyboard shortcuts: (Tab, Shift+tab (RTL aware), Cmd-Enter,
Shift+Cmd+enter)
- [ ] Text editing
  - [ ] Edit on type
  - [ ] click goes in correct place

### Release Notes

- Improves sticky notes (see list)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-04-14 18:40:02 +00:00
Steve Ruiz
3ceebc82f8
Faster selection / erasing (#3454)
This PR makes a small improvement to the way we measure distances.
(Often we measure distances multiple times per frame per shape on the
screen). In many cases, we compare a minimum distance. This makes those
checks faster by avoiding a square root.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Release Notes

- Improve performance of minimum distance checks.
2024-04-13 13:30:30 +00:00
Mitja Bezenšek
de951dee59
Reorder dom elements. (#3431)
We reorded the dom a bit when we added the web gl rendered culled
shapes. We can now revert that.

Also noticed we weren't positioning the wrapper, so the z-index didn't
not apply.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [x] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [x] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-04-10 12:03:09 +00:00
Steve Ruiz
180cb67250
Improve hand dragging with long press (#3432)
This PR makes a small improvement to the hand tool to address a "long
press"-related issues.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
2024-04-10 12:02:50 +00:00
Steve Ruiz
dadb57edcd
Perf: block hit tests while moving camera (#3418)
This PR uses an element that prevents hit tests on shapes while the
camera is moving.


https://github.com/tldraw/tldraw/assets/23072548/9905f3d4-ba64-4e4d-ae99-194f513eaac8

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features


### Test Plan

1. Move the camera.
2. Interact with the canvas.
3. Zoom in and out.

### Release Notes

- Improves performance of canvas while the camera is moving.
2024-04-09 14:34:24 +00:00
Steve Ruiz
97b5e4093a
[culling] minimal culled diff with webgl (#3377)
This PR extracts the #3344 changes to a smaller diff against main. It
does not include the changes to how / where culled shapes are
calculated, though I understand this could be much more efficiently
done!

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

---------

Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
2024-04-05 18:03:22 +00:00
Mitja Bezenšek
f1e0af7631
Display none for culled shapes (#3291)
Comparing different culling optimizations:


https://github.com/tldraw/tldraw/assets/2523721/0b3b8b42-ed70-45b7-bf83-41023c36a563

I think we should go with the `display: none` + showing the skeleteon.
The way it works is:
- We now add a sibling to the shape wrapper div which serves as the
skeleton for the culled shapes.
- Only one of the two divs (shape wrapper and skeleton div) is
displayed. The other one is using `display: none` to improve
performance.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [x] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


- Improve performance of culled shapes by using `display: none`.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-04-05 13:23:02 +00:00
Mime Čuvalo
03e4c8575c
textfields: fix regression with Text shape and resizing (#3333)
The refactor of the textfields in this PR
https://github.com/tldraw/tldraw/pull/3050 caused a regression in
resizing Text shapes. (as demonstrated in this PR's video:
https://github.com/tldraw/tldraw/pull/3327)
We reverted that PR and now this PR updates the CSS to fix the gap that
was introduced when it was refactored.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know
2024-04-03 10:01:04 +00:00
Mime Čuvalo
6def201da2
ui: make toasts look more toasty (#2988)
<img width="449" alt="Screenshot 2024-03-11 at 14 03 44"
src="https://github.com/tldraw/tldraw/assets/469604/5b00dafc-abf1-44a3-b6c6-1d16db74b1be">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- UI: Add severity to toasts.
2024-03-27 09:41:13 +00:00
Mime Čuvalo
d76d53db95
textfields [1 of 3]: add text into speech bubble; also add rich text example (#3050)
This is the first of three textfield changes. This starts with making
the speech bubble actually have text. Also, it creates a TipTap example
and how that would be wired up.

🎵 this is dangerous, I walk through textfields so watch your head rock 🎵

### Change Type

- [x] `minor` — New feature

### Release Notes

- Refactor textfields be composable/swappable.
2024-03-27 09:33:48 +00:00
Steve Ruiz
4801b35768
[tinyish] Simplify / skip some work in Shape (#3176)
This PR is a minor cleanup of the Shape component.

Here we:
- use some dumb memoized info to avoid unnecessary style changes
- move the dpr check up out of the shapes themselves, avoiding renders
on instance state changes

Culled shapes:
- move the props setting on the culled shape component to a layout
reactor
- no longer set the height / width on the culled shape component
- no longer update the culled shape component when the shape changes

Random:
- move the arrow shape defs to the arrow shape util (using that neat API
we didn't used to have)

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Use shapes
2. Use culled shapes

### Release Notes

- SDK: minor improvements to the Shape component
2024-03-17 21:37:37 +00:00
Steve Ruiz
4cc823e22e
Show a broken image for files without assets (#2990)
This PR shows a broken state for images or video shapes without assets.
It deletes assets when pasted content fails to generate a new asset for
the shape. It includes some mild refactoring to the image shape.
Previously, shapes that had no corresponding assets would be
transparent. This PR preserves the transparent state for shapes with
assets but without source data (ie loading assets).

After:
<img width="1062" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/81ad6953-a45f-4cc2-9f39-559009621a82">
<img width="1158" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/40d15158-d201-458f-b555-6f3d8708a283">

Before:
<img width="1178" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/2bed5b3c-cf1f-48be-9c68-d15fdccb9c99">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an image / video
2. Delete its asset

### Release Notes

- Better handling of broken images / videos.
2024-03-01 18:16:27 +00:00
Steve Ruiz
3e41c3acd7
[fix] grid, other insets (#2858)
Fix the grid and other insets, a few CSS cleanups.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Turn on the grid.

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

### Release Notes

- Fixes a bug with the grid not appearing.
2024-02-18 23:01:00 +00:00
Mime Čuvalo
5faac660bc
errors: improve msg in dialog when error happens (#2844)
Right now it's hard to parse the stack trace to see what the problem is.
This just raises the msg up to a first-class position to get the gist of
the problem.

<img width="631" alt="Screenshot 2024-02-14 at 17 09 55"
src="https://github.com/tldraw/tldraw/assets/469604/d40b8bb4-e752-48d3-946d-6377c08e66fc">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Improves error dialog messaging.
2024-02-15 11:35:42 +00:00
Steve Ruiz
27b75b2701
[fix] sticky note bug (#2836)
Fixes a bug with sticky notes.

### Change Type

- [x] `patch` — Bug fix
2024-02-14 12:41:30 +00:00
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