feat: introduce style and behavior improvements

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -8,9 +8,11 @@ import { Stack } from '@mui/material';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 
 import { useAutoLayout } from './useAutoLayout';
+import { useScrollBoundries } from './useScrollBoundries';
 import FlowStepNode from './FlowStepNode/FlowStepNode';
 import Edge from './Edge/Edge';
 import InvisibleNode from './InvisibleNode/InvisibleNode';
+import { EditorWrapper } from './style';
 
 const nodeTypes = { flowStep: FlowStepNode, invisible: InvisibleNode };
 
@@ -32,6 +34,7 @@ const EditorNew = ({ flow }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   useAutoLayout();
+  useScrollBoundries();
 
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
@@ -125,6 +128,7 @@ const EditorNew = ({ flow }) => {
     (flow, prevNodes) => {
       const newNodes = flow.steps.map((step, index) => {
         const node = prevNodes?.find(({ id }) => id === step.id);
+        const collapsed = currentStepId !== step.id;
         return {
           id: step.id,
           type: 'flowStep',
@@ -132,11 +136,12 @@ const EditorNew = ({ flow }) => {
             x: node ? node.position.x : 0,
             y: node ? node.position.y : 0,
           },
+          zIndex: collapsed ? 0 : 1,
           data: {
             step,
             index: index,
             flowId: flow.id,
-            collapsed: currentStepId !== step.id,
+            collapsed,
             openNextStep: openNextStep(flow.steps[index + 1]),
             onOpen: () => setCurrentStepId(step.id),
             onClose: () => setCurrentStepId(null),
@@ -178,15 +183,31 @@ const EditorNew = ({ flow }) => {
     [setNodes],
   );
 
+  const updateEdgesData = useCallback(
+    (flow) => {
+      setEdges((edges) =>
+        edges.map((edge) => {
+          return {
+            ...edge,
+            data: { ...edge.data, flowId: flow.id, flowActive: flow.active },
+          };
+        }),
+      );
+    },
+    [setEdges],
+  );
+
   useEffect(() => {
     setNodes(
       nodes.map((node) => {
         if (node.type === 'flowStep') {
+          const collapsed = currentStepId !== node.data.step.id;
           return {
             ...node,
+            zIndex: collapsed ? 0 : 1,
             data: {
               ...node.data,
-              collapsed: currentStepId !== node.data.step.id,
+              collapsed,
             },
           };
         }
@@ -204,19 +225,12 @@ const EditorNew = ({ flow }) => {
       setEdges(newEdges);
     } else {
       updateNodesData(flow.steps);
+      updateEdgesData(flow);
     }
   }, [flow]);
 
   return (
-    <Stack
-      direction="column"
-      sx={{
-        flexGrow: 1,
-        '& > div': {
-          flexGrow: 1,
-        },
-      }}
-    >
+    <EditorWrapper direction="column">
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -233,7 +247,7 @@ const EditorNew = ({ flow }) => {
         zoomOnDoubleClick={false}
         panActivationKeyCode={null}
       />
-    </Stack>
+    </EditorWrapper>
   );
 };
 

packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import FlowStep from 'components/FlowStep';
 import { StepPropType } from 'propTypes/propTypes';
 
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+
 function FlowStepNode({
   data: {
     step,
@@ -19,35 +21,37 @@ function FlowStepNode({
   },
 }) {
   return (
-    <Box
-      maxWidth={900}
-      width="100vw"
+    <NodeWrapper
       className="nodrag"
-      sx={{ visibility: layouted ? 'visible' : 'hidden' }}
+      sx={{
+        visibility: layouted ? 'visible' : 'hidden',
+      }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-      <FlowStep
-        step={step}
-        index={index + 1}
-        collapsed={collapsed}
-        onOpen={onOpen}
-        onClose={onClose}
-        onChange={onChange}
-        flowId={flowId}
-        onContinue={openNextStep}
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-    </Box>
+      <NodeInnerWrapper>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+        <FlowStep
+          step={step}
+          index={index + 1}
+          collapsed={collapsed}
+          onOpen={onOpen}
+          onClose={onClose}
+          onChange={onChange}
+          flowId={flowId}
+          onContinue={openNextStep}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </NodeInnerWrapper>
+    </NodeWrapper>
   );
 }
 

packages/web/src/components/EditorNew/FlowStepNode/style.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const NodeWrapper = styled(Box)(({ theme }) => ({
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: theme.spacing(0, 2.5),
+}));
+
+export const NodeInnerWrapper = styled(Box)(({ theme }) => ({
+  maxWidth: 900,
+  flex: 1,
+}));

packages/web/src/components/EditorNew/InvisibleNode/InvisibleNode.jsx

@@ -10,19 +10,8 @@ function InvisibleNode() {
       className="nodrag"
       sx={{ visibility: 'hidden' }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
+      <Handle type="target" position={Position.Top} isConnectable={false} />
       Invisible node
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
     </Box>
   );
 }

packages/web/src/components/EditorNew/style.js

@@ -0,0 +1,13 @@
+import { Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const EditorWrapper = styled(Stack)(({ theme }) => ({
+  flexGrow: 1,
+  '& > div': {
+    flexGrow: 1,
+  },
+
+  '& .react-flow__pane, & .react-flow__node': {
+    cursor: 'auto !important',
+  },
+}));

packages/web/src/components/EditorNew/useAutoLayout.js

@@ -9,8 +9,6 @@ const getLayoutedElements = (nodes, edges) => {
   graph.setGraph({
     rankdir: 'TB',
     marginy: 60,
-    marginx: 60,
-    universalSep: true,
     ranksep: 64,
   });
   edges.forEach((edge) => graph.setEdge(edge.source, edge.target));

packages/web/src/components/EditorNew/useScrollBoundries.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useViewport, useReactFlow } from 'reactflow';
+
+export const useScrollBoundries = () => {
+  const { setViewport } = useReactFlow();
+  const { x, y, zoom } = useViewport();
+
+  useEffect(() => {
+    if (y > 0) {
+      setViewport({ x, y: 0, zoom });
+    }
+  }, [y]);
+};