Fix flow redraw bugs when unconnecting nodes from block

Protofy-xyz · Mar 25, 2024 · 552e2dd · 552e2dd
1 parent 202c97c
commit 552e2dd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/protoflow/src/diagram/Diagram.tsx b/packages/protoflow/src/diagram/Diagram.tsx
@@ -6,7 +6,8 @@ import ReactFlow, {
     OnNodesDelete,
     NodeDragHandler,
     OnEdgesDelete,
-    SelectionDragHandler
+    SelectionDragHandler,
+    useNodesInitialized
 } from 'reactflow';
 import useUndoRedo from '../hooks/useUndoRedo';
 import useKeypress from 'react-use-keypress';
@@ -37,6 +38,7 @@ type DiagramParams = {
     children?: any,
     topics?: any
     onNodesDelete?: any,
+    onNodeInitializationStatusChange?: any,
     themeMode?: "light" | "dark",
     theme?: any,
     defaultViewPort?: { x: number, y: number, zoom: number },
@@ -69,7 +71,8 @@ const Diagram = React.forwardRef(({
     defaultViewPort = { x: 100, y: window.innerHeight / 4, zoom: 0.8 },
     onViewPortChange = () => { },
     nodePreview = 'flow',
-    defaultSelected = () => undefined
+    defaultSelected = () => undefined,
+    onNodeInitializationStatusChange = (initialized) => undefined 
 }: DiagramParams, ref) => {
     const reactFlowWrapper = useRef<HTMLElement | null>(null);
     const isDiagramVisible = reactFlowWrapper.current?.getBoundingClientRect()?.height > 0
@@ -78,6 +81,9 @@ const Diagram = React.forwardRef(({
     const setThemeMode = useFlowsStore(state => state.setTemeMode)
     const [internalData, setInternalData] = useState([])
     const { project, setViewport, getNodes, getViewport, setCenter, setEdges, getEdges, setNodes } = useProtoflow()
+    const nodesInitialized = useNodesInitialized();
+
+    useEffect(() => onNodeInitializationStatusChange(nodesInitialized), [nodesInitialized])
 
     const { undo, redo, takeSnapshot, clearNodes } = useUndoRedo();
     const connectingNode = useRef<{
@@ -302,7 +308,7 @@ const Diagram = React.forwardRef(({
     }, [nodePreview, zoomNodes[0]])
 
     const proOptions = { hideAttribution: true };
-
+    
     return (<div style={{ width: '100%', height: "100%" }} ref={ref as any}>
         <SelectionListener onSelectionChange={onSelectionChange} />
         <div style={{ height: '100%' }} ref={reactFlowWrapper as any}>

diff --git a/packages/protoflow/src/diagram/layouts/CodeLayout.tsx b/packages/protoflow/src/diagram/layouts/CodeLayout.tsx
@@ -109,6 +109,7 @@ const computeLayout = (nodes, edges, node, pos={x:0, y: 0}, metadata={}, tracker
 
 const getLayoutedElements = async (nodes, edges, node) => {
     const layoutedNodes = nodes.map(n => {return {...n}})
+    await sleep(1)
     const metadata = computeLayout(layoutedNodes, edges, node)
     await sleep(1)
     return { nodes:layoutedNodes, edges, metadata};

diff --git a/packages/protoflow/src/nodes/Block.tsx b/packages/protoflow/src/nodes/Block.tsx
@@ -75,10 +75,10 @@ const Block = (node) => {
             title: 'Case Clause'
         }
     }
+    const connectedEdges = id ? edges.filter(e => e.target == id) : []
 
     if (id) {
         React.useEffect(() => {
-            const connectedEdges = edges.filter(e => e.target == id)
             if (nodeData.mode != 'json' && (connectedEdges.length == nodeData?.connections?.length || !nodeData?.connections?.length)) {
                 addConnection()
             } else {
@@ -135,7 +135,7 @@ const Block = (node) => {
                     pos = pos + (nodeData.connections.length == 1 ? singleNodeOffset : marginTop)-10
                     //pos = 60 + (i * 60)
                     return <>
-                        <div style={{left: (nodeFontSize/2-1)+'px', position: 'absolute', top: (pos-(nodeFontSize/4)) + 'px', width: nodeFontSize+'px', height: (nodeFontSize/2)+'px', backgroundColor: typeConf[type].color}} />
+                        {connectedEdges.length > 0 && <div style={{left: (nodeFontSize/2-1)+'px', position: 'absolute', top: (pos-(nodeFontSize/4)) + 'px', width: nodeFontSize+'px', height: (nodeFontSize/2)+'px', backgroundColor: typeConf[type].color}} />}
                         <FlowPort key={i} id={id} type='input' label='' style={{ left:isEmpty?'':(nodeFontSize)+'px',top: pos + 'px' }} handleId={'block' + i} allowedTypes={["data", "flow"]}/>
                     </>
                 })}