Decrease the number of rendered dom nodes for geo shape and arrows #3283
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When geo shape has no url or text we don't show the html container. This results in 3 fewer dom nodes per geo shape (going from 7 to 4).
MitjaBezensek
temporarily deployed
to
deploy-staging
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
steveruizok
approved these changes
Mar 28, 2024
|
Nice one! |
|
Awesome! I'm seeing 100 shapes = 300 nodes here, on main its 700 shapes. |
MitjaBezensek
changed the title
steveruizok
pushed a commit
that referenced
this pull request
Mar 28, 2024
When geo shape has no url or text we don't show the html container containing the label and link. This results in 3 fewer dom nodes per empty geo shape (going from 7 to 4). Similarly for an arrow without the text label we go from 13 to 10. First paint experience with 2000 empty rectangle shapes Before: 1.5-1.6s After: 1.2-1.3s 2000 rectangles shapes with text is similar between the two, around 3.6s. ### 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 ### Release Notes - Reduce the number of rendered dom nodes for geo shapes and arrows without text.
16 tasks
steveruizok
added a commit
that referenced
this pull request
Apr 4, 2024
This is take 2 on this original PR: #3132 It goes further to try to address these issues that came up: - [x] fixes up problem with being able to click "through" an occluded shape because of z-layer issues. This is done by only "raising" the textareas when a shape is selected, priming them for easy selection. - [x] add a `data-isediting` property which lets us stay in editing mode and keep the z-indices of the textareas raised when in editing mode. - [x] Initiating a drag from within a textarea was losing pointer events when going over the UI. Would love feedback on this piece - had to disable pointer events to the UI while dragging which I think is the right move anyway. But wiring that up properly could use work since it relies on cursor changes, heh. Btw, @MitjaBezensek I had to undo your PR #3283 because that would conflict with this sticky work where we want text editing to be more fluid. ### 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 --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
steveruizok
added a commit
that referenced
this pull request
Apr 5, 2024
commit 1a64238 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Fri Apr 5 10:56:14 2024 +0100 lint commit c5059f1 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Fri Apr 5 10:49:54 2024 +0100 textfields: bring shape into view when editing (#3362) This actually is a problem in production anyway, for any shape, not particular to new auto-editing or stickies. Case in point: - shape is selected - move the shape offscreen - hit Enter - you'll be editing the shape but it won't be visible to you. This change consolidates some of the duplicate logic in `Idle.ts` and in `noteHelpers.ts`. Two questions - `Idle.ts` didn't have the `select()` call but `noteHelpers.ts` did - is this really important? - `noteHelpers` didn't have the `mark()` call but `Idle.ts` did - seems like it was missing in noteHelpers, but lemme know if that was intended to be left out. ### 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 ### Release Notes - Textfields: bring shape to view that's being edited. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> commit 7671e62 Merge: 1df0513 58286db Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Fri Apr 5 10:29:41 2024 +0100 merge commit 1df0513 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Fri Apr 5 09:15:07 2024 +0100 stickies: update geometry to differentiate between shape and text label (#3361) Separates out the geometry - we want clicking in the negative space to not have the text editing mechanics. This definitely feels better without the sticky note textfield assuming it takes up the whole note. Before: <img width="614" alt="Screenshot 2024-04-04 at 15 35 58" src="https://github.com/tldraw/tldraw/assets/469604/f4673fc5-5b9a-4ab9-a169-a91ba7f49d17"> After: <img width="636" alt="Screenshot 2024-04-04 at 15 35 42" src="https://github.com/tldraw/tldraw/assets/469604/645c439a-662b-4244-af7f-6c718e5c5fc2"> ### 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 --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> commit 58286db Author: Steve Ruiz <steveruizok@gmail.com> Date: Thu Apr 4 22:50:01 2024 +0100 Add long press event (#3275) This PR adds a "long press" event that fires when pointing for more than 500ms. This event is used in the same way that dragging is used (e.g. to transition to from pointing_selection to translating) but only on desktop. On mobile, long presses are used to open the context menu.  ## Background This idea came out of @TodePond's #3208 PR. We use a "dead zone" to avoid accidentally moving / rotating things when clicking on them, which is especially common on mobile if a dead zone feature isn't implemented. However, this makes it difficult to make "fine adjustments" because you need to drag out of the dead zone (to start translating) and then drag back to where you want to go.  With this change, you can long press on desktop to get to that translating state. It's a micro UX optimization but especially nice if apps want to display different UI for "dragging" shapes before the user leaves the dead zone.  ### 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 - [x] `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. Long press shapes, selections, resize handles, rotate handles, crop handles. 2. You should enter the corresponding states, just as you would have with a drag. - [ ] Unit Tests TODO ### Release Notes - Add support for long pressing on desktop. commit 4a84b34 Author: Steve Ruiz <steveruizok@gmail.com> Date: Thu Apr 4 22:49:28 2024 +0100 Simplify RTL commit e3ceb27 Merge: 8683c64 43edeb0 Author: Steve Ruiz <steveruizok@gmail.com> Date: Thu Apr 4 22:17:27 2024 +0100 Merge branch 'main' into stickies-rc commit 43edeb0 Author: Steve Ruiz <steveruizok@gmail.com> Date: Thu Apr 4 19:16:17 2024 +0100 Add white migration (#3334) This PR adds a down migration for #3321. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `dunno` — I don't know commit 8683c64 Author: Lu Wilson <l2wilson94@gmail.com> Date: Thu Apr 4 16:05:24 2024 +0100 Stickies: Kickout occluded shapes after nudge (frames and stickies) (#3360) This PR kicks out occluded shapes after nudging. This affects frames as well as stickies. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `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 ❗️ --> - [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. commit 574724b Author: Lu Wilson <l2wilson94@gmail.com> Date: Thu Apr 4 16:05:03 2024 +0100 Stickies: Bring stickies to front when you move them (#3353) When you start translating stickies, bring them to front. https://github.com/tldraw/tldraw/assets/15892272/bdd1bc0c-8e94-435a-98ef-d09f9f93f4cb ### 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 - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `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. commit 2ae2b65 Merge: a590e1d 0161ec7 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Thu Apr 4 15:09:00 2024 +0100 merge commit a590e1d Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Thu Apr 4 11:39:55 2024 +0100 textfields: fix very long words not causing growY to be calculated correctly commit 00d5400 Author: Lu Wilson <l2wilson94@gmail.com> Date: Thu Apr 4 10:41:45 2024 +0100 Stickies: Use page space for sticky shadow rotation (#3352) This PR makes sticky shadows use page space rotation, not shape space rotation. This brings it in line with what our other shapes do (eg: bookmarks) https://github.com/tldraw/tldraw/assets/15892272/6b0ae307-7811-4a11-a29d-2c61cafd3d1d ### 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 - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `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. commit 3c91ed7 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Thu Apr 4 10:21:05 2024 +0100 textareas: place cursor at intended position (#3328) This is take 2 on this original PR: #3132 It goes further to try to address these issues that came up: - [x] fixes up problem with being able to click "through" an occluded shape because of z-layer issues. This is done by only "raising" the textareas when a shape is selected, priming them for easy selection. - [x] add a `data-isediting` property which lets us stay in editing mode and keep the z-indices of the textareas raised when in editing mode. - [x] Initiating a drag from within a textarea was losing pointer events when going over the UI. Would love feedback on this piece - had to disable pointer events to the UI while dragging which I think is the right move anyway. But wiring that up properly could use work since it relies on cursor changes, heh. Btw, @MitjaBezensek I had to undo your PR #3283 because that would conflict with this sticky work where we want text editing to be more fluid. ### 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 --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> commit 0161ec7 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu Apr 4 09:34:07 2024 +0200 Bump the npm_and_yarn group across 1 directory with 1 update (#3348) Bumps the npm_and_yarn group with 1 update in the / directory: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite). Updates `vite` from 5.2.7 to 5.2.8 <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md">vite's changelog</a>.</em></p> <blockquote> <h2><!-- raw HTML omitted -->5.2.8 (2024-04-03)<!-- raw HTML omitted --></h2> <ul> <li>fix: csp nonce injection when no closing tag (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16281">#16281</a>) (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16282">#16282</a>) (<a href="https://github.com/vitejs/vite/commit/3c85c6b">3c85c6b</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16281">#16281</a> <a href="https://redirect.github.com/vitejs/vite/issues/16282">#16282</a></li> <li>fix: do not access document in <code>/@vite/client</code> when not defined (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16318">#16318</a>) (<a href="https://github.com/vitejs/vite/commit/646319c">646319c</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16318">#16318</a></li> <li>fix: fix sourcemap when using object as <code>define</code> value (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15805">#15805</a>) (<a href="https://github.com/vitejs/vite/commit/445c4f2">445c4f2</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/15805">#15805</a></li> <li>fix(css): unknown file error happened with lightningcss (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16306">#16306</a>) (<a href="https://github.com/vitejs/vite/commit/01af308">01af308</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16306">#16306</a></li> <li>fix(hmr): multiple updates happened when invalidate is called while multiple tabs open (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16307">#16307</a>) (<a href="https://github.com/vitejs/vite/commit/21cc10b">21cc10b</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16307">#16307</a></li> <li>fix(scanner): duplicate modules for same id if glob is used in html-like types (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16305">#16305</a>) (<a href="https://github.com/vitejs/vite/commit/eca68fa">eca68fa</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16305">#16305</a></li> <li>chore(deps): update all non-major dependencies (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16325">#16325</a>) (<a href="https://github.com/vitejs/vite/commit/a78e265">a78e265</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16325">#16325</a></li> <li>refactor: use types from sass instead of <code>@types/sass</code> (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16340">#16340</a>) (<a href="https://github.com/vitejs/vite/commit/4581e83">4581e83</a>), closes <a href="https://redirect.github.com/vitejs/vite/issues/16340">#16340</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/vitejs/vite/commit/8b8d4024fb07a96e7a6707dbdc1a08c40f397eb9"><code>8b8d402</code></a> release: v5.2.8</li> <li><a href="https://github.com/vitejs/vite/commit/646319cc845f24a12ac5f8f6d176597a5bf66fd3"><code>646319c</code></a> fix: do not access document in <code>/@vite/client</code> when not defined (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16318">#16318</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/445c4f21583334edb37c7b32a1474903a0852b01"><code>445c4f2</code></a> fix: fix sourcemap when using object as <code>define</code> value (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15805">#15805</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/a78e265822ebf06c5775c2083ee345e974488c6b"><code>a78e265</code></a> chore(deps): update all non-major dependencies (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16325">#16325</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/4581e8371d0c2481e859f4496f928d1dcacd3a9d"><code>4581e83</code></a> refactor: use types from sass instead of <code>@types/sass</code> (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16340">#16340</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/3c85c6b52edbae22cf812e72680d210a644d9313"><code>3c85c6b</code></a> fix: csp nonce injection when no closing tag (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16281">#16281</a>) (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16282">#16282</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/21cc10bfda99a5818bfd709beff260e72b4b4ec5"><code>21cc10b</code></a> fix(hmr): multiple updates happened when invalidate is called while multiple ...</li> <li><a href="https://github.com/vitejs/vite/commit/01af308dfd271df604a3fc9e9b3a9fcc2063e5d8"><code>01af308</code></a> fix(css): unknown file error happened with lightningcss (<a href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/16306">#16306</a>)</li> <li><a href="https://github.com/vitejs/vite/commit/eca68fa942818b69d08eae4dceaf46a330684a5e"><code>eca68fa</code></a> fix(scanner): duplicate modules for same id if glob is used in html-like type...</li> <li>See full diff in <a href="https://github.com/vitejs/vite/commits/v5.2.8/packages/vite">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore <dependency name> major version` will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself) - `@dependabot ignore <dependency name> minor version` will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself) - `@dependabot ignore <dependency name>` will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself) - `@dependabot unignore <dependency name>` will remove all of the ignore conditions of the specified dependency - `@dependabot unignore <dependency name> <ignore condition>` will remove the ignore condition of the specified dependency and ignore conditions You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/tldraw/tldraw/network/alerts). </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit 3f6b385 Author: Lu Wilson <l2wilson94@gmail.com> Date: Wed Apr 3 17:15:19 2024 +0100 Stickies: parenting (of frames and stickies) (#3297) This PR adds parenting behaviour to stickies, and also changes how parenting works on the whole. - Rescaled timings for drag and drop manager. It should feel tighter, closer to figma. https://github.com/tldraw/tldraw/assets/15892272/c36c5bba-9964-403e-a5cd-6dcb35e1fe27 - We now 'kick out' any occluded children from their parents. We manually do this after many interactions and actions. - We now only parent shapes if their geometry overlaps *as well* as your cursor dragging over. - We now hint parents when translating a child inside it. - We hide the hint if your selected shape will be kicked out of a frame/note when you let go. - We now *only* hint if a child will successfully drop inside a parent. - Removed `shouldHint` option from `onDragShapesOver`. The editor handles that now. I will add more gifs demonstrating all these cases. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `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 - [x] `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. 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> commit df7e3c4 Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 17:05:58 2024 +0100 Stickies: fix sticky shadows (#3345) This PR tweaks sticky shadows. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix commit 1ba9cbf Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 16:42:52 2024 +0100 only buffer pointer events (#3337) This PR changes our input buffering to only buffer pointer events. We were already moving in this direction with the complete / cancel flushes, now it's just more explicit. If we want to add other events into here, then we can. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix commit 3f4a170 Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 16:41:56 2024 +0100 Fix blur bug in editable text (#3343) This PR fixes a bug that was introduced by #3223. There was a code path that normally used to never run (a blur event running when the shape was no longer editing) but which was being run now that shapes aren't immediately removed on pointer down. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix ### Test Plan 1. Create a sticky note 2. Begin editing the note 3. click on the canvas 4. You should be in pointing_canvas commit 5d7e38a Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 16:32:47 2024 +0100 Update noteHelpers.ts commit e60f8d5 Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 16:17:40 2024 +0100 Fix weird text complete (#3342) This PR fixes a weird issue where editing text notes would call blur / complete, preventing certain interactions. Before: 1. Select a sticky note 2. Start editing the note 3. pointer down on the canvas 4. Instead of being in pointing_canvas, you'll be in idle After: 4. You'll be in pointing_canvas ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix commit 30e605e Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 15:56:56 2024 +0100 Font size adjustment migration (#3338) This PR adds migrations for font size adjustment. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `improvement` — Improving existing features commit 139ea35 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 15:53:15 2024 +0100 fix colors commit 4ef1fb3 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 15:16:26 2024 +0100 fix up long growY on some notes, we dont have a border anymore commit cf51f5c Merge: d4a162d 4f2cf3d Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 15:14:50 2024 +0100 Merge branch 'main' into stickies-rc commit 4f2cf3d Author: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Wed Apr 3 12:25:07 2024 +0100 Tool with child states (#3074) Adds an example of a tool with child states. I'm going over the annotations at the moment, just wanted to validate the idea in the meantime. Closes tld-2114 - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add an example of a tool with child states --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> commit d4a162d Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 12:00:22 2024 +0100 some nit cleanup commit 7ae03ca Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 11:52:42 2024 +0100 textfields: pull out change where textareas are present all the time commit ded85e4 Merge: 16b84ef 03e4c85 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 11:12:13 2024 +0100 Merge branch 'main' into stickies-rc commit 03e4c85 Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 11:01:04 2024 +0100 textfields: fix regression with Text shape and resizing (#3333) The refactor of the textfields in this PR #3050 caused a regression in resizing Text shapes. (as demonstrated in this PR's video: #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 commit 843347b Author: Mime Čuvalo <mimecuvalo@gmail.com> Date: Wed Apr 3 10:59:11 2024 +0100 Revert "Fix text resizing bug (#3327)" (#3332) This reverts commit 0e912fe. (The fix is more to do with a CSS regression instead of a JS fix.) ### 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 commit 16b84ef Merge: 4c854f4 5557f6b Author: Steve Ruiz <steveruizok@gmail.com> Date: Wed Apr 3 10:53:20 2024 +0100 Merge branch 'main' into stickies-rc commit 5557f6b Author: David Sheldrick <d.j.sheldrick@gmail.com> Date: Wed Apr 3 10:31:28 2024 +0100 Revert "squish sync data events before sending them out" (#3331) Reverts #3118 commit 4c854f4 Author: Lu[ke] Wilson <l2wilson94@gmail.com> Date: Wed Apr 3 09:45:09 2024 +0100 fix api commit 0e912fe Author: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Tue Apr 2 17:22:58 2024 +0100 Fix text resizing bug (#3327) Fixes a bug with text resizing on text shapes, now the transform origin is set depending on the alignment.   ### 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. Make a text shape 2. resize it 3. It should stay within the bounds ### Release Notes - Fixes an issue with text shapes overflowing their bounds when resized. commit 584380b Author: Mitja Bezenšek <mitja.bezensek@gmail.com> Date: Tue Apr 2 16:29:14 2024 +0200 Input buffering (#3223) This PR buffs input events. ## The story so far In the olde days, we throttled events from the canvas events hook so that a pointer event would only be sent every 1/60th of a second. This was fine but made drawing on the iPad / 120FPS displays a little sad. Then we removed this throttle. It seemed fine! Drawing at 120FPS was great. We improved some rendering speeds and tightened some loops so that the engine could keep up with 2x the number of points in a line. Then we started noticing that iPads and other screens could start choking on events as it received new inputs and tried to process and render inputs while still recovering from a previous dropped frame. Even worse, on iPad the work of rendering at 120FPS was causing the browser to throttle the app after some sustained drawing. Yikes! ### Batching I did an experimental PR (#3180) to bring back batching but do it in the editor instead. What we would do is: rather than immediately processing an event when we get it, we would instead put the event into a buffer. On the next 60FPS tick, we would flush the buffer and process all of the events. We'd have them all in the same transaction so that the app would only render once. ### Render batching? We then tried batching the renders, so that the app would only ever render once per (next) frame. This added a bunch of complexity around events that needed to happen synchronously, such as writing text in a text field. Some inputs could "lag" in a way familiar to anyone who's tried to update an input's state asynchronously. So we backed out of this. ### Coalescing? Another idea from @ds300 was to "coalesce" the events. This would be useful because, while some interactions like drawing would require the in-between frames in order to avoid data loss, most interactions (like resizing) didn't actually need the in-between frames, they could just use the last input of a given type. Coalescing turned out to be trickier than we thought, though. Often a state node required information from elsewhere in the app when processing an event (such as camera position or page point, which is derived from the camera position), and so the coalesced events would need to also include this information or else the handlers wouldn't work the way they should when processing the "final" event during a tick. So we backed out of the coalescing strategy for now. Here's the [PR that removes](937469d) it. ### Let's just buffer the fuckers So this PR now should only include input buffering. I think there are ways to achieve the same coalescing-like results through the state nodes, which could gather information during the `onPointerMove` handler and then actually make changes during the `onTick` handler, so that the changes are only done as many time as necessary. This should help with e.g. resizing lots of shapes at once. But first let's land the buffering! --- Mitja's original text: This PR builds on top of Steve's [experiment PR](#3180) here. It also adds event coalescing for [`pointerMove` events](https://github.com/tldraw/tldraw/blob/mitja/input-buffering/packages/editor/src/lib/editor/Editor.ts#L8364-L8368). The API is [somewhat similar ](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents) to `getCoalescedEvent`. In `StateNodes` we register an `onPointerMove` handler. When the event happens it gets called with the event `info`. There's now an additional field on `TLMovePointerEvent` called `coalescedInfo` which includes all the events. It's then on the user to process all of these. I decided on this API since it allows us to only expose one event handler, but it still gives the users access to all events if they need them. We would otherwise either need to: - Expose two events (coalesced and non-coalesced one and complicate the api) so that state nodes like Resizing would not be triggered for each pointer move. - Offer some methods on the editor that would allow use to get the coalesced information. Then the nodes that need that info could request it. I [tried this](9ad973d#diff-32f1de9a5a9ec72aa49a8d18a237fbfff301610f4689a4af6b37f47af435aafcR67), but it didn't feel good. This also complicated the editor inputs. The events need to store information about the event (like the mouse position when the event happened for `onPointerMove`). But we cannot immediately update inputs when the event happens. To make this work for `pointerMove` events I've added `pagePoint`. It's [calculated](https://github.com/tldraw/tldraw/pull/3223/files#diff-980beb0aa0ee9aa6d1cd386cef3dc05a500c030638ffb58d45fd11b79126103fR71) when the event triggers and then consumers can get it straight from the event (like [Drawing](https://github.com/tldraw/tldraw/pull/3223/files#diff-32f1de9a5a9ec72aa49a8d18a237fbfff301610f4689a4af6b37f47af435aafcR104)). ### 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. Add a step-by-step description of how to test your PR here. 4. - [ ] 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> commit b87f007 Merge: 5ee01f1 d96b693 Author: Steve Ruiz <steveruizok@gmail.com> Date: Tue Apr 2 14:45:46 2024 +0100 Merge branch 'stickies-rc' of https://github.com/tldraw/tldraw into stickies-rc commit 5ee01f1 Author: Steve Ruiz <steveruizok@gmail.com> Date: Tue Apr 2 14:45:38 2024 +0100 highest one first
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When geo shape has no url or text we don't show the html container containing the label and link. This results in 3 fewer dom nodes per empty geo shape (going from 7 to 4). Similarly for an arrow without the text label we go from 13 to 10.
First paint experience with 2000 empty rectangle shapes
Before: 1.5-1.6s
After: 1.2-1.3s
2000 rectangles shapes with text is similar between the two, around 3.6s.
Change Type
sdk— Changes the tldraw SDKdotcom— Changes the tldraw.com web appdocs— Changes to the documentation, examples, or templates.vs code— Changes to the vscode plugininternal— Does not affect user-facing stuffbugfix— Bug fixfeature— New featureimprovement— Improving existing featureschore— Updating dependencies, other boring stuffgalaxy brain— Architectural changestests— Changes to any test codetools— Changes to infrastructure, CI, internal scripts, debugging tools, etc.dunno— I don't knowRelease Notes