textfields: for unfilled geo shapes fix edit->edit #3577
Merged
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
mimecuvalo
temporarily deployed
to
deploy-staging
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
This PR #3498 which tried to fix accidentally dragging shapes behind other shapes made clicking into textfields worse unfortunately. (as seen below in the Before video). This PR takes a different tact by introducing not just `data-iseditinganything` but now also `data-isselectinganything` which makes Shapes z-indices actually be relevant vs. the canvas being the top z-index layer, when something is selected or being editing. It's worth a good think over this and any downstream consequences this might introduce. I _think_ this change will actually be ok for when we're in select state but I wouldn't be surprised if I'm missing some nuance. Before: https://github.com/tldraw/tldraw/assets/469604/4a0346de-359f-4664-b273-746b4aa3d6fd After: https://github.com/tldraw/tldraw/assets/469604/5ee574ae-fa6b-4dac-a2c4-a94d4da90615 ### 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: fix up regression to selection when clicking into a text shape.
steveruizok
temporarily deployed
to
deploy-staging
GitHub Actions
Inactive
steveruizok
reviewed
Apr 27, 2024
Comment on lines
+161
to
+167
| <div | ||
| ref={containerRef} | ||
| className="tl-shape" | ||
| data-shape-type={shape.type} | ||
| data-shape-is-filled={isFilledShape} | ||
| draggable={false} | ||
| > |
There was a problem hiding this comment.
Do we need to set pointer-events: all at the shape level? I'd prefer not to do this and have the contents of the shape determine whether they have pointer events. Sorry if turning on pointer events on a shape level was introduced earlier, I must have missed it. Wouldn't we turning on pointer events for the text area be sufficient?
There was a problem hiding this comment.
Yeah, hah, that's actually the other PR that was stacked on top of this one: #3578
I think maybe you were commenting about the changes made in that other PR?
(I was also confused for a sec, because we were looking on staging, but this PR hasn't been pushed to staging yet)
steveruizok
approved these changes
Apr 29, 2024
mimecuvalo
added a commit
that referenced
this pull request
Apr 29, 2024
We need to treat unfilled geo shapes as hollow to click 'through' them. Before: https://github.com/tldraw/tldraw/assets/469604/bf7b520c-c6f5-41cd-88e9-b020fe0ebb32 After: https://github.com/tldraw/tldraw/assets/469604/e39d9bcf-2b94-46d5-ace4-8a1053b2ee81 ### 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 - Text labels: fix edit→edit not working as expected when unfilled geo shapes are on 'top' of other shapes.
mimecuvalo
added a commit
that referenced
this pull request
Apr 29, 2024
We need to treat unfilled geo shapes as hollow to click 'through' them. Before: https://github.com/tldraw/tldraw/assets/469604/bf7b520c-c6f5-41cd-88e9-b020fe0ebb32 After: https://github.com/tldraw/tldraw/assets/469604/e39d9bcf-2b94-46d5-ace4-8a1053b2ee81 ### 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 - Text labels: fix edit→edit not working as expected when unfilled geo shapes are on 'top' of other shapes.
mimecuvalo
added a commit
that referenced
this pull request
Apr 29, 2024
We need to treat unfilled geo shapes as hollow to click 'through' them. Before: https://github.com/tldraw/tldraw/assets/469604/bf7b520c-c6f5-41cd-88e9-b020fe0ebb32 After: https://github.com/tldraw/tldraw/assets/469604/e39d9bcf-2b94-46d5-ace4-8a1053b2ee81 ### 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 - Text labels: fix edit→edit not working as expected when unfilled geo shapes are on 'top' of other shapes. Describe what your pull request does. If appropriate, add GIFs or images showing the before and after. ### 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.
mimecuvalo
added a commit
that referenced
this pull request
Apr 29, 2024
We need to treat unfilled geo shapes as hollow to click 'through' them. Before: https://github.com/tldraw/tldraw/assets/469604/bf7b520c-c6f5-41cd-88e9-b020fe0ebb32 After: https://github.com/tldraw/tldraw/assets/469604/e39d9bcf-2b94-46d5-ace4-8a1053b2ee81 ### 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 - Text labels: fix edit→edit not working as expected when unfilled geo shapes are on 'top' of other shapes. Describe what your pull request does. If appropriate, add GIFs or images showing the before and after. ### 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.
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.
We need to treat unfilled geo shapes as hollow to click 'through' them.
Before:
Kapture.2024-04-23.at.15.40.07.mp4
After:
Kapture.2024-04-23.at.15.39.40.mp4
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