reference line

packages/web/src/designer/Designer.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import DesignerTable from './DesignerTable';
 import uuidv1 from 'uuid/v1';
 import useTheme from '../theme/useTheme';
+import DesignerReference from './DesignerReference';
 
 const Wrapper = styled.div`
   flex: 1;
@@ -10,7 +11,7 @@ const Wrapper = styled.div`
 `;
 
 export default function Designer({ value, onChange }) {
-  const { tables } = value || {};
+  const { tables, references } = value || {};
   const theme = useTheme();
 
   const [sourceDragColumn, setSourceDragColumn] = React.useState(null);
@@ -66,8 +67,27 @@ export default function Designer({ value, onChange }) {
     [onChange, value]
   );
 
+  const handleCreateReference = (source, target) => {
+    const newValue = {
+      ...value,
+      references: [
+        ...(value.references || []),
+        {
+          designerId: uuidv1(),
+          source,
+          target,
+        },
+      ],
+    };
+
+    onChange(newValue);
+  };
+
   return (
     <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme}>
+      {(references || []).map((ref) => (
+        <DesignerReference key={ref.designerId} tables={tables} {...ref} />
+      ))}
       {(tables || []).map((table) => (
         <DesignerTable
           key={table.designerId}
@@ -75,6 +95,7 @@ export default function Designer({ value, onChange }) {
           setSourceDragColumn={setSourceDragColumn}
           targetDragColumn={targetDragColumn}
           setTargetDragColumn={setTargetDragColumn}
+          onCreateReference={handleCreateReference}
           table={table}
           onChangeTable={changeTable}
           onBringToFront={bringToFront}

packages/web/src/designer/DesignerReference.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledSvg = styled.svg`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+export default function DesignerReference({ tables, designerId, source, target }) {
+  const sourceTable = tables.find((x) => x.designerId == source.designerId);
+  const targetTable = tables.find((x) => x.designerId == target.designerId);
+  if (!sourceTable || !targetTable) return null;
+  console.log('LINE', sourceTable.left, sourceTable.top, targetTable.left, targetTable.top);
+  return (
+    <StyledSvg>
+      <line
+        x1={sourceTable.left}
+        y1={sourceTable.top}
+        x2={targetTable.left}
+        y2={targetTable.top}
+        style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
+      />
+    </StyledSvg>
+  );
+  // return <div>{source.columnName}</div>;
+}

packages/web/src/designer/DesignerTable.js

@@ -82,6 +82,7 @@ export default function DesignerTable({
   onChangeTable,
   onBringToFront,
   onRemoveTable,
+  onCreateReference,
   sourceDragColumn,
   setSourceDragColumn,
   targetDragColumn,
@@ -213,6 +214,7 @@ export default function DesignerTable({
               var data = e.dataTransfer.getData('designer_column_drag_data');
               e.preventDefault();
               if (!data) return;
+              onCreateReference(sourceDragColumn, targetDragColumn);
               setTargetDragColumn(null);
               setSourceDragColumn(null);
             }}