- Issue created by @lauriii
- Assigned to lauriii
- Status changed to Postponed: needs info
3 months ago 10:02am 30 August 2024 - 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
AFAICT #3470973-7: Retain the placement of components within the preview when inserting a component → fixes that? What remains after that?
- Issue was unassigned.
- Status changed to Active
3 months ago 10:36am 30 August 2024 - 🇫🇮Finland lauriii Finland
Confirmed with @balintbrews that this needs a fix that is separate from what is in 🐛 Retain the placement of components within the preview when inserting a component Active .
- Assigned to balintbrews
- 🇳🇱Netherlands balintbrews Amsterdam, NL
I started to investigate this, and I wanted to record my findings so far.
I came to the conclusion that when components without slots are placed at the top or the bottom of the page, the drag & drop already works as described in the proposed resolution. E.g. put a Hero component to the top and to the bottom of the page, and you'll notice that you can easily place content above the one at the top, and below the one at the bottom.
So what's broken, then? It's when components with slots are placed to the root, and at the root level there is no other component at a boundary that would provide a "surface" for placing a component. With that surface being absent, only the slots inside the component with slots are detected. I tried to illustrate this with a sketch where I marked where we are able to place components currently. (The two column component is used as an example for a component with slots.)
There is one exception to this in the case of the Two column component, and that is when one of its slots is empty, and we're trying to place a component to the root below the Two column component. Our implementation creates this situation by not allowing to drag a component below the placeholder in the slot, allowing the root layout to detect that something is being dragged there.
Something to note that I consciously made a simplification in my description to talk about the root level only, but the same problem domain is present at any level of the layout: replace the word root with slot, and all of the above still stands.
In an earlier conversation, @jessebaker suggested that we may want to increase space between slots with a nice animation when we start to drag a component. That would automatically solve this entire issue by virtue of having space available for detecting slots at any level. After discussing this approach with @laurii we concluded that we would like to avoid movements like this in the preview, if we can.
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
See the current state of dragging into slots here :)
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
Another one that shows the difference when dragging to the left of an empty slot (jiggly) vs the center/right (stable):
- Merge request !283#3471169: Allow dragging components to top/bottom of page and in between adjacent components with slots → (Merged) created by Unnamed author
- Status changed to RTBC
2 months ago 1:20pm 11 September 2024 Hi !
I was able to insert component on top/bottom / recording: https://youtu.be/PGjod3DfBl0
I run into an issue with empty columns, when I try to drop the component on top of it, it keep moving between the top of the component and the inside.
- 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
Several MRs landed since the last commit/CI run. We expect those landed MRs to stabilize some of the more flakey E2E tests. So, started a new pipeline.
@balintbrews: is this MR ready for review? If so, please mark the MR as ready for review 🙏
- Assigned to jessebaker
- Status changed to Needs review
2 months ago 3:29pm 11 September 2024 - 🇳🇱Netherlands balintbrews Amsterdam, NL
@wim leers — I never even changed the status to Needs Review. 🙂 I was still battling with tests, then ended up creating 📌 Write end-to-end test for dragging components into slots Postponed . Now it's ready for code review.
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
Hmm... maybe this is a separate issue but *scrolling* down to bottom to drop a component wasn't working:
- 🇳🇱Netherlands balintbrews Amsterdam, NL
Yes, let's keep that separate, please. 😊
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
Added:
🐛 No downward auto-scroll when components are dragged Active
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
Tested dragging between slots and it's not working for me when the slot is empty:
- 🇳🇱Netherlands balintbrews Amsterdam, NL
I managed to reproduce this once or twice after seeing your video. My only guess so far is that this has something to do with deleting a component. I'll keep trying/thinking. Unless I can come up with something reasonably fast, I'll open a new issue for this. Thanks!
- 🇳🇱Netherlands balintbrews Amsterdam, NL
tl:dr: #17 is now fixed! Thanks for catching that!
Turns out the issue reported in #17 was caused by the combination of the changes in this issue and the logic added in 🐛 [PP-1] Impossible to drop a component into an empty column of the two Active to prevent dragging a component above the example content of an empty slot. With the introduced required threshold to pull content into the slot by this issue, if the mouse moved too fast across the boundary of a component with a slot and another potential drop target, the slot didn't get recognized as a new drop target.
This is now solved by removing the logic added in 🐛 [PP-1] Impossible to drop a component into an empty column of the two Active and fixing it purely via CSS which is now possible due to what was changed since then by 🐛 Retain the placement of components within the preview when inserting a component Active where we changed how we present the drop target.
-
jessebaker →
committed 2d4c469b on 0.x authored by
balintbrews →
Issue #3471169 by balintbrews, kristen pol, lauriii, wim leers,...
-
jessebaker →
committed 2d4c469b on 0.x authored by
balintbrews →
- Status changed to Fixed
2 months ago 1:55pm 12 September 2024 - Issue was unassigned.
Automatically closed - issue fixed for 2 weeks with no activity.