first-commit

[imvetri]

• added react, babel in html. learnt that script type set to text/babel or text/jsx will let babel automatically transpile the code. without EVAL setup

[bilogic]

shows a blank page in Chrome

[imvetri]

I'm building it from scratch outside github

[bilogic]

I meant the commited file here ui-editor.html, it is a blank page

[imvetri]

May I know why are you curious about this project?

[bilogic]

You are trying to PR something that does not seem to work

[imvetri]

Are you sure its a blank page ? check this out. its in chrome

[bilogic]

        function Flow() {
            return (
                <div style={{ height: '100vh' }}>
                    <ReactFlow.default>
                        <ReactFlow.Background />
                        <ReactFlow.Controls />
                    </ReactFlow.default>
                </div>
            );
        }

Thanks! It works now. Would you know why changing to <div style='height: 100vh'> makes it not work?

[imvetri]

<div style='height: 100vh'> This is the container for the react-flow. which means, only if the parent DOM of react-flow component has any visible space, react-flow will be visible.

correction

Would you know why changing to <div style='height: 100vh'> makes it not work?

Did you mean to say

Would you know why changing to <div style='height: 100vh'> makes it work?

[bilogic]

My post was correct. I'm using a HTML processor, so I had to rewrite {{ in another way. I changed it to <div style='height: 100vh'> and it caused the example to not work. Anyway, it has been solved.

There are no nodes in your example. I'm not sure how to import react-flow based on the examples on their website.

[imvetri]

I updated with an example. Unfortunately react-flow is rendering only one node and ignoring an edge and node. I opened up a question with them.

[bilogic]

The rendering is due to a bug in your code, I fixed it. See my PR. There is another thing I could not fix, the scroll bar shows up because there is an additional 8 px of height and I'm not sure where it is coming from.

[imvetri]

fixed the scroll bar. Its from the chrome . Added zero margin to body.

[imvetri]

Added a nodes, edges viewer to bottom of react flow. Next make node added and deleted from the viewer, and it should reflect on the react-flow canvas

https://github.com/imvetri/ui-editor/assets/6542274/53001f7c-6f74-408f-b2d9-5d1f833616aa

[bilogic]

https://reactflow.dev/examples/interaction/save-and-restore I'm trying to add save and load to your example

[bilogic]

I saw your latest changes, I don't think 98vh is a proper fix. Also, possible to avoid the use of {{? Then I can help contribute to this example.

[imvetri]

by mistake I made an update on your branch.

the scroll bar I fixed, as I added the node editor, the scroll bar showed up. The original scroll bar issue is fixed.

[bilogic]

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

this is how react flow fill their height, not 100vh