Merge pull request #23 from oslabs-beta/Reactflow

Make handle placement dynamic

Author: atu816

src/components/ReactFlow/TableNode.jsx

@@ -7,33 +7,50 @@ import useSettingsStore from '../../store/settingsStore';
 
 export default function TableNode({ data }) {
   const tableName = data.table[0];
+
   // columnData is an array of objects with each column in the table as an element
   const columnData = Object.values(data.table[1]);
   const [tableColumns, setTableColumns] = useState(columnData);
   const { setInputModalState } = useSettingsStore((state) => state);
+
   // function to generate handles on the table by iterating through all
   // schema edges to match source and target handles of edges to handle id
   const tableHandles = [];
   for (let i = 0; i < data.edges.length; i++) {
     if (data.edges[i].source === tableName) {
+      //make handle placement dynamic, we need to know the row of our source
+     let rowNumberSource = rowData.findIndex(obj => obj.Name === data.edges[i].sourceHandle) + 1;
+      if (rowNumberSource === 0) rowNumberSource = 1;
+      console.log('rowNumberSource', rowNumberSource)
+      console.log('data.edges[i].sourceHandle', data.edges[i].sourceHandle);
       tableHandles.push(
         <Handle
           key={`${data.edges[i]}-source-${[i]}`}
           type="source"
           position={Position.Right}
           id={data.edges[i].sourceHandle}
-          style={{ bottom: 9, top: 'auto' }}
+          style={{ background: 'transparent', 
+                   top: 96 + rowNumberSource * 21, 
+                   bottom: 'auto'}}
         />
       );
     }
     if (data.edges[i].target === tableName) {
+      //make handle placement dynamic, we need to know the row of our target
+      let rowNumberTarget = rowData.findIndex(obj => obj.Name === data.edges[i].targetHandle) + 1;
+      if (rowNumberTarget === 0) rowNumberTarget = 1;
+      console.log('rowNumberTarget', rowNumberTarget)
+      console.log('data.edges[i].targetHandle', data.edges[i].targetHandle);
       tableHandles.push(
         <Handle
           key={`${data.edges[i]}-target-${[i]}`}
           type="target"
           position={Position.Left}
           id={data.edges[i].targetHandle}
-          style={{ bottom: 'auto', top: 113 }}
+          style={{ 
+            background: 'transparent', 
+            top: 96 + rowNumberTarget * 21, 
+            bottom: 'auto'}}
         />
       );
     }

src/components/ReactFlow/createEdges.ts

@@ -36,14 +36,14 @@ export default function createEdges(schemaObject: SchemaStore) {
           label: `${row.References[0].ReferencesPropertyName}-to-${row.References[0].PrimaryKeyName}`,
           style: {
             strokeWidth: 2,
-            stroke: '#FF0072',
+            stroke: '#085c84',
           },
           markerEnd: {
             type: 'arrowclosed',
             orient: 'auto',
             width: 20,
             height: 20,
-            color: '#FF0072',
+            color: '#085c84',
           },
         });
       }

src/components/ReactFlow/createNodes.ts

@@ -15,23 +15,17 @@ type TableTuple = [TableKey: string, ColumnData: { [ColumnName: string]: ColumnS
 //hard-coded xy positioning of each node in the canvas
 export default function createNodes(schemaObject: SchemaStore, edges: Edge[]): Node[] {
   const nodePositions = [
+    { x: 1000, y: 400 },
+    { x: 1000, y: 0 },
+    { x: 0, y: 600 },
     { x: 0, y: 0 },
-    { x: 500, y: 0 },
-    { x: 0, y: 350 },
-    { x: 500, y: 350 },
-    { x: 0, y: 700 },
-    { x: 500, y: 700 },
+    { x: 2500, y: 200 },
+    { x: 0, y: 200 },
+    { x: 2000, y: 800 },
+    { x: 0, y: 400 },
+    { x: 0, y: 800 },
+    { x: 1000, y: 800 },
     { x: 0, y: 1050 },
-    { x: 500, y: 1050 },
-    { x: 0, y: 1400 },
-    { x: 500, y: 1400 },
-    { x: 0, y: 1750 },
-    { x: 500, y: 1750 },
-    { x: 0, y: 2100 },
-    { x: 500, y: 2100 },
-    { x: 0, y: 2450 },
-    { x: 500, y: 2450 },
-    { x: 0, y: 2450 },
   ];
   // renders each table on the React Flow canvas
   const nodes: Node[] = [];
@@ -41,6 +35,7 @@ export default function createNodes(schemaObject: SchemaStore, edges: Edge[]): N
     nodes.push({
       id: tableKey,
       type: 'table',
+
       position: nodePositions[i],
       // position: {x: Math.random() * window.innerWidth, y: Math.random() * window.innerWidth},
       data: { table: [tableKey, columnData], edges },