-
-
Notifications
You must be signed in to change notification settings - Fork 274
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feat] Add page structure explorer #2246
Conversation
@@ -46,3 +46,27 @@ spec: | |||
value: | |||
$$jsExpression: | | |||
`Invalid error: ${invalidError.error?.message}` | |||
- component: PageRow |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Accidentally committed?
Very nice, a few things I noticed while trying it out.
|
@@ -167,6 +169,7 @@ export default function NodeHud({ | |||
onDuplicate, | |||
isOutlineVisible = false, | |||
isHoverable = true, | |||
isHovered = false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the dashed border doesn't really just mean the element is "hovered" anymore we might want to give this prop a different name just to avoid confusion. Maybe isPreviewed
? Not sure, also not a super big deal.
I understand this would have to change the wording in a lot of places now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think isHovered
captures the state still, since the user is "hovering" over the element albeit inside the structure explorer, so an indirect form of hovering.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I think it's fine to keep it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks awesome and works great! Just noticed a couple of issues:
- When I drag-and-drop to create a column the whole row that contains it collapses in the panel
- It's not possible yet to press backspace to delete after selecting a row or column in the explorer, but I feel like it would be a really useful feature
Looks good! +1 for both of these suggestions: |
I've updated to address most of the feedback here: pageStructure.mov@apedroferreira I've added an implementation of deleting via the explorer which plays the most nicely with undoing, does this make sense to you or are there any other ways of achieving this? |
return draft; | ||
// return normalizePageRowColumnSizes(draft); | ||
}, | ||
currentView.kind === 'page' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we can get rid of these currentView.kind === 'page'
as I think these actions can only occur in a page view? But I may have forgotten why I added these checks in the other similar deletes...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's for the types, in which case I can probably replace these conditionals with
...(currentView as Extract<DomView, { kind: 'page' }>),
(event: React.KeyboardEvent<HTMLUListElement>) => { | ||
// delete selected node if event.key is Backspace | ||
if (event.key === 'Backspace') { | ||
appStateApi.update( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like the correct logic, except we do may need to normalize the page row column sizes after deleting as done in the other places...
And now that this logic goes beyond just the RenderOverlay
component, we should move all of this (deleteing node + deleting orphaned nodes + normalizing column sizes) to somewhere where we can reuse it more agnostically, not sure if that's easy or not.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And now that this logic goes beyond just the RenderOverlay component, we should move all of this (deleteing node + deleting orphaned nodes + normalizing column sizes) to somewhere where we can reuse it more
I've added some changes to try and accomplish this, have a look
onNodeSelect={handleNodeSelect} | ||
onNodeFocus={handleNodeFocus} | ||
onNodeToggle={handleNodeToggle} | ||
onKeyDown={handleNodeDelete} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would separate onKeyDown
to something like handleKeyDown
, and there if backspace is pressed call a reusable delete function.
That way for example if we allow deleting in the explorer by clicking a button we just have to use the same function that is already there.
if (event.key === 'Backspace') { | ||
appStateApi.update( | ||
(draft) => { | ||
if (!selectedDomNodeId) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you check for if there is a selected node outside of appStateApi.update
? That way we don't add a new entry to the undo stack, I think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, just added comments on some minor things but still everything is working great!
Just played with it, gives so much clarity about the page hierarchy now. Awesome UX! 🙌 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome work Bharat, looks really great! Thanks a lot for addressing these!
I still had some thoughts and possible suggestions but I don't think any of them should be that blocking, it's very minor stuff, so I will approve already.
Maybe a small refactor of deleteNode
would be the most important one to me!
packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/toolpad-app/src/toolpad/AppEditor/utils/normalizePageRowColumnSizes.ts
Outdated
Show resolved
Hide resolved
@apedroferreira Resolving the comments related to the common delete function extraction since we agreed on a different approach involving refactoring the existing delete |
Ok, sounds good! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's go!
pageStructure.mov