Commit graph

19 commits

Author SHA1 Message Date
David Sheldrick
ed63bcead5
add missing spline icons (#3778)
We had somehow removed these

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


### 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.
2024-05-20 09:28:14 +00:00
Steve Ruiz
d3fe2d06e0
Fix missing icons (#3654)
Fix more missing icons.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
2024-04-30 10:39:53 +00:00
Steve Ruiz
5601d0ee22
Separate text-align property for shapes (#3627)
This PR creates a new "text align" property for text shapes. Its default
is left align.

This means that text shapes now have their own alignment prop, separate
from the vertical / horizontal alignment used in labels.

The style panel for text has no visual change:

<img width="400" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/aac80d2a-a069-4388-870b-1e0917d88eda">

The style panel for labels has consistent icons for label position:

<img width="487" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0adf7f0e-8446-4d3e-b9ea-a61e43035207">

Both may be configured separately.

<img width="458" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/698dcfac-6eb2-4a8c-afb8-d1e5761019ef">


# Icon refresh

This PR also removes many unused icons.

It adds a special toggle icon for the context menu.

<img width="571" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/489551e6-a370-4528-9ad4-8f93e119f26b">
<img width="492" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/cd3d77c7-8bae-4369-8b53-ca4685b2fd0e">


### Change Type

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

### Test Plan

1. Load files.
2. Paste excalidraw content.
3. Load v1 files.
4. Use the app as usual.

- [x] Unit Tests

### Release Notes

- Separates the text align property for text shapes and labels.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-04-29 10:58:15 +00:00
Mitja Bezenšek
15dd56a75e
Readonly / room creation omnibus (#3192)
Reworks how the readonly urls work. Till now we just used a simple
function that would scramble the slugs. Now we use a proper key value
mapping between regular and readonly slugs:

- We use two KV stores. One is for going from a slug to a readonly slug
and the other one for going the other way around. They are populated at
the same time.
- We separate preview KV stores (dev, preview, staging) from production
one. I've already created these on Cloudflare. [My understanding is
](https://developers.cloudflare.com/kv/reference/data-security/#encryption-at-rest)that
ids [can be
public](https://community.cloudflare.com/t/is-it-safe-to-keep-kv-ids-in-a-public-git-repo/517387/4)
since we can only access KV from our worker. Happy to move them to env
variables though.

- [x] Disable creating new rooms when tldraw is embedded inside iframes
on other websites (we check the referrer and if it's not the same as the
iframe's origin we don't allow it)
- [x] Fork a project when inside an iframe now opens the forked project
on tldraw.com and not inside iframe.
- [x] We allow embeding of iframes, but we now track the where they are
used via the referrer. We send this to Vercel analytics.
- [x] Improved UX of the share menu to make it less confusing. Toggle is
gone.
- [x]  `/new` and `/r` routes not redirect to `/`.
- [x] This introduces a new `/ro` route for readonly rooms. Legacy rooms
still live on `/v`.
- [x] Brought back `dotcom-shared` project to share code between BE and
FE. Mostly types.
- [x] Prevent creating of rooms by entering `/r/non-existing-slug`. 
- [x] Handle getting a readonly slug for old rooms. Added a comment
about it
[here](https://github.com/tldraw/tldraw/pull/3192/files#diff-c0954b3dc71bb7097c39656441175f3238ed60cf5cee64077c06e21da82182cbR17-R18).
- [x] We no longer expose editor on the window object for readonly
rooms. Prevents the users disabling readonly rooms manually.

### Change Type

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

- [ ] `sdk` — Changes the tldraw SDK
- [x] `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. Make sure old readonly rooms still work.
2. Creating a readonly link from an existing room should still use `/v`
path.
3. Newly created rooms should use `/ro` path for readonly rooms. Make
sure these work as well.
4. `/r` room was disabled and redirects to `/`
5. `/new` should still work when not inside iframes.

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

### Release Notes


1. This adds new functionality for readonly rooms:
- We have a new route `/ro` for newly created readonly rooms. These
rooms no longer use the scrambling logic to create readonly slugs.
Instead we now use KV storage from cloudflare to track the mapping for
slugs -> readonly slug and readonly slug -> slug.
- The old route `/v` is preserved, so that the old room still work as
they did before.
- For old rooms we will keep on generating the old readonly slugs, but
for new rooms we'll start using the new logic.
2. We no longer prevent embedding of tldraw inside iframes. 
3. We do prevent generating new rooms from inside the iframes though.
`/r`, `/new`, `/r/non-existing-id` should not allow creation of new
rooms inside iframes. Only `/new` still works when not inside iframes.
4. Forking a project from inside an iframe now opens it on tldraw.com
5. Slight copy change on the sharing menu. We no longer have a toggle
between readonly and non-readonly links.
6. `editor` and `app` are no longer exposed on the window object for
readonly rooms. Prevents users from using the `updateInstanceState` to
escape readonly rooms.

---------

Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-04-25 14:10:40 +00:00
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
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
f5d1977263
menu: just have an empty space for checked menuitems (#2785)
### Change Type

- [x] `patch` — Bug fix

- UI: Update menu checkbox style.
2024-02-09 11:55:45 +00:00
Mime Čuvalo
ace1743ae5
menus: address several little big things about menu styling (#2624)
- menu: fix accidental stacking of menus
https://linear.app/tldraw/issue/TLD-2077/radix-menus-double-submenu
which is a followup to https://github.com/tldraw/tldraw/pull/2101
- cc @steveruizok I might be missing context here but looking at the
original PR I don't see why this is needed anymore? can you show me in
person?
- menu: rework checkboxes
https://linear.app/tldraw/issue/TLD-2071/improve-appearance-of-menu-checkboxes
- menu: nix the text-shadow on menus
- menu: fix the kbd being off by a couple pixels

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes nits on styling on our Radix menus.
2024-01-25 11:34:18 +00:00
David Sheldrick
b87dac538d
fix geo cloud icon (#2485)
fixes #2476 

before (safari)

![image](https://github.com/tldraw/tldraw/assets/1242537/52278ecf-788b-4e42-a24b-700e8e0e35cf)


after (safari)
<img width="190" alt="image"
src="https://github.com/tldraw/tldraw/assets/1242537/cf3f8d2b-01c2-4334-84c4-6b216be6c727">


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



- Fixes the rendering of the cloud icon on safari.
2024-01-17 11:13:23 +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
aaf810b015
Add offline indicator (also to top zone example) (#2083)
This PR adds an offline indicator to the UI package. It's not used in
the default app but we'll use it on tldraw.com, and it makes sense to
include it here as it's generally useful.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. See the zones example.

### Release Notes

- [@tldraw/tldraw] add offline indicator to ui components
2023-10-17 08:32:41 +00:00
David Sheldrick
83a391b46b
Add cloud shape (#1708)
![Kapture 2023-07-04 at 16 36
31](https://github.com/tldraw/tldraw/assets/1242537/bcb19959-ac66-46fa-92ea-50fe4692a96c)


### Change Type

- [x] `minor` — New feature


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

### Test Plan

1. Make some cloud shapes, try different sizes, colors, fills.
2. Export cloud shapes to images.

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

### Release Notes

- Adds a cloud shape.
2023-07-07 15:32:08 +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
alex
674a829d1f
[1/3] initial highlighter shape/tool (#1401)
This diff adds an initial version of the highlighter shape. At this
stage, it's a complete copy of the draw tool minus the following
features:
* Fills
* Stroke types
* Closed shapes

I've created a new shape util (a copy-paste of the draw one with stuff
renamed/deleted) but reused the state chart nodes for the draw shape.
Currently this new tool looks exactly like the draw tool, but that'll be
changing soon!

![Kapture 2023-05-17 at 15 37
33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01)

The UI here is extremely WIP. The highlighter tool is behind a feature
flag, but once enabled is accessible through the tool bar. There's a
first-draft highlighter icon (i didn't spend much time on this, it's not
super legible on non-retina displays yet imo), and the tool is bound to
the `i` key (any better suggestions? `h` is taken by the hand tool)

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

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

### Test Plan
(not yet)

### Release Notes

[internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
Steve Ruiz
1eb1f89cd1
[feature] add laser pointer (#1412)
This PR adds a laser pointer. It's also available in readonly rooms.

![Kapture 2023-05-18 at 17 00
18](https://github.com/tldraw/tldraw/assets/23072548/4f638dff-8c17-4f9d-8177-4a63a524b7fd)

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Select the laser pointer tool
2. Draw some lasers.

### Release Notes

- Adds the laser pointer tool.
2023-05-19 11:09:13 +00:00
Mitja Bezenšek
f59bfe01b1
Vertical text alignment for geo shapes (#1414)
Vertical text alignment for geo shapes.

### Change Type

- [x] `minor` — New Feature

### Test Plan

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

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- This adds vertical text alignment property to geo shapes.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-19 10:23:43 +00:00
Steve Ruiz
9101dcfd44
open menus refactor (#1400)
This PR makes a change to how open menus are handled.

### Change Type

- [x] `minor` — New Feature
2023-05-17 14:30:28 +00:00
Steve Ruiz
bb96852b9d
[feature] check-box geo shape (#1330)
This PR adds a `check-box` geo shape. 

![Kapture 2023-05-08 at 15 31
49](https://user-images.githubusercontent.com/23072548/236853749-99ba786f-73a4-4b65-86ca-f2cdac61a903.gif)

It also improves some logic around the `onClick` shape util handler and
some surprisingly related fixes to point hit testing.

### Test Plan

1. Create a geo shape
2. Set it as a checkbox style
3. *easter egg* double click while holding alt to toggle between
check-box and rectangle

- [x] Unit Tests

### Release Note

- Adds checkbox geo shape.
2023-05-09 13:32:04 +00:00
alex
29ed921c67 transfer-out: transfer out 2023-04-25 12:01:25 +01:00