route/files/code <> design - core interactions

[atulbhatt-system32]

Opening web component by double clicking hides the navigator panel

[edenvidal]

this is how it looks like after double clicking a component. the navigator is hidden and the files panel collapses. @VictoriaShyika can you fix this?

[atulbhatt-system32]

@edenvidal I had already solved it yesterday morning before our discussion

[edenvidal]

@atulbhatt-system32

i switched to a .js file and then back to the html by clicking on the canvas, but the route only updated when i clicked on the sidebar. (how can we make one method that works for everything? right now, it’s not like that for many features.)

when you double-click on a web component to open its js file, it should work the same as when you select the js file from the file list, and the route should update. the double click is simply a shortcut to get to something in a way that should already exist. this would use what’s already there to make sure everything acts the same way.

also, when double-clicking on a web component, it seems that when clicking on the navigator it gets back to the open html file, why? the return should only occur when clicking on an element either through the design or the sidebar (not the entire sidebar, just an element inside it)

[edenvidal]

@atulbhatt-system32 Another issue is that when clicking back on the design, it won't focus on an element, so as a user, you'll need to click twice in order to switch back. again, as always, the issue is deeper. please, let's not just fix it but get to the bottom of it and make an issue related to handling all cases when other elements are selected due to disappearing (of any reason) of another element?

[edenvidal]

@atulbhatt-system32 there's a problem with double clicking on web components with multi-level navigation. i tried to double click on a group to navigate within the design, but it opened the code of the web component instead, simply since the area i clicked on was the web component are. it seems that there is a lot of redundant functionality related to opening a web component. the double clicking on a web component can simply initiate the already existing functionality of files.

[atulbhatt-system32]

@atulbhatt-system32

i switched to a .js file and then back to the html by clicking on the canvas, but the route only updated when i clicked on the sidebar. (how can we make one method that works for everything? right now, it’s not like that for many features.)

when you double-click on a web component to open its js file, it should work the same as when you select the js file from the file list, and the route should update. the double click is simply a shortcut to get to something in a way that should already exist. this would use what’s already there to make sure everything acts the same way.

also, when double-clicking on a web component, it seems that when clicking on the navigator it gets back to the open html file, why? the return should only occur when clicking on an element either through the design or the sidebar (not the entire sidebar, just an element inside it)

• For the path not changing we implemented a peek mechanism that we are not actually representing open a web-component file but a peek on it. As the real file that's open is represented by the stage. So we need to decide on how we handle when we open a different file codeview and different on stage.

The part where the web-component switches back to html file when clicking anywhere must be because of the logic that the activePanel is changed and is not codeview we switch back which we need to correct.

[atulbhatt-system32]

@atulbhatt-system32 Another issue is that when clicking back on the design, it won't focus on an element, so as a user, you'll need to click twice in order to switch back. again, as always, the issue is deeper. please, let's not just fix it but get to the bottom of it and make an issue related to handling all cases when other elements are selected due to disappearing (of any reason) of another element?

The first click switches back to the original file and selects the first node inside the body. Then in second click happens what you selected.

[atulbhatt-system32]

@atulbhatt-system32 there's a problem with double clicking on web components with multi-level navigation. i tried to double click on a group to navigate within the design, but it opened the code of the web component instead, simply since the area i clicked on was the web component are. it seems that there is a lot of redundant functionality related to opening a web component. the double clicking on a web component can simply initiate the already existing functionality of files.

I will breakdown here how we perform double click operation on Web Components.

• First there is no direct way to find if something is a web-component. Because it is a custom-tag and can be anything. The only hint we have for something to be a web component is having - in its name like: rnbw-preview. We use this logic to identify a Web-Component. Now, the other part related to opening a web-component file is finding the JS file that belongs to it. We check all the files in our filetree if they are of type .js for the line customElement.define written in them to identify if the JS file belongs to some web-component and the name of the web-components on the file matches with the node clicked. It may seem like a straightforward condition in which we have to just open a web-component file by simply calling the function to open the file which was the match for the web-component clicked. But in this we have to make it conditional like having different content on codeview, and different on stage and node-tree. In our normal flow we have every part of rnbw show the same thing.

• Now, talking about the part where web-component was opened even when the click was done on parent container. That has to be figures out why it happened. Because the logic is implemented on the node that is clicked. So after identifying the error we will know why it happened.

[edenvidal]

@atulbhatt-system32, let's implement the following functionality, please, in the way described here (we already had it before!)

1. it is possible to toggle through files in the files. the route always shows the current file, and the code always shows the current file.
2. the design always renders the last (!) html file regardless of the files and code views. when clicking on a node, whether on the elements tree or the design, the files/code/route and then again initiate the rendered html as the active file.

so, route-files-code = always together. design = reflects only html, no change needed if no toggle to html

please confirm.

[atulbhatt-system32]

sure @edenvidal we will follow this convention.

[edenvidal]

@atulbhatt-system32 this has nothing to do with web components but simply the interaction between route/files/code/design. this needs to be really hard coded at the core of rnbw, literally everything works based on that.

adding the web component behavior separately here:

double-clicking on a web component node directly initiates the function that opens the associated js file. and that's it. the rest is already taken care.

[atulbhatt-system32]

@edenvidal based on that I want to confirm another behaviour.

What if I open a JS file or any other file that is not an html file through filetree?

• [ ] The stage shows last html file opened?
• [ ] If the stage shows last html file opened then what will happen if I click on the stage? #721

[edenvidal]

@atulbhatt-system32

1. yes. but i think this is not the right question since i just described it. also, this is not "another" behavior, this is "the" behavior.
2. i've deleted this issue. ignore it. i just described it earlier. please, forget every existing thing (actually, remove it from our code), and simply let's follow solely this behavior I just described.

here is the concise description once again. (please, convince me you're getting it before implementing)

---

• [ ] it is possible to toggle through files in the files. the route always shows the current file, and the code always shows the current file.
• [ ] the design always renders the last (!) html file regardless of the files and code views. when clicking on a node, whether on the elements tree or the design, the files/code/route and then again initiate the rendered html as the active file.

so,

• [ ] route-files-code = always together.
• [ ] design = reflects only html, no change needed if no toggle to html

---

this has nothing to do with web components but simply the interaction between route/files/code/design. this needs to be really hard coded at the core of rnbw, literally everything works based on that.

adding the web component behavior separately here:

• [ ] double-clicking on a web component node directly initiates the function that opens the associated js file. and that's it. the rest is already taken care.

[atulbhatt-system32]

@edenvidal

When clicking on a node, whether on the elements tree or the design, the files/code/route and then again initiate the rendered html as the active file.

This was what I wanted to confirm. Rest I'm clear.

So it goes like this.

• The filetree, codeview, and route always reflects the current file.
• Double clicking on a WebComponent opens its file and filetree, codeview and route will reflect that.
• The stage will always show the last opened html file. Regardless of what the current file is when clicked on the node, the current file and last opened html file becomes same.

[edenvidal]

• double-clicking on a web component works the first time, but not the second
• doesn't function when switching back to the component from the design or elements panel
• when clicking on another file while in a web component, it selects an incorrect file
• toggling between files causes the design to disappear?
• making changes to a web component seems to save but reverts to the previous state. it doesn't save while in wc mode
• using "esc" to close the sidebar/code makes reopening a web component through the design non-functional.

@VictoriaShyika , please review this issue carefully for the intent. @atulbhatt-system32 it'll be great if you can provide some info here on the steps to take to resolve it potentially.

[VictoriaShyika]

@edenvidal, @atulbhatt-system32.

1. The selection of web-components is not done like with other elements, we need to select web components like other elements on the page and then show the source code on double click. I think we need to improve the selection logic for web components for this.
2. It seems that after selecting a web component in the design and when the code is added to the CodeView, we can return to the previous (.html) page by clicking on stage. Is it necessary to return to it by clicking on the elements panel?
3. I tested the selection of other files when the web component is open, and the correct files were opened in the code and in the url on my end.
4. The design works as you described earlier: design = reflects only html, no change needed if no toggle to html
5. There is a problem with changing the file with web-components.
6. Opening a wep-component after "esc" works for me.

[atulbhatt-system32]

@VictoriaShyika @edenvidal

1. Yes, we need to fix the selection part like it happens on others. I think event delegation is happening or something like that which causes clicking outside of web component to open web-component.

2. Switching back is supposed to happen and for now only from the stage as we are not showing node tree panel when we have JS file open.

3. This needs to be fixed.

@edenvidal I think when you tested these the dev branch was not updated at that time.

[edenvidal]

so it kinda work now. two things need to be fixed:

1. switching back to "design" once toggling files should happen seamlessly as if i didn't leave the design (no de-selection and other stuff)
2. if opening any file that is not html, then open the code view with it (even if it closed).
3. if the elements panel is gone, the settings panel should be gone as well - let's make sure everything that applies to the elements panel also applies to the settings panel, always).

@VictoriaShyika please describe what are you going to do with it to apply those changes.

[VictoriaShyika]

@edenvidal

1. I think we need to detect which last html file was opened (when we switch to files without design) and if we return to the same html file, show last selecting state.
2. We just need to detect the file extension and if that extension without design make codeView visible.
3. We need to connect the settings and elements panel and show it only when it needed

[edenvidal]

@VictoriaShyika sounds good. not sure about how to implement the 1st but i'm here to test and help.